@wallarm-org/design-system 0.50.1 → 0.51.0-rc-feature-AS-1026.1

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { TABLE_VIRTUALIZATION_OVERSCAN } from "../lib/index.js";
+import { TABLE_VIRTUALIZATION_OVERSCAN, getRowKey } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
 import { useResetVirtualizerOnDataChange } from "./useResetVirtualizerOnDataChange.js";
@@ -15,7 +15,10 @@ const TableBodyVirtualizedContainer = ()=>{
         count: table.getRowModel().rows.length,
         getScrollElement,
         estimateSize: estimateRowHeight ?? (()=>40),
-        overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN
+        overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN,
+        getItemKey: useCallback((index)=>getRowKey(table.getRowModel().rows, index), [
+            table
+        ])
     });
     virtualizerRef.current = virtualizer;
     useEffect(()=>()=>{

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

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useEffect } from "react";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
-import { TABLE_VIRTUALIZATION_OVERSCAN } from "../lib/index.js";
+import { TABLE_VIRTUALIZATION_OVERSCAN, getRowKey } from "../lib/index.js";
 import { useTableContext } from "../TableContext/index.js";
 import { getDocumentOffsetTop } from "./lib/getDocumentOffsetTop.js";
 import { TableBodyVirtualizedCore } from "./TableBodyVirtualizedCore.js";
@@ -13,7 +13,10 @@ const TableBodyVirtualizedWindow = ()=>{
         count: table.getRowModel().rows.length,
         estimateSize: estimateRowHeight ?? (()=>40),
         overscan: overscan ?? TABLE_VIRTUALIZATION_OVERSCAN,
-        scrollMargin: tbodyRef.current ? getDocumentOffsetTop(tbodyRef.current) : 0
+        scrollMargin: tbodyRef.current ? getDocumentOffsetTop(tbodyRef.current) : 0,
+        getItemKey: useCallback((index)=>getRowKey(table.getRowModel().rows, index), [
+            table
+        ])
     });
     virtualizerRef.current = virtualizer;
     useEffect(()=>()=>{

package/dist/components/Table/TableBody/useResetVirtualizerOnDataChange.d.ts

@@ -1,8 +1,8 @@
 import type { Table } from '@tanstack/react-table';
 import type { Virtualizer } from '@tanstack/react-virtual';
 /**
- * Reset cached measurements when the data set changes so the virtualizer
- * does not retain stale heights from a previous data set.
- * Tracks first row ID to distinguish "new data" from "appended rows" (infinite scroll).
+ * Reset cached measurements only on a full dataset replacement. On a prepend
+ * (infinite scroll up) measurements are kept — usePrependScrollAnchor handles
+ * the position — so the virtualizer does not re-measure and jump.
  */
 export declare const useResetVirtualizerOnDataChange: (table: Table<unknown>, virtualizer: Virtualizer<Element, Element> | Virtualizer<Window, Element> | Virtualizer<HTMLElement, Element>) => void;

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

@@ -1,15 +1,17 @@
 import { useEffect, useRef } from "react";
+import { detectDataChange } from "../lib/index.js";
 const useResetVirtualizerOnDataChange = (table, virtualizer)=>{
-    const rows = table.getRowModel().rows;
-    const firstRowId = rows[0]?.id;
+    const firstRowId = table.getRowModel().rows[0]?.id;
     const prevFirstRowIdRef = useRef(firstRowId);
     useEffect(()=>{
-        if (prevFirstRowIdRef.current !== firstRowId) {
-            prevFirstRowIdRef.current = firstRowId;
-            virtualizer.measure();
-        }
+        if (prevFirstRowIdRef.current === firstRowId) return;
+        const rows = table.getRowModel().rows;
+        const change = detectDataChange(prevFirstRowIdRef.current, rows);
+        prevFirstRowIdRef.current = firstRowId;
+        if ('replace' === change) virtualizer.measure();
     }, [
         firstRowId,
+        table,
         virtualizer
     ]);
 };

package/dist/components/Table/TableContext/TableProvider.js

@@ -8,7 +8,7 @@ import { useTableState } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, createExpandColumn, createSelectionColumn } from "../lib/index.js";
 import { TableContext } from "./TableContext.js";
 const TableProvider = (props)=>{
-    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onMasterCellClick, activeRowId: activeRowIdProp } = props;
+    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId, onMasterCellClick, activeRowId: activeRowIdProp } = props;
     const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
