@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
280 lines (277 loc) • 9.4 kB
JavaScript
'use client';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { useMemo, useEffect } from 'react';
import { useId, useUncontrolled, usePrevious } from '@mantine/hooks';
import 'clsx';
import { useResolvedStylesApi } from '../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs';
import '../../core/MantineProvider/Mantine.context.mjs';
import '../../core/MantineProvider/default-theme.mjs';
import '../../core/MantineProvider/MantineProvider.mjs';
import '../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.mjs';
import { useProps } from '../../core/MantineProvider/use-props/use-props.mjs';
import '../../core/MantineProvider/MantineCssVariables/MantineCssVariables.mjs';
import '../../core/Box/Box.mjs';
import { factory } from '../../core/factory/factory.mjs';
import '../../core/DirectionProvider/DirectionProvider.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 '../Combobox/ComboboxChevron/ComboboxChevron.mjs';
import { Combobox } from '../Combobox/Combobox.mjs';
import '../Combobox/ComboboxDropdown/ComboboxDropdown.mjs';
import '../Combobox/ComboboxOptions/ComboboxOptions.mjs';
import '../Combobox/ComboboxOption/ComboboxOption.mjs';
import '../Combobox/ComboboxTarget/ComboboxTarget.mjs';
import '../Combobox/ComboboxSearch/ComboboxSearch.mjs';
import '../Combobox/ComboboxEmpty/ComboboxEmpty.mjs';
import '../Combobox/ComboboxFooter/ComboboxFooter.mjs';
import '../Combobox/ComboboxHeader/ComboboxHeader.mjs';
import '../Combobox/ComboboxEventsTarget/ComboboxEventsTarget.mjs';
import '../Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.mjs';
import '../Combobox/ComboboxGroup/ComboboxGroup.mjs';
import '../Combobox/ComboboxClearButton/ComboboxClearButton.mjs';
import '../Combobox/ComboboxHiddenInput/ComboboxHiddenInput.mjs';
import { OptionsDropdown } from '../Combobox/OptionsDropdown/OptionsDropdown.mjs';
import { useCombobox } from '../Combobox/use-combobox/use-combobox.mjs';
import '../Combobox/Combobox.context.mjs';
import { InputBase } from '../InputBase/InputBase.mjs';
const defaultProps = {
searchable: false,
withCheckIcon: true,
allowDeselect: true,
checkIconPosition: "left"
};
const Select = factory((_props, ref) => {
const props = useProps("Select", defaultProps, _props);
const {
classNames,
styles,
unstyled,
vars,
dropdownOpened,
defaultDropdownOpened,
onDropdownClose,
onDropdownOpen,
onFocus,
onBlur,
onClick,
onChange,
data,
value,
defaultValue,
selectFirstOptionOnChange,
onOptionSubmit,
comboboxProps,
readOnly,
disabled,
filter,
limit,
withScrollArea,
maxDropdownHeight,
size,
searchable,
rightSection,
checkIconPosition,
withCheckIcon,
nothingFoundMessage,
name,
form,
searchValue,
defaultSearchValue,
onSearchChange,
allowDeselect,
error,
rightSectionPointerEvents,
id,
clearable,
clearButtonProps,
hiddenInputProps,
renderOption,
onClear,
autoComplete,
scrollAreaProps,
__defaultRightSection,
__clearSection,
__clearable,
chevronColor,
...others
} = props;
const parsedData = useMemo(() => getParsedComboboxData(data), [data]);
const optionsLockup = useMemo(() => getOptionsLockup(parsedData), [parsedData]);
const _id = useId(id);
const [_value, setValue, controlled] = useUncontrolled({
value,
defaultValue,
finalValue: null,
onChange
});
const selectedOption = typeof _value === "string" ? optionsLockup[_value] : void 0;
const previousSelectedOption = usePrevious(selectedOption);
const [search, setSearch, searchControlled] = useUncontrolled({
value: searchValue,
defaultValue: defaultSearchValue,
finalValue: selectedOption ? selectedOption.label : "",
onChange: onSearchChange
});
const combobox = useCombobox({
opened: dropdownOpened,
defaultOpened: defaultDropdownOpened,
onDropdownOpen: () => {
onDropdownOpen?.();
combobox.updateSelectedOptionIndex("active", { scrollIntoView: true });
},
onDropdownClose: () => {
onDropdownClose?.();
combobox.resetSelectedOption();
}
});
const handleSearchChange = (value2) => {
setSearch(value2);
combobox.resetSelectedOption();
};
const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
props,
styles,
classNames
});
useEffect(() => {
if (selectFirstOptionOnChange) {
combobox.selectFirstOption();
}
}, [selectFirstOptionOnChange, search]);
useEffect(() => {
if (value === null) {
handleSearchChange("");
}
if (typeof value === "string" && selectedOption && (previousSelectedOption?.value !== selectedOption.value || previousSelectedOption?.label !== selectedOption.label)) {
handleSearchChange(selectedOption.label);
}
}, [value, selectedOption]);
useEffect(() => {
if (!controlled && !searchControlled) {
handleSearchChange(typeof _value === "string" ? optionsLockup[_value]?.label || "" : "");
}
}, [data, _value]);
const clearButton = /* @__PURE__ */ jsx(
Combobox.ClearButton,
{
...clearButtonProps,
onClear: () => {
setValue(null, null);
handleSearchChange("");
onClear?.();
}
}
);
const _clearable = clearable && !!_value && !disabled && !readOnly;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
Combobox,
{
store: combobox,
__staticSelector: "Select",
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
readOnly,
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(typeof nextValue === "string" ? optionLockup?.label || "" : "");
combobox.closeDropdown();
},
size,
...comboboxProps,
children: [
/* @__PURE__ */ jsx(Combobox.Target, { targetType: searchable ? "input" : "button", autoComplete, children: /* @__PURE__ */ jsx(
InputBase,
{
id: _id,
ref,
__defaultRightSection: /* @__PURE__ */ jsx(
Combobox.Chevron,
{
size,
error,
unstyled,
color: chevronColor
}
),
__clearSection: clearButton,
__clearable: _clearable,
rightSection,
rightSectionPointerEvents: rightSectionPointerEvents || (_clearable ? "all" : "none"),
...others,
size,
__staticSelector: "Select",
disabled,
readOnly: readOnly || !searchable,
value: search,
onChange: (event) => {
handleSearchChange(event.currentTarget.value);
combobox.openDropdown();
selectFirstOptionOnChange && combobox.selectFirstOption();
},
onFocus: (event) => {
searchable && combobox.openDropdown();
onFocus?.(event);
},
onBlur: (event) => {
searchable && combobox.closeDropdown();
handleSearchChange(_value != null ? optionsLockup[_value]?.label || "" : "");
onBlur?.(event);
},
onClick: (event) => {
searchable ? combobox.openDropdown() : combobox.toggleDropdown();
onClick?.(event);
},
classNames: resolvedClassNames,
styles: resolvedStyles,
unstyled,
pointer: !searchable,
error
}
) }),
/* @__PURE__ */ jsx(
OptionsDropdown,
{
data: parsedData,
hidden: readOnly || disabled,
filter,
search,
limit,
hiddenWhenEmpty: !nothingFoundMessage,
withScrollArea,
maxDropdownHeight,
filterOptions: searchable && selectedOption?.label !== search,
value: _value,
checkIconPosition,
withCheckIcon,
nothingFoundMessage,
unstyled,
labelId: others.label ? `${_id}-label` : void 0,
"aria-label": others.label ? void 0 : others["aria-label"],
renderOption,
scrollAreaProps
}
)
]
}
),
/* @__PURE__ */ jsx(
Combobox.HiddenInput,
{
value: _value,
name,
form,
disabled,
...hiddenInputProps
}
)
] });
});
Select.classes = { ...InputBase.classes, ...Combobox.classes };
Select.displayName = "@mantine/core/Select";
export { Select };
//# sourceMappingURL=Select.mjs.map