@tensor_1/react 2.47.0 → 2.49.0

package/dist/hooks/useVirtualRows.d.ts

@@ -1,8 +1,22 @@
 import { RefObject } from 'react';
 
 interface UseVirtualRowsOptions {
-    /** Fixed rendered row height in pixels. */
+    /**
+     * Rendered row height in pixels. With `measureRows` it is the estimate for the first paint,
+     * until the mounted rows have been measured.
+     */
     rowHeight: number;
+    /**
+     * A selector for the mounted data rows inside the container, e.g. `'tbody > tr[data-row]'`
+     * (HAR-1829). With it the hook sizes its spacers and window from the rows' real pitch (their
+     * mean `offsetHeight`) instead of trusting `rowHeight`, which only has to be close: a row's
+     * height comes from CSS and content (kit padding, a second line, density), and a wrong number
+     * gives a short scrollbar and a window that drifts away from the rows on screen. It measures
+     * when windowing starts, when `rowHeight` changes (a density switch) and when the container
+     * resizes, never while scrolling, so the spacers do not move under the reader. Spacer rows
+     * must not match it.
+     */
+    measureRows?: string;
     /** Rows rendered beyond each viewport edge. Default: 6. */
     overscan?: number;
     /**
@@ -30,6 +44,11 @@ interface UseVirtualRowsResult<T> {
     padBottom: number;
     totalHeight: number;
     virtualized: boolean;
+    /**
+     * The row height in use: the measured pitch with `measureRows`, else the `rowHeight` option.
+     * Scroll a keyboard-focused row into view with it (`index * rowHeight`).
+     */
+    rowHeight: number;
 }
 /**
  * Owns scroll/resize observation and exposes the small visible row window.
@@ -37,6 +56,6 @@ interface UseVirtualRowsResult<T> {
  * When the row count shrinks under a large scroll position the window is clamped to the new
  * count in the same render, so `padTop` never exceeds the list (HAR-1616).
  */
-declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold, estimatedViewportHeight, enabled }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight: estimate, overscan, threshold, estimatedViewportHeight, enabled, measureRows }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
 
 export { type UseVirtualRowsOptions, type UseVirtualRowsResult, useVirtualRows };

package/dist/hooks/useVirtualRows.js

@@ -1,9 +1,12 @@
 "use client";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { shouldVirtualize, virtualWindow } from "../table-engine.js";
-function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estimatedViewportHeight = 0, enabled = true }) {
+function useVirtualRows(rows, { rowHeight: estimate, overscan = 6, threshold = 100, estimatedViewportHeight = 0, enabled = true, measureRows }) {
   const containerRef = useRef(null);
   const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 });
+  const [measured, setMeasured] = useState(null);
+  const measureRowsRef = useRef(() => {
+  });
   useLayoutEffect(() => {
     const element = containerRef.current;
     if (!element) return;
@@ -21,7 +24,10 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estima
     };
     commitMeasurement();
     element.addEventListener("scroll", measure, { passive: true });
-    const observer = new ResizeObserver(measure);
+    const observer = new ResizeObserver(() => {
+      measure();
+      measureRowsRef.current();
+    });
     observer.observe(element);
     return () => {
       element.removeEventListener("scroll", measure);
@@ -31,6 +37,26 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estima
   }, []);
   const height = viewport.height > 0 ? viewport.height : Math.max(0, estimatedViewportHeight);
   const virtualized = enabled && height > 0 && shouldVirtualize(rows.length, threshold);
+  const rowHeight = measureRows && measured && measured.estimate === estimate ? measured.height : estimate;
+  measureRowsRef.current = () => {
+    const element = containerRef.current;
+    if (!element || !measureRows || !virtualized) return;
+    let total = 0;
+    let count = 0;
+    for (const row of Array.from(element.querySelectorAll(measureRows))) {
+      const h = row.offsetHeight;
+      if (h > 0) {
+        total += h;
+        count += 1;
+      }
+    }
+    if (count === 0) return;
+    const next = Math.round(total / count * 100) / 100;
+    setMeasured((current) => current && current.estimate === estimate && current.height === next ? current : { height: next, estimate });
+  };
+  useLayoutEffect(() => {
+    measureRowsRef.current();
+  }, [virtualized, estimate, measureRows]);
   const window = useMemo(
     () => virtualized ? virtualWindow(viewport.scrollTop, height, rowHeight, rows.length, overscan) : { start: 0, end: rows.length, padTop: 0, padBottom: 0, total: rows.length * rowHeight },
     [virtualized, overscan, rowHeight, rows.length, height, viewport.scrollTop]
@@ -43,7 +69,8 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estima
     padTop: window.padTop,
     padBottom: window.padBottom,
     totalHeight: window.total,
-    virtualized
+    virtualized,
+    rowHeight
   };
 }
 export {

package/dist/icons/Icon.d.ts

@@ -269,6 +269,7 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     clip?: number | string | undefined | undefined;
     stroke: string;
     href?: string | undefined | undefined;
+    d?: string | undefined | undefined;
     capHeight?: number | string | undefined | undefined;
     dy?: number | string | undefined | undefined;
     dx?: number | string | undefined | undefined;
@@ -306,7 +307,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     contentStyleType?: number | string | undefined | undefined;
     cx?: number | string | undefined | undefined;
     cy?: number | string | undefined | undefined;
-    d?: string | undefined | undefined;
     decelerate?: number | string | undefined | undefined;
     descent?: number | string | undefined | undefined;
     diffuseConstant?: number | string | undefined | undefined;