{"version":3,"file":"Select.cjs","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useId, usePrevious, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n Factory,\n factory,\n MantineColor,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n useCombobox,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n InputClearButtonProps,\n InputVariant,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { ScrollAreaProps } from '../ScrollArea';\n\nexport type SelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface SelectProps\n extends BoxProps,\n __BaseInputProps,\n ComboboxLikeProps,\n StylesApiProps,\n ElementProps<'input', 'onChange' | 'size' | 'value' | 'defaultValue'> {\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 @default `false` */\n searchable?: boolean;\n\n /** If set, the check icon is displayed near the selected option label @default `true` */\n withCheckIcon?: boolean;\n\n /** Position of the check icon relative to the option label @default `'left'` */\n checkIconPosition?: 'left' | 'right';\n\n /** Message displayed when no option matches the current search query when the `searchable` prop is set or there is no data */\n nothingFoundMessage?: React.ReactNode;\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 /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */\n allowDeselect?: boolean;\n\n /** If set, the clear button is displayed in the right section when the component has value @default `false` */\n clearable?: boolean;\n\n /** Props passed down to the clear button */\n clearButtonProps?: InputClearButtonProps;\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?: (item: ComboboxLikeRenderOptionInput) => React.ReactNode;\n\n /** Props passed down to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Controls color of the default chevron, by default depends on the color scheme */\n chevronColor?: MantineColor;\n\n /** If set, the highlighted option is selected when the input loses focus @default `false` */\n autoSelectOnBlur?: boolean;\n}\n\nexport type SelectFactory = Factory<{\n props: SelectProps;\n ref: HTMLInputElement;\n stylesNames: SelectStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps = {\n withCheckIcon: true,\n allowDeselect: true,\n checkIconPosition: 'left',\n} satisfies Partial;\n\nexport const Select = factory((_props, ref) => {\n const props = useProps('Select', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n vars,\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,\n searchable,\n rightSection,\n checkIconPosition,\n withCheckIcon,\n nothingFoundMessage,\n name,\n form,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n allowDeselect,\n error,\n rightSectionPointerEvents,\n id,\n clearable,\n clearButtonProps,\n hiddenInputProps,\n renderOption,\n onClear,\n autoComplete,\n scrollAreaProps,\n __defaultRightSection,\n __clearSection,\n __clearable,\n chevronColor,\n autoSelectOnBlur,\n attributes,\n ...others\n } = props;\n\n const parsedData = useMemo(() => getParsedComboboxData(data), [data]);\n const retainedSelectedOptions = useRef>({});\n const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);\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'\n ? _value in optionsLockup\n ? optionsLockup[_value]\n : retainedSelectedOptions.current[_value]\n : undefined;\n const previousSelectedOption = usePrevious(selectedOption);\n\n const [search, setSearch, searchControlled] = 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 // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleSearchChange = (value: string) => {\n setSearch(value);\n combobox.resetSelectedOption();\n };\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({\n props,\n styles,\n classNames,\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, search]);\n\n useEffect(() => {\n if (value === null) {\n handleSearchChange('');\n }\n\n if (\n typeof value === 'string' &&\n selectedOption &&\n (previousSelectedOption?.value !== selectedOption.value ||\n previousSelectedOption?.label !== selectedOption.label)\n ) {\n handleSearchChange(selectedOption.label);\n }\n }, [value, selectedOption]);\n\n useEffect(() => {\n if (!controlled && !searchControlled) {\n handleSearchChange(\n typeof _value === 'string'\n ? _value in optionsLockup\n ? optionsLockup[_value]?.label\n : retainedSelectedOptions.current[_value]?.label || ''\n : ''\n );\n }\n }, [optionsLockup, _value]);\n\n useEffect(() => {\n if (_value) {\n if (_value in optionsLockup) {\n retainedSelectedOptions.current[_value] = optionsLockup[_value];\n }\n }\n }, [optionsLockup, _value]);\n\n const clearButton = (\n {\n setValue(null, null);\n handleSearchChange('');\n onClear?.();\n }}\n />\n );\n\n const _clearable = clearable && !!_value && !disabled && !readOnly;\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 nextValue !== _value && setValue(nextValue, optionLockup);\n !controlled &&\n handleSearchChange(typeof nextValue === 'string' ? optionLockup?.label || '' : '');\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n \n \n }\n __clearSection={clearButton}\n __clearable={_clearable}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents || 'none'}\n {...others}\n size={size}\n __staticSelector=\"Select\"\n disabled={disabled}\n readOnly={readOnly || !searchable}\n value={search}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n !!searchable && combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n !!searchable && combobox.closeDropdown();\n const optionLockup =\n typeof _value === 'string' &&\n (_value in optionsLockup\n ? optionsLockup[_value]\n : retainedSelectedOptions.current[_value]);\n handleSearchChange(optionLockup ? optionLockup.label || '' : '');\n onBlur?.(event);\n }}\n onClick={(event) => {\n searchable ? combobox.openDropdown() : combobox.toggleDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n pointer={!searchable}\n error={error}\n attributes={attributes}\n />\n \n