fix: tsc error

.changeset/eight-worms-cough.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/aria-utils": patch
+---
+
+Fix tsc error (#2365, #2314, #2505)

packages/components/autocomplete/stories/autocomplete.stories.tsx

@@ -431,9 +431,9 @@ const ItemStartContentTemplate = ({color, variant, ...args}: AutocompleteProps<A
 );
 
 const ControlledTemplate = ({color, variant, ...args}: AutocompleteProps<Animal>) => {
-  const [value, setValue] = React.useState<Key>("cat");
+  const [value, setValue] = React.useState<Key | null>("cat");
 
-  const handleSelectionChange = (key: Key) => {
+  const handleSelectionChange = (key: Key | null) => {
     setValue(key);
   };
 

packages/components/badge/stories/badge.stories.tsx

@@ -68,7 +68,7 @@ const defaultProps = {
 const Template = (args: BadgeProps) => (
   <Badge {...args}>
     <Avatar
-      isBordered={args.classNames?.badge?.includes("bottom")}
+      isBordered={(args.classNames?.badge as string)?.includes("bottom")}
       radius={args.shape === "rectangle" ? "lg" : "full"}
       src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
     />

packages/components/calendar/src/calendar-base.tsx

@@ -59,8 +59,8 @@ export function CalendarBase(props: CalendarBaseProps) {
 
   const currentMonth = state.visibleRange.start;
 
-  const headers = [];
-  const calendars = [];
+  const headers: React.ReactNode[] = [];
+  const calendars: React.ReactNode[] = [];
 
   for (let i = 0; i < visibleMonths; i++) {
     let d = currentMonth.add({months: i});

packages/components/select/__tests__/select.test.tsx

@@ -83,7 +83,7 @@ describe("Select", () => {
   it("should render correctly (dynamic)", () => {
     const wrapper = render(
       <Select aria-label="Favorite Animal" items={itemsData} label="Favorite Animal">
-        {(item) => <SelectItem>{item.label}</SelectItem>}
+        {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
       </Select>,
     );
 
@@ -110,7 +110,7 @@ describe("Select", () => {
     const wrapper = render(
       <Select aria-label="Favorite Animal" items={itemsSectionData} label="Favorite Animal">
         {(section) => (
-          <SelectSection<Item>
+          <SelectSection<(typeof itemsSectionData)[0]["children"][0]>
             aria-label={section.title}
             items={section.children}
             title={section.title}
@@ -363,7 +363,7 @@ describe("Select", () => {
         label="Test with ID"
         onSelectionChange={onSelectionChangeId}
       >
-        {(item) => <SelectItem>{item.value}</SelectItem>}
+        {(item) => <SelectItem key={item.id}>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -403,7 +403,7 @@ describe("Select", () => {
         label="Test with Key"
         onSelectionChange={onSelectionChangeKey}
       >
-        {(item) => <SelectItem>{item.value}</SelectItem>}
+        {(item) => <SelectItem key={item.key}>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -561,6 +561,7 @@ describe("Select", () => {
           const formData = new FormData(e.target as HTMLFormElement);
 
           /* eslint-disable no-console */
+          // @ts-ignore
           console.log(JSON.stringify(Object.fromEntries(formData)));
         }}
       >
@@ -648,19 +649,19 @@ describe("Select with React Hook Form", () => {
     wrapper = render(
       <form className="flex flex-col gap-4" onSubmit={handleSubmit(onSubmit)}>
         <Select data-testid="select-1" items={itemsData} {...register("withDefaultValue")}>
-          {(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
+          {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
         </Select>
 
         <Select data-testid="select-2" items={itemsData} {...register("withoutDefaultValue")}>
-          {(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
+          {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
         </Select>
 
         <Select
           data-testid="select-3"
           items={itemsData}
           {...register("requiredField", {required: true})}
         >
-          {(item) => <SelectItem key={item.value}>{item.label}</SelectItem>}
+          {(item) => <SelectItem key={item.id}>{item.label}</SelectItem>}
         </Select>
 
         {errors.requiredField && <span className="text-danger">This field is required</span>}

packages/utilities/aria-utils/src/collections/section.ts

@@ -7,4 +7,4 @@ import {HTMLNextUIProps, As} from "@nextui-org/system";
  *
  */
 export type SectionProps<Type extends As = "div", T extends object = {}> = BaseSectionProps<T> &
-  HTMLNextUIProps<Type>;
+  Omit<HTMLNextUIProps<Type>, "children">;

tsconfig.json

@@ -15,7 +15,8 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "noImplicitAny": false
   },
   "include": ["packages"],
   "exclude": ["**/node_modules", "**/dist", "**/.turbo"]