[DataGrid] Design-system agnostic grid

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -11,6 +11,7 @@ import {
   GridValidRowModel,
 } from '@mui/x-data-grid-pro';
 import {
+  fastMemo,
   propValidatorsDataGrid,
   propValidatorsDataGridPro,
   PropValidator,
@@ -34,7 +35,14 @@ if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
 
-const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends GridValidRowModel>(
+export interface DataGridPremiumComponent {
+  <R extends GridValidRowModel = any>(
+    props: DataGridPremiumProps<R> & React.RefAttributes<HTMLDivElement>,
+  ): React.JSX.Element;
+  propTypes?: any;
+}
+
+export const DataGridPremiumRaw = fastMemo(React.forwardRef(function DataGridPremium<R extends GridValidRowModel>(
   inProps: DataGridPremiumProps<R>,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -63,7 +71,7 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends G
       </GridRoot>
     </GridContextProvider>
   );
-});
+}));
 
 DataGridPremiumRaw.propTypes = {
   // ----------------------------- Warning --------------------------------

packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumProps.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useThemeProps } from '@mui/material/styles';
 import {
   DATA_GRID_PRO_PROPS_DEFAULT_VALUES,
   GRID_DEFAULT_LOCALE_TEXT,
@@ -60,13 +59,7 @@ export const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES: DataGridPremiumPropsWithDef
 const defaultSlots = DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS;
 
 export const useDataGridPremiumProps = (inProps: DataGridPremiumProps) => {
-  const themedProps = useProps(
-    // eslint-disable-next-line material-ui/mui-name-matches-component-name
-    useThemeProps({
-      props: inProps,
-      name: 'MuiDataGrid',
-    }),
-  );
+  const themedProps = useProps(inProps);
 
   const localeText = React.useMemo(
     () => ({ ...GRID_DEFAULT_LOCALE_TEXT, ...themedProps.localeText }),

packages/x-data-grid-premium/src/constants/dataGridPremiumDefaultSlotsComponents.ts

@@ -1,10 +1,18 @@
 import { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid-pro/internals';
 import type { GridPremiumSlotsComponent } from '../models';
 import { GridPremiumColumnMenu } from '../components/GridPremiumColumnMenu';
-import materialSlots from '../material';
+import type { GridPremiumIconSlotsComponent } from '../models';
+
+const placeholder = ((name: string) => () => { throw new Error(`DataGridPremium: base slot "${name}" is undefined.`) }) as any;
+
+const defaultPremiumSlots: GridPremiumIconSlotsComponent = {
+  columnMenuUngroupIcon: placeholder('columnMenuUngroupIcon'),
+  columnMenuGroupIcon: placeholder('columnMenuGroupIcon'),
+  columnMenuAggregationIcon: placeholder('columnMenuAggregationIcon'),
+};
 
 export const DATA_GRID_PREMIUM_DEFAULT_SLOTS_COMPONENTS: GridPremiumSlotsComponent = {
   ...DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS,
-  ...materialSlots,
+  ...defaultPremiumSlots,
   columnMenu: GridPremiumColumnMenu,
 };

packages/x-data-grid-premium/src/core.ts

@@ -0,0 +1,40 @@
+import { LicenseInfo as LicenseInfoExport } from '@mui/x-license';
+/**
+ * @deprecated Use `@mui/x-license` package instead:
+ * @example import { LicenseInfo } from '@mui/x-license';
+ */
+export class LicenseInfo extends LicenseInfoExport {}
+
+export * from '@mui/x-data-grid/components';
+export * from '@mui/x-data-grid-pro/components';
+export * from '@mui/x-data-grid/constants';
+export * from '@mui/x-data-grid/hooks';
+export * from '@mui/x-data-grid-pro/hooks';
+export * from '@mui/x-data-grid/models';
+export * from '@mui/x-data-grid-pro/models';
+export * from '@mui/x-data-grid/context';
+export * from '@mui/x-data-grid/colDef';
+export * from '@mui/x-data-grid/utils';
+export * from '@mui/x-data-grid-pro/utils';
+
+export * from './DataGridPremium';
+export * from './hooks';
+export * from './models';
+export * from './components';
+
+export { GridColumnHeaders } from '@mui/x-data-grid-pro';
+export type { GridColumnHeadersProps } from '@mui/x-data-grid-pro';
+
+export type {
+  DataGridPremiumProps,
+  GridExperimentalPremiumFeatures,
+} from './models/dataGridPremiumProps';
+
+export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
+export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
+
+export {
+  GridColumnMenu,
+  GRID_COLUMN_MENU_SLOTS,
+  GRID_COLUMN_MENU_SLOT_PROPS,
+} from './components/reexports';

packages/x-data-grid-premium/src/index.ts

@@ -1,42 +1,3 @@
-import './typeOverloads';
+export * from './core'
 
-import { LicenseInfo as LicenseInfoExport } from '@mui/x-license';
-/**
- * @deprecated Use `@mui/x-license` package instead:
- * @example import { LicenseInfo } from '@mui/x-license';
- */
-export class LicenseInfo extends LicenseInfoExport {}
-
-export * from '@mui/x-data-grid/components';
-export * from '@mui/x-data-grid-pro/components';
-export * from '@mui/x-data-grid/constants';
-export * from '@mui/x-data-grid/hooks';
-export * from '@mui/x-data-grid-pro/hooks';
-export * from '@mui/x-data-grid/models';
-export * from '@mui/x-data-grid-pro/models';
-export * from '@mui/x-data-grid/context';
-export * from '@mui/x-data-grid/colDef';
-export * from '@mui/x-data-grid/utils';
-export * from '@mui/x-data-grid-pro/utils';
-
-export * from './DataGridPremium';
-export * from './hooks';
-export * from './models';
-export * from './components';
-
-export { GridColumnHeaders } from '@mui/x-data-grid-pro';
-export type { GridColumnHeadersProps } from '@mui/x-data-grid-pro';
-
-export type {
-  DataGridPremiumProps,
-  GridExperimentalPremiumFeatures,
-} from './models/dataGridPremiumProps';
-
-export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
-export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
-
-export {
-  GridColumnMenu,
-  GRID_COLUMN_MENU_SLOTS,
-  GRID_COLUMN_MENU_SLOT_PROPS,
-} from './components/reexports';
+export { DataGridPremiumMaterial as DataGridPremium } from './material'

packages/x-data-grid-premium/src/material/index.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { useThemeProps } from '@mui/material';
+import { materialProProps, materialProSlots } from '@mui/x-data-grid-pro/material';
+import { DataGridPremiumRaw, DataGridPremiumProps } from '../core';
+import type { GridPremiumIconSlotsComponent } from '../models';
+import { GridWorkspacesIcon, GridGroupWorkIcon, GridFunctionsIcon } from './icons';
+
+const iconsPremiumSlots: GridPremiumIconSlotsComponent = {
+  columnMenuUngroupIcon: GridWorkspacesIcon,
+  columnMenuGroupIcon: GridGroupWorkIcon,
+  columnMenuAggregationIcon: GridFunctionsIcon,
+};
+
+export const materialPremiumSlots = {
+  ...iconsPremiumSlots,
+  ...materialProSlots,
+};
+
+export const materialPremiumProps = materialProProps as Partial<DataGridPremiumProps>;
+
+
+/**
+ * Demos:
+ * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/)
+ *
+ * API:
+ * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/)
+ */
+export const DataGridPremiumMaterial = function DataGridPremiumMaterial(props: DataGridPremiumProps) {
+  const themedProps = useThemeProps({
+    props,
+    name: 'MuiDataGrid',
+  });
+
+  return (
+    <DataGridPremiumRaw
+      {...materialPremiumProps}
+      {...themedProps}
+      slots={React.useMemo(() => ({ ...materialPremiumSlots, ...props.slots }), [props.slots])}
+    />
+  )
+}

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -10,7 +10,7 @@ import {
   GridContextProvider,
   GridValidRowModel,
 } from '@mui/x-data-grid';
-import { validateProps } from '@mui/x-data-grid/internals';
+import { fastMemo, validateProps } from '@mui/x-data-grid/internals';
 import { useDataGridProComponent } from './useDataGridProComponent';
 import { DataGridProProps } from '../models/dataGridProProps';
 import { useDataGridProProps } from './useDataGridProProps';
@@ -21,7 +21,14 @@ export type { GridProSlotsComponent as GridSlots } from '../models';
 
 const releaseInfo = getReleaseInfo();
 
-const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValidRowModel>(
+export interface DataGridProComponent {
+  <R extends GridValidRowModel = any>(
+    props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>,
+  ): React.JSX.Element;
+  propTypes?: any;
+}
+
+export const DataGridProRaw = fastMemo(React.forwardRef(function DataGridPro<R extends GridValidRowModel>(
   inProps: DataGridProProps<R>,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -49,23 +56,7 @@ const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValid
       </GridRoot>
     </GridContextProvider>
   );
-});
-
-interface DataGridProComponent {
-  <R extends GridValidRowModel = any>(
-    props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>,
-  ): React.JSX.Element;
-  propTypes?: any;
-}
-
-/**
- * Demos:
- * - [DataGridPro](https://mui.com/x/react-data-grid/demo/)
- *
- * API:
- * - [DataGridPro API](https://mui.com/x/api/data-grid/data-grid-pro/)
- */
-export const DataGridPro = React.memo(DataGridProRaw) as DataGridProComponent;
+})) as DataGridProComponent;
 
 DataGridProRaw.propTypes = {
   // ----------------------------- Warning --------------------------------

packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useThemeProps } from '@mui/material/styles';
 import {
   GRID_DEFAULT_LOCALE_TEXT,
   DATA_GRID_PROPS_DEFAULT_VALUES,
@@ -55,13 +54,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES: DataGridProPropsWithDefaultValu
 const defaultSlots = DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS;
 
 export const useDataGridProProps = <R extends GridValidRowModel>(inProps: DataGridProProps<R>) => {
-  const themedProps = useProps(
-    // eslint-disable-next-line material-ui/mui-name-matches-component-name
-    useThemeProps({
-      props: inProps,
-      name: 'MuiDataGrid',
-    }),
-  );
+  const themedProps = useProps(inProps);
 
   const localeText = React.useMemo(
     () => ({ ...GRID_DEFAULT_LOCALE_TEXT, ...themedProps.localeText }),

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { IconButtonProps } from '@mui/material/IconButton';
+import { BaseIconButtonProps } from '@mui/x-data-grid';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-interface GridHeaderFilterClearIconProps extends IconButtonProps {}
+interface GridHeaderFilterClearIconProps extends Omit<BaseIconButtonProps, 'children'> {}
 
-const sx = { padding: '2px' };
+const style = { padding: '2px' };
 
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
@@ -13,7 +13,7 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      sx={sx}
+      style={style}
       {...props}
       {...rootProps.slotProps?.baseIconButton}
     >

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx

@@ -11,7 +11,7 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-const sx = {
+const style = {
   width: 22,
   height: 22,
   margin: 'auto 0 10px 5px',
@@ -69,7 +69,7 @@ function GridHeaderFilterMenuContainer(props: {
         tabIndex={-1}
         size="small"
         onClick={handleClick}
-        sx={sx}
+        style={style}
         disabled={disabled}
         {...rootProps.slotProps?.baseIconButton}
       >

packages/x-data-grid-pro/src/constants/dataGridProDefaultSlotsComponents.ts

@@ -1,16 +1,22 @@
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '@mui/x-data-grid/internals';
-import type { GridProSlotsComponent } from '../models';
+import type { GridProSlotsComponent, GridProIconSlotsComponent } from '../models';
 import { GridProColumnMenu } from '../components/GridProColumnMenu';
 import { GridColumnHeaders } from '../components/GridColumnHeaders';
 import { GridHeaderFilterMenu } from '../components/headerFiltering/GridHeaderFilterMenu';
 import { GridHeaderFilterCell } from '../components/headerFiltering/GridHeaderFilterCell';
 import { GridDetailPanels } from '../components/GridDetailPanels';
 import { GridPinnedRows } from '../components/GridPinnedRows';
-import materialSlots from '../material';
+
+const placeholder = ((name: string) => () => { throw new Error(`DataGridPro: base slot "${name}" is undefined.`) }) as any;
+
+const defaultProSlots: GridProIconSlotsComponent = {
+  columnMenuPinRightIcon: placeholder('columnMenuPinRightIcon'),
+  columnMenuPinLeftIcon: placeholder('columnMenuPinLeftIcon'),
+};
 
 export const DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: GridProSlotsComponent = {
   ...DATA_GRID_DEFAULT_SLOTS_COMPONENTS,
-  ...materialSlots,
+  ...defaultProSlots,
   columnMenu: GridProColumnMenu,
   columnHeaders: GridColumnHeaders,
   detailPanels: GridDetailPanels,

packages/x-data-grid-pro/src/core.ts

@@ -0,0 +1,39 @@
+import { LicenseInfo as LicenseInfoExport } from '@mui/x-license';
+/**
+ * @deprecated Use `@mui/x-license` package instead:
+ * @example import { LicenseInfo } from '@mui/x-license';
+ */
+export class LicenseInfo extends LicenseInfoExport {}
+
+export * from '@mui/x-data-grid/components';
+export * from '@mui/x-data-grid/constants';
+export * from '@mui/x-data-grid/hooks';
+export * from '@mui/x-data-grid/models';
+export * from '@mui/x-data-grid/context';
+export * from '@mui/x-data-grid/utils';
+export * from '@mui/x-data-grid/colDef';
+export type {
+  GridExportFormat,
+  GridExportExtension,
+  GridToolbarExportProps,
+} from '@mui/x-data-grid';
+
+export * from './DataGridPro';
+export * from './hooks';
+export * from './models';
+export * from './components';
+export * from './utils';
+
+export type { DataGridProProps, GridExperimentalProFeatures } from './models/dataGridProProps';
+
+export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
+export type { GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
+
+export {
+  GridColumnMenu,
+  GRID_COLUMN_MENU_SLOTS,
+  GRID_COLUMN_MENU_SLOT_PROPS,
+} from './components/reexports';
+
+export { GridColumnHeaders } from './components/GridColumnHeaders';
+export type { GridColumnHeadersProps } from './components/GridColumnHeaders';