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

package/data/demos/patterns/_shared/columns.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createColumn, TextCell } from '@redsift/table';
 import { Flexbox, Icon, IconButtonLink, Pill } from '@redsift/design-system';
 import { mdiArrowRight, mdiCheck, mdiClose } from '@redsift/icons';
-import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
 import { Row } from './data';
 
 // -- Option constants -------------------------------------------------------
@@ -106,7 +106,7 @@ export const columns: GridColDef<Row>[] = [
     headerName: 'Date',
     width: 140,
     ...createColumn('date'),
-    valueGetter: (value: unknown) => parseDate(value),
+    valueGetter: (value: string) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDate(value as Date) : '—'}</TextCell>,
   },
   // DateTime
@@ -115,7 +115,7 @@ export const columns: GridColDef<Row>[] = [
     headerName: 'Date & Time',
     width: 180,
     ...createColumn('dateTime'),
-    valueGetter: (value: unknown) => parseDate(value),
+    valueGetter: (value: string) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDateTime(value as Date) : '—'}</TextCell>,
   },
   // Boolean — in stock

package/data/demos/patterns/_shared/defaults.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 /**
  * Default filter model applied to all pattern examples.

package/data/demos/patterns/_shared/filter-helpers.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 import { Row } from './data';
 
 // -- Types ------------------------------------------------------------------

package/data/demos/patterns/_shared/helpers.tsx

@@ -8,7 +8,7 @@ import {
   GridToolbarExport,
   GridToolbarFilterButton,
   GridToolbarQuickFilter,
-} from '@mui/x-data-grid-pro';
+} from '@mui/x-data-grid-premium';
 
 // -- Toolbar ----------------------------------------------------------------
 

package/data/demos/patterns/_shared/server-logic.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 import { Row, allRows } from './data';
 import { Aggregates, computeAggregates, applyFilters } from './filter-helpers';
 

package/data/demos/patterns/_shared/story-helpers.ts

@@ -314,22 +314,14 @@ export const clickHeaderCheckbox = async (canvasElement: HTMLElement) => {
 
 /** Click a row checkbox by row index (0-based, within the visible page). */
 export const clickRowCheckbox = async (canvasElement: HTMLElement, rowIndex: number) => {
-  let checkbox!: HTMLInputElement;
   await waitFor(() => {
-    const row = canvasElement.querySelector(`.MuiDataGrid-row[data-rowindex="${rowIndex}"]`);
-    expect(row).toBeTruthy();
-    checkbox = row!.querySelector('input[type="checkbox"]') as HTMLInputElement;
-    expect(checkbox).toBeTruthy();
+    const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
+    expect(rows.length).toBeGreaterThan(rowIndex);
   });
-  const wasChecked = checkbox.checked;
+  const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
+  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]');
+  if (!checkbox) throw new Error(`Could not find checkbox in row ${rowIndex}`);
   await userEvent.click(checkbox);
-  // Wait for the click to actually toggle the checkbox (needed for MUI v7 re-render timing)
-  await waitFor(() => {
-    const freshRow = canvasElement.querySelector(`.MuiDataGrid-row[data-rowindex="${rowIndex}"]`);
-    const freshCheckbox = freshRow?.querySelector('input[type="checkbox"]') as HTMLInputElement | null;
-    expect(freshCheckbox).toBeTruthy();
-    expect(freshCheckbox!.checked).toBe(!wasChecked);
-  });
 };
 
 // ---------------------------------------------------------------------------

package/data/demos/patterns/crossfiltered-datagrid-client-side/CrossfilteredDatagridClientSide.interaction.stories.tsx

@@ -85,9 +85,9 @@ import {
   RU7_RM_PASTRY,
 } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Crossfiltered Datagrid (Client)',
-  component: Example,
+  component: Example as any,
 };
 export default meta;
 type Story = StoryObj;

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

