@redsift/ds-mcp-server 12.5.3-muiv6 → 12.5.3

package/data/demos/patterns/stateful-single-datagrid-client-side/StatefulSingleDatagridClientSide.interaction.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -626,6 +626,88 @@ export const SortingInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Row Grouping — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _rowGroupingRouter: ReturnType<typeof createMockRouter>;
+let _rowGroupingApiRef: ReturnType<typeof useGridApiRef>;
+
+export const RowGroupingInteraction: Story = {
+  render: () => {
+    _rowGroupingRouter = usePersistentMockRouter();
+    _rowGroupingApiRef = useGridApiRef();
+    return <Example useRouter={_rowGroupingRouter.useRouter} apiRef={_rowGroupingApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _rowGroupingRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set row grouping to Category', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel(['Category']);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_rowGrouping=Category');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkRowGrouping: true });
+    });
+
+    await step('Clear row grouping', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel([]);
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_rowGrouping');
+      });
+    });
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Aggregation — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _aggregationRouter: ReturnType<typeof createMockRouter>;
+let _aggregationApiRef: ReturnType<typeof useGridApiRef>;
+
+export const AggregationInteraction: Story = {
+  render: () => {
+    _aggregationRouter = usePersistentMockRouter();
+    _aggregationApiRef = useGridApiRef();
+    return <Example useRouter={_aggregationRouter.useRouter} apiRef={_aggregationApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _aggregationRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set aggregation Paid=sum', async () => {
+      _aggregationApiRef.current!.setAggregationModel({ Paid: 'sum' });
+      await waitFor(() => {
+        expect(getSearch()).toContain('_aggregation=Paid.sum');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkAggregation: true });
+    });
+
+    await step('Clear aggregation', async () => {
+      _aggregationApiRef.current!.setAggregationModel({});
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_aggregation');
+      });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Column Order — reorder via apiRef, assert URL
 // ---------------------------------------------------------------------------
@@ -668,6 +750,52 @@ export const ColumnOrderInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Pivot — activate via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _pivotRouter: ReturnType<typeof createMockRouter>;
+let _pivotApiRef: ReturnType<typeof useGridApiRef>;
+
+export const PivotInteraction: Story = {
+  render: () => {
+    _pivotRouter = usePersistentMockRouter();
+    _pivotApiRef = useGridApiRef();
+    return <Example useRouter={_pivotRouter.useRouter} apiRef={_pivotApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _pivotRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Activate pivot with Category columns, Items rows, Paid sum values', async () => {
+      _pivotApiRef.current!.setPivotModel({
+        columns: [{ field: 'Category' }],
+        rows: [{ field: 'Items' }],
+        values: [{ field: 'Paid', aggFunc: 'sum' }],
+      });
+      _pivotApiRef.current!.setPivotActive(true);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_pivot=');
+      });
+    });
+
+    await step('Assert pivot params in URL', async () => {
+      const search = getSearch();
+      expect(search).toContain('cols:Category');
+      expect(search).toContain('rows:Items');
+      expect(search).toContain('vals:Paid.sum');
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkPivot: true });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // State variants — with interaction assertions
 // ---------------------------------------------------------------------------

package/data/demos/patterns/stateful-single-datagrid-client-side/example.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { StatefulDataGrid } from '@redsift/table';
+import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridApiPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
@@ -12,20 +13,20 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
   const internalApiRef = useGridApiRef();
   const apiRef = propsApiRef ?? internalApiRef;
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   return (
     <div style={{ width: '100%' }}>
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />

package/data/demos/patterns/stateful-single-datagrid-server-side/StatefulSingleDatagridServerSide.interaction.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -645,6 +645,92 @@ export const SortingInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Row Grouping — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _rowGroupingRouter: ReturnType<typeof createMockRouter>;
+let _rowGroupingApiRef: ReturnType<typeof useGridApiRef>;
+
+export const RowGroupingInteraction: Story = {
+  render: () => {
+    _rowGroupingRouter = usePersistentMockRouter();
+    _rowGroupingApiRef = useGridApiRef();
+    return <Example useRouter={_rowGroupingRouter.useRouter} apiRef={_rowGroupingApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _rowGroupingRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set row grouping to Category', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel(['Category']);
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_rowGrouping=Category');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkRowGrouping: true });
+    });
+
+    await step('Clear row grouping', async () => {
+      _rowGroupingApiRef.current!.setRowGroupingModel([]);
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_rowGrouping');
+      });
+    });
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Aggregation — set via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _aggregationRouter: ReturnType<typeof createMockRouter>;
+let _aggregationApiRef: ReturnType<typeof useGridApiRef>;
+
+export const AggregationInteraction: Story = {
+  render: () => {
+    _aggregationRouter = usePersistentMockRouter();
+    _aggregationApiRef = useGridApiRef();
+    return <Example useRouter={_aggregationRouter.useRouter} apiRef={_aggregationApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _aggregationRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Set aggregation Paid=sum', async () => {
+      _aggregationApiRef.current!.setAggregationModel({ Paid: 'sum' });
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_aggregation=Paid.sum');
+      });
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkAggregation: true });
+    });
+
+    await step('Clear aggregation', async () => {
+      _aggregationApiRef.current!.setAggregationModel({});
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).not.toContain('_aggregation');
+      });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // Column Order — reorder via apiRef, assert URL
 // ---------------------------------------------------------------------------
@@ -687,6 +773,53 @@ export const ColumnOrderInteraction: Story = {
   },
 };
 
+// ---------------------------------------------------------------------------
+// Pivot — activate via apiRef, assert URL
+// ---------------------------------------------------------------------------
+
+let _pivotRouter: ReturnType<typeof createMockRouter>;
+let _pivotApiRef: ReturnType<typeof useGridApiRef>;
+
+export const PivotInteraction: Story = {
+  render: () => {
+    _pivotRouter = usePersistentMockRouter();
+    _pivotApiRef = useGridApiRef();
+    return <Example useRouter={_pivotRouter.useRouter} apiRef={_pivotApiRef} />;
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const { getSearch } = _pivotRouter;
+
+    await step('Wait for grid to load', async () => {
+      await waitForGridToLoad(canvas);
+    });
+
+    await step('Activate pivot with Category columns, Items rows, Paid sum values', async () => {
+      _pivotApiRef.current!.setPivotModel({
+        columns: [{ field: 'Category' }],
+        rows: [{ field: 'Items' }],
+        values: [{ field: 'Paid', aggFunc: 'sum' }],
+      });
+      _pivotApiRef.current!.setPivotActive(true);
+      await waitForServerResponse(canvas);
+      await waitFor(() => {
+        expect(getSearch()).toContain('_pivot=');
+      });
+    });
+
+    await step('Assert pivot params in URL', async () => {
+      const search = getSearch();
+      expect(search).toContain('cols:Category');
+      expect(search).toContain('rows:Items');
+      expect(search).toContain('vals:Paid.sum');
+    });
+
+    await step('Assert sync', async () => {
+      await assertAllStatesInSync({ getSearch, checkPivot: true });
+    });
+  },
+};
+
 // ---------------------------------------------------------------------------
 // State variants — with interaction assertions
 // ---------------------------------------------------------------------------

package/data/demos/patterns/stateful-single-datagrid-server-side/example.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { StatefulDataGrid } from '@redsift/table';
+import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel, GridApiPro, useGridApiRef } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -13,7 +14,7 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
@@ -22,7 +23,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
   const [rows, setRows] = useState<Row[]>([]);
   const [totalRows, setTotalRows] = useState(0);
   const [loading, setLoading] = useState(true);
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   // Refs track the latest model values so fetchData() always reads current state.
   // StatefulDataGrid manages filter/sort/pagination internally — we use callbacks
@@ -57,7 +58,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />

package/data/demos/patterns/tabbed-datagrid-server-side/example.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { DataGrid } from '@redsift/table';
 import { Flexbox, Pill, Number, Text, Tabs, Tab } from '@redsift/design-system';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns, CATEGORY_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';

package/data/docs/components/dashboard/Dashboard.json

@@ -14,8 +14,8 @@
     },
     {
       "name": "dataGridApiRef",
-      "description": "Datagrid API Ref.",
-      "type": "MutableRefObject<GridApiPro>",
+      "description": "Datagrid API Ref. MUI v8: can be null initially.",
+      "type": "MutableRefObject<GridApiPremium | null>",
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/table/DataGrid.json

@@ -72,17 +72,17 @@
       "category": "props"
     },
     {
-      "name": "className",
-      "description": "",
-      "type": "string",
+      "name": "getTreeDataPath",
+      "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+      "type": "(row: any) => readonly string[]",
       "required": false,
       "defaultValue": null,
       "category": "props"
     },
     {
-      "name": "style",
-      "description": "",
-      "type": "CSSProperties",
+      "name": "setTreeDataPath",
+      "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+      "type": "(path: string[], row: any) => any",
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/table/GridToolbarFilterSemanticField.json

@@ -16,7 +16,7 @@
       "name": "onFilterModelChange",
       "description": "",
       "type": "(filterModel: GridFilterModel) => void",
-      "required": true,
+      "required": false,
       "defaultValue": null,
       "category": "props"
     },

package/data/docs/components/table/StatefulDataGrid.json

