@fangxinyan/lumina 0.6.17 → 0.7.0

package/dist/{chunk-E22OIVYP.js → chunk-3EHJ5QI3.js}

@@ -1,13 +1,16 @@
-import { Tag } from './chunk-6K5YI4ZE.js';
-import { useFloating } from './chunk-DUFRASGO.js';
-import { Input } from './chunk-IOAOG5L7.js';
-import { Icon, renderIconSlot } from './chunk-FDZG27IG.js';
-import './tokens-RYJ3DFTU.css';
+import { Tag } from './chunk-62VV5COT.js';
+import { useFloating } from './chunk-3QXP2ZNP.js';
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayLayer } from './chunk-2A4GYSN4.js';
+import { Icon, renderIconSlot } from './chunk-LQMOYVQF.js';
+import { withComponentTheme, useComponentPortalTheme, InternalComponentThemePart } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Select-YZ2NUJSX.css';
+import './Select-TU37MAHZ.css';
 import * as React from 'react';
 import { createPortal } from 'react-dom';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var isGroup = (it) => Array.isArray(it.options);
 var flatten = (items) => items.flatMap((it) => isGroup(it) ? it.options : [it]);
@@ -17,6 +20,13 @@ 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 getOptionAriaLabel = (option) => {
+  if (option.ariaLabel) return option.ariaLabel;
+  if (typeof option.label === "string" || typeof option.label === "number") {
+    return void 0;
+  }
+  return option.text ?? String(option.value);
+};
 var SelectInner = (props, forwardedRef) => {
   const {
     options,
@@ -32,6 +42,10 @@ var SelectInner = (props, forwardedRef) => {
     optionFilterProp,
     loading,
     emptyContent,
+    optionRender,
+    selectedRender,
+    listHeight = 260,
+    popupStyle,
     open: openProp,
     defaultOpen,
     onOpenChange,
@@ -40,6 +54,14 @@ var SelectInner = (props, forwardedRef) => {
     popupClassName = "",
     dropdownClassName = "",
     onKeyDown: onRootKeyDown,
+    onBlur: onRootBlur,
+    tabIndex: triggerTabIndex,
+    id: fieldId,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-required": ariaRequired,
     multiple,
     value: _value,
     defaultValue: _defaultValue,
@@ -50,30 +72,61 @@ var SelectInner = (props, forwardedRef) => {
   } = props;
   const isMulti = multiple === true;
   const mergedClearable = clearable ?? !!allowClear;
+  const mergedClearIcon = typeof allowClear === "object" ? allowClear.clearIcon : void 0;
   const mergedSearchable = searchable ?? !!showSearch;
+  const mergedListHeight = Number.isFinite(listHeight) && listHeight > 0 ? listHeight : 260;
   const mergedMenuClassName = [menuClassName, popupClassName, dropdownClassName].filter(Boolean).join(" ");
   const [innerSingle, setInnerSingle] = React.useState(
     !isMulti ? props.defaultValue : void 0
   );
   const [innerMulti, setInnerMulti] = React.useState(
-    isMulti ? props.defaultValue ?? [] : []
+    isMulti && Array.isArray(props.defaultValue) ? props.defaultValue : []
   );
   const [innerOpen, setInnerOpen] = React.useState(defaultOpen ?? false);
   const [query, setQuery] = React.useState("");
   const [activeIdx, setActiveIdx] = React.useState(-1);
   const searchRef = React.useRef(null);
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme([
+    "Select",
+    "Pagination",
+    "Table",
+    "TablePro"
+  ]);
+  const themedPopupStyle = portalTheme.styles.popup;
+  const hasCustomPopupWidth = [themedPopupStyle, popupStyle].some(
+    (styleValue) => styleValue?.width != null || styleValue?.minWidth != null || styleValue?.maxWidth != null
+  );
+  const resolvedPopupWidth = popupStyle?.width ?? themedPopupStyle?.width;
+  const listboxId = React.useId();
   const openControlled = openProp !== void 0;
-  const open = openControlled ? openProp : innerOpen;
+  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 { triggerRef, floatingRef: menuRef, floatingStyle } = useFloating({
+  React.useEffect(() => {
+    if (!disabled || openControlled || !innerOpen) return;
+    setInnerOpen(false);
+    onOpenChange?.(false);
+  }, [disabled, innerOpen, onOpenChange, openControlled]);
+  const { triggerRef, floatingRef: menuRef, floatingStyle, zIndex: menuZIndex } = useFloating({
     open,
     placement: "bottom",
-    matchTriggerWidth: true,
-    panelHeight: 320
+    matchTriggerWidth: !hasCustomPopupWidth,
+    panelWidth: typeof resolvedPopupWidth === "number" ? resolvedPopupWidth : 360,
+    panelHeight: mergedListHeight + (mergedSearchable ? 58 : 12)
+  });
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: menuRef,
+    ownerRef: triggerRef,
+    zIndex: menuZIndex,
+    onEscape: () => setOpen(false),
+    restoreFocus: true
   });
   const setTriggerRef = React.useCallback(
     (node) => {
@@ -86,7 +139,8 @@ var SelectInner = (props, forwardedRef) => {
   const singleControlled = !isMulti && props.value !== void 0;
   const multiControlled = isMulti && props.value !== void 0;
   const singleValue = singleControlled ? props.value : innerSingle;
-  const multiValue = multiControlled ? props.value : innerMulti;
+  const controlledMultiValue = props.value;
+  const multiValue = multiControlled ? Array.isArray(controlledMultiValue) ? controlledMultiValue : [] : innerMulti;
   React.useEffect(() => {
     if (!open) return;
     const h = (e) => {
@@ -122,28 +176,28 @@ var SelectInner = (props, forwardedRef) => {
     }).filter((x) => x !== null);
   }, [options, filteredFlat, query]);
   React.useEffect(() => {
-    setActiveIdx(filteredFlat.length ? 0 : -1);
-  }, [filteredFlat.length]);
+    setActiveIdx((current) => {
+      if (current >= 0 && current < filteredFlat.length && !filteredFlat[current].disabled) {
+        return current;
+      }
+      return filteredFlat.findIndex((option) => !option.disabled);
+    });
+  }, [filteredFlat]);
   const pickSingle = (opt) => {
-    if (opt.disabled) return;
+    if (disabled || opt.disabled) return;
     if (!singleControlled) setInnerSingle(opt.value);
     props.onChange?.(opt.value);
     setOpen(false);
   };
   const toggleMulti = (opt) => {
-    if (opt.disabled) return;
+    if (disabled || opt.disabled) return;
     const cur = multiValue ?? [];
     const next = cur.includes(opt.value) ? cur.filter((v) => v !== opt.value) : [...cur, opt.value];
     if (!multiControlled) setInnerMulti(next);
     props.onChange?.(next);
   };
-  const stopClearActivation = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const clearAll = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+  const clearAll = () => {
+    if (disabled) return;
     if (isMulti) {
       if (!multiControlled) setInnerMulti([]);
       props.onChange?.([]);
@@ -156,6 +210,11 @@ var SelectInner = (props, forwardedRef) => {
   };
   const isSelected = (val) => isMulti ? (multiValue ?? []).includes(val) : singleValue === val;
   const onKeyDown = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && showClear) {
+      e.preventDefault();
+      clearAll();
+      return;
+    }
     if (!open) {
       if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
         e.preventDefault();
@@ -170,12 +229,24 @@ var SelectInner = (props, forwardedRef) => {
     }
     if (e.key === "ArrowDown") {
       e.preventDefault();
-      setActiveIdx((i) => Math.min(filteredFlat.length - 1, i + 1));
+      setActiveIdx((i) => {
+        for (let step = 1; step <= filteredFlat.length; step++) {
+          const next = (Math.max(i, -1) + step) % filteredFlat.length;
+          if (!filteredFlat[next]?.disabled) return next;
+        }
+        return i;
+      });
       return;
     }
     if (e.key === "ArrowUp") {
       e.preventDefault();
-      setActiveIdx((i) => Math.max(0, i - 1));
+      setActiveIdx((i) => {
+        for (let step = 1; step <= filteredFlat.length; step++) {
+          const next = (i - step + filteredFlat.length) % filteredFlat.length;
+          if (!filteredFlat[next]?.disabled) return next;
+        }
+        return i;
+      });
       return;
     }
     if (e.key === "Enter") {
@@ -197,7 +268,7 @@ var SelectInner = (props, forwardedRef) => {
       if (selected.length === 0) {
         return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
       }
-      return /* @__PURE__ */ jsxs("span", { className: "select-tags", children: [
+      return /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Tag", children: /* @__PURE__ */ jsxs("span", { className: "select-tags", children: [
         shown.map((o) => /* @__PURE__ */ jsx(
           Tag,
           {
@@ -210,7 +281,7 @@ var SelectInner = (props, forwardedRef) => {
               props.onChange?.(next);
             },
             onClick: (e) => e.stopPropagation(),
-            children: o.label
+            children: selectedRender?.(o, { value: o.value, multiple: true }) ?? o.label
           },
           String(o.value)
         )),
@@ -218,16 +289,19 @@ var SelectInner = (props, forwardedRef) => {
           "+",
           overflow
         ] })
-      ] });
+      ] }) });
     }
     const current = allFlat.find((o) => o.value === singleValue);
     if (!current) return /* @__PURE__ */ jsx("span", { className: "placeholder", children: placeholder });
+    if (selectedRender) {
+      return /* @__PURE__ */ jsx("span", { className: "select-value select-value-custom", children: selectedRender(current, { value: current.value, multiple: false }) });
+    }
     return /* @__PURE__ */ jsxs("span", { className: "select-value", children: [
       renderIconSlot(current.icon, { size: 14, className: "select-icon" }),
       /* @__PURE__ */ jsx("span", { className: "select-value-label", children: current.label })
     ] });
   };
