@redsift/ds-mcp-server 12.5.2-muiv7 → 12.5.2

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

@@ -2,8 +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 type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -627,12 +626,94 @@ 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
 // ---------------------------------------------------------------------------
 
 let _columnOrderRouter: ReturnType<typeof createMockRouter>;
-let _columnOrderApiRef: React.MutableRefObject<GridApiPro>;
+let _columnOrderApiRef: ReturnType<typeof useGridApiRef>;
 
 export const ColumnOrderInteraction: Story = {
   render: () => {
@@ -669,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,8 +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, useGridApiRef } from '@mui/x-data-grid-pro';
-import type { GridApiPro } 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';
@@ -13,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,8 +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 type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -387,9 +386,7 @@ export const SelectionPersistsAcrossPages: Story = {
       await waitForServerResponse(canvas);
       await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
       await assertBulkActionBarVisible(canvasElement, 2);
-      // In MUI v7, the header checkbox reflects current-page selection only.
-      // No page-2 rows are selected, so the header is unchecked (not indeterminate).
-      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+      await assertHeaderCheckboxState(canvasElement, 'indeterminate');
       await assertRowCheckboxChecked(canvasElement, 0, false);
       await assertAllStatesInSync({ getSearch });
     });
@@ -648,12 +645,98 @@ 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
 // ---------------------------------------------------------------------------
 
 let _columnOrderRouter: ReturnType<typeof createMockRouter>;
-let _columnOrderApiRef: React.MutableRefObject<GridApiPro>;
+let _columnOrderApiRef: ReturnType<typeof useGridApiRef>;
 
 export const ColumnOrderInteraction: Story = {
   render: () => {
@@ -690,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,8 +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, useGridApiRef } from '@mui/x-data-grid-pro';
-import type { GridApiPro } 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';
@@ -14,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) => {
@@ -23,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
@@ -58,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)}
         />
@@ -94,9 +94,6 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
             fetchData();
           }}
           onPaginationModelChange={(model) => {
-            if (model.pageSize !== pageSizeRef.current) {
-              setRows([]);
-            }
             pageRef.current = model.page;
             pageSizeRef.current = model.pageSize;
             fetchData();

package/data/demos/patterns/summary-dashboard/SummaryDashboard.interaction.stories.tsx

@@ -24,9 +24,9 @@ import {
 } from '../_shared/story-helpers';
 import { AGG_CATEGORY, AGG_ALLERGENS, AGG_INSTOCK } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Summary Dashboard',
-  component: Example,
+  component: Example as any,
 };
 export default meta;
 type Story = StoryObj;

package/data/demos/patterns/tabbed-datagrid-client-side/TabbedDatagridClientSide.interaction.stories.tsx

@@ -17,9 +17,9 @@ import {
 } from '../_shared/story-helpers';
 import { TOTAL, CATEGORY_BAKERY, CATEGORY_BEVERAGE, CATEGORY_PASTRY, CATEGORY_OTHER } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Tabbed Datagrid (Client)',
-  component: Example,
+  component: Example as any,
 };
 export default meta;
 type Story = StoryObj;

package/data/demos/patterns/tabbed-datagrid-server-side/TabbedDatagridServerSide.interaction.stories.tsx

@@ -19,9 +19,9 @@ import {
 } from '../_shared/story-helpers';
 import { TOTAL, CATEGORY_BAKERY, CATEGORY_BEVERAGE, CATEGORY_PASTRY, CATEGORY_OTHER } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Tabbed Datagrid (Server)',
-  component: Example,
+  component: Example as any,
   parameters: {
     msw: { handlers: bakeryHandlers },
   },

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

@@ -71,22 +71,6 @@
       "defaultValue": null,
       "category": "props"
     },
-    {
-      "name": "className",
-      "description": "",
-      "type": "string",
-      "required": false,
-      "defaultValue": null,
-      "category": "props"
-    },
-    {
-      "name": "style",
-      "description": "",
-      "type": "CSSProperties",
-      "required": false,
-      "defaultValue": null,
-      "category": "props"
-    },
     {
       "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.",
@@ -96,20 +80,9 @@
       "category": "props"
     },
     {
-      "name": "unstable_dataSourceCache",
-      "description": "",
-      "type": [
-        "null",
-        "GridDataSourceCache"
-      ],
-      "required": false,
-      "defaultValue": null,
-      "category": "props"
-    },
-    {
-      "name": "unstable_onDataSourceError",
-      "description": "",
-      "type": "(error: Error, params: GridGetRowsParams) => void",
+      "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/StatefulDataGrid.json

@@ -95,22 +95,6 @@
       "defaultValue": null,
       "category": "props"
     },
-    {
-      "name": "className",
-      "description": "",
-      "type": "string",
-      "required": false,
-      "defaultValue": null,
-      "category": "props"
-    },
-    {
-      "name": "style",
-      "description": "",
-      "type": "CSSProperties",
-      "required": false,
-      "defaultValue": null,
-      "category": "props"
-    },
     {
       "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.",
@@ -120,20 +104,9 @@
       "category": "props"
     },
     {
-      "name": "unstable_dataSourceCache",
-      "description": "",
-      "type": [
-        "null",
-        "GridDataSourceCache"
-      ],
-      "required": false,
-      "defaultValue": null,
-      "category": "props"
-    },
-    {
-      "name": "unstable_onDataSourceError",
-      "description": "",
-      "type": "(error: Error, params: GridGetRowsParams) => void",
+      "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-index.json

@@ -1011,7 +1011,7 @@
     "name": "DataGrid",
     "package": "@redsift/table",
     "description": "DataGrid displays tabular data with sorting, filtering, pagination, and row selection.",
-    "propsCount": 12,
+    "propsCount": 9,
     "hasExamples": false
   },
   {
@@ -1039,7 +1039,7 @@
     "name": "StatefulDataGrid",
     "package": "@redsift/table",
     "description": "StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.",
-    "propsCount": 15,
+    "propsCount": 12,
     "hasExamples": false
   },
   {