4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T4c9c,"use client"; import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import * as React from "react"; import { Button } from "@/components/ui/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "@/components/ui/command"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import type { ExtractOption, ExtractOptionValue } from "@/lib/typed-utils"; import { cn } from "@/lib/utils"; // ============================================================================= // Types // ============================================================================= /** * Supported value types for TypedCombobox. * Values are serialized to strings internally but typed correctly externally. */ export type ComboboxValueType = string | number | boolean; /** * Default option type with value and label. * Use this as a reference for your custom option types. */ export type ComboboxOption = { value: T; label: string; disabled?: boolean; }; /** * A group of combobox options with a label. * @template TOption - The full option type including custom properties */ export type ComboboxOptionGroup = { label: string; options: TOption[]; }; // ============================================================================= // Render Props Types // ============================================================================= /** * Props passed to renderTrigger function. * @template TOption - The full option type including custom properties */ export type ComboboxTriggerRenderProps = { /** Currently selected option (undefined if none) */ selectedOption: TOption | undefined; /** Placeholder text */ placeholder: string; /** Whether the combobox is open */ open: boolean; /** Whether the combobox is disabled */ disabled: boolean; /** Default Button component */ Button: typeof Button; }; /** * Props passed to renderItem function. * @template TOption - The full option type including custom properties */ export type ComboboxItemRenderProps = { /** The option data */ option: TOption; /** Whether this option is currently selected */ isSelected: boolean; /** Whether this option is disabled */ isDisabled: boolean; /** Group this option belongs to (undefined if ungrouped) */ group: ComboboxOptionGroup | undefined; /** Props to spread on CommandItem */ itemProps: { value: string; disabled?: boolean; onSelect: () => void; }; /** Default item component */ Item: typeof CommandItem; }; /** * Props passed to renderGroup function. * @template TOption - The full option type including custom properties */ export type ComboboxGroupRenderProps = { /** The group data */ group: ComboboxOptionGroup; /** Rendered items inside this group */ children: React.ReactNode; /** Default group component */ Group: typeof CommandGroup; }; /** * Props passed to renderEmpty function. */ export type ComboboxEmptyRenderProps = { /** The current search query */ searchQuery: string; /** Default empty component */ Empty: typeof CommandEmpty; }; /** * Props passed to renderContent function. */ export type ComboboxContentRenderProps = { /** Rendered items/groups */ children: React.ReactNode; /** Default content components */ Command: typeof Command; CommandInput: typeof CommandInput; CommandList: typeof CommandList; /** Current search query */ searchQuery: string; /** Update search query */ setSearchQuery: (query: string) => void; /** Search input placeholder */ searchPlaceholder: string; /** Empty state component */ emptyState: React.ReactNode; }; /** * Core props for TypedCombobox (for documentation). */ export interface TypedComboboxBaseProps< TOptions extends | readonly Record[] | readonly ComboboxOptionGroup>[], TValueKey extends string = "value", TLabelKey extends string = "label", > { /** Array of options or grouped options */ options: TOptions; /** The key to use for the option value (default: "value") */ valueKey?: TValueKey; /** The key to use for the option label (default: "label") */ labelKey?: TLabelKey; /** Controlled value */ value?: ExtractOptionValue; /** Default value for uncontrolled usage */ defaultValue?: ExtractOptionValue; /** Callback when value changes - receives the typed value */ onValueChange?: (value: ExtractOptionValue) => void; /** Placeholder text for the trigger button */ placeholder?: string; /** Placeholder text for the search input */ searchPlaceholder?: string; /** Text to show when no options match the search */ emptyText?: string; /** Custom render for trigger */ renderTrigger?: ( props: ComboboxTriggerRenderProps>, ) => React.ReactNode; /** Custom render for each item */ renderItem?: ( props: ComboboxItemRenderProps>, ) => React.ReactNode; /** Custom render for each group */ renderGroup?: ( props: ComboboxGroupRenderProps>, ) => React.ReactNode; /** Custom render for empty state */ renderEmpty?: (props: ComboboxEmptyRenderProps) => React.ReactNode; /** Custom render for content wrapper */ renderContent?: (props: ComboboxContentRenderProps) => React.ReactNode; /** Whether the combobox is disabled */ disabled?: boolean; /** Whether the combobox is open (controlled) */ open?: boolean; /** Callback when open state changes */ onOpenChange?: (open: boolean) => void; /** Custom filter function for search */ filterFn?: (option: ExtractOption, searchQuery: string) => boolean; /** Width of the popover content */ popoverWidth?: string | number; /** Class name for the trigger button */ triggerClassName?: string; /** Class name for the popover content */ contentClassName?: string; } /** * Props for the TypedCombobox component. * @template TOptions - The options array type * @template TValueKey - The key used for the value property (default: "value") * @template TLabelKey - The key used for the label property (default: "label") */ export interface TypedComboboxProps< TOptions extends | readonly Record[] | readonly ComboboxOptionGroup>[], TValueKey extends string = "value", TLabelKey extends string = "label", > extends TypedComboboxBaseProps {} // ============================================================================= // Helpers // ============================================================================= /** * Type guard to check if options are grouped */ function isGroupedOptions( options: readonly TOption[] | readonly ComboboxOptionGroup[], ): options is readonly ComboboxOptionGroup[] { return options.length > 0 && "options" in (options[0] as object); } /** * Serialize a value to string for internal use */ function serializeValue(value: T): string { if (typeof value === "boolean") { return value ? "__boolean_true__" : "__boolean_false__"; } if (typeof value === "number") { return `__number_${value}__`; } return String(value); } /** * Deserialize a string value back to its original type */ function deserializeValue>( serialized: string, options: readonly TOption[] | readonly ComboboxOptionGroup[], valueKey: keyof TOption, ): TOption[keyof TOption] { const allOptions = isGroupedOptions(options) ? options.flatMap((group) => group.options) : options; const found = allOptions.find( (opt) => serializeValue(opt[valueKey] as ComboboxValueType) === serialized, ); return found?.[valueKey] as TOption[keyof TOption]; } /** * Find the selected option object from the current value. * Handles both flat and grouped options. */ function findSelectedOption>( value: TOption[keyof TOption] | undefined, options: readonly TOption[] | readonly ComboboxOptionGroup[], valueKey: keyof TOption, ): TOption | undefined { if (value === undefined) return undefined; const allOptions = isGroupedOptions(options) ? options.flatMap((group) => group.options) : options; return allOptions.find((opt) => opt[valueKey] === value); } /** * Default filter function - matches label against search query */ function defaultFilterFn>( option: TOption, searchQuery: string, labelKey: keyof TOption, ): boolean { const label = String(option[labelKey] ?? "").toLowerCase(); return label.includes(searchQuery.toLowerCase()); } // ============================================================================= // Default Render Functions // ============================================================================= function createDefaultRenderTrigger< TOption extends Record, TLabelKey extends keyof TOption, >(labelKey: TLabelKey, triggerClassName?: string) { return function defaultRenderTrigger({ selectedOption, placeholder, open, disabled, Button: ButtonComponent, }: ComboboxTriggerRenderProps): React.ReactNode { const label = selectedOption ? String(selectedOption[labelKey] ?? "") : placeholder; return ( ); }; } function createDefaultRenderItem< TOption extends Record, TLabelKey extends keyof TOption, >(labelKey: TLabelKey) { return function defaultRenderItem({ option, isSelected, itemProps, Item, }: ComboboxItemRenderProps): React.ReactNode { const label = String(option[labelKey] ?? ""); return ( {label} ); }; } function defaultRenderEmpty({ Empty, }: ComboboxEmptyRenderProps): React.ReactNode { return No results found.; } function defaultRenderContent({ children, Command: CommandComponent, CommandInput: CommandInputComponent, CommandList: CommandListComponent, searchQuery, setSearchQuery, searchPlaceholder, emptyState, }: ComboboxContentRenderProps): React.ReactNode { return ( {emptyState} {children} ); } // ============================================================================= // Component // ============================================================================= /** * A headless, type-safe combobox component with full TypeScript inference * and customizable rendering via render props. * * @example * ```tsx * // Default usage with value/label keys * { * // value: "next" | "remix" | "astro" * }} * /> * * // Custom keys usage with id/name * { * // value: 1 | 2 * }} * /> * ``` */ function TypedCombobox< TOptions extends | readonly Record[] | readonly ComboboxOptionGroup>[], TValueKey extends string = "value", TLabelKey extends string = "label", >({ options, valueKey = "value" as TValueKey, labelKey = "label" as TLabelKey, value, defaultValue, onValueChange, placeholder = "Select an option...", searchPlaceholder = "Search...", emptyText: _emptyText = "No results found.", open: controlledOpen, onOpenChange, disabled = false, filterFn, popoverWidth = 200, triggerClassName, contentClassName, renderTrigger, renderItem, renderGroup, renderEmpty = defaultRenderEmpty, renderContent = defaultRenderContent, }: TypedComboboxProps) { // Extract the actual option type for internal use type TOption = ExtractOption & Record; type TValue = ExtractOptionValue; // Track open state internally const [internalOpen, setInternalOpen] = React.useState(false); const open = controlledOpen ?? internalOpen; // Track internal value for uncontrolled mode const [internalValue, setInternalValue] = React.useState( defaultValue, ); // Track search query const [searchQuery, setSearchQuery] = React.useState(""); // Use controlled value if provided, otherwise use internal state const currentValue = value !== undefined ? value : internalValue; const handleOpenChange = (newOpen: boolean) => { setInternalOpen(newOpen); onOpenChange?.(newOpen); // Reset search when closing if (!newOpen) { setSearchQuery(""); } }; const handleSelect = (serialized: string) => { const deserialized = deserializeValue( serialized, options as readonly TOption[] | readonly ComboboxOptionGroup[], valueKey as keyof TOption, ); // Toggle selection - if same value is selected, deselect const newValue = currentValue === deserialized ? undefined : (deserialized as TValue); // Update internal state for uncontrolled mode if (value === undefined) { setInternalValue(newValue); } if (onValueChange && newValue !== undefined) { onValueChange(newValue); } handleOpenChange(false); }; const selectedOption = findSelectedOption( currentValue as TOption[keyof TOption] | undefined, options as readonly TOption[] | readonly ComboboxOptionGroup[], valueKey as keyof TOption, ); const serializedValue = currentValue !== undefined ? serializeValue(currentValue as ComboboxValueType) : undefined; // Use provided renderTrigger or create default with labelKey const actualRenderTrigger: ( props: ComboboxTriggerRenderProps>, ) => React.ReactNode = renderTrigger ?? (createDefaultRenderTrigger( labelKey as keyof TOption, triggerClassName, ) as ( props: ComboboxTriggerRenderProps>, ) => React.ReactNode); // Use provided renderItem or create default with labelKey const actualRenderItem = renderItem ?? createDefaultRenderItem(labelKey as keyof TOption); // Filter options based on search query const filterOption = (option: TOption): boolean => { if (!searchQuery) return true; if (filterFn) { return filterFn(option as ExtractOption, searchQuery); } return defaultFilterFn(option, searchQuery, labelKey as keyof TOption); }; // Get filtered options const getFilteredOptions = (): | readonly TOption[] | readonly ComboboxOptionGroup[] => { const opts = options as | readonly TOption[] | readonly ComboboxOptionGroup[]; if (isGroupedOptions(opts)) { return opts .map((group) => ({ ...group, options: group.options.filter(filterOption), })) .filter((group) => group.options.length > 0); } return (opts as readonly TOption[]).filter(filterOption); }; const filteredOptions = getFilteredOptions(); // Check if there are any results const hasResults = isGroupedOptions(filteredOptions) ? filteredOptions.some((g) => g.options.length > 0) : filteredOptions.length > 0; // Render a single item const renderSingleItem = ( option: TOption, group: ComboboxOptionGroup | undefined, ) => { const optionValue = option[valueKey as keyof TOption] as ComboboxValueType; const serialized = serializeValue(optionValue); const isSelected = serializedValue === serialized; const isDisabled = (option as { disabled?: boolean }).disabled ?? false; return ( {actualRenderItem({ option, isSelected, isDisabled, group, itemProps: { value: serialized, disabled: isDisabled, onSelect: () => handleSelect(serialized), }, Item: CommandItem, })} ); }; // Render all items (grouped or flat) const renderItems = () => { if (isGroupedOptions(filteredOptions)) { return filteredOptions.map((group) => { const groupChildren = group.options.map((option) => renderSingleItem( option as TOption, group as ComboboxOptionGroup, ), ); if (renderGroup) { return ( {renderGroup({ group: group as ComboboxOptionGroup>, children: groupChildren, Group: CommandGroup, })} ); } // Default group rendering if renderGroup not provided return ( {groupChildren} ); }); } return (filteredOptions as readonly TOption[]).map((option) => renderSingleItem(option, undefined), ); }; // Render empty state const emptyState = !hasResults ? renderEmpty({ searchQuery, Empty: CommandEmpty, }) : null; const popoverWidthStyle = typeof popoverWidth === "number" ? `${popoverWidth}px` : popoverWidth; return ( {actualRenderTrigger({ selectedOption: selectedOption as unknown as | ExtractOption | undefined, placeholder, open, disabled, Button, })} {renderContent({ children: renderItems(), Command, CommandInput, CommandList, searchQuery, setSearchQuery, searchPlaceholder, emptyState, })} ); } export { TypedCombobox }; 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":["button","command","popover","https://typedora-ui.netlify.app/r/typed-utils.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://typedora-ui.netlify.app/r/typed-combobox.json","proxyUrl":"https://shadcnregistry.com/r/typedora-ui/typed-combobox","itemId":"@typedora-ui/typed-combobox"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/default/typed-combobox/typed-combobox.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

TypedCombobox

Installation

Files

components

Styles