@redsift/ds-mcp-server 12.5.4 → 12.5.5-muiv7

package/consumer-instructions/redsift-design-system.instructions.md

@@ -15,7 +15,6 @@ This project uses the **Red Sift Design System** (`@redsift/*` packages). The de
 1. Configure the MCP server in `.vscode/mcp.json` — see [MCP Server docs](https://design-system.redsift.io/introduction/mcp-server)
 2. Copy this file to `.github/instructions/` in your project
 3. Verify: ask the AI _"What props does Button accept?"_ — it should call `get_component_props`, not answer from memory
-4. **For automated code generation (Software Factory / agent workflows):** also load the `design-system://prompts/ds-advisor` MCP resource into the system prompt — it contains the component selection cheat sheet, anti-patterns, and disambiguation rules
 
 ## Rule 1 — Mandatory Prop Lookup
 
@@ -55,43 +54,9 @@ When adopting `@redsift/*` components in a new project or migrating from raw HTM
 4. Import icons from `@redsift/icons`, not `@mdi/js`.
 5. Remove conflicting Tailwind/utility-CSS classes (`bg-*`, `text-*`, `border-*`, `dark:*`) from elements that render or wrap DS components.
 
-## Rule 6 — Semantic Colors Only
-
-When setting colors on DS components:
-
-1. **Never use hex/rgb literals** (`#22c55e`, `rgb(34, 197, 94)`) on DS component color props.
-2. **Never use CSS variable fallbacks** like `color="var(--rs-color-green-500, #22c55e)"`.
-3. **Always use semantic color values:** `"success"`, `"warning"`, `"error"`, `"info"`, `"no-data"`, `"question"`, or palette names from `NeutralColorPalette` / `PresentationColorPalette`.
-4. If asked which hex color to use, **refuse** — return the semantic token name instead.
-
-## Rule 7 — Icons from @redsift/icons Only
-
-1. **Never use unicode glyphs** (✓, ✕, ⚠, ›, •) as visual indicators — import the equivalent `mdi*` icon from `@redsift/icons`.
-2. **Never import from `@mdi/js`** — always use `@redsift/icons` (the DS re-exports the mdi icon set).
-3. Render icons with the `<Icon>` component from `@redsift/design-system`, e.g. `<Icon path={mdiCheck} />`.
-
-## Rule 8 — Component Selection
-
-When choosing which component to use, follow this cheat sheet:
-
-| UI Intent                | Correct Component                      | Package                  | Common Mistake                                    |
-| ------------------------ | -------------------------------------- | ------------------------ | ------------------------------------------------- |
-| KPI / metric tile        | `DataCard` + `DataRow`                 | `@redsift/dashboard`     | Using `Card` with inline styles                   |
-| Status badge             | `<Pill color="success">Label</Pill>`   | `@redsift/design-system` | `<Pill label="..." />` (label prop doesn't exist) |
-| Loading placeholder      | `Skeleton` / `SkeletonText`            | `@redsift/design-system` | `Skeleton` from `@mui/material`                   |
-| Collapsible detail panel | `DetailedCard` + `DetailedCardSection` | `@redsift/design-system` | Custom accordion with Card                        |
-| Generic container        | `Card`                                 | `@redsift/design-system` | Using Card for KPI tiles (use DataCard)           |
-| Modal / dialog           | `Dialog` compound component            | `@redsift/popovers`      | Building custom overlay                           |
-
-## Rule 9 — Refusal Rules
-
-1. If asked to provide a hex color for a DS component → **refuse** and return the semantic token name.
-2. If asked to wrap a DS component in `styled-components` to change its visual appearance → **refuse** and propose using the component's built-in props, composition, or filing a DS feature request.
-3. If the requested component does not exist in any `@redsift/*` package → say so and propose the closest existing primitive or composition.
-
 ## NEVER Do This
 
-These are concrete examples of wrong code. **Every single one will fail or produce incorrect results:**
+These are concrete examples of wrong code. **Every single one will fail:**
 
 ```tsx
 // ❌ WRONG — Button has NO size prop
@@ -107,46 +72,6 @@ These are concrete examples of wrong code. **Every single one will fail or produ
 
 // ❌ WRONG — wrong package
 import { Select } from '@redsift/design-system';
-
-// ❌ WRONG — Use DataCard for KPI tiles, not Card with inline styles
-<Card style={{ borderLeft: '4px solid green' }}>
-// ✅ RIGHT
-<DataCard color="success">
-
-// ❌ WRONG — Pill uses children, not label
-<Pill label="Active" />
-// ✅ RIGHT
-<Pill color="success">Active</Pill>
-
-// ❌ WRONG — gap takes a string
-<Flexbox gap={4}>
-// ✅ RIGHT
-<Flexbox gap="4px">
-
-// ❌ WRONG — use mdi icons, not unicode characters
-<Text>✓ Trusted</Text>
-// ✅ RIGHT
-<Icon path={mdiCheck} /> <Text>Trusted</Text>
-
-// ❌ WRONG — use DS Skeleton, not MUI
-import { Skeleton } from '@mui/material';
-// ✅ RIGHT
-import { Skeleton } from '@redsift/design-system';
-
-// ❌ WRONG — hex color on DS component
-<Heading color="#22c55e">Title</Heading>
-// ✅ RIGHT
-<Heading color="success">Title</Heading>
-
-// ❌ WRONG — CSS variable fallback on DS component
-<Text color="var(--rs-color-green-500, #22c55e)">Status</Text>
-// ✅ RIGHT
-<Text color="success">Status</Text>
-
-// ❌ WRONG — import from @mdi/js
-import { mdiPlus } from '@mdi/js';
-// ✅ RIGHT
-import { mdiPlus } from '@redsift/icons';
 ```
 
 ## Common Mistakes
@@ -166,12 +91,6 @@ import { mdiPlus } from '@redsift/icons';
 | Missing `@redsift/design-system/style/index.css`    | Must import at app entry point                              | `design-system://getting-started/host-app` |
 | `import { mdiPlus } from '@mdi/js'`                 | `import { mdiPlus } from '@redsift/icons'`                  | `get_component_usage`                      |
 | Tailwind `bg-*`/`text-*`/`dark:*` on DS wrappers    | Use DS tokens or layout primitives                          | `design-system://getting-started/host-app` |
-| `<Pill label="Active" />`                           | `<Pill color="success">Active</Pill>` (children)            | `get_component_props` for Pill             |
-| `<Flexbox gap={4}>`                                 | `<Flexbox gap="4px">` (string, not number)                  | `get_component_props` for Flexbox          |
-| `<Card>` for KPI tiles                              | `<DataCard>` from `@redsift/dashboard`                      | `get_component_props` for DataCard         |
-| `import { Skeleton } from '@mui/material'`          | `import { Skeleton } from '@redsift/design-system'`         | `get_component_usage` for Skeleton         |
-| Hex/rgb colors on DS components                     | Use semantic colors: `"success"`, `"error"`, etc.           | `get_component_props` for the component    |
-| Unicode glyphs (✓, ✕, ⚠) as indicators              | `<Icon path={mdiCheck} />` from `@redsift/icons`            | `get_component_usage` for Icon             |
 
 ## Verification
 

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 -------------------------------------------------------
@@ -110,7 +110,7 @@ export const columns: GridColDef<Row>[] = [
     width: 140,
     display: 'flex',
     ...createColumn('date'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (value: unknown) => 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: string) => parseDate(value),
+    valueGetter: (value: unknown) => 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-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

@@ -366,22 +366,22 @@ 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 }
-  );
-  const rows = canvasElement.querySelectorAll('.MuiDataGrid-row');
-  const checkbox = rows[rowIndex].querySelector('input[type="checkbox"]')!;
+  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;
   await userEvent.click(checkbox);
-  // Wait for React and MUI DataGrid to process the selection change
-  await new Promise((resolve) => setTimeout(resolve, 200));
+  // 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);
+  });
 };
 
 // ---------------------------------------------------------------------------
