@ifhover/leaf-ui 0.0.0-stage → 0.6.0

package/dist/cjs/browser/modules/select/select.cjs

@@ -0,0 +1,574 @@
+"use client";
+"use strict";
+require('../../../styles/foundation.css');
+require('../../../styles/components/select.css');
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Select: ()=>select_Select,
+    SelectControl: ()=>select_SelectControl
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const react_virtual_namespaceObject = require("@tanstack/react-virtual");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const component_defaults_cjs_namespaceObject = require("../config-provider/component-defaults.cjs");
+const context_cjs_namespaceObject = require("../config-provider/context.cjs");
+const external_density_cjs_namespaceObject = require("../density.cjs");
+const form_cjs_namespaceObject = require("../form/form.cjs");
+const classes_cjs_namespaceObject = require("../shared/classes.cjs");
+const clear_button_cjs_namespaceObject = require("../shared/clear-button.cjs");
+const field_cjs_namespaceObject = require("../shared/field.cjs");
+const floating_cjs_namespaceObject = require("../shared/floating.cjs");
+const floating_feedback_cjs_namespaceObject = require("../shared/floating-feedback.cjs");
+const floating_highlight_cjs_namespaceObject = require("../shared/floating-highlight.cjs");
+const motion_cjs_namespaceObject = require("../shared/motion.cjs");
+const selection_content_cjs_namespaceObject = require("../shared/selection-content.cjs");
+const use_formatted_text_cjs_namespaceObject = require("../shared/use-formatted-text.cjs");
+const empty = [];
+const searchText = (option)=>option.searchLabel ?? ('string' == typeof option.label || 'number' == typeof option.label ? String(option.label) : option.value);
+const select_SelectControl = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function(props, forwardedRef) {
+    const { options: suppliedOptions, size = 'md', status: statusProp, placeholder, value, defaultValue, name, required: requiredProp, allowClear = false, form, className, style, disabled: disabledProp, id: idProp, onOpenChange, open: controlledOpen, defaultOpen, inputReadOnly, labelRender, tagRender, popupRender, onPopupScroll, onClick, onKeyDown, onBeforeInput, onCompositionStart, onPaste, onBlur, multiple = false, showSearch: searchProp = false, filterOption = true, onSearch, popupWidth = 'auto', popupMaxWidth = 420, popupClassName, popupStyle, popupPlacement, getPopupContainer, loading = false, notFoundContent, optionRender, maxCount, maxTagCount, tagWrap = true, allowCreate = false, onCreate, virtual: virtualProp, listHeight = 248, optionHeight: optionHeightProp, onChange: _onChange, ...inputProps } = props;
+    const format = (0, use_formatted_text_cjs_namespaceObject.useFormattedText)();
+    const showSearch = searchProp || allowCreate;
+    const [created, setCreated] = (0, external_react_namespaceObject.useState)([]);
+    const baseOptions = (0, external_react_namespaceObject.useMemo)(()=>suppliedOptions.flatMap((entry)=>'options' in entry ? [
+                ...entry.options
+            ] : [
+                entry
+            ]), [
+        suppliedOptions
+    ]);
+    const options = (0, external_react_namespaceObject.useMemo)(()=>[
+            ...baseOptions,
+            ...created.filter((entry)=>!baseOptions.some((option)=>option.value === entry.value))
+        ], [
+        baseOptions,
+        created
+    ]);
+    const optionGroups = (0, external_react_namespaceObject.useMemo)(()=>new Map(suppliedOptions.flatMap((entry)=>'options' in entry ? entry.options.map((option)=>[
+                    option.value,
+                    entry.label
+                ]) : [])), [
+        suppliedOptions
+    ]);
+    const virtual = virtualProp ?? options.length > 100;
+    const { messages, theme, density } = (0, context_cjs_namespaceObject.useLeafConfig)();
+    const optionHeight = optionHeightProp ?? Math.max(24, (0, external_density_cjs_namespaceObject.estimateControlHeight)(theme, density) - 4);
+    const field = (0, form_cjs_namespaceObject.useFormField)();
+    const disabled = disabledProp || field?.disabled;
+    const required = requiredProp ?? field?.required;
+    const status = statusProp ?? (field?.error ? 'error' : void 0);
+    const root = (0, external_react_namespaceObject.useRef)(null);
+    const input = (0, external_react_namespaceObject.useRef)(null);
+    const panel = (0, external_react_namespaceObject.useRef)(null);
+    const merged = (0, field_cjs_namespaceObject.useMergedRef)(input, forwardedRef);
+    const panelId = `${(0, external_react_namespaceObject.useId)()}-listbox`;
+    const [selected, setSelected] = (0, field_cjs_namespaceObject.useFieldValue)(value, defaultValue ?? (multiple ? empty : ''), input, form);
+    const values = 'string' == typeof selected ? selected ? [
+        selected
+    ] : [] : selected;
+    (0, motion_cjs_namespaceObject.useListMotion)(root, values[0], multiple ? '' : '.leaf-select__input-wrap[data-motion-key]');
+    const atLimit = multiple && void 0 !== maxCount && values.length >= Math.max(0, Math.floor(maxCount));
+    const unavailable = (option)=>option.disabled || atLimit && !values.includes(option.value);
+    const selectedCache = (0, external_react_namespaceObject.useRef)(new Map());
+    const nextCache = new Map();
+    for (const key of values){
+        const record = options.find((option)=>option.value === key) ?? selectedCache.current.get(key);
+        if (record) nextCache.set(key, record);
+    }
+    selectedCache.current = nextCache;
+    const selectedOptions = values.map((key)=>nextCache.get(key) ?? {
+            value: key,
+            label: key
+        });
+    const [query, setQuery] = (0, external_react_namespaceObject.useState)(null);
+    const searchQuery = query ?? '';
+    const [open, setOpen] = (0, floating_cjs_namespaceObject.usePopupState)(disabled || inputProps.readOnly, onOpenChange, controlledOpen, defaultOpen);
+    const [highlighted, setHighlighted] = (0, external_react_namespaceObject.useState)(-1);
+    const matched = searchQuery && showSearch && false !== filterOption ? options.filter((option)=>'function' == typeof filterOption ? filterOption(searchQuery, option) : searchText(option).toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase())) : options;
+    const newValue = searchQuery.trim();
+    const createOption = allowCreate && newValue && !options.some((option)=>option.value === newValue || searchText(option) === newValue) ? {
+        value: newValue,
+        label: newValue
+    } : null;
+    const filtered = createOption ? [
+        ...matched,
+        createOption
+    ] : matched;
+    const rows = (0, external_react_namespaceObject.useMemo)(()=>{
+        const entries = [];
+        let previousGroup;
+        filtered.forEach((option, index)=>{
+            const group = optionGroups.get(option.value);
+            if (void 0 !== group && group !== previousGroup) entries.push({
+                key: `group-${option.value}`,
+                group,
+                index: -1
+            });
+            entries.push({
+                key: option.value,
+                option,
+                index
+            });
+            previousGroup = group;
+        });
+        return entries;
+    }, [
+        filtered,
+        optionGroups
+    ]);
+    const virtualizer = (0, react_virtual_namespaceObject.useVirtualizer)({
+        count: rows.length,
+        getScrollElement: ()=>panel.current,
+        estimateSize: ()=>Math.max(24, optionHeight),
+        overscan: 5,
+        getItemKey: (index)=>rows[index]?.key ?? index,
+        enabled: open && virtual,
+        initialRect: {
+            height: listHeight,
+            width: 240
+        }
+    });
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (open && virtual && highlighted >= 0) {
+            const index = rows.findIndex((row)=>row.index === highlighted);
+            if (index >= 0) virtualizer.scrollToIndex(index, {
+                align: 'auto'
+            });
+        }
+    }, [
+        open,
+        virtual,
+        highlighted,
+        rows,
+        virtualizer
+    ]);
+    const updateQuery = (next)=>{
+        setQuery(next);
+        onSearch?.(next);
+    };
+    const close = ()=>{
+        setOpen(false);
+        setQuery(null);
+        if (searchQuery) onSearch?.('');
+    };
+    (0, floating_cjs_namespaceObject.useFloatingDismiss)(open, close, input, panel, root);
+    (0, floating_cjs_namespaceObject.useActiveOption)(open, highlighted >= 0 ? `${panelId}-${highlighted}` : void 0, panel);
+    const highlight = (0, floating_highlight_cjs_namespaceObject.useFloatingHighlight)(open, panel, highlighted >= 0 ? `${panelId}-${highlighted}` : void 0, `${searchQuery}:${filtered[highlighted]?.value}:${rows.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if (!open) setQuery(null);
+    }, [
+        open
+    ]);
+    const change = (next)=>{
+        if (disabled || inputProps.readOnly) return;
+        setSelected(multiple ? next : next[0] ?? '');
+        if (props.multiple) props.onChange?.([
+            ...next
+        ], [
+            ...selectedOptions,
+            ...options.filter((option)=>!values.includes(option.value)),
+            ...createOption ? [
+                createOption
+            ] : []
+        ].filter((option)=>next.includes(option.value)));
+        else props.onChange?.(next[0] ?? '', [
+            ...options,
+            ...createOption ? [
+                createOption
+            ] : []
+        ].find((option)=>option.value === next[0]));
+    };
+    const openMenu = ()=>{
+        if (disabled || inputProps.readOnly) return;
+        const active = filtered.findIndex((option)=>values.includes(option.value) && !unavailable(option));
+        setHighlighted(active >= 0 ? active : filtered.findIndex((option)=>!unavailable(option)));
+        setOpen(true);
+    };
+    const beginSearch = ()=>{
+        if (!showSearch || disabled || inputProps.readOnly || inputReadOnly) return;
+        if (!multiple && null === query) input.current?.select();
+        if (!open) openMenu();
+    };
+    const selectOption = (option)=>{
+        if (unavailable(option) || inputProps.readOnly) return;
+        if (createOption && option.value === createOption.value) {
+            setCreated((previous)=>[
+                    ...previous,
+                    option
+                ]);
+            onCreate?.(option);
+        }
+        change(multiple ? values.includes(option.value) ? values.filter((value)=>value !== option.value) : [
+            ...values,
+            option.value
+        ] : [
+            option.value
+        ]);
+        if (multiple) updateQuery('');
+        else close();
+        input.current?.focus();
+    };
+    const move = (direction)=>{
+        if (!filtered.length) return;
+        let next = highlighted < 0 ? direction > 0 ? -1 : filtered.length : highlighted;
+        for(let i = 0; i < filtered.length; i++){
+            next = (next + direction + filtered.length) % filtered.length;
+            const candidate = filtered[next];
+            if (candidate && !unavailable(candidate)) {
+                setHighlighted(next);
+                break;
+            }
+        }
+    };
+    const renderOption = (option, index)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
+            id: `${panelId}-${index}`,
+            "aria-posinset": index + 1,
+            "aria-setsize": filtered.length,
+            type: "button",
+            role: "option",
+            "aria-selected": values.includes(option.value),
+            "aria-disabled": option.disabled || atLimit && !values.includes(option.value) || void 0,
+            "data-highlighted": highlighted === index || void 0,
+            className: "leaf-floating__option",
+            disabled: option.disabled || atLimit && !values.includes(option.value),
+            tabIndex: -1,
+            onMouseEnter: ()=>{
+                if (!unavailable(option)) setHighlighted(index);
+            },
+            onMouseDown: (event)=>event.preventDefault(),
+            onClick: ()=>selectOption(option),
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                    className: "leaf-floating__option-label",
+                    children: createOption?.value === option.value ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Plus, {
+                                size: 14,
+                                "aria-hidden": "true"
+                            }),
+                            ' ',
+                            format('select.create', {
+                                label: 'string' == typeof option.label ? option.label : option.value
+                            })
+                        ]
+                    }) : optionRender ? optionRender(option) : option.label
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {
+                    size: 15,
+                    "aria-hidden": "true",
+                    className: "leaf-select__check"
+                })
+            ]
+        }, option.value);
+    const displayLabel = selectedOptions[0] ? labelRender?.(selectedOptions[0]) ?? selectedOptions[0].label : void 0;
+    const textLabel = 'string' == typeof displayLabel || 'number' == typeof displayLabel ? String(displayLabel) : '';
+    const inputValue = multiple ? searchQuery : showSearch && open ? query ?? textLabel : textLabel;
+    const clearable = allowClear && values.length > 0 && !disabled && !inputProps.readOnly;
+    const listboxProps = {
+        id: panelId,
+        role: 'listbox',
+        'aria-busy': loading || void 0,
+        'aria-label': inputProps['aria-label'] ?? messages.select.placeholder,
+        'aria-multiselectable': multiple || void 0
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        ref: root,
+        className: (0, classes_cjs_namespaceObject.classes)('leaf-select', `leaf-select--${size}`, multiple && 'leaf-select--multiple', className),
+        style: style,
+        "data-status": status,
+        "data-disabled": disabled ? '' : void 0,
+        "data-open": open ? '' : void 0,
+        "data-clearable": clearable ? '' : void 0,
+        "data-searchable": showSearch ? '' : void 0,
+        onMouseDown: (event)=>{
+            if (!disabled && event.target instanceof Element && !event.target.closest('input, button, a')) event.preventDefault();
+        },
+        onClick: (event)=>{
+            if (!disabled && event.target instanceof Element && root.current?.contains(event.target) && !event.target.closest('input, button, a')) {
+                input.current?.focus();
+                input.current?.click();
+            }
+        },
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(selection_content_cjs_namespaceObject.SelectionContent, {
+                className: "leaf-select__content",
+                tagClassName: "leaf-select__tag",
+                tagWrap: tagWrap,
+                maxTagCount: maxTagCount,
+                searchable: showSearch && !inputProps.readOnly && !inputReadOnly,
+                query: searchQuery,
+                removeLabel: messages.common.remove,
+                items: multiple ? selectedOptions.map((option)=>{
+                    const remove = ()=>{
+                        if (disabled || inputProps.readOnly || option.disabled) return;
+                        change(values.filter((item)=>item !== option.value));
+                        input.current?.focus();
+                    };
+                    return {
+                        key: option.value,
+                        label: option.label,
+                        text: searchText(option),
+                        remove: disabled || inputProps.readOnly || option.disabled ? void 0 : remove,
+                        render: tagRender?.(option, remove)
+                    };
+                }) : void 0,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+                    className: "leaf-select__input-wrap",
+                    "data-motion-key": values[0] ?? '',
+                    children: [
+                        !multiple && !textLabel && null != displayLabel && (!showSearch || !open || null === query) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            className: "leaf-select__value",
+                            children: displayLabel
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                            ...inputProps,
+                            ref: merged,
+                            id: idProp ?? field?.id,
+                            form: form,
+                            type: "text",
+                            className: "leaf-select__input",
+                            disabled: disabled,
+                            readOnly: !showSearch || inputProps.readOnly || inputReadOnly,
+                            value: inputValue,
+                            placeholder: values.length ? '' : placeholder ?? messages.select.placeholder,
+                            autoComplete: "off",
+                            role: "combobox",
+                            "aria-expanded": open,
+                            "aria-haspopup": "listbox",
+                            "aria-controls": panelId,
+                            "aria-autocomplete": showSearch ? 'list' : void 0,
+                            "aria-activedescendant": open && filtered[highlighted] ? `${panelId}-${highlighted}` : void 0,
+                            "aria-required": required || void 0,
+                            "aria-invalid": 'error' === status ? true : inputProps['aria-invalid'],
+                            "aria-describedby": [
+                                inputProps['aria-describedby'],
+                                field?.descriptionId
+                            ].filter(Boolean).join(' ') || void 0,
+                            onClick: (event)=>{
+                                onClick?.(event);
+                                if (!event.defaultPrevented) {
+                                    if (open && !showSearch) close();
+                                    else if (!open) openMenu();
+                                }
+                            },
+                            onBlur: (event)=>{
+                                onBlur?.(event);
+                                if (!event.defaultPrevented && !root.current?.contains(event.relatedTarget) && !panel.current?.contains(event.relatedTarget)) close();
+                            },
+                            onChange: (event)=>{
+                                if (!open) openMenu();
+                                updateQuery(event.target.value);
+                                setHighlighted(-1);
+                            },
+                            onBeforeInput: (event)=>{
+                                onBeforeInput?.(event);
+                                if (!event.defaultPrevented) beginSearch();
+                            },
+                            onCompositionStart: (event)=>{
+                                onCompositionStart?.(event);
+                                if (!event.defaultPrevented) beginSearch();
+                            },
+                            onPaste: (event)=>{
+                                onPaste?.(event);
+                                if (!event.defaultPrevented) beginSearch();
+                            },
+                            onKeyDown: (event)=>{
+                                onKeyDown?.(event);
+                                if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+                                if (!event.ctrlKey && !event.metaKey && !event.altKey && (1 === event.key.length || 'Backspace' === event.key || 'Delete' === event.key)) beginSearch();
+                                if ('ArrowDown' === event.key || 'ArrowUp' === event.key) {
+                                    event.preventDefault();
+                                    if (open) move('ArrowDown' === event.key ? 1 : -1);
+                                    else openMenu();
+                                } else if (('Home' === event.key || 'End' === event.key) && open && !showSearch) {
+                                    event.preventDefault();
+                                    const candidates = filtered.map((option, index)=>({
+                                            option,
+                                            index
+                                        })).filter(({ option })=>!unavailable(option));
+                                    setHighlighted(('Home' === event.key ? candidates[0] : candidates.at(-1))?.index ?? -1);
+                                } else if ('Enter' !== event.key && (' ' !== event.key || showSearch)) {
+                                    if ('Escape' === event.key && open) {
+                                        event.preventDefault();
+                                        event.stopPropagation();
+                                        close();
+                                    } else if ('Tab' === event.key && open) close();
+                                    else if ('Backspace' === event.key && multiple && !searchQuery && !inputProps.readOnly) {
+                                        const last = [
+                                            ...values
+                                        ].reverse().find((value)=>!options.find((option)=>option.value === value)?.disabled);
+                                        if (last) {
+                                            event.preventDefault();
+                                            change(values.filter((value)=>value !== last));
+                                        }
+                                    }
+                                } else {
+                                    event.preventDefault();
+                                    if (open) {
+                                        const option = filtered[highlighted] ?? filtered.find((option)=>!unavailable(option));
+                                        if (option) selectOption(option);
+                                    } else openMenu();
+                                }
+                            }
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
+                type: "button",
+                className: "leaf-select__arrow",
+                tabIndex: -1,
+                disabled: disabled,
+                "aria-label": messages.select.placeholder,
+                onMouseDown: (event)=>event.preventDefault(),
+                onClick: ()=>{
+                    if (open) close();
+                    else openMenu();
+                    input.current?.focus();
+                },
+                children: loading ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.LoaderCircle, {
+                    className: "leaf-select__spinner",
+                    size: 16,
+                    "aria-hidden": "true"
+                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
+                    size: 16,
+                    "aria-hidden": "true"
+                })
+            }),
+            clearable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(clear_button_cjs_namespaceObject.ClearButton, {
+                label: messages.select.clear,
+                beforeArrow: true,
+                onClear: ()=>{
+                    change(empty);
+                    close();
+                    input.current?.focus();
+                }
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(field_cjs_namespaceObject.FormValue, {
+                name: multiple ? void 0 : name,
+                form: form,
+                value: multiple ? values.join(',') : values[0] ?? '',
+                disabled: disabled,
+                required: required,
+                triggerRef: input
+            }),
+            multiple && values.map((value)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
+                    type: "hidden",
+                    name: name,
+                    form: form,
+                    value: value,
+                    disabled: disabled
+                }, value)),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(floating_cjs_namespaceObject.FloatingPanel, {
+                open: open,
+                placement: popupPlacement,
+                container: getPopupContainer,
+                triggerRef: root,
+                panelRef: panel,
+                matchWidth: 'trigger' === popupWidth,
+                width: 'trigger' === popupWidth ? void 0 : 'auto' === popupWidth ? 'max-content' : popupWidth,
+                minWidth: 'auto' === popupWidth ? 'trigger' : void 0,
+                maxWidth: popupMaxWidth,
+                ...filtered.length ? listboxProps : {},
+                className: (0, classes_cjs_namespaceObject.classes)('leaf-floating', 'leaf-select__panel', popupClassName),
+                "data-hover-motion": "",
+                style: {
+                    maxHeight: listHeight,
+                    ...popupStyle
+                },
+                onScroll: onPopupScroll,
+                children: [
+                    !filtered.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        ...listboxProps
+                    }),
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(floating_highlight_cjs_namespaceObject.FloatingHighlight, {
+                        style: highlight,
+                        selected: values.includes(filtered[highlighted]?.value ?? '')
+                    }),
+                    (popupRender ?? ((content)=>content))(loading && !filtered.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(floating_feedback_cjs_namespaceObject.FloatingFeedback, {
+                        loading: true,
+                        children: messages.common.loading
+                    }) : filtered.length ? virtual ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        style: {
+                            height: virtualizer.getTotalSize(),
+                            position: 'relative',
+                            minWidth: '100%'
+                        },
+                        children: virtualizer.getVirtualItems().map((item)=>{
+                            const row = rows[item.index];
+                            if (!row) return null;
+                            return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                ref: virtualizer.measureElement,
+                                "data-index": item.index,
+                                style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    transform: `translateY(${item.start}px)`
+                                },
+                                children: row.option ? renderOption(row.option, row.index) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "leaf-select__group",
+                                    children: row.group
+                                })
+                            }, row.key);
+                        })
+                    }) : rows.map((row)=>row.option ? renderOption(row.option, row.index) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                            className: "leaf-select__group",
+                            children: row.group
+                        }, row.key)) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(floating_feedback_cjs_namespaceObject.FloatingFeedback, {
+                        children: notFoundContent ?? messages.select.empty
+                    }))
+                ]
+            })
+        ]
+    });
+});
+select_SelectControl.displayName = 'SelectControl';
+const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function(rawProps, ref) {
+    const props = (0, component_defaults_cjs_namespaceObject.useComponentProps)('Select', rawProps);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(select_SelectControl, {
+        ...props,
+        ref: ref
+    });
+});
+select_Select.displayName = 'Select';
+exports.Select = __webpack_exports__.Select;
+exports.SelectControl = __webpack_exports__.SelectControl;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Select",
+    "SelectControl"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});
+
+//# sourceMappingURL=select.cjs.map