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

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import type { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 
 // localStorage key categories — must match @redsift/table internals
 const LS_CATEGORIES = [
@@ -13,7 +13,7 @@ const LS_CATEGORIES = [
 ];
 
 interface StateDebugPanelProps {
-  apiRef: React.MutableRefObject<GridApiPro>;
+  apiRef: React.MutableRefObject<GridApiPremium | null>;
   useRouter: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
   localStorageVersion?: number;
 }

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 -------------------------------------------------------
@@ -110,7 +110,7 @@ export const columns: GridColDef<Row>[] = [
     width: 140,
     display: 'flex',
     ...createColumn('date'),
-    valueGetter: (value: unknown) => parseDate(value),
+    valueGetter: (value: string) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDate(value as Date) : '—'}</TextCell>,
   },
   // DateTime
@@ -120,7 +120,7 @@ export const columns: GridColDef<Row>[] = [
     width: 180,
     display: 'flex',
     ...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

@@ -320,34 +320,37 @@ export const clickHeaderCheckbox = async (canvasElement: HTMLElement) => {
       const headerCheckbox = canvasElement.querySelector('.MuiDataGrid-columnHeaderCheckbox input[type="checkbox"]');
       expect(headerCheckbox).toBeTruthy();
     },
-    { timeout: 3000 }
+    { timeout: 5000 }
   );
   // Small yield to let React finish any pending microtask re-renders
   await new Promise((resolve) => setTimeout(resolve, 200));
   const headerCheckbox = canvasElement.querySelector('.MuiDataGrid-columnHeaderCheckbox input[type="checkbox"]')!;
-  fireEvent.click(headerCheckbox);
+  // Use userEvent.click for reliable event dispatching — fireEvent.click on a hidden
+  // checkbox input doesn't trigger the native change event in Playwright/Chromium,
+  // causing server-side pagination grids to miss the selection update.
+  await userEvent.click(headerCheckbox);
   // Wait for React and MUI DataGrid to process the selection change
   await new Promise((resolve) => setTimeout(resolve, 200));
 };
 
 /** 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 wasChecked = checkbox.checked;
+  // Wait for BOTH the row AND its checkbox to be present.
+  // Server-side grids may render rows before checkboxes are mounted.
+  await waitFor(
+    () => {
+      const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
+      expect(rows.length).toBeGreaterThan(rowIndex);
+      const cb = rows[rowIndex].querySelector('input[type="checkbox"]');
+      expect(cb).toBeTruthy();
+    },
+    { timeout: 5000 }
+  );
+  const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
+  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]')!;
   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);
-  });
+  // Wait for React and MUI DataGrid to process the selection change
+  await new Promise((resolve) => setTimeout(resolve, 200));
 };
 
 // ---------------------------------------------------------------------------
@@ -913,29 +916,42 @@ export const waitForPaginationEnabled = async (canvasElement: HTMLElement, direc
 
 /**
  * Change the page size via the MUI pagination "Rows per page" select.
- * The dropdown menu renders as a portal on document.body.
+ * MUI Material v7's `useSlot()` applies `.MuiTablePagination-select` to the
+ * Select wrapper, NOT the inner display div that has the `onMouseDown` handler.
+ * We target `[role="combobox"]` inside the pagination toolbar instead, which is
+ * the actual interactive element rendered by `SelectInput`.
+ * `userEvent.click` in the Storybook Playwright runner doesn't reliably
+ * trigger mouseDown on MUI Select, so we use `fireEvent.mouseDown` directly,
+ * then `userEvent.click` to select the option in the dropdown.
  */
 export const changePageSize = async (canvasElement: HTMLElement, newSize: number) => {
-  // Wait for the rows-per-page select to be available
-  let select!: HTMLElement;
-  await waitFor(() => {
-    // The bottom pagination renders a MUI Select with role="combobox"
-    const selects = canvasElement.querySelectorAll<HTMLElement>('[role="combobox"]');
-    // Pick the last one (bottom pagination) — top pagination may not have one
-    select = selects[selects.length - 1];
-    expect(select).toBeTruthy();
-  });
-  // MUI Select listens on mouseDown to open its menu
+  // Wait for the pagination combobox to be present
+  await waitFor(
+    () => {
+      const el = canvasElement.querySelector('.MuiTablePagination-toolbar [role="combobox"]');
+      expect(el).toBeTruthy();
+    },
+    { timeout: 5000 }
+  );
+
+  const select = canvasElement.querySelector('.MuiTablePagination-toolbar [role="combobox"]') as HTMLElement;
+
+  // Use fireEvent.mouseDown to reliably open MUI v7 Select dropdown
   fireEvent.mouseDown(select);
-  // The menu renders as a MUI portal on document.body — wait for options
-  await waitFor(() => {
-    const options = document.querySelectorAll('li[role="option"]');
-    expect(options.length).toBeGreaterThan(0);
-  });
-  const options = document.querySelectorAll('li[role="option"]');
+
+  // Wait for the dropdown to render (MUI uses a portal on document.body)
+  await waitFor(
+    () => {
+      const options = document.querySelectorAll('[role="option"]');
+      expect(options.length).toBeGreaterThan(0);
+    },
+    { timeout: 5000 }
+  );
+
+  const options = document.querySelectorAll('[role="option"]');
   const target = Array.from(options).find((opt) => opt.textContent === String(newSize));
   if (!target) throw new Error(`Could not find page size option "${newSize}"`);
-  fireEvent.click(target);
+  await userEvent.click(target);
 };
 
 // ---------------------------------------------------------------------------
