@fangxinyan/lumina 0.6.17 → 0.7.0

package/dist/chunk-EAUB6FEN.js

@@ -0,0 +1,262 @@
+import { Input } from './chunk-UE4HFGJ6.js';
+import { useOverlayZIndex, useOverlayLayer, OverlayZIndexProvider } from './chunk-2A4GYSN4.js';
+import { useComponentPortalTheme, InternalComponentThemePart, withComponentTheme } from './chunk-DRDDQCDD.js';
+import { usePortalContainer } from './chunk-ULTDRMGN.js';
+import './tokens-CEJVVA3G.css';
+import './shared-NJHRNLRH.css';
+import './CommandPalette-GHTX7AAA.css';
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var DEFAULT_FILTER = (item, q) => {
+  if (!q) return true;
+  const hay = [item.label, ...item.keywords ?? []].join(" ").toLowerCase();
+  const needle = q.toLowerCase();
+  let i = 0;
+  for (const ch of hay) {
+    if (ch === needle[i]) i++;
+    if (i === needle.length) return true;
+  }
+  return i === needle.length;
+};
+var findFirstEnabledIndex = (items) => items.findIndex((item) => !item.disabled);
+var CommandPaletteBase = React.forwardRef(({
+  open,
+  onOpenChange,
+  items,
+  placeholder = "\u641C\u7D22\u547D\u4EE4\u2026",
+  filter = DEFAULT_FILTER,
+  emptyText = "\u6682\u65E0\u5339\u914D\u7ED3\u679C",
+  resetOnOpen = true,
+  footer,
+  overlayClassName = "",
+  className = "",
+  onMouseDown,
+  onKeyDown,
+  style,
+  ...rest
+}, ref) => {
+  const portalContainer = usePortalContainer();
+  const portalTheme = useComponentPortalTheme("CommandPalette");
+  const [query, setQuery] = React.useState("");
+  const [active, setActive] = React.useState(-1);
+  const inputRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const wasOpenRef = React.useRef(false);
+  const listId = React.useId();
+  const overlayZIndex = useOverlayZIndex(open);
+  const filtered = React.useMemo(() => items.filter((it) => filter(it, query)), [items, query, filter]);
+  const grouped = React.useMemo(() => {
+    const order = [];
+    const map = /* @__PURE__ */ new Map();
+    filtered.forEach((it, filteredIndex) => {
+      const g = it.group ?? "";
+      if (!map.has(g)) {
+        map.set(g, []);
+        order.push(g);
+      }
+      map.get(g).push({ item: it, filteredIndex });
+    });
+    return order.map((g) => ({ group: g, items: map.get(g) }));
+  }, [filtered]);
+  const close = React.useCallback(() => onOpenChange?.(false), [onOpenChange]);
+  useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: panelRef,
+    zIndex: overlayZIndex,
+    onEscape: close,
+    trapFocus: true,
+    autoFocus: true,
+    restoreFocus: true,
+    lockScroll: true,
+    initialFocusRef: inputRef
+  });
+  const setPanelRef = React.useCallback((node) => {
+    panelRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
+  React.useEffect(() => {
+    if (!open) {
+      wasOpenRef.current = false;
+      return;
+    }
+    if (wasOpenRef.current) return;
+    wasOpenRef.current = true;
+    if (resetOnOpen) setQuery("");
+    setActive(findFirstEnabledIndex(resetOnOpen ? items : filtered));
+  }, [filtered, items, open, resetOnOpen]);
+  React.useEffect(() => {
+    setActive((current) => {
+      if (filtered.length === 0) return -1;
+      if (current >= 0 && current < filtered.length && !filtered[current].disabled) return current;
+      return findFirstEnabledIndex(filtered);
+    });
+  }, [filtered]);
+  React.useEffect(() => {
+    const el = listRef.current?.querySelector(`[data-cmd-idx="${active}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [active, filtered]);
+  const pick = (it) => {
+    if (it.disabled) return;
+    it.onSelect?.();
+    close();
+  };
+  const handlePanelKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => {
+        if (filtered.length === 0) return -1;
+        for (let n = 1; n <= filtered.length; n++) {
+          const i = (a + n) % filtered.length;
+          if (!filtered[i].disabled) return i;
+        }
+        return a;
+      });
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => {
+        if (filtered.length === 0) return -1;
+        for (let n = 1; n <= filtered.length; n++) {
+          const i = (a - n + filtered.length) % filtered.length;
+          if (!filtered[i].disabled) return i;
+        }
+        return a;
+      });
+    }
+    if (e.key === "Enter") {
+      const it = filtered[active];
+      if (it) {
+        e.preventDefault();
+        pick(it);
+      }
+    }
+    if (e.key === "Home" || e.key === "End") {
+      e.preventDefault();
+      const candidates = filtered.map((item, index) => ({ item, index })).filter(({ item }) => !item.disabled);
+      const next = e.key === "Home" ? candidates[0] : candidates[candidates.length - 1];
+      if (next) setActive(next.index);
+    }
+  };
+  if (!portalContainer || !open) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(OverlayZIndexProvider, { zIndex: overlayZIndex, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: ["cmdp-overlay", overlayClassName].filter(Boolean).join(" "),
+        ...portalTheme.dataAttributes,
+        style: { ...portalTheme.style, ...portalTheme.styles.overlay, zIndex: overlayZIndex },
+        onMouseDown: close,
+        role: "presentation",
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: setPanelRef,
+            className: ["cmdp-panel", className].filter(Boolean).join(" "),
+            onMouseDown: (e) => {
+              onMouseDown?.(e);
+              e.stopPropagation();
+            },
+            role: "dialog",
+            "aria-modal": true,
+            "aria-label": "\u547D\u4EE4\u9762\u677F",
+            tabIndex: -1,
+            onKeyDown: handlePanelKeyDown,
+            ...portalTheme.dataAttributes,
+            ...rest,
+            style: { ...portalTheme.style, ...portalTheme.styles.popup, ...style },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "cmdp-search", children: /* @__PURE__ */ jsx(InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: inputRef,
+                  size: "lg",
+                  leadingIcon: "search",
+                  placeholder,
+                  value: query,
+                  onValueChange: (v) => setQuery(v),
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-haspopup": "listbox",
+                  "aria-expanded": open,
+                  "aria-controls": listId,
+                  "aria-activedescendant": active >= 0 ? `${listId}-option-${active}` : void 0,
+                  suffix: /* @__PURE__ */ jsx("span", { className: "cmdp-kbd", children: "esc" })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx("div", { ref: listRef, id: listId, className: "cmdp-list", role: "listbox", "aria-label": "\u547D\u4EE4", children: grouped.length === 0 ? /* @__PURE__ */ jsx("div", { className: "cmdp-empty", children: emptyText }) : grouped.map(({ group, items: gItems }, groupIndex) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "cmdp-group",
+                  role: "group",
+                  "aria-labelledby": group ? `${listId}-group-${groupIndex}` : void 0,
+                  children: [
+                    group && /* @__PURE__ */ jsx("div", { id: `${listId}-group-${groupIndex}`, className: "cmdp-group-head", children: group }),
+                    gItems.map(({ item: it, filteredIndex: i }) => {
+                      const isActive = i === active;
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          role: "option",
+                          id: `${listId}-option-${i}`,
+                          "aria-selected": isActive,
+                          tabIndex: -1,
+                          "data-cmd-idx": i,
+                          disabled: it.disabled,
+                          className: `cmdp-item ${isActive ? "active" : ""}`,
+                          onMouseEnter: () => setActive(i),
+                          onClick: () => pick(it),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { className: "cmdp-icon", children: it.icon }),
+                            /* @__PURE__ */ jsxs("span", { className: "cmdp-labels", children: [
+                              /* @__PURE__ */ jsx("span", { className: "cmdp-label", children: it.label }),
+                              it.description && /* @__PURE__ */ jsx("span", { className: "cmdp-desc", children: it.description })
+                            ] }),
+                            it.shortcut && /* @__PURE__ */ jsx("span", { className: "cmdp-shortcut", children: it.shortcut })
+                          ]
+                        },
+                        it.key
+                      );
+                    })
+                  ]
+                },
+                group || "_"
+              )) }),
+              footer === null ? null : /* @__PURE__ */ jsx("div", { className: "cmdp-footer", children: footer ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "cmdp-kbd", children: "\u2191" }),
+                  /* @__PURE__ */ jsx("span", { className: "cmdp-kbd", children: "\u2193" }),
+                  " \u5207\u6362"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "cmdp-kbd", children: "\u23CE" }),
+                  " \u6267\u884C"
+                ] }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "cmdp-kbd", children: "esc" }),
+                  " \u5173\u95ED"
+                ] })
+              ] }) })
+            ]
+          }
+        )
+      }
+    ) }),
+    portalContainer
+  );
+});
+CommandPaletteBase.displayName = "CommandPalette";
+var CommandPalette = withComponentTheme(
+  CommandPaletteBase,
+  "CommandPalette",
+  ["command-palette", "input"],
+  { portalOnly: true }
+);
+
+export { CommandPalette };