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:T3a5b,"use client"; import * as React from "react"; import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from "@/components/ui/select"; import type { ExtractOption, ExtractOptionValue } from "@/lib/typed-utils"; // ============================================================================= // Types // ============================================================================= /** * Supported value types for TypedSelect. * Values are serialized to strings internally but typed correctly externally. */ export type SelectValueType = string | number | boolean; /** * Default option type with value and label. * Use this as a reference for your custom option types. */ export type SelectOption = { value: T; label: string; disabled?: boolean; }; /** * A group of select options with a label. * @template TOption - The full option type including custom properties */ export type SelectOptionGroup = { label: string; options: TOption[]; }; // ============================================================================= // Render Props Types // ============================================================================= /** * Props passed to renderTrigger function. * @template TOption - The full option type including custom properties */ export type SelectTriggerRenderProps = { /** Currently selected option (undefined if none) */ selectedOption: TOption | undefined; /** Placeholder text */ placeholder: string; /** Whether the select is open */ open: boolean; /** Whether the select is disabled */ disabled: boolean; /** Default trigger component */ Trigger: typeof SelectTrigger; /** Default value component */ Value: typeof SelectValue; }; /** * Props passed to renderItem function. * @template TOption - The full option type including custom properties */ export type SelectItemRenderProps = { /** 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: SelectOptionGroup | undefined; /** Props to spread on SelectItem */ itemProps: { value: string; disabled?: boolean; }; /** Default item component */ Item: typeof SelectItem; }; /** * Props passed to renderGroup function. * @template TOption - The full option type including custom properties */ export type SelectGroupRenderProps = { /** The group data */ group: SelectOptionGroup; /** Rendered items inside this group */ children: React.ReactNode; /** Default group component */ Group: typeof SelectGroup; /** Default label component */ Label: typeof SelectLabel; }; /** * Props passed to renderContent function. */ export type SelectContentRenderProps = { /** Rendered items/groups */ children: React.ReactNode; /** Default content component */ Content: typeof SelectContent; }; /** * Core props for TypedSelect (for documentation). * The actual component also accepts all Select props. */ export interface TypedSelectBaseProps< TOptions extends | readonly Record[] | readonly SelectOptionGroup>[], 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 (passed to renderTrigger) */ placeholder?: string; /** Custom render for trigger */ renderTrigger?: ( props: SelectTriggerRenderProps>, ) => React.ReactNode; /** Custom render for each item */ renderItem?: ( props: SelectItemRenderProps>, ) => React.ReactNode; /** Custom render for each group (required when using grouped options) */ renderGroup?: ( props: SelectGroupRenderProps>, ) => React.ReactNode; /** Custom render for content wrapper */ renderContent?: (props: SelectContentRenderProps) => React.ReactNode; /** Whether the select is disabled */ disabled?: boolean; /** Whether the select is open (controlled) */ open?: boolean; /** Callback when open state changes */ onOpenChange?: (open: boolean) => void; /** The name of the select (for form submission) */ name?: string; /** Whether selection is required */ required?: boolean; } /** * Props for the TypedSelect 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 TypedSelectProps< TOptions extends | readonly Record[] | readonly SelectOptionGroup>[], TValueKey extends string = "value", TLabelKey extends string = "label", > extends Omit< React.ComponentProps, "value" | "defaultValue" | "onValueChange" | "children" >, TypedSelectBaseProps {} // ============================================================================= // Helpers // ============================================================================= /** * Type guard to check if options are grouped */ function isGroupedOptions( options: readonly TOption[] | readonly SelectOptionGroup[], ): options is readonly SelectOptionGroup[] { return options.length > 0 && "options" in (options[0] as object); } /** * Serialize a value to string for internal use with Radix Select */ 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 SelectOptionGroup[], 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 SelectValueType) === 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 SelectOptionGroup[], 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 Render Functions // ============================================================================= function defaultRenderTrigger({ placeholder, Trigger, Value, }: SelectTriggerRenderProps): React.ReactNode { return ( ); } function createDefaultRenderItem< TOption extends Record, TLabelKey extends keyof TOption, >(labelKey: TLabelKey) { return function defaultRenderItem({ option, itemProps, Item, }: SelectItemRenderProps): React.ReactNode { const label = option[labelKey]; return {String(label ?? "")}; }; } function defaultRenderContent({ children, Content, }: SelectContentRenderProps): React.ReactNode { return {children}; } // ============================================================================= // Component // ============================================================================= /** * A headless, type-safe select component with full TypeScript inference * and customizable rendering via render props. * * @example * ```tsx * // Default usage with value/label keys * ( * * * * )} * renderItem={({ option, itemProps, Item }) => ( * *

