{"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 AutocompleteStylesNames = __InputStylesNames | ComboboxLikeStylesNames;\n\nexport interface AutocompleteProps\n extends BoxProps,\n __BaseInputProps,\n Omit,\n StylesApiProps,\n ElementProps<'input', 'onChange' | 'size'> {\n /** Data displayed in the dropdown. Values must be unique, otherwise an error will be thrown and component will not render. */\n data?: ComboboxStringData;\n\n /** Controlled component value */\n value?: string;\n\n /** Uncontrolled component default value */\n defaultValue?: string;\n\n /** Called when value changes */\n onChange?: (value: string) => void;\n\n /** A function to render content of the option, replaces the default content of the option */\n renderOption?: (input: ComboboxLikeRenderOptionInput) => React.ReactNode;\n\n /** Props passed down 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 down to the clear button */\n clearButtonProps?: InputClearButtonProps & ElementProps<'button'>;\n\n /** Determines whether the clear button should be displayed in the right section when the component has value, `false` by default */\n clearable?: boolean;\n}\n\nexport type AutocompleteFactory = Factory<{\n props: AutocompleteProps;\n ref: HTMLInputElement;\n stylesNames: AutocompleteStylesNames;\n variant: InputVariant;\n}>;\n\nconst defaultProps: Partial = {};\n\nexport const Autocomplete = factory((_props, ref) => {\n const props = useProps('Autocomplete', 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 id,\n renderOption,\n autoComplete,\n scrollAreaProps,\n onClear,\n clearButtonProps,\n error,\n clearable,\n rightSection,\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 combobox.resetSelectedOption();\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 size={size}\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 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 id={_id}\n />\n \n