@mantine/core/esm/components/Autocomplete/Autocomplete.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { InputBase } from "../InputBase/InputBase.mjs";
import { getParsedComboboxData } from "../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.mjs";
import { getOptionsLockup } from "../Combobox/get-options-lockup/get-options-lockup.mjs";
import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
import { Combobox } from "../Combobox/Combobox.mjs";
import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
import { useEffect } from "react";
import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Autocomplete/Autocomplete.tsx
const Autocomplete = factory((_props) => {
	const props = useProps("Autocomplete", null, _props);
	const { classNames, styles, unstyled, vars, dropdownOpened, defaultDropdownOpened, onDropdownClose, onDropdownOpen, onFocus, onBlur, onClick, onChange, data, value, defaultValue, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, readOnly, disabled, filter, limit, withScrollArea, maxDropdownHeight, size, id, renderOption, autoComplete, scrollAreaProps, onClear, clearButtonProps, error, clearable, clearSectionMode, rightSection, autoSelectOnBlur, openOnFocus = true, attributes, ...others } = props;
	const _id = useId$1(id);
	const parsedData = getParsedComboboxData(data);
	const optionsLockup = getOptionsLockup(parsedData);
	const [_value, setValue] = useUncontrolled({
		value,
		defaultValue,
		finalValue: "",
		onChange
	});
	const combobox = useCombobox({
		opened: dropdownOpened,
		defaultOpened: defaultDropdownOpened,
		onDropdownOpen: () => {
			onDropdownOpen?.();
			if (selectFirstOptionOnDropdownOpen) combobox.selectFirstOption();
		},
		onDropdownClose: () => {
			onDropdownClose?.();
			setTimeout(combobox.resetSelectedOption, 0);
		}
	});
	const handleValueChange = (value) => {
		setValue(value);
		combobox.resetSelectedOption();
	};
	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
		props,
		styles,
		classNames
	});
	useEffect(() => {
		if (selectFirstOptionOnChange) combobox.selectFirstOption();
	}, [selectFirstOptionOnChange, _value]);
	const clearButton = /* @__PURE__ */ jsx(Combobox.ClearButton, {
		...clearButtonProps,
		onClear: () => {
			handleValueChange("");
			onClear?.();
		}
	});
	return /* @__PURE__ */ jsxs(Combobox, {
		store: combobox,
		__staticSelector: "Autocomplete",
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		unstyled,
		readOnly,
		size,
		attributes,
		keepMounted: autoSelectOnBlur,
		onOptionSubmit: (val) => {
			onOptionSubmit?.(val);
			handleValueChange(optionsLockup[val].label);
			combobox.closeDropdown();
		},
		...comboboxProps,
		children: [/* @__PURE__ */ jsx(Combobox.Target, {
			autoComplete,
			withExpandedAttribute: true,
			children: /* @__PURE__ */ jsx(InputBase, {
				...others,
				size,
				__staticSelector: "Autocomplete",
				__clearSection: clearButton,
				__clearable: clearable && !!_value && !disabled && !readOnly,
				__clearSectionMode: clearSectionMode,
				rightSection,
				disabled,
				readOnly,
				value: _value,
				error,
				onChange: (event) => {
					handleValueChange(event.currentTarget.value);
					combobox.openDropdown();
					selectFirstOptionOnChange && combobox.selectFirstOption();
				},
				onFocus: (event) => {
					openOnFocus && combobox.openDropdown();
					onFocus?.(event);
				},
				onBlur: (event) => {
					if (autoSelectOnBlur) combobox.clickSelectedOption();
					combobox.closeDropdown();
					onBlur?.(event);
				},
				onClick: (event) => {
					combobox.openDropdown();
					onClick?.(event);
				},
				classNames: resolvedClassNames,
				styles: resolvedStyles,
				unstyled,
				attributes,
				id: _id
			})
		}), /* @__PURE__ */ jsx(OptionsDropdown, {
			data: parsedData,
			hidden: readOnly || disabled,
			filter,
			search: _value,
			limit,
			hiddenWhenEmpty: true,
			withScrollArea,
			maxDropdownHeight,
			unstyled,
			labelId: others.label ? `${_id}-label` : void 0,
			"aria-label": others.label ? void 0 : others["aria-label"],
			renderOption,
			scrollAreaProps
		})]
	});
});
Autocomplete.classes = {
	...InputBase.classes,
	...Combobox.classes
};
Autocomplete.displayName = "@mantine/core/Autocomplete";
//#endregion
export { Autocomplete };

//# sourceMappingURL=Autocomplete.mjs.map