@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/Tooltip.js

@@ -0,0 +1,169 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { useUIConfig } from "./UIProvider.js";
+import { createPortal } from "react-dom";
+import { surfaceMotion, cancelMotion } from "./motion.js";
+import {
+  claimTooltip,
+  releaseTooltip,
+  retainTooltipEvents,
+  keyboardTooltip,
+  tooltipDelay
+} from "./tooltipState.js";
+import s from "./Tooltip.module.css";
+import { useSurfacePortal } from "./surfacePortal.js";
+function Tooltip({
+  content,
+  placement,
+  children
+}) {
+  const config = useUIConfig();
+  const preferred = placement || config.tooltipPlacement, id = useId();
+  const anchor = useRef(null), popup = useRef(null), timer = useRef(void 0);
+  const owner = useSurfacePortal(), portalHost = owner?.host || document.body;
+  const [requestedOpen, setOpen] = useState(false), opened = useRef(false), visible = useRef(false);
+  const open = requestedOpen && owner?.active !== false;
+  const hide = useCallback((immediate = false) => {
+    clearTimeout(timer.current);
+    opened.current = false;
+    setOpen(false);
+    releaseTooltip(hide, visible.current);
+    visible.current = false;
+    if (immediate && popup.current) {
+      cancelMotion(popup.current);
+      if (popup.current.matches(":popover-open")) popup.current.hidePopover();
+    }
+  }, []);
+  const schedule = () => {
+    if (owner?.active === false) return;
+    clearTimeout(timer.current);
+    claimTooltip(hide);
+    timer.current = setTimeout(() => {
+      opened.current = true;
+      setOpen(true);
+    }, tooltipDelay());
+  };
+  useEffect(() => {
+    const release = retainTooltipEvents(), node = popup.current;
+    return () => {
+      clearTimeout(timer.current);
+      releaseTooltip(hide, visible.current);
+      cancelMotion(node);
+      release();
+    };
+  }, [hide, portalHost]);
+  useLayoutEffect(() => {
+    if (owner?.active === false) hide(true);
+  }, [owner?.active, hide]);
+  useLayoutEffect(() => {
+    const node = popup.current;
+    if (!open) {
+      if (node.matches(":popover-open"))
+        void surfaceMotion(node, "exit", node.dataset.offset).then((done) => {
+          if (done && !opened.current && node.matches(":popover-open"))
+            node.hidePopover();
+        });
+      return;
+    }
+    if (!node.matches(":popover-open")) node.showPopover();
+    visible.current = true;
+    const a = anchor.current.getBoundingClientRect(), w = node.offsetWidth, h = node.offsetHeight, gap = 10;
+    const spaces = {
+      top: a.top,
+      bottom: innerHeight - a.bottom,
+      left: a.left,
+      right: innerWidth - a.right
+    };
+    const opposite = {
+      top: "bottom",
+      bottom: "top",
+      left: "right",
+      right: "left"
+    };
+    const sides = Object.keys(spaces);
+    const order = [
+      preferred,
+      opposite[preferred],
+      ...sides.sort((x2, y2) => spaces[y2] - spaces[x2])
+    ];
+    const actual = order.find(
+      (v) => spaces[v] >= (v === "top" || v === "bottom" ? h : w) + gap + 8
+    ) || order[2];
+    let x = a.left + a.width / 2 - w / 2, y = a.top - h - gap;
+    if (actual === "bottom") y = a.bottom + gap;
+    if (actual === "left" || actual === "right") {
+      x = actual === "left" ? a.left - w - gap : a.right + gap;
+      y = a.top + a.height / 2 - h / 2;
+    }
+    x = Math.max(8, Math.min(x, innerWidth - w - 8));
+    y = Math.max(8, Math.min(y, innerHeight - h - 8));
+    const vertical = actual === "top" || actual === "bottom", extent = vertical ? w : h, margin = Math.min(17, extent / 2);
+    node.style.left = x + "px";
+    node.style.top = y + "px";
+    node.style.setProperty(
+      "--arrow",
+      Math.max(
+        margin,
+        Math.min(
+          extent - margin,
+          vertical ? a.left + a.width / 2 - x : a.top + a.height / 2 - y
+        )
+      ) + "px"
+    );
+    node.dataset.side = actual;
+    node.dataset.offset = {
+      top: "0 3px",
+      bottom: "0 -3px",
+      left: "3px 0",
+      right: "-3px 0"
+    }[actual];
+    void surfaceMotion(node, "enter", node.dataset.offset);
+  }, [open, preferred, portalHost]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: anchor,
+        className: s.anchor,
+        onPointerEnter: (e) => {
+          if (e.pointerType !== "touch" && !e.buttons) schedule();
+        },
+        onPointerLeave: () => hide(),
+        onPointerDown: () => hide(),
+        onFocus: (e) => {
+          if (keyboardTooltip() && e.target.matches(":focus-visible"))
+            schedule();
+        },
+        onBlur: () => hide(),
+        children: cloneElement(children, {
+          "aria-describedby": [children.props["aria-describedby"], open ? id : void 0].filter(Boolean).join(" ") || void 0
+        })
+      }
+    ),
+    createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: popup,
+          id,
+          role: "tooltip",
+          popover: "manual",
+          className: s.tooltip,
+          children: content
+        }
+      ),
+      portalHost
+    )
+  ] });
+}
+export {
+  Tooltip
+};

