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

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,37 @@
 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, useEffect, 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 { 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 { 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 virtualizer = useVirtualizer({
         count: table.getRowModel().rows.length,
+        getScrollElement: getScrollElement,
+        observeElementRect: observeRootRect,
+        observeElementOffset: observeRootOffset,
+        scrollToFn: elementScroll,
+        initialOffset: ()=>getScrollMetrics(getScrollElement() ?? window).scrollTop,
         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 +44,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

@@ -17,6 +17,7 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
     const containerWidth = useContainerWidth(rootRef);
     useInfiniteScroll({
         mode: 'window',
+        scrollRef: containerRef,
         table,
         virtualizerRef,
         tbodyRef,

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

@@ -4,7 +4,7 @@ import { type DSTableFeatures } from '../../lib';
 import type { TableVirtualizerInstance } from '../../TableContext/types';
 interface UseInfiniteScrollOptions<T extends RowData> {
     mode: 'container' | 'window';
-    /** Scroll element ref — required for `container` mode */
+    /** `container`: the scroll element. `window`: an element to resolve the scroll root from. */
     scrollRef?: RefObject<HTMLElement | null>;
     table: Table<DSTableFeatures, T>;
     virtualizerRef: RefObject<TableVirtualizerInstance | null>;

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

@@ -2,6 +2,7 @@ import { type RefObject } from 'react';
 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>;
     rows: {
         id: string;

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

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from "react";
-import { detectDataChange } from "../../lib/index.js";
+import { detectDataChange, getScrollMetrics, getScrollRoot, scrollRootBy } from "../../lib/index.js";
 const usePrependScrollAnchor = ({ mode, scrollRef, rows, virtualizerRef, tbodyRef, isLoadingPrevious })=>{
     const prevFirstRowIdRef = useRef(void 0);
     const prevLastRowIdRef = useRef(void 0);
@@ -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 ? getScrollRoot(scrollRef?.current ?? null) : 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

@@ -4,7 +4,10 @@ type ScrollEdge = 'start' | 'end';
 interface UseScrollEdgeOptions {
     edge: ScrollEdge;
     mode: ScrollMode;
-    /** Scroll element ref — required for `container` mode */
+    /**
+     * `container`: the scroll element. `window`: any element inside the table —
+     * the scroll root is resolved from it (see `getScrollRoot`).
+     */
     scrollRef?: RefObject<HTMLElement | null>;
     onReached?: () => void;
     threshold: number;

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { SCROLL_EDGE_COOLDOWN_MS } from "../../lib/index.js";
+import { SCROLL_EDGE_COOLDOWN_MS, getScrollMetrics, getScrollRoot } from "../../lib/index.js";
 const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled = true })=>{
     const firedRef = useRef(false);
     const lastFiredAtRef = useRef(0);
@@ -12,23 +12,12 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         enabledRef.current = enabled;
     });
     useEffect(()=>{
+        const target = 'window' === mode ? getScrollRoot(scrollRef?.current ?? null) : 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
         });

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,18 @@
+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
+ * 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.
+ */
+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)) 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.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-30T15:40:03.193Z",
   "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",

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.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",