@@ -18,7 +18,7 @@ export default () => (
           {/* Category card — two-way: counts update when other cards filter */}
           <WithFilters
             field="Category"
-            dimension={(d: Row) => d.Category}
+            dimension={(d: any) => d.Category}
             datagridCategoryDimFilter={{ field: 'Category', operator: 'isAnyOf' }}
             syncMode="two-way"
           >
@@ -51,7 +51,7 @@ export default () => (
           {/* Allergens card — two-way */}
           <WithFilters
             field="Allergens"
-            dimension={(d: Row) => d.Allergens}
+            dimension={(d: any) => d.Allergens}
             isDimensionArray
             datagridCategoryDimFilter={{ field: 'Allergens', operator: 'hasAnyOf' }}
             syncMode="two-way"

package/data/demos/patterns/crossfiltered-datagrid-server-side/CrossfilteredDatagridServerSide.interaction.stories.tsx

@@ -84,9 +84,9 @@ import {
   RU7_RM_PASTRY,
 } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Crossfiltered Datagrid (Server)',
-  component: Example,
+  component: Example as any,
   parameters: {
     msw: { handlers: bakeryHandlers },
   },

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

@@ -4,7 +4,7 @@ import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { BarChart, PieChart, ArcDatum, BarDatum } from '@redsift/charts';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-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, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';
@@ -208,7 +208,7 @@ export default () => {
               data={itemsChartData}
               sliceRole="option"
               onSliceClick={(datum: ArcDatum) => {
-                const key = datum.data.key as string;
+                const key = datum.data.key;
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Items');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -217,7 +217,7 @@ export default () => {
                 setPage(0);
               }}
               isSliceSelected={(datum: ArcDatum) =>
-                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key as string)
+                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key)
               }
             />
 
@@ -239,7 +239,7 @@ export default () => {
               data={tagsChartData}
               barRole="option"
               onBarClick={(datum: BarDatum) => {
-                const key = datum.data.key as string;
+                const key = String(datum.data.key);
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Tags');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -248,7 +248,7 @@ export default () => {
                 setPage(0);
               }}
               isBarSelected={(datum: BarDatum) =>
-                tagsSelection.length === 0 || tagsSelection.includes(datum.data.key as string)
+                tagsSelection.length === 0 || tagsSelection.includes(String(datum.data.key))
               }
             />
           </Flexbox>

package/data/demos/patterns/drilldowned-datagrid-client-side/DrilldownedDatagridClientSide.interaction.stories.tsx

@@ -34,9 +34,9 @@ import {
   ALLERGENS_HASANYOF_GLUTEN,
 } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Drilldowned Datagrid (Client)',
-  component: Example,
+  component: Example as any,
 };
 export default meta;
 type Story = StoryObj;

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

@@ -3,7 +3,7 @@ import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns, CATEGORY_OPTIONS, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { CustomToolbar } from '../_shared/helpers';

package/data/demos/patterns/drilldowned-datagrid-server-side/DrilldownedDatagridServerSide.interaction.stories.tsx

@@ -35,9 +35,9 @@ import {
   ALLERGENS_HASANYOF_GLUTEN,
 } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Drilldowned Datagrid (Server)',
-  component: Example,
+  component: Example as any,
   parameters: {
     msw: { handlers: bakeryHandlers },
   },

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

@@ -3,7 +3,7 @@ import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-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, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -35,9 +35,9 @@ import {
   TAGS_HASANYOF_LOCAL_NEW,
 } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Single Datagrid (Client)',
-  component: Example,
+  component: Example as any,
 };
 export default meta;
 type Story = StoryObj;

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

@@ -1,20 +1,20 @@
 import React, { useState } from 'react';
-import { DataGrid } from '@redsift/table';
+import { DataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
 import { DEFAULT_FILTER_MODEL, DEFAULT_SORT_MODEL } from '../_shared/defaults';
 
 export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }) => {
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   return (
     <div style={{ width: '100%' }}>
       <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/single-datagrid-server-side/SingleDatagridServerSide.interaction.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -27,9 +27,9 @@ import {
   TAGS_HASANYOF_LOCAL_NEW,
 } from '../_shared/expected-values';
 
-const meta: Meta<typeof Example> = {
+const meta: Meta = {
   title: 'Patterns/Single Datagrid (Server)',
-  component: Example,
+  component: Example as any,
   parameters: {
     msw: { handlers: bakeryHandlers },
   },

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { DataGrid } from '@redsift/table';
+import { DataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -16,7 +16,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
   const [pageSize, setPageSize] = useState(10);
   const [sortModel, setSortModel] = useState<GridSortModel>(DEFAULT_SORT_MODEL);
   const [filterModel, setFilterModel] = useState<GridFilterModel>(initialFilterModel ?? DEFAULT_FILTER_MODEL);
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   const quickFilterText = (filterModel as { quickFilterValues?: string[] }).quickFilterValues?.join(' ') || '';
   const debounceRef = useRef<ReturnType<typeof setTimeout>>();
@@ -54,7 +54,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
     <div style={{ width: '100%' }}>
       <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/summary-dashboard/SummaryDashboard.interaction.stories.tsx

@@ -24,9 +24,9 @@ import {
 } from '../_shared/story-helpers';
 import { AGG_CATEGORY, AGG_ALLERGENS } 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

@@ -16,9 +16,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

@@ -18,9 +18,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
   },
   {

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.3.0-muiv7",
-  "generated": "2026-04-01T18:24:59.361Z",
+  "version": "12.3.0",
+  "generated": "2026-04-01T15:04:59.444Z",
   "repository": "https://github.com/redsift/design-system",
   "documentation": "https://design-system.redsift.io",
   "packages": [
@@ -55184,22 +55184,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.",
@@ -55209,20 +55193,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"
@@ -55403,22 +55376,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.",
@@ -55428,20 +55385,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"
@@ -55811,8 +55757,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/llms-full.txt

@@ -3,7 +3,7 @@
 This file contains comprehensive documentation for all components in the Red Sift Design System.
 It is optimized for LLM consumption and includes props, types, defaults, and usage examples.
 
-Generated: 2026-04-01T18:24:59.354Z
+Generated: 2026-04-01T15:04:59.437Z
 Total Components: 228
 
 ---
@@ -6036,11 +6036,8 @@ For `boolean` columns, use `type: 'boolean'` directly (no createColumn wrapper n
 | paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
 | paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
 | theme | "light" \| "dark" | No | - | Theme. |
-| className | string | No | - |  |
-| style | CSSProperties | No | - |  |
 | getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
-| unstable_dataSourceCache | null \| GridDataSourceCache | No | - |  |
-| unstable_onDataSourceError | (error: Error, params: GridGetRowsParams) => void | No | - |  |
+| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
 
 ---
 
@@ -6097,11 +6094,8 @@ Use when users need persistent table preferences. Requires unique `localStorageK
 | paginationPlacement | "top" \| "bottom" \| "both" \| "none" | No | 'both' | Indicates how to display pagination. |
 | paginationProps | Omit<TablePaginationProps, "paginationMode" \| "component" \| "count" \| "onPageChange" \| "onRowsPerPageChange" \| "page" \| "rowsPerPage" \| "rowsPerPageOptions"> | No | - | Props to forward to the pagination component. |
 | theme | "light" \| "dark" | No | - | Theme. |
-| className | string | No | - |  |
-| style | CSSProperties | No | - |  |
 | getTreeDataPath | (row: any) => readonly string[] | No | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element. @template R @param row The row from which we want the path. @returns The path to the row. |
-| unstable_dataSourceCache | null \| GridDataSourceCache | No | - |  |
-| unstable_onDataSourceError | (error: Error, params: GridGetRowsParams) => void | No | - |  |
+| setTreeDataPath | (path: string[], row: any) => any | No | - | Updates the tree path in a row model. Used when reordering rows across different parents in tree data. @template R @param path The new path for the row. @param row The row model to update. @returns The updated row model with the new path. |
 
 ---
 
@@ -6211,7 +6205,7 @@ When one chart is filtered, all connected charts update automatically.
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | data | JSONArray | Yes | - | Dataset that will be share across every components within the dashboard. |
-| dataGridApiRef | MutableRefObject<GridApiPro> | No | - | Datagrid API Ref. |
+| dataGridApiRef | MutableRefObject<GridApiPremium \| null> | No | - | Datagrid API Ref. MUI v8: can be null initially. |
 
 ---
 
@@ -7885,7 +7879,7 @@ Each pattern describes a common UI scenario, the components involved, how they a
 ## Datagrid Page
 **Description:** Full-page MUI DataGrid with built-in Toolbar (columns, filters, density, export, quick search). Uses GridColDef[] with createColumn() for typed filter operators (string, number, date, singleSelect, multiSelect, tags), renderCell with TextCell and Pill, pagination, and checkboxSelection. All filtering, sorting, and pagination happen client-side — all rows are loaded into the DataGrid at once. Optionally includes bulk selection actions (rowSelectionModel + onRowSelectionModelChange). For server-side data handling, see the Server Datagrid Page pattern. Matches the table pattern used across OnDMARC, Certificates, and Brand Trust.
 **Components:** DataGrid, TextCell, StatefulDataGrid, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-premium
 **Layout:** DataGrid with autoHeight, pagination, pageSize, built-in Toolbar via componentsProps.toolbar.showQuickFilter. Optional bulk actions bar when selectionModel.length > 0.
 **Tags:** table, datagrid, list, pagination, filter, toolbar, bulk-actions, GridColDef, filterModel, checkboxSelection, client-side
 
@@ -7973,7 +7967,7 @@ type Row = {
 ## Server Datagrid Page
 **Description:** Full-page MUI DataGrid where filtering, sorting, and pagination are all handled server-side. Uses paginationMode='server', sortingMode='server', filterMode='server' with controlled rowCount and loading props. The same column types and toolbar as the client-side Datagrid Page pattern, but only the current page of data is fetched per request. Filter changes are debounced to avoid excessive requests. Ideal for datasets too large to load entirely in the browser.
 **Components:** DataGrid, TextCell, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @mui/x-data-grid-premium
 **Layout:** DataGrid with autoHeight, paginationMode='server', sortingMode='server', filterMode='server', rowCount, loading, built-in Toolbar. Optional bulk actions bar when selectionModel.length > 0.
 **Tags:** table, datagrid, server-side, pagination, paginationMode, filterMode, sortingMode, loading, rowCount, filter, toolbar, bulk-actions, GridColDef, filterModel, sortModel, debounce
 
@@ -8089,7 +8083,7 @@ type FetchResult = {
 ## Drilldown Datagrid Page
 **Description:** Extends the Datagrid Page with summary DataCards placed above the grid. Each DataCard contains DataRows showing aggregate counts for a field (status, category, active). Clicking a DataRow adds an isAnyOf filter to the DataGrid — a one-click shortcut. This is a one-way interaction: DataCard counts always reflect the full (unfiltered) dataset. When the user sets an is or isNot filter via the filter panel, the DataCard selection clears and clicking a DataRow overwrites with isAnyOf.
 **Components:** DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium
 **Layout:** Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar when selectionModel.length > 0.
 **Tags:** table, datagrid, datacard, drilldown, drilldown-item, filter, isAnyOf, summary-cards, kpi, one-way, filterModel, client-side
 
@@ -8184,7 +8178,7 @@ type AggregateCounts = {
 ## Cross-filtered Datagrid Page
 **Description:** Extends the Drilldown Datagrid Page with two-way synchronization between DataCards and the DataGrid filter panel. DataRow clicks add isAnyOf filters. Filter panel changes update DataCard selection state. DataCard counts recalculate against the cross-filtered dataset — each card computes counts by applying all filters except its own field, preventing a card from zeroing out its non-selected values. When the user sets is/isNot via the filter panel, the DataCard clears. Clicking a DataRow overwrites with isAnyOf.
 **Components:** DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink
-**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro
+**Packages:** @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium
 **Layout:** Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.
 **Tags:** table, datagrid, datacard, drilldown, drilldown-item, cross-filter, crossfilter, two-way, bidirectional, filter, isAnyOf, summary-cards, kpi, dashboard, filterModel, client-side
 
@@ -8315,7 +8309,7 @@ import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-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, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';
@@ -8592,7 +8586,7 @@ import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
 import { BarChart, PieChart, ArcDatum, BarDatum } from '@redsift/charts';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-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, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';
@@ -8796,7 +8790,7 @@ export default () => {
               data={itemsChartData}
               sliceRole="option"
               onSliceClick={(datum: ArcDatum) => {
-                const key = datum.data.key as string;
+                const key = datum.data.key;
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Items');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -8805,7 +8799,7 @@ export default () => {
                 setPage(0);
               }}
               isSliceSelected={(datum: ArcDatum) =>
-                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key as string)
+                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key)
               }
             />
 
@@ -8827,7 +8821,7 @@ export default () => {
               data={tagsChartData}
               barRole="option"
               onBarClick={(datum: BarDatum) => {
-                const key = datum.data.key as string;
+                const key = String(datum.data.key);
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Tags');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -8836,7 +8830,7 @@ export default () => {
                 setPage(0);
               }}
               isBarSelected={(datum: BarDatum) =>
-                tagsSelection.length === 0 || tagsSelection.includes(datum.data.key as string)
+                tagsSelection.length === 0 || tagsSelection.includes(String(datum.data.key))
               }
             />
           </Flexbox>
@@ -9014,7 +9008,7 @@ export default () => {
 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/llms.txt

@@ -181,10 +181,10 @@ The Red Sift Design System provides reusable UI components including forms, navi
 ### table
 
 - **ControlledPagination** (0 props)
-- **DataGrid** (12 props): DataGrid displays tabular data with sorting, filtering, pagination, and row selection.
+- **DataGrid** (9 props): DataGrid displays tabular data with sorting, filtering, pagination, and row selection.
 - **GridToolbarFilterSemanticField** (7 props): The GridToolbarFilterSemanticField component.
 - **ServerSideControlledPagination** (0 props)
-- **StatefulDataGrid** (15 props): StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
+- **StatefulDataGrid** (12 props): StatefulDataGrid extends DataGrid with automatic state persistence to localStorage.
 - **TextCell** (6 props): The Cell component.
 - **Toolbar** (15 props): ------
 - **ToolbarWrapper** (0 props)
@@ -284,10 +284,10 @@ Proven component groupings for common UI scenarios, extracted from production ap
 
 | Pattern | Components | Packages |
 |---------|-----------|----------|
-| Datagrid Page | DataGrid, TextCell, StatefulDataGrid, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
-| Server Datagrid Page | DataGrid, TextCell, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
-| Drilldown Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro |
-| Cross-filtered Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-pro |
+| Datagrid Page | DataGrid, TextCell, StatefulDataGrid, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-premium |
+| Server Datagrid Page | DataGrid, TextCell, Pill, Button, Flexbox, Text, Badge, Icon, IconButton, IconButtonLink | @redsift/table, @redsift/design-system, @mui/x-data-grid-premium |
+| Drilldown Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium |
+| Cross-filtered Datagrid Page | DataGrid, TextCell, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow, Pill, Button, Flexbox, Text, Icon, IconButtonLink | @redsift/table, @redsift/design-system, @redsift/dashboard, @mui/x-data-grid-premium |
 | Server Drilldown Datagrid Page | DataGrid, TextCell, DataCard, DataRow, Flexbox, Pill, Icon | @redsift/table, @redsift/dashboard, @redsift/design-system, @mui/x-data-grid-pro |
 | Server Cross-filtered Datagrid Page | DataGrid, TextCell, DataCard, DataRow, Flexbox, Pill, Icon | @redsift/table, @redsift/dashboard, @redsift/design-system, @mui/x-data-grid-pro |
 | Tabbed Datagrid Page | DataGrid, TextCell, Tabs, Tab, Flexbox, Pill, Number | @redsift/table, @redsift/design-system |

package/data/docs/patterns-catalog.md

@@ -27,7 +27,7 @@ These patterns serve as implementation specs — they give LLMs and developers e
 2. DataGrid — the table itself, configured with autoHeight, pagination, checkboxSelection, and GridColDef[] columns
 3. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell`, `StatefulDataGrid` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridRowSelectionModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell`, `StatefulDataGrid` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridRowSelectionModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox` from `@redsift/design-system`
 **Components:** DataGrid, TextCell, StatefulDataGrid (from @redsift/table), Flexbox, Button, Pill, Text, Badge, Icon, IconButton, IconButtonLink (from @redsift/design-system)
 **Layout:** DataGrid with `autoHeight`, `pagination`, `pageSize`, built-in Toolbar (Columns | Filters | Density | Export | Search via `componentsProps.toolbar.showQuickFilter`). Columns use `GridColDef[]` with `createColumn()` for typed filter operators (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`), `renderCell` returning `TextCell`, `Pill`, `Badge`. Optional bulk actions bar above grid shown when `selectionModel.length > 0`.
 
@@ -98,7 +98,7 @@ type Row = {
 2. DataGrid — the table configured with paginationMode='server', sortingMode='server', filterMode='server', loading, and rowCount
 3. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridSortModel`, `GridSelectionModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon`, `IconButtonLink` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `GridColDef`, `GridFilterModel`, `GridSortModel`, `GridSelectionModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon`, `IconButtonLink` from `@redsift/design-system`
 **Components:** DataGrid, TextCell (from @redsift/table), Flexbox, Button, Pill, Text, Badge, Icon, IconButton, IconButtonLink (from @redsift/design-system)
 **Layout:** DataGrid with `autoHeight`, `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `rowCount`, `loading`, built-in Toolbar (Columns | Filters | Density | Export | Search). Same column types as Datagrid Page.
 
@@ -206,7 +206,7 @@ type FetchResult = {
 3. DataGrid — the table with controlled filterModel + onFilterModelChange
 4. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
 **Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DrilldownItem (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
 **Layout:** Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar.
 
@@ -292,7 +292,7 @@ type AggregateCounts = {
 3. DataGrid — the table with controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side
 4. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
 
-**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
+**Key imports:** `DataGrid`, `TextCell` from `@redsift/table`; `DataCard`, `DrilldownItem` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-premium`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
 **Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DrilldownItem (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (from @redsift/design-system)
 **Layout:** Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.
 

package/data/docs/patterns.json

@@ -16,7 +16,7 @@
       "IconButton",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-premium"],
     "layout": "DataGrid with autoHeight, pagination, pageSize, built-in Toolbar via componentsProps.toolbar.showQuickFilter. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -167,7 +167,7 @@
       "IconButton",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@mui/x-data-grid-premium"],
     "layout": "DataGrid with autoHeight, paginationMode='server', sortingMode='server', filterMode='server', rowCount, loading, built-in Toolbar. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -374,7 +374,7 @@
       "Icon",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-premium"],
     "layout": "Flexbox column: DataCard row (Flexbox gap=12px flexWrap=wrap with 1-N DataCards), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Optional bulk actions bar when selectionModel.length > 0.",
     "tags": [
       "table",
@@ -542,7 +542,7 @@
       "Icon",
       "IconButtonLink"
     ],
-    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-pro"],
+    "packages": ["@redsift/table", "@redsift/design-system", "@redsift/dashboard", "@mui/x-data-grid-premium"],
     "layout": "Flexbox column: DataCard row (cross-filtered counts), then DataGrid with autoHeight, pagination, controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side via applyFilters. Optional bulk actions bar.",
     "tags": [
       "table",

package/data/metadata.json

@@ -1,4 +1,4 @@
 {
-  "generatedAt": "2026-04-01T20:04:43.211Z",
-  "commitSha": "1d33598543559874b83eb607bb12bfd4a30fb66e"
+  "generatedAt": "2026-04-01T20:05:51.088Z",
+  "commitSha": "01c485a1a597cdec0af3bb199675dcb7577a26e4"
 }

package/data/patterns/crossfiltered-datagrid-server-side.mdx

@@ -99,7 +99,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Server-driven state
 const [rows, setRows] = useState<Row[]>([]);

package/data/patterns/drilldowned-datagrid-client-side.mdx

@@ -114,7 +114,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useMemo, useState } from 'react';
-import { GridFilterModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel } from '@mui/x-data-grid-premium';
 
 // Filter state — controlled, shared between DataCards and DataGrid
 const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });

package/data/patterns/drilldowned-datagrid-server-side.mdx

@@ -91,7 +91,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Server-driven state
 const [rows, setRows] = useState<Row[]>([]);

package/data/patterns/single-datagrid-client-side.mdx

@@ -33,7 +33,7 @@ When **not** to use:
 
 1. **Toolbar** — `Flexbox` wrapping MUI's `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and `GridToolbarQuickFilter`
 2. **DataGrid** — the table itself from `@redsift/table`, configured with `autoHeight`, `pagination`, `checkboxSelection`, and `GridColDef[]` columns
-3. **Bulk Action Bar** — a `Flexbox` row shown when `selectionModel.length > 0`, containing a `Pill` with the selection count and action `Button` components
+3. **Bulk Action Bar** — a `Flexbox` row shown when rows are selected, containing a `Pill` with the selection count and action `Button` components
 
 ## Features
 
@@ -60,7 +60,7 @@ When **not** to use:
       required: true,
       description: (
         <>
-          Client-side pagination with configurable page size (<code>pageSizeOptions</code>)
+          Client-side pagination with configurable page size (<code>rowsPerPageOptions</code>)
         </>
       ),
     },
@@ -124,13 +124,13 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useState } from 'react';
-import { GridRowSelectionModel } from '@mui/x-data-grid-pro';
+import { GridRowSelectionModel } from '@mui/x-data-grid-premium';
 
 // Selection state — tracks which rows are checked
 const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
-// Pagination — DataGrid v7 uses a paginationModel object
-// (DataGrid manages pagination internally for client-side mode)
+// Page size — controlled if you need to persist it
+// (DataGrid manages page/pageSize internally for client-side mode)
 `} />
 
 ## Data Contract
@@ -149,7 +149,7 @@ type Row = {
 };
 
 // Column definitions — use createColumn() for built-in filter operators
-import { GridColDef } from '@mui/x-data-grid-pro';
+import { GridColDef } from '@mui/x-data-grid-premium';
 import { createColumn } from '@redsift/table';
 
 const columns: GridColDef[] = [
@@ -184,9 +184,9 @@ When data fetching fails, replace the DataGrid area with an error message and a
 1. **Define your row type** — Create a TypeScript `type Row` per the Data Contract section. Every row must have a unique `id` field.
 2. **Define column definitions** — Create a `GridColDef[]` array. Use `createColumn()` (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`, `...createColumn('multiSelect')`) for built-in filter operators. Add `renderCell` for rich content (pills, icons, links).
 3. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and optionally `GridToolbarQuickFilter`.
-4. **Set up state** — Add `useState<GridRowSelectionModel>([])` for checkbox selection (if needed).
-5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSizeOptions`, `checkboxSelection`, `slots={{ toolbar: CustomToolbar }}`.
-6. **Add bulk action bar** — Conditionally render a `Flexbox` with a `Pill` (selection count) and action `Button` components when `selectionModel.length > 0`.
+4. **Set up state** — Add `useState<GridRowSelectionModel>` for checkbox selection (if needed).
+5. **Render the DataGrid** — Pass `rows`, `columns`, `autoHeight`, `pagination`, `pageSize`, `rowsPerPageOptions`, `checkboxSelection`, `slots={{ toolbar: CustomToolbar }}`.
+6. **Add bulk action bar** — Conditionally render a `Flexbox` with a `Pill` (selection count) and action `Button` components when rows are selected.
 7. **Handle edge cases** — Add loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 8. **Verify** — Test pagination breakpoints, filter operators, column visibility toggle, density switching, and export.
 

package/data/patterns/single-datagrid-server-side.mdx

@@ -34,7 +34,7 @@ When **not** to use:
 
 1. **Toolbar** — `Flexbox` wrapping MUI's `GridToolbarContainer` with `GridToolbarFilterButton`, `GridToolbarColumnsButton`, `GridToolbarDensitySelector`, `GridToolbarExport`, and `GridToolbarQuickFilter`
 2. **DataGrid** — the table configured with `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, and `rowCount`
-3. **Bulk Action Bar** — a `Flexbox` row shown when `selectionModel.length > 0`, containing a `Pill` with the selection count and action `Button` components
+3. **Bulk Action Bar** — a `Flexbox` row shown when rows are selected, containing a `Pill` with the selection count and action `Button` components
 
 ## Features
 
@@ -101,8 +101,8 @@ When **not** to use:
       required: true,
       description: (
         <>
-          <code>GridColDef[]</code> with custom types: <code>rsString</code>, <code>rsNumber</code>,{' '}
-          <code>rsSingleSelect</code>, <code>rsMultipleSelect</code>
+          <code>GridColDef[]</code> with <code>createColumn()</code>: <code>createColumn('string')</code>, <code>createColumn('number')</code>,{' '}
+          <code>createColumn('singleSelect')</code>, <code>createColumn('multiSelect')</code>
         </>
       ),
     },
@@ -159,7 +159,7 @@ When **not** to use:
 ## State Management
 
 <CodeBlock codeString={`import { useCallback, useEffect, useRef, useState } from 'react';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-premium';
 
 // Data state — rows returned from the server for the current page
 const [rows, setRows] = useState<Row[]>([]);
@@ -263,13 +263,13 @@ The fetch function rejects with an error. The component shows an error banner ab
 
 1. **Define your row type** — Create a TypeScript `type Row` per the Data Contract section. Every row must have a unique `id` field.
 2. **Create your fetch function** — Implement an async function matching the `FetchParams → FetchResult` contract. This is where you call your API or ElasticSearch. If using React Query, wrap it in a `useQuery` hook with `[page, pageSize, sortModel, filterModel, quickFilterText]` as the query key.
-3. **Define column definitions** — Create a `GridColDef[]` array. Use RS custom column types (`rsString`, `rsNumber`, `rsSingleSelect`, `rsMultipleSelect`) for built-in filter operators. Add `renderCell` for rich content.
+3. **Define column definitions** — Create a `GridColDef[]` array. Use `createColumn()` (e.g. `...createColumn('string')`, `...createColumn('number')`, `...createColumn('singleSelect')`, `...createColumn('multiSelect')`) for built-in filter operators. Add `renderCell` for rich content.
 4. **Create the toolbar** — Build a `CustomToolbar` component using `GridToolbarContainer` with filter, columns, density, export, and quick search controls.
 5. **Set up state** — Add all hooks from the State Management section: `rows`, `totalRows`, `loading`, `page`, `pageSize`, `sortModel`, `filterModel`, `selectionModel`, `quickFilterText`, and the debounce ref.
 6. **Wire the fetch effect** — Use `useEffect` to call your fetch function whenever `page`, `pageSize`, `sortModel`, `filterModel`, or `quickFilterText` changes.
-7. **Configure the DataGrid** — Pass `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rowCount={totalRows}`, and all controlled state handlers (`onPaginationModelChange`, `onSortModelChange`, `onFilterModelChange`).
+7. **Configure the DataGrid** — Pass `paginationMode="server"`, `sortingMode="server"`, `filterMode="server"`, `loading`, `rowCount={totalRows}`, and all controlled state handlers (`onPageChange`, `onPageSizeChange`, `onSortModelChange`, `onFilterModelChange`).
 8. **Debounce filter changes** — Use a 300ms `setTimeout` in `onFilterModelChange` to avoid excessive requests during rapid typing. Reset to page 0 on filter change.
-9. **Add bulk action bar** — Conditionally render when `selectionModel.length > 0`.
+9. **Add bulk action bar** — Conditionally render when rows are selected.
 10. **Handle edge cases** — Add loading state (`loading` prop), empty state (custom `NoRowsOverlay`), and error state (conditional render with retry).
 11. **Verify** — Test page navigation, sort toggling, filter operators, debounced quick search, loading overlay, empty results, and error recovery.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redsift/ds-mcp-server",
-  "version": "12.4.0-muiv7",
+  "version": "12.4.0",
   "private": false,
   "type": "module",
   "description": "MCP server for the Red Sift Design System — provides component lookup, prop documentation, and code generation tools for AI assistants.",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "restricted"
   },
-  "gitHead": "1d33598543559874b83eb607bb12bfd4a30fb66e"
+  "gitHead": "01c485a1a597cdec0af3bb199675dcb7577a26e4"
 }