[DataGrid] Refactor: move progress components to leaf import (mui#15914)

Signed-off-by: Rom Grk <romgrk@users.noreply.github.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>
lauri865 · Dec 20, 2024 · 562675c · 562675c
1 parent 38eabdb
commit 562675c
Show file tree

Hide file tree

Showing 16 changed files with 101 additions and 12 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
@@ -798,12 +798,24 @@
       "default": "Checkbox",
       "class": null
     },
+    {
+      "name": "baseCircularProgress",
+      "description": "The custom CircularProgress component used in the grid.",
+      "default": "CircularProgress",
+      "class": null
+    },
     {
       "name": "baseDivider",
       "description": "The custom Divider component used in the grid.",
       "default": "Divider",
       "class": null
     },
+    {
+      "name": "baseLinearProgress",
+      "description": "The custom LinearProgress component used in the grid.",
+      "default": "LinearProgress",
+      "class": null
+    },
     {
       "name": "baseMenuList",
       "description": "The custom MenuList component used in the grid.",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -733,12 +733,24 @@
       "default": "Checkbox",
       "class": null
     },
+    {
+      "name": "baseCircularProgress",
+      "description": "The custom CircularProgress component used in the grid.",
+      "default": "CircularProgress",
+      "class": null
+    },
     {
       "name": "baseDivider",
       "description": "The custom Divider component used in the grid.",
       "default": "Divider",
       "class": null
     },
+    {
+      "name": "baseLinearProgress",
+      "description": "The custom LinearProgress component used in the grid.",
+      "default": "LinearProgress",
+      "class": null
+    },
     {
       "name": "baseMenuList",
       "description": "The custom MenuList component used in the grid.",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -619,12 +619,24 @@
       "default": "Checkbox",
       "class": null
     },
+    {
+      "name": "baseCircularProgress",
+      "description": "The custom CircularProgress component used in the grid.",
+      "default": "CircularProgress",
+      "class": null
+    },
     {
       "name": "baseDivider",
       "description": "The custom Divider component used in the grid.",
       "default": "Divider",
       "class": null
     },
+    {
+      "name": "baseLinearProgress",
+      "description": "The custom LinearProgress component used in the grid.",
+      "default": "LinearProgress",
+      "class": null
+    },
     {
       "name": "baseMenuList",
       "description": "The custom MenuList component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -1262,11 +1262,13 @@
     "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.",
+    "baseCircularProgress": "The custom CircularProgress component used in the grid.",
     "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
+    "baseLinearProgress": "The custom LinearProgress component used in the grid.",
     "baseMenuItem": "The custom MenuItem component used in the grid.",
     "baseMenuList": "The custom MenuList component used in the grid.",
     "basePopper": "The custom Popper component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -1200,11 +1200,13 @@
     "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.",
+    "baseCircularProgress": "The custom CircularProgress component used in the grid.",
     "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
+    "baseLinearProgress": "The custom LinearProgress component used in the grid.",
     "baseMenuItem": "The custom MenuItem component used in the grid.",
     "baseMenuList": "The custom MenuList component used in the grid.",
     "basePopper": "The custom Popper component used in the grid.",

diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -1074,11 +1074,13 @@
     "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.",
+    "baseCircularProgress": "The custom CircularProgress component used in the grid.",
     "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",
     "baseInputLabel": "The custom InputLabel component used in the grid.",
+    "baseLinearProgress": "The custom LinearProgress component used in the grid.",
     "baseMenuItem": "The custom MenuItem component used in the grid.",
     "baseMenuList": "The custom MenuList component used in the grid.",
     "basePopper": "The custom Popper component used in the grid.",

diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals';
 import {
   useGridSelector,
@@ -67,7 +66,7 @@ function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps)
   if (isDataLoading) {
     return (
       <div className={classes.loadingContainer}>
-        <CircularProgress size="1rem" color="inherit" />
+        <rootProps.slots.baseCircularProgress size="1rem" color="inherit" />
       </div>
     );
   }

diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx
@@ -7,7 +7,6 @@ import {
   GridDataSourceGroupNode,
   useGridSelector,
 } from '@mui/x-data-grid';
-import CircularProgress from '@mui/material/CircularProgress';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
@@ -74,7 +73,7 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps)
   if (isDataLoading) {
     return (
       <div className={classes.loadingContainer}>
-        <CircularProgress size="1rem" color="inherit" />
+        <rootProps.slots.baseCircularProgress size="1rem" color="inherit" />
       </div>
     );
   }

