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

package/dist/components/RemoteShell/NavPanelContent.d.ts

@@ -1,6 +1,11 @@
 import type { FC } from 'react';
+import type { NavStackEntry } from './model';
+interface NavigationSnapshot {
+    navStack: NavStackEntry[];
+}
 interface NavPanelContentProps {
     level: number;
+    navigationSnapshot?: NavigationSnapshot;
 }
 export declare const NavPanelContent: FC<NavPanelContentProps>;
 export {};

package/dist/components/RemoteShell/NavPanelContent.js

@@ -4,10 +4,12 @@ import { Text } from "../Text/index.js";
 import { HeaderActions } from "./HeaderActions.js";
 import { findDrillNode, useRemoteShellContext } from "./model/index.js";
 import { NavItemsList } from "./NavItemsList.js";
-const NavPanelContent = ({ level: rawLevel })=>{
-    const { config, navStack, effectiveActiveItemId, navigate, drillInto, goBack } = useRemoteShellContext();
+const NavPanelContent = ({ level: rawLevel, navigationSnapshot })=>{
+    const { config, navStack: currentNavStack, navigate, drillInto, goBack } = useRemoteShellContext();
+    const navStack = navigationSnapshot?.navStack ?? currentNavStack;
     const level = Math.min(rawLevel, navStack.length - 1);
     const entry = navStack[level];
+    const activeItemId = entry.activeItemId;
     const hasHeaderActions = !!config.headerActions?.length;
     if (0 === level) return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -28,7 +30,7 @@ const NavPanelContent = ({ level: rawLevel })=>{
             }),
             /*#__PURE__*/ jsx(NavItemsList, {
                 items: config.items,
-                activeItemId: effectiveActiveItemId,
+                activeItemId: activeItemId,
                 onNavigate: navigate,
                 onDrillClick: drillInto
             })
@@ -54,7 +56,7 @@ const NavPanelContent = ({ level: rawLevel })=>{
             }),
             /*#__PURE__*/ jsx(NavItemsList, {
                 items: entry.items,
-                activeItemId: effectiveActiveItemId,
+                activeItemId: activeItemId,
                 onNavigate: navigate,
                 onDrillClick: drillInto
             })

package/dist/components/RemoteShell/RemoteShell.d.ts

@@ -8,7 +8,36 @@ export interface RemoteShellProps extends HTMLAttributes<HTMLDivElement>, Testab
     config: NavConfig;
     /** URL prefix stripped before matching and prepended when navigating (e.g. `"/edge"`). */
     basePath?: string;
-    /** Custom navigation handler for router integration (React Router, Next.js, etc.). */
+    /**
+     * Current pathname. When set, it is the single source of truth for the active nav
+     * item, drill level and breadcrumbs, and `window.location` is ignored.
+     *
+     * Pass it — **together with `onNavigate`** — whenever a router owns the URL: router
+     * navigations (links in page content, `router.navigate`, memory history, the host's
+     * rail) do not fire `popstate`, so without it the shell can go stale. Without
+     * `onNavigate` the shell's own navigations would only reach `window.history`, which
+     * a controlled shell ignores (a dev warning flags this).
+     *
+     * Either form is accepted: with the `basePath` prefix (what `onNavigate` receives) or
+     * without it — the prefix is stripped only when the pathname starts with a whole
+     * `basePath` segment. With TanStack Router, `useRouterState({ select: s =>
+     * s.location.pathname })` is router-relative: it excludes the router's own
+     * `basepath`. So when the router has `basepath`:
+     * - omit `basePath` here — `pathname` and `onNavigate` are then both router-relative
+     *   and `onNavigate={to => navigate({ to })}` is correct; or
+     * - keep `basePath` and strip it in `onNavigate`
+     *   (`to => navigate({ to: to.slice(basePath.length) || '/' })`), otherwise the
+     *   router prefixes it a second time.
+     *
+     * Omit it to read `window.location.pathname` (updated on `popstate` and on the
+     * shell's own navigations).
+     */
+    pathname?: string;
+    /**
+     * Navigation handler for router integration (TanStack Router, React Router,
+     * Next.js, …). Receives the target pathname, prefixed with `basePath` when one is
+     * set. Without it the shell pushes to `window.history` itself.
+     */
     onNavigate?: (pathname: string) => void;
 }
 export declare const RemoteShell: FC<RemoteShellProps>;

