@robert-stackflow/oneui 0.0.0-stage → 0.1.0

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
+};

package/components/ContextMenu.module.css

@@ -0,0 +1,42 @@
+.host {
+  min-width: 0;
+}
+.root {
+  position: fixed;
+  inset: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  overflow: visible;
+  pointer-events: none;
+}
+.root::backdrop {
+  background: transparent;
+  pointer-events: none;
+}
+.panel {
+  position: fixed;
+  pointer-events: auto;
+  width: 236px;
+  max-width: calc(100vw - 16px);
+  max-height: calc(100vh - 16px);
+  overflow: auto;
+  padding: 5px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+}
+.error {
+  padding: 8px;
+  color: var(--danger);
+  font-size: 12px;
+}
+
+.panel[inert] {
+  pointer-events: none;
+}

package/components/ContextMenuPanel.d.ts

@@ -0,0 +1,22 @@
+import { type KeyboardEvent } from "react";
+import type { ContextMenuItem, MenuAction } from "./menuTypes";
+export declare function ContextMenuPanel({ open, onExited, onPanelEnter, onReady, items, level, point, anchor, activeId, busy, error, onHover, onChoose, onKey, onScroll, }: {
+    open: boolean;
+    onExited(): void;
+    onPanelEnter(): void;
+    onReady(node: HTMLDivElement): void;
+    items: ContextMenuItem[];
+    level: number;
+    point: {
+        x: number;
+        y: number;
+    };
+    anchor?: HTMLElement;
+    activeId?: string;
+    busy?: string;
+    error?: string;
+    onHover(item: MenuAction, index: number): void;
+    onChoose(item: MenuAction, index: number): void;
+    onKey(event: KeyboardEvent<HTMLDivElement>, level: number): void;
+    onScroll(): void;
+}): import("react").JSX.Element;

package/components/ContextMenuPanel.js

@@ -0,0 +1,155 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuItem } from "./MenuItem.js";
+import { menuSurfaceMotion, cancelMotion } from "./motion.js";
+import { useLayoutEffect, useRef } from "react";
+import { ChevronRight } from "lucide-react";
+import { Spinner } from "./Spinner.js";
+import { Divider } from "./Divider.js";
+import s from "./ContextMenu.module.css";
+function ContextMenuPanel({
+  open,
+  onExited,
+  onPanelEnter,
+  onReady,
+  items,
+  level,
+  point,
+  anchor,
+  activeId,
+  busy,
+  error,
+  onHover,
+  onChoose,
+  onKey,
+  onScroll
+}) {
+  const reserveIcon = items.some(
+    (item) => item.type !== "separator" && !!item.icon
+  );
+  const ref = useRef(null), opened = useRef(open), exited = useRef(onExited), reposition = useRef(() => {
+  }), ready = useRef(onReady);
+  ready.current = onReady;
+  opened.current = open;
+  exited.current = onExited;
+  useLayoutEffect(() => {
+    const node = ref.current;
+    const position = () => {
+      const rect = node.getBoundingClientRect(), parent = anchor?.getBoundingClientRect();
+      let side = anchor?.closest("[data-menu-level]")?.dataset.side || "right";
+      let x = point.x, y = point.y;
+      if (parent) {
+        x = side === "left" ? parent.left - rect.width - 4 : parent.right + 4;
+        y = parent.top - 5;
+        if (side === "right" && x + rect.width > innerWidth - 8) {
+          side = "left";
+          x = parent.left - rect.width - 4;
+        } else if (side === "left" && x < 8) {
+          side = "right";
+          x = parent.right + 4;
+        }
+      } else {
+        const left = Math.max(8, Math.min(x, innerWidth - rect.width - 8));
+        side = left > innerWidth - left - rect.width ? "left" : "right";
+      }
+      node.dataset.side = side;
+      node.dataset.motionSide = anchor ? side : y > innerHeight - rect.height - 8 ? "top" : "bottom";
+      node.style.left = Math.max(8, Math.min(x, innerWidth - rect.width - 8)) + "px";
+      node.style.top = Math.max(8, Math.min(y, innerHeight - rect.height - 8)) + "px";
+      node.style.visibility = "visible";
+      ready.current(node);
+    };
+    reposition.current = position;
+    position();
+    const frame = requestAnimationFrame(() => {
+      position();
+    });
+    const observer = new ResizeObserver(position);
+    observer.observe(node);
+    window.addEventListener("resize", position);
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", position);
+    };
+  }, [anchor, point, level]);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    node.inert = !open;
+    if (open) ready.current(node);
+    if (!open) node.setAttribute("aria-hidden", "true");
+    else node.removeAttribute("aria-hidden");
+    const frame = requestAnimationFrame(() => {
+      if (!open && !node.dataset.motionPhase) {
+        exited.current();
+        return;
+      }
+      const side = node.dataset.motionSide || "bottom";
+      void menuSurfaceMotion(node, open ? "enter" : "exit", side).then(
+        (done) => {
+          if (done && !open && !opened.current) exited.current();
+          else if (done && open && opened.current) reposition.current();
+        }
+      );
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [open, point]);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    return () => cancelMotion(node);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "menu",
+      "aria-busy": !!busy,
+      "aria-label": level ? "\u5B50\u83DC\u5355 " + level : "\u53F3\u952E\u83DC\u5355",
+      "data-menu-level": level,
+      "data-menu-state": open ? "open" : "closing",
+      onPointerEnter: onPanelEnter,
+      className: s.panel,
+      style: {
+        visibility: "hidden",
+        opacity: 0,
+        zIndex: level * 2 + (open ? 2 : 1)
+      },
+      onKeyDown: (e) => onKey(e, level),
+      onScroll,
+      children: [
+        items.map(
+          (item, index) => item.type === "separator" ? /* @__PURE__ */ jsx(Divider, { spacing: 4 }, item.id) : /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              reserveIcon,
+              label: item.label,
+              description: item.description,
+              icon: busy === item.id && reserveIcon ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : item.icon,
+              shortcut: item.shortcut,
+              selected: !!item.checked,
+              selection: item.type === "checkbox" ? "checkbox" : item.type === "radio" ? "radio" : void 0,
+              trailing: !reserveIcon && busy === item.id ? /* @__PURE__ */ jsx(Spinner, { size: 16, decorative: true }) : item.children?.length ? /* @__PURE__ */ jsx(ChevronRight, {}) : void 0,
+              tone: item.tone,
+              role: item.type === "checkbox" ? "menuitemcheckbox" : item.type === "radio" ? "menuitemradio" : "menuitem",
+              "aria-checked": item.type === "checkbox" || item.type === "radio" ? !!item.checked : void 0,
+              "aria-haspopup": item.children?.length ? "menu" : void 0,
+              "aria-expanded": item.children?.length ? activeId === item.id : void 0,
+              disabled: item.disabled || !!busy,
+              "data-menu-index": index,
+              "data-menu-id": item.id,
+              "data-tone": item.tone,
+              className: item.className,
+              style: { color: item.color, ...item.style },
+              onPointerMove: () => onHover(item, index),
+              onClick: () => onChoose(item, index)
+            },
+            item.id
+          )
+        ),
+        error && level === 0 && /* @__PURE__ */ jsx("p", { role: "alert", className: s.error, children: error })
+      ]
+    }
+  );
+}
+export {
+  ContextMenuPanel
+};

package/components/ContributionCalendar.d.ts

@@ -0,0 +1,18 @@
+import { type ContributionDay } from "./contribution";
+export declare function ContributionCalendar({ data, year, startDate, endDate, weekStartsOn, value, onChange, label, unit, locale, color, emptyMode, allowFuture, today, thresholds, }: {
+    data: ContributionDay[];
+    year?: number;
+    startDate?: string;
+    endDate?: string;
+    weekStartsOn?: 0 | 1;
+    value?: string;
+    onChange?(date: string): void;
+    label?: string;
+    unit?: string;
+    locale?: string;
+    color?: string;
+    emptyMode?: "zero" | "missing";
+    allowFuture?: boolean;
+    today?: string;
+    thresholds?: [number, number, number, number];
+}): import("react").JSX.Element;