@tensor_1/react 2.6.0 → 2.8.0

package/dist/components/Tree.js

@@ -1,47 +1,76 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
+import { flattenTree, treeNav } from "../tree-model.js";
+import { virtualWindow, shouldVirtualize } from "../table-engine.js";
 const ChevronIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
-function TreeNode({ node, expanded, selected, onToggle, onSelect, level = 0 }) {
+function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1 }) {
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
   const isExpanded = expanded.has(node.id);
-  return /* @__PURE__ */ jsxs("li", { children: [
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: "uix-tree__row",
-        "aria-expanded": hasChildren ? isExpanded : void 0,
-        "aria-selected": selected === node.id,
-        onClick: () => {
-          if (hasChildren) onToggle(node.id);
-          onSelect?.(node.id);
-        },
-        children: [
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      role: "treeitem",
+      "aria-level": level,
+      "aria-expanded": hasChildren ? isExpanded : void 0,
+      "aria-selected": selectable ? selected === node.id : void 0,
+      "data-id": node.id,
+      tabIndex: tabbableId === node.id ? 0 : -1,
+      className: "uix-tree__item",
+      onFocus: (e) => {
+        if (e.target === e.currentTarget) onFocusNode(node.id);
+      },
+      onClick: (e) => {
+        e.stopPropagation();
+        if (hasChildren) onToggle(node.id);
+        onSelect?.(node.id);
+        onFocusNode(node.id);
+      },
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "uix-tree__row", children: [
           /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ jsx(ChevronIcon, {}) }),
           node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: node.icon }),
-          node.label
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { children: node.children.map((child) => /* @__PURE__ */ jsx(
-      TreeNode,
-      {
-        node: child,
-        expanded,
-        selected,
-        onToggle,
-        onSelect,
-        level: level + 1
-      },
-      child.id
-    )) })
-  ] });
+          /* @__PURE__ */ jsx("span", { className: "uix-tree__label", children: node.label })
+        ] }),
+        hasChildren && isExpanded && /* @__PURE__ */ jsx("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ jsx(
+          TreeNode,
+          {
+            node: child,
+            expanded,
+            selected,
+            selectable,
+            tabbableId,
+            onToggle,
+            onSelect,
+            onFocusNode,
+            level: level + 1
+          },
+          child.id
+        )) })
+      ]
+    }
+  );
 }
