import { __DEV__ } from "../utils/consts.js";
import "../utils/index.js";
import { helpTextSize } from "../input/consts.js";
import { Box } from "../box/box.js";
import "../box/index.js";
import helpText_default from "../input/helpText.js";
import Popover from "../popover/popover.js";
import "../popover/index.js";
import { Input } from "../input/input.js";
import "../input/index.js";
import { SelectProvider } from "./context.js";
import selectButton_default from "./selectButton.js";
import selectContent_default from "./selectContent.js";
import selectGroup_default from "./selectGroup.js";
import selectLabel_default from "./selectLabel.js";
import selectOption_default from "./selectOption.js";
import useSelect from "./useSelect.js";
import { useEffect, useId, useState } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/select/select.tsx
/**
* Wraps trigger and content elements, providing them with context.
* When no children are provided, content can be displayed based on 'options' data prop.
* Supports single select and multi select, as well as controlled and uncontrolled modes.
*/
function Select(props) {
	const { children, defaultValue, disabled, errorText, closeOnScroll, helpText, id: idProp, isInvalid, isMultiple, label, labelMarkOptional, labelTooltipText, maxHeight, name, onChange, options, matchWidth = true, placeholder = "Please select", selectedText, readOnly, selectButton, selectButtonProps, showOptionsFilter, size = "lg", value, variant, ...rest } = props;
	const selectProps = useSelect({
		defaultValue,
		isMultiple,
		onChange,
		value,
		options,
		selectedText,
		children
	});
	if (__DEV__ && isMultiple && !Array.isArray(selectProps.value)) console.error("<Select /> is used with isMultiple but its value is not an array: ", value);
	const generatedId = useId();
	const [query, setQuery] = useState("");
	const [filteredOptions, setFilteredOptions] = useState(options);
	const id = idProp || generatedId;
	const context = {
		disabled,
		isInvalid,
		isMultiple,
		name,
		options,
		placeholder,
		selectedText,
		readOnly,
		size,
		variant,
		...selectProps
	};
	const onQueryChange = (e) => setQuery(e.target.value?.toLowerCase());
	const filterOptions = (i) => !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query);
	useEffect(() => {
		setFilteredOptions(options?.filter(filterOptions));
	}, [query, options]);
	return /* @__PURE__ */ jsx(SelectProvider, {
		value: context,
		children: /* @__PURE__ */ jsxs(Box, {
			className: "vui-selectContainer",
			column: true,
			...rest,
			children: [
				!!label && /* @__PURE__ */ jsx(selectLabel_default, {
					disabled,
					id,
					label,
					labelMarkOptional,
					labelTooltipText
				}),
				/* @__PURE__ */ jsx(Popover, {
					matchWidth,
					children: /* @__PURE__ */ jsxs(Fragment$1, { children: [selectButton ?? /* @__PURE__ */ jsx(selectButton_default, { ...selectButtonProps }), /* @__PURE__ */ jsxs(selectContent_default, {
						overflow: "hidden",
						children: [showOptionsFilter && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Input, {
							iconLeft: "uiSearch",
							id,
							m: 1,
							mt: 0,
							onChange: onQueryChange,
							placeholder: "Filter…",
							size,
							value: query,
							w: "100%"
						}) }), /* @__PURE__ */ jsx(selectGroup_default, {
							maxH: maxHeight,
							overflowY: "auto",
							tabIndex: 1e3,
							children: children ?? filteredOptions?.map?.((option) => /* @__PURE__ */ jsx(selectOption_default, {
								closeOnScroll,
								title: option.text,
								...option
							}, option.value))
						})]
					})] })
				}),
				!!helpText && /* @__PURE__ */ jsx(helpText_default, {
					size: helpTextSize[size],
					children: helpText
				}),
				!!errorText && /* @__PURE__ */ jsx(helpText_default, {
					isError: true,
					size: helpTextSize[size],
					children: errorText
				})
			]
		})
	});
}
Select.Button = selectButton_default;
Select.Content = selectContent_default;
Select.Group = selectGroup_default;
Select.Option = selectOption_default;
Select.displayName = "Select";

//#endregion
export { Select };
globalThis.__vuiVersion__ = "4.0.0-beta.1"
//# sourceMappingURL=select.js.map