@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/CommandPalette.js

@@ -0,0 +1,269 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Dialog } from "./Dialog.js";
+import { SearchField } from "./SearchField.js";
+import { MenuItem } from "./MenuItem.js";
+import { Spinner } from "./Spinner.js";
+import { Alert } from "./Alert.js";
+import { useSurfacePortal } from "./surfacePortal.js";
+import s from "./CommandPalette.module.css";
+const normalize = (value) => value.normalize("NFKD").replace(/\p{Diacritic}/gu, "").toLocaleLowerCase();
+function CommandPalette({
+  open,
+  onClose,
+  onOpen,
+  items,
+  onSelect,
+  title = "\u547D\u4EE4\u9762\u677F",
+  placeholder = "\u641C\u7D22\u547D\u4EE4\u2026",
+  hotkey = true,
+  closeOnSelect = true,
+  emptyText = "\u6CA1\u6709\u5339\u914D\u7684\u547D\u4EE4"
+}) {
+  const [query, setQuery] = useState(""), [active, setActive] = useState(null), [busy, setBusy] = useState(), [error, setError] = useState("");
+  const root = useRef(null), revision = useRef(0), controller = useRef(null), id = useId(), owner = useSurfacePortal();
+  const results = useMemo(() => {
+    const tokens = normalize(query).trim().split(/\s+/).filter(Boolean);
+    return items.filter((item) => {
+      const text = normalize(
+        [
+          item.label,
+          item.description,
+          item.group,
+          item.shortcut,
+          ...item.keywords || []
+        ].filter(Boolean).join(" ")
+      );
+      return tokens.every((token) => text.includes(token));
+    });
+  }, [items, query]);
+  const actionable = (item) => !item.disabled && !!(item.onSelect || onSelect);
+  const grouped = /* @__PURE__ */ new Map();
+  for (const item of results) {
+    const group = item.group || "";
+    if (!grouped.has(group)) grouped.set(group, []);
+    grouped.get(group).push(item);
+  }
+  const enabled = [...grouped.values()].flat().filter(actionable), selected = enabled.find((item) => item.value === active) || enabled[0];
+  const reserveIcon = results.some((item) => !!item.icon);
+  const optionId = (value) => `${id}-${encodeURIComponent(value)}`;
+  const cancel = () => {
+    revision.current++;
+    controller.current?.abort();
+    controller.current = null;
+  };
+  const close = () => {
+    cancel();
+    onClose();
+  };
+  useLayoutEffect(() => {
+    cancel();
+    if (open) {
+      setQuery("");
+      setActive(null);
+      setBusy(void 0);
+      setError("");
+    }
+  }, [open]);
+  useEffect(
+    () => () => {
+      revision.current++;
+      controller.current?.abort();
+    },
+    []
+  );
+  const focus = () => root.current?.querySelector("input")?.focus({ preventScroll: true });
+  useLayoutEffect(() => {
+    if (open && !busy) focus();
+  }, [open, busy]);
+  useLayoutEffect(() => {
+    if (open && selected)
+      document.getElementById(optionId(selected.value))?.scrollIntoView({ block: "nearest" });
+  }, [open, selected?.value]);
+  const latest = useRef({
+    open,
+    onOpen,
+    close,
+    available: owner?.active !== false
+  });
+  latest.current = { open, onOpen, close, available: owner?.active !== false };
+  useEffect(() => {
+    if (!hotkey || !onOpen) return;
+    const key = (event) => {
+      if (event.defaultPrevented || event.repeat || event.isComposing || event.altKey || event.shiftKey || !(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== "k" || !latest.current.available)
+        return;
+      const target = event.target;
+      if (!latest.current.open && target?.closest('input,textarea,select,[contenteditable="true"]'))
+        return;
+      event.preventDefault();
+      if (latest.current.open) latest.current.close();
+      else latest.current.onOpen?.();
+    };
+    window.addEventListener("keydown", key);
+    return () => window.removeEventListener("keydown", key);
+  }, [hotkey, !!onOpen]);
+  const execute = async (item) => {
+    if (controller.current || busy || !actionable(item)) return;
+    cancel();
+    const token = revision.current, abort = new AbortController();
+    controller.current = abort;
+    setBusy(item.value);
+    setError("");
+    setActive(item.value);
+    try {
+      if (item.onSelect) await item.onSelect(abort.signal);
+      else await onSelect?.(item, abort.signal);
+      if (token !== revision.current || abort.signal.aborted) return;
+      setBusy(void 0);
+      if (closeOnSelect) close();
+    } catch {
+      if (token !== revision.current || abort.signal.aborted) return;
+      setBusy(void 0);
+      setError("\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+    } finally {
+      if (controller.current === abort) controller.current = null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: close,
+      title,
+      wide: true,
+      footer: /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          /* @__PURE__ */ jsx("kbd", { children: "\u2191 \u2193" }),
+          " \u9009\u62E9 ",
+          /* @__PURE__ */ jsx("kbd", { children: "\u21B5" }),
+          " \u6267\u884C ",
+          /* @__PURE__ */ jsx("kbd", { children: "Esc" }),
+          " \u5173\u95ED"
+        ] }),
+        /* @__PURE__ */ jsxs("span", { role: "status", "aria-live": "polite", children: [
+          results.length,
+          " \u9879"
+        ] })
+      ] }),
+      children: /* @__PURE__ */ jsxs("div", { ref: root, className: s.palette, children: [
+        /* @__PURE__ */ jsx(
+          SearchField,
+          {
+            label: "\u641C\u7D22\u547D\u4EE4",
+            placeholder,
+            value: query,
+            onChange: (value) => {
+              setQuery(value);
+              setActive(null);
+              setError("");
+            },
+            disabled: !!busy,
+            loading: !!busy,
+            role: "combobox",
+            "aria-autocomplete": "list",
+            "aria-expanded": open,
+            "aria-controls": id,
+            "aria-activedescendant": selected ? optionId(selected.value) : void 0,
+            onKeyDown: (event) => {
+              if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                close();
+                return;
+              }
+              if (busy) return;
+              if (event.key === "Enter") {
+                event.preventDefault();
+                if (selected) void execute(selected);
+                return;
+              }
+              if (!enabled.length) return;
+              const index = enabled.findIndex(
+                (item) => item.value === selected?.value
+              );
+              const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : event.key === "ArrowDown" ? (index + 1) % enabled.length : event.key === "ArrowUp" ? (index - 1 + enabled.length) % enabled.length : -1;
+              if (next >= 0) {
+                event.preventDefault();
+                setActive(enabled[next].value);
+              }
+            }
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          Alert,
+          {
+            tone: "danger",
+            title: "\u547D\u4EE4\u6267\u884C\u5931\u8D25",
+            onClose: () => {
+              setError("");
+              focus();
+            },
+            children: error
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.results,
+            role: "listbox",
+            "aria-label": "\u547D\u4EE4\u7ED3\u679C",
+            id,
+            "aria-busy": !!busy,
+            children: [
+              [...grouped].map(([group, commands]) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "group",
+                  "aria-label": group || "\u547D\u4EE4",
+                  className: s.group,
+                  children: [
+                    group && /* @__PURE__ */ jsx("div", { className: s.groupLabel, "aria-hidden": "true", children: group }),
+                    commands.map((item) => /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        id: optionId(item.value),
+                        as: "div",
+                        role: "option",
+                        tabIndex: -1,
+                        label: item.label,
+                        description: item.description,
+                        icon: item.icon,
+                        reserveIcon,
+                        shortcut: item.shortcut,
+                        active: selected?.value === item.value,
+                        "aria-selected": selected?.value === item.value,
+                        disabled: !!busy || !actionable(item),
+                        trailing: busy === item.value ? /* @__PURE__ */ jsx(Spinner, { size: 14, decorative: true }) : void 0,
+                        onMouseDown: (event) => event.preventDefault(),
+                        onPointerMove: () => {
+                          if (!busy && actionable(item)) setActive(item.value);
+                        },
+                        onClick: () => {
+                          void execute(item);
+                        }
+                      },
+                      item.value
+                    ))
+                  ]
+                },
+                group
+              )),
+              !results.length && /* @__PURE__ */ jsx("div", { className: s.empty, children: emptyText })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  CommandPalette
+};

package/components/CommandPalette.module.css

@@ -0,0 +1,49 @@
+.palette {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.results {
+  overflow: auto;
+  max-height: min(360px, 42vh);
+  min-height: 90px;
+  overscroll-behavior: contain;
+}
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-item-spacing);
+}
+.group + .group {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: var(--separator-width) var(--separator-style)
+    var(--separator-color);
+}
+.groupLabel {
+  padding: 3px var(--menu-item-padding-x) 5px;
+  font-size: 11px;
+  line-height: 18px;
+  color: var(--muted);
+}
+.empty {
+  padding: 30px 12px;
+  text-align: center;
+  color: var(--muted);
+  font-size: 12px;
+}
+.footer {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--muted);
+  font-size: 11px;
+  flex-wrap: wrap;
+}
+.footer kbd {
+  font: inherit;
+  color: var(--fg);
+}

