@fangxinyan/lumina 0.9.1 → 0.9.3

package/dist/{chunk-K3KHQ77L.cjs → chunk-7RYLV5CM.cjs}

@@ -2,14 +2,13 @@
 
 var chunkVNP5WB6M_cjs = require('./chunk-VNP5WB6M.cjs');
 var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
-var chunkGFGMGJ5A_cjs = require('./chunk-GFGMGJ5A.cjs');
 var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
 var chunkVDVKY2IX_cjs = require('./chunk-VDVKY2IX.cjs');
 var chunkV6BLBIY6_cjs = require('./chunk-V6BLBIY6.cjs');
 var chunkI4GJZLJU_cjs = require('./chunk-I4GJZLJU.cjs');
 require('./tokens-223RYVVS.css');
 require('./shared-NJHRNLRH.css');
-require('./Select-QPBB73KA.css');
+require('./Select-UTNBARSQ.css');
 var React = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -51,6 +50,10 @@ var defaultFilter = (input, opt, optionFilterProp) => {
   const txt = propValue != null ? String(propValue) : opt.text ?? (typeof opt.label === "string" ? opt.label : String(opt.value));
   return txt.toLowerCase().includes(q);
 };
+var getSearchInputDisplayWidth = (value) => Array.from(value).reduce(
+  (width, character) => width + ((character.codePointAt(0) ?? 0) > 255 ? 2 : 1),
+  0
+);
 var getOptionAriaLabel = (option) => {
   if (option.ariaLabel) return option.ariaLabel;
   if (typeof option.label === "string" || typeof option.label === "number") {
@@ -69,6 +72,9 @@ var SelectInner = (props, forwardedRef) => {
     allowClear,
     searchable,
     showSearch,
+    searchValue: searchValueProp,
+    defaultSearchValue,
+    onSearch,
     filterOption,
     optionFilterProp,
     loading,
@@ -117,7 +123,7 @@ var SelectInner = (props, forwardedRef) => {
     isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
   );
   const [innerOpen, setInnerOpen] = React__namespace.useState(defaultOpen ?? false);
-  const [query, setQuery] = React__namespace.useState("");
+  const [innerSearchValue, setInnerSearchValue] = React__namespace.useState(defaultSearchValue ?? "");
   const [activeIdx, setActiveIdx] = React__namespace.useState(-1);
   const searchRef = React__namespace.useRef(null);
   const portalContainer = chunkI4GJZLJU_cjs.usePortalContainer();
@@ -136,12 +142,29 @@ var SelectInner = (props, forwardedRef) => {
   const openControlled = openProp !== void 0;
   const requestedOpen = openControlled ? openProp : innerOpen;
   const open = !disabled && requestedOpen;
-  const setOpen = (v) => {
-    if (disabled && v) return;
-    if (!openControlled) setInnerOpen(v);
-    onOpenChange?.(v);
-    if (!v) setQuery("");
-  };
+  const requestedOpenRef = React__namespace.useRef(requestedOpen);
+  requestedOpenRef.current = requestedOpen;
+  const searchControlled = searchValueProp !== void 0;
+  const searchValue = searchControlled ? searchValueProp : innerSearchValue;
+  const hasInlineSearch = mergedSearchable;
+  const showsInlineSearchInput = hasInlineSearch && (isMulti || open);
+  const updateSearchValue = React__namespace.useCallback((nextValue) => {
+    if (!searchControlled) setInnerSearchValue(nextValue);
+    onSearch?.(nextValue);
+  }, [onSearch, searchControlled]);
+  const resetSearchValue = React__namespace.useCallback(() => {
+    if (!searchValue) return;
+    if (!searchControlled) setInnerSearchValue("");
+    onSearch?.("");
+  }, [onSearch, searchControlled, searchValue]);
+  const setOpen = React__namespace.useCallback((nextOpen) => {
+    if (disabled && nextOpen) return;
+    if (nextOpen === requestedOpenRef.current) return;
+    requestedOpenRef.current = nextOpen;
+    if (!openControlled) setInnerOpen(nextOpen);
+    onOpenChange?.(nextOpen);
+    if (!nextOpen) resetSearchValue();
+  }, [disabled, onOpenChange, openControlled, resetSearchValue]);
   React__namespace.useEffect(() => {
     if (!disabled || openControlled || !innerOpen) return;
     setInnerOpen(false);
@@ -152,7 +175,7 @@ var SelectInner = (props, forwardedRef) => {
     placement: "bottom",
     matchTriggerWidth: !hasCustomPopupWidth,
     panelWidth: typeof resolvedPopupWidth === "number" ? resolvedPopupWidth : 360,
-    panelHeight: mergedListHeight + (mergedSearchable ? 58 : 12)
+    panelHeight: mergedListHeight + 12
   });
   chunkHSDMJUB6_cjs.useOverlayLayer({
     open: open && portalContainer != null,
@@ -194,7 +217,7 @@ var SelectInner = (props, forwardedRef) => {
     };
     document.addEventListener("mousedown", h);
     return () => document.removeEventListener("mousedown", h);
-  }, [open]);
+  }, [menuRef, open, setOpen, triggerRef]);
   React__namespace.useEffect(() => {
     if (open && mergedSearchable) {
       requestAnimationFrame(() => searchRef.current?.focus());
@@ -206,14 +229,32 @@ var SelectInner = (props, forwardedRef) => {
     [options]
   );
   const allFlat = React__namespace.useMemo(() => flatten(orderedItems), [orderedItems]);
+  const optionByValue = React__namespace.useMemo(() => {
+    const index = /* @__PURE__ */ new Map();
+    allFlat.forEach((option) => index.set(option.value, option));
+    return index;
+  }, [allFlat]);
+  const selectedOptionCacheRef = React__namespace.useRef(/* @__PURE__ */ new Map());
+  React__namespace.useEffect(() => {
+    selectedValues.forEach((selectedValue) => {
+      const option = optionByValue.get(selectedValue);
+      if (option) selectedOptionCacheRef.current.set(selectedValue, option);
+    });
+  }, [optionByValue, selectedValues]);
+  const selectedOptions = React__namespace.useMemo(
+    () => selectedValues.map(
+      (selectedValue) => optionByValue.get(selectedValue) ?? selectedOptionCacheRef.current.get(selectedValue)
+    ).filter((option) => option !== void 0),
+    [optionByValue, selectedValues]
+  );
   const filteredFlat = React__namespace.useMemo(() => {
-    if (!query.trim()) return allFlat;
+    if (!searchValue.trim()) return allFlat;
     if (filterOption === false) return allFlat;
     const f = typeof filterOption === "function" ? filterOption : (input, option) => defaultFilter(input, option, optionFilterProp);
-    return allFlat.filter((o) => f(query, o));
-  }, [allFlat, query, filterOption, optionFilterProp]);
+    return allFlat.filter((o) => f(searchValue, o));
+  }, [allFlat, filterOption, optionFilterProp, searchValue]);
   const filteredItems = React__namespace.useMemo(() => {
-    if (!query.trim()) {
+    if (!searchValue.trim()) {
       return orderedItems.filter((item) => !isGroup(item) || item.options.length > 0);
     }
     return orderedItems.map((it) => {
@@ -223,7 +264,7 @@ var SelectInner = (props, forwardedRef) => {
       const kept = it.options.filter((o) => filteredFlat.includes(o));
       return kept.length ? { ...it, options: kept } : null;
     }).filter((x) => x !== null);
-  }, [orderedItems, filteredFlat, query]);
+  }, [orderedItems, filteredFlat, searchValue]);
   React__namespace.useEffect(() => {
     setActiveIdx((current) => {
       if (current >= 0 && current < filteredFlat.length && !isOptionDisabled(filteredFlat[current])) {
@@ -234,6 +275,7 @@ var SelectInner = (props, forwardedRef) => {
   }, [filteredFlat, isOptionDisabled]);
   const pickSingle = (opt) => {
     if (disabled || isOptionDisabled(opt)) return;
+    selectedOptionCacheRef.current.set(opt.value, opt);
     if (!singleControlled) setInnerSingle(opt.value);
     props.onChange?.(opt.value);
     setOpen(false);
@@ -242,8 +284,17 @@ var SelectInner = (props, forwardedRef) => {
     if (disabled || isOptionDisabled(opt)) return;
     const cur = multiValue ?? [];
     const next = cur.includes(opt.value) ? cur.filter((v) => v !== opt.value) : [...cur, opt.value];
+    selectedOptionCacheRef.current.set(opt.value, opt);
+    if (!multiControlled) setInnerMulti(next);
+    props.onChange?.(next);
+    if (hasInlineSearch) requestAnimationFrame(() => searchRef.current?.focus());
+  };
+  const removeMultiValue = (removedValue) => {
+    if (disabled) return;
+    const next = (multiValue ?? []).filter((value) => value !== removedValue);
     if (!multiControlled) setInnerMulti(next);
     props.onChange?.(next);
+    if (hasInlineSearch) requestAnimationFrame(() => searchRef.current?.focus());
   };
   const clearAll = () => {
     if (disabled) return;
@@ -259,13 +310,20 @@ var SelectInner = (props, forwardedRef) => {
   };
   const isSelected = (val) => isMulti ? (multiValue ?? []).includes(val) : singleValue === val;
   const onKeyDown = (e) => {
-    if ((e.key === "Backspace" || e.key === "Delete") && showClear) {
+    const fromSearchInput = e.target === searchRef.current;
+    if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+    if (fromSearchInput && e.key === "Backspace" && !searchValue && isMulti && multiValue.length > 0) {
+      e.preventDefault();
+      removeMultiValue(multiValue[multiValue.length - 1]);
+      return;
+    }
+    if (!fromSearchInput && (e.key === "Backspace" || e.key === "Delete") && showClear) {
       e.preventDefault();
       clearAll();
       return;
     }
     if (!open) {
-      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+      if (e.key === "Enter" || !fromSearchInput && e.key === " " || e.key === "ArrowDown") {
         e.preventDefault();
         setOpen(true);
       }
@@ -308,13 +366,48 @@ var SelectInner = (props, forwardedRef) => {
       return;
     }
   };
+  const renderInlineSearchInput = () => {
+    if (!showsInlineSearchInput) return null;
+    const multiHasSelection = isMulti && multiValue.length > 0;
+    const searchDisplayWidth = getSearchInputDisplayWidth(searchValue);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: searchRef,
+        id: fieldId,
+        className: "select-search-input",
+        "data-inline-size": multiHasSelection ? "content" : "fill",
+        type: "search",
+        value: searchValue,
+        style: multiHasSelection ? { width: `${Math.min(Math.max(searchDisplayWidth + 1, 2), 32)}ch` } : void 0,
+        placeholder: isMulti ? multiValue.length === 0 ? placeholder : void 0 : "\u641C\u7D22...",
+        disabled,
+        autoComplete: "off",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "aria-describedby": ariaDescribedBy,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
+        onChange: (event) => {
+          updateSearchValue(event.target.value);
+          if (!open) setOpen(true);
+        }
+      }
+    );
+  };
   const renderTrigger = () => {
     if (isMulti) {
-      const selected = (multiValue ?? []).map((v) => allFlat.find((o) => o.value === v)).filter((o) => !!o);
+      const selected = selectedOptions;
       const max = maxTagCount;
       const shown = max != null ? selected.slice(0, max) : selected;
       const overflow = selected.length - shown.length;
-      if (selected.length === 0) {
+      if (selected.length === 0 && !hasInlineSearch) {
         return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "select-tags", children: [
@@ -323,24 +416,25 @@ var SelectInner = (props, forwardedRef) => {
           {
             tone: "accent",
             removable: !disabled,
-            onRemove: () => {
-              const cur = multiValue ?? [];
-              const next = cur.filter((v) => v !== o.value);
-              if (!multiControlled) setInnerMulti(next);
-              props.onChange?.(next);
+            onRemove: () => removeMultiValue(o.value),
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
             },
             onClick: (e) => e.stopPropagation(),
-            children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-tag-label", children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label })
           },
           String(o.value)
         )),
-        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkVNP5WB6M_cjs.Tag, { tone: "neutral", children: [
+        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs(chunkVNP5WB6M_cjs.Tag, { className: "select-tag-overflow", tone: "neutral", children: [
           "+",
           overflow
-        ] })
+        ] }),
+        renderInlineSearchInput()
       ] }) });
     }
-    const current = allFlat.find((o) => o.value === singleValue);
+    if (showsInlineSearchInput) return renderInlineSearchInput();
+    const current = selectedOptions[0];
     if (!current) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "placeholder", children: placeholder });
     if (selectedRender) {
       return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "select-value select-value-custom", children: selectedRender(current, { value: current.value, multiple: false }) });
@@ -387,6 +481,9 @@ var SelectInner = (props, forwardedRef) => {
               "aria-label": getOptionAriaLabel(o),
               disabled: optionDisabled,
               className: `menu-item ${sel ? "active" : ""} ${active ? "highlight" : ""}`,
+              onMouseDown: (event) => {
+                if (hasInlineSearch) event.preventDefault();
+              },
               onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
               children: [
                 isMulti && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "check", size: 11, stroke: 3 }) }),
@@ -413,15 +510,32 @@ var SelectInner = (props, forwardedRef) => {
       item.options.map((option) => renderOption(option, !!item.pinned))
     ] }, `g-${groupIndex}-${item.pinned ? "pinned" : "regular"}`) : renderOption(item)
   );
