@wallarm-org/design-system 0.52.0-rc-feature-shell.1 → 0.52.0

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

@@ -1,4 +1,6 @@
 export declare const TABLE_SKELETON_ROWS = 12;
+/** Short on purpose: the prepend loader's height pushes visible rows down. */
+export declare const TABLE_PREPEND_SKELETON_ROWS = 6;
 export declare const TABLE_VIRTUALIZATION_OVERSCAN = 6;
 export declare const TABLE_MIN_COLUMN_WIDTH = 96;
 export declare const TABLE_SELECT_COLUMN_ID = "_selection";
@@ -6,6 +8,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

@@ -1,4 +1,5 @@
 const TABLE_SKELETON_ROWS = 12;
+const TABLE_PREPEND_SKELETON_ROWS = 6;
 const TABLE_VIRTUALIZATION_OVERSCAN = 6;
 const TABLE_MIN_COLUMN_WIDTH = 96;
 const TABLE_SELECT_COLUMN_ID = '_selection';
@@ -6,6 +7,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 +59,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_PREPEND_SKELETON_ROWS, 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_PREPEND_SKELETON_ROWS, 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_PREPEND_SKELETON_ROWS, 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_PREPEND_SKELETON_ROWS, 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,17 @@ 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;
+    isFetchingPrev: boolean;
+    isFetchingNext: 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,61 @@ 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 [isFetchingPrev, setIsFetchingPrev] = useState(false);
+    const [isFetchingNext, setIsFetchingNext] = 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 (isFetchingPrev || range.start <= 0) return;
+        setIsFetchingPrev(true);
+        setTimeout(()=>{
+            setRange((prev)=>({
+                    ...prev,
+                    start: Math.max(0, prev.start - BIDIRECTIONAL_PAGE_SIZE)
+                }));
+            setIsFetchingPrev(false);
+        }, 600);
+    }, [
+        isFetchingPrev,
+        range.start
+    ]);
+    const fetchNextPage = useCallback(()=>{
+        if (isFetchingNext || range.end >= allData.length) return;
+        setIsFetchingNext(true);
+        setTimeout(()=>{
+            setRange((prev)=>({
+                    ...prev,
+                    end: Math.min(allData.length, prev.end + BIDIRECTIONAL_PAGE_SIZE)
+                }));
+            setIsFetchingNext(false);
+        }, 600);
+    }, [
+        isFetchingNext,
+        range.end,
+        allData.length
+    ]);
+    return {
+        data,
+        anchorId,
+        isFetchingPrev,
+        isFetchingNext,
+        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

@@ -143,6 +143,12 @@ export interface TableProps<T> extends TestableProps {
     columns: TableColumnDef<T>[];
     /** Show skeleton rows */
     isLoading?: boolean;
+    /**
+     * Show skeleton rows above the first row while a previous page is being
+     * fetched (bidirectional infinite scroll — the start-edge counterpart of
+     * `isLoading`). Pair with `onStartReached`.
+     */
+    isLoadingPrevious?: boolean;
     /** Number of skeleton rows to display when loading (default: 6) */
     skeletonCount?: number;
     /** Slot for TableActionBar, TableEmptyState, and other compound components */
@@ -188,10 +194,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/components/TopHeader/TopHeader.d.ts

@@ -3,6 +3,5 @@ import { type TestableProps } from '../../utils/testId';
 export interface TopHeaderProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
     ref?: Ref<HTMLDivElement>;
     children?: ReactNode;
-    appeared?: boolean;
 }
 export declare const TopHeader: FC<TopHeaderProps>;

package/dist/components/TopHeader/TopHeader.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.js";
 import { TestIdProvider } from "../../utils/testId.js";
-const TopHeader = ({ ref, appeared, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+const TopHeader = ({ ref, className, children, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
         value: testId,
         children: /*#__PURE__*/ jsx("div", {
             ...props,
             ref: ref,
             "data-slot": "top-header",
             "data-testid": testId,
-            className: cn('flex items-center justify-between pl-7 pr-12 py-6', 'transition-opacity duration-200 ease-in-out', false === appeared && 'opacity-0', className),
+            className: cn('flex items-center justify-between pl-7 pr-12 py-6', className),
             children: children
         })
     });

package/dist/hooks/useOverflowItems.d.ts

@@ -1,5 +1,11 @@
 import { type ReactElement, type RefObject } from 'react';
 export interface UseOverflowItemsOptions<T> {
+    /**
+     * Invariant: a given `items` array identity must always render to the same
+     * widths. Measurements are cached by array identity regardless of the
+     * renderers/reserveSpace, so changing those to alter widths needs a fresh
+     * array.
+     */
     items: T[];
     renderItem: (item: T) => ReactElement;
     renderMeasurementItem?: (item: T) => ReactElement;

package/dist/hooks/useOverflowItems.js

@@ -1,17 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { calculateVisibleCount } from "./useOverflowItems.helpers.js";
+import { scheduleOverflowMeasurement } from "./useOverflowItems.scheduler.js";
+const crossMountCache = new WeakMap();
 function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRenderer, reserveSpace = 60 }) {
     const containerRef = useRef(null);
-    const [visibleCount, setVisibleCount] = useState(items.length);
+    const [visibleCount, setVisibleCount] = useState(()=>{
+        const cached = items.length > 0 ? crossMountCache.get(items) : void 0;
+        if (cached) return Math.min(cached.lastCount, items.length);
+        return Math.min(items.length, 1);
+    });
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
     const measurementRefs = useRef([]);
     const indicatorRef = useRef(null);
+    const measurementLayerRef = useRef(null);
     const cacheRef = useRef({
         widths: [],
         gap: 0,
         indicatorWidth: reserveSpace
     });
-    const recompute = useCallback(()=>{
+    const recompute = useCallback((availableWidth)=>{
         const container = containerRef.current;
         if (!container) return;
         const { widths, gap, indicatorWidth } = cacheRef.current;
@@ -19,13 +28,14 @@ function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRe
         const next = calculateVisibleCount({
             itemWidths: widths,
             gap,
-            availableWidth: container.offsetWidth,
+            availableWidth: availableWidth ?? container.offsetWidth,
             indicatorWidth
         });
+        const entry = crossMountCache.get(itemsRef.current);
+        if (entry) entry.lastCount = next;
         setVisibleCount((prev)=>prev === next ? prev : next);
     }, []);
     useLayoutEffect(()=>{
-        const container = containerRef.current;
         if (0 === items.length) {
             cacheRef.current = {
                 widths: [],
@@ -35,15 +45,34 @@ function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRe
             setVisibleCount(0);
             return;
         }
-        const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
-        const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
-        const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
-        cacheRef.current = {
-            widths,
-            gap,
-            indicatorWidth
-        };
-        recompute();
+        const cached = crossMountCache.get(items);
+        if (cached) {
+            cacheRef.current = cached;
+            return scheduleOverflowMeasurement(()=>{
+                const availableWidth = containerRef.current?.offsetWidth ?? 0;
+                return ()=>recompute(availableWidth);
+            });
+        }
+        measurementLayerRef.current?.style.removeProperty('display');
+        return scheduleOverflowMeasurement(()=>{
+            const container = containerRef.current;
+            const gap = container ? Number.parseFloat(getComputedStyle(container).gap || '0') || 0 : 0;
+            const widths = measurementRefs.current.slice(0, items.length).map((ref)=>ref?.offsetWidth ?? 0);
+            const indicatorWidth = indicatorRef.current?.offsetWidth || reserveSpace;
+            const availableWidth = container?.offsetWidth ?? 0;
+            return ()=>{
+                const entry = {
+                    widths,
+                    gap,
+                    indicatorWidth,
+                    lastCount: items.length
+                };
+                cacheRef.current = entry;
+                crossMountCache.set(items, entry);
+                recompute(availableWidth);
+                measurementLayerRef.current?.style.setProperty('display', 'none');
+            };
+        });
     }, [
         items,
         renderItem,
@@ -75,9 +104,10 @@ function useOverflowItems({ items, renderItem, renderMeasurementItem, overflowRe
     const hiddenItems = items.slice(visibleCount);
     const hiddenCount = hiddenItems.length;
     const MeasurementContainer = useCallback(()=>{
-        if (0 === items.length) return null;
+        if (0 === items.length || crossMountCache.has(items)) return null;
         const renderMeasure = renderMeasurementItem || renderItem;
         return /*#__PURE__*/ jsxs("div", {
+            ref: measurementLayerRef,
             className: "absolute invisible pointer-events-none",
             "aria-hidden": "true",
             children: [

package/dist/hooks/useOverflowItems.scheduler.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared read/write batch for overflow measurements. Many instances mount in
+ * one commit (a virtualized row chunk × several overflow cells); measuring in
+ * each layout effect reflows per instance, since its setState flushes before
+ * the next reads `offsetWidth`. One pre-paint microtask runs all reads against
+ * clean layout, then all writes — React batches them, no interleaving.
+ */
+type WritePhase = () => void;
+type ReadPhase = () => WritePhase;
+/**
+ * Queue a measurement for the next pre-paint flush. Returns a cancel
+ * function — call it on effect cleanup so unmounted or re-rendered
+ * instances never measure stale refs.
+ */
+export declare const scheduleOverflowMeasurement: (read: ReadPhase) => (() => void);
+export {};

package/dist/hooks/useOverflowItems.scheduler.js

@@ -0,0 +1,25 @@
+const queue = new Set();
+let flushScheduled = false;
+const flush = ()=>{
+    flushScheduled = false;
+    const reads = Array.from(queue);
+    queue.clear();
+    const writes = [];
+    for (const read of reads)try {
+        writes.push(read());
+    } catch  {}
+    for (const write of writes)try {
+        write();
+    } catch  {}
+};
+const scheduleOverflowMeasurement = (read)=>{
+    queue.add(read);
+    if (!flushScheduled) {
+        flushScheduled = true;
+        queueMicrotask(flush);
+    }
+    return ()=>{
+        queue.delete(read);
+    };
+};
+export { scheduleOverflowMeasurement };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.51.2",
-  "generatedAt": "2026-06-03T00:07:48.454Z",
+  "generatedAt": "2026-06-03T10:23:04.183Z",
   "components": [
     {
       "name": "Accordion",
@@ -4436,7 +4436,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [appeared, setAppeared] = useState(true);\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell>\n      <AppShellHeader>\n        <TopHeader appeared={appeared}>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n              </>\n            ) : (\n              <>\n                <Button\n                  variant='ghost'\n                  size='small'\n                  color='neutral'\n                  className='p-4 gap-6 rounded-6'\n                >\n                  <Code size='s' color='secondary'>\n                    Search Wallarm\n                  </Code>\n                  <Kbd size='xsmall'>⌘ K</Kbd>\n                </Button>\n\n                <TopHeaderSeparator />\n\n                <Button variant='ghost' size='small' color='neutral' className='py-4 rounded-6'>\n                  <Text size='xs' weight='medium'>\n                    Tenant Name\n                  </Text>\n                  <span className='text-text-tertiary mx-[-2px]'>•</span>\n                  <Code size='s' color='secondary'>\n                    12345\n                  </Code>\n                  <ChevronUpDown className='!icon-sm' />\n                </Button>\n              </>\n            )}\n\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant='ghost' size='small' color='neutral' aria-label='Wallarm Updates'>\n                  <Bell />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Wallarm updates</TooltipContent>\n            </Tooltip>\n\n            <QuickHelpDropdown />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed} appeared={appeared}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? (\n              <NavRailSkeleton />\n            ) : (\n              <>\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Edge'\n                  shortcut={['G', 'E']}\n                  active={activeProduct === 'edge'}\n                  onClick={() => navigateToProduct('edge')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='AI Hypervisor'\n                  shortcut={['G', 'A']}\n                  active={activeProduct === 'ai-hypervisor'}\n                  onClick={() => navigateToProduct('ai-hypervisor')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Infra Discovery'\n                  shortcut={['G', 'I']}\n                  active={activeProduct === 'infra-discovery'}\n                  onClick={() => navigateToProduct('infra-discovery')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Security Testing'\n                  shortcut={['G', 'T']}\n                  active={activeProduct === 'security-testing'}\n                  onClick={() => navigateToProduct('security-testing')}\n                />\n              </>\n            )}\n          </NavRailBody>\n\n          <NavRailFooter>\n            <NavRailItem\n              icon={Settings}\n              label='Settings'\n              shortcut={['G', 'S']}\n              active={activeProduct === 'settings'}\n              onClick={() => navigateToProduct('settings')}\n            />\n            <AccountDropdown\n              sidebarMode={sidebarMode}\n              onSidebarModeChange={setSidebarMode}\n              theme={theme}\n              onThemeChange={setTheme}\n            />\n          </NavRailFooter>\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='flex gap-8 absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setAppeared(v => !v)}>\n            {appeared ? 'Hide menu' : 'Show menu'}\n          </Button>\n\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
+          "code": "() => {\n  const pathname = useLocationPathname();\n  const activeProduct = deriveProduct(pathname);\n\n  const [loading, setLoading] = useState(true);\n  const [sidebarMode, setSidebarMode] = useState<SidebarMode>('adaptive');\n  const { theme, setTheme } = useTheme();\n  const collapsed = sidebarMode === 'adaptive' && activeProduct !== 'home';\n\n  return (\n    <AppShell>\n      <AppShellHeader>\n        <TopHeader>\n          <TopHeaderLogo href='/'>\n            <WallarmLogo />\n          </TopHeaderLogo>\n\n          <TopHeaderActions>\n            {loading ? (\n              <>\n                <Skeleton width='150px' height='20px' rounded={6} />\n                <TopHeaderSeparator />\n                <Skeleton width='150px' height='20px' rounded={6} />\n              </>\n            ) : (\n              <>\n                <Button\n                  variant='ghost'\n                  size='small'\n                  color='neutral'\n                  className='p-4 gap-6 rounded-6'\n                >\n                  <Code size='s' color='secondary'>\n                    Search Wallarm\n                  </Code>\n                  <Kbd size='xsmall'>⌘ K</Kbd>\n                </Button>\n\n                <TopHeaderSeparator />\n\n                <Button variant='ghost' size='small' color='neutral' className='py-4 rounded-6'>\n                  <Text size='xs' weight='medium'>\n                    Tenant Name\n                  </Text>\n                  <span className='text-text-tertiary mx-[-2px]'>•</span>\n                  <Code size='s' color='secondary'>\n                    12345\n                  </Code>\n                  <ChevronUpDown className='!icon-sm' />\n                </Button>\n              </>\n            )}\n\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant='ghost' size='small' color='neutral' aria-label='Wallarm Updates'>\n                  <Bell />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Wallarm updates</TooltipContent>\n            </Tooltip>\n\n            <QuickHelpDropdown />\n          </TopHeaderActions>\n        </TopHeader>\n      </AppShellHeader>\n\n      <AppShellRail>\n        <NavRail collapsed={collapsed}>\n          <NavRailBody>\n            <NavRailItem\n              icon={Home}\n              label='Home'\n              shortcut={['G', 'H']}\n              active={activeProduct === 'home'}\n              onClick={() => navigateToProduct('home')}\n            />\n            <RecentDropdown />\n\n            <NavRailSeparator />\n\n            {loading ? (\n              <NavRailSkeleton />\n            ) : (\n              <>\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Edge'\n                  shortcut={['G', 'E']}\n                  active={activeProduct === 'edge'}\n                  onClick={() => navigateToProduct('edge')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='AI Hypervisor'\n                  shortcut={['G', 'A']}\n                  active={activeProduct === 'ai-hypervisor'}\n                  onClick={() => navigateToProduct('ai-hypervisor')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Infra Discovery'\n                  shortcut={['G', 'I']}\n                  active={activeProduct === 'infra-discovery'}\n                  onClick={() => navigateToProduct('infra-discovery')}\n                />\n                <NavRailItem\n                  icon={CircleDashed}\n                  label='Security Testing'\n                  shortcut={['G', 'T']}\n                  active={activeProduct === 'security-testing'}\n                  onClick={() => navigateToProduct('security-testing')}\n                />\n              </>\n            )}\n          </NavRailBody>\n\n          <NavRailFooter>\n            <NavRailItem\n              icon={Settings}\n              label='Settings'\n              shortcut={['G', 'S']}\n              active={activeProduct === 'settings'}\n              onClick={() => navigateToProduct('settings')}\n            />\n            <AccountDropdown\n              sidebarMode={sidebarMode}\n              onSidebarModeChange={setSidebarMode}\n              theme={theme}\n              onThemeChange={setTheme}\n            />\n          </NavRailFooter>\n        </NavRail>\n      </AppShellRail>\n\n      <AppShellRemote>\n        <div className='absolute top-4 right-4 z-10'>\n          <Button variant='ghost' size='small' color='neutral' onClick={() => setLoading(v => !v)}>\n            {loading ? 'Finish loading' : 'Start loading'}\n          </Button>\n        </div>\n\n        <RemoteForProduct product={activeProduct} />\n      </AppShellRemote>\n    </AppShell>\n  );\n}"
         }
       ]
     },
@@ -27826,11 +27826,6 @@
           "required": false,
           "defaultValue": "false"
         },
-        {
-          "name": "appeared",
-          "type": "boolean | undefined",
-          "required": false
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",
@@ -51523,6 +51518,12 @@
           "description": "Show skeleton rows",
           "defaultValue": "false"
         },
+        {
+          "name": "isLoadingPrevious",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Show skeleton rows above the first row while a previous page is being\nfetched (bidirectional infinite scroll — the start-edge counterpart of\n`isLoading`). Pair with `onStartReached`."
+        },
         {
           "name": "skeletonCount",
           "type": "number | undefined",
@@ -51623,6 +51624,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",
@@ -51778,6 +51785,14 @@
           "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 {\n    data,\n    anchorId,\n    isFetchingPrev,\n    isFetchingNext,\n    hasPrev,\n    hasNext,\n    fetchPrevPage,\n    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 — scroll up for top skeletons, down for\n        bottom ones{(isFetchingPrev || isFetchingNext) && ' — 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={isFetchingNext}\n        isLoadingPrevious={isFetchingPrev}\n        initialScrollToRowId={anchorId}\n        onStartReached={fetchPrevPage}\n        onStartReachedThreshold={200}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={200}\n      />\n    </VStack>\n  );\n}"
+        },
+        {
+          "name": "BidirectionalInfiniteScrollWindow",
+          "code": "() => {\n  const {\n    data,\n    anchorId,\n    isFetchingPrev,\n    isFetchingNext,\n    hasPrev,\n    hasNext,\n    fetchPrevPage,\n    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\n        {(isFetchingPrev || isFetchingNext) && ' — loading...'}\n        {!hasPrev && ' — top reached'}\n        {!hasNext && ' — bottom reached'}\n      </Text>\n      <Table\n        data={data}\n        columns={securityColumns}\n        getRowId={row => row.id}\n        virtualized='window'\n        isLoading={isFetchingNext}\n        isLoadingPrevious={isFetchingPrev}\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}"
@@ -54322,11 +54337,6 @@
       "name": "TopHeader",
       "importPath": "@wallarm-org/design-system/TopHeader",
       "props": [
-        {
-          "name": "appeared",
-          "type": "boolean | undefined",
-          "required": false
-        },
         {
           "name": "defaultChecked",
           "type": "boolean | undefined",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.52.0-rc-feature-shell.1",
+  "version": "0.52.0",
   "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 {};