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

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-03T12:48:51.214Z",
+  "version": "12.3.0",
+  "generated": "2026-04-03T15:15:35.500Z",
   "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-03T12:48:51.204Z
+Generated: 2026-04-03T15:15:35.485Z
 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
 
@@ -7968,22 +7962,22 @@ type Row = {
 
 ```tsx
 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)}
         />
@@ -7991,8 +7985,8 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
         <DataGrid
           autoHeight
           pagination
+          density="compact"
           initialState={{
-            density: 'compact',
             filter: { filterModel: initialFilterModel ?? DEFAULT_FILTER_MODEL },
             sorting: { sortModel: DEFAULT_SORT_MODEL },
             pagination: { paginationModel: { page: 0, pageSize: 10 } },
@@ -8022,7 +8016,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
 ## 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
 
@@ -8133,9 +8127,9 @@ type FetchResult = {
 
 ```tsx
 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';
@@ -8150,7 +8144,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>>();
@@ -8188,7 +8182,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)}
         />
@@ -8196,7 +8190,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
         <DataGrid
           autoHeight
           pagination
-          initialState={{ density: 'compact' }}
+          density="compact"
           paginationMode="server"
           sortingMode="server"
           filterMode="server"
@@ -8256,9 +8250,9 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
 
 ```tsx
 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 { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
@@ -8273,14 +8267,14 @@ interface Props {
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter }: Props) => {
   const apiRef = useGridApiRef();
-  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)}
         />
@@ -8336,9 +8330,9 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter }: Props) =>
 
 ```tsx
 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 { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -8357,7 +8351,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter }: Props) =>
   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
@@ -8392,7 +8386,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter }: Props) =>
       <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)}
         />
@@ -8454,7 +8448,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter }: Props) =>
 ## 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
 
@@ -8548,7 +8542,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';
@@ -8752,7 +8746,7 @@ export default () => {
 ## 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
 
@@ -8867,7 +8861,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"
           >
@@ -8900,7 +8894,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"
@@ -9026,7 +9020,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';
@@ -9303,7 +9297,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';
@@ -9507,7 +9501,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];
@@ -9516,7 +9510,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)
               }
             />
 
@@ -9538,7 +9532,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];
@@ -9547,7 +9541,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>
@@ -9725,7 +9719,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,12 +284,12 @@ 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 |
+| 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 |
 | Stateful Datagrid Page (Client) | StatefulDataGrid, DataGrid, Pill, Button, Flexbox, Text, Icon | @redsift/table, @redsift/design-system, @mui/x-data-grid-pro |
 | Stateful Datagrid Page (Server) | StatefulDataGrid, DataGrid, Pill, Button, Flexbox, Text, Icon | @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 |
+| 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 |