diff --git a/packages/x-data-grid/src/components/GridLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridLoadingOverlay.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import LinearProgress from '@mui/material/LinearProgress';
-import CircularProgress from '@mui/material/CircularProgress';
+import type { DataGridProcessedProps } from '../models/props/DataGridProps';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridOverlay, GridOverlayProps } from './containers/GridOverlay';
 import { GridSkeletonLoadingOverlay } from './GridSkeletonLoadingOverlay';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
@@ -25,20 +25,20 @@ export interface GridLoadingOverlayProps extends GridOverlayProps {
 const LOADING_VARIANTS: Record<
   GridLoadingOverlayVariant,
   {
-    component: React.ComponentType;
+    component: (rootProps: DataGridProcessedProps) => React.ComponentType;
     style: React.CSSProperties;
   }
 > = {
   'circular-progress': {
-    component: CircularProgress,
+    component: (rootProps: DataGridProcessedProps) => rootProps.slots.baseCircularProgress,
     style: {},
   },
   'linear-progress': {
-    component: LinearProgress,
+    component: (rootProps: DataGridProcessedProps) => rootProps.slots.baseLinearProgress,
     style: { display: 'block' },
   },
   skeleton: {
-    component: GridSkeletonLoadingOverlay,
+    component: () => GridSkeletonLoadingOverlay,
     style: { display: 'block' },
   },
 };
@@ -47,12 +47,14 @@ const GridLoadingOverlay = React.forwardRef<HTMLDivElement, GridLoadingOverlayPr
   function GridLoadingOverlay(props, ref) {
     const { variant = 'linear-progress', noRowsVariant = 'skeleton', style, ...other } = props;
     const apiRef = useGridApiContext();
+    const rootProps = useGridRootProps();
     const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
     const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
+    const Component = activeVariant.component(rootProps);
 
     return (
       <GridOverlay ref={ref} style={{ ...activeVariant.style, ...style }} {...other}>
-        <activeVariant.component />
+        <Component />
       </GridOverlay>
     );
   },

diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
+import MUICircularProgress from '@mui/material/CircularProgress';
 import MUIDivider from '@mui/material/Divider';
+import MUILinearProgress from '@mui/material/LinearProgress';
 import MUIListItemIcon from '@mui/material/ListItemIcon';
 import MUIListItemText from '@mui/material/ListItemText';
 import MUIMenuList from '@mui/material/MenuList';
@@ -90,7 +92,9 @@ const iconSlots: GridIconSlotsComponent = {
 const baseSlots: GridBaseSlots = {
   baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
+  baseCircularProgress: MUICircularProgress,
   baseDivider: MUIDivider,
+  baseLinearProgress: MUILinearProgress,
   baseMenuList: MUIMenuList,
   baseMenuItem: BaseMenuItem,
   baseTextField: MUITextField,

diff --git a/packages/x-data-grid/src/models/gridBaseSlots.ts b/packages/x-data-grid/src/models/gridBaseSlots.ts
@@ -21,3 +21,15 @@ export type MenuItemProps = {
   selected?: boolean;
   value?: number | string | readonly string[];
 };
+
+export type CircularProgressProps = {
+  /**
+   * Pixels or CSS value.
+   * @default 40
+   */
+  size?: number | string;
+  /** @default 'primary' */
+  color?: 'inherit' | 'primary';
+};
+
+export type LinearProgressProps = {};
diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts
@@ -15,6 +15,11 @@ export interface GridBaseSlots {
    * @default Checkbox
    */
   baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
+  /**
+   * The custom CircularProgress component used in the grid.
+   * @default CircularProgress
+   */
+  baseCircularProgress: React.JSXElementConstructor<GridSlotProps['baseCircularProgress']>;
   /**
    * The custom Chip component used in the grid.
    * @default Chip
@@ -25,6 +30,11 @@ export interface GridBaseSlots {
    * @default Divider
    */
   baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
+  /**
+   * The custom LinearProgress component used in the grid.
+   * @default LinearProgress
+   */
+  baseLinearProgress: React.JSXElementConstructor<GridSlotProps['baseLinearProgress']>;
   /**
    * The custom MenuList component used in the grid.
    * @default MenuList

diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
 import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress';
+import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress';
 import type { MenuListProps } from '@mui/material/MenuList';
 import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem';
 import type { TextFieldProps } from '@mui/material/TextField';
@@ -33,15 +35,23 @@ import type { GridColumnsManagementProps } from '../components/columnsManagement
 import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
 import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
-import type { BadgeProps, DividerProps, MenuItemProps } from './gridBaseSlots';
+import type {
+  BadgeProps,
+  CircularProgressProps,
+  DividerProps,
+  LinearProgressProps,
+  MenuItemProps,
+} from './gridBaseSlots';
 
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
 
 // Overrides for module augmentation
 export interface BaseBadgePropsOverrides {}
 export interface BaseCheckboxPropsOverrides {}
+export interface BaseCircularProgressPropsOverrides {}
 export interface BaseDividerPropsOverrides {}
+export interface BaseLinearProgressPropsOverrides {}
 export interface BaseMenuListPropsOverrides {}
 export interface BaseMenuItemPropsOverrides {}
 export interface BaseTextFieldPropsOverrides {}
@@ -56,6 +66,7 @@ export interface BasePopperPropsOverrides {}
 export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
 export interface BaseChipPropsOverrides {}
+
 export interface CellPropsOverrides {}
 export interface ToolbarPropsOverrides {}
 export interface ColumnHeaderFilterIconButtonPropsOverrides {}
@@ -79,7 +90,9 @@ export interface RowPropsOverrides {}
 interface BaseSlotProps {
   baseBadge: BadgeProps & BaseBadgePropsOverrides;
   baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
+  baseCircularProgress: CircularProgressProps & BaseCircularProgressPropsOverrides;
   baseDivider: DividerProps & BaseDividerPropsOverrides;
+  baseLinearProgress: LinearProgressProps & BaseLinearProgressPropsOverrides;
   baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
   baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
   baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
@@ -102,6 +115,8 @@ interface BaseSlotProps {
 
 interface MaterialSlotProps {
   baseBadge: MUIBadgeProps;
+  baseCircularProgress: MUICircularProgressProps;
+  baseLinearProgress: MUILinearProgressProps;
   baseMenuItem: MUIMenuItemProps;
 }
 

diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
@@ -3,11 +3,13 @@
   { "name": "BaseButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" },
   { "name": "BaseChipPropsOverrides", "kind": "Interface" },
+  { "name": "BaseCircularProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseDividerPropsOverrides", "kind": "Interface" },
   { "name": "BaseFormControlPropsOverrides", "kind": "Interface" },
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },
+  { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuListPropsOverrides", "kind": "Interface" },
   { "name": "BasePopperPropsOverrides", "kind": "Interface" },

diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
@@ -3,11 +3,13 @@
   { "name": "BaseButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" },
   { "name": "BaseChipPropsOverrides", "kind": "Interface" },
+  { "name": "BaseCircularProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseDividerPropsOverrides", "kind": "Interface" },
   { "name": "BaseFormControlPropsOverrides", "kind": "Interface" },
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },
+  { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuListPropsOverrides", "kind": "Interface" },
   { "name": "BasePopperPropsOverrides", "kind": "Interface" },

diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
@@ -3,11 +3,13 @@
   { "name": "BaseButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" },
   { "name": "BaseChipPropsOverrides", "kind": "Interface" },
+  { "name": "BaseCircularProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseDividerPropsOverrides", "kind": "Interface" },
   { "name": "BaseFormControlPropsOverrides", "kind": "Interface" },
   { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" },
   { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" },
+  { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" },
   { "name": "BaseMenuListPropsOverrides", "kind": "Interface" },
   { "name": "BasePopperPropsOverrides", "kind": "Interface" },