diff --git a/apps/ui/public/r/combobox.json b/apps/ui/public/r/combobox.json index e9c8a1ddc..29d419c90 100644 --- a/apps/ui/public/r/combobox.json +++ b/apps/ui/public/r/combobox.json @@ -12,7 +12,7 @@ "files": [ { "path": "registry/default/ui/combobox.tsx", - "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nconst ComboboxContext = React.createContext<{\n chipsRef: React.RefObject | null;\n multiple: boolean;\n}>({\n chipsRef: null,\n multiple: false,\n});\n\nfunction Combobox(\n props: ComboboxPrimitive.Root.Props,\n): React.JSX.Element {\n const chipsRef = React.useRef(null);\n return (\n \n \n \n );\n}\n\nfunction ComboboxChipsInput({\n className,\n size,\n ...props\n}: Omit & {\n size?: \"sm\" | \"default\" | \"lg\" | number;\n ref?: React.Ref;\n}) {\n const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n return (\n \n );\n}\n\nfunction ComboboxInput({\n className,\n showTrigger = true,\n showClear = false,\n startAddon,\n size,\n ...props\n}: Omit & {\n showTrigger?: boolean;\n showClear?: boolean;\n startAddon?: React.ReactNode;\n size?: \"sm\" | \"default\" | \"lg\" | number;\n ref?: React.Ref;\n}) {\n const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n return (\n
*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\">\n {startAddon && (\n \n {startAddon}\n
\n )}\n \n }\n {...props}\n />\n {showTrigger && (\n \n \n \n \n \n )}\n {showClear && (\n \n \n \n )}\n \n );\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n );\n}\n\nfunction ComboboxPopup({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n alignOffset,\n align = \"start\",\n ...props\n}: ComboboxPrimitive.Popup.Props & {\n align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n}) {\n const { chipsRef } = React.useContext(ComboboxContext);\n\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n \n \n \n \n \n
{children}
\n \n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n );\n}\n\nfunction ComboboxGroupLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n );\n}\n\nfunction ComboboxRow({ className, ...props }: ComboboxPrimitive.Row.Props) {\n return (\n \n );\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return ;\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n \n \n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n \n );\n}\n\nfunction ComboboxStatus({\n className,\n ...props\n}: ComboboxPrimitive.Status.Props) {\n return (\n \n );\n}\n\nfunction ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {\n return (\n \n );\n}\n\nfunction ComboboxChips({\n className,\n children,\n startAddon,\n ...props\n}: ComboboxPrimitive.Chips.Props & {\n startAddon?: React.ReactNode;\n}) {\n const { chipsRef } = React.useContext(ComboboxContext);\n\n return (\n {\n const target = e.target as HTMLElement;\n const isChip = target.closest('[data-slot=\"combobox-chip\"]');\n if (isChip || !chipsRef?.current) return;\n e.preventDefault();\n const input: HTMLInputElement | null =\n chipsRef.current.querySelector(\"input\");\n if (input && !chipsRef.current.querySelector(\"input:focus\")) {\n input.focus();\n }\n }}\n ref={chipsRef as React.Ref | null}\n {...props}\n >\n {startAddon && (\n \n {startAddon}\n \n )}\n {children}\n \n );\n}\n\nfunction ComboboxChip({ children, ...props }: ComboboxPrimitive.Chip.Props) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction ComboboxChipRemove(props: ComboboxPrimitive.ChipRemove.Props) {\n return (\n \n \n \n );\n}\n\nconst useComboboxFilter = ComboboxPrimitive.useFilter;\n\nexport {\n Combobox,\n ComboboxChipsInput,\n ComboboxInput,\n ComboboxTrigger,\n ComboboxPopup,\n ComboboxItem,\n ComboboxSeparator,\n ComboboxGroup,\n ComboboxGroupLabel,\n ComboboxEmpty,\n ComboboxValue,\n ComboboxList,\n ComboboxClear,\n ComboboxStatus,\n ComboboxRow,\n ComboboxCollection,\n ComboboxChips,\n ComboboxChip,\n useComboboxFilter,\n};\n", + "content": "\"use client\";\n\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react/combobox\";\nimport { ChevronsUpDownIcon, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Input } from \"@/registry/default/ui/input\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nconst ComboboxContext = React.createContext<{\n chipsRef: React.RefObject | null;\n multiple: boolean;\n}>({\n chipsRef: null,\n multiple: false,\n});\n\nfunction Combobox(\n props: ComboboxPrimitive.Root.Props,\n): React.JSX.Element {\n const chipsRef = React.useRef(null);\n return (\n \n \n \n );\n}\n\nfunction ComboboxChipsInput({\n className,\n size,\n ...props\n}: Omit & {\n size?: \"sm\" | \"default\" | \"lg\" | number;\n ref?: React.Ref;\n}) {\n const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n return (\n \n );\n}\n\nfunction ComboboxInput({\n className,\n showTrigger = true,\n showClear = false,\n startAddon,\n size,\n ...props\n}: Omit & {\n showTrigger?: boolean;\n showClear?: boolean;\n startAddon?: React.ReactNode;\n size?: \"sm\" | \"default\" | \"lg\" | number;\n ref?: React.Ref;\n}) {\n const sizeValue = (size ?? \"default\") as \"sm\" | \"default\" | \"lg\" | number;\n\n return (\n
*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64\">\n {startAddon && (\n \n {startAddon}\n
\n )}\n \n }\n {...props}\n />\n {showTrigger && (\n \n \n \n \n \n )}\n {showClear && (\n \n \n \n )}\n \n );\n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n );\n}\n\nfunction ComboboxPopup({\n className,\n children,\n side = \"bottom\",\n sideOffset = 4,\n alignOffset,\n align = \"start\",\n ...props\n}: ComboboxPrimitive.Popup.Props & {\n align?: ComboboxPrimitive.Positioner.Props[\"align\"];\n sideOffset?: ComboboxPrimitive.Positioner.Props[\"sideOffset\"];\n alignOffset?: ComboboxPrimitive.Positioner.Props[\"alignOffset\"];\n side?: ComboboxPrimitive.Positioner.Props[\"side\"];\n}) {\n const { chipsRef } = React.useContext(ComboboxContext);\n\n return (\n \n \n \n \n {children}\n \n \n \n \n );\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n \n \n \n \n \n
{children}
\n \n );\n}\n\nfunction ComboboxSeparator({\n className,\n ...props\n}: ComboboxPrimitive.Separator.Props) {\n return (\n \n );\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n );\n}\n\nfunction ComboboxGroupLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n );\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n );\n}\n\nfunction ComboboxRow({ className, ...props }: ComboboxPrimitive.Row.Props) {\n return (\n \n );\n}\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return ;\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n \n \n );\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n \n );\n}\n\nfunction ComboboxStatus({\n className,\n ...props\n}: ComboboxPrimitive.Status.Props) {\n return (\n \n );\n}\n\nfunction ComboboxCollection(props: ComboboxPrimitive.Collection.Props) {\n return (\n \n );\n}\n\nfunction ComboboxChips({\n className,\n children,\n startAddon,\n ...props\n}: ComboboxPrimitive.Chips.Props & {\n startAddon?: React.ReactNode;\n}) {\n const { chipsRef } = React.useContext(ComboboxContext);\n\n return (\n | null}\n {...props}\n >\n {startAddon && (\n \n {startAddon}\n \n )}\n {children}\n \n );\n}\n\nfunction ComboboxChip({ children, ...props }: ComboboxPrimitive.Chip.Props) {\n return (\n \n {children}\n \n \n );\n}\n\nfunction ComboboxChipRemove(props: ComboboxPrimitive.ChipRemove.Props) {\n return (\n \n \n \n );\n}\n\nconst useComboboxFilter = ComboboxPrimitive.useFilter;\n\nexport {\n Combobox,\n ComboboxChipsInput,\n ComboboxInput,\n ComboboxTrigger,\n ComboboxPopup,\n ComboboxItem,\n ComboboxSeparator,\n ComboboxGroup,\n ComboboxGroupLabel,\n ComboboxEmpty,\n ComboboxValue,\n ComboboxList,\n ComboboxClear,\n ComboboxStatus,\n ComboboxRow,\n ComboboxCollection,\n ComboboxChips,\n ComboboxChip,\n useComboboxFilter,\n};\n", "type": "registry:ui" } ] diff --git a/apps/ui/registry/default/ui/combobox.tsx b/apps/ui/registry/default/ui/combobox.tsx index a79b48d96..b4fb19905 100644 --- a/apps/ui/registry/default/ui/combobox.tsx +++ b/apps/ui/registry/default/ui/combobox.tsx @@ -350,17 +350,6 @@ function ComboboxChips({ className, )} data-slot="combobox-chips" - onMouseDown={(e) => { - const target = e.target as HTMLElement; - const isChip = target.closest('[data-slot="combobox-chip"]'); - if (isChip || !chipsRef?.current) return; - e.preventDefault(); - const input: HTMLInputElement | null = - chipsRef.current.querySelector("input"); - if (input && !chipsRef.current.querySelector("input:focus")) { - input.focus(); - } - }} ref={chipsRef as React.Ref | null} {...props} > diff --git a/packages/ui/src/components/combobox.tsx b/packages/ui/src/components/combobox.tsx index c8b091813..061d72d5f 100644 --- a/packages/ui/src/components/combobox.tsx +++ b/packages/ui/src/components/combobox.tsx @@ -350,17 +350,6 @@ function ComboboxChips({ className, )} data-slot="combobox-chips" - onMouseDown={(e) => { - const target = e.target as HTMLElement; - const isChip = target.closest('[data-slot="combobox-chip"]'); - if (isChip || !chipsRef?.current) return; - e.preventDefault(); - const input: HTMLInputElement | null = - chipsRef.current.querySelector("input"); - if (input && !chipsRef.current.querySelector("input:focus")) { - input.focus(); - } - }} ref={chipsRef as React.Ref | null} {...props} >