-  const hasSelection = isMulti ? (multiValue?.length ?? 0) > 0 : singleValue !== void 0;
+  const hasSelection = isMulti ? multiValue.length > 0 : singleValue != null;
   const showClear = mergedClearable && hasSelection && !disabled;
   let renderIdx = -1;
   const renderOption = (o) => {
@@ -238,19 +312,23 @@ var SelectInner = (props, forwardedRef) => {
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        id: `${listboxId}-option-${idx}`,
         type: "button",
         role: "option",
         "aria-selected": sel,
+        "aria-label": getOptionAriaLabel(o),
         disabled: o.disabled,
         className: `menu-item ${sel ? "active" : ""} ${active ? "highlight" : ""}`,
         onMouseEnter: () => setActiveIdx(idx),
         onClick: () => isMulti ? toggleMulti(o) : pickSingle(o),
         children: [
           isMulti && /* @__PURE__ */ jsx("span", { className: `menu-check ${sel ? "on" : ""}`, "aria-hidden": true, children: sel && /* @__PURE__ */ jsx(Icon, { name: "check", size: 11, stroke: 3 }) }),
-          renderIconSlot(o.icon, { size: 14, className: "menu-item-icon" }),
-          /* @__PURE__ */ jsxs("span", { className: "menu-item-body", children: [
-            /* @__PURE__ */ jsx("span", { className: "menu-item-label", children: o.label }),
-            o.description && /* @__PURE__ */ jsx("span", { className: "menu-item-desc", children: o.description })
+          optionRender ? /* @__PURE__ */ jsx("span", { className: "menu-item-custom", children: optionRender(o, { index: idx, selected: sel, active }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            renderIconSlot(o.icon, { size: 14, className: "menu-item-icon" }),
+            /* @__PURE__ */ jsxs("span", { className: "menu-item-body", children: [
+              /* @__PURE__ */ jsx("span", { className: "menu-item-label", children: o.label }),
+              o.description && /* @__PURE__ */ jsx("span", { className: "menu-item-desc", children: o.description })
+            ] })
           ] }),
           !isMulti && /* @__PURE__ */ jsx("span", { className: "tick", children: /* @__PURE__ */ jsx(Icon, { name: "check", size: 12, stroke: 3 }) })
         ]
@@ -266,46 +344,84 @@ var SelectInner = (props, forwardedRef) => {
       className: `select ${size} ${isMulti ? "multi" : ""} ${open ? "open" : ""} ${disabled ? "disabled" : ""} ${invalid ? "invalid" : ""} ${className}`,
       onKeyDown: (e) => {
         onRootKeyDown?.(e);
-        onKeyDown(e);
+        if (!e.defaultPrevented && e.target.classList.contains("select-trigger")) onKeyDown(e);
+      },
+      onBlur: (event) => {
+        onRootBlur?.(event);
+        if (!open) return;
+        const nextTarget = event.relatedTarget;
+        if (nextTarget) {
+          if (!triggerRef.current?.contains(nextTarget) && !menuRef.current?.contains(nextTarget)) {
+            setOpen(false);
+          }
+          return;
+        }
+        const ownerDocument = event.currentTarget.ownerDocument;
+        window.requestAnimationFrame(() => {
+          const activeElement = ownerDocument.activeElement;
+          if (!triggerRef.current?.contains(activeElement) && !menuRef.current?.contains(activeElement)) {
+            setOpen(false);
+          }
+        });
       },
-      tabIndex: disabled ? -1 : rest.tabIndex ?? 0,
       children: [
         /* @__PURE__ */ jsxs(
-          "button",
+          "div",
           {
-            type: "button",
             className: "select-trigger",
-            disabled,
             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,
             children: [
               renderTrigger(),
-              showClear && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "select-clear",
-                  role: "button",
-                  "aria-label": "Clear",
-                  onPointerDown: stopClearActivation,
-                  onMouseDown: stopClearActivation,
-                  onClick: clearAll,
-                  children: /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
-                }
-              ),
               /* @__PURE__ */ jsx(Icon, { name: "chevDown", size: 14, className: "select-caret" })
             ]
           }
         ),
-        open && typeof document !== "undefined" && createPortal(
+        showClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "select-clear",
+            "aria-label": "Clear",
+            onPointerDown: (event) => event.stopPropagation(),
+            onMouseDown: (event) => event.stopPropagation(),
+            onClick: (event) => {
+              event.stopPropagation();
+              clearAll();
+            },
+            children: mergedClearIcon ?? /* @__PURE__ */ jsx(Icon, { name: "x", size: 12 })
+          }
+        ),
+        open && portalContainer && createPortal(
           /* @__PURE__ */ jsxs(
             "div",
             {
               ref: menuRef,
+              id: listboxId,
               className: `menu ${mergedMenuClassName}`,
               role: "listbox",
               "aria-multiselectable": isMulti || void 0,
-              style: floatingStyle,
+              ...portalTheme.dataAttributes,
+              style: {
+                ...floatingStyle,
+                ...portalTheme.style,
+                ...portalTheme.styles.popup,
+                ...popupStyle
+              },
               children: [
-                mergedSearchable && /* @__PURE__ */ jsx("div", { className: "menu-search", children: /* @__PURE__ */ jsx(
+                mergedSearchable && /* @__PURE__ */ jsx("div", { className: "menu-search", children: /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsx(
                   Input,
                   {
                     ref: searchRef,
@@ -313,6 +429,11 @@ var SelectInner = (props, forwardedRef) => {
                     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") {
@@ -321,29 +442,41 @@ var SelectInner = (props, forwardedRef) => {
                       }
                     }
                   }
-                ) }),
-                loading ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
-                  /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx("span", { className: "spinner" }) }),
-                  /* @__PURE__ */ jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
-                ] }) : filteredItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
-                  /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }) }),
-                  /* @__PURE__ */ jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
-                ] }) : filteredItems.map(
-                  (it, gi) => isGroup(it) ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
-                    /* @__PURE__ */ jsx("div", { className: "menu-group-label", children: it.label }),
-                    it.options.map(renderOption)
-                  ] }, `g-${gi}`) : renderOption(it)
+                ) }) }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "menu-options",
+                    style: { maxHeight: mergedListHeight },
+                    children: loading ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
+                      /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx("span", { className: "spinner" }) }),
+                      /* @__PURE__ */ jsx("span", { children: "\u52A0\u8F7D\u4E2D..." })
+                    ] }) : filteredItems.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "menu-state", children: [
+                      /* @__PURE__ */ jsx("span", { className: "menu-state-ico", children: /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }) }),
+                      /* @__PURE__ */ jsx("span", { children: emptyContent ?? "\u6682\u65E0\u5339\u914D\u9879" })
+                    ] }) : filteredItems.map(
+                      (it, gi) => isGroup(it) ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                        /* @__PURE__ */ jsx("div", { className: "menu-group-label", children: it.label }),
+                        it.options.map(renderOption)
+                      ] }, `g-${gi}`) : renderOption(it)
+                    )
+                  }
                 )
               ]
             }
           ),
-          document.body
+          portalContainer
         )
       ]
     }
   );
 };
-var Select = React.forwardRef(SelectInner);
-Select.displayName = "Select";
+var SelectBase = React.forwardRef(SelectInner);
+SelectBase.displayName = "Select";
+var Select = withComponentTheme(
+  SelectBase,
+  "Select",
+  ["select", "input", "tag"]
+);
 
 export { Select };