@tensor_1/react 2.30.0 → 2.32.0

package/dist/hooks/useAnchoredPosition.js

@@ -15,6 +15,7 @@ function supportsAnchoring() {
   }
   return anchoringSupported;
 }
+const ANCHOR_BAND = 64;
 let anchorCount = 0;
 const namesOf = (value) => value.split(",").map((n) => n.trim()).filter((n) => n.startsWith("--"));
 function addAnchorName(el, name) {
@@ -39,9 +40,12 @@ function translationOf(el) {
 }
 const signed = (n) => `${n < 0 ? "-" : "+"} ${Math.round(Math.abs(n) * 100) / 100}px`;
 const prepared = /* @__PURE__ */ new WeakSet();
-function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8 }) {
-  const opts = useRef({ placement, offset, padding });
-  opts.current = { placement, offset, padding };
+function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-start", offset = 6, padding = 8, shiftMainAxis = true, capHeight = false, onAnchorHidden }) {
+  const opts = useRef({ placement, offset, padding, shiftMainAxis, capHeight });
+  opts.current = { placement, offset, padding, shiftMainAxis, capHeight };
+  const onAnchorHiddenRef = useRef(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
+  const heightCap = useRef(null);
   const session = useRef(false);
   const side = useRef(null);
   const written = useRef("");
@@ -65,6 +69,15 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
     }
     removeAnchorName(current.anchor, current.name);
   }, [floatingRef]);
+  const uncap = useCallback(() => {
+    const cap = heightCap.current;
+    if (!cap) return;
+    heightCap.current = null;
+    const floating = floatingRef.current;
+    if (!floating) return;
+    floating.style.maxHeight = cap.inlineMaxHeight;
+    if (cap.setOverflow) floating.style.overflowY = cap.inlineOverflowY;
+  }, [floatingRef]);
   const reposition = useCallback(() => {
     const anchorEl = resolveAnchor(anchor);
     const floating = floatingRef.current;
@@ -77,14 +90,36 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       prepared.add(floating);
       written.current = "";
     }
+    const { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, capHeight: cap } = opts.current;
+    if (cap) {
+      if (!heightCap.current) {
+        const own = getComputedStyle(floating);
+        const setOverflow = !own.overflowY || own.overflowY === "visible";
+        heightCap.current = {
+          inlineMaxHeight: s.maxHeight,
+          inlineOverflowY: s.overflowY,
+          ownMaxHeight: own.maxHeight && own.maxHeight !== "none" ? own.maxHeight : "",
+          setOverflow,
+          written: ""
+        };
+        if (setOverflow) s.overflowY = "auto";
+      }
+      const room = `${Math.max(0, window.innerHeight - 2 * pad)}px`;
+      const max = heightCap.current.ownMaxHeight ? `min(${room}, ${heightCap.current.ownMaxHeight})` : room;
+      if (max !== heightCap.current.written) {
+        s.maxHeight = max;
+        heightCap.current.written = max;
+      }
+    } else if (heightCap.current) {
+      uncap();
+    }
     const a = anchorEl.getBoundingClientRect();
     const size = { width: floating.offsetWidth, height: floating.offsetHeight };
-    const { placement: p, offset: o, padding: pad } = opts.current;
     const pos = computePosition(
       { x: a.x, y: a.y, width: a.width, height: a.height },
       size,
       { width: window.innerWidth, height: window.innerHeight },
-      { placement: p, offset: o, padding: pad, stickySide: side.current ?? void 0 }
+      { placement: p, offset: o, padding: pad, shiftMainAxis: keepInView, stickySide: side.current ?? void 0 }
     );
     const measured = size.width > 0 || size.height > 0;
     if (measured && session.current) side.current = pos.side;
@@ -98,7 +133,10 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       s.top = top2;
       written.current = key2;
     };
-    if (anchoringFailed.current || !supportsAnchoring()) {
+    const limit = pos.mainAxisRange;
+    const nearLimit = limit !== null && (pos.mainAxisNatural < limit[0] + ANCHOR_BAND || pos.mainAxisNatural > limit[1] - ANCHOR_BAND);
+    if (anchoringFailed.current || nearLimit || !supportsAnchoring()) {
+      if (anchoring.current) release(false);
       writeFixed(pos);
       return;
     }
@@ -135,7 +173,7 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
         writeFixed(pos);
       }
     }
-  }, [anchor, floatingRef, release]);
+  }, [anchor, floatingRef, release, uncap]);
   useIsomorphicLayoutEffect(() => {
     if (!open) return;
     session.current = true;
@@ -164,8 +202,20 @@ function useAnchoredPosition(anchor, floatingRef, { open, placement = "bottom-st
       side.current = null;
       anchoringFailed.current = false;
       release(true);
+      uncap();
     };
-  }, [open, reposition, anchor, floatingRef, release]);
+  }, [open, reposition, anchor, floatingRef, release, uncap]);
+  const watchAnchor = open && !!onAnchorHidden;
+  useEffect(() => {
+    const anchorEl = resolveAnchor(anchor);
+    if (!watchAnchor || !anchorEl || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver((entries) => {
+      const latest = entries[entries.length - 1];
+      if (latest && !latest.isIntersecting) onAnchorHiddenRef.current?.();
+    });
+    observer.observe(anchorEl);
+    return () => observer.disconnect();
+  }, [watchAnchor, anchor]);
   useEffect(() => () => release(false), [release]);
   return reposition;
 }

package/dist/hooks/useVirtualRows.d.ts