* {option.label} * {option.description &&

{option.description}

} *

* * )} * renderContent={({ children, Content }) => ( * {children} * )} * onValueChange={(value) => { * // value: "apple" | "banana" * }} * /> * * // Custom keys usage with id/name * { * // value: 1 | 2 * }} * /> * ``` */ function TypedSelect< TOptions extends | readonly Record[] | readonly SelectOptionGroup>[], TValueKey extends string = "value", TLabelKey extends string = "label", >({ options, valueKey = "value" as TValueKey, labelKey = "label" as TLabelKey, value, defaultValue, onValueChange, placeholder = "Select an option", open: controlledOpen, onOpenChange, disabled = false, renderTrigger = defaultRenderTrigger, renderItem, renderGroup, renderContent = defaultRenderContent, ...props }: TypedSelectProps) { // 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, ); // Use controlled value if provided, otherwise use internal state const currentValue = value !== undefined ? value : internalValue; const handleOpenChange = (newOpen: boolean) => { setInternalOpen(newOpen); onOpenChange?.(newOpen); }; const handleValueChange = (serialized: string) => { const deserialized = deserializeValue( serialized, options as readonly TOption[] | readonly SelectOptionGroup[], valueKey as keyof TOption, ); // Update internal state for uncontrolled mode if (value === undefined) { setInternalValue(deserialized as TValue); } if (onValueChange) { onValueChange(deserialized as TValue); } }; const selectedOption = findSelectedOption( currentValue as TOption[keyof TOption] | undefined, options as readonly TOption[] | readonly SelectOptionGroup[], valueKey as keyof TOption, ); const serializedValue = currentValue !== undefined ? serializeValue(currentValue as SelectValueType) : undefined; const serializedDefaultValue = defaultValue !== undefined ? serializeValue(defaultValue as SelectValueType) : undefined; // Use provided renderItem or create default with labelKey const actualRenderItem = renderItem ?? createDefaultRenderItem(labelKey as keyof TOption); // Render a single item const renderSingleItem = ( option: TOption, group: SelectOptionGroup | undefined, ) => { const optionValue = option[valueKey as keyof TOption] as SelectValueType; 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, }, Item: SelectItem, })} ); }; // Render all items (grouped or flat) const renderItems = () => { const opts = options as | readonly TOption[] | readonly SelectOptionGroup[]; if (isGroupedOptions(opts)) { return opts.map((group) => { const groupChildren = group.options.map((option) => renderSingleItem(option, group), ); if (renderGroup) { return ( {renderGroup({ group: group as SelectOptionGroup>, children: groupChildren, Group: SelectGroup, Label: SelectLabel, })} ); } // Default group rendering if renderGroup not provided return ( {group.label} {groupChildren} ); }); } return (opts as readonly TOption[]).map((option) => renderSingleItem(option, undefined), ); }; return ( ); } export { TypedSelect }; 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":["select","https://typedora-ui.netlify.app/r/typed-utils.json"]}]]}],["$","$L50",null,{"sourceUrl":"https://typedora-ui.netlify.app/r/typed-select.json","proxyUrl":"https://shadcnregistry.com/r/typedora-ui/typed-select","itemId":"@typedora-ui/typed-select"}],["$","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-select/typed-select.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

TypedSelect

Installation

Files

components

Styles