-function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected, onToggle, onSelect, className, ...props }) {
+function Tree({
+  nodes,
+  expanded: controlledExpanded,
+  defaultExpanded,
+  selected,
+  onToggle,
+  onSelect,
+  virtualize,
+  rowHeight = 32,
+  maxHeight = 384,
+  className,
+  ...props
+}) {
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded ?? /* @__PURE__ */ new Set());
   const expanded = controlledExpanded ?? internalExpanded;
-  function handleToggle(id) {
+  const rootRef = useRef(null);
+  const [focusedId, setFocusedId] = useState(void 0);
+  const selectable = selected !== void 0 || onSelect != null;
+  const handleToggle = useCallback((id) => {
     if (!controlledExpanded) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
@@ -51,19 +80,202 @@ function Tree({ nodes, expanded: controlledExpanded, defaultExpanded, selected,
       });
     }
     onToggle?.(id);
+  }, [controlledExpanded, onToggle]);
+  const flat = useMemo(() => flattenTree(nodes, expanded), [nodes, expanded]);
+  const useVirtual = virtualize ?? shouldVirtualize(flat.length);
+  const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
+  if (useVirtual) {
+    return /* @__PURE__ */ jsx(
+      VirtualTreeView,
+      {
+        flat,
+        rowHeight,
+        maxHeight,
+        selectable,
+        selected,
+        tabbableId,
+        onToggle: handleToggle,
+        onSelect,
+        focusedId,
+        setFocusedId,
+        className,
+        ...props
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("ul", { className: cx("uix-tree", className), role: "tree", ...props, children: nodes.map((node) => /* @__PURE__ */ jsx(
+  const treeItems = () => Array.from(rootRef.current?.querySelectorAll('[role="treeitem"]') ?? []);
+  const focusItem = (el) => {
+    if (el) {
+      el.focus();
+      setFocusedId(el.dataset.id);
+    }
+  };
+  const onKeyDown = (e) => {
+    const cur = e.target.closest('[role="treeitem"]');
+    if (!cur || !rootRef.current?.contains(cur)) return;
+    const list = treeItems();
+    const idx = list.indexOf(cur);
+    const id = cur.dataset.id;
+    const exp = cur.getAttribute("aria-expanded");
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusItem(list[Math.min(idx + 1, list.length - 1)]);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        focusItem(list[Math.max(idx - 1, 0)]);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusItem(list[0]);
+        break;
+      case "End":
+        e.preventDefault();
+        focusItem(list[list.length - 1]);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        if (exp === "false") handleToggle(id);
+        else if (exp === "true") focusItem(cur.querySelector(':scope > [role="group"] > [role="treeitem"]'));
+        break;
+      case "ArrowLeft":
+        e.preventDefault();
+        if (exp === "true") handleToggle(id);
+        else focusItem(cur.parentElement?.closest('[role="treeitem"]'));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (exp !== null) handleToggle(id);
+        onSelect?.(id);
+        setFocusedId(id);
+        break;
+      default:
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx("ul", { ref: rootRef, className: cx("uix-tree", className), role: "tree", onKeyDown, ...props, children: nodes.map((node) => /* @__PURE__ */ jsx(
     TreeNode,
     {
       node,
       expanded,
       selected,
+      selectable,
+      tabbableId,
       onToggle: handleToggle,
-      onSelect
+      onSelect,
+      onFocusNode: setFocusedId,
+      level: 1
     },
     node.id
   )) });
 }
+function VirtualTreeView({
+  flat,
+  rowHeight,
+  maxHeight,
+  selectable,
+  selected,
+  tabbableId,
+  onToggle,
+  onSelect,
+  focusedId,
+  setFocusedId,
+  className,
+  ...props
+}) {
+  const scrollRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const pendingFocus = useRef(false);
+  const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
+  const rows = flat.slice(win.start, win.end);
+  useEffect(() => {
+    if (!pendingFocus.current || focusedId == null) return;
+    const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
+    if (el) {
+      el.focus();
+      pendingFocus.current = false;
+    }
+  }, [focusedId, win.start, win.end]);
+  const moveTo = (id) => {
+    const i = flat.findIndex((f) => f.node.id === id);
+    if (i < 0) return;
+    const top = i * rowHeight;
+    let next = scrollTop;
+    if (top < scrollTop) next = top;
+    else if (top + rowHeight > scrollTop + maxHeight) next = top + rowHeight - maxHeight;
+    if (next !== scrollTop) {
+      if (scrollRef.current) scrollRef.current.scrollTop = next;
+      setScrollTop(next);
+    }
+    pendingFocus.current = true;
+    setFocusedId(id);
+  };
+  const onKeyDown = (e) => {
+    const curId = e.target.closest('[role="treeitem"]')?.dataset.id ?? focusedId;
+    const act = treeNav(flat, curId, e.key);
+    if (act.focusId === void 0 && act.toggleId === void 0 && act.selectId === void 0) return;
+    e.preventDefault();
+    if (act.toggleId !== void 0) onToggle(act.toggleId);
+    if (act.selectId !== void 0) {
+      onSelect?.(act.selectId);
+      if (act.focusId === void 0) {
+        pendingFocus.current = true;
+        setFocusedId(act.selectId);
+      }
+    }
+    if (act.focusId !== void 0) moveTo(act.focusId);
+  };
+  return /* @__PURE__ */ jsxs(
+    "ul",
+    {
+      ref: scrollRef,
+      className: cx("uix-tree", "uix-tree--virtual", className),
+      role: "tree",
+      style: { maxHeight, overflow: "auto" },
+      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+      onKeyDown,
+      ...props,
+      children: [
+        win.padTop > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: win.padTop } }),
+        rows.map((f) => {
+          const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "treeitem",
+              "aria-level": f.level,
+              "aria-setsize": f.setsize,
+              "aria-posinset": f.posinset,
+              "aria-expanded": f.hasChildren ? f.isExpanded : void 0,
+              "aria-selected": selectable ? selected === f.node.id : void 0,
+              "data-id": f.node.id,
+              tabIndex: tabbableId === f.node.id ? 0 : -1,
+              className: "uix-tree__item",
+              onFocus: (e) => {
+                if (e.target === e.currentTarget) setFocusedId(f.node.id);
+              },
+              onClick: (e) => {
+                e.stopPropagation();
+                if (f.hasChildren) onToggle(f.node.id);
+                onSelect?.(f.node.id);
+                setFocusedId(f.node.id);
+              },
+              children: /* @__PURE__ */ jsxs("span", { className: "uix-tree__row", style: rowStyle, children: [
+                /* @__PURE__ */ jsx("span", { className: "uix-tree__toggle", children: f.hasChildren && /* @__PURE__ */ jsx(ChevronIcon, {}) }),
+                f.node.icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: f.node.icon }),
+                /* @__PURE__ */ jsx("span", { className: "uix-tree__label", children: f.node.label })
+              ] })
+            },
+            f.node.id
+          );
+        }),
+        win.padBottom > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: win.padBottom } })
+      ]
+    }
+  );
+}
 export {
   Tree
 };

