refactor: update Combobox and Spinner components to use Element type for chipsRef and improve Spinner props handling (#600)

Author: pasqualevitiello

apps/ui/public/r/combobox.json

@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/default/ui/spinner.tsx",
-      "content": "import { Loader2Icon } from \"lucide-react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Spinner({ className, ...props }: React.ComponentProps<\"svg\">) {\n  return (\n    <Loader2Icon\n      aria-label=\"Loading\"\n      className={cn(\"animate-spin\", className)}\n      role=\"status\"\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n",
+      "content": "import { cn } from \"@coss/ui/lib/utils\";\nimport { Loader2Icon } from \"lucide-react\";\n\nfunction Spinner({\n  className,\n  ...props\n}: React.ComponentProps<typeof Loader2Icon>) {\n  return (\n    <Loader2Icon\n      aria-label=\"Loading\"\n      className={cn(\"animate-spin\", className)}\n      role=\"status\"\n      {...props}\n    />\n  );\n}\n\nexport { Spinner };\n",
       "type": "registry:ui"
     }
   ]

apps/ui/public/r/spinner.json

@@ -9,7 +9,7 @@ import { Input } from "@/registry/default/ui/input";
 import { ScrollArea } from "@/registry/default/ui/scroll-area";
 
 const ComboboxContext = React.createContext<{
-  chipsRef: React.RefObject<HTMLDivElement | null> | null;
+  chipsRef: React.RefObject<Element | null> | null;
   multiple: boolean;
 }>({
   chipsRef: null,
@@ -24,7 +24,7 @@ type ComboboxRootProps<
 function Combobox<ItemValue, Multiple extends boolean | undefined = false>(
   props: ComboboxPrimitive.Root.Props<ItemValue, Multiple>,
 ) {
-  const chipsRef = React.useRef<HTMLDivElement | null>(null);
+  const chipsRef = React.useRef<Element | null>(null);
   return (
     <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>
       <ComboboxPrimitive.Root
@@ -309,7 +309,7 @@ function ComboboxChips({ className, ...props }: ComboboxPrimitive.Chips.Props) {
         className,
       )}
       data-slot="combobox-chips"
-      ref={chipsRef}
+      ref={chipsRef as React.Ref<HTMLDivElement> | null}
       {...props}
     />
   );

apps/ui/registry/default/ui/combobox.tsx

@@ -1,8 +1,10 @@
+import { cn } from "@coss/ui/lib/utils";
 import { Loader2Icon } from "lucide-react";
 
-import { cn } from "@/registry/default/lib/utils";
-
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+function Spinner({
+  className,
+  ...props
+}: React.ComponentProps<typeof Loader2Icon>) {
   return (
     <Loader2Icon
       aria-label="Loading"

apps/ui/registry/default/ui/spinner.tsx

@@ -9,7 +9,7 @@ import { Input } from "@coss/ui/components/input";
 import { ScrollArea } from "@coss/ui/components/scroll-area";
 
 const ComboboxContext = React.createContext<{
-  chipsRef: React.RefObject<HTMLDivElement | null> | null;
+  chipsRef: React.RefObject<Element | null> | null;
   multiple: boolean;
 }>({
   chipsRef: null,
@@ -24,7 +24,7 @@ type ComboboxRootProps<
 function Combobox<ItemValue, Multiple extends boolean | undefined = false>(
   props: ComboboxPrimitive.Root.Props<ItemValue, Multiple>,
 ) {
-  const chipsRef = React.useRef<HTMLDivElement | null>(null);
+  const chipsRef = React.useRef<Element | null>(null);
   return (
     <ComboboxContext.Provider value={{ chipsRef, multiple: !!props.multiple }}>
       <ComboboxPrimitive.Root
@@ -309,7 +309,7 @@ function ComboboxChips({ className, ...props }: ComboboxPrimitive.Chips.Props) {
         className,
       )}
       data-slot="combobox-chips"
-      ref={chipsRef}
+      ref={chipsRef as React.Ref<HTMLDivElement> | null}
       {...props}
     />
   );

packages/ui/src/components/combobox.tsx

@@ -1,8 +1,10 @@
-import { Loader2Icon } from "lucide-react";
-
 import { cn } from "@coss/ui/lib/utils";
+import { Loader2Icon } from "lucide-react";
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+function Spinner({
+  className,
+  ...props
+}: React.ComponentProps<typeof Loader2Icon>) {
   return (
     <Loader2Icon
       aria-label="Loading"