@wallarm-org/design-system 1.31.0 → 1.33.0

package/dist/components/Stepper/useStepper.js

@@ -0,0 +1,58 @@
+import { useSteps } from "@ark-ui/react/steps";
+import { STEPPER_MAX_STEPS } from "./constants.js";
+import { clampStep } from "./StepperContext.js";
+const warn = (message)=>console.warn(`[Stepper] ${message}`);
+const useStepperGuards = ({ count, step, defaultStep, onStepChange })=>{
+    const clamp = (value)=>void 0 === value ? void 0 : clampStep(value, count);
+    const clampedStep = clamp(step);
+    const clampedDefaultStep = clamp(defaultStep);
+    if ('production' !== process.env.NODE_ENV) {
+        if (count > STEPPER_MAX_STEPS) warn(`${count} steps; the design supports up to ${STEPPER_MAX_STEPS}.`);
+        if (count < 1) warn(`count=${count}; a Stepper needs at least one step.`);
+        if (void 0 !== step && step !== clampedStep) warn(`step=${step} is out of range [0, ${count - 1}]; clamped.`);
+        if (void 0 !== defaultStep && defaultStep !== clampedDefaultStep) warn(`defaultStep=${defaultStep} is out of range [0, ${count - 1}]; clamped.`);
+    }
+    return {
+        count,
+        ...void 0 !== clampedStep && {
+            step: clampedStep
+        },
+        ...void 0 !== clampedDefaultStep && {
+            defaultStep: clampedDefaultStep
+        },
+        onStepChange: onStepChange ? (details)=>{
+            if (details.step <= count - 1) onStepChange(details);
+        } : void 0
+    };
+};
+const useStepper = ({ count, step, defaultStep, onStepChange, ...rest })=>{
+    const guarded = useStepperGuards({
+        count,
+        step,
+        defaultStep,
+        onStepChange
+    });
+    const api = useSteps({
+        ...rest,
+        ...guarded
+    });
+    const value = clampStep(api.value, api.count);
+    const hasNextStep = value < api.count - 1;
+    const hasPrevStep = value > 0;
+    return {
+        ...api,
+        value,
+        percent: api.count > 0 ? value / api.count * 100 : 0,
+        isCompleted: false,
+        hasNextStep,
+        hasPrevStep,
+        goToNextStep: ()=>{
+            if (hasNextStep) api.setStep(value + 1);
+        },
+        goToPrevStep: ()=>{
+            if (hasPrevStep) api.setStep(value - 1);
+        },
+        setStep: (next)=>api.setStep(clampStep(next, api.count))
+    };
+};
+export { useStepper, useStepperGuards };

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,43 @@
 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, isWindowScrollRoot } 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,
+        initialRect: scrollRoot && isWindowScrollRoot(scrollRoot) ? {
+            width: scrollRoot.innerWidth,
+            height: scrollRoot.innerHeight
+        } : void 0,
+        initialOffset: ()=>{
+            const root = getScrollElement() ?? ("u" < typeof window ? null : window);
+            return root ? getScrollMetrics(root).scrollTop : 0;
+        },
         estimateSize: estimateRowHeight ?? (()=>40),
         overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN,
-        scrollMargin: tbodyRef.current ? getDocumentOffsetTop(tbodyRef.current) : 0,
+        scrollMargin: tbodyRef.current && scrollRoot ? getOffsetTopInScrollRoot(tbodyRef.current, scrollRoot) : 0,
         getItemKey: useCallback((index)=>getRowKey(table.getRowModel().rows, index), [
             table
         ]),
