@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/cjs/select/index.cjs

@@ -1,29 +1,6 @@
 "use client";
 "use strict";
-var __webpack_modules__ = {
-    F6 (module) {
-        module.exports = require("./select.cjs");
-    }
-};
-var __webpack_module_cache__ = {};
-function __webpack_require__(moduleId) {
-    var cachedModule = __webpack_module_cache__[moduleId];
-    if (void 0 !== cachedModule) return cachedModule.exports;
-    var module = __webpack_module_cache__[moduleId] = {
-        exports: {}
-    };
-    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-    return module.exports;
-}
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
+var __webpack_require__ = {};
 (()=>{
     __webpack_require__.d = (exports1, getters, values)=>{
         var define = (defs, kind)=>{
@@ -50,14 +27,15 @@ function __webpack_require__(moduleId) {
     };
 })();
 var __webpack_exports__ = {};
-(()=>{
-    __webpack_require__.r(__webpack_exports__);
-    var _select__rspack_import_0 = __webpack_require__("F6");
-    var __rspack_reexport = {};
-    for(const __rspack_import_key in _select__rspack_import_0)if ("default" !== __rspack_import_key) __rspack_reexport[__rspack_import_key] = ()=>_select__rspack_import_0[__rspack_import_key];
-    __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-})();
-for(var __rspack_i in __webpack_exports__)exports[__rspack_i] = __webpack_exports__[__rspack_i];
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Select: ()=>external_select_cjs_namespaceObject.Select
+});
+const external_select_cjs_namespaceObject = require("./select.cjs");
+exports.Select = __webpack_exports__.Select;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "Select"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/cjs/select/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select/index.cjs","sources":["webpack://webpack/runtime/compat_get_default_export","webpack://webpack/runtime/define_property_getters","webpack://webpack/runtime/has_own_property","webpack://webpack/runtime/make_namespace_object"],"sourcesContent":["// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, getters, values) => {\n\tvar define = (defs, kind) => {\n\t\tfor(var key in defs) {\n\t\t\tif(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {\n\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });\n\t\t\t}\n\t\t}\n\t};\n\tdefine(getters, \"get\");\n\tdefine(values, \"value\");\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"names":["__webpack_require__","module","getter","getters","values","define","defs","kind","key","Object","obj","prop","Symbol"],"mappings":";;;;;;;;;;;;;;;;;;IACAA,oBAAoB,CAAC,GAAG,CAACC;QACxB,IAAIC,SAASD,UAAUA,OAAO,UAAU,GACvC,IAAOA,MAAM,CAAC,UAAU,GACxB,IAAOA;QACRD,oBAAoB,CAAC,CAACE,QAAQ;YAAE,GAAGA;QAAO;QAC1C,OAAOA;IACR;;;ICPAF,oBAAoB,CAAC,GAAG,CAAC,UAASG,SAASC;QAC1C,IAAIC,SAAS,CAACC,MAAMC;YACnB,IAAI,IAAIC,OAAOF,KACd,IAAGN,oBAAoB,CAAC,CAACM,MAAME,QAAQ,CAACR,oBAAoB,CAAC,CAAC,UAASQ,MACtEC,OAAO,cAAc,CAAC,UAASD,KAAK;gBAAE,YAAY;gBAAM,CAACD,KAAK,EAAED,IAAI,CAACE,IAAI;YAAC;QAG7E;QACAH,OAAOF,SAAS;QAChBE,OAAOD,QAAQ;IAChB;;;ICVAJ,oBAAoB,CAAC,GAAG,CAACU,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFX,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,AAAkB,MAAlB,OAAOY,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D"}
+{"version":3,"file":"select/index.cjs","sources":["webpack://webpack/runtime/define_property_getters","webpack://webpack/runtime/has_own_property","webpack://webpack/runtime/make_namespace_object"],"sourcesContent":["__webpack_require__.d = (exports, getters, values) => {\n\tvar define = (defs, kind) => {\n\t\tfor(var key in defs) {\n\t\t\tif(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {\n\t\t\t\tObject.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });\n\t\t\t}\n\t\t}\n\t};\n\tdefine(getters, \"get\");\n\tdefine(values, \"value\");\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};"],"names":["__webpack_require__","getters","values","define","defs","kind","key","Object","obj","prop","Symbol"],"mappings":";;;;IAAAA,oBAAoB,CAAC,GAAG,CAAC,UAASC,SAASC;QAC1C,IAAIC,SAAS,CAACC,MAAMC;YACnB,IAAI,IAAIC,OAAOF,KACd,IAAGJ,oBAAoB,CAAC,CAACI,MAAME,QAAQ,CAACN,oBAAoB,CAAC,CAAC,UAASM,MACtEC,OAAO,cAAc,CAAC,UAASD,KAAK;gBAAE,YAAY;gBAAM,CAACD,KAAK,EAAED,IAAI,CAACE,IAAI;YAAC;QAG7E;QACAH,OAAOF,SAAS;QAChBE,OAAOD,QAAQ;IAChB;;;ICVAF,oBAAoB,CAAC,GAAG,CAACQ,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFT,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,AAAkB,MAAlB,OAAOU,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D"}

