{"version":3,"file":"Select.cjs","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useId, useUncontrolled } from \"@rtdui/hooks\";\nimport {\n Combobox,\n type ComboboxClearButtonProps,\n type ComboboxItem,\n type ComboboxLikeProps,\n type ComboboxLikeRenderOptionInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n useCombobox,\n} from \"../Combobox\";\nimport { InputBase, type InputBaseOwnProps } from \"../InputBase\";\n\nexport interface SelectProps\n extends\n ComboboxLikeProps,\n Omit,\n Omit<\n React.ComponentProps<\"input\">,\n \"size\" | \"value\" | \"defaultValue\" | \"onChange\"\n > {\n /** Controlled component value */\n value?: string | null;\n\n /** Uncontrolled component default value */\n defaultValue?: string | null;\n\n /** Called when value changes */\n onChange?: (value: string | null, option: ComboboxItem) => void;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Determines whether the select should be searchable\n * @default false\n */\n searchable?: boolean;\n\n /** Controlled search value */\n searchValue?: string;\n\n /** Default search value */\n defaultSearchValue?: string;\n\n /** Called when search changes */\n onSearchChange?: (value: string) => void;\n\n /** Determines whether check icon should be displayed near the selected option label\n * @default true\n */\n withCheckIcon?: boolean;\n\n /** Position of the check icon relative to the option label\n * @default \"left\"\n */\n checkIconPosition?: \"left\" | \"right\";\n\n /** Message displayed when no option matched current search query, only applicable when `searchable` prop is set */\n nothingFoundMessage?: React.ReactNode;\n\n /** Determines whether the clear button should be displayed in the right section when the component has value\n * @default false\n */\n clearable?: boolean;\n\n clearButtonProps?: ComboboxClearButtonProps;\n\n /** Props passed down to the hidden input */\n hiddenInputProps?: Omit, \"value\">;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (\n item: ComboboxLikeRenderOptionInput,\n ) => React.ReactNode;\n\n /** Determines whether it should be possible to deselect value by clicking on the selected option\n * @default true\n */\n allowDeselect?: boolean;\n}\n\nexport function Select(props: SelectProps) {\n const {\n ref,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownClose,\n onDropdownOpen,\n onFocus,\n onBlur,\n onClick,\n onChange,\n data,\n value,\n defaultValue,\n selectFirstOptionOnChange,\n onOptionSubmit,\n comboboxProps,\n readOnly,\n disabled,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n size = \"sm\",\n searchable = false,\n rightSection,\n withCheckIcon = true,\n checkIconPosition = \"left\",\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect = true,\n error,\n id,\n clearable,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n ...others\n } = props;\n\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n\n const _id = useId(id);\n\n const [_value, setValue, controlled] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const selectedOption =\n typeof _value === \"string\" ? optionsLockup[_value] : undefined;\n const [search, setSearch] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: selectedOption ? selectedOption.label : \"\",\n onChange: onSearchChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n combobox.updateSelectedOptionIndex(\"active\", { scrollIntoView: true });\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value]);\n\n useEffect(() => {\n if (value === null) {\n setSearch(\"\");\n }\n\n if (typeof value === \"string\" && selectedOption) {\n setSearch(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n const clearButton = clearable && !!_value && !disabled && !readOnly && (\n {\n setValue(null, null);\n setSearch(\"\");\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n {\n onOptionSubmit?.(val);\n const optionLockup = allowDeselect\n ? optionsLockup[val].value === _value\n ? null\n : optionsLockup[val]\n : optionsLockup[val];\n\n const nextValue = optionLockup ? optionLockup.value : null;\n\n setValue(nextValue, optionLockup);\n !controlled &&\n setSearch(\n typeof nextValue === \"string\" ? optionLockup?.label || \"\" : \"\",\n );\n combobox.closeDropdown();\n }}\n size={size}\n {...comboboxProps}\n >\n \n \n }\n rightSectionPointerEvents={clearButton ? \"auto\" : undefined}\n rightSectionWidth=\"32px\"\n {...others}\n size={size as any}\n disabled={disabled}\n readOnly={readOnly || !searchable}\n value={search}\n onChange={(e: any) => {\n setSearch(e.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(e: any) => {\n searchable && combobox.openDropdown();\n onFocus?.(e);\n }}\n onBlur={(e: any) => {\n searchable && combobox.closeDropdown();\n setSearch(\n _value != null ? optionsLockup[_value]?.label || \"\" : \"\",\n );\n onBlur?.(e);\n }}\n onClick={(e: any) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(e);\n }}\n slots={{\n input: !searchable ? \"cursor-pointer\" : undefined,\n }}\n error={error}\n pointer={!searchable}\n />\n \n