package/dist/components/RemoteShell/RemoteShell.js

@@ -2,14 +2,30 @@ import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-import { RemoteShellContextProvider, findFirstLinkPath, matchNav, pushPathname, useLocationPathname } from "./model/index.js";
-const RemoteShell = ({ ref, className, children, config, basePath, onNavigate, 'data-testid': testId, ...props })=>{
-    const fullPathname = useLocationPathname();
-    const pathname = basePath && fullPathname.startsWith(basePath) ? fullPathname.slice(basePath.length) || '/' : fullPathname;
+import { RemoteShellContextProvider, findFirstLinkPath, matchNav, notifyPathnameChanged, pushPathname, useLocationPathname } from "./model/index.js";
+const stripBasePath = (fullPathname, basePath)=>{
+    if (!basePath) return fullPathname;
+    if (fullPathname === basePath) return '/';
+    return fullPathname.startsWith(`${basePath}/`) ? fullPathname.slice(basePath.length) : fullPathname;
+};
+const RemoteShell = ({ ref, className, children, config, basePath, onNavigate, pathname: controlledPathname, 'data-testid': testId, ...props })=>{
+    const locationPathname = useLocationPathname();
+    const fullPathname = controlledPathname ?? locationPathname;
+    const pathname = stripBasePath(fullPathname, basePath);
+    const isControlled = void 0 !== controlledPathname;
+    const hasOnNavigate = void 0 !== onNavigate;
+    useEffect(()=>{
+        if (isControlled && !hasOnNavigate && 'production' !== process.env.NODE_ENV) console.warn('[RemoteShell] `pathname` is controlled but `onNavigate` is missing: shell navigations will update `window.history` only, and the shell will keep showing the old route. Pass `onNavigate` to route them through your router.');
+    }, [
+        isControlled,
+        hasOnNavigate
+    ]);
     const setPathname = useCallback((next)=>{
         const fullPath = basePath ? `${basePath}${next}` : next;
-        if (onNavigate) onNavigate(fullPath);
-        else pushPathname(fullPath);
+        if (onNavigate) {
+            onNavigate(fullPath);
+            notifyPathnameChanged();
+        } else pushPathname(fullPath);
     }, [
         basePath,
         onNavigate
@@ -19,17 +35,14 @@ const RemoteShell = ({ ref, className, children, config, basePath, onNavigate, '
         config
     ]);
     const urlDrillLevel = navStack.length - 1;
-    const [visualDrillLevel, setVisualDrillLevel] = useState(null);
-    useEffect(()=>{
-        setVisualDrillLevel(null);
-    }, [
-        pathname
-    ]);
+    const [drillOverride, setDrillOverride] = useState(null);
+    const visualDrillLevel = drillOverride?.pathname === pathname ? drillOverride.level : null;
+    if (drillOverride && drillOverride.pathname !== pathname) setDrillOverride(null);
     const effectiveDrillLevel = visualDrillLevel ?? urlDrillLevel;
     const effectiveActiveItemId = effectiveDrillLevel < urlDrillLevel ? navStack[effectiveDrillLevel]?.activeItemId ?? activeItemId : activeItemId;
     const prefixSegmentCount = navStack[effectiveDrillLevel]?.segmentCount ?? 2 * effectiveDrillLevel;
     const navigate = useCallback((path)=>{
-        setVisualDrillLevel(null);
+        setDrillOverride(null);
         const segments = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
         const prefixSegments = segments.slice(0, prefixSegmentCount);
         setPathname(`/${[
@@ -42,7 +55,7 @@ const RemoteShell = ({ ref, className, children, config, basePath, onNavigate, '
         setPathname
     ]);
     const drillInto = useCallback((drill)=>{
-        setVisualDrillLevel(null);
+        setDrillOverride(null);
         const segments = pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean);
         const prefixSegments = segments.slice(0, prefixSegmentCount);
         const defaultEntity = drill.entities?.[0]?.id ?? 'default';
@@ -64,15 +77,19 @@ const RemoteShell = ({ ref, className, children, config, basePath, onNavigate, '
         setPathname
     ]);
     const goBack = useCallback(()=>{
-        setVisualDrillLevel((prev)=>{
-            const current = prev ?? urlDrillLevel;
-            return Math.max(current - 1, 0);
+        setDrillOverride((prev)=>{
+            const current = prev?.pathname === pathname ? prev.level : urlDrillLevel;
+            return {
+                level: Math.max(current - 1, 0),
+                pathname
+            };
         });
     }, [
+        pathname,
         urlDrillLevel
     ]);
     const navigateTo = useCallback((href)=>{
-        setVisualDrillLevel(null);
+        setDrillOverride(null);
         href === config.productPath ? setPathname('/') : setPathname(href);
     }, [
         config.productPath,

package/dist/components/RemoteShell/RemoteShellPanel.js

@@ -7,8 +7,8 @@ import { DRILL_ANIMATION_DURATION, DRILL_ANIMATION_EASING, useDrillTransition }
 import { NavPanelContent } from "./NavPanelContent.js";
 const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount = 6, ...props })=>{
     const testId = useTestId('panel');
-    const { config, drillLevel } = useRemoteShellContext();
-    const { transition, clearTransition } = useDrillTransition(drillLevel);
+    const { config, drillLevel, navStack } = useRemoteShellContext();
+    const { transition, clearTransition } = useDrillTransition(drillLevel, navStack, config.productPath);
     if (isLoading) return /*#__PURE__*/ jsx("div", {
         ...props,
         ref: ref,
@@ -53,7 +53,10 @@ const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount =
                                     animation: `${isForward ? 'ds-nav-blur-out' : 'ds-nav-blur-in'} ${timing}`
                                 },
                                 children: /*#__PURE__*/ jsx(NavPanelContent, {
-                                    level: isForward ? transition.fromLevel : drillLevel
+                                    level: isForward ? transition.fromLevel : drillLevel,
+                                    navigationSnapshot: isForward ? {
+                                        navStack: transition.fromNavStack
+                                    } : void 0
                                 })
                             }),
                             /*#__PURE__*/ jsx("div", {
@@ -62,7 +65,10 @@ const RemoteShellPanel = ({ ref, className, resizable, isLoading, loaderCount =
                                     animation: `${isForward ? 'ds-nav-blur-in' : 'ds-nav-blur-out'} ${timing}`
                                 },
                                 children: /*#__PURE__*/ jsx(NavPanelContent, {
-                                    level: isForward ? drillLevel : transition.fromLevel
+                                    level: isForward ? drillLevel : transition.fromLevel,
+                                    navigationSnapshot: isForward ? void 0 : {
+                                        navStack: transition.fromNavStack
+                                    }
                                 })
                             })
                         ]

package/dist/components/RemoteShell/model/index.d.ts

@@ -2,4 +2,4 @@ export { type MatchNavResult, matchNav } from './matchNav';
 export { findDrillNode, findFirstLinkPath } from './navUtils';
 export { RemoteShellContextProvider, type RemoteShellContextValue, useRemoteShellContext, } from './RemoteShellContext';
 export type { BreadcrumbSegment, NavConfig, NavConfigDrill, NavConfigGroup, NavConfigHeaderAction, NavConfigLink, NavConfigNode, NavConfigSectionHeader, NavStackEntry, } from './types';
-export { pushPathname, useLocationPathname } from './useLocationPathname';
+export { notifyPathnameChanged, pushPathname, useLocationPathname } from './useLocationPathname';

package/dist/components/RemoteShell/model/index.js

@@ -1,4 +1,4 @@
 export { matchNav } from "./matchNav.js";
 export { findDrillNode, findFirstLinkPath } from "./navUtils.js";
 export { RemoteShellContextProvider, useRemoteShellContext } from "./RemoteShellContext.js";
-export { pushPathname, useLocationPathname } from "./useLocationPathname.js";
+export { notifyPathnameChanged, pushPathname, useLocationPathname } from "./useLocationPathname.js";

package/dist/components/RemoteShell/model/useDrillTransition.d.ts

@@ -1,10 +1,21 @@
+import type { NavStackEntry } from './types';
 export declare const DRILL_ANIMATION_DURATION = "220ms";
 export declare const DRILL_ANIMATION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
 export interface DrillTransition {
     fromLevel: number;
     direction: 'forward' | 'backward';
+    fromNavStack: NavStackEntry[];
 }
-export declare const useDrillTransition: (drillLevel: number) => {
+/**
+ * Tracks drill-level changes and exposes the transition to animate.
+ *
+ * `scope` identifies the nav tree (the config's `productPath`). A level change that
+ * coincides with a scope change — the same `RemoteShell` instance re-rendered for a
+ * different product — is not animated: sliding from the previous product's menu would
+ * show the wrong items. Keyed on `productPath` rather than config identity so a config
+ * rebuilt for the same product (e.g. when scope-switcher entities load) still animates.
+ */
+export declare const useDrillTransition: (drillLevel: number, navStack: NavStackEntry[], scope: string) => {
     transition: DrillTransition | null;
     clearTransition: () => void;
 };

package/dist/components/RemoteShell/model/useDrillTransition.js

@@ -1,24 +1,36 @@
 import { useLayoutEffect, useRef, useState } from "react";
 const DRILL_ANIMATION_DURATION = '220ms';
 const DRILL_ANIMATION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
-const useDrillTransition = (drillLevel)=>{
-    const prevLevelRef = useRef(drillLevel);
+const useDrillTransition = (drillLevel, navStack, scope)=>{
+    const previousRef = useRef({
+        drillLevel,
+        navStack,
+        scope
+    });
     const [transition, setTransition] = useState(null);
     useLayoutEffect(()=>{
-        const prev = prevLevelRef.current;
-        if (prev !== drillLevel) {
-            setTransition({
-                fromLevel: prev,
-                direction: drillLevel > prev ? 'forward' : 'backward'
-            });
-            prevLevelRef.current = drillLevel;
-        }
+        const previous = previousRef.current;
+        if (previous.scope !== scope) setTransition(null);
+        else if (previous.drillLevel !== drillLevel) setTransition({
+            fromLevel: previous.drillLevel,
+            direction: drillLevel > previous.drillLevel ? 'forward' : 'backward',
+            fromNavStack: previous.navStack,
+            scope
+        });
+        previousRef.current = {
+            drillLevel,
+            navStack,
+            scope
+        };
     }, [
-        drillLevel
+        drillLevel,
+        navStack,
+        scope
     ]);
     const clearTransition = ()=>setTransition(null);
+    const activeTransition = transition && transition.scope === scope ? transition : null;
     return {
-        transition,
+        transition: activeTransition,
         clearTransition
     };
 };

package/dist/components/RemoteShell/model/useLocationPathname.d.ts

@@ -1,4 +1,6 @@
 /** Push a new pathname to the browser history and notify subscribers. */
 export declare function pushPathname(path: string): void;
+/** Notify pathname subscribers after navigation handled by an external router. */
+export declare function notifyPathnameChanged(): void;
 /** Subscribe to `window.location.pathname` via `useSyncExternalStore`. */
 export declare function useLocationPathname(): string;

package/dist/components/RemoteShell/model/useLocationPathname.js

@@ -16,9 +16,12 @@ function getSnapshot() {
 }
 function pushPathname(path) {
     window.history.pushState(null, '', path);
+    notifyPathnameChanged();
+}
+function notifyPathnameChanged() {
     for (const listener of listeners)listener();
 }
 function useLocationPathname() {
     return useSyncExternalStore(subscribe, getSnapshot);
 }
-export { pushPathname, useLocationPathname };
+export { notifyPathnameChanged, pushPathname, useLocationPathname };

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.