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

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, waitFor } 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';
@@ -55,9 +55,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"
@@ -74,7 +74,6 @@ 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,8 +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, useGridApiRef } from '@mui/x-data-grid-pro';
-import type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -627,12 +626,94 @@ 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: React.MutableRefObject<GridApiPro>;
+let _columnOrderApiRef: ReturnType<typeof useGridApiRef>;
 
 export const ColumnOrderInteraction: Story = {
   render: () => {
@@ -669,6 +750,52 @@ 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 } from '@redsift/table';
+import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-pro';
-import type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { rows } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { CustomToolbar, BulkActionBar } from '../_shared/helpers';
@@ -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<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 export default ({ initialFilterModel, useRouter = useRouterAdapter, apiRef: propsApiRef }: Props) => {
   const internalApiRef = useGridApiRef();
   const apiRef = propsApiRef ?? internalApiRef;
-  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>(EMPTY_ROW_SELECTION_MODEL);
 
   return (
     <div style={{ width: '100%' }}>
       <StateDebugPanel apiRef={apiRef} useRouter={useRouter} localStorageVersion={1} />
       <Flexbox flexDirection="column" gap="0px">
         <BulkActionBar
-          count={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />

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

@@ -2,8 +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, useGridApiRef } from '@mui/x-data-grid-pro';
-import type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, useGridApiRef } from '@mui/x-data-grid-premium';
 
 import Example from './example';
 import WithLoadingExample from './with-loading';
@@ -387,9 +386,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 });
     });
@@ -648,12 +645,98 @@ 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: React.MutableRefObject<GridApiPro>;
+let _columnOrderApiRef: ReturnType<typeof useGridApiRef>;
 
 export const ColumnOrderInteraction: Story = {
   render: () => {
@@ -690,6 +773,53 @@ 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 } from '@redsift/table';
+import { StatefulDataGrid, EMPTY_ROW_SELECTION_MODEL, getSelectionCount } from '@redsift/table';
 import { Flexbox } from '@redsift/design-system';
-import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-pro';
-import type { GridApiPro } from '@mui/x-data-grid-pro';
+import { GridFilterModel, GridRowSelectionModel, GridSortModel, useGridApiRef } from '@mui/x-data-grid-premium';
+import type { GridApiPremium } from '@mui/x-data-grid-premium';
 import { Row } from '../_shared/data';
 import { columns } from '../_shared/columns';
 import { fetchBakeryData } from '../_shared/api-client';
@@ -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<GridApiPro>;
+  apiRef?: React.MutableRefObject<GridApiPremium | null>;
 }
 
 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>([]);
+  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
@@ -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={selectionModel.length}
+          count={getSelectionCount(selectionModel)}
           onLog={() => console.log('Selected:', selectionModel)}
           onDelete={() => console.log('Delete:', selectionModel)}
         />
@@ -94,9 +94,6 @@ 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<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

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

@@ -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<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/charts/Axis.json

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

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

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

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

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

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

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

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

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

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

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

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

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