fix: tsc errors (#3362)

* fix: tsc error

* docs: changeset

* fix: test

* fix: test

* fix: review problem

* fix: review

.changeset/eight-worms-cough.md

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

apps/docs/components/code-window/code-block.tsx

@@ -39,7 +39,7 @@ export type CodeBlockProps = PreProps & {
  * recursively get all text nodes as an array for a given element
  */
 function getTextNodes(node: any): any[] {
-  let childTextNodes = [];
+  let childTextNodes: React.ReactNode[] = [];
 
   if (!node.hasChildNodes()) return [];
 

apps/docs/components/sonar-pulse.tsx

@@ -41,7 +41,7 @@ export const SonarPulse: FC<SonarPulseProps> = ({
   }, [circlesCount, color]);
 
   const renderCircles = useMemo(() => {
-    const circles = [];
+    const circles: React.ReactNode[] = [];
 
     for (let i = 1; i < circlesCount; i++) {
       circles.push(

apps/docs/scripts/update-search-meta.ts

@@ -54,7 +54,7 @@ async function getMDXMeta(file: string) {
 
 
   const result:ResultType[] = [];
-  const title = !!frontMatter.title ? frontMatter.title : "";
+  const title = frontMatter.title || "";
 
   result.push({
     content: title,
@@ -96,7 +96,7 @@ async function getSearchMeta(saveMode: "algolia" | "local" = "local") {
       .filter((file: any) => file.endsWith(".mdx"));
 
     for (const file of files) {
-      let result = [];
+      let result: ResultType[] = [];
 
       try {
         result = await getMDXMeta(file);

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

@@ -65,15 +65,22 @@ const defaultProps = {
   content: 5,
 };
 
-const Template = (args: BadgeProps) => (
-  <Badge {...args}>
-    <Avatar
-      isBordered={args.classNames?.badge?.includes("bottom")}
-      radius={args.shape === "rectangle" ? "lg" : "full"}
-      src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-    />
-  </Badge>
-);
+const Template = (args: BadgeProps) => {
+  const classNamesBadge = args.classNames?.badge;
+  const isBordered = Array.isArray(classNamesBadge)
+    ? classNamesBadge?.some((c) => (c as string).includes("bottom"))
+    : (classNamesBadge as string)?.includes("bottom");
+
+  return (
+    <Badge {...args}>
+      <Avatar
+        isBordered={isBordered}
+        radius={args.shape === "rectangle" ? "lg" : "full"}
+        src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
+      />
+    </Badge>
+  );
+};
 
 const ShapesTemplate = (args: BadgeProps) => (
   <div className="flex gap-4 items-center">

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

@@ -85,7 +85,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>,
     );
 
@@ -112,7 +112,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}
@@ -352,9 +352,9 @@ describe("Select", () => {
 
   it("onSelectionChange should be called with a Set of item ids upon selection", async () => {
     const itemsWithId = [
-      {id: 1, value: "penguin"},
-      {id: 2, value: "zebra"},
-      {id: 3, value: "shark"},
+      {id: "1", value: "penguin"},
+      {id: "2", value: "zebra"},
+      {id: "3", value: "shark"},
     ];
 
     const onSelectionChangeId = jest.fn();
@@ -365,7 +365,7 @@ describe("Select", () => {
         label="Test with ID"
         onSelectionChange={onSelectionChangeId}
       >
-        {(item) => <SelectItem>{item.value}</SelectItem>}
+        {(item) => <SelectItem key={item.id}>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -392,9 +392,9 @@ describe("Select", () => {
 
   it("onSelectionChange should be called with a Set of item keys upon selection", async () => {
     const itemsWithKey = [
-      {key: 1, value: "penguin"},
-      {key: 2, value: "zebra"},
-      {key: 3, value: "shark"},
+      {key: "1", value: "penguin"},
+      {key: "2", value: "zebra"},
+      {key: "3", value: "shark"},
     ];
 
     const onSelectionChangeKey = jest.fn();
@@ -405,7 +405,7 @@ describe("Select", () => {
         label="Test with Key"
         onSelectionChange={onSelectionChangeKey}
       >
-        {(item) => <SelectItem>{item.value}</SelectItem>}
+        {(item) => <SelectItem key={item.key}>{item.value}</SelectItem>}
       </Select>,
     );
 
@@ -563,6 +563,7 @@ describe("Select", () => {
           const formData = new FormData(e.target as HTMLFormElement);
 
           /* eslint-disable no-console */
+          // @ts-ignore
           console.log(JSON.stringify(Object.fromEntries(formData)));
         }}
       >
@@ -683,11 +684,11 @@ 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
@@ -695,7 +696,7 @@ describe("Select with React Hook Form", () => {
           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"]