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

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-15T11:48:43.051Z",
+  "version": "12.3.0",
+  "generated": "2026-04-10T18:15:31.369Z",
   "repository": "https://github.com/redsift/design-system",
   "documentation": "https://design-system.redsift.io",
   "packages": [
@@ -51493,22 +51493,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.",
@@ -51518,17 +51502,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"
@@ -51695,22 +51671,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.",
@@ -51720,17 +51680,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"
@@ -52077,8 +52029,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-15T11:48:43.043Z
+Generated: 2026-04-10T18:15:31.360Z
 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. |
 
 ---
 
@@ -7877,7 +7871,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
 
@@ -7960,22 +7954,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)}
         />
@@ -7983,8 +7977,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 } },
@@ -8014,7 +8008,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
 
@@ -8125,9 +8119,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';
@@ -8142,7 +8136,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>>();
@@ -8180,7 +8174,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)}
         />
@@ -8188,7 +8182,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
         <DataGrid
           autoHeight
           pagination
-          initialState={{ density: 'compact' }}
+          density="compact"
           paginationMode="server"
           sortingMode="server"
           filterMode="server"
@@ -8248,10 +8242,10 @@ 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 type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
@@ -8262,20 +8256,20 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
   const internalApiRef = useGridApiRef();
   const apiRef = propsApiRef ?? internalApiRef;
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   return (
     <div style={{ width: '100%' }}>
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />
@@ -8331,10 +8325,10 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
 
 ```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 type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -8346,7 +8340,7 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
@@ -8355,7 +8349,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
   const [rows, setRows] = useState<Row[]>([]);
   const [totalRows, setTotalRows] = useState(0);
   const [loading, setLoading] = useState(true);
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   // Refs track the latest model values so fetchData() always reads current state.
   // StatefulDataGrid manages filter/sort/pagination internally — we use callbacks
@@ -8390,7 +8384,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />
@@ -8452,7 +8446,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
 ## 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
 
@@ -8546,7 +8540,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';
@@ -8750,7 +8744,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
 
@@ -8865,7 +8859,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"
           >
@@ -8898,7 +8892,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"
@@ -9024,7 +9018,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';
@@ -9301,7 +9295,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';
@@ -9505,7 +9499,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];
@@ -9514,7 +9508,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)
               }
             />
 
@@ -9536,7 +9530,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];
@@ -9545,7 +9539,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>
@@ -9723,7 +9717,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 |

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.
 
@@ -201,29 +201,29 @@ type FetchResult = {
 
 **Anatomy:**
 
-1. DataCard Row — Flexbox with 1-N DataCards, each containing DataCard.Header and DataCard.Listbox or DataCard.Body with DataRow children
+1. DataCard Row — Flexbox with 1-N DataCards, each containing DataCard.Header and DataCard.Listbox or DataCard.Body with DrilldownItem children
 2. Toolbar — Flexbox wrapping GridToolbarContainer with filter, columns, density, export, quick search controls
 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`, `DataRow` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
-**Components:** DataGrid, TextCell (from @redsift/table), DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (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.
 
 **Features:**
 
-| Feature               | Required | Description                                                                      |
-| --------------------- | -------- | -------------------------------------------------------------------------------- |
-| DataCard aggregation  | Yes      | DataCard components showing aggregate counts per field from the full dataset     |
-| DataRow filter push   | Yes      | Clicking a DataRow adds an isAnyOf filter to the DataGrid filterModel            |
-| Listbox multi-select  | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
-| is/isNot clearing     | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
-| Column definitions    | Yes      | GridColDef[] with custom types                                                   |
-| Toolbar               | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
-| Custom cell renderers | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
-| Boolean toggle        | No       | DataCard.Body with DataRow onClick for boolean fields                            |
-| Checkbox selection    | No       | checkboxSelection + rowSelectionModel                                            |
-| Bulk action bar       | No       | Contextual buttons shown when rows are selected                                  |
+| Feature                   | Required | Description                                                                      |
+| ------------------------- | -------- | -------------------------------------------------------------------------------- |
+| DataCard aggregation      | Yes      | DataCard components showing aggregate counts per field from the full dataset     |
+| DrilldownItem filter push | Yes      | Clicking a DrilldownItem adds an isAnyOf filter to the DataGrid filterModel      |
+| Listbox multi-select      | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
+| is/isNot clearing         | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
+| Column definitions        | Yes      | GridColDef[] with custom types                                                   |
+| Toolbar                   | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
+| Custom cell renderers     | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
+| Boolean toggle            | No       | DataCard.Body with DrilldownItem onClick for boolean fields                      |
+| Checkbox selection        | No       | checkboxSelection + rowSelectionModel                                            |
+| Bulk action bar           | No       | Contextual buttons shown when rows are selected                                  |
 
 **Filter helpers:**
 
@@ -257,7 +257,7 @@ type AggregateCounts = {
 
 1. Define your row type — every row must have a unique id field.
 2. Compute aggregate counts — useAggregateCounts(allRows) counts from the full dataset.
-3. Build DataCards with DataCard.Header, DataCard.Listbox (multi-select) or DataCard.Body (boolean toggle) containing DataRow children.
+3. Build DataCards with DataCard.Header, DataCard.Listbox (multi-select) or DataCard.Body (boolean toggle) containing DrilldownItem children.
 4. Write filter helpers — getSelectedFromFilterModel and updateFilterModel.
 5. Wire DataCard handlers — onChange to updateFilterModel, onClick to updateBooleanFilter.
 6. Render the DataGrid with controlled filterModel and onFilterModelChange.
@@ -277,7 +277,7 @@ type AggregateCounts = {
 - DataCard counts should recalculate as filters change — reflecting the current filter context
 - Clicking a card value should add a filter to the datagrid (bidirectional)
 - Changing the filter panel should update the card selection
-- The dataset is small enough to load entirely (under ~50,000 rows — crossfilter2 handles this efficiently)
+- The dataset is small enough to load entirely (under ~1,000 rows)
 
 **When NOT to use:**
 
@@ -290,11 +290,10 @@ type AggregateCounts = {
 1. DataCard Row — Flexbox with 1-N DataCards. Counts are cross-filtered: each card excludes its own field from the filter calculation
 2. Toolbar — Flexbox wrapping GridToolbarContainer with filter, columns, density, export, quick search controls
 3. DataGrid — the table with controlled filterModel + onFilterModelChange. Rows are pre-filtered client-side
-4. Dashboard wrapper — `Dashboard` component wraps everything, providing the crossfilter2 context
-5. Bulk Action Bar — Flexbox row shown when selectionModel.length > 0, with Pill (count) and action Buttons
+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`, `DataRow` from `@redsift/dashboard`; `Dashboard`, `WithFilters` from `@redsift/dashboard`; `GridColDef`, `GridFilterModel` from `@mui/x-data-grid-pro`; `Pill`, `Button`, `Flexbox`, `Icon` from `@redsift/design-system`
-**Components:** DataGrid, TextCell (from @redsift/table), Dashboard, WithFilters, DataCard, DataCard.Header, DataCard.Body, DataCard.Listbox, DataRow (from @redsift/dashboard), Flexbox, Button, Pill, Text, Icon, IconButtonLink (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.
 
 **Features:**
@@ -303,14 +302,14 @@ type AggregateCounts = {
 | -------------------------- | -------- | -------------------------------------------------------------------------------- |
 | Cross-filtered aggregation | Yes      | DataCard counts recompute from rows filtered by all fields except the card's own |
 | Two-way filter sync        | Yes      | DataCard selections derive from filterModel; DataCard clicks update filterModel  |
-| DataRow filter push        | Yes      | Clicking a DataRow adds an isAnyOf filter to the DataGrid filterModel            |
+| DrilldownItem filter push  | Yes      | Clicking a DrilldownItem adds an isAnyOf filter to the DataGrid filterModel      |
 | Listbox multi-select       | Yes      | DataCard.Listbox with selectionMode=multiple and controlled values               |
 | is/isNot clearing          | Yes      | When filter panel has is/isNot for a card's field, the DataCard selection clears |
 | Client-side row filtering  | Yes      | applyFilters function filters the full row set by the current filterModel        |
 | Column definitions         | Yes      | GridColDef[] with custom types                                                   |
 | Toolbar                    | Yes      | Built-in toolbar with filter, columns, density, export, and quick search         |
 | Custom cell renderers      | Yes      | renderCell returning TextCell, Pill, Icon, IconButtonLink                        |
-| Boolean toggle             | No       | DataCard.Body with DataRow onClick for boolean fields (active/inactive)          |
+| Boolean toggle             | No       | DataCard.Body with DrilldownItem onClick for boolean fields                      |
 | Checkbox selection         | No       | checkboxSelection + rowSelectionModel                                            |
 | Bulk action bar            | No       | Contextual buttons shown when rows are selected                                  |
 

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",
@@ -448,7 +448,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",
@@ -616,7 +616,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-22T18:15:04.708Z",
-  "commitSha": "13324e3299b72c872629ed84537f0080908545c5"
+  "generatedAt": "2026-04-22T18:24:18.286Z",
+  "commitSha": "3dd5b1120b0eab67de52a7942c5b8b16fa520abd"
 }