@wallarm-org/design-system 1.31.0 → 1.32.0

package/dist/components/Stepper/StepperTitle.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { OverflowTooltip, OverflowTooltipContent, OverflowTooltipTrigger } from "../OverflowTooltip/index.js";
+import { stepperTitleVariants } from "./classes.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const StepperTitle = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { status } = useStepperItemContext();
+    const testId = useTestId('title', testIdProp);
+    return /*#__PURE__*/ jsxs(OverflowTooltip, {
+        children: [
+            /*#__PURE__*/ jsx(OverflowTooltipTrigger, {
+                ref: ref,
+                children: /*#__PURE__*/ jsx("span", {
+                    ...rest,
+                    "data-slot": "stepper-title",
+                    "data-status": status,
+                    "data-testid": testId,
+                    className: cn(stepperTitleVariants({
+                        status
+                    }), className),
+                    children: children
+                })
+            }),
+            /*#__PURE__*/ jsx(OverflowTooltipContent, {
+                children: children
+            })
+        ]
+    });
+};
+StepperTitle.displayName = 'StepperTitle';
+export { StepperTitle };

package/dist/components/Stepper/StepperTrigger.d.ts

@@ -0,0 +1,16 @@
+import type { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface StepperTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'>, TestableProps {
+    /** `StepperIndicator`, `StepperTitle` and an optional `StepperDescription`. */
+    children: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+/**
+ * The step's button: a click makes the step current. Carries `aria-current="step"` while
+ * current, a screen-reader-only status suffix (", Completed" / ", Has errors") and every
+ * consumer attribute, so analytics land on the real `<button>`.
+ *
+ * Set its `id` with the root `ids.triggerId` prop: `StepperContent` is named by the root's trigger
+ * id, so an `id` passed here leaves the body's `aria-labelledby` pointing at nothing.
+ */
+export declare const StepperTrigger: FC<StepperTriggerProps>;

package/dist/components/Stepper/StepperTrigger.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Steps } from "@ark-ui/react/steps";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+import { stepperTriggerVariants } from "./classes.js";
+import { ARK_TAB_ARIA_RESET } from "./constants.js";
+import { useStepperItemContext } from "./StepperContext.js";
+const StepperTrigger = ({ children, className, ref, 'data-testid': testIdProp, ...rest })=>{
+    const { current, status, statusLabel } = useStepperItemContext();
+    const testId = useTestId('trigger', testIdProp);
+    if ('production' !== process.env.NODE_ENV && void 0 !== rest.id) console.warn(`[Stepper] id="${rest.id}" on StepperTrigger: set trigger ids with the root \`ids.triggerId\` prop, or StepperContent's aria-labelledby points at nothing.`);
+    return /*#__PURE__*/ jsxs(Steps.Trigger, {
+        ...ARK_TAB_ARIA_RESET,
+        "aria-current": current ? 'step' : void 0,
+        ...rest,
+        ref: ref,
+        type: "button",
+        "data-slot": "stepper-trigger",
+        "data-status": status,
+        "data-testid": testId,
+        className: cn(stepperTriggerVariants(), className),
+        children: [
+            children,
+            statusLabel && /*#__PURE__*/ jsx("span", {
+                className: "sr-only",
+                children: `, ${statusLabel}`
+            })
+        ]
+    });
+};
+StepperTrigger.displayName = 'StepperTrigger';
+export { StepperTrigger };

package/dist/components/Stepper/classes.d.ts

