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

package/dist/components/Select/SelectGroupLabel.d.ts

@@ -1,5 +1,8 @@
-import type { FC } from 'react';
+import type { FC, Ref } from 'react';
 import { Select as ArkUiSelect } from '@ark-ui/react/select';
-type SelectGroupLabelProps = ArkUiSelect.ItemGroupLabelProps;
+import { type TestableProps } from '../../utils/testId';
+type SelectGroupLabelProps = ArkUiSelect.ItemGroupLabelProps & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+};
 export declare const SelectGroupLabel: FC<SelectGroupLabelProps>;
 export {};

package/dist/components/Select/SelectGroupLabel.js

@@ -3,8 +3,8 @@ import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { dropdownMenuLabelVariants } from "../DropdownMenu/index.js";
-const SelectGroupLabel = (props)=>{
-    const testId = useTestId('group-label');
+const SelectGroupLabel = ({ 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('group-label', testIdProp);
     return /*#__PURE__*/ jsx(Select.ItemGroupLabel, {
         ...props,
         "data-testid": testId,

package/dist/components/Select/SelectOption.js

@@ -12,7 +12,7 @@ const SelectOption = ({ variant = 'default', 'data-testid': testIdProp, ...props
         className: cn(dropdownMenuItemVariants({
             variant,
             inset: false
-        }), 'flex-wrap relative gap-y-0 gap-x-8 pr-32', 'data-[state=checked]:bg-states-primary-active', 'data-highlighted:bg-states-primary-hover')
+        }), 'flex-wrap relative gap-y-0 gap-x-8 pr-32', 'has-[>[data-slot=select-option-hint]]:flex-nowrap', 'data-[state=checked]:bg-states-primary-active', 'data-highlighted:bg-states-primary-hover')
     });
 };
 SelectOption.displayName = 'SelectOption';

package/dist/components/Select/SelectOptionHint.d.ts

@@ -0,0 +1,11 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../utils/testId';
+export interface SelectOptionHintProps extends HTMLAttributes<HTMLSpanElement>, TestableProps {
+    ref?: Ref<HTMLSpanElement>;
+}
+/**
+ * Secondary text at the right end of an option, such as a count. It sits before the indicator
+ * rather than under it: the option stops wrapping while a hint is present, so the label wraps
+ * inside its own box and the hint keeps its place on the first line.
+ */
+export declare const SelectOptionHint: FC<SelectOptionHintProps>;

package/dist/components/Select/SelectOptionHint.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
+const SelectOptionHint = ({ ref, className, 'data-testid': testIdProp, ...props })=>{
+    const testId = useTestId('option-hint', testIdProp);
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "select-option-hint",
+        "data-testid": testId,
+        className: cn('ml-auto shrink-0 self-start font-sans text-sm text-text-secondary tabular-nums', className)
+    });
+};
+SelectOptionHint.displayName = 'SelectOptionHint';
+export { SelectOptionHint };

package/dist/components/Select/SelectPositioner.d.ts

@@ -1,5 +1,15 @@
-import type { FC } from 'react';
+import type { FC, Ref } from 'react';
 import { Select as ArkUiSelect } from '@ark-ui/react/select';
-type SelectPositionerProps = ArkUiSelect.PositionerProps;
+export interface SelectPositionerProps extends ArkUiSelect.PositionerProps {
+    /**
+     * Props for the content element (the `listbox` panel inside the positioner) — for a ref, an
+     * inline measurement such as a locked width, or `data-*` attributes. `className` on the
+     * positioner itself already lands on the content, and overrides its default sizes
+     * (`min-w-240 max-w-320 max-h-(--available-height)`) through tailwind-merge.
+     */
+    contentProps?: Omit<ArkUiSelect.ContentProps, 'className' | 'children' | 'asChild'> & {
+        ref?: Ref<HTMLDivElement>;
+        [dataAttribute: `data-${string}`]: string | undefined;
+    };
+}
 export declare const SelectPositioner: FC<SelectPositionerProps>;
-export {};

package/dist/components/Select/SelectPositioner.js

@@ -3,11 +3,12 @@ import { Portal } from "@ark-ui/react/portal";
 import { Select } from "@ark-ui/react/select";
 import { cn } from "../../utils/cn.js";
 import { dropdownMenuClassNames } from "../DropdownMenu/index.js";
-const SelectPositioner = ({ className, children, ...props })=>/*#__PURE__*/ jsx(Portal, {
+const SelectPositioner = ({ className, children, contentProps, ...props })=>/*#__PURE__*/ jsx(Portal, {
         children: /*#__PURE__*/ jsx(Select.Positioner, {
             ...props,
             className: "outline-none",
             children: /*#__PURE__*/ jsx(Select.Content, {
+                ...contentProps,
                 className: cn(dropdownMenuClassNames, 'flex flex-col', 'h-full', 'min-w-240', 'max-w-320', 'max-h-(--available-height)', 'p-0', 'origin-[--transform-origin]', className),
                 children: children
             })

package/dist/components/Select/SelectSearchInput.d.ts

@@ -1,7 +1,10 @@
-import type { FC, HTMLAttributes } from 'react';
+import type { FC, InputHTMLAttributes, Ref } from 'react';
 import { type TestableProps } from '../../utils/testId';
-export interface SelectSearchInputProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'color'>, TestableProps {
+export interface SelectSearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange' | 'color' | 'size' | 'type' | 'value'>, TestableProps {
     value: string;
     onChange: (value: string) => void;
+    /** Called when the built-in clear button empties the field, before `onChange('')`. */
+    onClear?: () => void;
+    ref?: Ref<HTMLInputElement>;
 }
 export declare const SelectSearchInput: FC<SelectSearchInputProps>;

package/dist/components/Select/SelectSearchInput.js

@@ -1,12 +1,22 @@
 import { jsx } from "react/jsx-runtime";
 import { useTestId } from "../../utils/testId.js";
 import { SearchInput } from "../SearchInput/index.js";
-const SelectSearchInput = ({ value, onChange, 'data-testid': testIdProp, ...rest })=>{
+const INPUT_OWNED_KEYS = new Set([
+    ' ',
+    'Home',
+    'End'
+]);
+const SelectSearchInput = ({ value, onChange, onKeyDown, 'data-testid': testIdProp, ...rest })=>{
     const testId = useTestId('search-input', testIdProp);
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (INPUT_OWNED_KEYS.has(event.key)) event.stopPropagation();
+    };
     return /*#__PURE__*/ jsx(SearchInput, {
         ...rest,
         value: value,
         onChange: onChange,
+        onKeyDown: handleKeyDown,
         "data-testid": testId
     });
 };

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

@@ -0,0 +1,3 @@
+export declare const selectFooterVariants: (props?: ({
+    variant?: "actions" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Select/classes.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+const selectFooterVariants = cva('shrink-0 border-t', {
+    variants: {
+        variant: {
+            default: 'bg-component-outline-button-bg py-8 px-16 border-border-primary',
+            actions: 'flex items-center justify-end gap-8 p-8 border-border-primary-light'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+export { selectFooterVariants };

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

@@ -1,20 +1,22 @@
 export { createListCollection } from '@ark-ui/react/collection';
+export { selectFooterVariants } from './classes';
 export { Select } from './Select';
 export { SelectButton } from './SelectButton';
 export { SelectButtonTag, SelectButtonTagValue } from './SelectButtonTag';
 export { SelectClearTrigger } from './SelectClearTrigger';
 export { SelectContent } from './SelectContent';
 export { SelectEmptyState, type SelectEmptyStateProps } from './SelectEmptyState';
-export { SelectFooter } from './SelectFooter';
+export { SelectFooter, type SelectFooterProps } from './SelectFooter';
 export { SelectGroup } from './SelectGroup';
 export { SelectGroupLabel } from './SelectGroupLabel';
 export { SelectHeader } from './SelectHeader';
 export { SelectInput } from './SelectInput';
 export { SelectOption } from './SelectOption';
 export { SelectOptionDescription } from './SelectOptionDescription';
+export { SelectOptionHint, type SelectOptionHintProps } from './SelectOptionHint';
 export { SelectOptionIndicator } from './SelectOptionIndicator';
 export { SelectOptionText } from './SelectOptionText';
-export { SelectPositioner } from './SelectPositioner';
+export { SelectPositioner, type SelectPositionerProps } from './SelectPositioner';
 export { SelectSearchInput, type SelectSearchInputProps } from './SelectSearchInput';
 export { SelectSeparator, type SelectSeparatorProps } from './SelectSeparator';
 export type { SelectDataItem } from './types';

package/dist/components/Select/index.js

@@ -1,4 +1,5 @@
 export { createListCollection } from "@ark-ui/react/collection";
+export { selectFooterVariants } from "./classes.js";
 export { Select } from "./Select.js";
 export { SelectButton } from "./SelectButton.js";
 export { SelectButtonTag, SelectButtonTagValue } from "./SelectButtonTag/index.js";
@@ -12,6 +13,7 @@ export { SelectHeader } from "./SelectHeader.js";
 export { SelectInput } from "./SelectInput/index.js";
 export { SelectOption } from "./SelectOption.js";
 export { SelectOptionDescription } from "./SelectOptionDescription.js";
+export { SelectOptionHint } from "./SelectOptionHint.js";
 export { SelectOptionIndicator } from "./SelectOptionIndicator.js";
 export { SelectOptionText } from "./SelectOptionText.js";
 export { SelectPositioner } from "./SelectPositioner.js";

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 + scrollMargin - (virtualRows[virtualRows.length - 1]?.end ?? 0)}px`,
+                            height: `${totalSize - (virtualRows[virtualRows.length - 1]?.end ?? 0)}px`,
                             padding: 0,
                             border: 'none'
                         },

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

@@ -1,39 +1,20 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useLayoutEffect, useRef } from "react";
-import { elementScroll, observeElementOffset, observeElementRect, observeWindowOffset, observeWindowRect, useVirtualizer } from "@tanstack/react-virtual";
-import { WindowScrollRootContext } from "../hooks/useWindowScrollRoot.js";
-import { TABLE_VIRTUALIZATION_OVERSCAN, getOffsetTopInScrollRoot, getRowKey, getScrollMetrics } from "../lib/index.js";
+import { useCallback, useEffect } from "react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { TABLE_VIRTUALIZATION_OVERSCAN, getRowKey } 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 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({
+    const virtualizer = useWindowVirtualizer({
         count: table.getRowModel().rows.length,
-        getScrollElement: getScrollElement,
-        observeElementRect: observeRootRect,
-        observeElementOffset: observeRootOffset,
-        scrollToFn: elementScroll,
-        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 && scrollRoot ? getOffsetTopInScrollRoot(tbodyRef.current, scrollRoot) : 0,
+        scrollMargin: tbodyRef.current ? getDocumentOffsetTop(tbodyRef.current) : 0,
         getItemKey: useCallback((index)=>getRowKey(table.getRowModel().rows, index), [
             table
         ]),
@@ -46,7 +27,8 @@ const TableBodyVirtualizedWindow = ()=>{
         virtualizerRef
     ]);
     useResetVirtualizerOnDataChange(table, virtualizer);
-    useSmoothScrollOnSort(table, getScrollElement);
+    const getScrollTarget = useCallback(()=>window, []);
+    useSmoothScrollOnSort(table, getScrollTarget);
     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 { WindowScrollRootContext, useInfiniteScroll, useWheelHorizontalScroll, useWindowScrollRoot } from "../hooks/index.js";
+import { useInfiniteScroll, useWheelHorizontalScroll } from "../hooks/index.js";
 import { useContainerWidth } from "../lib/index.js";
 import { StickyGroupParent } from "../StickyGroupParent.js";
 import { TableBody } from "../TableBody/index.js";
@@ -15,10 +15,8 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
     const testId = useTestId('window');
     const rootRef = useRef(null);
     const containerWidth = useContainerWidth(rootRef);
-    const scrollRoot = useWindowScrollRoot(containerRef);
     useInfiniteScroll({
         mode: 'window',
-        scrollRoot,
         table,
         virtualizerRef,
         tbodyRef,
@@ -104,10 +102,7 @@ const TableInnerWindow = ({ isEmpty, showSettings, hasConsumerSettingsMenu, aria
                                 /*#__PURE__*/ jsx(TableColGroup, {
                                     tableWidth: tableWidth
                                 }),
-                                !isEmpty && /*#__PURE__*/ jsx(WindowScrollRootContext, {
-                                    value: scrollRoot,
-                                    children: /*#__PURE__*/ jsx(TableBody, {})
-                                })
+                                !isEmpty && /*#__PURE__*/ jsx(TableBody, {})
                             ]
                         }),
                         children

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

@@ -4,4 +4,3 @@ 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,4 +4,3 @@ 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,13 +1,11 @@
 import type { RefObject } from 'react';
 import type { RowData, Table } from '@tanstack/react-table';
-import { type DSTableFeatures, type ScrollRoot } from '../../lib';
+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 */
     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>;
@@ -20,5 +18,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, scrollRoot, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious, }: UseInfiniteScrollOptions<T>) => void;
+export declare const useInfiniteScroll: <T extends RowData>({ mode, scrollRef, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious, }: UseInfiniteScrollOptions<T>) => void;
 export {};

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

@@ -2,7 +2,7 @@ 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, scrollRoot, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious })=>{
+const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, tbodyRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, isLoadingPrevious })=>{
     const rows = table.getRowModel().rows;
     const ready = useInitialAnchor({
         initialScrollToRowId,
@@ -12,7 +12,6 @@ const useInfiniteScroll = ({ mode, scrollRef, scrollRoot, table, virtualizerRef,
     usePrependScrollAnchor({
         mode,
         scrollRef,
-        scrollRoot,
         rows,
         virtualizerRef,
         tbodyRef,
@@ -22,7 +21,6 @@ const useInfiniteScroll = ({ mode, scrollRef, scrollRoot, table, virtualizerRef,
         edge: 'start',
         mode,
         scrollRef,
-        scrollRoot,
         onReached: onStartReached,
         threshold: onStartReachedThreshold ?? TABLE_START_REACHED_THRESHOLD,
         enabled: ready
@@ -31,7 +29,6 @@ const useInfiniteScroll = ({ mode, scrollRef, scrollRoot, table, virtualizerRef,
         edge: 'end',
         mode,
         scrollRef,
-        scrollRoot,
         onReached: onEndReached,
         threshold: onEndReachedThreshold ?? TABLE_END_REACHED_THRESHOLD,
         enabled: ready

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

@@ -1,11 +1,8 @@
 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;
     }[];
@@ -34,5 +31,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, scrollRoot, rows, virtualizerRef, tbodyRef, isLoadingPrevious, }: UsePrependScrollAnchorOptions) => void;
+export declare const usePrependScrollAnchor: ({ mode, scrollRef, 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, getScrollMetrics, scrollRootBy } from "../../lib/index.js";
-const usePrependScrollAnchor = ({ mode, scrollRef, scrollRoot, rows, virtualizerRef, tbodyRef, isLoadingPrevious })=>{
+import { detectDataChange } from "../../lib/index.js";
+const usePrependScrollAnchor = ({ mode, scrollRef, rows, virtualizerRef, tbodyRef, isLoadingPrevious })=>{
     const prevFirstRowIdRef = useRef(void 0);
     const prevLastRowIdRef = useRef(void 0);
     const prevIsLoadingPreviousRef = useRef(false);
@@ -12,15 +12,7 @@ const usePrependScrollAnchor = ({ mode, scrollRef, scrollRoot, rows, virtualizer
     });
     const seededRef = useRef(false);
     useLayoutEffect(()=>{
-        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 getScrollHeight = ()=>'window' === mode ? document.documentElement.scrollHeight : scrollRef?.current?.scrollHeight ?? 0;
         const getStartLoaderHeight = ()=>{
             const loaderRows = tbodyRef?.current?.querySelectorAll('tr[data-loading-position="start"]');
             const count = loaderRows?.length ?? 0;
@@ -62,10 +54,16 @@ const usePrependScrollAnchor = ({ mode, scrollRef, scrollRoot, rows, virtualizer
                 const rowDelta = newStart - prevFirstRowStartRef.current;
                 const loaderDelta = getStartLoaderHeight() - prevLoaderHeight;
                 const delta = rowDelta + loaderDelta;
-                if (0 !== delta) scrollBy(delta);
+                if (0 !== delta) {
+                    if ('window' === mode) window.scrollBy(0, delta);
+                    else if (scrollRef?.current) scrollRef.current.scrollTop += delta;
+                }
             } else if (null !== prevScrollHeightRef.current) {
                 const delta = getScrollHeight() - prevScrollHeightRef.current;
-                if (delta > 0) scrollBy(delta);
+                if (delta > 0) {
+                    if ('window' === mode) window.scrollBy(0, delta);
+                    else if (scrollRef?.current) scrollRef.current.scrollTop += delta;
+                }
             }
         }
         prevFirstRowIdRef.current = rows[0]?.id;

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

@@ -1,5 +1,4 @@
 import { type RefObject } from 'react';
-import { type ScrollRoot } from '../../lib';
 type ScrollMode = 'container' | 'window';
 type ScrollEdge = 'start' | 'end';
 interface UseScrollEdgeOptions {
@@ -11,13 +10,11 @@ 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, scrollRoot, }: UseScrollEdgeOptions) => void;
+export declare const useScrollEdge: ({ edge, mode, scrollRef, onReached, threshold, enabled, }: 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, getScrollMetrics } from "../../lib/index.js";
-const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled = true, scrollRoot })=>{
+import { SCROLL_EDGE_COOLDOWN_MS } from "../../lib/index.js";
+const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled = true })=>{
     const firedRef = useRef(false);
     const lastFiredAtRef = useRef(0);
     const onReachedRef = useRef(onReached);
@@ -12,12 +12,23 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         enabledRef.current = enabled;
     });
     useEffect(()=>{
-        const target = 'window' === mode ? scrollRoot : scrollRef?.current;
-        if (!target) return;
         const check = ()=>{
             const callback = onReachedRef.current;
             if (!callback || !enabledRef.current) return;
-            const { scrollTop, clientHeight, scrollHeight } = getScrollMetrics(target);
+            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 distance = 'start' === edge ? scrollTop : scrollHeight - scrollTop - clientHeight;
             if (distance <= threshold) {
                 const now = Date.now();
@@ -28,6 +39,8 @@ 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
         });
@@ -39,7 +52,6 @@ const useScrollEdge = ({ edge, mode, scrollRef, onReached, threshold, enabled =
         edge,
         mode,
         scrollRef,
-        scrollRoot,
         threshold
     ]);
 };

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

@@ -11,7 +11,6 @@ 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,7 +11,6 @@ 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/types.d.ts

@@ -245,10 +245,7 @@ export interface TableProps<T> extends TestableProps {
      * the close edge here.
      */
     onSettingsOpenChange?: (open: boolean) => void;
-    /**
-     * 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.
-     */
+    /** Enable row virtualization. `'container'` virtualizes within the scroll container; `'window'` virtualizes against the browser window. */
     virtualized?: TableVirtualized;
     /**
      * Whether columns stretch proportionally to fill the container width.

package/dist/index.d.ts

@@ -36,6 +36,7 @@ export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustr
 export { FeedbackPulse, type FeedbackPulseCloseReason, type FeedbackPulseProps, } from './components/FeedbackPulse';
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, } from './components/Field';
 export { FileUpload, FileUploadDropzone, type FileUploadDropzoneProps, FileUploadError, type FileUploadErrorCode, type FileUploadErrorProps, FileUploadItem, FileUploadItemAction, type FileUploadItemActionProps, FileUploadItemDeleteTrigger, type FileUploadItemDeleteTriggerProps, type FileUploadItemFile, FileUploadItemGroup, type FileUploadItemGroupProps, type FileUploadItemProps, FileUploadItemReplaceTrigger, type FileUploadItemReplaceTriggerProps, type FileUploadProps, type FileUploadRejection, FileUploadTrigger, type FileUploadTriggerProps, fileUploadDropzoneVariants, fileUploadItemVariants, fileUploadVariants, } from './components/FileUpload';
+export { FilterDropdown, FilterDropdownAllOption, type FilterDropdownAllOptionProps, FilterDropdownClear, type FilterDropdownClearProps, FilterDropdownContent, type FilterDropdownContentProps, FilterDropdownEmpty, type FilterDropdownEmptyProps, FilterDropdownFooter, FilterDropdownFooterClear, type FilterDropdownFooterClearProps, type FilterDropdownFooterProps, FilterDropdownGroup, FilterDropdownGroupLabel, type FilterDropdownGroupLabelProps, type FilterDropdownGroupProps, type FilterDropdownOpenChangeDetails, FilterDropdownOption, type FilterDropdownOptionProps, type FilterDropdownProps, FilterDropdownSearch, type FilterDropdownSearchProps, FilterDropdownSelected, type FilterDropdownSelectedProps, FilterDropdownTrigger, type FilterDropdownTriggerProps, type FilterDropdownValueChangeDetails, filterDropdownControlVariants, filterDropdownTriggerVariants, type UseFilterDropdownResult, useFilterDropdown, } from './components/FilterDropdown';
 export { type Condition, type ExprNode, type FieldMetadata, type FieldType, FilterInput, FilterInputChip, type FilterInputChipData, type FilterInputChipProps, type FilterInputChipVariant, FilterInputFieldMenu, type FilterInputFieldMenuProps, FilterInputOperatorMenu, type FilterInputOperatorMenuProps, type FilterInputProps, type FilterOperator, type Group, } from './components/FilterInput';
 export { Flex, type FlexProps } from './components/Flex';
 export { FormatDateTime, type FormatDateTimeProps } from './components/FormatDateTime';
@@ -73,7 +74,7 @@ export { SearchInput, type SearchInputProps } from './components/SearchInput';
 export { SearchModal, SearchModalBody, type SearchModalBodyProps, SearchModalContent, type SearchModalContentProps, SearchModalEmpty, type SearchModalEmptyProps, SearchModalFooter, type SearchModalFooterProps, SearchModalGroup, SearchModalGroupLabel, type SearchModalGroupLabelProps, type SearchModalGroupProps, SearchModalInput, type SearchModalInputProps, SearchModalItem, type SearchModalItemProps, type SearchModalProps, SearchModalTrigger, type SearchModalTriggerProps, useSearchModalContext, } from './components/SearchModal';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
-export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select';
+export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, type SelectFooterProps, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionHint, type SelectOptionHintProps, SelectOptionIndicator, SelectOptionText, SelectPositioner, type SelectPositionerProps, SelectSearchInput, SelectSeparator, selectFooterVariants, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select';
 export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, type SelectionContextValue, SelectionItem, type SelectionItemProps, type SelectionProps, useSelectionContext, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { SettingsHeader, SettingsHeaderActions, type SettingsHeaderActionsProps, SettingsHeaderBreadcrumbs, type SettingsHeaderBreadcrumbsProps, SettingsHeaderDescription, type SettingsHeaderDescriptionProps, SettingsHeaderFilters, type SettingsHeaderFiltersProps, SettingsHeaderHeading, type SettingsHeaderHeadingProps, type SettingsHeaderProps, SettingsHeaderTitle, type SettingsHeaderTitleProps, } from './components/SettingsHeader';

package/dist/index.js

@@ -25,6 +25,7 @@ export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIllustr
 export { FeedbackPulse } from "./components/FeedbackPulse/index.js";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "./components/Field/index.js";
 export { FileUpload, FileUploadDropzone, FileUploadError, FileUploadItem, FileUploadItemAction, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemReplaceTrigger, FileUploadTrigger, fileUploadDropzoneVariants, fileUploadItemVariants, fileUploadVariants } from "./components/FileUpload/index.js";
+export { FilterDropdown, FilterDropdownAllOption, FilterDropdownClear, FilterDropdownContent, FilterDropdownEmpty, FilterDropdownFooter, FilterDropdownFooterClear, FilterDropdownGroup, FilterDropdownGroupLabel, FilterDropdownOption, FilterDropdownSearch, FilterDropdownSelected, FilterDropdownTrigger, filterDropdownControlVariants, filterDropdownTriggerVariants, useFilterDropdown } from "./components/FilterDropdown/index.js";
 export { FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu } from "./components/FilterInput/index.js";
 export { Flex } from "./components/Flex/index.js";
 export { FormatDateTime } from "./components/FormatDateTime/index.js";
@@ -62,7 +63,7 @@ export { SearchInput } from "./components/SearchInput/index.js";
 export { SearchModal, SearchModalBody, SearchModalContent, SearchModalEmpty, SearchModalFooter, SearchModalGroup, SearchModalGroupLabel, SearchModalInput, SearchModalItem, SearchModalTrigger, useSearchModalContext } from "./components/SearchModal/index.js";
 export { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
-export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, useSelectSearch } from "./components/Select/index.js";
+export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionHint, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, selectFooterVariants, useSelectSearch } from "./components/Select/index.js";
 export { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext } from "./components/Selection/index.js";
 export { Separator } from "./components/Separator/index.js";
 export { SettingsHeader, SettingsHeaderActions, SettingsHeaderBreadcrumbs, SettingsHeaderDescription, SettingsHeaderFilters, SettingsHeaderHeading, SettingsHeaderTitle } from "./components/SettingsHeader/index.js";