package/components/ContextMenu.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import type { ContextMenuItem } from "./menuTypes";
+export declare function ContextMenu({ items, children, label, disabled: requestedDisabled, onOpenChange, }: {
+    items: ContextMenuItem[];
+    children: ReactNode;
+    label?: string;
+    disabled?: boolean;
+    onOpenChange?(open: boolean): void;
+}): import("react").JSX.Element;

package/components/ContextMenu.js

@@ -0,0 +1,363 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { ContextMenuPanel } from "./ContextMenuPanel.js";
+import { cancelMotion } from "./motion.js";
+import { useMenuLayers } from "./useMenuLayers.js";
+import { movingTowardSubmenu } from "./menuPointer.js";
+import s from "./ContextMenu.module.css";
+import { useSurfacePortal } from "./surfacePortal.js";
+function ContextMenu({
+  items,
+  children,
+  label = "\u53F3\u952E\u83DC\u5355\u533A\u57DF",
+  disabled: requestedDisabled = false,
+  onOpenChange
+}) {
+  const owner = useSurfacePortal(), portalHost = owner?.host || document.body, disabled = requestedDisabled || owner?.active === false;
+  const host = useRef(null), root = useRef(null), restore = useRef(null), hover = useRef(void 0), searchTimer = useRef(void 0), search = useRef(""), pointerHistory = useRef([]), hoverCandidate = useRef(void 0), revision = useRef(0), desired = useRef(false), callback = useRef(onOpenChange);
+  callback.current = onOpenChange;
+  const [open, setOpen] = useState(false), [point, setPoint] = useState({ x: 0, y: 0 }), [path, setPath] = useState([]), [focusLevel, setFocusLevel] = useState(null), [busy, setBusy] = useState(), [error, setError] = useState("");
+  const cancelHover = useCallback(() => {
+    clearTimeout(hover.current);
+    hoverCandidate.current = void 0;
+  }, []);
+  const close = useCallback(
+    (returnFocus = true) => {
+      revision.current++;
+      desired.current = false;
+      cancelHover();
+      setOpen(false);
+      setBusy(void 0);
+      callback.current?.(false);
+      if (returnFocus && restore.current?.isConnected)
+        restore.current.focus({ preventScroll: true });
+    },
+    [cancelHover]
+  );
+  useEffect(() => {
+    if (disabled && desired.current) close(false);
+  }, [disabled, close]);
+  const show = (x, y) => {
+    if (disabled) return;
+    revision.current++;
+    cancelHover();
+    pointerHistory.current = [];
+    desired.current = true;
+    restore.current = document.activeElement instanceof HTMLElement ? document.activeElement : host.current;
+    setPoint({ x, y });
+    setPath([]);
+    setBusy(void 0);
+    setError("");
+    setOpen(true);
+    setFocusLevel(0);
+    callback.current?.(true);
+  };
+  useLayoutEffect(() => {
+    const node = root.current;
+    cancelMotion(node);
+    node.style.opacity = "1";
+    node.style.translate = "0 0";
+    node.inert = !open;
+    if (open && !node.matches(":popover-open")) node.showPopover();
+  }, [open, point, portalHost]);
+  useEffect(() => {
+    if (!open) return;
+    const pointer = (e) => {
+      if (!root.current?.contains(e.target)) close(false);
+    };
+    const key2 = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+      }
+    };
+    const track = (event) => {
+      const now = performance.now();
+      pointerHistory.current = [
+        ...pointerHistory.current.filter((p) => now - p.time < 300).slice(-4),
+        { x: event.clientX, y: event.clientY, time: now }
+      ];
+    };
+    const blur = () => close(false);
+    document.addEventListener("pointerdown", pointer, true);
+    document.addEventListener("pointermove", track, true);
+    document.addEventListener("keydown", key2, true);
+    window.addEventListener("blur", blur);
+    return () => {
+      document.removeEventListener("pointerdown", pointer, true);
+      document.removeEventListener("pointermove", track, true);
+      document.removeEventListener("keydown", key2, true);
+      window.removeEventListener("blur", blur);
+    };
+  }, [open, close]);
+  useEffect(
+    () => () => {
+      revision.current++;
+      clearTimeout(hover.current);
+      clearTimeout(searchTimer.current);
+      if (root.current) cancelMotion(root.current);
+    },
+    []
+  );
+  useLayoutEffect(() => {
+    if (!open || focusLevel === null) return;
+    let frame = 0;
+    const started = performance.now();
+    const focus = () => {
+      const button = root.current?.querySelector(
+        '[data-menu-state="open"][data-menu-level="' + focusLevel + '"] button:not(:disabled)'
+      );
+      if (button && !button.closest("[inert]") && getComputedStyle(button).visibility === "visible" && button.getClientRects().length) {
+        button.focus({ preventScroll: true });
+        setFocusLevel(null);
+      } else if (performance.now() - started < 500)
+        frame = requestAnimationFrame(focus);
+    };
+    frame = requestAnimationFrame(focus);
+    return () => cancelAnimationFrame(frame);
+  }, [open, focusLevel, path, point]);
+  const levels = useMemo(() => {
+    if (!open) return [];
+    const result = [
+      { key: "root", level: 0, items, point, activeId: path[0]?.id }
+    ];
+    const ids = [];
+    for (const entry of path) {
+      const parent = result.at(-1).items.find((item) => item.id === entry.id);
+      if (!parent || parent.type === "separator" || !parent.children?.length)
+        break;
+      ids.push(entry.id);
+      result.push({
+        key: JSON.stringify(ids),
+        level: result.length,
+        items: parent.children,
+        point,
+        anchor: entry.anchor,
+        activeId: path[result.length]?.id
+      });
+    }
+    return result;
+  }, [open, path, items, point]);
+  const { layers, exited } = useMenuLayers(levels);
+  useLayoutEffect(() => {
+    const node = root.current;
+    if (!open && !layers.length && node.matches(":popover-open"))
+      node.hidePopover();
+  }, [open, layers.length]);
+  const expand = (item, level, index, focus = false) => {
+    cancelHover();
+    const anchor = root.current?.querySelector(
+      '[data-menu-state="open"][data-menu-level="' + level + '"] [data-menu-index="' + index + '"]'
+    );
+    if (!anchor) return;
+    if (item.children?.length && path[level]?.id === item.id) {
+      if (focus) setFocusLevel(level + 1);
+      return;
+    }
+    setPath(
+      (old) => item.children?.length ? [...old.slice(0, level), { id: item.id, anchor }] : old.slice(0, level)
+    );
+    if (focus && item.children?.length) setFocusLevel(level + 1);
+  };
+  const queueHover = (item, level, index) => {
+    if (item.disabled || path[level]?.id === item.id) {
+      cancelHover();
+      return;
+    }
+    const anchor = root.current?.querySelector(
+      '[data-menu-state="open"][data-menu-level="' + level + '"] [data-menu-index="' + index + '"]'
+    );
+    if (!anchor) return;
+    if (hoverCandidate.current?.id === item.id && hoverCandidate.current.level === level)
+      return;
+    cancelHover();
+    const candidate = {
+      id: item.id,
+      level,
+      anchor,
+      started: performance.now()
+    };
+    hoverCandidate.current = candidate;
+    const check = () => {
+      if (hoverCandidate.current !== candidate) return;
+      const points = pointerHistory.current, point2 = points.at(-1);
+      if (!point2) {
+        cancelHover();
+        return;
+      }
+      const target = document.elementFromPoint(point2.x, point2.y);
+      const panel = target?.closest(
+        '[data-menu-state="open"][data-menu-level]'
+      );
+      if (panel && Number(panel.dataset.menuLevel) > level) {
+        cancelHover();
+        return;
+      }
+      const child = root.current?.querySelector(
+        '[data-menu-state="open"][data-menu-level="' + (level + 1) + '"]'
+      );
+      if (child && performance.now() - candidate.started < 500 && movingTowardSubmenu(points[0], point2, child.getBoundingClientRect())) {
+        hover.current = setTimeout(check, 40);
+        return;
+      }
+      if (anchor.contains(target)) expand(item, level, index);
+      else cancelHover();
+    };
+    hover.current = setTimeout(check, 120);
+  };
+  const choose = async (item, level, index) => {
+    if (item.disabled || busy) return;
+    if (item.children?.length) {
+      expand(item, level, index, true);
+      return;
+    }
+    const token = revision.current;
+    setError("");
+    try {
+      const result = item.onSelect?.();
+      if (result && typeof result.then === "function") {
+        setBusy(item.id);
+        await result;
+      }
+      if (token !== revision.current) return;
+      setBusy(void 0);
+      if (item.closeOnSelect !== false) close();
+    } catch {
+      if (token === revision.current) {
+        setBusy(void 0);
+        setError("\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5\u3002");
+      }
+    }
+  };
+  const key = (event, level) => {
+    cancelHover();
+    pointerHistory.current = [];
+    const target = event.target.closest(
+      "button[data-menu-index]"
+    );
+    const options = [
+      ...event.currentTarget.querySelectorAll(
+        "button:not(:disabled)"
+      )
+    ];
+    const index = target ? options.indexOf(target) : -1;
+    let next;
+    if (event.key === "ArrowDown") next = (index + 1) % options.length;
+    else if (event.key === "ArrowUp")
+      next = (index - 1 + options.length) % options.length;
+    else if (event.key === "Home") next = 0;
+    else if (event.key === "End") next = options.length - 1;
+    if (next !== void 0) {
+      event.preventDefault();
+      options[next]?.focus();
+      return;
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key === "ArrowRight" && target) {
+      event.preventDefault();
+      const i = Number(target.dataset.menuIndex), item = levels[level].items[i];
+      if (item.type !== "separator") expand(item, level, i, true);
+    } else if (event.key === "ArrowLeft" && level > 0) {
+      event.preventDefault();
+      const anchor = path[level - 1]?.anchor;
+      setPath((old) => old.slice(0, level - 1));
+      requestAnimationFrame(() => anchor?.focus());
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      target?.click();
+    } else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      search.current += event.key.toLowerCase();
+      clearTimeout(searchTimer.current);
+      searchTimer.current = setTimeout(() => search.current = "", 600);
+      options.find(
+        (button) => button.querySelector("[data-menu-label]")?.textContent?.toLowerCase().startsWith(search.current)
+      )?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: host,
+        className: s.host,
+        role: "group",
+        "aria-label": label,
+        tabIndex: disabled ? void 0 : 0,
+        onContextMenu: (e) => {
+          if (disabled) return;
+          e.preventDefault();
+          e.stopPropagation();
+          host.current?.focus({ preventScroll: true });
+          show(e.clientX, e.clientY);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") {
+            e.preventDefault();
+            const rect = e.currentTarget.getBoundingClientRect();
+            show(rect.left + 16, rect.top + 16);
+          }
+        },
+        children
+      }
+    ),
+    createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: root,
+          popover: "manual",
+          className: s.root,
+          onContextMenu: (e) => e.preventDefault(),
+          children: layers.map((menu) => /* @__PURE__ */ jsx(
+            ContextMenuPanel,
+            {
+              open: menu.open,
+              onExited: () => exited(menu.key),
+              onReady: (node) => {
+                if (menu.open && focusLevel === menu.level && !node.inert && getComputedStyle(node).visibility === "visible") {
+                  node.querySelector("button:not(:disabled)")?.focus({ preventScroll: true });
+                  setFocusLevel(null);
+                }
+              },
+              onPanelEnter: () => {
+                if (hoverCandidate.current && menu.level > hoverCandidate.current.level)
+                  cancelHover();
+              },
+              items: menu.items,
+              level: menu.level,
+              point: menu.point,
+              anchor: menu.anchor,
+              activeId: menu.activeId,
+              busy,
+              error,
+              onHover: (item, index) => queueHover(item, menu.level, index),
+              onChoose: (item, index) => void choose(item, menu.level, index),
+              onKey: key,
+              onScroll: () => {
+                if (menu.open) setPath((old) => old.slice(0, menu.level));
+              }
+            },
+            menu.key
+          ))
+        }
+      ),
+      portalHost
+    )
+  ] });
+}
+export {
+  ContextMenu
+};