@@ -215,6 +215,9 @@ const TableProvider = (props)=>{
             virtualizerRef,
             onEndReached,
             onEndReachedThreshold,
+            onStartReached,
+            onStartReachedThreshold,
+            initialScrollToRowId,
             onMasterCellClick,
             activeRowId: masterCellActiveRowId
         }), [
@@ -241,6 +244,9 @@ const TableProvider = (props)=>{
         masterColumnId,
         onEndReached,
         onEndReachedThreshold,
+        onStartReached,
+        onStartReachedThreshold,
+        initialScrollToRowId,
         masterCellActiveRowId,
         onMasterCellClick
     ]);

package/dist/components/Table/TableContext/types.d.ts

@@ -37,6 +37,9 @@ export interface TableContextValue<T> {
     virtualizerRef: RefObject<TableVirtualizerInstance | null>;
     onEndReached?: () => void;
     onEndReachedThreshold?: number;
+    onStartReached?: () => void;
+    onStartReachedThreshold?: number;
+    initialScrollToRowId?: string;
     onMasterCellClick?: (rowId: string) => void;
     activeRowId: string | null;
 }

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

@@ -4,7 +4,7 @@ import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
 import { ScrollArea, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "../../ScrollArea/index.js";
 import { tableContainerVariants } from "../classes.js";
-import { useEndReached } from "../hooks/index.js";
+import { useInfiniteScroll } from "../hooks/index.js";
 import { useContainerWidth } from "../lib/index.js";
 import { TableBody } from "../TableBody/index.js";
 import { TableColGroup } from "../TableColGroup.js";
@@ -12,15 +12,20 @@ import { useTableContext } from "../TableContext/index.js";
 import { TableHead } from "../TableHead.js";
 import { TableSettingsMenu } from "../TableSettingsMenu/index.js";
 const TableInnerContainer = ({ isEmpty, virtualized, showSettings, ariaLabel, children })=>{
-    const { containerRef, table, onEndReached, onEndReachedThreshold } = useTableContext();
+    const { containerRef, table, virtualizerRef, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId } = useTableContext();
     const testId = useTestId('container');
     const scrollRootRef = useRef(null);
     const containerWidth = useContainerWidth(containerRef);
-    useEndReached({
+    useInfiniteScroll({
         mode: 'container',
         scrollRef: containerRef,
+        table,
+        virtualizerRef,
         onEndReached,
-        threshold: onEndReachedThreshold
+        onEndReachedThreshold,
+        onStartReached,
+        onStartReachedThreshold,
+        initialScrollToRowId
     });
     useEffect(()=>{
         const viewport = containerRef.current;

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 { useEndReached } from "../hooks/index.js";
+import { useInfiniteScroll } from "../hooks/index.js";
 import { useContainerWidth } from "../lib/index.js";
 import { TableBody } from "../TableBody/index.js";
 import { TableColGroup } from "../TableColGroup.js";
@@ -10,15 +10,20 @@ import { useTableContext } from "../TableContext/index.js";
 import { TableHead } from "../TableHead.js";
 import { TableSettingsMenu } from "../TableSettingsMenu/index.js";
 const TableInnerWindow = ({ isEmpty, showSettings, ariaLabel, children })=>{
-    const { table, onEndReached, onEndReachedThreshold } = useTableContext();
+    const { table, virtualizerRef, onEndReached, onEndReachedThreshold, onStartReached, onStartReachedThreshold, initialScrollToRowId } = useTableContext();
     const testId = useTestId('window');
     const rootRef = useRef(null);
     const scrollRef = useRef(null);
     const containerWidth = useContainerWidth(rootRef);
-    useEndReached({
+    useInfiniteScroll({
         mode: 'window',
+        table,
+        virtualizerRef,
         onEndReached,
-        threshold: onEndReachedThreshold
+        onEndReachedThreshold,
+        onStartReached,
+        onStartReachedThreshold,
+        initialScrollToRowId
     });
     useEffect(()=>{
         const scrollEl = scrollRef.current;

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

@@ -1,4 +1,4 @@
-export { useEndReached } from './useEndReached';
+export { useInfiniteScroll } from './infiniteScroll';
 export { useHorizontalScrollState } from './useHorizontalScrollState';
 export { useMasterCell } from './useMasterCell';
 export { useTableState } from './useTableState';

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

@@ -1,5 +1,5 @@
-import { useEndReached } from "./useEndReached.js";
+import { useInfiniteScroll } from "./infiniteScroll/index.js";
 import { useHorizontalScrollState } from "./useHorizontalScrollState.js";
 import { useMasterCell } from "./useMasterCell.js";
 import { useTableState } from "./useTableState.js";
-export { useEndReached, useHorizontalScrollState, useMasterCell, useTableState };
+export { useHorizontalScrollState, useInfiniteScroll, useMasterCell, useTableState };

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

@@ -0,0 +1 @@
+export { useInfiniteScroll } from './useInfiniteScroll';

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

@@ -0,0 +1,2 @@
+import { useInfiniteScroll } from "./useInfiniteScroll.js";
+export { useInfiniteScroll };

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

@@ -0,0 +1,18 @@
+import type { RefObject } from 'react';
+import type { Table } from '@tanstack/react-table';
+import type { TableVirtualizerInstance } from '../../TableContext/types';
+interface UseInfiniteScrollOptions<T> {
+    mode: 'container' | 'window';
+    /** Scroll element ref — required for `container` mode */
+    scrollRef?: RefObject<HTMLElement | null>;
+    table: Table<T>;
+    virtualizerRef: RefObject<TableVirtualizerInstance | null>;
+    onStartReached?: () => void;
+    onStartReachedThreshold?: number;
+    onEndReached?: () => void;
+    onEndReachedThreshold?: number;
+    initialScrollToRowId?: string;
+}
+/** Single entry point for bidirectional infinite scroll behavior. */
+export declare const useInfiniteScroll: <T>({ mode, scrollRef, table, virtualizerRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId, }: UseInfiniteScrollOptions<T>) => void;
+export {};

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

@@ -0,0 +1,34 @@
+import { TABLE_END_REACHED_THRESHOLD, TABLE_START_REACHED_THRESHOLD } from "../../lib/index.js";
+import { useInitialAnchor } from "./useInitialAnchor.js";
+import { usePrependScrollAnchor } from "./usePrependScrollAnchor.js";
+import { useScrollEdge } from "./useScrollEdge.js";
+const useInfiniteScroll = ({ mode, scrollRef, table, virtualizerRef, onStartReached, onStartReachedThreshold, onEndReached, onEndReachedThreshold, initialScrollToRowId })=>{
+    const rows = table.getRowModel().rows;
+    const ready = useInitialAnchor({
+        initialScrollToRowId,
+        rows,
+        virtualizerRef
+    });
+    usePrependScrollAnchor({
+        mode,
+        scrollRef,
+        rows
+    });
+    useScrollEdge({
+        edge: 'start',
+        mode,
+        scrollRef,
+        onReached: onStartReached,
+        threshold: onStartReachedThreshold ?? TABLE_START_REACHED_THRESHOLD,
+        enabled: ready
+    });
+    useScrollEdge({
+        edge: 'end',
+        mode,
+        scrollRef,
+        onReached: onEndReached,
+        threshold: onEndReachedThreshold ?? TABLE_END_REACHED_THRESHOLD,
+        enabled: ready
+    });
+};
+export { useInfiniteScroll };

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

@@ -0,0 +1,16 @@
+import { type RefObject } from 'react';
+import type { TableVirtualizerInstance } from '../../TableContext/types';
+interface UseInitialAnchorOptions {
+    initialScrollToRowId?: string;
+    rows: {
+        id: string;
+    }[];
+    virtualizerRef: RefObject<TableVirtualizerInstance | null>;
+}
+/**
+ * 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 {};

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

@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from "react";
+const useInitialAnchor = ({ initialScrollToRowId, rows, virtualizerRef })=>{
+    const [ready, setReady] = useState(!initialScrollToRowId);
+    const doneRef = useRef(false);
+    useEffect(()=>{
+        if (doneRef.current || !initialScrollToRowId) return;
+        const virtualizer = virtualizerRef.current;
+        if (!virtualizer) {
+            doneRef.current = true;
+            setReady(true);
+            return;
+        }
+        const index = rows.findIndex((r)=>r.id === initialScrollToRowId);
+        if (index < 0) return;
+        virtualizer.scrollToIndex(index, {
+            align: 'center'
+        });
+        doneRef.current = true;
+        const raf = requestAnimationFrame(()=>setReady(true));
+        return ()=>cancelAnimationFrame(raf);
+    }, [
+        initialScrollToRowId,
+        rows,
+        virtualizerRef
+    ]);
+    return ready;
+};
+export { useInitialAnchor };

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

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+interface UsePrependScrollAnchorOptions {
+    mode: 'container' | 'window';
+    scrollRef?: RefObject<HTMLElement | null>;
+    rows: {
+        id: string;
+    }[];
+}
+/**
+ * Keeps the viewport visually stable when rows are prepended: measures the
+ * scrollHeight delta and adds it to scrollTop. Runs in a layout effect so the
+ * adjustment lands before paint (no flicker).
+ */
+export declare const usePrependScrollAnchor: ({ mode, scrollRef, rows, }: UsePrependScrollAnchorOptions) => void;
+export {};

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

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useRef } from "react";
+import { detectDataChange } from "../../lib/index.js";
+const usePrependScrollAnchor = ({ mode, scrollRef, rows })=>{
+    const prevFirstRowIdRef = useRef(rows[0]?.id);
+    const prevScrollHeightRef = useRef(null);
+    useLayoutEffect(()=>{
+        const getScrollHeight = ()=>'window' === mode ? document.documentElement.scrollHeight : scrollRef?.current?.scrollHeight ?? 0;
+        if (null === prevScrollHeightRef.current) {
+            prevScrollHeightRef.current = getScrollHeight();
+            prevFirstRowIdRef.current = rows[0]?.id;
+            return;
+        }
+        if ('prepend' === detectDataChange(prevFirstRowIdRef.current, rows)) {
+            const delta = getScrollHeight() - prevScrollHeightRef.current;
+            if (delta > 0) {
+                if ('window' === mode) window.scrollBy(0, delta);
+                else if (scrollRef?.current) scrollRef.current.scrollTop += delta;
+            }
+        }
+        prevFirstRowIdRef.current = rows[0]?.id;
+        prevScrollHeightRef.current = getScrollHeight();
+    }, [
+        rows,
+        mode,
+        scrollRef
+    ]);
+};
+export { usePrependScrollAnchor };

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

@@ -0,0 +1,20 @@
+import { type RefObject } from 'react';
+type ScrollMode = 'container' | 'window';
+type ScrollEdge = 'start' | 'end';
+interface UseScrollEdgeOptions {
+    edge: ScrollEdge;
+    mode: ScrollMode;
+    /** Scroll element ref — required for `container` mode */
+    scrollRef?: RefObject<HTMLElement | null>;
+    onReached?: () => void;
+    threshold: number;
+    /** When false, suppresses firing (e.g. while the initial anchor scroll settles) */
+    enabled?: boolean;
+}
+/**
+ * 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 {};

package/dist/components/Table/hooks/{useEndReached.js → infiniteScroll/useScrollEdge.js}

@@ -1,17 +1,20 @@
 import { useEffect, useRef } from "react";
-import { TABLE_END_REACHED_THRESHOLD } from "../lib/index.js";
-const COOLDOWN_MS = 200;
-const useEndReached = ({ mode, scrollRef, onEndReached, threshold = TABLE_END_REACHED_THRESHOLD })=>{
+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 onEndReachedRef = useRef(onEndReached);
+    const onReachedRef = useRef(onReached);
     useEffect(()=>{
-        onEndReachedRef.current = onEndReached;
+        onReachedRef.current = onReached;
+    });
+    const enabledRef = useRef(enabled);
+    useEffect(()=>{
+        enabledRef.current = enabled;
     });
     useEffect(()=>{
         const check = ()=>{
-            const callback = onEndReachedRef.current;
-            if (!callback) return;
+            const callback = onReachedRef.current;
+            if (!callback || !enabledRef.current) return;
             let scrollTop;
             let clientHeight;
             let scrollHeight;
@@ -26,10 +29,10 @@ const useEndReached = ({ mode, scrollRef, onEndReached, threshold = TABLE_END_RE
                 clientHeight = el.clientHeight;
                 scrollHeight = el.scrollHeight;
             }
-            const distanceToBottom = scrollHeight - scrollTop - clientHeight;
-            if (distanceToBottom <= threshold) {
+            const distance = 'start' === edge ? scrollTop : scrollHeight - scrollTop - clientHeight;
+            if (distance <= threshold) {
                 const now = Date.now();
-                if (!firedRef.current && now - lastFiredAtRef.current >= COOLDOWN_MS) {
+                if (!firedRef.current && now - lastFiredAtRef.current >= SCROLL_EDGE_COOLDOWN_MS) {
                     firedRef.current = true;
                     lastFiredAtRef.current = now;
                     callback();
@@ -46,9 +49,10 @@ const useEndReached = ({ mode, scrollRef, onEndReached, threshold = TABLE_END_RE
             target.removeEventListener('scroll', check);
         };
     }, [
+        edge,
         mode,
         scrollRef,
         threshold
     ]);
 };
-export { useEndReached };
+export { useScrollEdge };

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

@@ -6,6 +6,9 @@ export declare const TABLE_SELECT_COLUMN_WIDTH = 33;
 export declare const TABLE_EXPAND_COLUMN_ID = "_expand";
 export declare const TABLE_EXPAND_COLUMN_WIDTH = 33;
 export declare const TABLE_END_REACHED_THRESHOLD = 200;
+export declare const TABLE_START_REACHED_THRESHOLD = 200;
+/** Minimum time (ms) between successive edge-reached callbacks. */
+export declare const SCROLL_EDGE_COOLDOWN_MS = 200;
 /** Resolve text-align class from column meta */
 export declare const getAlignClass: (meta?: {
     align?: string;

package/dist/components/Table/lib/constants.js

@@ -6,6 +6,8 @@ const TABLE_SELECT_COLUMN_WIDTH = 33;
 const TABLE_EXPAND_COLUMN_ID = '_expand';
 const TABLE_EXPAND_COLUMN_WIDTH = 33;
 const TABLE_END_REACHED_THRESHOLD = 200;
+const TABLE_START_REACHED_THRESHOLD = 200;
+const SCROLL_EDGE_COOLDOWN_MS = 200;
 const RIGHT_ALIGNED_SORT_TYPES = new Set([
     'number',
     'score',
@@ -56,4 +58,4 @@ const SORT_LABELS = {
         'Smallest on top'
     ]
 };
-export { SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, getAlignClass, getExpandBorderClass };
+export { SCROLL_EDGE_COOLDOWN_MS, SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_START_REACHED_THRESHOLD, TABLE_VIRTUALIZATION_OVERSCAN, getAlignClass, getExpandBorderClass };

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

@@ -0,0 +1,4 @@
+/** Classifies a data change by comparing the previous first row id to the new rows. */
+export declare const detectDataChange: (prevFirstRowId: string | undefined, rows: {
+    id: string;
+}[]) => "prepend" | "replace" | "none";

package/dist/components/Table/lib/detectDataChange.js

@@ -0,0 +1,7 @@
+const detectDataChange = (prevFirstRowId, rows)=>{
+    const currentFirstId = rows[0]?.id;
+    if (void 0 === prevFirstRowId) return 'none';
+    if (currentFirstId === prevFirstRowId) return 'none';
+    return rows.some((r)=>r.id === prevFirstRowId) ? 'prepend' : 'replace';
+};
+export { detectDataChange };

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

@@ -0,0 +1,4 @@
+/** Stable virtualizer item key: the row id, or the index as fallback. */
+export declare const getRowKey: (rows: {
+    id: string;
+}[], index: number) => string | number;

package/dist/components/Table/lib/getRowKey.js

@@ -0,0 +1,2 @@
+const getRowKey = (rows, index)=>rows[index]?.id ?? index;
+export { getRowKey };

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

@@ -1,9 +1,11 @@
-export { getAlignClass, getExpandBorderClass, SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, } from './constants';
+export { getAlignClass, getExpandBorderClass, SCROLL_EDGE_COOLDOWN_MS, SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_START_REACHED_THRESHOLD, TABLE_VIRTUALIZATION_OVERSCAN, } from './constants';
 export { createExpandColumn } from './createExpandColumn';
 export { createSelectionColumn } from './createSelectionColumn';
 export { createTableColumnHelper } from './createTableColumnHelper';
+export { detectDataChange } from './detectDataChange';
 export { getDndStyles } from './getDndStyles';
 export { getPinningStyles } from './getPinningStyles';
+export { getRowKey } from './getRowKey';
 export { isLastPinnedLeft } from './isLastPinnedLeft';
 export { useColumnDnd } from './useColumnDnd';
 export { useContainerWidth } from './useContainerWidth';

package/dist/components/Table/lib/index.js

@@ -1,10 +1,12 @@
-import { SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, getAlignClass, getExpandBorderClass } from "./constants.js";
+import { SCROLL_EDGE_COOLDOWN_MS, SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_START_REACHED_THRESHOLD, TABLE_VIRTUALIZATION_OVERSCAN, getAlignClass, getExpandBorderClass } from "./constants.js";
 import { createExpandColumn } from "./createExpandColumn.js";
 import { createSelectionColumn } from "./createSelectionColumn.js";
 import { createTableColumnHelper } from "./createTableColumnHelper.js";
+import { detectDataChange } from "./detectDataChange.js";
 import { getDndStyles } from "./getDndStyles.js";
 import { getPinningStyles } from "./getPinningStyles.js";
+import { getRowKey } from "./getRowKey.js";
 import { isLastPinnedLeft } from "./isLastPinnedLeft.js";
 import { useColumnDnd } from "./useColumnDnd.js";
 import { useContainerWidth } from "./useContainerWidth.js";
-export { SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, createExpandColumn, createSelectionColumn, createTableColumnHelper, getAlignClass, getDndStyles, getExpandBorderClass, getPinningStyles, isLastPinnedLeft, useColumnDnd, useContainerWidth };
+export { SCROLL_EDGE_COOLDOWN_MS, SORT_LABELS, TABLE_END_REACHED_THRESHOLD, TABLE_EXPAND_COLUMN_ID, TABLE_EXPAND_COLUMN_WIDTH, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SELECT_COLUMN_WIDTH, TABLE_SKELETON_ROWS, TABLE_START_REACHED_THRESHOLD, TABLE_VIRTUALIZATION_OVERSCAN, createExpandColumn, createSelectionColumn, createTableColumnHelper, detectDataChange, getAlignClass, getDndStyles, getExpandBorderClass, getPinningStyles, getRowKey, isLastPinnedLeft, useColumnDnd, useContainerWidth };

package/dist/components/Table/mocks.d.ts

@@ -59,3 +59,16 @@ export declare const useInfiniteData: () => {
     totalItems: number;
     fetchNextPage: () => void;
 };
+/**
+ * Mock for bidirectional infinite scroll: opens a window around an anchor row
+ * and exposes cursor-style fetchers for both directions.
+ */
+export declare const useBidirectionalData: () => {
+    data: SecurityEvent[];
+    anchorId: string | undefined;
+    isFetching: boolean;
+    hasPrev: boolean;
+    hasNext: boolean;
+    fetchPrevPage: () => void;
+    fetchNextPage: () => void;
+};

package/dist/components/Table/mocks.js

@@ -953,6 +953,9 @@ const fullFeaturedColumns = headerColumns.map((col)=>{
 });
 const INFINITE_PAGE_SIZE = 50;
 const INFINITE_MAX_ITEMS = 500;
+const BIDIRECTIONAL_TOTAL = 500;
+const BIDIRECTIONAL_PAGE_SIZE = 50;
+const BIDIRECTIONAL_INITIAL_ANCHOR_INDEX = 250;
 const useInfiniteData = ()=>{
     const allData = useMemo(()=>createLargeSecurityEvents(INFINITE_MAX_ITEMS), []);
     const [data, setData] = useState(()=>allData.slice(0, INFINITE_PAGE_SIZE));
@@ -978,4 +981,59 @@ const useInfiniteData = ()=>{
         fetchNextPage
     };
 };
-export { createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, multiplySecurityEvents, renderSecurityPreviewContent, renderSecurityPreviewHeader, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useInfiniteData };
+const useBidirectionalData = ()=>{
+    const allData = useMemo(()=>createLargeSecurityEvents(BIDIRECTIONAL_TOTAL), []);
+    const initialStart = Math.max(0, BIDIRECTIONAL_INITIAL_ANCHOR_INDEX - BIDIRECTIONAL_PAGE_SIZE);
+    const initialEnd = Math.min(allData.length, BIDIRECTIONAL_INITIAL_ANCHOR_INDEX + BIDIRECTIONAL_PAGE_SIZE);
+    const [range, setRange] = useState({
+        start: initialStart,
+        end: initialEnd
+    });
+    const [isFetching, setIsFetching] = useState(false);
+    const data = useMemo(()=>allData.slice(range.start, range.end), [
+        allData,
+        range
+    ]);
+    const anchorId = allData[BIDIRECTIONAL_INITIAL_ANCHOR_INDEX]?.id;
+    const hasPrev = range.start > 0;
+    const hasNext = range.end < allData.length;
+    const fetchPrevPage = useCallback(()=>{
+        if (isFetching || range.start <= 0) return;
+        setIsFetching(true);
+        setTimeout(()=>{
+            setRange((prev)=>({
+                    ...prev,
+                    start: Math.max(0, prev.start - BIDIRECTIONAL_PAGE_SIZE)
+                }));
+            setIsFetching(false);
+        }, 400);
+    }, [
+        isFetching,
+        range.start
+    ]);
+    const fetchNextPage = useCallback(()=>{
+        if (isFetching || range.end >= allData.length) return;
+        setIsFetching(true);
+        setTimeout(()=>{
+            setRange((prev)=>({
+                    ...prev,
+                    end: Math.min(allData.length, prev.end + BIDIRECTIONAL_PAGE_SIZE)
+                }));
+            setIsFetching(false);
+        }, 400);
+    }, [
+        isFetching,
+        range.end,
+        allData.length
+    ]);
+    return {
+        data,
+        anchorId,
+        isFetching,
+        hasPrev,
+        hasNext,
+        fetchPrevPage,
+        fetchNextPage
+    };
+};
+export { createLargeGroupedData, createLargeSecurityEvents, fullFeaturedColumns, groupedHeaderData, headerColumnHelper, headerColumnIds, headerColumns, multiplySecurityEvents, renderSecurityPreviewContent, renderSecurityPreviewHeader, securityColumnHelper, securityColumnIds, securityColumns, securityEvents, useBidirectionalData, useInfiniteData };

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

@@ -188,10 +188,20 @@ export interface TableProps<T> extends TestableProps {
     virtualized?: TableVirtualized;
     estimateRowHeight?: (index: number) => number;
     overscan?: number;
-    /** Callback fired when the user scrolls near the end of the table */
+    /** Callback fired when the user scrolls near the end (bottom) of the table */
     onEndReached?: () => void;
     /** Distance from the bottom (in px) to trigger onEndReached (default: 200) */
     onEndReachedThreshold?: number;
+    /** Callback fired when the user scrolls near the start (top) of the table */
+    onStartReached?: () => void;
+    /** Distance from the top (in px) to trigger onStartReached (default: 200) */
+    onStartReachedThreshold?: number;
+    /**
+     * Row id to anchor the initial scroll position to. The table scrolls this row
+     * into view on mount and arms the edge detectors only after that initial
+     * scroll settles. Use for deep-linking into the middle of a dataset.
+     */
+    initialScrollToRowId?: string;
     /** Callback fired when the master cell is clicked. Receives the row ID. */
     onMasterCellClick?: (rowId: string) => void;
     /** ID of the currently active (highlighted) row, or null. Controls row highlighting via data-preview-active attribute. */

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.50.0",
-  "generatedAt": "2026-05-28T20:17:11.602Z",
+  "version": "0.50.1",
+  "generatedAt": "2026-05-29T14:31:01.309Z",
   "components": [
     {
       "name": "Accordion",
@@ -51854,6 +51854,12 @@
           "type": "number | undefined",
           "required": false
         },
+        {
+          "name": "initialScrollToRowId",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Row id to anchor the initial scroll position to. The table scrolls this row\ninto view on mount and arms the edge detectors only after that initial\nscroll settles. Use for deep-linking into the middle of a dataset."
+        },
         {
           "name": "activeRowId",
           "type": "string | null | undefined",
@@ -52009,6 +52015,10 @@
           "name": "InfiniteScrollWindow",
           "code": "() => {\n  const { data, isFetching, hasMore, totalItems, fetchNextPage } = useInfiniteData();\n\n  return (\n    <VStack gap={8}>\n      <Text size='sm' color='secondary'>\n        Loaded {data.length} of {totalItems} rows {isFetching && '— loading...'}\n        {!hasMore && ' — all loaded'}\n      </Text>\n      <Table\n        data={data}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        isLoading={isFetching}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={300}\n      />\n    </VStack>\n  );\n}"
         },
+        {
+          "name": "BidirectionalInfiniteScroll",
+          "code": "() => {\n  const { data, anchorId, isFetching, hasPrev, hasNext, fetchPrevPage, fetchNextPage } =\n    useBidirectionalData();\n\n  return (\n    <VStack gap={8}>\n      <Text size='sm' color='secondary'>\n        Window of {data.length} rows around the anchor {isFetching && '— loading...'}\n        {!hasPrev && ' — top reached'}\n        {!hasNext && ' — bottom reached'}\n      </Text>\n      <Table\n        className='h-500'\n        data={data}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='container'\n        isLoading={isFetching}\n        initialScrollToRowId={anchorId}\n        onStartReached={fetchPrevPage}\n        onStartReachedThreshold={200}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={200}\n      />\n    </VStack>\n  );\n}"
+        },
         {
           "name": "HeaderColumnDescription",
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  const columns = useMemo<TableColumnDef<(typeof securityEvents)[number]>[]>(\n    () =>\n      securityColumns.map(col => {\n        const key = 'accessorKey' in col ? col.accessorKey : undefined;\n        if (key === 'objectName') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'text' as const, content: 'Target resource' },\n            },\n          };\n        }\n        if (key === 'sourceIp') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'tooltip' as const, content: 'Request origin IP' },\n            },\n          };\n        }\n        if (key === 'requests') {\n          return {\n            ...col,\n            meta: { ...col.meta, description: { type: 'tooltip' as const, content: 'Total hits' } },\n          };\n        }\n        if (key === 'parameter') {\n          return {\n            ...col,\n            meta: {\n              ...col.meta,\n              description: { type: 'text' as const, content: 'Affected param' },\n            },\n          };\n        }\n        return col;\n      }),\n    [],\n  );\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={columns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.50.1",
+  "version": "0.51.0-rc-feature-AS-1026.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

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

@@ -1,19 +0,0 @@
-import { type RefObject } from 'react';
-type ScrollMode = 'container' | 'window';
-interface UseEndReachedOptions {
-    mode: ScrollMode;
-    /** Scroll element ref — required for `container` mode */
-    scrollRef?: RefObject<HTMLElement | null>;
-    onEndReached?: () => void;
-    threshold?: number;
-}
-/**
- * Fires `onEndReached` once when the user scrolls within `threshold` px
- * of the bottom. Re-arms automatically after the user scrolls back up
- * past the threshold or when the scroll height grows (new data loaded).
- *
- * A cooldown guard prevents rapid re-fires that can occur when new rows
- * are appended (scrollHeight grows → firedRef resets → still at bottom).
- */
-export declare const useEndReached: ({ mode, scrollRef, onEndReached, threshold, }: UseEndReachedOptions) => void;
-export {};