@wallarm-org/design-system 1.28.2-rc-fix-table-window-scroll-root.1 → 1.28.2-rc-fix-table-window-scroll-root.3

package/dist/components/Table/TableBody/TableBodyVirtualizedWindow.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef } from "react";
 import { elementScroll, observeElementOffset, observeElementRect, observeWindowOffset, observeWindowRect, useVirtualizer } from "@tanstack/react-virtual";
-import { TABLE_VIRTUALIZATION_OVERSCAN, getOffsetTopInScrollRoot, getRowKey, getScrollMetrics, getScrollRoot } from "../lib/index.js";
+import { WindowScrollRootContext } from "../hooks/useWindowScrollRoot.js";
+import { TABLE_VIRTUALIZATION_OVERSCAN, getOffsetTopInScrollRoot, getRowKey, getScrollMetrics, isWindowScrollRoot } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { measureRowElement } from "./lib/measureRowElement.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
@@ -11,24 +12,29 @@ const isWindowRoot = (instance)=>instance.scrollElement === window;
 const observeRootRect = (instance, cb)=>isWindowRoot(instance) ? observeWindowRect(instance, cb) : observeElementRect(instance, cb);
 const observeRootOffset = (instance, cb)=>isWindowRoot(instance) ? observeWindowOffset(instance, cb) : observeElementOffset(instance, cb);
 const TableBodyVirtualizedWindow = ()=>{
-    const { table, estimateRowHeight, overscan, tbodyRef, virtualizerRef, containerRef } = useTableContext();
-    const scrollRootRef = useRef(null);
-    const getScrollElement = useCallback(()=>{
-        const anchor = tbodyRef.current ?? containerRef.current;
-        if (!scrollRootRef.current && anchor) scrollRootRef.current = getScrollRoot(anchor);
-        return scrollRootRef.current;
-    }, [
-        tbodyRef,
-        containerRef
-    ]);
-    const scrollRoot = getScrollElement();
+    const { table, estimateRowHeight, overscan, tbodyRef, virtualizerRef } = useTableContext();
+    const scrollRoot = useContext(WindowScrollRootContext);
+    const scrollRootRef = useRef(scrollRoot);
+    scrollRootRef.current = scrollRoot;
+    const getScrollElement = useCallback(()=>scrollRootRef.current, []);
+    useLayoutEffect(()=>{
+        const instance = virtualizerRef.current;
+        if (instance && instance.scrollElement !== scrollRoot) instance.scrollOffset = null;
+    });
     const virtualizer = useVirtualizer({
         count: table.getRowModel().rows.length,
         getScrollElement: getScrollElement,
         observeElementRect: observeRootRect,
         observeElementOffset: observeRootOffset,
         scrollToFn: elementScroll,
-        initialOffset: ()=>getScrollMetrics(getScrollElement() ?? window).scrollTop,
+        initialRect: scrollRoot && isWindowScrollRoot(scrollRoot) ? {
+            width: scrollRoot.innerWidth,
+            height: scrollRoot.innerHeight
+        } : void 0,
+        initialOffset: ()=>{
+            const root = getScrollElement() ?? ("u" < typeof window ? null : window);
+            return root ? getScrollMetrics(root).scrollTop : 0;
+        },
         estimateSize: estimateRowHeight ?? (()=>40),
         overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN,
         scrollMargin: tbodyRef.current && scrollRoot ? getOffsetTopInScrollRoot(tbodyRef.current, scrollRoot) : 0,

package/dist/components/Table/TableInner/TableInnerWindow.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { useTestId } from "../../../utils/testId.js";
 import { ScrollArea, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
-import { useInfiniteScroll, useWheelHorizontalScroll } from "../hooks/index.js";
+import { WindowScrollRootContext, useInfiniteScroll, useWheelHorizontalScroll, useWindowScrollRoot } from "../hooks/index.js";
 import { useContainerWidth } from "../lib/index.js";
 import { StickyGroupParent } from "../StickyGroupParent.js";
 import { TableBody } from "../TableBody/index.js";
@@ -15,9 +15,10 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
     const testId = useTestId('window');
     const rootRef = useRef(null);
     const containerWidth = useContainerWidth(rootRef);
+    const { scrollRoot, isSettled } = useWindowScrollRoot(containerRef, !isEmpty && table.getRowModel().rows.length > 0);
     useInfiniteScroll({
         mode: 'window',
-        scrollRef: containerRef,
+        scrollRoot: isSettled ? scrollRoot : null,
         table,
         virtualizerRef,
         tbodyRef,
@@ -103,7 +104,10 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
                                 /*#__PURE__*/ jsx(TableColGroup, {
                                     tableWidth: tableWidth
                                 }),
-                                !isEmpty && /*#__PURE__*/ jsx(TableBody, {})
+                                !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext, {
+                                    value: scrollRoot,
+                                    children: /*#__PURE__*/ jsx(TableBody, {})
+                                })
                             ]
                         }),
                         children

package/dist/components/Table/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { useMasterCell } from './useMasterCell';
 export { useStickyGroupParent } from './useStickyGroupParent';
 export { useTableState } from './useTableState';
 export { useWheelHorizontalScroll } from './useWheelHorizontalScroll';
+export { useWindowScrollRoot, WindowScrollRootContext } from './useWindowScrollRoot';

package/dist/components/Table/hooks/index.js

@@ -4,3 +4,4 @@ export { useMasterCell } from "./useMasterCell.js";
 export { useStickyGroupParent } from "./useStickyGroupParent.js";
 export { useTableState } from "./useTableState.js";
 export { useWheelHorizontalScroll } from "./useWheelHorizontalScroll.js";
+export { WindowScrollRootContext, useWindowScrollRoot } from "./useWindowScrollRoot.js";

package/dist/components/Table/hooks/infiniteScroll/useInfiniteScroll.d.ts

@@ -1,11 +1,13 @@
 import type { RefObject } from 'react';
 import type { RowData, Table } from '@tanstack/react-table';
-import { type DSTableFeatures } from '../../lib';
+import { type DSTableFeatures, type ScrollRoot } from '../../lib';
 import type { TableVirtualizerInstance } from '../../TableContext/types';
 interface UseInfiniteScrollOptions<T extends RowData> {
     mode: 'container' | 'window';
-    /** `container`: the scroll element. `window`: an element to resolve the scroll root from. */
+    /** Scroll element ref — required for `container` mode */
     scrollRef?: RefObject<HTMLElement | null>;
+    /** `window` mode: the resolved scroll root (see `useWindowScrollRoot`) */
+    scrollRoot?: ScrollRoot | null;
     table: Table<DSTableFeatures, T>;
     virtualizerRef: RefObject<TableVirtualizerInstance | null>;
     tbodyRef?: RefObject<HTMLTableSectionElement | null>;
@@ -18,5 +20,5 @@ interface UseInfiniteScrollOptions<T extends RowData> {
     isLoadingPrevious?: boolean;
 }
 /** Single entry point for bidirectional infinite scroll behavior. */
-export declare const useInfiniteScroll: <T extends RowData>({ mode, scrollRef, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious, }: UseInfiniteScrollOptions<T>) => void;
+export declare const useInfiniteScroll: <T extends RowData>({ mode, scrollRef, scrollRoot, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious, }: UseInfiniteScrollOptions<T>) => void;
 export {};

package/dist/components/Table/hooks/infiniteScroll/useInfiniteScroll.js

@@ -2,16 +2,18 @@ import { TABLE_END_REACHED_THRESHOLD, TABLE_START_REACHED_THRESHOLD } from "../.
 import { useInitialAnchor } from "./useInitialAnchor.js";
 import { usePrependScrollAnchor } from "./usePrependScrollAnchor.js";
 import { useScrollEdge } from "./useScrollEdge.js";
-const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious })=>{
+const useInfiniteScroll = ({ mode, scrollRef, scrollRoot, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious })=>{
     const rows = table.getRowModel().rows;
     const ready = useInitialAnchor({
         initialScrollToRowId,
         rows,
-        virtualizerRef
+        virtualizerRef,
+        enabled: 'window' !== mode || null != scrollRoot
     });
     usePrependScrollAnchor({
         mode,
         scrollRef,
+        scrollRoot,
         rows,
         virtualizerRef,
         tbodyRef,
@@ -21,6 +23,7 @@ const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, o
         edge: 'start',
         mode,
         scrollRef,
+        scrollRoot,
         onReached: onStartReached,
         threshold: onStartReachedThreshold ?? TABLE_START_REACHED_THRESHOLD,
         enabled: ready
@@ -29,6 +32,7 @@ const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, o
         edge: 'end',
         mode,
         scrollRef,
+        scrollRoot,
         onReached: onEndReached,
         threshold: onEndReachedThreshold ?? TABLE_END_REACHED_THRESHOLD,
         enabled: ready

package/dist/components/Table/hooks/infiniteScroll/useInitialAnchor.d.ts

@@ -6,11 +6,17 @@ interface UseInitialAnchorOptions {
         id: string;
     }[];
     virtualizerRef: RefObject<TableVirtualizerInstance | null>;
+    /**
+     * When false, holds the scroll. `window` mode waits for its scroll root to
+     * settle: in a pane host the root is still the window at mount, and an
+     * anchor scrolled there never reaches the pane.
+     */
+    enabled?: boolean;
 }
 /**
  * Scrolls to the anchor row once on mount and returns `ready`, which gates the
  * edge detectors until the initial scroll has settled. Without this, a table
  * mounted at scrollTop 0 would fire `onStartReached` immediately.
  */
-export declare const useInitialAnchor: ({ initialScrollToRowId, rows, virtualizerRef, }: UseInitialAnchorOptions) => boolean;
+export declare const useInitialAnchor: ({ initialScrollToRowId, rows, virtualizerRef, enabled, }: UseInitialAnchorOptions) => boolean;
 export {};

package/dist/components/Table/hooks/infiniteScroll/useInitialAnchor.js

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from "react";
-const useInitialAnchor = ({ initialScrollToRowId, rows, virtualizerRef })=>{
+const useInitialAnchor = ({ initialScrollToRowId, rows, virtualizerRef, enabled = true })=>{
     const [ready, setReady] = useState(!initialScrollToRowId);
     const doneRef = useRef(false);
     useEffect(()=>{
-        if (doneRef.current || !initialScrollToRowId) return;
+        if (doneRef.current || !initialScrollToRowId || !enabled) return;
         const virtualizer = virtualizerRef.current;
         if (!virtualizer) {
             doneRef.current = true;
@@ -21,7 +21,8 @@ const useInitialAnchor = ({ initialScrollToRowId, rows, virtualizerRef })=>{
     }, [
         initialScrollToRowId,
         rows,
-        virtualizerRef
+        virtualizerRef,
+        enabled
     ]);
     return ready;
 };

package/dist/components/Table/hooks/infiniteScroll/usePrependScrollAnchor.d.ts

@@ -1,9 +1,11 @@
 import { type RefObject } from 'react';
+import { type ScrollRoot } from '../../lib';
 import type { TableVirtualizerInstance } from '../../TableContext/types';
 interface UsePrependScrollAnchorOptions {
     mode: 'container' | 'window';
-    /** `container`: the scroll element. `window`: an element to resolve the scroll root from. */
     scrollRef?: RefObject<HTMLElement | null>;
+    /** `window` mode: the resolved scroll root (see `useWindowScrollRoot`) */
+    scrollRoot?: ScrollRoot | null;
     rows: {
         id: string;
     }[];
@@ -32,5 +34,5 @@ interface UsePrependScrollAnchorOptions {
  * commit (hence no dep array) and its collapse joins the delta when the prepend
  * lands in the same commit.
  */
-export declare const usePrependScrollAnchor: ({ mode, scrollRef, rows, virtualizerRef, tbodyRef, isLoadingPrevious, }: UsePrependScrollAnchorOptions) => void;
+export declare const usePrependScrollAnchor: ({ mode, scrollRef, scrollRoot, rows, virtualizerRef, tbodyRef, isLoadingPrevious, }: UsePrependScrollAnchorOptions) => void;
 export {};

package/dist/components/Table/hooks/infiniteScroll/usePrependScrollAnchor.js

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef } from "react";
-import { detectDataChange, getScrollMetrics, getScrollRoot, scrollRootBy } from "../../lib/index.js";
-const usePrependScrollAnchor = ({ mode, scrollRef, rows, virtualizerRef, tbodyRef, isLoadingPrevious })=>{
+import { detectDataChange, getScrollMetrics, scrollRootBy } from "../../lib/index.js";
+const usePrependScrollAnchor = ({ mode, scrollRef, scrollRoot, rows, virtualizerRef, tbodyRef, isLoadingPrevious })=>{
     const prevFirstRowIdRef = useRef(void 0);
     const prevLastRowIdRef = useRef(void 0);
     const prevIsLoadingPreviousRef = useRef(false);
@@ -12,7 +12,7 @@ const usePrependScrollAnchor = ({ mode, scrollRef, rows, virtualizerRef, tbodyRe
     });
     const seededRef = useRef(false);
     useLayoutEffect(()=>{
-        const getRoot = ()=>'window' === mode ? getScrollRoot(scrollRef?.current ?? null) : scrollRef?.current;
+        const getRoot = ()=>'window' === mode ? scrollRoot : scrollRef?.current;
         const getScrollHeight = ()=>{
             const root = getRoot();
             return root ? getScrollMetrics(root).scrollHeight : 0;

package/dist/components/Table/hooks/infiniteScroll/useScrollEdge.d.ts

@@ -1,23 +1,23 @@
 import { type RefObject } from 'react';
+import { type ScrollRoot } from '../../lib';
 type ScrollMode = 'container' | 'window';
 type ScrollEdge = 'start' | 'end';
 interface UseScrollEdgeOptions {
     edge: ScrollEdge;
     mode: ScrollMode;
-    /**
-     * `container`: the scroll element. `window`: any element inside the table —
-     * the scroll root is resolved from it (see `getScrollRoot`).
-     */
+    /** Scroll element ref — required for `container` mode */
     scrollRef?: RefObject<HTMLElement | null>;
     onReached?: () => void;
     threshold: number;
     /** When false, suppresses firing (e.g. while the initial anchor scroll settles) */
     enabled?: boolean;
+    /** `window` mode: the resolved scroll root (see `useWindowScrollRoot`) */
+    scrollRoot?: ScrollRoot | null;
 }
 /**
  * Fires `onReached` once when the user scrolls within `threshold` px of the
  * given edge. Re-arms after scrolling back past the threshold. A cooldown
  * guard prevents rapid re-fires when prepended/appended rows grow the content.
  */
-export declare const useScrollEdge: ({ edge, mode, scrollRef, onReached, threshold, enabled, }: UseScrollEdgeOptions) => void;
+export declare const useScrollEdge: ({ edge, mode, scrollRef, onReached, threshold, enabled, scrollRoot, }: UseScrollEdgeOptions) => void;
 export {};

package/dist/components/Table/hooks/infiniteScroll/useScrollEdge.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from "react";
-import { SCROLL_EDGE_COOLDOWN_MS, getScrollMetrics, getScrollRoot } from "../../lib/index.js";
-const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled = true })=>{
+import { SCROLL_EDGE_COOLDOWN_MS, getScrollMetrics } from "../../lib/index.js";
+const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled = true, scrollRoot })=>{
     const firedRef = useRef(false);
     const lastFiredAtRef = useRef(0);
     const onReachedRef = useRef(onReached);
@@ -12,8 +12,9 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         enabledRef.current = enabled;
     });
     useEffect(()=>{
-        const target = 'window' === mode ? getScrollRoot(scrollRef?.current ?? null) : scrollRef?.current;
+        const target = 'window' === mode ? scrollRoot : scrollRef?.current;
         if (!target) return;
+        firedRef.current = false;
         const check = ()=>{
             const callback = onReachedRef.current;
             if (!callback || !enabledRef.current) return;
@@ -39,6 +40,7 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         edge,
         mode,
         scrollRef,
+        scrollRoot,
         threshold
     ]);
 };

package/dist/components/Table/hooks/useWindowScrollRoot.d.ts

@@ -0,0 +1,26 @@
+import { type RefObject } from 'react';
+import { type ScrollRoot } from '../lib';
+/** The `virtualized='window'` scroll root, shared from the table shell to its body. */
+export declare const WindowScrollRootContext: import("react").Context<ScrollRoot | null>;
+/**
+ * Resolves the scroll root of a `virtualized='window'` table once, for the
+ * virtualizer, the edge detection and the prepend compensation alike.
+ *
+ * Starts on the window. Before the body is laid out with rows (loading, a
+ * hidden tab or drawer) a pane that will scroll does not overflow and reads as
+ * the window. While the root is the window, it re-resolves whenever the table
+ * resizes (rows, spacers, being shown) or an ancestor scrolls vertically. An
+ * element root is final.
+ *
+ * `scrollRoot` is for the virtualizer, from the first render. Edge detection,
+ * prepend compensation and the initial anchor wait for `isSettled`: an element
+ * root, or the window once the table is laid out with rows and still nothing
+ * above it overflows. Earlier, a pane host still reads as the window, whose
+ * edges both look reached — firing them would load a page at each end in one
+ * commit (which the prepend compensation cannot tell from a data swap) and
+ * spend the anchor on the window.
+ */
+export declare const useWindowScrollRoot: (containerRef: RefObject<HTMLElement | null>, hasRows: boolean) => {
+    scrollRoot: ScrollRoot | null;
+    isSettled: boolean;
+};

package/dist/components/Table/hooks/useWindowScrollRoot.js

@@ -0,0 +1,62 @@
+import { createContext, useLayoutEffect, useRef, useState } from "react";
+import { getScrollRoot, isWindowScrollRoot } from "../lib/index.js";
+const WindowScrollRootContext = createContext(null);
+const useWindowScrollRoot = (containerRef, hasRows)=>{
+    const [scrollRoot, setScrollRoot] = useState(()=>"u" < typeof window ? null : window);
+    const scrollRootRef = useRef(scrollRoot);
+    const [isSettled, setIsSettled] = useState(false);
+    const hasRowsRef = useRef(hasRows);
+    hasRowsRef.current = hasRows;
+    const trySettleRef = useRef(null);
+    useLayoutEffect(()=>{
+        const container = containerRef.current;
+        if (!container || scrollRootRef.current && !isWindowScrollRoot(scrollRootRef.current)) return;
+        const isLaidOut = ()=>container.clientHeight > 0;
+        const onScroll = (event)=>{
+            const { target } = event;
+            if (target instanceof Element && target !== container && target.scrollTop > 0 && target.contains(container)) trySettle();
+        };
+        const resizeObserver = new ResizeObserver(()=>trySettle());
+        const detach = ()=>{
+            document.removeEventListener('scroll', onScroll, {
+                capture: true
+            });
+            resizeObserver.disconnect();
+        };
+        function resolve() {
+            if (scrollRootRef.current && !isWindowScrollRoot(scrollRootRef.current)) return;
+            const next = getScrollRoot(container);
+            if (next === scrollRootRef.current) return;
+            scrollRootRef.current = next;
+            setScrollRoot(next);
+            if (!isWindowScrollRoot(next)) {
+                detach();
+                setIsSettled(true);
+            }
+        }
+        function trySettle() {
+            resolve();
+            if (hasRowsRef.current && isLaidOut()) setIsSettled(true);
+        }
+        trySettleRef.current = trySettle;
+        document.addEventListener('scroll', onScroll, {
+            capture: true,
+            passive: true
+        });
+        resizeObserver.observe(container);
+        trySettle();
+        return detach;
+    }, [
+        containerRef
+    ]);
+    useLayoutEffect(()=>{
+        if (hasRows) trySettleRef.current?.();
+    }, [
+        hasRows
+    ]);
+    return {
+        scrollRoot,
+        isSettled
+    };
+};
+export { WindowScrollRootContext, useWindowScrollRoot };

package/dist/components/Table/lib/scrollRoot.d.ts

@@ -2,10 +2,16 @@ export type ScrollRoot = HTMLElement | Window;
 export declare const isWindowScrollRoot: (root: ScrollRoot) => root is Window;
 /**
  * What a `virtualized='window'` table actually scrolls with: the nearest
- * vertically scrollable ancestor, else the window. An app shell that scrolls
+ * ancestor that scrolls vertically, else the window. An app shell that scrolls
  * its content pane instead of the document (e.g. a micro-frontend host) keeps
  * `window.scrollY` at 0 forever, so tracking the window there never virtualizes
  * past the first screen and never reaches the end.
+ *
+ * `overflow-y` alone is not enough: a non-`visible` `overflow-x` (a plain
+ * `overflow-x-hidden` layout wrapper) computes `overflow-y: visible` to `auto`
+ * on a box that grows with its content and never scrolls. Only a box whose
+ * content overflows it counts — so a pane that does not overflow yet resolves
+ * to the window (`useWindowScrollRoot` re-resolves as the table grows).
  */
 export declare const getScrollRoot: (el: Element | null) => ScrollRoot;
 export declare const getScrollMetrics: (root: ScrollRoot) => {

package/dist/components/Table/lib/scrollRoot.js

@@ -2,7 +2,7 @@ import { getDocumentOffsetTop } from "../TableBody/lib/getDocumentOffsetTop.js";
 const SCROLLABLE_OVERFLOW = /(auto|scroll|overlay)/;
 const isWindowScrollRoot = (root)=>root === window;
 const getScrollRoot = (el)=>{
-    for(let node = el?.parentElement; node && node !== document.body; node = node.parentElement)if (SCROLLABLE_OVERFLOW.test(getComputedStyle(node).overflowY)) return node;
+    for(let node = el?.parentElement; node && node !== document.documentElement; node = node.parentElement)if (SCROLLABLE_OVERFLOW.test(getComputedStyle(node).overflowY) && node.scrollHeight - node.clientHeight > 1) return node;
     return window;
 };
 const getScrollMetrics = (root)=>isWindowScrollRoot(root) ? {
@@ -18,5 +18,5 @@ const scrollRootBy = (root, delta)=>{
     if (isWindowScrollRoot(root)) root.scrollBy(0, delta);
     else root.scrollTop += delta;
 };
-const getOffsetTopInScrollRoot = (el, root)=>isWindowScrollRoot(root) ? getDocumentOffsetTop(el) : el.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;
+const getOffsetTopInScrollRoot = (el, root)=>isWindowScrollRoot(root) ? getDocumentOffsetTop(el) : el.getBoundingClientRect().top - root.getBoundingClientRect().top - root.clientTop + root.scrollTop;
 export { getOffsetTopInScrollRoot, getScrollMetrics, getScrollRoot, isWindowScrollRoot, scrollRootBy };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "1.28.1",
-  "generatedAt": "2026-09-30T15:40:03.193Z",
+  "generatedAt": "2026-10-01T11:03:35.647Z",
   "components": [
     {
       "name": "Accordion",
@@ -91921,6 +91921,31 @@
           "code": "() => {\n  const {\n    data,\n    anchorId,\n    isFetchingPrev,\n    isFetchingNext,\n    hasPrev,\n    hasNext,\n    fetchPrevPage,\n    fetchNextPage,\n  } = useBidirectionalData();\n\n  return (\n    <VStack gap={8}>\n      <Text size='sm' color='secondary'>\n        Window of {data.length} rows around the anchor\n        {(isFetchingPrev || isFetchingNext) && ' — loading...'}\n        {!hasPrev && ' — top reached'}\n        {!hasNext && ' — bottom reached'}\n      </Text>\n      <Table\n        data={data}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        isLoading={isFetchingNext}\n        isLoadingPrevious={isFetchingPrev}\n        initialScrollToRowId={anchorId}\n        onStartReached={fetchPrevPage}\n        onStartReachedThreshold={200}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={200}\n      />\n    </VStack>\n  );\n}",
           "description": "The prepend case against the document scroll, where unrelated page content shares the height\nbeing measured — the regression this story exists to catch."
         },
+        {
+          "name": "InfiniteScrollWindowInPane",
+          "code": "() => {\n  const { data, isFetchingPrev, isFetchingNext, hasPrev, hasNext, fetchPrevPage, fetchNextPage } =\n    useBidirectionalData();\n\n  return (\n    <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>\n      <div style={{ overflowX: 'hidden' }}>\n        <VStack gap={8}>\n          <Text size='sm' color='secondary'>\n            Window of {data.length} rows around the anchor\n            {(isFetchingPrev || isFetchingNext) && ' — loading...'}\n            {!hasPrev && ' — top reached'}\n            {!hasNext && ' — bottom reached'}\n          </Text>\n          <Table\n            data={data}\n            columns={securityColumns}\n            getRowId={row => row.id}\n            virtualized='window'\n            isLoading={isFetchingNext}\n            isLoadingPrevious={isFetchingPrev}\n            onStartReached={fetchPrevPage}\n            onStartReachedThreshold={200}\n            onEndReached={fetchNextPage}\n            onEndReachedThreshold={200}\n          />\n        </VStack>\n      </div>\n    </div>\n  );\n}",
+          "description": "`virtualized='window'` in an app shell that scrolls a content pane instead of the document: the\ntable follows the pane. The `overflow-x: hidden` wrapper in between never scrolls (its\n`overflow-y` only computes to `auto`), so it must not be taken for the scroll root."
+        },
+        {
+          "name": "InfiniteScrollWindowInPaneAnchored",
+          "code": "() => {\n  const { data, anchorId, isFetchingPrev, isFetchingNext, fetchPrevPage, fetchNextPage } =\n    useBidirectionalData();\n\n  return (\n    <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>\n      <Table\n        data={data}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        isLoading={isFetchingNext}\n        isLoadingPrevious={isFetchingPrev}\n        initialScrollToRowId={anchorId}\n        onStartReached={fetchPrevPage}\n        onStartReachedThreshold={200}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={200}\n      />\n    </div>\n  );\n}",
+          "description": "A share-link landing in a pane host: the window-mode table opens scrolled to its anchor row,\ninside the pane — the document stays put."
+        },
+        {
+          "name": "InfiniteScrollWindowInPaneLateRows",
+          "code": "() => {\n  const { data, isFetchingPrev, isFetchingNext, fetchPrevPage, fetchNextPage } =\n    useBidirectionalData();\n  const [hasLoaded, setHasLoaded] = useState(false);\n  const [calls, setCalls] = useState({ start: 0, end: 0 });\n  useEffect(() => {\n    const timer = setTimeout(() => setHasLoaded(true), 500);\n    return () => clearTimeout(timer);\n  }, []);\n\n  return (\n    <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>\n      <Text size='sm' color='secondary'>\n        Edge calls: start {calls.start}, end {calls.end}\n      </Text>\n      <Table\n        data={hasLoaded ? data : []}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        isLoading={!hasLoaded || isFetchingNext}\n        isLoadingPrevious={isFetchingPrev}\n        // Nothing to page from before the first page — as with a real cursor.\n        onStartReached={\n          hasLoaded\n            ? () => {\n                setCalls(prev => ({ ...prev, start: prev.start + 1 }));\n                fetchPrevPage();\n              }\n            : undefined\n        }\n        onStartReachedThreshold={200}\n        onEndReached={\n          hasLoaded\n            ? () => {\n                setCalls(prev => ({ ...prev, end: prev.end + 1 }));\n                fetchNextPage();\n              }\n            : undefined\n        }\n        onEndReachedThreshold={200}\n      />\n    </div>\n  );\n}",
+          "description": "A pane host that mounts the table before its data: rows arrive after a delay. Neither edge may\nfire against the window meanwhile — only the edge the user scrolls to."
+        },
+        {
+          "name": "InfiniteScrollWindowInHiddenPaneAnchored",
+          "code": "() => {\n  const [isShown, setIsShown] = useState(false);\n  const { data, anchorId, isFetchingPrev, isFetchingNext, fetchPrevPage, fetchNextPage } =\n    useBidirectionalData();\n\n  return (\n    <VStack gap={8}>\n      <Button data-testid='show-table' onClick={() => setIsShown(true)}>\n        Show table\n      </Button>\n      <div\n        data-testid='scroll-pane'\n        style={{ height: 480, overflowY: 'auto', display: isShown ? 'block' : 'none' }}\n      >\n        <Table\n          data={data}\n          columns={securityColumns}\n          getRowId={row => row.id}\n          virtualized='window'\n          isLoading={isFetchingNext}\n          isLoadingPrevious={isFetchingPrev}\n          initialScrollToRowId={anchorId}\n          onStartReached={fetchPrevPage}\n          onStartReachedThreshold={200}\n          onEndReached={fetchNextPage}\n          onEndReachedThreshold={200}\n        />\n      </div>\n    </VStack>\n  );\n}",
+          "description": "A share-link landing in a pane that starts hidden (a closed tab or drawer): the anchor waits\nuntil the table is shown and laid out, then lands inside the pane."
+        },
+        {
+          "name": "InfiniteScrollWindowInScrolledPane",
+          "code": "() => {\n  const [isShown, setIsShown] = useState(false);\n  const { data, isFetchingNext, fetchNextPage } = useBidirectionalData();\n\n  return (\n    <VStack gap={8}>\n      <Button data-testid='show-table' onClick={() => setIsShown(true)}>\n        Show table\n      </Button>\n      <div data-testid='scroll-pane' style={{ height: 480, overflowY: 'auto' }}>\n        <div style={{ height: 800 }}>\n          <Text size='sm' color='secondary'>\n            Content above the table\n          </Text>\n        </div>\n        {isShown && (\n          <Table\n            data={data}\n            columns={securityColumns}\n            getRowId={row => row.id}\n            virtualized='window'\n            isLoading={isFetchingNext}\n            onEndReached={fetchNextPage}\n            onEndReachedThreshold={200}\n          />\n        )}\n      </div>\n    </VStack>\n  );\n}",
+          "description": "A window-mode table mounting into a pane the user already scrolled (content above it): the pane\nkeeps its position — adopting the root must not reset it."
+        },
         {
           "name": "HeaderColumnDescription",
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  const columns = useMemo<TableColumnDef<(typeof securityEvents)[number]>[]>(\n    () =>\n      securityColumns.map(col => {\n        const key = 'accessorKey' in col ? col.accessorKey : undefined;\n        if (key === 'objectName') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'text' as const, content: 'Target resource' },\n            },\n          };\n        }\n        if (key === 'sourceIp') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'tooltip' as const, content: 'Request origin IP' },\n            },\n          };\n        }\n        if (key === 'requests') {\n          return {\n            ...col,\n            meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Total hits' } },\n          };\n        }\n        if (key === 'parameter') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'text' as const, content: 'Affected param' },\n            },\n          };\n        }\n        return col;\n      }),\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.28.2-rc-fix-table-window-scroll-root.1",
+  "version": "1.28.2-rc-fix-table-window-scroll-root.3",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",