package/dist/cjs/select/index.d.cts

@@ -1,3 +1,3 @@
-export type { SelectOptionGroup } from './select.cjs';
-export * from './select.cjs';
+export type { SelectOption, SelectOptionGroup, SelectProps } from './select.cjs';
+export { Select } from './select.cjs';
 //# sourceMappingURL=index.d.cts.map

package/dist/cjs/select/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAClD,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/select/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/cjs/select/select.cjs

@@ -29,26 +29,31 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    Select: ()=>select_Select
+    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 use_text_cjs_namespaceObject = require("../shared/use-text.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_Select = /*#__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, onBlur, multiple = false, showSearch: searchProp = false, filterOption = true, onSearch, popupWidth = 'auto', popupMaxWidth = 420, popupClassName, popupStyle, popupPlacement, getPopupContainer, loading = false, notFoundContent, optionRender, maxCount, maxTagCount, allowCreate = false, onCreate, virtual: virtualProp, listHeight = 248, optionHeight = 36, onChange: _onChange, ...inputProps } = props;
-    const t = (0, use_text_cjs_namespaceObject.useText)();
+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 ? [
@@ -72,7 +77,8 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         suppliedOptions
     ]);
     const virtual = virtualProp ?? options.length > 100;
-    const { messages } = (0, context_cjs_namespaceObject.useLeafConfig)();
+    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;
@@ -86,34 +92,6 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
     const values = 'string' == typeof selected ? selected ? [
         selected
     ] : [] : selected;
-    const [responsiveCount, setResponsiveCount] = (0, external_react_namespaceObject.useState)(3);
-    (0, external_react_namespaceObject.useEffect)(()=>{
-        if ('responsive' !== maxTagCount || !root.current) return;
-        const measure = ()=>{
-            const width = root.current?.clientWidth ?? 0;
-            let used = 90;
-            let count = 0;
-            for (const tag of root.current?.querySelectorAll('[data-leaf-tag-measure]') ?? []){
-                used += tag.getBoundingClientRect().width + 4;
-                if (used > width) break;
-                count++;
-            }
-            setResponsiveCount(count);
-        };
-        const observer = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(measure);
-        observer?.observe(root.current);
-        window.addEventListener('resize', measure);
-        measure();
-        return ()=>{
-            observer?.disconnect();
-            window.removeEventListener('resize', measure);
-        };
-    }, [
-        maxTagCount,
-        values
-    ]);
-    const visibleTagCount = 'responsive' === maxTagCount ? responsiveCount : void 0 === maxTagCount ? values.length : Math.max(0, Math.floor(maxTagCount));
-    (0, motion_cjs_namespaceObject.useListMotion)(root, JSON.stringify(values.slice(0, visibleTagCount)), '.leaf-select__tag[data-motion-key]');
     (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);
@@ -128,11 +106,12 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             value: key,
             label: key
         });
-    const [query, setQuery] = (0, external_react_namespaceObject.useState)('');
+    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 = query && showSearch && false !== filterOption ? options.filter((option)=>'function' == typeof filterOption ? filterOption(query, option) : searchText(option).toLocaleLowerCase().includes(query.toLocaleLowerCase())) : options;
-    const newValue = query.trim();
+    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
@@ -195,13 +174,14 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
     };
     const close = ()=>{
         setOpen(false);
-        if (query) updateQuery('');
+        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, `${query}:${filtered[highlighted]?.value}:${rows.length}:${virtualizer.range?.startIndex}:${virtualizer.range?.endIndex}`);
+    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('');
+        if (!open) setQuery(null);
     }, [
         open
     ]);
@@ -230,6 +210,11 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         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) {
@@ -280,18 +265,17 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             onClick: ()=>selectOption(option),
             children: [
                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                    className: "leaf-select__option-label",
+                    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"
                             }),
-                            " ",
-                            t('创建', 'Create'),
-                            " “",
-                            option.label,
-                            "”"
+                            ' ',
+                            format('select.create', {
+                                label: 'string' == typeof option.label ? option.label : option.value
+                            })
                         ]
                     }) : optionRender ? optionRender(option) : option.label
                 }),
@@ -304,8 +288,15 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
         }, 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 || showSearch && open ? query : textLabel;
