@veracity/vui/dist/select/select.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { __DEV__ } from "../utils/consts.js";
import { helpTextSize } from "../input/consts.js";
import { Box } from "../box/box.js";
import { HelpText } from "../input/helpText.js";
import Popover from "../popover/popover.js";
import { Input } from "../input/input.js";
import { SelectProvider } from "./context.js";
import { SelectButton } from "./selectButton.js";
import { SelectContent } from "./selectContent.js";
import { SelectGroup } from "./selectGroup.js";
import { SelectLabel } from "./selectLabel.js";
import { SelectOption } 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, onClose, onOpen, 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 (true && 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, {
					disabled,
					id,
					label,
					labelMarkOptional,
					labelTooltipText
				}),
				/* @__PURE__ */ jsx(Popover, {
					isOpen: readOnly ? false : void 0,
					matchWidth,
					onClose,
					onOpen,
					children: /* @__PURE__ */ jsxs(Fragment$1, { children: [selectButton ?? /* @__PURE__ */ jsx(SelectButton, { ...selectButtonProps }), /* @__PURE__ */ jsxs(SelectContent, {
						overflow: "hidden",
						children: [showOptionsFilter && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Input, {
							startIcon: "uiSearch",
							id,
							m: 1,
							mt: 0,
							onChange: onQueryChange,
							placeholder: "Filter…",
							size,
							value: query,
							w: "100%"
						}) }), /* @__PURE__ */ jsx(SelectGroup, {
							maxH: maxHeight,
							overflowY: "auto",
							tabIndex: 1e3,
							children: children ?? filteredOptions?.map?.((option) => /* @__PURE__ */ jsx(SelectOption, {
								closeOnScroll,
								title: option.text,
								...option
							}, option.value))
						})]
					})] })
				}),
				!!helpText && /* @__PURE__ */ jsx(HelpText, {
					size: helpTextSize[size],
					children: helpText
				}),
				!!errorText && /* @__PURE__ */ jsx(HelpText, {
					isError: true,
					size: helpTextSize[size],
					children: errorText
				})
			]
		})
	});
}
Select.Button = SelectButton;
Select.Content = SelectContent;
Select.Group = SelectGroup;
Select.Option = SelectOption;
Select.displayName = "Select";

//#endregion
export { Select, Select as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=select.js.map