@@ -949,7 +965,7 @@ export const openColumnsPanel = async (canvasElement: HTMLElement) => {
   ) as HTMLElement | null;
   if (!btn) throw new Error('Could not find columns toolbar button');
   await userEvent.click(btn);
-  // Wait for the panel to appear on document.body (v7: columnsManagement, v6: columnsPanel)
+  // Wait for the panel to appear on document.body
   await waitFor(() => {
     const panel = document.querySelector('.MuiDataGrid-columnsManagement');
     expect(panel).toBeTruthy();
@@ -960,8 +976,9 @@ export const openColumnsPanel = async (canvasElement: HTMLElement) => {
 export const toggleColumnInPanel = async (fieldLabel: string) => {
   const panel = document.querySelector('.MuiDataGrid-columnsManagement');
   if (!panel) throw new Error('Columns panel is not open');
-  const labels = Array.from(panel.querySelectorAll('.MuiFormControlLabel-root'));
-  const target = labels.find((label) => label.textContent?.includes(fieldLabel));
+  // MUI v8 renders each column toggle as a baseCheckbox slot with class columnsManagementRow
+  const rows = Array.from(panel.querySelectorAll('.MuiDataGrid-columnsManagementRow'));
+  const target = rows.find((row) => row.textContent?.includes(fieldLabel));
   if (!target) throw new Error(`Could not find column "${fieldLabel}" in columns panel`);
   const checkbox = target.querySelector('input[type="checkbox"]') as HTMLElement | null;
   if (!checkbox) throw new Error(`Could not find checkbox for column "${fieldLabel}"`);

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';
@@ -51,9 +51,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)}
         />
@@ -22,8 +22,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 } },

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, 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';
@@ -54,9 +54,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)}
         />
@@ -62,7 +62,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
         <DataGrid
           autoHeight
           pagination
-          initialState={{ density: 'compact' }}
+          density="compact"
           paginationMode="server"
           sortingMode="server"
           filterMode="server"

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } 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';

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

@@ -1,7 +1,7 @@
 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';
@@ -16,14 +16,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)}
         />

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } 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';
@@ -385,9 +385,7 @@ export const SelectionPersistsAcrossPages: Story = {
       await waitForServerResponse(canvas);
       await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
       await assertBulkActionBarVisible(canvasElement, 2);
-      // In MUI v7, the header checkbox reflects current-page selection only.
-      // No page-2 rows are selected, so the header is unchecked (not indeterminate).
-      await assertHeaderCheckboxState(canvasElement, 'unchecked');
+      await assertHeaderCheckboxState(canvasElement, 'indeterminate');
       await assertRowCheckboxChecked(canvasElement, 0, false);
       await assertAllStatesInSync({ getSearch });
     });

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

@@ -1,7 +1,7 @@
 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';
@@ -20,7 +20,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
@@ -55,7 +55,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)}
         />

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

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

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

@@ -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"