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

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

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 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 { 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";
@@ -27,6 +27,10 @@ const TableBodyVirtualizedWindow = ()=>{
         observeElementRect: observeRootRect,
         observeElementOffset: observeRootOffset,
         scrollToFn: elementScroll,
+        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;

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

@@ -15,10 +15,10 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
     const testId = useTestId('window');
     const rootRef = useRef(null);
     const containerWidth = useContainerWidth(rootRef);
-    const scrollRoot = useWindowScrollRoot(containerRef);
+    const { scrollRoot, isSettled } = useWindowScrollRoot(containerRef, !isEmpty && table.getRowModel().rows.length > 0);
     useInfiniteScroll({
         mode: 'window',
-        scrollRoot,
+        scrollRoot: isSettled ? scrollRoot : null,
         table,
         virtualizerRef,
         tbodyRef,

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

@@ -7,7 +7,8 @@ const useInfiniteScroll = ({ mode, scrollRef, scrollRoot, table, virtualizerRef,
     const ready = useInitialAnchor({
         initialScrollToRowId,
         rows,
-        virtualizerRef
+        virtualizerRef,
+        enabled: 'window' !== mode || null != scrollRoot
     });
     usePrependScrollAnchor({
         mode,

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/useScrollEdge.js

@@ -14,6 +14,7 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
     useEffect(()=>{
         const target = 'window' === mode ? scrollRoot : scrollRef?.current;
         if (!target) return;
+        firedRef.current = false;
         const check = ()=>{
             const callback = onReachedRef.current;
             if (!callback || !enabledRef.current) return;

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

@@ -6,9 +6,21 @@ export declare const WindowScrollRootContext: import("react").Context<ScrollRoot
  * 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.
+ * 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>) => ScrollRoot | null;
+export declare const useWindowScrollRoot: (containerRef: RefObject<HTMLElement | null>, hasRows: boolean) => {
+    scrollRoot: ScrollRoot | null;
+    isSettled: boolean;
+};

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

@@ -1,35 +1,62 @@
 import { createContext, useLayoutEffect, useRef, useState } from "react";
 import { getScrollRoot, isWindowScrollRoot } from "../lib/index.js";
 const WindowScrollRootContext = createContext(null);
-const useWindowScrollRoot = (containerRef)=>{
+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) return;
-        const resolve = ()=>{
+        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);
-        };
-        resolve();
-        const onScroll = (event)=>{
-            const { target } = event;
-            if (scrollRootRef.current && !isWindowScrollRoot(scrollRootRef.current)) return;
-            if (!(target instanceof Element) || target === container || !target.contains(container)) return;
+            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
         });
-        return ()=>document.removeEventListener('scroll', onScroll, {
-                capture: true
-            });
+        resizeObserver.observe(container);
+        trySettle();
+        return detach;
     }, [
         containerRef
     ]);
-    return scrollRoot;
+    useLayoutEffect(()=>{
+        if (hasRows) trySettleRef.current?.();
+    }, [
+        hasRows
+    ]);
+    return {
+        scrollRoot,
+        isSettled
+    };
 };
 export { WindowScrollRootContext, useWindowScrollRoot };

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

@@ -11,7 +11,7 @@ export declare const isWindowScrollRoot: (root: ScrollRoot) => root is Window;
  * `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).
+ * 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) && node.scrollHeight > node.clientHeight) 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) ? {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "1.28.1",
-  "generatedAt": "2026-09-30T16:05:28.988Z",
+  "generatedAt": "2026-10-01T11:03:35.647Z",
   "components": [
     {
       "name": "Accordion",
@@ -91926,6 +91926,26 @@
           "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.2",
+  "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",