package/components/Tooltip.module.css

@@ -0,0 +1,53 @@
+.anchor {
+  display: inline-flex;
+  align-items: center;
+}
+.tooltip {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  max-width: min(320px, calc(100vw - 16px));
+  padding: 6px 9px;
+  border-radius: 10px;
+  background: #303030;
+  color: #fff;
+  border: 1px solid #303030;
+  box-shadow: 0 3px 12px rgb(0 0 0 / 0.14);
+  font: 400 11px/16px var(--ui-font);
+  overflow: visible;
+  pointer-events: none;
+}
+:global([data-theme="dark"]) .tooltip {
+  box-shadow: 0 3px 12px rgb(0 0 0 / 0.22);
+}
+.tooltip::before {
+  content: "";
+  position: absolute;
+  background: inherit;
+  width: 14px;
+  height: 8px;
+}
+.tooltip[data-side="top"]::before {
+  bottom: -7px;
+  left: calc(var(--arrow) - 7px);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
+}
+.tooltip[data-side="bottom"]::before {
+  top: -7px;
+  left: calc(var(--arrow) - 7px);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+.tooltip[data-side="left"]::before {
+  right: -7px;
+  top: calc(var(--arrow) - 7px);
+  width: 8px;
+  height: 14px;
+  clip-path: polygon(100% 50%, 0 0, 0 100%);
+}
+.tooltip[data-side="right"]::before {
+  left: -7px;
+  top: calc(var(--arrow) - 7px);
+  width: 8px;
+  height: 14px;
+  clip-path: polygon(0 50%, 100% 0, 100% 100%);
+}

package/components/TreeGuides.d.ts

@@ -0,0 +1,9 @@
+/** Shared connector geometry for hierarchy menus and tables. */
+export declare function TreeGuides({ depth, continuations, last, expanded, indent, offset, }: {
+    depth: number;
+    continuations: boolean[];
+    last: boolean;
+    expanded?: boolean;
+    indent?: number;
+    offset?: number;
+}): import("react").JSX.Element;

package/components/TreeGuides.js

@@ -0,0 +1,39 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import s from "./TreeGuides.module.css";
+function TreeGuides({
+  depth,
+  continuations,
+  last,
+  expanded,
+  indent = 24,
+  offset = 12
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: s.guides,
+      style: {
+        "--tree-indent": indent + "px",
+        "--tree-offset": offset + "px"
+      },
+      children: [
+        continuations.map(
+          (visible, i) => visible && /* @__PURE__ */ jsx("i", { className: s.line, style: { left: i * indent } }, i)
+        ),
+        depth > 0 && /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: s.elbow,
+            "data-last": last,
+            style: { left: (depth - 1) * indent }
+          }
+        ),
+        expanded && /* @__PURE__ */ jsx("i", { className: s.stem, style: { left: depth * indent } })
+      ]
+    }
+  );
+}
+export {
+  TreeGuides
+};

package/components/TreeGuides.module.css

@@ -0,0 +1,45 @@
+.guides {
+  position: absolute;
+  inset-block: 0;
+  left: var(--tree-offset);
+  width: 0;
+  pointer-events: none;
+  color: var(--line);
+}
+.line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-left: 1px solid currentColor;
+}
+.elbow {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--tree-indent);
+}
+.elbow::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 50%;
+  left: 0;
+  right: var(--tree-elbow-gap, 0px);
+  border-left: 1px solid currentColor;
+  border-bottom: 1px solid currentColor;
+  border-bottom-left-radius: 8px;
+}
+.elbow:not([data-last="true"])::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid currentColor;
+}
+.stem {
+  position: absolute;
+  top: calc(50% + var(--tree-stem-inset, 0px));
+  bottom: 0;
+  border-left: 1px solid currentColor;
+}

package/components/TreeSelect.d.ts

@@ -0,0 +1,26 @@
+import { type ReactNode } from "react";
+import { type FieldOptions } from "./field";
+import { type HierarchyLoader, type HierarchyOption } from "./hierarchy";
+type Base = FieldOptions & {
+    options: HierarchyOption[];
+    label: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    placeholder?: string;
+    loadChildren?: HierarchyLoader;
+    defaultExpanded?: string[];
+    variant?: "tree" | "category";
+    icon?: ReactNode;
+};
+export type TreeSelectProps = Base & ({
+    multiple?: false;
+    value: string;
+    onChange(value: string): void;
+} | {
+    multiple: true;
+    value: string[];
+    onChange(value: string[]): void;
+    checkStrictly?: boolean;
+});
+export declare function TreeSelect(props: TreeSelectProps): import("react").JSX.Element;
+export {};

package/components/TreeSelect.js

@@ -0,0 +1,337 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronDown, Minus } from "lucide-react";
+import { SelectTrigger } from "./SelectTrigger.js";
+import { Popover } from "./Popover.js";
+import { MenuItem } from "./MenuItem.js";
+import { SearchField } from "./SearchField.js";
+import { Spinner } from "./Spinner.js";
+import { Button } from "./Button.js";
+import { usePopover } from "./usePopover.js";
+import { fieldTriggerProps, useFieldControl } from "./field.js";
+import { useHierarchy } from "./useHierarchy.js";
+import {
+  hierarchyMatches
+} from "./hierarchy.js";
+import s from "./HierarchyPicker.module.css";
+import { Badge } from "./Badge.js";
+import { TreeGuides } from "./TreeGuides.js";
+function TreeSelect(props) {
+  const {
+    options,
+    label,
+    searchable = true,
+    clearable = true,
+    placeholder = "\u8BF7\u9009\u62E9",
+    loadChildren,
+    defaultExpanded = [],
+    variant = "tree"
+  } = props;
+  const field = useFieldControl(props), pop = usePopover(field.disabled || field.readOnly), id = useId(), list = useRef(null), [query, setQuery] = useState(""), [expanded, setExpanded] = useState(new Set(defaultExpanded)), [focused, setFocused] = useState("");
+  const data = useHierarchy(options, loadChildren), selected = props.multiple ? props.value : props.value ? [props.value] : [];
+  const rows = useMemo(() => {
+    const matches = query.trim() ? new Set(
+      [...data.entries.values()].filter((entry) => hierarchyMatches(entry, query)).flatMap((entry) => entry.path.map((node) => node.value))
+    ) : null;
+    return [...data.entries.values()].filter(
+      (entry) => (!matches || matches.has(entry.node.value)) && (query.trim() || entry.path.slice(0, -1).every((node) => expanded.has(node.value)))
+    );
+  }, [data.entries, query, expanded]);
+  const siblings = (entry) => entry.parent ? data.children(data.entries.get(entry.parent).node) || [] : options;
+  const last = (entry) => siblings(entry).at(-1)?.value === entry.node.value;
+  const close = pop.closeAndFocus;
+  const show = () => {
+    if (field.disabled || field.readOnly) return;
+    if (pop.open) {
+      pop.close();
+      return;
+    }
+    setQuery("");
+    setExpanded(
+      (old) => /* @__PURE__ */ new Set([
+        ...old,
+        ...selected.flatMap(
+          (value) => data.entries.get(value)?.path.slice(0, -1).map((n) => n.value) || []
+        )
+      ])
+    );
+    pop.show();
+  };
+  const focus = (value) => {
+    setFocused(value);
+    list.current?.querySelectorAll('[role="treeitem"]').forEach((n) => {
+      if (n.dataset.value === value) n.focus({ preventScroll: true });
+    });
+  };
+  const toggleExpand = (entry) => {
+    if (entry.disabled || !entry.branch) return;
+    setExpanded((old) => {
+      const next = new Set(old);
+      next.has(entry.node.value) ? next.delete(entry.node.value) : next.add(entry.node.value);
+      return next;
+    });
+    if (!expanded.has(entry.node.value)) void data.load(entry.node);
+  };
+  const selectedSet = new Set(selected);
+  const leafMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of data.entries.values())
+      if (!entry.disabled && !entry.branch && entry.node.selectable !== false)
+        for (const node of entry.path) {
+          const values = map.get(node.value) || [];
+          values.push(entry.node.value);
+          map.set(node.value, values);
+        }
+    return map;
+  }, [data.entries]);
+  const selection = (entry) => {
+    if (!props.multiple) return selectedSet.has(entry.node.value);
+    if (entry.disabled) return selectedSet.has(entry.node.value);
+    if (props.checkStrictly) return selectedSet.has(entry.node.value);
+    const leaves = leafMap.get(entry.node.value) || [], count = leaves.filter((value) => selectedSet.has(value)).length;
+    return count && count < leaves.length ? "mixed" : !!leaves.length && count === leaves.length;
+  };
+  const choose = (entry) => {
+    if (field.disabled || field.readOnly || entry.disabled) return;
+    if (entry.node.selectable === false || props.multiple && !props.checkStrictly && entry.branch && data.children(entry.node) === void 0) {
+      toggleExpand(entry);
+      return;
+    }
+    if (!props.multiple) {
+      props.onChange(entry.node.value);
+      close();
+      return;
+    }
+    const targets = props.checkStrictly ? [entry.node.value] : leafMap.get(entry.node.value) || [];
+    if (!targets.length) return;
+    const remove = targets.every((value) => selectedSet.has(value));
+    props.onChange(
+      remove ? selected.filter((value) => !targets.includes(value)) : [.../* @__PURE__ */ new Set([...selected, ...targets])]
+    );
+  };
+  const first = rows.find((entry) => !entry.disabled)?.node.value;
+  const active = rows.some(
+    (entry) => entry.node.value === focused && !entry.disabled
+  ) ? focused : first;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SelectTrigger,
+      {
+        ...fieldTriggerProps(field),
+        ref: pop.anchor,
+        expanded: pop.open,
+        icon: props.icon,
+        className: s.trigger,
+        "aria-haspopup": "dialog",
+        "aria-controls": id,
+        onClick: show,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            show();
+          }
+        },
+        children: selected.length ? props.multiple ? `\u5DF2\u9009\u62E9 ${selected.length} \u9879` : data.entries.get(selected[0])?.path.map((n) => n.label).join(" / ") || selected[0] : placeholder
+      }
+    ),
+    field.name && (props.multiple ? selected.map((value) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
+      },
+      value
+    )) : /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value: props.value,
+        disabled: field.disabled
+      }
+    )),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label,
+        id,
+        width: 340,
+        children: [
+          searchable && /* @__PURE__ */ jsx("div", { className: s.search, children: /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              label: `\u641C\u7D22${label}`,
+              placeholder: "\u641C\u7D22\u540D\u79F0\u6216\u8DEF\u5F84",
+              value: query,
+              onChange: setQuery,
+              onKeyDown: (event) => {
+                if (event.key === "ArrowDown") {
+                  event.preventDefault();
+                  if (first) focus(first);
+                }
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: list,
+              role: "tree",
+              "aria-label": `${label}\u9009\u9879`,
+              "aria-multiselectable": props.multiple || void 0,
+              className: s.tree,
+              onKeyDown: (event) => {
+                if (event.target instanceof HTMLButtonElement) return;
+                const available = rows.filter((entry2) => !entry2.disabled), current = available.findIndex(
+                  (entry2) => entry2.node.value === focused
+                ), entry = available[current];
+                let next;
+                if (event.key === "ArrowDown")
+                  next = available[Math.min(available.length - 1, current + 1)];
+                else if (event.key === "ArrowUp")
+                  next = available[Math.max(0, current - 1)];
+                else if (event.key === "Home") next = available[0];
+                else if (event.key === "End") next = available.at(-1);
+                else if (entry && event.key === "ArrowRight") {
+                  if (entry.branch && !expanded.has(entry.node.value))
+                    toggleExpand(entry);
+                  else
+                    next = available.find(
+                      (item) => item.parent === entry.node.value
+                    );
+                } else if (entry && event.key === "ArrowLeft") {
+                  if (expanded.has(entry.node.value)) toggleExpand(entry);
+                  else
+                    next = available.find(
+                      (item) => item.node.value === entry.parent
+                    );
+                } else if (entry && (event.key === "Enter" || event.key === " "))
+                  choose(entry);
+                else return;
+                event.preventDefault();
+                event.stopPropagation();
+                if (next) focus(next.node.value);
+              },
+              children: [
+                !rows.length && /* @__PURE__ */ jsx("div", { role: "status", className: s.empty, children: "\u6CA1\u6709\u5339\u914D\u9009\u9879" }),
+                rows.map((entry) => {
+                  const state = selection(entry), isExpanded = !!query.trim() || expanded.has(entry.node.value), error = data.error(entry.node);
+                  return /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(
+                      MenuItem,
+                      {
+                        as: "div",
+                        role: "treeitem",
+                        "aria-label": entry.node.label,
+                        "aria-level": entry.path.length,
+                        "aria-expanded": entry.branch ? isExpanded : void 0,
+                        "aria-checked": props.multiple ? state : void 0,
+                        "aria-selected": !props.multiple && !!state,
+                        "aria-disabled": entry.disabled || void 0,
+                        tabIndex: entry.node.value === active ? 0 : -1,
+                        "data-value": entry.node.value,
+                        className: `${s.row} ${s.treeRow} ${variant === "category" ? s.categoryRow : ""}`,
+                        "data-branch": entry.branch,
+                        style: { "--level": entry.path.length - 1 },
+                        label: entry.node.label,
+                        description: query.trim() ? entry.path.slice(0, -1).map((n) => n.label).join(" / ") : void 0,
+                        icon: entry.node.icon,
+                        meta: variant === "category" && entry.branch ? /* @__PURE__ */ jsx(Badge, { children: entry.node.count ?? data.children(entry.node)?.length ?? 0 }) : void 0,
+                        selected: state === true,
+                        selection: props.multiple ? "checkbox" : "check",
+                        disabled: entry.disabled,
+                        trailing: state === "mixed" ? /* @__PURE__ */ jsx("span", { className: s.mixed, children: /* @__PURE__ */ jsx(Minus, {}) }) : void 0,
+                        onFocus: () => setFocused(entry.node.value),
+                        onClick: () => {
+                          if (entry.disabled) return;
+                          focus(entry.node.value);
+                          choose(entry);
+                        },
+                        prefix: /* @__PURE__ */ jsxs(Fragment, { children: [
+                          variant === "category" && /* @__PURE__ */ jsx(
+                            TreeGuides,
+                            {
+                              depth: entry.path.length - 1,
+                              indent: 18,
+                              offset: 20,
+                              last: last(entry),
+                              expanded: entry.branch && isExpanded,
+                              continuations: entry.path.slice(1, -1).map(
+                                (node) => !last(data.entries.get(node.value))
+                              )
+                            }
+                          ),
+                          entry.branch ? /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              tabIndex: -1,
+                              className: s.expander,
+                              "data-expanded": isExpanded,
+                              "aria-label": `${isExpanded ? "\u6298\u53E0" : "\u5C55\u5F00"} ${entry.node.label}`,
+                              disabled: entry.disabled || data.loading.has(entry.node.value),
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                focus(entry.node.value);
+                                toggleExpand(entry);
+                              },
+                              children: data.loading.has(entry.node.value) ? /* @__PURE__ */ jsx(Spinner, { size: 12, decorative: true }) : /* @__PURE__ */ jsx(ChevronDown, {})
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: s.spacer })
+                        ] })
+                      }
+                    ),
+                    isExpanded && error && /* @__PURE__ */ jsxs("div", { role: "alert", className: s.error, children: [
+                      /* @__PURE__ */ jsx("span", { children: error }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "ghost",
+                          onClick: () => void data.load(entry.node),
+                          children: "\u91CD\u8BD5"
+                        }
+                      )
+                    ] })
+                  ] }, entry.node.value);
+                })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: s.footer, children: [
+            /* @__PURE__ */ jsx("span", { children: props.multiple ? `${selected.length} \u9879\u5DF2\u9009` : "" }),
+            /* @__PURE__ */ jsxs("div", { className: s.footerActions, children: [
+              clearable && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  size: "small",
+                  variant: "ghost",
+                  disabled: !selected.length,
+                  onClick: () => {
+                    if (props.multiple) props.onChange([]);
+                    else props.onChange("");
+                  },
+                  children: "\u6E05\u7A7A"
+                }
+              ),
+              props.multiple && /* @__PURE__ */ jsx(Button, { size: "small", onClick: close, children: "\u5B8C\u6210" })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TreeSelect
+};