@@ -96,17 +96,17 @@
       "category": "props"
     },
     {
-      "name": "className",
-      "description": "",
-      "type": "string",
+      "name": "getTreeDataPath",
+      "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+      "type": "(row: any) => readonly string[]",
       "required": false,
       "defaultValue": null,
       "category": "props"
     },
     {
-      "name": "style",
-      "description": "",
-      "type": "CSSProperties",
+      "name": "setTreeDataPath",
+      "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+      "type": "(path: string[], row: any) => any",
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components/table/Toolbar.json

@@ -7,7 +7,10 @@
     {
       "name": "columnsButtonProps",
       "description": "Props to forward to the column button.",
-      "type": "GridToolbarColumnsProps",
+      "type": [
+        "GridToolbarColumnsButtonProps",
+        "GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement>"
+      ],
       "required": false,
       "defaultValue": null,
       "category": "props"
@@ -23,7 +26,10 @@
     {
       "name": "densityButtonProps",
       "description": "Props to forward to the density button.",
-      "type": "GridToolbarDensityProps",
+      "type": [
+        "GridToolbarDensitySelectorProps",
+        "GridToolbarDensitySelectorProps & RefAttributes<HTMLButtonElement>"
+      ],
       "required": false,
       "defaultValue": null,
       "category": "props"

package/data/docs/components.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "name": "Red Sift Design System",
-  "version": "12.5.2-muiv6",
-  "generated": "2026-05-19T06:44:55.495Z",
+  "version": "12.5.3-alpha.7",
+  "generated": "2026-05-19T06:45:02.617Z",
   "repository": "https://github.com/redsift/design-system",
   "documentation": "https://design-system.redsift.io",
   "packages": [
@@ -41526,17 +41526,17 @@
               "category": "props"
             },
             {
-              "name": "className",
-              "description": "",
-              "type": "string",
+              "name": "getTreeDataPath",
+              "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+              "type": "(row: any) => readonly string[]",
               "required": false,
               "defaultValue": null,
               "category": "props"
             },
             {
-              "name": "style",
-              "description": "",
-              "type": "CSSProperties",
+              "name": "setTreeDataPath",
+              "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+              "type": "(path: string[], row: any) => any",
               "required": false,
               "defaultValue": null,
               "category": "props"
@@ -41562,7 +41562,7 @@
               "name": "onFilterModelChange",
               "description": "",
               "type": "(filterModel: GridFilterModel) => void",
-              "required": true,
+              "required": false,
               "defaultValue": null,
               "category": "props"
             },
@@ -41718,17 +41718,17 @@
               "category": "props"
             },
             {
-              "name": "className",
-              "description": "",
-              "type": "string",
+              "name": "getTreeDataPath",
+              "description": "Determines the path of a row in the tree data.\nFor instance, a row with the path [\"A\", \"B\"] is the child of the row with the path [\"A\"].\nNote that all paths must contain at least one element.\n@template R\n@param row The row from which we want the path.\n@returns The path to the row.",
+              "type": "(row: any) => readonly string[]",
               "required": false,
               "defaultValue": null,
               "category": "props"
             },
             {
-              "name": "style",
-              "description": "",
-              "type": "CSSProperties",
+              "name": "setTreeDataPath",
+              "description": "Updates the tree path in a row model.\nUsed when reordering rows across different parents in tree data.\n@template R\n@param path The new path for the row.\n@param row The row model to update.\n@returns The updated row model with the new path.",
+              "type": "(path: string[], row: any) => any",
               "required": false,
               "defaultValue": null,
               "category": "props"
@@ -41862,7 +41862,10 @@
             {
               "name": "columnsButtonProps",
               "description": "Props to forward to the column button.",
-              "type": "GridToolbarColumnsProps",
+              "type": [
+                "GridToolbarColumnsButtonProps",
+                "GridToolbarColumnsButtonProps & RefAttributes<HTMLButtonElement>"
+              ],
               "required": false,
               "defaultValue": null,
               "category": "props"
@@ -41878,7 +41881,10 @@
             {
               "name": "densityButtonProps",
               "description": "Props to forward to the density button.",
-              "type": "GridToolbarDensityProps",
+              "type": [
+                "GridToolbarDensitySelectorProps",
+                "GridToolbarDensitySelectorProps & RefAttributes<HTMLButtonElement>"
+              ],
               "required": false,
               "defaultValue": null,
               "category": "props"
@@ -42067,8 +42073,8 @@
             },
             {
               "name": "dataGridApiRef",
-              "description": "Datagrid API Ref.",
-              "type": "MutableRefObject<GridApiPro>",
+              "description": "Datagrid API Ref. MUI v8: can be null initially.",
+              "type": "MutableRefObject<GridApiPremium | null>",
               "required": false,
               "defaultValue": null,
               "category": "props"