@@ -27,8 +50,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, isSettled } = useWindowScrollRoot(containerRef, !isEmpty && table.getRowModel().rows.length > 0);
     useInfiniteScroll({
         mode: 'window',
+        scrollRoot: isSettled ? scrollRoot : null,
         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,16 +2,18 @@ import { TABLE_END_REACHED_THRESHOLD, TABLE_START_REACHED_THRESHOLD } from "../.
 import { useInitialAnchor } from "./useInitialAnchor.js";
 import { usePrependScrollAnchor } from "./usePrependScrollAnchor.js";
 import { useScrollEdge } from "./useScrollEdge.js";
-const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious })=>{
+const useInfiniteScroll = ({ mode, scrollRef, scrollRoot, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious })=>{
     const rows = table.getRowModel().rows;
     const ready = useInitialAnchor({
         initialScrollToRowId,
         rows,
-        virtualizerRef
+        virtualizerRef,
+        enabled: 'window' !== mode || null != scrollRoot
     });
     usePrependScrollAnchor({
         mode,
         scrollRef,
+        scrollRoot,
         rows,
         virtualizerRef,
         tbodyRef,
@@ -21,6 +23,7 @@ const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, o
         edge: 'start',
         mode,
         scrollRef,
+        scrollRoot,
         onReached: onStartReached,
         threshold: onStartReachedThreshold ?? TABLE_START_REACHED_THRESHOLD,
         enabled: ready
@@ -29,6 +32,7 @@ const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, o
         edge: 'end',
         mode,
         scrollRef,
+        scrollRoot,
         onReached: onEndReached,
         threshold: onEndReachedThreshold ?? TABLE_END_REACHED_THRESHOLD,
         enabled: ready

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

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

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

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

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

@@ -1,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,13 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         enabledRef.current = 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;
-            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 +29,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 +40,7 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         edge,
         mode,
         scrollRef,
+        scrollRoot,
         threshold
     ]);
 };

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

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

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

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

package/dist/components/Table/lib/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 as the table grows).
+ */
+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.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) ? {
+        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/index.d.ts

@@ -84,6 +84,7 @@ export { Slider, SliderControl, type SliderControlProps, SliderInput, type Slide
 export { SplashScreen, type SplashScreenProps } from './components/SplashScreen';
 export { SplitButton, type SplitButtonProps } from './components/SplitButton';
 export { HStack, type HStackProps, Stack, type StackProps, VStack, type VStackProps, } from './components/Stack';
+export { Stepper, StepperContent, type StepperContentProps, StepperDescription, type StepperDescriptionProps, StepperIndicator, type StepperIndicatorProps, StepperItem, type StepperItemContextValue, type StepperItemProps, type StepperItemStatus, StepperList, type StepperListProps, StepperNextTrigger, type StepperNextTriggerProps, StepperPrevTrigger, type StepperPrevTriggerProps, type StepperProps, StepperRootProvider, type StepperRootProviderProps, StepperSeparator, type StepperSeparatorProps, type StepperStatusLabels, StepperTitle, type StepperTitleProps, StepperTrigger, type StepperTriggerProps, type StepperVisualStatus, type UseStepperContextReturn, type UseStepperProps, type UseStepperReturn, useStepper, useStepperContext, useStepperItemContext, } from './components/Stepper';
 export { Switch, SwitchControl, SwitchDescription, type SwitchDescriptionProps, SwitchLabel, type SwitchLabelProps, type SwitchProps, } from './components/Switch';
 export { createTableColumnHelper, type DSTableFeatures, EDITABLE_CELL_COLUMN_META, EditableSelectCell, type EditableSelectCellProps, EditableTextCell, type EditableTextCellProps, editableCellVariants, Table, type TableAccessorColumnDef, TableActionBar, type TableCellContext, type TableColumnBase, type TableColumnDef, type TableColumnHelper, TableColumnMenu, TableColumnMenuHideItem, type TableColumnMenuHideItemProps, TableColumnMenuMoveLeftItem, type TableColumnMenuMoveLeftItemProps, TableColumnMenuMoveRightItem, type TableColumnMenuMoveRightItemProps, TableColumnMenuPinItem, type TableColumnMenuPinItemProps, type TableColumnMenuProps, TableColumnMenuSortItem, type TableColumnMenuSortItemProps, type TableColumnMeta, type TableColumnPinningState, type TableColumnSizingState, type TableDisplayColumnDef, TableEmptyState, type TableExpandedState, type TableGroupingState, type TableHandle, type TableOnChangeFn, type TableProps, type TableRow, type TableRowSelectionState, type TableScrollToRowOptions, TableSettingsMenu, type TableSortingState, TableSortTrigger, type TableSortTriggerProps, type TableUpdater, type TableVisibilityState, } from './components/Table';
 export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, } from './components/Tabs';

package/dist/index.js

@@ -73,6 +73,7 @@ export { Slider, SliderControl, SliderInput, SliderMarks, SliderThumb, SliderVal
 export { SplashScreen } from "./components/SplashScreen/index.js";
 export { SplitButton } from "./components/SplitButton/index.js";
 export { HStack, Stack, VStack } from "./components/Stack/index.js";
+export { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNextTrigger, StepperPrevTrigger, StepperRootProvider, StepperSeparator, StepperTitle, StepperTrigger, useStepper, useStepperContext, useStepperItemContext } from "./components/Stepper/index.js";
 export { Switch, SwitchControl, SwitchDescription, SwitchLabel } from "./components/Switch/index.js";
 export { EDITABLE_CELL_COLUMN_META, EditableSelectCell, EditableTextCell, Table, TableActionBar, TableColumnMenu, TableColumnMenuHideItem, TableColumnMenuMoveLeftItem, TableColumnMenuMoveRightItem, TableColumnMenuPinItem, TableColumnMenuSortItem, TableEmptyState, TableSettingsMenu, TableSortTrigger, createTableColumnHelper, editableCellVariants } from "./components/Table/index.js";
 export { Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger } from "./components/Tabs/index.js";