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

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)}
         />
@@ -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, 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';
@@ -55,9 +55,9 @@ import {
   TAGS_HASANYOF_LOCAL_NEW,
 } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Single Datagrid (Server)',
-  component: Example as any,
+  component: Example,
   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, 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)}
         />
@@ -62,7 +62,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
         <DataGrid
           autoHeight
           pagination
-          density="compact"
+          initialState={{ density: 'compact' }}
           paginationMode="server"
           sortingMode="server"
           filterMode="server"
@@ -74,6 +74,7 @@ export default ({ initialFilterModel }: { initialFilterModel?: GridFilterModel }
           pageSizeOptions={[10, 25, 50]}
           onPaginationModelChange={(model) => {
             if (model.pageSize !== pageSize) {
+              setRows([]);
               setPageSize(model.pageSize);
               setPage(0);
             } else {

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

@@ -2,7 +2,8 @@ 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, useGridApiRef } from '@mui/x-data-grid-premium';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import type { GridApiPro } from '@mui/x-data-grid-pro';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -626,94 +627,12 @@ export const SortingInteraction: Story = {
   },
 };
 
-// ---------------------------------------------------------------------------
-// Row Grouping — set via apiRef, assert URL
-// ---------------------------------------------------------------------------
-
-let _rowGroupingRouter: ReturnType<typeof createMockRouter>;
-let _rowGroupingApiRef: ReturnType<typeof useGridApiRef>;
-
-export const RowGroupingInteraction: Story = {
-  render: () => {
-    _rowGroupingRouter = usePersistentMockRouter();
-    _rowGroupingApiRef = useGridApiRef();
-    return <Example useRouter={_rowGroupingRouter.useRouter} apiRef={_rowGroupingApiRef} />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const { getSearch } = _rowGroupingRouter;
-
-    await step('Wait for grid to load', async () => {
-      await waitForGridToLoad(canvas);
-    });
-
-    await step('Set row grouping to Category', async () => {
-      _rowGroupingApiRef.current!.setRowGroupingModel(['Category']);
-      await waitFor(() => {
-        expect(getSearch()).toContain('_rowGrouping=Category');
-      });
-    });
-
-    await step('Assert sync', async () => {
-      await assertAllStatesInSync({ getSearch, checkRowGrouping: true });
-    });
-
-    await step('Clear row grouping', async () => {
-      _rowGroupingApiRef.current!.setRowGroupingModel([]);
-      await waitFor(() => {
-        expect(getSearch()).not.toContain('_rowGrouping');
-      });
-    });
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Aggregation — set via apiRef, assert URL
-// ---------------------------------------------------------------------------
-
-let _aggregationRouter: ReturnType<typeof createMockRouter>;
-let _aggregationApiRef: ReturnType<typeof useGridApiRef>;
-
-export const AggregationInteraction: Story = {
-  render: () => {
-    _aggregationRouter = usePersistentMockRouter();
-    _aggregationApiRef = useGridApiRef();
-    return <Example useRouter={_aggregationRouter.useRouter} apiRef={_aggregationApiRef} />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const { getSearch } = _aggregationRouter;
-
-    await step('Wait for grid to load', async () => {
-      await waitForGridToLoad(canvas);
-    });
-
-    await step('Set aggregation Paid=sum', async () => {
-      _aggregationApiRef.current!.setAggregationModel({ Paid: 'sum' });
-      await waitFor(() => {
-        expect(getSearch()).toContain('_aggregation=Paid.sum');
-      });
-    });
-
-    await step('Assert sync', async () => {
-      await assertAllStatesInSync({ getSearch, checkAggregation: true });
-    });
-
-    await step('Clear aggregation', async () => {
-      _aggregationApiRef.current!.setAggregationModel({});
-      await waitFor(() => {
-        expect(getSearch()).not.toContain('_aggregation');
-      });
-    });
-  },
-};
-
 // ---------------------------------------------------------------------------
 // Column Order — reorder via apiRef, assert URL
 // ---------------------------------------------------------------------------
 
 let _columnOrderRouter: ReturnType<typeof createMockRouter>;
-let _columnOrderApiRef: ReturnType<typeof useGridApiRef>;
+let _columnOrderApiRef: React.MutableRefObject<GridApiPro>;
 
 export const ColumnOrderInteraction: Story = {
   render: () => {
@@ -750,52 +669,6 @@ export const ColumnOrderInteraction: Story = {
   },
 };
 
-// ---------------------------------------------------------------------------
-// Pivot — activate via apiRef, assert URL
-// ---------------------------------------------------------------------------
-
-let _pivotRouter: ReturnType<typeof createMockRouter>;
-let _pivotApiRef: ReturnType<typeof useGridApiRef>;
-
-export const PivotInteraction: Story = {
-  render: () => {
-    _pivotRouter = usePersistentMockRouter();
-    _pivotApiRef = useGridApiRef();
-    return <Example useRouter={_pivotRouter.useRouter} apiRef={_pivotApiRef} />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const { getSearch } = _pivotRouter;
-
-    await step('Wait for grid to load', async () => {
-      await waitForGridToLoad(canvas);
-    });
-
-    await step('Activate pivot with Category columns, Items rows, Paid sum values', async () => {
-      _pivotApiRef.current!.setPivotModel({
-        columns: [{ field: 'Category' }],
-        rows: [{ field: 'Items' }],
-        values: [{ field: 'Paid', aggFunc: 'sum' }],
-      });
-      _pivotApiRef.current!.setPivotActive(true);
-      await waitFor(() => {
-        expect(getSearch()).toContain('_pivot=');
-      });
-    });
-
-    await step('Assert pivot params in URL', async () => {
-      const search = getSearch();
-      expect(search).toContain('cols:Category');
-      expect(search).toContain('rows:Items');
-      expect(search).toContain('vals:Paid.sum');
-    });
-
-    await step('Assert sync', async () => {
-      await assertAllStatesInSync({ getSearch, checkPivot: true });
-    });
-  },
-};
-
 // ---------------------------------------------------------------------------
 // State variants — with interaction assertions
 // ---------------------------------------------------------------------------

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
-import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
+import { StatefulDataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-premium';
-import type { GridApiPremium } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import type { GridApiPro } from '@mui/x-data-grid-pro';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
@@ -13,20 +13,20 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPremium | null>;
+  apiRef?: React.MutableRefObject<GridApiPro>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
   const internalApiRef = useGridApiRef();
   const apiRef = propsApiRef ?? internalApiRef;
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
   return (
     <div style={{ width: '100%' }}>
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <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/stateful-single-datagrid-server-side/StatefulSingleDatagridServerSide.interaction.stories.tsx

@@ -2,7 +2,8 @@ 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, useGridApiRef } from '@mui/x-data-grid-premium';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import type { GridApiPro } from '@mui/x-data-grid-pro';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -386,7 +387,9 @@ export const SelectionPersistsAcrossPages: Story = {
       await waitForServerResponse(canvas);
       await assertDisplayedRowsText(canvasElement, '11–20 of 14,075');
       await assertBulkActionBarVisible(canvasElement, 2);
-      await assertHeaderCheckboxState(canvasElement, 'indeterminate');
+      // 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 assertRowCheckboxChecked(canvasElement, 0, false);
       await assertAllStatesInSync({ getSearch });
     });
@@ -645,98 +648,12 @@ export const SortingInteraction: Story = {
   },
 };
 
-// ---------------------------------------------------------------------------
-// Row Grouping — set via apiRef, assert URL
-// ---------------------------------------------------------------------------
-
-let _rowGroupingRouter: ReturnType<typeof createMockRouter>;
-let _rowGroupingApiRef: ReturnType<typeof useGridApiRef>;
-
-export const RowGroupingInteraction: Story = {
-  render: () => {
-    _rowGroupingRouter = usePersistentMockRouter();
-    _rowGroupingApiRef = useGridApiRef();
-    return <Example useRouter={_rowGroupingRouter.useRouter} apiRef={_rowGroupingApiRef} />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const { getSearch } = _rowGroupingRouter;
-
-    await step('Wait for grid to load', async () => {
-      await waitForGridToLoad(canvas);
-    });
-
-    await step('Set row grouping to Category', async () => {
-      _rowGroupingApiRef.current!.setRowGroupingModel(['Category']);
-      await waitForServerResponse(canvas);
-      await waitFor(() => {
-        expect(getSearch()).toContain('_rowGrouping=Category');
-      });
-    });
-
-    await step('Assert sync', async () => {
-      await assertAllStatesInSync({ getSearch, checkRowGrouping: true });
-    });
-
-    await step('Clear row grouping', async () => {
-      _rowGroupingApiRef.current!.setRowGroupingModel([]);
-      await waitForServerResponse(canvas);
-      await waitFor(() => {
-        expect(getSearch()).not.toContain('_rowGrouping');
-      });
-    });
-  },
-};
-
-// ---------------------------------------------------------------------------
-// Aggregation — set via apiRef, assert URL
-// ---------------------------------------------------------------------------
-
-let _aggregationRouter: ReturnType<typeof createMockRouter>;
-let _aggregationApiRef: ReturnType<typeof useGridApiRef>;
-
-export const AggregationInteraction: Story = {
-  render: () => {
-    _aggregationRouter = usePersistentMockRouter();
-    _aggregationApiRef = useGridApiRef();
-    return <Example useRouter={_aggregationRouter.useRouter} apiRef={_aggregationApiRef} />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const { getSearch } = _aggregationRouter;
-
-    await step('Wait for grid to load', async () => {
-      await waitForGridToLoad(canvas);
-    });
-
-    await step('Set aggregation Paid=sum', async () => {
-      _aggregationApiRef.current!.setAggregationModel({ Paid: 'sum' });
-      await waitForServerResponse(canvas);
-      await waitFor(() => {
-        expect(getSearch()).toContain('_aggregation=Paid.sum');
-      });
-    });
-
-    await step('Assert sync', async () => {
-      await assertAllStatesInSync({ getSearch, checkAggregation: true });
-    });
-
-    await step('Clear aggregation', async () => {
-      _aggregationApiRef.current!.setAggregationModel({});
-      await waitForServerResponse(canvas);
-      await waitFor(() => {
-        expect(getSearch()).not.toContain('_aggregation');
-      });
-    });
-  },
-};
-
 // ---------------------------------------------------------------------------
 // Column Order — reorder via apiRef, assert URL
 // ---------------------------------------------------------------------------
 
 let _columnOrderRouter: ReturnType<typeof createMockRouter>;
-let _columnOrderApiRef: ReturnType<typeof useGridApiRef>;
+let _columnOrderApiRef: React.MutableRefObject<GridApiPro>;
 
 export const ColumnOrderInteraction: Story = {
   render: () => {
@@ -773,53 +690,6 @@ export const ColumnOrderInteraction: Story = {
   },
 };
 
-// ---------------------------------------------------------------------------
-// Pivot — activate via apiRef, assert URL
-// ---------------------------------------------------------------------------
-
-let _pivotRouter: ReturnType<typeof createMockRouter>;
-let _pivotApiRef: ReturnType<typeof useGridApiRef>;
-
-export const PivotInteraction: Story = {
-  render: () => {
-    _pivotRouter = usePersistentMockRouter();
-    _pivotApiRef = useGridApiRef();
-    return <Example useRouter={_pivotRouter.useRouter} apiRef={_pivotApiRef} />;
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const { getSearch } = _pivotRouter;
-
-    await step('Wait for grid to load', async () => {
-      await waitForGridToLoad(canvas);
-    });
-
-    await step('Activate pivot with Category columns, Items rows, Paid sum values', async () => {
-      _pivotApiRef.current!.setPivotModel({
-        columns: [{ field: 'Category' }],
-        rows: [{ field: 'Items' }],
-        values: [{ field: 'Paid', aggFunc: 'sum' }],
-      });
-      _pivotApiRef.current!.setPivotActive(true);
-      await waitForServerResponse(canvas);
-      await waitFor(() => {
-        expect(getSearch()).toContain('_pivot=');
-      });
-    });
-
-    await step('Assert pivot params in URL', async () => {
-      const search = getSearch();
-      expect(search).toContain('cols:Category');
-      expect(search).toContain('rows:Items');
-      expect(search).toContain('vals:Paid.sum');
-    });
-
-    await step('Assert sync', async () => {
-      await assertAllStatesInSync({ getSearch, checkPivot: true });
-    });
-  },
-};
-
 // ---------------------------------------------------------------------------
 // State variants — with interaction assertions
 // ---------------------------------------------------------------------------

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

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
+import { StatefulDataGrid } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-premium';
-import type { GridApiPremium } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-pro';
+import type { GridApiPro } from '@mui/x-data-grid-pro';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -14,7 +14,7 @@ import { StateDebugPanel } from '../_shared/StateDebugPanel';
 interface Props {
   initialFilterModel?: GridFilterModel;
   useRouter?: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
-  apiRef?: React.MutableRefObject<GridApiPremium | null>;
+  apiRef?: React.MutableRefObject<GridApiPro>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
@@ -23,7 +23,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>(EMPTY_ROW_SELECTION_MODEL);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
 
   // Refs track the latest model values so fetchData() always reads current state.
   // StatefulDataGrid manages filter/sort/pagination internally — we use callbacks
@@ -58,7 +58,7 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={getSelectionCount(selectionModel)}
+          count={selectionModel.length}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />
@@ -94,6 +94,9 @@ export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: prop
             fetchData();
           }}
           onPaginationModelChange={(model) => {
+            if (model.pageSize !== pageSizeRef.current) {
+              setRows([]);
+            }
             pageRef.current = model.page;
             pageSizeRef.current = model.pageSize;
             fetchData();

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 = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Summary Dashboard',
-  component: Example as any,
+  component: Example,
 };
 export default meta;
 type Story = StoryObj;

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

@@ -17,9 +17,9 @@ import {
 } from '../_shared/story-helpers';
 import { TOTAL, CATEGORY_BAKERY, CATEGORY_BEVERAGE, CATEGORY_PASTRY, CATEGORY_OTHER } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Tabbed Datagrid (Client)',
-  component: Example as any,
+  component: Example,
 };
 export default meta;
 type Story = StoryObj;

package/data/demos/patterns/tabbed-datagrid-server-side/TabbedDatagridServerSide.interaction.stories.tsx

@@ -19,9 +19,9 @@ import {
 } from '../_shared/story-helpers';
 import { TOTAL, CATEGORY_BAKERY, CATEGORY_BEVERAGE, CATEGORY_PASTRY, CATEGORY_OTHER } from '../_shared/expected-values';
 
-const meta: Meta = {
+const meta: Meta<typeof Example> = {
   title: 'Patterns/Tabbed Datagrid (Server)',
-  component: Example as any,
+  component: Example,
   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-premium';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
 import { Row } from '../_shared/data';
 import { columns, CATEGORY_OPTIONS } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';

package/data/docs/components/charts/Axis.json

@@ -265,10 +265,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "chart axis",
-    "x axis",
-    "y axis"
-  ]
+  "tags": {}
 }

package/data/docs/components/charts/BarChart.json

@@ -848,11 +848,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "bar graph",
-    "histogram",
-    "column chart",
-    "bar visualization"
-  ]
+  "tags": {}
 }

package/data/docs/components/charts/ChartContainerTitle.json

@@ -570,9 +570,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "chart title",
-    "chart heading"
-  ]
+  "tags": {}
 }

package/data/docs/components/charts/Legend.json

@@ -506,10 +506,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "chart legend",
-    "color legend",
-    "series legend"
-  ]
+  "tags": {}
 }

package/data/docs/components/charts/LineChart.json

@@ -749,11 +749,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "line graph",
-    "time series",
-    "trend chart",
-    "line visualization"
-  ]
+  "tags": {}
 }

package/data/docs/components/charts/PieChart.json

@@ -822,10 +822,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "pie graph",
-    "donut chart",
-    "pie visualization"
-  ]
+  "tags": {}
 }

package/data/docs/components/charts/ScatterPlot.json

@@ -798,10 +798,5 @@
     }
   ],
   "examples": [],
-  "tags": {},
-  "keywords": [
-    "scatter graph",
-    "dot plot",
-    "scatter visualization"
-  ]
+  "tags": {}
 }