@mantine/core/cjs/components/Combobox/Combobox.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_rem = require("../../core/utils/units-converters/rem.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_Popover = require("../Popover/Popover.cjs");
const require_Combobox_module = require("./Combobox.module.cjs");
const require_ComboboxChevron = require("./ComboboxChevron/ComboboxChevron.cjs");
const require_Combobox_context = require("./Combobox.context.cjs");
const require_ComboboxClearButton = require("./ComboboxClearButton/ComboboxClearButton.cjs");
const require_ComboboxDropdown = require("./ComboboxDropdown/ComboboxDropdown.cjs");
const require_ComboboxDropdownTarget = require("./ComboboxDropdownTarget/ComboboxDropdownTarget.cjs");
const require_ComboboxEmpty = require("./ComboboxEmpty/ComboboxEmpty.cjs");
const require_ComboboxEventsTarget = require("./ComboboxEventsTarget/ComboboxEventsTarget.cjs");
const require_ComboboxFooter = require("./ComboboxFooter/ComboboxFooter.cjs");
const require_ComboboxGroup = require("./ComboboxGroup/ComboboxGroup.cjs");
const require_ComboboxHeader = require("./ComboboxHeader/ComboboxHeader.cjs");
const require_ComboboxHiddenInput = require("./ComboboxHiddenInput/ComboboxHiddenInput.cjs");
const require_ComboboxOption = require("./ComboboxOption/ComboboxOption.cjs");
const require_ComboboxOptions = require("./ComboboxOptions/ComboboxOptions.cjs");
const require_ComboboxSearch = require("./ComboboxSearch/ComboboxSearch.cjs");
const require_ComboboxTarget = require("./ComboboxTarget/ComboboxTarget.cjs");
const require_use_combobox = require("./use-combobox/use-combobox.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Combobox/Combobox.tsx
const defaultProps = {
	keepMounted: true,
	withinPortal: true,
	resetSelectionOnOptionHover: false,
	width: "target",
	transitionProps: {
		transition: "fade",
		duration: 0
	},
	size: "sm"
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size, dropdownPadding }) => ({
	options: {
		"--combobox-option-fz": require_get_size.getFontSize(size),
		"--combobox-option-padding": require_get_size.getSize(size, "combobox-option-padding")
	},
	dropdown: {
		"--combobox-padding": dropdownPadding === void 0 ? void 0 : require_rem.rem(dropdownPadding),
		"--combobox-option-fz": require_get_size.getFontSize(size),
		"--combobox-option-padding": require_get_size.getSize(size, "combobox-option-padding")
	}
}));
const Combobox = (_props) => {
	const props = require_use_props.useProps("Combobox", defaultProps, _props);
	const { classNames, styles, unstyled, children, store: controlledStore, vars, onOptionSubmit, onClose, size, dropdownPadding, resetSelectionOnOptionHover, __staticSelector, readOnly, attributes, ...others } = props;
	const uncontrolledStore = require_use_combobox.useCombobox();
	const store = controlledStore || uncontrolledStore;
	const getStyles = require_use_styles.useStyles({
		name: __staticSelector || "Combobox",
		classes: require_Combobox_module.default,
		props,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const onDropdownClose = () => {
		onClose?.();
		store.closeDropdown();
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Combobox_context.ComboboxProvider, {
		value: {
			getStyles,
			store,
			onOptionSubmit,
			size,
			resetSelectionOnOptionHover,
			readOnly
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
			opened: store.dropdownOpened,
			preventPositionChangeWhenVisible: false,
			...others,
			onChange: (_opened) => !_opened && onDropdownClose(),
			withRoles: false,
			unstyled,
			children
		})
	});
};
const extendCombobox = (c) => c;
Combobox.extend = extendCombobox;
Combobox.classes = require_Combobox_module.default;
Combobox.varsResolver = varsResolver;
Combobox.displayName = "@mantine/core/Combobox";
Combobox.Target = require_ComboboxTarget.ComboboxTarget;
Combobox.Dropdown = require_ComboboxDropdown.ComboboxDropdown;
Combobox.Options = require_ComboboxOptions.ComboboxOptions;
Combobox.Option = require_ComboboxOption.ComboboxOption;
Combobox.Search = require_ComboboxSearch.ComboboxSearch;
Combobox.Empty = require_ComboboxEmpty.ComboboxEmpty;
Combobox.Chevron = require_ComboboxChevron.ComboboxChevron;
Combobox.Footer = require_ComboboxFooter.ComboboxFooter;
Combobox.Header = require_ComboboxHeader.ComboboxHeader;
Combobox.EventsTarget = require_ComboboxEventsTarget.ComboboxEventsTarget;
Combobox.DropdownTarget = require_ComboboxDropdownTarget.ComboboxDropdownTarget;
Combobox.Group = require_ComboboxGroup.ComboboxGroup;
Combobox.ClearButton = require_ComboboxClearButton.ComboboxClearButton;
Combobox.HiddenInput = require_ComboboxHiddenInput.ComboboxHiddenInput;
//#endregion
exports.Combobox = Combobox;

//# sourceMappingURL=Combobox.cjs.map