@wallarm-org/design-system 0.44.0 → 0.44.2-rc-fix-WDS-125-table-sorting.1

package/dist/components/SimpleCharts/LineChart/LineChart.js

@@ -25,15 +25,15 @@ function LineChart({ data, series, xKey, activeKey: controlledActiveKey, onActiv
         onActiveKeyChange,
         seriesByKey
     });
+    const onZoomChangeRef = useRef(onZoomChange);
+    onZoomChangeRef.current = onZoomChange;
     const emitZoom = useCallback((range)=>{
-        onZoomChange?.(range);
-    }, [
-        onZoomChange
-    ]);
+        onZoomChangeRef.current?.(range);
+    }, []);
     const zoom = useLineChartZoomState({
         data,
         xKey,
-        onZoomChange
+        onZoomChangeRef
     });
     const hiddenSet = useMemo(()=>{
         if (!filteredKeys?.length) return EMPTY_HIDDEN_SET;

package/dist/components/SimpleCharts/LineChart/LineChartZoomBrush.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ReferenceArea, usePlotArea } from "recharts";
 import { formatChartDateTime } from "../lib/timeFormatters.js";
@@ -12,22 +12,81 @@ import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
 import { formatRange as formatRange_js_formatRange } from "./lib/formatRange.js";
 const defaultFormatRange = formatRange_js_formatRange((value)=>formatChartDateTime(value) || String(value));
 const POPOVER_OFFSET_X = 12;
+const RECHARTS_SURFACE = '.recharts-surface';
 const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange, confirmLabel = 'Zoom in', container })=>{
     const dataCtx = useContext(LineChartDataContext);
     const zoomCtx = useContext(LineChartZoomContext);
     const popoverRef = useRef(null);
     const plotArea = usePlotArea();
     const rootRef = zoomCtx?.rootRef;
-    const centerY = useMemo(()=>{
-        if (!plotArea || !rootRef?.current) return null;
-        const surface = rootRef.current.querySelector('.recharts-surface');
-        if (!surface) return null;
+    const drag = zoomCtx?.drag ?? null;
+    const pending = zoomCtx?.pending ?? null;
+    const cancelPending = zoomCtx?.cancelPending;
+    const confirmZoom = zoomCtx?.confirmZoom;
+    const isPopoverOpen = null !== drag || null !== pending;
+    const isPending = null !== pending;
+    const [scrollTick, setScrollTick] = useState(0);
+    useEffect(()=>{
+        if (!isPopoverOpen) return;
+        let lastTop = null;
+        let lastLeft = null;
+        const onScroll = ()=>{
+            const surface = rootRef?.current?.querySelector(RECHARTS_SURFACE);
+            if (!surface) return;
+            const { top, left } = surface.getBoundingClientRect();
+            if (top === lastTop && left === lastLeft) return;
+            lastTop = top;
+            lastLeft = left;
+            setScrollTick((n)=>n + 1);
+        };
+        window.addEventListener('scroll', onScroll, {
+            passive: true,
+            capture: true
+        });
+        window.addEventListener('resize', onScroll);
+        return ()=>{
+            window.removeEventListener('scroll', onScroll, {
+                capture: true
+            });
+            window.removeEventListener('resize', onScroll);
+        };
+    }, [
+        isPopoverOpen,
+        rootRef
+    ]);
+    const cachedGeometryRef = useRef(null);
+    const popoverGeometry = useMemo(()=>{
+        if (!isPopoverOpen) {
+            cachedGeometryRef.current = null;
+            return null;
+        }
+        if (!plotArea || !rootRef?.current) return cachedGeometryRef.current;
+        const surface = rootRef.current.querySelector(RECHARTS_SURFACE);
+        if (!surface) return cachedGeometryRef.current;
         const rect = surface.getBoundingClientRect();
-        return rect.top + plotArea.y + plotArea.height / 2;
+        const next = {
+            centerY: rect.top + plotArea.y + plotArea.height / 2,
+            left: rect.left
+        };
+        cachedGeometryRef.current = next;
+        return next;
     }, [
+        isPopoverOpen,
         plotArea,
+        rootRef,
+        scrollTick
+    ]);
+    const pendingAnchorLeft = useMemo(()=>{
+        if (!isPending || !rootRef?.current) return null;
+        const surface = rootRef.current.querySelector(RECHARTS_SURFACE);
+        if (!surface) return null;
+        return surface.getBoundingClientRect().left;
+    }, [
+        isPending,
         rootRef
     ]);
+    const centerY = popoverGeometry?.centerY ?? null;
+    const pendingScrollDeltaX = isPending && null !== pendingAnchorLeft && popoverGeometry ? popoverGeometry.left - pendingAnchorLeft : 0;
     const registerEnabled = zoomCtx?.registerEnabled;
     useEffect(()=>{
         if (disabled || !registerEnabled) return;
@@ -36,10 +95,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         disabled,
         registerEnabled
     ]);
-    const drag = zoomCtx?.drag ?? null;
-    const pending = zoomCtx?.pending ?? null;
-    const cancelPending = zoomCtx?.cancelPending;
-    const confirmZoom = zoomCtx?.confirmZoom;
     useZoomPendingListeners({
         enabled: null !== pending,
         rootRef,
@@ -72,7 +127,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
     ]);
     if (disabled || !dataCtx || !zoomCtx) return null;
     const popoverPosition = drag ?? pending ?? null;
-    const isPending = null !== pending;
     const popoverContent = range && popoverPosition ? /*#__PURE__*/ jsx("div", {
         ref: popoverRef,
         "data-slot": "line-chart-zoom-cursor-popover",
@@ -80,7 +134,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         className: lineChartZoomCursorPopoverClasses,
         style: {
             top: centerY ?? popoverPosition.clientY,
-            left: popoverPosition.clientX + POPOVER_OFFSET_X,
+            left: popoverPosition.clientX + pendingScrollDeltaX + POPOVER_OFFSET_X,
             transform: 'translateY(-50%)',
             pointerEvents: isPending ? 'auto' : 'none'
         },

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartActiveKey.js

@@ -16,14 +16,15 @@ const useLineChartActiveKey = ({ controlledActiveKey, onActiveKeyChange, seriesB
     ]);
     const lastActiveKeyRef = useRef(void 0);
     lastActiveKeyRef.current = activeKey;
+    const onActiveKeyChangeRef = useRef(onActiveKeyChange);
+    onActiveKeyChangeRef.current = onActiveKeyChange;
     const setActiveKey = useCallback((key)=>{
         if (lastActiveKeyRef.current === key) return;
         lastActiveKeyRef.current = key;
         setInternalActiveKey(key);
-        onActiveKeyChange?.(key);
+        onActiveKeyChangeRef.current?.(key);
     }, [
-        setInternalActiveKey,
-        onActiveKeyChange
+        setInternalActiveKey
     ]);
     return {
         activeKey,

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import type { LineChartDatum, LineChartZoomDragState, LineChartZoomPendingState, LineChartZoomRange } from '../LineChartContext';
 interface UseLineChartZoomStateResult {
     enabled: boolean;
@@ -25,13 +26,19 @@ interface UseLineChartZoomStateResult {
  * `useZoomDragListeners` so the popover keeps tracking when the cursor leaves
  * the SVG and a mouseup outside the chart still releases into pending.
  *
+ * Drag updates from recharts (`updateDrag` — carries index+coords) and from
+ * the window listener (`handleDragMove` — coords only) both write into a
+ * single pending-frame buffer and flush together on the next animation frame.
+ * That collapses the two motion paths into one React commit per frame and
+ * keeps state writes off the synchronous mousemove path.
+ *
  * Dataset changes invalidate cached indices on both `drag` and `pending`, so
  * both reset whenever `data` or `xKey` flips — otherwise a stale range could
  * be committed against a refreshed dataset.
  */
-export declare const useLineChartZoomState: ({ data, xKey, onZoomChange, }: {
+export declare const useLineChartZoomState: ({ data, xKey, onZoomChangeRef, }: {
     data: LineChartDatum[];
     xKey: string;
-    onZoomChange: ((range: LineChartZoomRange | null) => void) | undefined;
+    onZoomChangeRef: RefObject<((range: LineChartZoomRange | null) => void) | undefined>;
 }) => UseLineChartZoomStateResult;
 export {};

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.js

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useZoomDragListeners } from "./useZoomDragListeners.js";
-const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
+const useLineChartZoomState = ({ data, xKey, onZoomChangeRef })=>{
     const [zoomEnabledCount, setZoomEnabledCount] = useState(0);
     const [zoomDrag, setZoomDrag] = useState(null);
     const [zoomPending, setZoomPending] = useState(null);
@@ -8,35 +8,79 @@ const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
         setZoomEnabledCount((n)=>n + 1);
         return ()=>setZoomEnabledCount((n)=>n - 1);
     }, []);
-    const startDrag = useCallback((index, clientX, clientY)=>{
-        setZoomPending(null);
-        setZoomDrag({
-            startIndex: index,
-            endIndex: index,
-            clientX,
-            clientY
-        });
-    }, []);
-    const updateDrag = useCallback((index, clientX, clientY)=>{
+    const pendingDragRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const flushPendingDrag = useCallback(()=>{
+        rafIdRef.current = null;
+        const buffered = pendingDragRef.current;
+        if (!buffered) return;
+        pendingDragRef.current = null;
         setZoomDrag((prev)=>{
             if (!prev) return null;
-            if (prev.endIndex === index && prev.clientX === clientX && prev.clientY === clientY) return prev;
+            const endIndex = buffered.index ?? prev.endIndex;
+            const clientX = buffered.clientX ?? prev.clientX;
+            const clientY = buffered.clientY ?? prev.clientY;
+            if (prev.endIndex === endIndex && prev.clientX === clientX && prev.clientY === clientY) return prev;
             return {
                 startIndex: prev.startIndex,
-                endIndex: index,
+                endIndex,
                 clientX,
                 clientY
             };
         });
     }, []);
+    const scheduleFlush = useCallback(()=>{
+        if (null !== rafIdRef.current) return;
+        rafIdRef.current = requestAnimationFrame(flushPendingDrag);
+    }, [
+        flushPendingDrag
+    ]);
+    const cancelScheduledFlush = useCallback(()=>{
+        if (null !== rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        pendingDragRef.current = null;
+    }, []);
+    const startDrag = useCallback((index, clientX, clientY)=>{
+        cancelScheduledFlush();
+        setZoomPending(null);
+        setZoomDrag({
+            startIndex: index,
+            endIndex: index,
+            clientX,
+            clientY
+        });
+    }, [
+        cancelScheduledFlush
+    ]);
+    const updateDrag = useCallback((index, clientX, clientY)=>{
+        pendingDragRef.current = {
+            ...pendingDragRef.current,
+            index,
+            clientX,
+            clientY
+        };
+        scheduleFlush();
+    }, [
+        scheduleFlush
+    ]);
     const cancelDrag = useCallback(()=>{
+        cancelScheduledFlush();
         setZoomDrag(null);
-    }, []);
+    }, [
+        cancelScheduledFlush
+    ]);
     const endDrag = useCallback(()=>{
+        const buffered = pendingDragRef.current;
+        cancelScheduledFlush();
         setZoomDrag((currentDrag)=>{
             if (!currentDrag) return null;
-            const lo = Math.min(currentDrag.startIndex, currentDrag.endIndex);
-            const hi = Math.max(currentDrag.startIndex, currentDrag.endIndex);
+            const endIndex = buffered?.index ?? currentDrag.endIndex;
+            const clientX = buffered?.clientX ?? currentDrag.clientX;
+            const clientY = buffered?.clientY ?? currentDrag.clientY;
+            const lo = Math.min(currentDrag.startIndex, endIndex);
+            const hi = Math.max(currentDrag.startIndex, endIndex);
             if (lo === hi) return null;
             const fromDatum = data[lo];
             const toDatum = data[hi];
@@ -49,46 +93,56 @@ const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
                     from,
                     to
                 },
-                clientX: currentDrag.clientX,
-                clientY: currentDrag.clientY
+                clientX,
+                clientY
             });
             return null;
         });
     }, [
         data,
-        xKey
+        xKey,
+        cancelScheduledFlush
     ]);
     const confirmZoom = useCallback(()=>{
         setZoomPending((currentPending)=>{
-            if (currentPending) onZoomChange?.(currentPending.range);
+            if (currentPending) onZoomChangeRef.current?.(currentPending.range);
             return null;
         });
     }, [
-        onZoomChange
+        onZoomChangeRef
     ]);
     const cancelPending = useCallback(()=>{
         setZoomPending(null);
     }, []);
     useEffect(()=>{
+        cancelScheduledFlush();
         setZoomDrag(null);
         setZoomPending(null);
     }, [
         data,
-        xKey
+        xKey,
+        cancelScheduledFlush
+    ]);
+    useEffect(()=>()=>cancelScheduledFlush(), [
+        cancelScheduledFlush
     ]);
     const isZoomDragging = null !== zoomDrag;
     const handleDragMove = useCallback((clientX, clientY)=>{
-        setZoomDrag((prev)=>{
-            if (!prev) return null;
-            if (prev.clientX === clientX && prev.clientY === clientY) return prev;
-            return {
-                ...prev,
-                clientX,
-                clientY
-            };
-        });
-    }, []);
-    const handleDragEscape = useCallback(()=>setZoomDrag(null), []);
+        pendingDragRef.current = {
+            ...pendingDragRef.current,
+            clientX,
+            clientY
+        };
+        scheduleFlush();
+    }, [
+        scheduleFlush
+    ]);
+    const handleDragEscape = useCallback(()=>{
+        cancelScheduledFlush();
+        setZoomDrag(null);
+    }, [
+        cancelScheduledFlush
+    ]);
     useZoomDragListeners({
         enabled: isZoomDragging,
         onMove: handleDragMove,

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, 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, onMasterCellClick, activeRowId: activeRowIdProp } = props;
     const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
@@ -131,9 +131,10 @@ const TableProvider = (props)=>{
         getRowId,
         getSubRows,
         getCoreRowModel: getCoreRowModel(),
-        ...sortingEnabled && {
+        ...sortingEnabled && !manualSorting && {
             getSortedRowModel: getSortedRowModel()
         },
+        manualSorting,
         ...groupingEnabled && {
             getGroupedRowModel: getGroupedRowModel()
         },

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

@@ -155,6 +155,15 @@ export interface TableProps<T> extends TestableProps {
     className?: string;
     sorting?: TableSortingState;
     onSortingChange?: TableOnChangeFn<TableSortingState>;
+    /**
+     * When `true`, disables TanStack's client-side sort. The table renders rows
+     * in the order they appear in `data` and only fires `onSortingChange` on
+     * header clicks. Use this when sorting is performed server-side and the
+     * server returns pre-sorted rows.
+     *
+     * Default: `false` (client-side sort via TanStack's `getSortedRowModel`).
+     */
+    manualSorting?: boolean;
     rowSelection?: TableRowSelectionState;
     onRowSelectionChange?: TableOnChangeFn<TableRowSelectionState>;
     columnSizing?: TableColumnSizingState;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.43.0",
-  "generatedAt": "2026-05-21T14:01:47.194Z",
+  "version": "0.44.1",
+  "generatedAt": "2026-05-25T13:37:58.453Z",
   "components": [
     {
       "name": "Accordion",
@@ -48812,6 +48812,12 @@
           "type": "TableSortingState | undefined",
           "required": false
         },
+        {
+          "name": "manualSorting",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "When `true`, disables TanStack's client-side sort. The table renders rows\nin the order they appear in `data` and only fires `onSortingChange` on\nheader clicks. Use this when sorting is performed server-side and the\nserver returns pre-sorted rows.\n\nDefault: `false` (client-side sort via TanStack's `getSortedRowModel`)."
+        },
         {
           "name": "rowSelection",
           "type": "TableRowSelectionState | undefined",
@@ -48963,6 +48969,10 @@
           "name": "Sorting",
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"
         },
+        {
+          "name": "ManualSorting",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const data = useMemo(() => sortSecurityEvents(sorting), [sorting]);\n\n  return (\n    <Table\n      data={data}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      manualSorting\n      data-testid='manual-sort-table'\n    />\n  );\n}"
+        },
         {
           "name": "LoadingState",
           "code": "() => (\n  <Table data={[]} columns={securityColumns} isLoading />\n)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.44.0",
+  "version": "0.44.2-rc-fix-WDS-125-table-sorting.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",