+    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),
@@ -325,166 +316,136 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
             }
         },
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(selection_content_cjs_namespaceObject.SelectionContent, {
                 className: "leaf-select__content",
-                children: [
-                    multiple && values.slice(0, visibleTagCount).map((value)=>{
-                        const option = nextCache.get(value) ?? {
-                            value,
-                            label: value
-                        };
-                        const remove = ()=>change(values.filter((item)=>item !== value));
-                        if (tagRender) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                            className: "leaf-select__tag",
-                            "data-motion-key": value,
-                            children: tagRender(option, remove)
-                        }, value);
-                        return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                            className: "leaf-select__tag",
-                            "data-motion-key": value,
-                            children: [
-                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                                    children: option?.label ?? value
-                                }),
-                                !disabled && !inputProps.readOnly && !option?.disabled && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
-                                    type: "button",
-                                    tabIndex: -1,
-                                    "aria-label": `${messages.remove} ${option ? searchText(option) : value}`,
-                                    onMouseDown: (event)=>event.preventDefault(),
-                                    onClick: ()=>{
-                                        change(values.filter((item)=>item !== value));
-                                        input.current?.focus();
-                                    },
-                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                        size: 12,
-                                        "aria-hidden": "true"
-                                    })
-                                })
-                            ]
-                        }, value);
-                    }),
-                    multiple && values.length > visibleTagCount && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                        className: "leaf-select__tag",
-                        children: [
-                            "+",
-                            values.length - visibleTagCount
-                        ]
-                    }),
-                    multiple && 'responsive' === maxTagCount && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
-                        "aria-hidden": "true",
-                        style: {
-                            position: 'absolute',
-                            visibility: 'hidden',
-                            pointerEvents: 'none',
-                            display: 'flex'
-                        },
-                        children: selectedOptions.map((option)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-                                "data-leaf-tag-measure": true,
-                                className: "leaf-select__tag",
-                                children: [
-                                    option.label,
-                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
-                                        size: 12
-                                    })
-                                ]
-                            }, option.value))
-                    }),
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
-                        className: "leaf-select__input-wrap",
-                        "data-motion-key": values[0] ?? '',
-                        children: [
-                            !multiple && !query && null != displayLabel && (!textLabel || showSearch && open) && /*#__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,
-                                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);
-                                },
-                                onKeyDown: (event)=>{
-                                    onKeyDown?.(event);
-                                    if (event.defaultPrevented || event.nativeEvent.isComposing) return;
-                                    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) {
+                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();
-                                        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.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();
-                                            event.stopPropagation();
-                                            close();
-                                        } else if ('Tab' === event.key && open) close();
-                                        else if ('Backspace' === event.key && multiple && !query && !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));
-                                            }
+                                            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();
                                     }
+                                } 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,
+                "aria-label": messages.select.placeholder,
                 onMouseDown: (event)=>event.preventDefault(),
                 onClick: ()=>{
                     if (open) close();
@@ -501,7 +462,7 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
                 })
             }),
             clearable && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(clear_button_cjs_namespaceObject.ClearButton, {
-                label: messages.clearSelection,
+                label: messages.select.clear,
                 beforeArrow: true,
                 onClear: ()=>{
                     change(empty);
@@ -534,7 +495,7 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
                 width: 'trigger' === popupWidth ? void 0 : 'auto' === popupWidth ? 'max-content' : popupWidth,
                 minWidth: 'auto' === popupWidth ? 'trigger' : void 0,
                 maxWidth: popupMaxWidth,
-                id: panelId,
+                ...filtered.length ? listboxProps : {},
                 className: (0, classes_cjs_namespaceObject.classes)('leaf-floating', 'leaf-select__panel', popupClassName),
                 "data-hover-motion": "",
                 style: {
@@ -542,17 +503,17 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
                     ...popupStyle
                 },
                 onScroll: onPopupScroll,
-                role: "listbox",
-                "aria-busy": loading || void 0,
-                "aria-label": inputProps['aria-label'] ?? messages.select,
-                "aria-multiselectable": multiple || void 0,
                 children: [
+                    !filtered.length && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                        ...listboxProps
+                    }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(floating_highlight_cjs_namespaceObject.FloatingHighlight, {
-                        style: highlight
+                        style: highlight,
+                        selected: values.includes(filtered[highlighted]?.value ?? '')
                     }),
-                    (popupRender ?? ((content)=>content))(loading && !filtered.length ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                        className: "leaf-floating__empty",
-                        children: messages.loading
+                    (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(),
@@ -581,19 +542,28 @@ const select_Select = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
                     }) : 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)("div", {
-                        className: "leaf-floating__empty",
-                        children: notFoundContent ?? messages.empty
+                        }, 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"
+    "Select",
+    "SelectControl"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true