[DataGrid] Extract baseChip slot (#8748)

mui · May 11, 2023 · e78f8c5 · e78f8c5
1 parent 54bd006
commit e78f8c5
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 4 deletions.
diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -259,6 +259,7 @@
   "slots": {
     "baseButton": { "default": "Button", "type": { "name": "elementType" } },
     "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } },
+    "baseChip": { "default": "Chip", "type": { "name": "elementType" } },
     "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } },
     "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
     "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } },

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -233,6 +233,7 @@
   "slots": {
     "baseButton": { "default": "Button", "type": { "name": "elementType" } },
     "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } },
+    "baseChip": { "default": "Chip", "type": { "name": "elementType" } },
     "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } },
     "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
     "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } },

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -178,6 +178,7 @@
   "slots": {
     "baseButton": { "default": "Button", "type": { "name": "elementType" } },
     "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } },
+    "baseChip": { "default": "Chip", "type": { "name": "elementType" } },
     "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } },
     "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } },
     "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } },

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium.json
@@ -689,6 +689,7 @@
   "slotDescriptions": {
     "baseButton": "The custom Button component used in the grid.",
     "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "baseChip": "The custom Chip component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -675,6 +675,7 @@
   "slotDescriptions": {
     "baseButton": "The custom Button component used in the grid.",
     "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "baseChip": "The custom Chip component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
@@ -643,6 +643,7 @@
   "slotDescriptions": {
     "baseButton": "The custom Button component used in the grid.",
     "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
+    "baseChip": "The custom Chip component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",

diff --git a/...grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx b/...grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { AutocompleteProps, createFilterOptions } from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { isSingleSelectColDef } from './filterPanelUtils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
@@ -137,7 +136,7 @@ function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingl
       getOptionLabel={getOptionLabel}
       renderTags={(value, getTagProps) =>
         value.map((option, index) => (
-          <Chip
+          <rootProps.slots.baseChip
             variant="outlined"
             size="small"
             label={getOptionLabel(option)}

diff --git a/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx b/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleValue.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
-import Chip from '@mui/material/Chip';
 import { unstable_useId as useId } from '@mui/utils';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { GridFilterInputValueProps } from './GridFilterInputValueProps';
@@ -67,7 +66,12 @@ function GridFilterInputMultipleValue(props: GridFilterInputMultipleValueProps)
       onChange={handleChange}
       renderTags={(value, getTagProps) =>
         value.map((option, index) => (
-          <Chip variant="outlined" size="small" label={option} {...getTagProps({ index })} />
+          <rootProps.slots.baseChip
+            variant="outlined"
+            size="small"
+            label={option}
+            {...getTagProps({ index })}
+          />
         ))
       }
       renderInput={(params) => (

diff --git a/packages/grid/x-data-grid/src/material/index.ts b/packages/grid/x-data-grid/src/material/index.ts
@@ -8,6 +8,7 @@ import MUIIconButton from '@mui/material/IconButton';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
 import MUIInputLabel from '@mui/material/InputLabel';
+import MUIChip from '@mui/material/Chip';
 import { GridColumnUnsortedIcon } from './icons/GridColumnUnsortedIcon';
 import {
   GridAddIcon,
@@ -90,6 +91,7 @@ const materialSlots = {
   BasePopper: MUIPopper,
   BaseInputLabel: MUIInputLabel,
   BaseSelectOption: MUISelectOption,
+  BaseChip: MUIChip,
 };
 
 export default materialSlots;
diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponent.ts
@@ -61,6 +61,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
    * @default MenuItem
    */
   BaseSelectOption: React.JSXElementConstructor<any>;
+  /**
+   * The custom Chip component used in the grid.
+   * @default Chip
+   */
+  BaseChip: React.JSXElementConstructor<any>;
   /**
    * Component rendered for each cell.
    * @default GridCell

diff --git a/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -10,6 +10,7 @@ import { TooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
 import { PopperProps } from '@mui/material/Popper';
 import { TablePaginationProps } from '@mui/material/TablePagination';
+import { ChipProps } from '@mui/material/Chip';
 import { GridToolbarProps } from '../components/toolbar/GridToolbar';
 import { ColumnHeaderFilterIconButtonProps } from '../components/columnHeaders/GridColumnHeaderFilterIconButton';
 import { GridColumnMenuProps } from '../components/menu/columnMenu/GridColumnMenuProps';
@@ -33,6 +34,7 @@ export interface BaseTooltipPropsOverrides {}
 export interface BasePopperPropsOverrides {}
 export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
+export interface BaseChipPropsOverrides {}
 export interface CellPropsOverrides {}
 export interface ToolbarPropsOverrides {}
 export interface ColumnHeaderFilterIconButtonPropsOverrides {}
@@ -68,6 +70,7 @@ export interface GridSlotsComponentsProps {
     { native: boolean; value: any; children?: React.ReactNode },
     BaseSelectOptionPropsOverrides
   >;
+  baseChip?: SlotProps<ChipProps, BaseChipPropsOverrides>;
   cell?: SlotProps<GridCellProps, CellPropsOverrides>;
   columnHeaderFilterIconButton?: SlotProps<
     ColumnHeaderFilterIconButtonProps,

diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
@@ -2,6 +2,7 @@
   { "name": "arSD", "kind": "Variable" },
   { "name": "BaseButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" },
+  { "name": "BaseChipPropsOverrides", "kind": "Interface" },
   { "name": "BaseFormControlPropsOverrides", "kind": "Interface" },
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },

diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
@@ -2,6 +2,7 @@
   { "name": "arSD", "kind": "Variable" },
   { "name": "BaseButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" },
+  { "name": "BaseChipPropsOverrides", "kind": "Interface" },
   { "name": "BaseFormControlPropsOverrides", "kind": "Interface" },
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },

diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
@@ -2,6 +2,7 @@
   { "name": "arSD", "kind": "Variable" },
   { "name": "BaseButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" },
+  { "name": "BaseChipPropsOverrides", "kind": "Interface" },
   { "name": "BaseFormControlPropsOverrides", "kind": "Interface" },
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },