@bigbinary/neeto-atoms 1.0.8 → 1.0.10

package/dist/cjs/Select-DOPZHlqc.js

@@ -0,0 +1,567 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var SelectFieldWrapper = require('./SelectFieldWrapper-DEA--2wj.js');
+var utils = require('./utils-CTr7wn5d.js');
+var primitives_Combobox = require('./primitives/Combobox.js');
+var primitives_Spinner = require('./primitives/Spinner.js');
+var x = require('./x-Brw3FJst.js');
+var chevronDown = require('./chevron-down-CPsWSS51.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function hyphenize(str) {
+    return str
+        .replace(/([a-z])([A-Z])/g, "$1-$2")
+        .replace(/[\s_]+/g, "-")
+        .toLowerCase();
+}
+
+function buildAriaDescribedBy(error, errorId, helpText, helpTextId) {
+    return ([error ? errorId : null, helpText ? helpTextId : null]
+        .filter(Boolean)
+        .join(" ") || undefined);
+}
+function buildTestIdPrefix(dataTestId, label) {
+    return dataTestId ?? (label ? hyphenize(label) : undefined);
+}
+
+function useAsyncOptions({ loadOptions, defaultOptions = false, cacheOptions = false, }) {
+    const [asyncOptions, setAsyncOptions] = React.useState(() => Array.isArray(defaultOptions) ? defaultOptions : []);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const cacheRef = React.useRef({});
+    const debounceRef = React.useRef(null);
+    const latestRequestRef = React.useRef(0);
+    const mountedRef = React.useRef(true);
+    // Load default options on mount when `defaultOptions === true`
+    React.useEffect(() => {
+        if (!loadOptions || defaultOptions !== true)
+            return;
+        let cancelled = false;
+        setIsLoading(true);
+        loadOptions("")
+            .then(results => {
+            if (cancelled)
+                return;
+            setAsyncOptions(results);
+            if (cacheOptions)
+                cacheRef.current[""] = results;
+            setIsLoading(false);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setIsLoading(false);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    // Clean up debounce timer and mark unmounted
+    React.useEffect(() => {
+        return () => {
+            mountedRef.current = false;
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, []);
+    const handleAsyncInputChange = React.useCallback((value) => {
+        if (!loadOptions)
+            return;
+        const query = value.trim();
+        // Check cache first
+        if (cacheOptions && query in cacheRef.current) {
+            setAsyncOptions(cacheRef.current[query]);
+            return;
+        }
+        // Debounce the fetch
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            const requestId = ++latestRequestRef.current;
+            setIsLoading(true);
+            loadOptions(query)
+                .then(results => {
+                if (requestId !== latestRequestRef.current || !mountedRef.current)
+                    return;
+                setAsyncOptions(results);
+                if (cacheOptions)
+                    cacheRef.current[query] = results;
+                setIsLoading(false);
+            })
+                .catch(() => {
+                if (requestId === latestRequestRef.current && mountedRef.current) {
+                    setIsLoading(false);
+                }
+            });
+        }, 300);
+    }, [loadOptions, cacheOptions]);
+    return { asyncOptions, isLoading, handleAsyncInputChange };
+}
+
+function useLazyLoadSentinel({ fetchMore, isEnabled, }) {
+    const observerRef = React.useRef(null);
+    const fetchMoreRef = React.useRef(fetchMore);
+    fetchMoreRef.current = fetchMore;
+    const sentinelRef = React.useCallback((node) => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+        if (!node || !isEnabled)
+            return;
+        const observer = new IntersectionObserver(entries => {
+            if (entries[0]?.isIntersecting)
+                fetchMoreRef.current?.();
+        }, { root: null, rootMargin: "0px", threshold: 0.1 });
+        observer.observe(node);
+        observerRef.current = observer;
+    }, [isEnabled]);
+    // Clean up observer on unmount
+    React.useEffect(() => {
+        return () => {
+            observerRef.current?.disconnect();
+        };
+    }, []);
+    return sentinelRef;
+}
+
+const CREATE_PREFIX = "__create__:";
+function useCreatableItems({ isCreatable, isGrouped, flatOptions, selectedValues, baseUiItems, onCreateOption, onChange, onAsyncInputChange, children, }) {
+    const [inputValue, setInputValue] = React.useState("");
+    const handleInputValueChange = React.useCallback((value) => {
+        setInputValue(value);
+        onAsyncInputChange?.(value);
+    }, [onAsyncInputChange]);
+    const trimmedInput = inputValue.trim();
+    const showCreateOption = React.useMemo(() => {
+        if (!isCreatable || trimmedInput.length === 0)
+            return false;
+        const lower = trimmedInput.toLowerCase();
+        return (!flatOptions.some(o => o.label.toLowerCase() === lower || o.value.toLowerCase() === lower) && !selectedValues.includes(trimmedInput));
+    }, [isCreatable, trimmedInput, flatOptions, selectedValues]);
+    const effectiveItems = React__default.default.useMemo(() => computeEffectiveItems(children, baseUiItems, showCreateOption, isGrouped, trimmedInput), [baseUiItems, children, isGrouped, showCreateOption, trimmedInput]);
+    // Custom filter: always pass the "Create" item through
+    const creatableFilter = React.useCallback((itemValue, query, itemToString) => {
+        if (itemValue.startsWith(CREATE_PREFIX))
+            return true;
+        const label = itemToString?.(itemValue) ?? itemValue;
+        return label.toLowerCase().includes(query.toLowerCase());
+    }, []);
+    const handleValueChange = React.useCallback((next) => {
+        const raw = next ?? [];
+        const createEntry = raw.find(v => v.startsWith(CREATE_PREFIX));
+        if (createEntry) {
+            const newValue = createEntry.slice(CREATE_PREFIX.length);
+            const withNewValue = raw.map(v => (v === createEntry ? newValue : v));
+            onCreateOption?.(newValue);
+            onChange?.(withNewValue);
+            return;
+        }
+        onChange?.(raw);
+    }, [onChange, onCreateOption]);
+    return {
+        inputValue,
+        showCreateOption,
+        effectiveItems,
+        creatableFilter,
+        handleInputValueChange,
+        handleValueChange,
+    };
+}
+
+function isOptionGroup(opt) {
+    return "options" in opt && Array.isArray(opt.options);
+}
+
+/** Flatten grouped options into a flat lookup array. */
+function flattenOptions(options) {
+    return options.flatMap(opt => (isOptionGroup(opt) ? opt.options : [opt]));
+}
+/** Check if any option is a group. */
+function hasGroups(options) {
+    return options.some(isOptionGroup);
+}
+/** Convert options to base-ui `items` format for filtering support. */
+function toBaseUiItems(options) {
+    if (hasGroups(options)) {
+        return options.filter(isOptionGroup).map(g => ({
+            label: g.label,
+            items: g.options.map(o => o.value),
+        }));
+    }
+    return options.map(o => o.value);
+}
+/** Build the effective items array, appending a "Create" entry when needed. */
+function computeEffectiveItems(children, baseUiItems, showCreateOption, isGrouped, trimmedInput) {
+    if (children)
+        return undefined;
+    const createValue = showCreateOption
+        ? `${CREATE_PREFIX}${trimmedInput}`
+        : null;
+    if (!baseUiItems && !createValue)
+        return undefined;
+    const base = baseUiItems ?? [];
+    if (!createValue)
+        return base;
+    if (!isGrouped) {
+        return [...base, createValue];
+    }
+    return [
+        ...base,
+        { label: "", items: [createValue] },
+    ];
+}
+
+function useMultiSelectOptions(props) {
+    const isAsync = !!props.loadOptions;
+    const { asyncOptions, isLoading, handleAsyncInputChange } = useAsyncOptions({
+        loadOptions: props.loadOptions,
+        defaultOptions: props.defaultOptions ?? false,
+        cacheOptions: props.cacheOptions ?? false,
+    });
+    const resolvedOptions = isAsync
+        ? asyncOptions
+        : (props.options ?? []);
+    const flatOptions = flattenOptions(resolvedOptions);
+    const isGrouped = hasGroups(resolvedOptions);
+    const baseUiItems = React__default.default.useMemo(() => resolvedOptions.length > 0 ? toBaseUiItems(resolvedOptions) : undefined, [resolvedOptions]);
+    const hasMoreLazy = (props.isAsyncLoadOptionEnabled ?? false) &&
+        typeof props.totalOptionsCount === "number" &&
+        flatOptions.length < props.totalOptionsCount;
+    const loaderCallbackRef = useLazyLoadSentinel({
+        fetchMore: props.fetchMore,
+        isEnabled: props.isAsyncLoadOptionEnabled ?? false,
+    });
+    return {
+        isAsync,
+        resolvedOptions,
+        flatOptions,
+        isGrouped,
+        isLoading,
+        handleAsyncInputChange,
+        baseUiItems,
+        hasMoreLazy,
+        loaderCallbackRef,
+    };
+}
+
+// SIZE_CONFIG is shared by both SelectCombobox (single-select) and
+// MultiSelectCombobox (multi-select). Keys mirror the MultiSelect constants
+// that previously lived in MultiSelect.constants.ts.
+const SIZE_CONFIG = {
+    small: {
+        chips: "min-h-7 text-xs gap-0.5 px-1 py-0.5",
+        input: "text-xs",
+        chip: "h-4.5 text-[0.6875rem] px-1",
+    },
+    medium: {
+        chips: "min-h-8 text-sm gap-1 px-2.5 py-1",
+        input: "text-sm",
+        chip: "h-5.25 text-xs px-1.5",
+    },
+    large: {
+        chips: "min-h-10 text-sm gap-1 px-2.5 py-1.5",
+        input: "text-sm",
+        chip: "h-6 text-xs px-2",
+    },
+};
+
+const defaultFormatCreateLabel$1 = (v) => `Create "${v}"`;
+function useSelectState(props) {
+    const { id: idProp, size = "medium", label = "", error = "", helpText = "", value: valueProp, defaultValue, onChange, dataTestId, isCreatable = false, onCreateOption, formatCreateLabel = defaultFormatCreateLabel$1, isClearable = false, isDisabled = false, required = false, isSearchable = true, autoHighlight = true, onOpenChange, children, } = props;
+    const opt = useMultiSelectOptions(props);
+    const generatedId = React.useId();
+    const id = idProp ?? generatedId;
+    const errorId = `error_${id}`;
+    const helpTextId = `helpText_${id}`;
+    const sizeConfig = SIZE_CONFIG[size];
+    const isControlled = valueProp !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
+    const currentValue = isControlled ? (valueProp ?? "") : internalValue;
+    const applyValue = React.useCallback((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const handleValueChange = React.useCallback((next) => {
+        const raw = next ?? "";
+        // Handle the creatable "Create X" option
+        if (raw.startsWith(CREATE_PREFIX)) {
+            const newValue = raw.slice(CREATE_PREFIX.length);
+            onCreateOption?.(newValue);
+            applyValue(newValue);
+            return;
+        }
+        applyValue(raw);
+    }, [applyValue, onCreateOption]);
+    const [inputValue, setInputValueState] = React.useState("");
+    const trimmedInput = inputValue.trim();
+    const combinedHandleInputValueChange = React.useCallback((value) => {
+        setInputValueState(value);
+        if (opt.isAsync)
+            opt.handleAsyncInputChange(value);
+    }, [opt.isAsync, opt.handleAsyncInputChange]);
+    const handleClear = React.useCallback(() => {
+        applyValue("");
+    }, [applyValue]);
+    const showCreateOption = React.useMemo(() => {
+        if (!isCreatable ||
+            trimmedInput.length === 0 ||
+            currentValue === trimmedInput)
+            return false;
+        const lower = trimmedInput.toLowerCase();
+        return !opt.flatOptions.some(o => o.label.toLowerCase() === lower || o.value.toLowerCase() === lower);
+    }, [isCreatable, trimmedInput, currentValue, opt.flatOptions]);
+    const effectiveItems = React.useMemo(() => {
+        if (children)
+            return undefined;
+        const base = opt.baseUiItems;
+        if (!showCreateOption)
+            return base;
+        const createValue = `${CREATE_PREFIX}${trimmedInput}`;
+        if (!opt.isGrouped) {
+            return [...(base ?? []), createValue];
+        }
+        return [
+            ...(base ?? []),
+            { label: "", items: [createValue] },
+        ];
+    }, [
+        children,
+        opt.baseUiItems,
+        opt.isGrouped,
+        showCreateOption,
+        trimmedInput,
+    ]);
+    const creatableFilter = React.useCallback((itemValue, query, itemToString) => {
+        if (itemValue.startsWith(CREATE_PREFIX))
+            return true;
+        const label = itemToString?.(itemValue) ?? itemValue;
+        return label.toLowerCase().includes(query.toLowerCase());
+    }, []);
+    const ariaDescribedBy = buildAriaDescribedBy(error, errorId, helpText, helpTextId);
+    const testIdPrefix = buildTestIdPrefix(dataTestId, label);
+    const showClearButton = isClearable && !!currentValue && !isDisabled;
+    const flatOptionsMap = React.useMemo(() => new Map(opt.flatOptions.map(o => [o.value, o])), [opt.flatOptions]);
+    const labelForValue = React.useCallback((val) => {
+        if (val.startsWith(CREATE_PREFIX)) {
+            return formatCreateLabel(val.slice(CREATE_PREFIX.length));
+        }
+        return flatOptionsMap.get(val)?.label ?? val;
+    }, [flatOptionsMap, formatCreateLabel]);
+    return {
+        ...opt,
+        id,
+        errorId,
+        helpTextId,
+        sizeConfig,
+        isControlled,
+        currentValue,
+        effectiveItems,
+        creatableFilter,
+        handleValueChange,
+        handleInputValueChange: combinedHandleInputValueChange,
+        handleClear,
+        showCreateOption,
+        showClearButton,
+        ariaDescribedBy,
+        testIdPrefix,
+        labelForValue,
+        flatOptionsMap,
+        label,
+        error,
+        helpText,
+        isDisabled,
+        required,
+        isSearchable,
+        autoHighlight,
+        onOpenChange,
+        isClearable,
+    };
+}
+
+const defaultFormatCreateLabel = (v) => `Create "${v}"`;
+function useMultiSelectState(props) {
+    const { id: idProp, size = "medium", label = "", error = "", helpText = "", value: valueProp, defaultValue, onChange, dataTestId, isCreatable = false, onCreateOption, formatCreateLabel = defaultFormatCreateLabel, children, } = props;
+    const opt = useMultiSelectOptions(props);
+    const generatedId = React.useId();
+    const id = idProp ?? generatedId;
+    const errorId = `error_${id}`;
+    const helpTextId = `helpText_${id}`;
+    const sizeConfig = SIZE_CONFIG[size];
+    const isControlled = valueProp !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue ?? []);
+    const selectedValues = isControlled ? valueProp : internalValue;
+    const handleChange = React.useCallback((values) => {
+        setInternalValue(values);
+        onChange?.(values);
+    }, [onChange]);
+    const { showCreateOption, effectiveItems, creatableFilter, handleInputValueChange, handleValueChange, } = useCreatableItems({
+        isCreatable,
+        isGrouped: opt.isGrouped,
+        flatOptions: opt.flatOptions,
+        selectedValues,
+        baseUiItems: opt.baseUiItems,
+        onCreateOption,
+        onChange: handleChange,
+        onAsyncInputChange: opt.isAsync ? opt.handleAsyncInputChange : undefined,
+        children,
+    });
+    const ariaDescribedBy = buildAriaDescribedBy(error, errorId, helpText, helpTextId);
+    const testIdPrefix = buildTestIdPrefix(dataTestId, label);
+    const flatOptionsMap = React.useMemo(() => new Map(opt.flatOptions.map(o => [o.value, o])), [opt.flatOptions]);
+    const labelForValue = React.useCallback((val) => {
+        if (val.startsWith(CREATE_PREFIX)) {
+            return formatCreateLabel(val.slice(CREATE_PREFIX.length));
+        }
+        return flatOptionsMap.get(val)?.label ?? val;
+    }, [flatOptionsMap, formatCreateLabel]);
+    return {
+        ...opt,
+        id,
+        errorId,
+        helpTextId,
+        sizeConfig,
+        isControlled,
+        selectedValues,
+        effectiveItems,
+        creatableFilter,
+        handleInputValueChange,
+        handleValueChange,
+        showCreateOption,
+        ariaDescribedBy,
+        testIdPrefix,
+        labelForValue,
+        flatOptionsMap,
+        label,
+        error,
+        helpText,
+    };
+}
+
+/** Shared anchor + non-searchable click-to-focus behaviour for combobox triggers. */
+function useComboboxAnchor(isSearchable) {
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const handleClick = React.useCallback((e) => {
+        if (!isSearchable) {
+            e.currentTarget.querySelector("input")?.focus();
+        }
+    }, [isSearchable]);
+    return { anchorEl, setAnchorEl, handleClick };
+}
+
+function OptionItem({ val, flatOptionsMap, labelForValue, testIdPrefix, }) {
+    return (jsxRuntime.jsx(primitives_Combobox.ComboboxItem, { value: val, disabled: !val.startsWith(CREATE_PREFIX) && flatOptionsMap.get(val)?.disabled, className: val.startsWith(CREATE_PREFIX) ? "text-primary" : undefined, ...(testIdPrefix
+            ? { "data-testid": `${testIdPrefix}-select-option` }
+            : {}), children: labelForValue(val) }, val));
+}
+
+function MultiSelectDropdown({ resolvedOptions, flatOptionsMap, isGrouped, isLoading, loadingMessage, emptyMessage, showCreateOption, labelForValue, testIdPrefix, hasMoreLazy, loaderCallbackRef, children, }) {
+    return (jsxRuntime.jsxs(primitives_Combobox.ComboboxList, { ...(testIdPrefix
+            ? { "data-testid": `${testIdPrefix}-select-menu` }
+            : {}), children: [isLoading && (jsxRuntime.jsx("div", { className: "flex w-full justify-center py-2 text-center text-sm text-muted-foreground", children: loadingMessage })), !isLoading && !showCreateOption && (jsxRuntime.jsx(primitives_Combobox.ComboboxEmpty, { children: emptyMessage })), children ??
+                (resolvedOptions.length > 0 || showCreateOption ? (isGrouped ? (jsxRuntime.jsx(primitives_Combobox.ComboboxCollection, { children: (group) => (jsxRuntime.jsxs(primitives_Combobox.ComboboxGroup, { items: group.items, children: [group.label && jsxRuntime.jsx(primitives_Combobox.ComboboxLabel, { children: group.label }), jsxRuntime.jsx(primitives_Combobox.ComboboxCollection, { children: (val) => (jsxRuntime.jsx(OptionItem, { val: val, flatOptionsMap: flatOptionsMap, labelForValue: labelForValue, testIdPrefix: testIdPrefix }, val)) })] }, group.label || "__create__")) })) : (jsxRuntime.jsx(primitives_Combobox.ComboboxCollection, { children: (val) => (jsxRuntime.jsx(OptionItem, { val: val, flatOptionsMap: flatOptionsMap, labelForValue: labelForValue, testIdPrefix: testIdPrefix }, val)) }))) : null), hasMoreLazy && (jsxRuntime.jsx("div", { ref: loaderCallbackRef, className: "flex w-full items-center justify-center py-3", "data-testid": testIdPrefix ? `${testIdPrefix}-lazy-loader` : "lazy-loader", children: jsxRuntime.jsx(primitives_Spinner.Spinner, {}) }))] }));
+}
+
+const SelectCombobox = React.forwardRef((p, ref) => {
+    const { anchorEl, setAnchorEl, handleClick } = useComboboxAnchor(p.isSearchable);
+    const handleClearClick = React.useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        p.handleClear();
+    }, [p.handleClear]);
+    return (jsxRuntime.jsxs(primitives_Combobox.Combobox, { name: p.name, ...(p.effectiveItems && !p.children
+            ? {
+                items: p.effectiveItems,
+                itemToStringLabel: p.labelForValue,
+                ...(!p.isSearchable || p.isAsync
+                    ? { filter: null }
+                    : p.isCreatable
+                        ? { filter: p.creatableFilter }
+                        : {}),
+            }
+            : {}), ...(p.isControlled
+            ? { value: p.valueProp }
+            : { defaultValue: p.defaultValue }), onValueChange: p.handleValueChange, ...(p.isCreatable || p.isAsync
+            ? { onInputValueChange: p.handleInputValueChange }
+            : {}), onOpenChange: p.onOpenChange, disabled: p.isDisabled, autoHighlight: p.autoHighlight, children: [jsxRuntime.jsx("div", { ref: setAnchorEl, onClick: handleClick, className: !p.isSearchable ? "cursor-pointer" : undefined, children: jsxRuntime.jsxs(primitives_Combobox.ComboboxChips, { className: utils.cn(p.sizeConfig.chips, !!p.error &&
+                        "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40", p.inputClassName), ...(p.testIdPrefix
+                        ? { "data-testid": `${p.testIdPrefix}-select-container` }
+                        : {}), children: [!p.isSearchable &&
+                            (p.currentValue ? (jsxRuntime.jsx("span", { className: "flex-1 truncate", children: p.labelForValue(p.currentValue) })) : (jsxRuntime.jsx("span", { className: "flex-1 truncate text-muted-foreground", children: p.placeholder }))), jsxRuntime.jsx(primitives_Combobox.ComboboxChipsInput, { ref: ref, id: p.id, placeholder: p.isSearchable && !p.currentValue ? p.placeholder : undefined, "aria-invalid": !!p.error || undefined, "aria-describedby": p.ariaDescribedBy, "aria-required": p.required || undefined, className: utils.cn(p.sizeConfig.input, !p.isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"), disabled: p.isDisabled, ...(p.testIdPrefix
+                                ? { "data-testid": `${p.testIdPrefix}-select-input` }
+                                : {}) }), p.showClearButton && (jsxRuntime.jsx("button", { type: "button", tabIndex: -1, "aria-label": "Clear selection", className: "shrink-0 text-muted-foreground hover:text-foreground", onClick: handleClearClick, children: jsxRuntime.jsx(x.X, { className: "size-3.5" }) })), jsxRuntime.jsx(chevronDown.ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })] }) }), jsxRuntime.jsx(primitives_Combobox.ComboboxContent, { anchor: anchorEl, ...p.contentProps, children: jsxRuntime.jsx(MultiSelectDropdown, { ...p.dropdownProps, labelForValue: p.labelForValue, testIdPrefix: p.testIdPrefix, children: p.children }) })] }));
+});
+SelectCombobox.displayName = "SelectCombobox";
+
+const MultiSelectCombobox = React.forwardRef((p, ref) => {
+    const { anchorEl, setAnchorEl, handleClick } = useComboboxAnchor(p.isSearchable);
+    return (jsxRuntime.jsxs(primitives_Combobox.Combobox, { multiple: true, name: p.name, ...(p.effectiveItems && !p.children
+            ? {
+                items: p.effectiveItems,
+                itemToStringLabel: p.labelForValue,
+                ...(!p.isSearchable || p.isAsync
+                    ? { filter: null }
+                    : p.isCreatable
+                        ? { filter: p.creatableFilter }
+                        : {}),
+            }
+            : {}), ...(p.isControlled
+            ? { value: p.valueProp }
+            : { defaultValue: p.defaultValue }), onValueChange: p.handleValueChange, ...(p.isCreatable || p.isAsync
+            ? { onInputValueChange: p.handleInputValueChange }
+            : {}), onOpenChange: p.onOpenChange, disabled: p.isDisabled, autoHighlight: p.autoHighlight, children: [jsxRuntime.jsx("div", { ref: setAnchorEl, onClick: handleClick, className: !p.isSearchable ? "cursor-pointer" : undefined, children: jsxRuntime.jsxs(primitives_Combobox.ComboboxChips, { className: utils.cn(p.sizeConfig.chips, !!p.error &&
+                        "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40", p.chipsClassName, p.inputClassName), ...(p.testIdPrefix
+                        ? { "data-testid": `${p.testIdPrefix}-select-container` }
+                        : {}), children: [p.selectedValues.map(val => (jsxRuntime.jsx(primitives_Combobox.ComboboxChip, { className: p.sizeConfig.chip, showRemove: !p.hideChipRemove, ...(p.testIdPrefix
+                                ? { "data-testid": `${p.testIdPrefix}-chip` }
+                                : {}), children: p.labelForValue(val) }, val))), jsxRuntime.jsx(primitives_Combobox.ComboboxChipsInput, { ref: ref, id: p.id, placeholder: p.isSearchable && p.selectedValues.length === 0
+                                ? p.placeholder
+                                : undefined, "aria-invalid": !!p.error || undefined, "aria-describedby": p.ariaDescribedBy, "aria-required": p.required || undefined, className: utils.cn(p.sizeConfig.input, !p.isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"), disabled: p.isDisabled, ...(p.testIdPrefix
+                                ? { "data-testid": `${p.testIdPrefix}-select-input` }
+                                : {}) })] }) }), jsxRuntime.jsx(primitives_Combobox.ComboboxContent, { anchor: anchorEl, ...p.contentProps, children: jsxRuntime.jsx(MultiSelectDropdown, { ...p.dropdownProps, labelForValue: p.labelForValue, testIdPrefix: p.testIdPrefix, children: p.children }) })] }));
+});
+MultiSelectCombobox.displayName = "MultiSelectCombobox";
+
+const SingleSelectInner = React.forwardRef((props, ref) => {
+    const s = useSelectState(props);
+    return (jsxRuntime.jsx(SelectFieldWrapper.SelectFieldWrapper, { id: s.id, label: s.label, error: s.error, helpText: s.helpText, errorId: s.errorId, helpTextId: s.helpTextId, isDisabled: s.isDisabled, required: s.required, testIdPrefix: s.testIdPrefix, labelProps: props.labelProps, className: props.className, children: jsxRuntime.jsx(SelectCombobox, { ref: ref, name: props.name, id: s.id, effectiveItems: s.effectiveItems, labelForValue: s.labelForValue, isSearchable: s.isSearchable, isAsync: s.isAsync, isCreatable: props.isCreatable ?? false, creatableFilter: s.creatableFilter, isControlled: s.isControlled, valueProp: props.value, defaultValue: props.defaultValue, currentValue: s.currentValue, handleValueChange: s.handleValueChange, handleInputValueChange: s.handleInputValueChange, handleClear: s.handleClear, onOpenChange: props.onOpenChange, isDisabled: s.isDisabled, autoHighlight: s.autoHighlight, required: s.required, isClearable: props.isClearable ?? false, showClearButton: s.showClearButton, sizeConfig: s.sizeConfig, error: s.error, placeholder: props.placeholder ?? "", ariaDescribedBy: s.ariaDescribedBy, testIdPrefix: s.testIdPrefix, inputClassName: props.inputClassName, contentProps: props.contentProps, dropdownProps: {
+                resolvedOptions: s.resolvedOptions,
+                flatOptionsMap: s.flatOptionsMap,
+                isGrouped: s.isGrouped,
+                isLoading: s.isLoading,
+                loadingMessage: props.loadingMessage ?? "Loading\u2026",
+                emptyMessage: props.emptyMessage ?? "No results found.",
+                showCreateOption: s.showCreateOption,
+                hasMoreLazy: s.hasMoreLazy,
+                loaderCallbackRef: s.loaderCallbackRef,
+            }, children: props.children }) }));
+});
+SingleSelectInner.displayName = "SingleSelectInner";
+const MultiSelectInner = React.forwardRef((props, ref) => {
+    const s = useMultiSelectState(props);
+    const { isDisabled = false, required = false } = props;
+    return (jsxRuntime.jsx(SelectFieldWrapper.SelectFieldWrapper, { id: s.id, label: s.label, error: s.error, helpText: s.helpText, errorId: s.errorId, helpTextId: s.helpTextId, isDisabled: isDisabled, required: required, testIdPrefix: s.testIdPrefix, labelProps: props.labelProps, className: props.className, children: jsxRuntime.jsx(MultiSelectCombobox, { ref: ref, name: props.name, id: s.id, effectiveItems: s.effectiveItems, labelForValue: s.labelForValue, isSearchable: props.isSearchable ?? true, isAsync: s.isAsync, isCreatable: props.isCreatable ?? false, creatableFilter: s.creatableFilter, isControlled: s.isControlled, valueProp: props.value, defaultValue: props.defaultValue, selectedValues: s.selectedValues, handleValueChange: s.handleValueChange, handleInputValueChange: s.handleInputValueChange, onOpenChange: props.onOpenChange, isDisabled: isDisabled, autoHighlight: props.autoHighlight ?? true, sizeConfig: s.sizeConfig, error: s.error, chipsClassName: props.chipsClassName, inputClassName: props.inputClassName, placeholder: props.placeholder ?? "", hideChipRemove: props.hideChipRemove ?? false, ariaDescribedBy: s.ariaDescribedBy, required: required, testIdPrefix: s.testIdPrefix, contentProps: props.contentProps, dropdownProps: {
+                resolvedOptions: s.resolvedOptions,
+                flatOptionsMap: s.flatOptionsMap,
+                isGrouped: s.isGrouped,
+                isLoading: s.isLoading,
+                loadingMessage: props.loadingMessage ?? "Loading\u2026",
+                emptyMessage: props.emptyMessage ?? "No results found.",
+                showCreateOption: s.showCreateOption,
+                hasMoreLazy: s.hasMoreLazy,
+                loaderCallbackRef: s.loaderCallbackRef,
+            }, children: props.children }) }));
+});
+MultiSelectInner.displayName = "MultiSelectInner";
+const Select = React.forwardRef((props, ref) => {
+    if (props.isMulti === true) {
+        return jsxRuntime.jsx(MultiSelectInner, { ...props, ref: ref });
+    }
+    return jsxRuntime.jsx(SingleSelectInner, { ...props, ref: ref });
+});
+Select.displayName = "Select";
+
+exports.Select = Select;
+//# sourceMappingURL=Select-DOPZHlqc.js.map