@@ -5,8 +5,21 @@ interface UseVirtualRowsOptions {
     rowHeight: number;
     /** Rows rendered beyond each viewport edge. Default: 6. */
     overscan?: number;
-    /** Render all rows at or below this count. Default: 100. */
+    /**
+     * Render all rows at or below this count: rows are windowed only when
+     * `rows.length > threshold` (so exactly `threshold` rows are still rendered whole).
+     * Default: 100.
+     */
     threshold?: number;
+    /**
+     * Viewport height in pixels to assume until the scroll element has been measured, and
+     * whenever it measures 0 (first render, a hidden tab, a test without layout). With it, a
+     * 5,000-row table mounts with one window of rows; without it every row is rendered until
+     * the first measurement, as before (HAR-1616).
+     */
+    estimatedViewportHeight?: number;
+    /** `false` renders every row with no spacers, whatever the count. Default: `true`. */
+    enabled?: boolean;
 }
 interface UseVirtualRowsResult<T> {
     /** Attach to the scrolling TableWrap. */
@@ -21,7 +34,9 @@ interface UseVirtualRowsResult<T> {
 /**
  * Owns scroll/resize observation and exposes the small visible row window.
  * Consumers render padTop/padBottom spacer rows inside their existing tbody.
+ * 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 }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
+declare function useVirtualRows<T>(rows: readonly T[], { rowHeight, overscan, threshold, estimatedViewportHeight, enabled }: UseVirtualRowsOptions): UseVirtualRowsResult<T>;
 
 export { type UseVirtualRowsOptions, type UseVirtualRowsResult, useVirtualRows };

package/dist/hooks/useVirtualRows.js

@@ -1,7 +1,7 @@
 "use client";
 import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { shouldVirtualize, virtualWindow } from "../table-engine.js";
-function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100 }) {
+function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100, estimatedViewportHeight = 0, enabled = true }) {
   const containerRef = useRef(null);
   const [viewport, setViewport] = useState({ scrollTop: 0, height: 0 });
   useLayoutEffect(() => {
@@ -29,10 +29,11 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100 }) {
       if (frame) cancelAnimationFrame(frame);
     };
   }, []);
-  const enabled = viewport.height > 0 && shouldVirtualize(rows.length, threshold);
+  const height = viewport.height > 0 ? viewport.height : Math.max(0, estimatedViewportHeight);
+  const virtualized = enabled && 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]
+    () => 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]
   );
   const visibleRows = useMemo(() => rows.slice(window.start, window.end), [rows, window.start, window.end]);
   return {
@@ -42,7 +43,7 @@ function useVirtualRows(rows, { rowHeight, overscan = 6, threshold = 100 }) {
     padTop: window.padTop,
     padBottom: window.padBottom,
     totalHeight: window.total,
-    virtualized: enabled
+    virtualized
   };
 }
 export {

package/dist/icons/Icon.d.ts

@@ -5,12 +5,22 @@ import { IconNode, UixIcon, IconProps } from './types.js';
 /** Renders a glyph as an inline SVG; the props contract shared by every icon. */
 declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, className, style, ...rest }: IconProps, ref?: unknown): react.ReactElement<{
     string?: number | string | undefined | undefined;
+    filter?: string | undefined | undefined;
+    values?: string | undefined | undefined;
+    fill: string;
+    color?: string | undefined | undefined;
+    fontStyle?: number | string | undefined | undefined;
+    fontWeight?: number | string | undefined | undefined;
+    fontSize?: number | string | undefined | undefined;
+    fontFamily?: string | undefined | undefined;
+    width?: number | string | undefined | undefined;
+    height?: number | string | undefined | undefined;
     type?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    name?: string | undefined | undefined;
     z?: number | string | undefined | undefined;
-    color?: string | undefined | undefined;
     opacity?: number | string | undefined | undefined;
+    r?: number | string | undefined | undefined;
+    id?: string | undefined | undefined;
+    name?: string | undefined | undefined;
     x?: number | string | undefined | undefined;
     y?: number | string | undefined | undefined;
     cursor?: number | string | undefined | undefined;
@@ -18,11 +28,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     clipPath?: string | undefined | undefined;
     radius?: number | string | undefined | undefined;
     media?: string | undefined | undefined;
-    fontStyle?: number | string | undefined | undefined;
-    fontWeight?: number | string | undefined | undefined;
-    fontSize?: number | string | undefined | undefined;
-    fontFamily?: string | undefined | undefined;
-    height?: number | string | undefined | undefined;
     suppressHydrationWarning?: boolean | undefined | undefined;
     lang?: string | undefined | undefined;
     tabIndex?: number | undefined | undefined;
@@ -249,13 +254,10 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     local?: number | string | undefined | undefined;
     hanging?: number | string | undefined | undefined;
     unicode?: number | string | undefined | undefined;
-    fill: string;
     clip?: number | string | undefined | undefined;
     stroke: string;
-    r?: number | string | undefined | undefined;
-    filter?: string | undefined | undefined;
-    values?: string | undefined | undefined;
     offset?: number | string | undefined | undefined;
+    capHeight?: number | string | undefined | undefined;
     dy?: number | string | undefined | undefined;
     dx?: number | string | undefined | undefined;
     transform?: string | undefined | undefined;
@@ -265,7 +267,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     method?: string | undefined | undefined;
     min?: number | string | undefined | undefined;
     target?: string | undefined | undefined;
-    width?: number | string | undefined | undefined;
     crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
     accentHeight?: number | string | undefined | undefined;
     additive?: "replace" | "sum" | undefined | undefined;
@@ -286,7 +287,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     bias?: number | string | undefined | undefined;
     by?: number | string | undefined | undefined;
     calcMode?: number | string | undefined | undefined;
-    capHeight?: number | string | undefined | undefined;
     clipPathUnits?: number | string | undefined | undefined;
     clipRule?: number | string | undefined | undefined;
     colorInterpolation?: number | string | undefined | undefined;