{"version":3,"file":"Autocomplete.cjs","sources":["../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n factory,\n Factory,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n} from '../../core';\nimport {\n Combobox,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxStringData,\n ComboboxStringItem,\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 RenderAutocompleteOption = (\n input: ComboboxLikeRenderOptionInput\n) => React.ReactNode;\n\nexport type AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n extends BoxProps,\n Omit<__BaseInputProps, 'pointer'>,\n Omit,\n StylesApiProps,\n ElementProps<'input', 'onChange' | 'size'> {\n /** Data used to display options. Values must be unique. */\n data?: ComboboxStringData;\n\n /** Controlled component value */\n value?: string;\n\n /** Default value for uncontrolled component */\n defaultValue?: string;\n\n /** Called when value changes */\n onChange?: (value: string) => void;\n\n /** Function to render custom option content */\n renderOption?: RenderAutocompleteOption;\n\n /** Props passed to the underlying `ScrollArea` component in the dropdown */\n scrollAreaProps?: ScrollAreaProps;\n\n /** Called when the clear button is clicked */\n onClear?: () => void;\n\n /** Props passed to the clear button */\n clearButtonProps?: InputClearButtonProps;\n\n /** If set, the clear button is displayed when the component has a value @default `false` */\n clearable?: boolean;\n\n /** If set, the highlighted option is selected when the input loses focus @default `false` */\n autoSelectOnBlur?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n props: AutocompleteProps;\n ref: HTMLInputElement;\n stylesNames: AutocompleteStylesNames;\n variant: InputVariant;\n}>;\n\nexport const Autocomplete = factory((_props, ref) => {\n const props = useProps('Autocomplete', null, _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 id,\n renderOption,\n autoComplete,\n scrollAreaProps,\n onClear,\n clearButtonProps,\n error,\n clearable,\n rightSection,\n autoSelectOnBlur,\n attributes,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: '',\n onChange,\n });\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose: () => {\n onDropdownClose?.();\n // Required for autoSelectOnBlur to work correctly\n setTimeout(combobox.resetSelectedOption, 0);\n },\n });\n\n const handleValueChange = (value: string) => {\n setValue(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, _value]);\n\n const clearButton = (\n {\n handleValueChange('');\n onClear?.();\n }}\n />\n );\n\n return (\n {\n onOptionSubmit?.(val);\n handleValueChange(optionsLockup[val].label);\n combobox.closeDropdown();\n }}\n {...comboboxProps}\n >\n \n {\n handleValueChange(event.currentTarget.value);\n combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n onFocus={(event) => {\n combobox.openDropdown();\n onFocus?.(event);\n }}\n onBlur={(event) => {\n if (autoSelectOnBlur) {\n combobox.clickSelectedOption();\n }\n\n combobox.closeDropdown();\n onBlur?.(event);\n }}\n onClick={(event) => {\n combobox.openDropdown();\n onClick?.(event);\n }}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n attributes={attributes}\n id={_id}\n />\n \n