+  const handleTriggerClick = (event) => {
+    if (disabled) return;
+    if (!hasInlineSearch) {
+      setOpen(!open);
+      return;
+    }
+    const target = event.target;
+    if (target.closest(".select-caret")) {
+      setOpen(!open);
+      return;
+    }
+    setOpen(true);
+    searchRef.current?.focus();
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: setTriggerRef,
       ...rest,
-      className: `select ${size} ${isMulti ? "multi" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
+      className: `select ${size} ${isMulti ? "multi" : ""} ${hasInlineSearch ? "searchable" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
       onKeyDown: (e) => {
         onRootKeyDown?.(e);
-        if (!e.defaultPrevented && e.target.classList.contains("select-trigger")) onKeyDown(e);
+        const target = e.target;
+        if (!e.defaultPrevented && (target.classList.contains("select-trigger") || target === searchRef.current)) {
+          onKeyDown(e);
+        }
       },
       onBlur: (event) => {
         onRootBlur?.(event);
@@ -446,20 +560,20 @@ var SelectInner = (props, forwardedRef) => {
           "div",
           {
             className: "select-trigger",
-            onClick: () => !disabled && setOpen(!open),
-            tabIndex: disabled ? -1 : triggerTabIndex ?? 0,
-            id: fieldId,
-            role: "combobox",
-            "aria-disabled": disabled || void 0,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledBy,
-            "aria-invalid": ariaInvalid,
-            "aria-required": ariaRequired,
-            "aria-describedby": ariaDescribedBy,
-            "aria-haspopup": "listbox",
-            "aria-expanded": open,
-            "aria-controls": open ? listboxId : void 0,
-            "aria-activedescendant": open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
+            onClick: handleTriggerClick,
+            tabIndex: showsInlineSearchInput || disabled ? -1 : triggerTabIndex ?? 0,
+            id: showsInlineSearchInput ? void 0 : fieldId,
+            role: showsInlineSearchInput ? void 0 : "combobox",
+            "aria-disabled": showsInlineSearchInput ? void 0 : disabled || void 0,
+            "aria-label": showsInlineSearchInput ? void 0 : ariaLabel,
+            "aria-labelledby": showsInlineSearchInput ? void 0 : ariaLabelledBy,
+            "aria-invalid": showsInlineSearchInput ? void 0 : ariaInvalid,
+            "aria-required": showsInlineSearchInput ? void 0 : ariaRequired,
+            "aria-describedby": showsInlineSearchInput ? void 0 : ariaDescribedBy,
+            "aria-haspopup": showsInlineSearchInput ? void 0 : "listbox",
+            "aria-expanded": showsInlineSearchInput ? void 0 : open,
+            "aria-controls": showsInlineSearchInput ? void 0 : open ? listboxId : void 0,
+            "aria-activedescendant": showsInlineSearchInput ? void 0 : open && activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
             children: [
               renderTrigger(),
               /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "chevDown", size: 14, className: "select-caret" })
@@ -473,7 +587,10 @@ var SelectInner = (props, forwardedRef) => {
             className: "select-clear",
             "aria-label": "Clear",
             onPointerDown: (event) => event.stopPropagation(),
-            onMouseDown: (event) => event.stopPropagation(),
+            onMouseDown: (event) => {
+              if (hasInlineSearch) event.preventDefault();
+              event.stopPropagation();
+            },
             onClick: (event) => {
               event.stopPropagation();
               clearAll();
@@ -482,7 +599,7 @@ var SelectInner = (props, forwardedRef) => {
           }
         ),
         open && portalContainer && reactDom.createPortal(
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: menuRef,
@@ -497,44 +614,20 @@ var SelectInner = (props, forwardedRef) => {
                 ...portalTheme.styles.popup,
                 ...popupStyle
               },
-              children: [
-                mergedSearchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "menu-search", children: /* @__PURE__ */ jsxRuntime.jsx(chunkV6BLBIY6_cjs.InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  chunkGFGMGJ5A_cjs.Input,
-                  {
-                    ref: searchRef,
-                    size: "sm",
-                    leadingIcon: "search",
-                    value: query,
-                    placeholder: "\u641C\u7D22...",
-                    role: "combobox",
-                    "aria-autocomplete": "list",
-                    "aria-expanded": open,
-                    "aria-controls": listboxId,
-                    "aria-activedescendant": activeIdx >= 0 ? `${listboxId}-option-${activeIdx}` : void 0,
-                    onValueChange: setQuery,
-                    onKeyDown: (e) => {
-                      if (e.key === "Escape" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
-                        e.preventDefault();
-                        onKeyDown(e);
-                      }
-                    }
-                  }
-                ) }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "menu-options",
-                    style: { maxHeight: mergedListHeight },
-                    children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
-                    ] }) : filteredFlat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "search", size: 16 }) }),
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
-                    ] }) : renderMenuItems(filteredItems)
-                  }
-                )
-              ]
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "menu-options",
+                  style: { maxHeight: mergedListHeight },
+                  children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "spinner" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
+                  ] }) : filteredFlat.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "menu-state", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsxRuntime.jsx(chunkVDVKY2IX_cjs.Icon, { name: "search", size: 16 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
+                  ] }) : renderMenuItems(filteredItems)
+                }
+              )
             }
           ),
           portalContainer