@@ -0,0 +1,14 @@
+export declare const stepperVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperListVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperTriggerVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperIndicatorVariants: (props?: ({
+    status?: "active" | "completed" | "danger" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const stepperTitleVariants: (props?: ({
+    status?: "active" | "completed" | "danger" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const stepperDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperSeparatorVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const stepperSeparatorLineClassNames = "block h-px w-full bg-border-primary";
+export declare const stepperContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/components/Stepper/classes.js

@@ -0,0 +1,37 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const stepperVariants = cva('min-w-0');
+const stepperListVariants = cva('m-0 flex min-w-0 list-none items-start border-b-1 border-border-primary-light px-24 py-8');
+const stepperItemVariants = cva('flex min-w-0 items-start');
+const stepperTriggerVariants = cva(cn('grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] grid-rows-[20px] items-start gap-x-4 bg-transparent p-0 text-left', 'rounded-6 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'));
+const stepperIndicatorVariants = cva("col-start-1 row-span-2 row-start-1 inline-flex h-20 min-w-16 shrink-0 items-center justify-center rounded-full font-mono font-medium text-xs [font-feature-settings:'liga'_0]", {
+    variants: {
+        status: {
+            active: 'bg-states-brand-active px-4 py-2 text-text-brand',
+            danger: 'bg-states-danger-active px-4 py-2 text-text-danger',
+            completed: 'bg-states-primary-active px-2 py-2 text-icon-primary',
+            upcoming: 'border-1 border-border-primary bg-component-outline-button-bg px-3 py-1 text-text-primary'
+        }
+    },
+    defaultVariants: {
+        status: 'upcoming'
+    }
+});
+const stepperTitleVariants = cva('col-start-2 row-start-1 block min-w-0 max-w-320 truncate font-sans font-normal text-sm', {
+    variants: {
+        status: {
+            active: 'text-text-brand',
+            danger: 'text-text-danger',
+            completed: 'text-text-primary',
+            upcoming: 'text-text-primary'
+        }
+    },
+    defaultVariants: {
+        status: 'upcoming'
+    }
+});
+const stepperDescriptionVariants = cva('col-start-2 row-start-2 -mt-2 block min-w-0 max-w-320 truncate font-sans text-text-secondary text-xs');
+const stepperSeparatorVariants = cva('flex h-20 w-32 shrink-0 items-center px-8');
+const stepperSeparatorLineClassNames = 'block h-px w-full bg-border-primary';
+const stepperContentVariants = cva('min-w-0');
+export { stepperContentVariants, stepperDescriptionVariants, stepperIndicatorVariants, stepperItemVariants, stepperListVariants, stepperSeparatorLineClassNames, stepperSeparatorVariants, stepperTitleVariants, stepperTriggerVariants, stepperVariants };

package/dist/components/Stepper/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const ARK_LIST_ARIA_RESET: {
+    readonly role: undefined;
+    readonly 'aria-owns': undefined;
+    readonly 'aria-orientation': undefined;
+};
+export declare const ARK_ITEM_ARIA_RESET: {
+    readonly 'aria-current': undefined;
+};
+export declare const ARK_TAB_ARIA_RESET: {
+    readonly role: undefined;
+    readonly 'aria-selected': undefined;
+    readonly 'aria-controls': undefined;
+};
+export declare const ARK_CONTENT_ARIA_RESET: {
+    readonly tabIndex: undefined;
+};
+/** The design supports up to six steps; more logs a dev warning. */
+export declare const STEPPER_MAX_STEPS = 6;
+export declare const DEFAULT_STEPPER_STATUS_LABELS: {
+    readonly completed: 'Completed';
+    readonly danger: 'Has errors';
+};

package/dist/components/Stepper/constants.js

@@ -0,0 +1,23 @@
+const REMOVE = null;
+const ARK_LIST_ARIA_RESET = {
+    role: REMOVE,
+    'aria-owns': REMOVE,
+    'aria-orientation': REMOVE
+};
+const ARK_ITEM_ARIA_RESET = {
+    'aria-current': REMOVE
+};
+const ARK_TAB_ARIA_RESET = {
+    role: REMOVE,
+    'aria-selected': REMOVE,
+    'aria-controls': REMOVE
+};
+const ARK_CONTENT_ARIA_RESET = {
+    tabIndex: REMOVE
+};
+const STEPPER_MAX_STEPS = 6;
+const DEFAULT_STEPPER_STATUS_LABELS = {
+    completed: 'Completed',
+    danger: 'Has errors'
+};
+export { ARK_CONTENT_ARIA_RESET, ARK_ITEM_ARIA_RESET, ARK_LIST_ARIA_RESET, ARK_TAB_ARIA_RESET, DEFAULT_STEPPER_STATUS_LABELS, STEPPER_MAX_STEPS };

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,15 @@
+export { Stepper, type StepperProps } from './Stepper';
+export { StepperContent, type StepperContentProps } from './StepperContent';
+export { type StepperItemContextValue, type UseStepperContextReturn, useStepperContext, useStepperItemContext, } from './StepperContext';
+export { StepperDescription, type StepperDescriptionProps } from './StepperDescription';
+export { StepperIndicator, type StepperIndicatorProps } from './StepperIndicator';
+export { StepperItem, type StepperItemProps } from './StepperItem';
+export { StepperList, type StepperListProps } from './StepperList';
+export { StepperNextTrigger, type StepperNextTriggerProps } from './StepperNextTrigger';
+export { StepperPrevTrigger, type StepperPrevTriggerProps } from './StepperPrevTrigger';
+export { StepperRootProvider, type StepperRootProviderProps } from './StepperRootProvider';
+export { StepperSeparator, type StepperSeparatorProps } from './StepperSeparator';
+export { StepperTitle, type StepperTitleProps } from './StepperTitle';
+export { StepperTrigger, type StepperTriggerProps } from './StepperTrigger';
+export type { StepperItemStatus, StepperStatusLabels, StepperVisualStatus } from './types';
+export { type UseStepperProps, type UseStepperReturn, useStepper } from './useStepper';

package/dist/components/Stepper/index.js

@@ -0,0 +1,14 @@
+export { Stepper } from "./Stepper.js";
+export { StepperContent } from "./StepperContent.js";
+export { useStepperContext, useStepperItemContext } from "./StepperContext.js";
+export { StepperDescription } from "./StepperDescription.js";
+export { StepperIndicator } from "./StepperIndicator.js";
+export { StepperItem } from "./StepperItem.js";
+export { StepperList } from "./StepperList.js";
+export { StepperNextTrigger } from "./StepperNextTrigger.js";
+export { StepperPrevTrigger } from "./StepperPrevTrigger.js";
+export { StepperRootProvider } from "./StepperRootProvider.js";
+export { StepperSeparator } from "./StepperSeparator.js";
+export { StepperTitle } from "./StepperTitle.js";
+export { StepperTrigger } from "./StepperTrigger.js";
+export { useStepper } from "./useStepper.js";

package/dist/components/Stepper/takeAsChildDisabled.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+/**
+ * With `asChild`, Ark merges the child's props over the trigger's, so a child `disabled={false}`
+ * (e.g. `<Button disabled={isSaving}>`) would re-enable Next on the last step or Prev on the first.
+ * This takes the child's `disabled` out, for the trigger to fold into its own, so the trigger's
+ * computed value always wins.
+ */
+export declare const takeAsChildDisabled: (asChild: boolean | undefined, children: ReactNode) => {
+    children: ReactNode;
+    childDisabled?: boolean;
+};

package/dist/components/Stepper/takeAsChildDisabled.js

@@ -0,0 +1,17 @@
+import { cloneElement, isValidElement } from "react";
+const takeAsChildDisabled = (asChild, children)=>{
+    if (!asChild || !isValidElement(children)) return {
+        children
+    };
+    const { disabled } = children.props;
+    if (void 0 === disabled) return {
+        children
+    };
+    return {
+        children: cloneElement(children, {
+            disabled: void 0
+        }),
+        childDisabled: disabled
+    };
+};
+export { takeAsChildDisabled };

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

@@ -0,0 +1,11 @@
+/** Status set by the page. `'active'` is never passed: it is derived from the current step. */
+export type StepperItemStatus = 'upcoming' | 'completed' | 'danger';
+/** Rendered state, exposed as `data-status`. */
+export type StepperVisualStatus = 'active' | StepperItemStatus;
+/** Screen-reader-only status suffixes (i18n). */
+export interface StepperStatusLabels {
+    /** Default `'Completed'`. */
+    completed?: string;
+    /** Default `'Has errors'`. */
+    danger?: string;
+}

package/dist/components/Stepper/useStepper.d.ts

@@ -0,0 +1,38 @@
+import { type UseStepsProps, type UseStepsReturn } from '@ark-ui/react/steps';
+/** Ark props the Stepper does not support: it never blocks a step and is horizontal only. */
+export type StepperOmittedArkProps = 'linear' | 'isStepValid' | 'isStepSkippable' | 'onStepInvalid' | 'onStepComplete' | 'orientation';
+export interface StepperGuardProps {
+    /** Number of steps, 1–6. Required: each `StepperItem` and `StepperContent` takes its `index`. */
+    count: number;
+    /** Controlled current step, 0-based. Clamped to `[0, count - 1]`. */
+    step?: number;
+    /** Uncontrolled initial step. Default `0`. Clamped to `[0, count - 1]`. */
+    defaultStep?: number;
+    /**
+     * Fires when a click changes the step, back or forward: `({ step }) => void`. A click on the
+     * current step does not fire it; use the trigger's `onClick` to observe that.
+     */
+    onStepChange?: UseStepsProps['onStepChange'];
+}
+/**
+ * The root guards shared by `Stepper` and `useStepper`: clamps `step` / `defaultStep`, warns in
+ * development, and never reports a step past the last one (Ark's "completed" state).
+ */
+export declare const useStepperGuards: ({ count, step, defaultStep, onStepChange }: StepperGuardProps) => {
+    count: number;
+    step?: number | undefined;
+    defaultStep?: number | undefined;
+    onStepChange: ((details: {
+        step: number;
+    }) => void) | undefined;
+};
+export interface UseStepperProps extends Omit<UseStepsProps, StepperOmittedArkProps | keyof StepperGuardProps>, StepperGuardProps {
+}
+export type UseStepperReturn = UseStepsReturn;
+/**
+ * Creates the Stepper machine outside the component, for `StepperRootProvider`. Wraps Ark's
+ * `useSteps` with the same guards as `Stepper` and `useStepperContext`: the step is clamped to
+ * `[0, count - 1]`, `setStep` clamps too, and Next / Back move from the shown step, so the machine
+ * never reaches Ark's "completed" state (`isCompleted` is always `false`).
+ */
+export declare const useStepper: ({ count, step, defaultStep, onStepChange, ...rest }: UseStepperProps) => UseStepperReturn;

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 {};