@@ -952,42 +952,29 @@ 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
+  // 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
   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"]');
+  // 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"]');
   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);
+  fireEvent.click(target);
 };
 
 // ---------------------------------------------------------------------------
@@ -1001,7 +988,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
+  // Wait for the panel to appear on document.body (v7: columnsManagement, v6: columnsPanel)
   await waitFor(() => {
     const panel = document.querySelector('.MuiDataGrid-columnsManagement');
     expect(panel).toBeTruthy();
@@ -1012,9 +999,8 @@ 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');
-  // 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}"`);
@@ -1218,12 +1204,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 +1222,6 @@ export const assertAllStatesInSync = async ({
   checkPagination = true,
   checkDensity = true,
   checkColumnOrder = false,
-  checkRowGrouping = false,
-  checkAggregation = false,
-  checkPivot = false,
 }: SyncAssertionOptions) => {
   await waitFor(
     () => {
@@ -1351,53 +1328,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

@@ -92,9 +92,9 @@ import {
   RU7_RM_PASTRY,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Crossfiltered Datagrid (Client)',
-  component: Example as any,
+  component: Example,
 };
 export default meta;
 type Story = StoryObj;
@@ -127,7 +127,8 @@ const assertState = async (
 };
 
 // ---------------------------------------------------------------------------
-// Comprehensive toggle sequence.
+// Comprehensive toggle sequence — split into Forward and Reverse halves so
+// each story stays within the Storybook test-runner's timeout.
 //
 // Forward: 11 clicks across all 5 dimensions (Category, InStock, Allergens,
 // Items, Tags). Then uncheck all 8 persistent filters one by one.
@@ -138,7 +139,7 @@ const assertState = async (
 // 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 +231,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-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: any) => d.Category}
+            dimension={(d: Row) => 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: any) => d.Allergens}
+            dimension={(d: Row) => d.Allergens}
             isDimensionArray
             datagridCategoryDimFilter={{ field: 'Allergens', operator: 'hasAnyOf' }}
             syncMode="two-way"

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

@@ -92,9 +92,9 @@ import {
   RU7_RM_PASTRY,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Crossfiltered Datagrid (Server)',
-  component: Example as any,
+  component: Example,
   parameters: {
     msw: { handlers: bakeryHandlers },
   },
@@ -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 timeout (38 total steps is too many for one story).
 // ---------------------------------------------------------------------------
 
 export const ComprehensiveToggleForward: Story = {

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-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';
@@ -212,7 +212,7 @@ export default () => {
               data={itemsChartData}
               sliceRole="option"
               onSliceClick={(datum: ArcDatum) => {
-                const key = datum.data.key;
+                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];
@@ -221,7 +221,7 @@ export default () => {
                 setPage(0);
               }}
               isSliceSelected={(datum: ArcDatum) =>
-                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key)
+                itemsSelection.length === 0 || itemsSelection.includes(datum.data.key as string)
               }
             />
 
@@ -247,7 +247,7 @@ export default () => {
               data={tagsChartData}
               barRole="option"
               onBarClick={(datum: BarDatum) => {
-                const key = String(datum.data.key);
+                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];
@@ -256,7 +256,7 @@ export default () => {
                 setPage(0);
               }}
               isBarSelected={(datum: BarDatum) =>
-                tagsSelection.length === 0 || tagsSelection.includes(String(datum.data.key))
+                tagsSelection.length === 0 || tagsSelection.includes(datum.data.key as string)
               }
             />
           </Flexbox>

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

@@ -35,9 +35,9 @@ import {
   ALLERGENS_HASANYOF_GLUTEN,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Drilldowned Datagrid (Client)',
-  component: Example as any,
+  component: Example,
 };
 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-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/DrilldownedDatagridServerSide.interaction.stories.tsx

@@ -37,9 +37,9 @@ import {
   ALLERGENS_HASANYOF_GLUTEN,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Drilldowned Datagrid (Server)',
-  component: Example as any,
+  component: Example,
   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-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';
@@ -101,15 +101,29 @@ export default () => {
     });
   }, []);
 
+  // Track the latest filterModel in a ref so handleFilterModelChange can compare
+  // incoming models without needing filterModel in its dependency array.
+  const filterModelRef = useRef(filterModel);
+  filterModelRef.current = filterModel;
+
   const handleFilterModelChange = useCallback((model: GridFilterModel) => {
     if (isInternalUpdate.current) {
       isInternalUpdate.current = false;
-      setFilterModel((prev) => {
-        if (JSON.stringify(prev.items) === JSON.stringify(model.items)) return prev;
-        return model;
-      });
+      // DataCard change is authoritative — cancel any pending debounce so a
+      // stale panel echo doesn't override the next card click.
+      if (debounceRef.current) clearTimeout(debounceRef.current);
       return;
     }
+    // MUI v7 may fire additional onFilterModelChange echoes (with new IDs) after
+    // a DataCard update. If the incoming model is semantically identical to current
+    // state (same fields, operators, values — ignoring IDs), skip it.
+    const normalize = (items: GridFilterModel['items']) =>
+      items
+        .map(({ field, operator, value }) => `${field}|${operator}|${JSON.stringify(value)}`)
+        .sort()
+        .join(';;');
+    if (normalize(model.items) === normalize(filterModelRef.current.items)) return;
+
     // Panel change — debounce and update cardControlledFields.
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {

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';
@@ -52,9 +52,9 @@ import {
   TAGS_HASANYOF_LOCAL_NEW,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Single Datagrid (Client)',
-  component: Example as any,
+  component: Example,
 };
 export default meta;
 type Story = StoryObj;