package/dist/hooks/useAnchoredPosition.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+import { Placement } from '../overlay-position.js';
+
+interface UseAnchoredPositionOptions {
+    /** Reposition while true, and (re)attach scroll/resize listeners. */
+    open: boolean;
+    placement?: Placement;
+    offset?: number;
+    padding?: number;
+}
+/**
+ * Position a floating element (a native-popover overlay) against an anchor with
+ * cross-browser flip/shift — the DOM half of the overlay-position engine (UIX-FIX-02).
+ *
+ * Measures both elements with getBoundingClientRect, applies `position: fixed` + left/top
+ * (overriding the popover's default centered `inset:0; margin:auto`), and keeps the overlay
+ * glued to its anchor on scroll/resize while `open`. Returns a `reposition` fn for callers
+ * that want to nudge it manually (e.g. right when a native popover's `toggle` fires).
+ */
+declare function useAnchoredPosition(anchor: RefObject<HTMLElement | null> | HTMLElement | null | undefined, floatingRef: RefObject<HTMLElement | null>, { open, placement, offset, padding }: UseAnchoredPositionOptions): () => void;
+
+export { type UseAnchoredPositionOptions, useAnchoredPosition };

package/dist/hooks/useAnchoredPosition.js

@@ -0,0 +1,44 @@
+"use client";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { computePosition } from "../overlay-position.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const resolve = (a) => a && typeof a === "object" && "current" in a ? a.current : a ?? null;
+function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
+  const opts = useRef({ placement, offset, padding });
+  opts.current = { placement, offset, padding };
+  const reposition = useCallback(() => {
+    const anchorEl = resolve(anchor);
+    const floating = floatingRef.current;
+    if (!anchorEl || !floating) return;
+    const s = floating.style;
+    s.position = "fixed";
+    s.inset = "auto";
+    s.margin = "0";
+    const a = anchorEl.getBoundingClientRect();
+    const { placement: p, offset: o, padding: pad } = opts.current;
+    const pos = computePosition(
+      { x: a.x, y: a.y, width: a.width, height: a.height },
+      { width: floating.offsetWidth, height: floating.offsetHeight },
+      { width: window.innerWidth, height: window.innerHeight },
+      { placement: p, offset: o, padding: pad }
+    );
+    s.left = `${Math.round(pos.x)}px`;
+    s.top = `${Math.round(pos.y)}px`;
+    floating.dataset.placement = pos.placement;
+  }, [anchor, floatingRef]);
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    reposition();
+    const onScroll = () => reposition();
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [open, reposition]);
+  return reposition;
+}
+export {
+  useAnchoredPosition
+};

package/dist/hooks/useDialog.js

@@ -1,16 +1,47 @@
 "use client";
 import { useRef, useEffect } from "react";
+let lockCount = 0;
+let saved = null;
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (++lockCount > 1) return;
+  const el = document.scrollingElement ?? document.documentElement;
+  const scrollbarW = window.innerWidth - document.documentElement.clientWidth;
+  saved = {
+    el,
+    overflow: el.style.overflow,
+    paddingRight: el.style.paddingRight,
+    overscroll: el.style.overscrollBehavior
+  };
+  el.style.overflow = "hidden";
+  if (scrollbarW > 0) {
+    const current = parseFloat(getComputedStyle(el).paddingRight) || 0;
+    el.style.paddingRight = `${current + scrollbarW}px`;
+  }
+  el.style.overscrollBehavior = "contain";
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || lockCount === 0) return;
+  if (--lockCount > 0) return;
+  if (saved) {
+    saved.el.style.overflow = saved.overflow;
+    saved.el.style.paddingRight = saved.paddingRight;
+    saved.el.style.overscrollBehavior = saved.overscroll;
+    saved = null;
+  }
+}
 function useDialog(open) {
   const ref = useRef(null);
   useEffect(() => {
     const el = ref.current;
-    if (!el) return;
-    if (open) {
-      if (!el.open) el.showModal();
-    } else {
-      if (el.open) el.close();
+    if (!el || !open) {
+      if (el && el.open) el.close();
+      return;
     }
+    if (!el.open) el.showModal();
+    lockBodyScroll();
     return () => {
+      unlockBodyScroll();
       if (el.open) el.close();
     };
   }, [open]);