@mantine/core/cjs/components/Select/Select.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_InputBase = require("../InputBase/InputBase.cjs");
const require_get_parsed_combobox_data = require("../Combobox/get-parsed-combobox-data/get-parsed-combobox-data.cjs");
const require_get_options_lockup = require("../Combobox/get-options-lockup/get-options-lockup.cjs");
const require_use_combobox = require("../Combobox/use-combobox/use-combobox.cjs");
const require_Combobox = require("../Combobox/Combobox.cjs");
const require_OptionsDropdown = require("../Combobox/OptionsDropdown/OptionsDropdown.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Select/Select.tsx
const defaultProps = {
	withCheckIcon: true,
	allowDeselect: true,
	checkIconPosition: "left",
	openOnFocus: true
};
const Select = require_factory.genericFactory((_props) => {
	const props = require_use_props.useProps("Select", defaultProps, _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, searchable, rightSection, checkIconPosition, withCheckIcon, withAlignedLabels, nothingFoundMessage, name, form, searchValue, defaultSearchValue, onSearchChange, allowDeselect, error, rightSectionPointerEvents, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, renderOption, onClear, autoComplete, scrollAreaProps, __defaultRightSection, __clearSection, __clearable, chevronColor, autoSelectOnBlur, openOnFocus, attributes, ...others } = props;
	const parsedData = (0, react.useMemo)(() => require_get_parsed_combobox_data.getParsedComboboxData(data), [data]);
	const retainedSelectedOptions = (0, react.useRef)({});
	const optionsLockup = (0, react.useMemo)(() => require_get_options_lockup.getOptionsLockup(parsedData), [parsedData]);
	const _id = (0, _mantine_hooks.useId)(id);
	const [_value, setValue, controlled] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: null,
		onChange
	});
	const selectedOption = _value != null ? `${_value}` in optionsLockup ? optionsLockup[`${_value}`] : retainedSelectedOptions.current[`${_value}`] : void 0;
	const previousSelectedOption = (0, _mantine_hooks.usePrevious)(selectedOption);
	const [search, setSearch, searchControlled] = (0, _mantine_hooks.useUncontrolled)({
		value: searchValue,
		defaultValue: defaultSearchValue,
		finalValue: selectedOption ? selectedOption.label : "",
		onChange: onSearchChange
	});
	const combobox = require_use_combobox.useCombobox({
		opened: dropdownOpened,
		defaultOpened: defaultDropdownOpened,
		onDropdownOpen: () => {
			onDropdownOpen?.();
			if (selectFirstOptionOnDropdownOpen) combobox.selectFirstOption();
			else combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
		},
		onDropdownClose: () => {
			onDropdownClose?.();
			setTimeout(combobox.resetSelectedOption, 0);
		}
	});
	const handleSearchChange = (value) => {
		setSearch(value);
		combobox.resetSelectedOption();
	};
	const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
		props,
		styles,
		classNames
	});
	(0, react.useEffect)(() => {
		if (selectFirstOptionOnChange) combobox.selectFirstOption();
	}, [selectFirstOptionOnChange, search]);
	(0, react.useEffect)(() => {
		if (value === null) handleSearchChange("");
		if (value != null && selectedOption && (previousSelectedOption?.value !== selectedOption.value || previousSelectedOption?.label !== selectedOption.label)) handleSearchChange(selectedOption.label);
	}, [value, selectedOption]);
	(0, react.useEffect)(() => {
		if (!controlled && !searchControlled) handleSearchChange(_value != null ? `${_value}` in optionsLockup ? optionsLockup[`${_value}`]?.label : retainedSelectedOptions.current[`${_value}`]?.label || "" : "");
	}, [optionsLockup, _value]);
	(0, react.useEffect)(() => {
		if (_value) {
			if (`${_value}` in optionsLockup) retainedSelectedOptions.current[`${_value}`] = optionsLockup[`${_value}`];
		}
	}, [optionsLockup, _value]);
	const clearButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.ClearButton, {
		...clearButtonProps,
		onClear: () => {
			setValue(null, null);
			handleSearchChange("");
			onClear?.();
		}
	});
	const _clearable = clearable && !!_value && !disabled && !readOnly;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Combobox.Combobox, {
		store: combobox,
		__staticSelector: "Select",
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		unstyled,
		readOnly,
		size,
		attributes,
		keepMounted: autoSelectOnBlur,
		onOptionSubmit: (val) => {
			onOptionSubmit?.(val);
			const optionLockup = allowDeselect ? `${optionsLockup[val].value}` === `${_value}` ? null : optionsLockup[val] : optionsLockup[val];
			const nextValue = optionLockup ? optionLockup.value : null;
			nextValue !== _value && setValue(nextValue, optionLockup);
			!controlled && handleSearchChange(nextValue != null ? optionLockup?.label || "" : "");
			combobox.closeDropdown();
		},
		...comboboxProps,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Target, {
			targetType: searchable ? "input" : "button",
			autoComplete,
			withExpandedAttribute: true,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputBase.InputBase, {
				id: _id,
				__defaultRightSection: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.Chevron, {
					size,
					error,
					unstyled,
					color: chevronColor
				}),
				__clearSection: clearButton,
				__clearable: _clearable,
				__clearSectionMode: clearSectionMode,
				rightSection,
				rightSectionPointerEvents: rightSectionPointerEvents || "none",
				...others,
				size,
				__staticSelector: "Select",
				disabled,
				readOnly: readOnly || !searchable,
				value: search,
				onChange: (event) => {
					handleSearchChange(event.currentTarget.value);
					combobox.openDropdown();
					selectFirstOptionOnChange && combobox.selectFirstOption();
				},
				onFocus: (event) => {
					openOnFocus && searchable && combobox.openDropdown();
					onFocus?.(event);
				},
				onBlur: (event) => {
					if (autoSelectOnBlur) combobox.clickSelectedOption();
					searchable && combobox.closeDropdown();
					const optionLockup = _value != null && (`${_value}` in optionsLockup ? optionsLockup[`${_value}`] : retainedSelectedOptions.current[`${_value}`]);
					handleSearchChange(optionLockup ? optionLockup.label || "" : "");
					onBlur?.(event);
				},
				onClick: (event) => {
					searchable ? combobox.openDropdown() : combobox.toggleDropdown();
					onClick?.(event);
				},
				classNames: resolvedClassNames,
				styles: resolvedStyles,
				unstyled,
				pointer: !searchable,
				error,
				attributes
			})
		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionsDropdown.OptionsDropdown, {
			data: parsedData,
			hidden: readOnly || disabled,
			filter,
			search,
			limit,
			hiddenWhenEmpty: !nothingFoundMessage,
			withScrollArea,
			maxDropdownHeight,
			filterOptions: !!searchable && selectedOption?.label !== search,
			value: _value,
			checkIconPosition,
			withCheckIcon,
			withAlignedLabels,
			nothingFoundMessage,
			unstyled,
			labelId: others.label ? `${_id}-label` : void 0,
			"aria-label": others.label ? void 0 : others["aria-label"],
			renderOption,
			scrollAreaProps
		})]
	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox.Combobox.HiddenInput, {
		value: _value,
		name,
		form,
		disabled,
		...hiddenInputProps
	})] });
});
Select.classes = {
	...require_InputBase.InputBase.classes,
	...require_Combobox.Combobox.classes
};
Select.displayName = "@mantine/core/Select";
//#endregion
exports.Select = Select;

//# sourceMappingURL=Select.cjs.map