@tensor_1/react 2.10.0 → 2.12.0

package/dist/components/Tree.js

@@ -152,13 +152,6 @@ function Tree({
         setFocusedId(id);
         break;
       default:
-        if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-          const act = treeNav(flat, id, e.key);
-          if (act.focusId !== void 0) {
-            e.preventDefault();
-            focusItem(rootRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(act.focusId)}"]`));
-          }
-        }
         break;
     }
   };
@@ -195,10 +188,8 @@ function VirtualTreeView({
   const scrollRef = useRef(null);
   const [scrollTop, setScrollTop] = useState(0);
   const pendingFocus = useRef(false);
-  const hadFocus = useRef(false);
   const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
   const rows = flat.slice(win.start, win.end);
-  const windowHasTabbable = tabbableId != null && rows.some((f) => f.node.id === tabbableId);
   useEffect(() => {
     if (!pendingFocus.current || focusedId == null) return;
     const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
@@ -207,11 +198,6 @@ function VirtualTreeView({
       pendingFocus.current = false;
     }
   }, [focusedId, win.start, win.end]);
-  useEffect(() => {
-    if (!hadFocus.current || pendingFocus.current) return;
-    const active = document.activeElement;
-    if (active === document.body || active == null) scrollRef.current?.focus({ preventScroll: true });
-  });
   const moveTo = (id) => {
     const i = flat.findIndex((f) => f.node.id === id);
     if (i < 0) return;
@@ -227,7 +213,6 @@ function VirtualTreeView({
     setFocusedId(id);
   };
   const onKeyDown = (e) => {
-    if (e.key.length === 1 && (e.ctrlKey || e.metaKey || e.altKey)) return;
     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;
@@ -248,20 +233,13 @@ function VirtualTreeView({
       ref: scrollRef,
       className: cx("uix-tree", "uix-tree--virtual", className),
       role: "tree",
-      tabIndex: -1,
       style: { maxHeight, overflow: "auto" },
       onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
       onKeyDown,
-      onFocus: () => {
-        hadFocus.current = true;
-      },
-      onBlur: (e) => {
-        if (!e.currentTarget.contains(e.relatedTarget)) hadFocus.current = false;
-      },
       ...props,
       children: [
-        win.padTop > 0 && /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padTop } }),
-        rows.map((f, i) => {
+        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",
@@ -273,7 +251,7 @@ function VirtualTreeView({
               "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 || !windowHasTabbable && i === 0 ? 0 : -1,
+              tabIndex: tabbableId === f.node.id ? 0 : -1,
               className: "uix-tree__item",
               onFocus: (e) => {
                 if (e.target === e.currentTarget) setFocusedId(f.node.id);
@@ -293,7 +271,7 @@ function VirtualTreeView({
             f.node.id
           );
         }),
-        win.padBottom > 0 && /* @__PURE__ */ jsx("li", { role: "presentation", "aria-hidden": "true", style: { height: win.padBottom } })
+        win.padBottom > 0 && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", style: { height: win.padBottom } })
       ]
     }
   );

package/dist/hooks/useDialog.d.ts

@@ -1,3 +1,3 @@
-declare function useDialog(open: boolean, onClose?: () => void): React.RefObject<HTMLDialogElement>;
+declare function useDialog(open: boolean): React.RefObject<HTMLDialogElement>;
 
 export { useDialog };

package/dist/hooks/useDialog.js

@@ -30,10 +30,8 @@ function unlockBodyScroll() {
     saved = null;
   }
 }
-function useDialog(open, onClose) {
+function useDialog(open) {
   const ref = useRef(null);
-  const onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
   useEffect(() => {
     const el = ref.current;
     if (!el || !open) {
@@ -42,21 +40,8 @@ function useDialog(open, onClose) {
     }
     if (!el.open) el.showModal();
     lockBodyScroll();
-    let locked = true;
-    const handleClose = () => {
-      if (locked) {
-        locked = false;
-        unlockBodyScroll();
-      }
-      onCloseRef.current?.();
-    };
-    el.addEventListener("close", handleClose);
     return () => {
-      el.removeEventListener("close", handleClose);
-      if (locked) {
-        locked = false;
-        unlockBodyScroll();
-      }
+      unlockBodyScroll();
       if (el.open) el.close();
     };
   }, [open]);

package/dist/hooks/useTable.d.ts

@@ -21,11 +21,6 @@ interface UseTableResult<T> {
     pinned: ReadonlySet<string>;
     /** header select-all tri-state over the current derived rows. */
     selectAll: SelectAllState;
-    /**
-     * Screen-reader status text reflecting the latest change — "Sorted by {field}, {dir}",
-     * "{n} results" (filter/search), "{n} selected". Pass to `<TableWrap announcement>` (UIX-A11Y-2).
-     */
-    announcement: string;
     /** cycle a column's sort; pass additive (⇧-click) to keep it as a secondary key. */
     toggleSort: (field: string, additive?: boolean) => void;
     setSort: (keys: SortKey[]) => void;

package/dist/hooks/useTable.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import {
   multiSort,
   toggleSort,
@@ -19,39 +19,25 @@ function useTable(data, options = {}) {
   const [query, setQuery] = useState(() => options.initialQuery ?? "");
   const [selected, setSelected] = useState(() => /* @__PURE__ */ new Set());
   const [pinned, setPinned] = useState(() => new Set(options.initialPinned ?? []));
-  const rows = useMemo(() => {
-    const filtered = applyFilters(data, filters);
-    const searched = searchRows(filtered, query, searchFields);
-    const sorted = multiSort(searched, sort);
-    return mergePinned(data, sorted, pinned, idField);
-  }, [data, filters, query, searchFields, sort, pinned, idField]);
+  const visibleRows = useMemo(() => {
+    const filtered = filters.length ? applyFilters(data, filters) : data;
+    const searched = query.trim() ? searchRows(filtered, query, searchFields) : filtered;
+    return sort.length ? multiSort(searched, sort) : searched;
+  }, [data, filters, query, searchFields, sort]);
+  const rows = useMemo(
+    () => pinned.size ? mergePinned(data, visibleRows, pinned, idField) : visibleRows.slice(),
+    [data, visibleRows, pinned, idField]
+  );
   const pageIds = useMemo(() => rows.map((r) => String(r[idField])), [rows, idField]);
   const selectAll = selectAllState(selected, pageIds);
   const doToggleSort = useCallback((field, additive = false) => {
     setSort((keys) => toggleSort(keys, field, additive));
   }, []);
   const toggleRow = useCallback((id) => setSelected((s) => toggleId(s, id)), []);
+  const isSelected = useCallback((id) => selected.has(id), [selected]);
   const toggleAllRows = useCallback(() => setSelected((s) => togglePage(s, pageIds)), [pageIds]);
   const clearSelection = useCallback(() => setSelected(/* @__PURE__ */ new Set()), []);
   const togglePin = useCallback((id) => setPinned((s) => toggleId(s, id)), []);
-  const [announcement, setAnnouncement] = useState("");
-  const mounted = useRef(false);
-  useEffect(() => {
-    if (!mounted.current) return;
-    const key = sort[0];
-    setAnnouncement(key ? `Sorted by ${key.field}, ${key.dir}` : "Sort cleared");
-  }, [sort]);
-  useEffect(() => {
-    if (!mounted.current) return;
-    setAnnouncement(`${rows.length} result${rows.length === 1 ? "" : "s"}`);
-  }, [filters, query]);
-  useEffect(() => {
-    if (!mounted.current) return;
-    setAnnouncement(`${selected.size} selected`);
-  }, [selected]);
-  useEffect(() => {
-    mounted.current = true;
-  }, []);
   const view = useMemo(() => ({ sort, filters, q: query }), [sort, filters, query]);
   const viewQueryString = useMemo(() => serializeView(view), [view]);
   const applyView = useCallback((queryString) => {
@@ -68,12 +54,11 @@ function useTable(data, options = {}) {
     selected,
     pinned,
     selectAll,
-    announcement,
     toggleSort: doToggleSort,
     setSort,
     setFilters,
     setQuery,
-    isSelected: (id) => selected.has(id),
+    isSelected,
     toggleRow,
     toggleAllRows,
     clearSelection,

package/dist/hooks/useVirtualRows.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+
+interface UseVirtualRowsOptions {
+    /** Fixed rendered row height in pixels. */
+    rowHeight: number;
+    /** Rows rendered beyond each viewport edge. Default: 6. */
+    overscan?: number;
+    /** Render all rows at or below this count. Default: 100. */
+    threshold?: number;
+}
+interface UseVirtualRowsResult<T> {
+    /** Attach to the scrolling TableWrap. */
+    containerRef: RefObject<HTMLDivElement>;
+    rows: readonly T[];
+    startIndex: number;
+    padTop: number;
+    padBottom: number;
+    totalHeight: number;
+    virtualized: boolean;
+}
+/**
+ * Owns scroll/resize observation and exposes the small visible row window.
+ * Consumers render padTop/padBottom spacer rows inside their existing tbody.
+ */
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+
+export { type UseVirtualRowsOptions, type UseVirtualRowsResult, useVirtualRows };

package/dist/hooks/useVirtualRows.js

@@ -0,0 +1,50 @@
+"use client";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { shouldVirtualize, virtualWindow } from "../table-engine.js";
+function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100 }) {
+  const containerRef = useRef(null);
+  const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 });
+  useLayoutEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    let frame = 0;
+    const commitMeasurement = () => {
+      const next = { scrollTop: element.scrollTop, height: element.clientHeight };
+      setViewport((current) => current.scrollTop === next.scrollTop && current.height === next.height ? current : next);
+    };
+    const measure = () => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        commitMeasurement();
+      });
+    };
+    commitMeasurement();
+    element.addEventListener("scroll", measure, { passive: true });
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => {
+      element.removeEventListener("scroll", measure);
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, []);
+  const enabled = viewport.height > 0 && shouldVirtualize(rows.length, threshold);
+  const window = useMemo(
+    () => enabled ? virtualWindow(viewport.scrollTop, viewport.height, rowHeight, rows.length, overscan) : { start: 0, end: rows.length, padTop: 0, padBottom: 0, total: rows.length * rowHeight },
+    [enabled, overscan, rowHeight, rows.length, viewport.height, viewport.scrollTop]
+  );
+  const visibleRows = useMemo(() => rows.slice(window.start, window.end), [rows, window.start, window.end]);
+  return {
+    containerRef,
+    rows: visibleRows,
+    startIndex: window.start,
+    padTop: window.padTop,
+    padBottom: window.padBottom,
+    totalHeight: window.total,
+    virtualized: enabled
+  };
+}
+export {
+  useVirtualRows
+};