@redsift/ds-mcp-server 12.5.3-alpha.7 → 12.5.3-muiv6

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import type { GridApiPremium } from '@mui/x-data-grid-premium';
+import type { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
 
 // localStorage key categories — must match @redsift/table internals
 const LS_CATEGORIES = [
@@ -13,7 +13,7 @@ const LS_CATEGORIES = [
 ];
 
 interface StateDebugPanelProps {
-  apiRef: React.MutableRefObject<GridApiPremium | null>;
+  apiRef: React.MutableRefObject<GridApiPro>;
   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-premium';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { Row } from './data';
 
 // -- Option constants -------------------------------------------------------
@@ -80,7 +80,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'Items',
     headerName: 'Item',
     flex: 1,
-    display: 'flex',
     ...createColumn('string'),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
   },
@@ -89,7 +88,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'Category',
     headerName: 'Category',
     width: 120,
-    display: 'flex',
     ...createColumn('singleSelect'),
     valueOptions: CATEGORY_OPTIONS,
     renderCell: ({ value }: GridRenderCellParams) => <Pill color={categoryColor(value)}>{value}</Pill>,
@@ -99,7 +97,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'Paid',
     headerName: 'Price',
     width: 100,
-    display: 'flex',
     ...createColumn('number'),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{formatCurrency(value as number)}</TextCell>,
   },
@@ -108,9 +105,8 @@ export const columns: GridColDef<Row>[] = [
     field: 'Date',
     headerName: 'Date',
     width: 140,
-    display: 'flex',
     ...createColumn('date'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (params: any) => parseDate(params.value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDate(value as Date) : '—'}</TextCell>,
   },
   // DateTime
@@ -118,9 +114,8 @@ export const columns: GridColDef<Row>[] = [
     field: 'DateTime',
     headerName: 'Date & Time',
     width: 180,
-    display: 'flex',
     ...createColumn('dateTime'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (params: any) => parseDate(params.value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDateTime(value as Date) : '—'}</TextCell>,
   },
   // Boolean — in stock
@@ -128,7 +123,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'InStock',
     headerName: 'In Stock',
     width: 90,
-    display: 'flex',
     type: 'boolean',
     renderCell: ({ value }: GridRenderCellParams) =>
       value ? (
@@ -142,7 +136,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'Allergens',
     headerName: 'Allergens',
     flex: 1,
-    display: 'flex',
     ...createColumn('multiSelect'),
     valueOptions: ALLERGEN_OPTIONS,
     sortable: false,
@@ -165,7 +158,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'Tags',
     headerName: 'Tags',
     flex: 1,
-    display: 'flex',
     ...createColumn('tags'),
     valueOptions: TAG_OPTIONS,
     sortable: false,
@@ -188,7 +180,6 @@ export const columns: GridColDef<Row>[] = [
     field: 'actions',
     headerName: '',
     width: 56,
-    display: 'flex',
     hideable: false,
     sortable: false,
     filterable: false,

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

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
 
 /**
  * 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-premium';
+import { GridFilterModel } from '@mui/x-data-grid-pro';
 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-premium';
+} from '@mui/x-data-grid-pro';
 
 // -- Toolbar ----------------------------------------------------------------
 

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

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

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

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { within, waitFor, userEvent, fireEvent } from '@storybook/testing-library';
+import { within, waitFor, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 
 // ---------------------------------------------------------------------------
@@ -366,19 +366,13 @@ export const clickHeaderCheckbox = async (canvasElement: HTMLElement) => {
 
 /** Click a row checkbox by row index (0-based, within the visible page). */
 export const clickRowCheckbox = async (canvasElement: HTMLElement, rowIndex: number) => {
-  // 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 }
-  );
+  await waitFor(() => {
+    const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
+    expect(rows.length).toBeGreaterThan(rowIndex);
+  });
   const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
-  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]')!;
+  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]');
+  if (!checkbox) throw new Error(`Could not find checkbox in row ${rowIndex}`);
   await userEvent.click(checkbox);
   // Wait for React and MUI DataGrid to process the selection change
   await new Promise((resolve) => setTimeout(resolve, 200));
@@ -952,39 +946,18 @@ export const waitForPaginationEnabled = async (canvasElement: HTMLElement, direc
 
 /**
  * Change the page size via the MUI pagination "Rows per page" select.
- * 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.
+ * The dropdown menu renders as a portal on document.body.
  */
 export const changePageSize = async (canvasElement: HTMLElement, newSize: number) => {
-  // 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);
-
-  // 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 select = canvasElement.querySelector('.MuiTablePagination-select') as HTMLElement | null;
+  if (!select) throw new Error('Could not find page size select');
+  await userEvent.click(select);
+  // The menu renders as a MUI Popper on document.body
+  await waitFor(() => {
+    const options = document.querySelectorAll('li[role="option"]');
+    expect(options.length).toBeGreaterThan(0);
+  });
+  const options = document.querySelectorAll('li[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}"`);
   await userEvent.click(target);
@@ -1003,18 +976,17 @@ export const openColumnsPanel = async (canvasElement: HTMLElement) => {
   await userEvent.click(btn);
   // Wait for the panel to appear on document.body
   await waitFor(() => {
-    const panel = document.querySelector('.MuiDataGrid-columnsManagement');
+    const panel = document.querySelector('.MuiDataGrid-columnsPanel');
     expect(panel).toBeTruthy();
   });
 };
 
 /** Toggle a column's visibility in the columns panel by its label text. */
 export const toggleColumnInPanel = async (fieldLabel: string) => {
-  const panel = document.querySelector('.MuiDataGrid-columnsManagement');
+  const panel = document.querySelector('.MuiDataGrid-columnsPanel');
   if (!panel) throw new Error('Columns panel is not open');
-  // 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));
+  const labels = Array.from(panel.querySelectorAll('.MuiFormControlLabel-root'));
+  const target = labels.find((label) => label.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}"`);
@@ -1026,7 +998,7 @@ export const closeColumnsPanel = async () => {
   // Press Escape to close the panel
   await userEvent.keyboard('{Escape}');
   await waitFor(() => {
-    const panel = document.querySelector('.MuiDataGrid-columnsManagement');
+    const panel = document.querySelector('.MuiDataGrid-columnsPanel');
     expect(panel).toBeFalsy();
   });
 };
@@ -1218,12 +1190,6 @@ interface SyncAssertionOptions {
   checkDensity?: boolean;
   /** Whether to check column order sync */
   checkColumnOrder?: boolean;
-  /** Whether to check row grouping sync */
-  checkRowGrouping?: boolean;
-  /** Whether to check aggregation sync */
-  checkAggregation?: boolean;
-  /** Whether to check pivot sync */
-  checkPivot?: boolean;
 }
 
 /**
@@ -1242,9 +1208,6 @@ export const assertAllStatesInSync = async ({
   checkPagination = true,
   checkDensity = true,
   checkColumnOrder = false,
-  checkRowGrouping = false,
-  checkAggregation = false,
-  checkPivot = false,
 }: SyncAssertionOptions) => {
   await waitFor(
     () => {
@@ -1351,53 +1314,6 @@ export const assertAllStatesInSync = async ({
           expect(urlColumnOrder).toBe(inner);
         }
       }
-
-      // --- Row Grouping ---
-      if (checkRowGrouping) {
-        const lsKey = `${pathname}:${localStorageVersion}:rowGroupingModel`;
-        const lsRaw = localStorage.getItem(lsKey);
-        const lsRowGrouping = lsRaw ? JSON.parse(lsRaw) : '';
-
-        const urlRowGrouping = url.get('_rowGrouping');
-        if (lsRowGrouping && urlRowGrouping) {
-          // localStorage: `_rowGrouping=[a,b,c]`
-          // URL: `_rowGrouping=a,b,c`
-          const lsParams = new URLSearchParams(lsRowGrouping);
-          const lsValue = lsParams.get('_rowGrouping') ?? '';
-          const inner = lsValue.startsWith('[') && lsValue.endsWith(']') ? lsValue.slice(1, -1) : lsValue;
-          expect(urlRowGrouping).toBe(inner);
-        }
-      }
-
-      // --- Aggregation ---
-      if (checkAggregation) {
-        const lsKey = `${pathname}:${localStorageVersion}:aggregationModel`;
-        const lsRaw = localStorage.getItem(lsKey);
-        const lsAggregation = lsRaw ? JSON.parse(lsRaw) : '';
-
-        const urlAggregation = url.get('_aggregation');
-        if (lsAggregation && urlAggregation) {
-          // Both use same format: `_aggregation=field.func,...`
-          const lsParams = new URLSearchParams(lsAggregation);
-          const lsValue = lsParams.get('_aggregation') ?? '';
-          expect(urlAggregation).toBe(lsValue);
-        }
-      }
-
-      // --- Pivot ---
-      if (checkPivot) {
-        const lsKey = `${pathname}:${localStorageVersion}:pivotModel`;
-        const lsRaw = localStorage.getItem(lsKey);
-        const lsPivot = lsRaw ? JSON.parse(lsRaw) : '';
-
-        const urlPivot = url.get('_pivot');
-        if (lsPivot && urlPivot) {
-          // Both use same format: `_pivot=cols:f1;rows:f2;vals:f3.sum`
-          const lsParams = new URLSearchParams(lsPivot);
-          const lsValue = lsParams.get('_pivot') ?? '';
-          expect(urlPivot).toBe(lsValue);
-        }
-      }
     },
     { timeout: 5000 }
   );

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

@@ -133,12 +133,15 @@ const assertState = async (
 // Items, Tags). Then uncheck all 8 persistent filters one by one.
 // Reverse: same clicks in reverse order, then uncheck again.
 //
+// Split into Forward and Reverse halves so each story stays within the
+// Storybook test-runner's timeout (38 total steps is too many for one story).
+//
 // The client-side pattern uses Dashboard + WithFilters with crossfilter2.
 // Each DataCard/Chart field has its own crossfilter dimension, and cross-
 // filtered aggregates exclude the queried field's own filter.
 // ---------------------------------------------------------------------------
 
-export const ComprehensiveToggleSequence: Story = {
+export const ComprehensiveToggleForward: Story = {
   render: () => <Example />,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -230,6 +233,20 @@ export const ComprehensiveToggleSequence: Story = {
     // -- U8: -Seasonal (bar) → back to full dataset -------------------------
     await clickBarChartBar(canvasElement, 'Seasonal');
     await assertState(canvasElement, S0_NONE, categoryListbox, allergenListbox);
+  },
+};
+
+export const ComprehensiveToggleReverse: Story = {
+  render: () => <Example />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await waitForGridToLoad(canvas);
+
+    const categoryListbox = getListbox(canvas, /filter by category/i);
+    const allergenListbox = getListbox(canvas, /filter by allergen/i);
+
+    // == Step 0: No filters — full dataset ==================================
+    await assertState(canvasElement, S0_NONE, categoryListbox, allergenListbox);
 
     // == Reverse sequence (add filters in opposite order) ===================
 

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

@@ -133,7 +133,7 @@ const assertState = async (
 // Comprehensive toggle sequence — identical to client but with server waits.
 //
 // Split into Forward and Reverse halves so each story stays within the
-// Storybook test-runner's 15-second timeout (38 total steps is too many).
+// Storybook test-runner's 30-second timeout (38 total steps is too many).
 // ---------------------------------------------------------------------------
 
 export const ComprehensiveToggleForward: Story = {

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

@@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
 import { DataCard, DataRow } from '@redsift/dashboard';
-import { BarChart, PieChart, ArcDatum, BarDatum } from '@redsift/charts';
+import { BarChart, PieChart } from '@redsift/charts';
 import { mdiShapeOutline, mdiToggleSwitch, mdiFoodOff } from '@redsift/icons';
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
 import { Row } from '../_shared/data';
 import { columns, CATEGORY_OPTIONS, ALLERGEN_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData, FetchResult } from '../_shared/api-client';
@@ -211,8 +211,8 @@ export default () => {
               }}
               data={itemsChartData}
               sliceRole="option"
-              onSliceClick={(datum: ArcDatum) => {
-                const key = datum.data.key;
+              onSliceClick={(datum: any) => {
+                const key = datum.data.key as string;
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Items');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -220,8 +220,8 @@ export default () => {
                 });
                 setPage(0);
               }}
-              isSliceSelected={(datum: ArcDatum) =>
-                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key)
+              isSliceSelected={(datum: any) =>
+                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key as string)
               }
             />
 
@@ -246,8 +246,8 @@ export default () => {
               barProps={{ gap: 20 }}
               data={tagsChartData}
               barRole="option"
-              onBarClick={(datum: BarDatum) => {
-                const key = String(datum.data.key);
+              onBarClick={(datum: any) => {
+                const key = datum.data.key as string;
                 setFilterModel((prev) => {
                   const selected = getSelectedFromFilterModel(prev, 'Tags');
                   const next = selected.includes(key) ? selected.filter((v) => v !== key) : [...selected, key];
@@ -255,8 +255,8 @@ export default () => {
                 });
                 setPage(0);
               }}
-              isBarSelected={(datum: BarDatum) =>
-                tagsSelection.length === 0 || tagsSelection.includes(String(datum.data.key))
+              isBarSelected={(datum: any) =>
+                tagsSelection.length === 0 || tagsSelection.includes(datum.data.key as string)
               }
             />
           </Flexbox>

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-premium';
+import { GridFilterModel } from '@mui/x-data-grid-pro';
 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/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-premium';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
 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-premium';
+import { GridFilterModel } from '@mui/x-data-grid-pro';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';

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

@@ -1,20 +1,20 @@
 import React, { useState } from 'react';
-import { DataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
+import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridRowSelectionModel } from '@mui/x-data-grid-pro';
 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>(EMPTY_ROW_SELECTION_MODEL);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
   return (
     <div style={{ width: '100%' }}>
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={getSelectionCount(selectionModel)}
+          count={selectionModel.length}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent, waitFor } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { GridFilterModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel } from '@mui/x-data-grid-pro';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { DataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
+import { DataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel } from '@mui/x-data-grid-pro';
 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>(EMPTY_ROW_SELECTION_MODEL);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
   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={getSelectionCount(selectionModel)}
+          count={selectionModel.length}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />