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

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

@@ -47,7 +47,7 @@ const TableBodyVirtualizedCore = ({ tbodyRef, virtualizer })=>{
                 virtualRows.length > 0 && /*#__PURE__*/ jsx(Tr, {
                     children: /*#__PURE__*/ jsx(Td, {
                         style: {
-                            height: `${totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)}px`,
+                            height: `${totalSize + scrollMargin - (virtualRows[virtualRows.length - 1]?.end ?? 0)}px`,
                             padding: 0,
                             border: 'none'
                         },

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

@@ -1,20 +1,39 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect } from "react";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
-import { TABLE_VIRTUALIZATION_OVERSCAN, getRowKey } from "../lib/index.js";
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef } from "react";
+import { elementScroll, observeElementOffset, observeElementRect, observeWindowOffset, observeWindowRect, useVirtualizer } from "@tanstack/react-virtual";
+import { WindowScrollRootContext } from "../hooks/useWindowScrollRoot.js";
+import { TABLE_VIRTUALIZATION_OVERSCAN, getOffsetTopInScrollRoot, getRowKey, getScrollMetrics } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
-import { getDocumentOffsetTop } from "./lib/getDocumentOffsetTop.js";
 import { measureRowElement } from "./lib/measureRowElement.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
 import { useResetVirtualizerOnDataChange } from "./useResetVirtualizerOnDataChange.js";
 import { useSmoothScrollOnSort } from "./useSmoothScrollOnSort.js";
+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 } = useTableContext();
-    const virtualizer = useWindowVirtualizer({
+    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: ()=>{
+            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 ? getDocumentOffsetTop(tbodyRef.current) : 0,
+        scrollMargin: tbodyRef.current && scrollRoot ? getOffsetTopInScrollRoot(tbodyRef.current, scrollRoot) : 0,
         getItemKey: useCallback((index)=>getRowKey(table.getRowModel().rows, index), [
             table
         ]),
@@ -27,8 +46,7 @@ const TableBodyVirtualizedWindow = ()=>{
         virtualizerRef
     ]);
     useResetVirtualizerOnDataChange(table, virtualizer);
-    const getScrollTarget = useCallback(()=>window, []);
-    useSmoothScrollOnSort(table, getScrollTarget);
+    useSmoothScrollOnSort(table, getScrollElement);
     return /*#__PURE__*/ jsx(TableBodyVirtualizedCore, {
         tbodyRef: tbodyRef,
         virtualizer: virtualizer

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,8 +15,10 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
     const testId = useTestId('window');
     const rootRef = useRef(null);
     const containerWidth = useContainerWidth(rootRef);
+    const scrollRoot = useWindowScrollRoot(containerRef);
     useInfiniteScroll({
         mode: 'window',
+        scrollRoot,
         table,
         virtualizerRef,
         tbodyRef,
@@ -102,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';
     /** 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,7 +2,7 @@ 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,
@@ -12,6 +12,7 @@ const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, o
     usePrependScrollAnchor({
         mode,
         scrollRef,
+        scrollRoot,
         rows,
         virtualizerRef,
         tbodyRef,
@@ -21,6 +22,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 +31,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/usePrependScrollAnchor.d.ts

@@ -1,8 +1,11 @@
 import { type RefObject } from 'react';
+import { type ScrollRoot } from '../../lib';
 import type { TableVirtualizerInstance } from '../../TableContext/types';
 interface UsePrependScrollAnchorOptions {
     mode: 'container' | 'window';
     scrollRef?: RefObject<HTMLElement | null>;
+    /** `window` mode: the resolved scroll root (see `useWindowScrollRoot`) */
+    scrollRoot?: ScrollRoot | null;
     rows: {
         id: string;
     }[];
@@ -31,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 } 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,15 @@ const usePrependScrollAnchor = ({ mode, scrollRef, rows, virtualizerRef, tbodyRe
     });
     const seededRef = useRef(false);
     useLayoutEffect(()=>{
-        const getScrollHeight = ()=>'window' === mode ? document.documentElement.scrollHeight : scrollRef?.current?.scrollHeight ?? 0;
+        const getRoot = ()=>'window' === mode ? scrollRoot : scrollRef?.current;
+        const getScrollHeight = ()=>{
+            const root = getRoot();
+            return root ? getScrollMetrics(root).scrollHeight : 0;
+        };
+        const scrollBy = (delta)=>{
+            const root = getRoot();
+            if (root) scrollRootBy(root, delta);
+        };
         const getStartLoaderHeight = ()=>{
             const loaderRows = tbodyRef?.current?.querySelectorAll('tr[data-loading-position="start"]');
             const count = loaderRows?.length ?? 0;
@@ -54,16 +62,10 @@ const usePrependScrollAnchor = ({ mode, scrollRef, rows, virtualizerRef, tbodyRe
                 const rowDelta = newStart - prevFirstRowStartRef.current;
                 const loaderDelta = getStartLoaderHeight() - prevLoaderHeight;
                 const delta = rowDelta + loaderDelta;
-                if (0 !== delta) {
-                    if ('window' === mode) window.scrollBy(0, delta);
-                    else if (scrollRef?.current) scrollRef.current.scrollTop += delta;
-                }
+                if (0 !== delta) scrollBy(delta);
             } else if (null !== prevScrollHeightRef.current) {
                 const delta = getScrollHeight() - prevScrollHeightRef.current;
-                if (delta > 0) {
-                    if ('window' === mode) window.scrollBy(0, delta);
-                    else if (scrollRef?.current) scrollRef.current.scrollTop += delta;
-                }
+                if (delta > 0) scrollBy(delta);
             }
         }
         prevFirstRowIdRef.current = rows[0]?.id;

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

@@ -1,4 +1,5 @@
 import { type RefObject } from 'react';
+import { type ScrollRoot } from '../../lib';
 type ScrollMode = 'container' | 'window';
 type ScrollEdge = 'start' | 'end';
 interface UseScrollEdgeOptions {
@@ -10,11 +11,13 @@ interface UseScrollEdgeOptions {
     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 } 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,23 +12,12 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         enabledRef.current = enabled;
     });
     useEffect(()=>{
+        const target = 'window' === mode ? scrollRoot : scrollRef?.current;
+        if (!target) return;
         const check = ()=>{
             const callback = onReachedRef.current;
             if (!callback || !enabledRef.current) return;
-            let scrollTop;
-            let clientHeight;
-            let scrollHeight;
-            if ('window' === mode) {
-                scrollTop = window.scrollY;
-                clientHeight = window.innerHeight;
-                scrollHeight = document.documentElement.scrollHeight;
-            } else {
-                const el = scrollRef?.current;
-                if (!el) return;
-                scrollTop = el.scrollTop;
-                clientHeight = el.clientHeight;
-                scrollHeight = el.scrollHeight;
-            }
+            const { scrollTop, clientHeight, scrollHeight } = getScrollMetrics(target);
             const distance = 'start' === edge ? scrollTop : scrollHeight - scrollTop - clientHeight;
             if (distance <= threshold) {
                 const now = Date.now();
@@ -39,8 +28,6 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
                 }
             } else firedRef.current = false;
         };
-        const target = 'window' === mode ? window : scrollRef?.current;
-        if (!target) return;
         target.addEventListener('scroll', check, {
             passive: true
         });
@@ -52,6 +39,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,14 @@
+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. At mount the body has no rows yet, so a pane that will
+ * scroll does not overflow and stays on the window. While the root is the
+ * window, a scroll of any ancestor of the table re-resolves it: a pane the user
+ * scrolls overflows by then. An element root is final.
+ */
+export declare const useWindowScrollRoot: (containerRef: RefObject<HTMLElement | null>) => ScrollRoot | null;

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

@@ -0,0 +1,35 @@
+import { createContext, useLayoutEffect, useRef, useState } from "react";
+import { getScrollRoot, isWindowScrollRoot } from "../lib/index.js";
+const WindowScrollRootContext = createContext(null);
+const useWindowScrollRoot = (containerRef)=>{
+    const [scrollRoot, setScrollRoot] = useState(()=>"u" < typeof window ? null : window);
+    const scrollRootRef = useRef(scrollRoot);
+    useLayoutEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        const resolve = ()=>{
+            const next = getScrollRoot(container);
+            if (next === scrollRootRef.current) return;
+            scrollRootRef.current = next;
+            setScrollRoot(next);
+        };
+        resolve();
+        const onScroll = (event)=>{
+            const { target } = event;
+            if (scrollRootRef.current && !isWindowScrollRoot(scrollRootRef.current)) return;
+            if (!(target instanceof Element) || target === container || !target.contains(container)) return;
+            resolve();
+        };
+        document.addEventListener('scroll', onScroll, {
+            capture: true,
+            passive: true
+        });
+        return ()=>document.removeEventListener('scroll', onScroll, {
+                capture: true
+            });
+    }, [
+        containerRef
+    ]);
+    return scrollRoot;
+};
+export { WindowScrollRootContext, useWindowScrollRoot };

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

@@ -11,6 +11,7 @@ export { getDndStyles } from './getDndStyles';
 export { getPinningStyles } from './getPinningStyles';
 export { getRowKey } from './getRowKey';
 export { isLastPinnedLeft } from './isLastPinnedLeft';
+export { getOffsetTopInScrollRoot, getScrollMetrics, getScrollRoot, isWindowScrollRoot, type ScrollRoot, scrollRootBy, } from './scrollRoot';
 export { useColumnDnd } from './useColumnDnd';
 export { useContainerWidth } from './useContainerWidth';
 export { useRowDnd } from './useRowDnd';

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

@@ -11,6 +11,7 @@ export { getDndStyles } from "./getDndStyles.js";
 export { getPinningStyles } from "./getPinningStyles.js";
 export { getRowKey } from "./getRowKey.js";
 export { isLastPinnedLeft } from "./isLastPinnedLeft.js";
+export { getOffsetTopInScrollRoot, getScrollMetrics, getScrollRoot, isWindowScrollRoot, scrollRootBy } from "./scrollRoot.js";
 export { useColumnDnd } from "./useColumnDnd.js";
 export { useContainerWidth } from "./useContainerWidth.js";
 export { useRowDnd } from "./useRowDnd.js";

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

@@ -0,0 +1,24 @@
+export type ScrollRoot = HTMLElement | Window;
+export declare const isWindowScrollRoot: (root: ScrollRoot) => root is Window;
+/**
+ * What a `virtualized='window'` table actually scrolls with: the nearest
+ * 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 once an ancestor scrolls).
+ */
+export declare const getScrollRoot: (el: Element | null) => ScrollRoot;
+export declare const getScrollMetrics: (root: ScrollRoot) => {
+    scrollTop: number;
+    clientHeight: number;
+    scrollHeight: number;
+};
+export declare const scrollRootBy: (root: ScrollRoot, delta: number) => void;
+/** `el`'s top in the root's scroll-content coordinates (the virtualizer's `scrollMargin`). */
+export declare const getOffsetTopInScrollRoot: (el: HTMLElement, root: ScrollRoot) => number;

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

@@ -0,0 +1,22 @@
+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) && node.scrollHeight > node.clientHeight) return node;
+    return window;
+};
+const getScrollMetrics = (root)=>isWindowScrollRoot(root) ? {
+        scrollTop: root.scrollY,
+        clientHeight: root.innerHeight,
+        scrollHeight: document.documentElement.scrollHeight
+    } : {
+        scrollTop: root.scrollTop,
+        clientHeight: root.clientHeight,
+        scrollHeight: root.scrollHeight
+    };
+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.clientTop + root.scrollTop;
+export { getOffsetTopInScrollRoot, getScrollMetrics, getScrollRoot, isWindowScrollRoot, scrollRootBy };

package/dist/components/Table/types.d.ts

@@ -245,7 +245,10 @@ export interface TableProps<T> extends TestableProps {
      * the close edge here.
      */
     onSettingsOpenChange?: (open: boolean) => void;
-    /** Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window. */
+    /**
+     * Enable row virtualization. `'container'` virtualizes within the table's own scroll container;
+     * `'window'` follows the page scroll — the nearest scrollable ancestor, or the browser window.
+     */
     virtualized?: TableVirtualized;
     /**
      * Whether columns stretch proportionally to fill the container width.

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.28.0",
-  "generatedAt": "2026-09-30T12:59:20.784Z",
+  "version": "1.28.1",
+  "generatedAt": "2026-09-30T16:05:28.988Z",
   "components": [
     {
       "name": "Accordion",
@@ -85754,7 +85754,7 @@
           "name": "virtualized",
           "type": "TableVirtualized | undefined",
           "required": false,
-          "description": "Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window."
+          "description": "Enable row virtualization. `'container'` virtualizes within the table's own scroll container;\n`'window'` follows the page scroll — the nearest scrollable ancestor, or the browser window."
         },
         {
           "name": "stretch",
@@ -91921,6 +91921,11 @@
           "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": "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.1",
+  "version": "1.28.2-rc-fix-table-window-scroll-root.2",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",