[DataGrid] Refactor: move skeleton to leaf import (mui#15931)

lauri865 · Dec 20, 2024 · 1bac67d · 1bac67d
1 parent f985ea0
commit 1bac67d
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 6 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
@@ -885,7 +885,13 @@
     {
       "name": "baseSelectOption",
       "description": "The custom SelectOption component used in the grid.",
-      "default": "MenuItem",
+      "default": "SelectOption",
+      "class": null
+    },
+    {
+      "name": "baseSkeleton",
+      "description": "The custom Skeleton component used in the grid.",
+      "default": "Skeleton",
       "class": null
     },
     {

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -820,7 +820,13 @@
     {
       "name": "baseSelectOption",
       "description": "The custom SelectOption component used in the grid.",
-      "default": "MenuItem",
+      "default": "SelectOption",
+      "class": null
+    },
+    {
+      "name": "baseSkeleton",
+      "description": "The custom Skeleton component used in the grid.",
+      "default": "Skeleton",
       "class": null
     },
     {

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -706,7 +706,13 @@
     {
       "name": "baseSelectOption",
       "description": "The custom SelectOption component used in the grid.",
-      "default": "MenuItem",
+      "default": "SelectOption",
+      "class": null
+    },
+    {
+      "name": "baseSkeleton",
+      "description": "The custom Skeleton component used in the grid.",
+      "default": "Skeleton",
       "class": null
     },
     {

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
@@ -1274,6 +1274,7 @@
     "basePopper": "The custom Popper component used in the grid.",
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",
+    "baseSkeleton": "The custom Skeleton component used in the grid.",
     "baseTextField": "The custom TextField component used in the grid.",
     "baseTooltip": "The custom Tooltip component used in the grid.",
     "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.",

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
@@ -1212,6 +1212,7 @@
     "basePopper": "The custom Popper component used in the grid.",
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",
+    "baseSkeleton": "The custom Skeleton component used in the grid.",
     "baseTextField": "The custom TextField component used in the grid.",
     "baseTooltip": "The custom Tooltip component used in the grid.",
     "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.",

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
@@ -1086,6 +1086,7 @@
     "basePopper": "The custom Popper component used in the grid.",
     "baseSelect": "The custom Select component used in the grid.",
     "baseSelectOption": "The custom SelectOption component used in the grid.",
+    "baseSkeleton": "The custom Skeleton component used in the grid.",
     "baseTextField": "The custom TextField component used in the grid.",
     "baseTooltip": "The custom Tooltip component used in the grid.",
     "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.",

diff --git a/packages/x-data-grid/src/components/cell/GridSkeletonCell.tsx b/packages/x-data-grid/src/components/cell/GridSkeletonCell.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import Skeleton from '@mui/material/Skeleton';
 import {
   unstable_composeClasses as composeClasses,
   unstable_capitalize as capitalize,
@@ -99,7 +98,7 @@ function GridSkeletonCell(props: GridSkeletonCellProps) {
       style={{ height, maxWidth: width, minWidth: width, ...style }}
       {...other}
     >
-      {!empty && <Skeleton {...skeletonProps} />}
+      {!empty && <rootProps.slots.baseSkeleton {...skeletonProps} />}
     </div>
   );
 }

diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx
@@ -18,6 +18,7 @@ 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 MUISkeleton from '@mui/material/Skeleton';
 import { GridColumnUnsortedIcon } from './icons/GridColumnUnsortedIcon';
 import {
   GridAddIcon,
@@ -107,6 +108,7 @@ const baseSlots: GridBaseSlots = {
   basePopper: MUIPopper,
   baseInputLabel: MUIInputLabel,
   baseSelectOption: MUISelectOption,
+  baseSkeleton: MUISkeleton,
   baseChip: MUIChip,
 };
 

diff --git a/packages/x-data-grid/src/models/gridBaseSlots.ts b/packages/x-data-grid/src/models/gridBaseSlots.ts
@@ -33,3 +33,9 @@ export type CircularProgressProps = {
 };
 
 export type LinearProgressProps = {};
+
+export type SkeletonProps = {
+  variant?: 'circular' | 'text';
+  width?: number | string;
+  height?: number | string;
+};
diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts
@@ -92,9 +92,14 @@ export interface GridBaseSlots {
   baseInputLabel: React.JSXElementConstructor<GridSlotProps['baseInputLabel']>;
   /**
    * The custom SelectOption component used in the grid.
-   * @default MenuItem
+   * @default SelectOption
    */
   baseSelectOption: React.JSXElementConstructor<GridSlotProps['baseSelectOption']>;
+  /**
+   * The custom Skeleton component used in the grid.
+   * @default Skeleton
+   */
+  baseSkeleton: React.JSXElementConstructor<GridSlotProps['baseSkeleton']>;
 }
 
 /**

diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -41,6 +41,7 @@ import type {
   DividerProps,
   LinearProgressProps,
   MenuItemProps,
+  SkeletonProps,
 } from './gridBaseSlots';
 
 type RootProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, string>;
@@ -65,6 +66,7 @@ export interface BaseTooltipPropsOverrides {}
 export interface BasePopperPropsOverrides {}
 export interface BaseInputLabelPropsOverrides {}
 export interface BaseSelectOptionPropsOverrides {}
+export interface BaseSkeletonPropsOverrides {}
 export interface BaseChipPropsOverrides {}
 
 export interface CellPropsOverrides {}
@@ -110,6 +112,7 @@ interface BaseSlotProps {
     value: any;
     children?: React.ReactNode;
   } & BaseSelectOptionPropsOverrides;
+  baseSkeleton: SkeletonProps & BaseSkeletonPropsOverrides;
   baseChip: ChipProps & BaseChipPropsOverrides;
 }
 

diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json
@@ -15,6 +15,7 @@
   { "name": "BasePopperPropsOverrides", "kind": "Interface" },
   { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" },
   { "name": "BaseSelectPropsOverrides", "kind": "Interface" },
+  { "name": "BaseSkeletonPropsOverrides", "kind": "Interface" },
   { "name": "BaseSwitchPropsOverrides", "kind": "Interface" },
   { "name": "BaseTextFieldPropsOverrides", "kind": "Interface" },
   { "name": "BaseTooltipPropsOverrides", "kind": "Interface" },

diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
@@ -15,6 +15,7 @@
   { "name": "BasePopperPropsOverrides", "kind": "Interface" },
   { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" },
   { "name": "BaseSelectPropsOverrides", "kind": "Interface" },
+  { "name": "BaseSkeletonPropsOverrides", "kind": "Interface" },
   { "name": "BaseSwitchPropsOverrides", "kind": "Interface" },
   { "name": "BaseTextFieldPropsOverrides", "kind": "Interface" },
   { "name": "BaseTooltipPropsOverrides", "kind": "Interface" },

diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
@@ -15,6 +15,7 @@
   { "name": "BasePopperPropsOverrides", "kind": "Interface" },
   { "name": "BaseSelectOptionPropsOverrides", "kind": "Interface" },
   { "name": "BaseSelectPropsOverrides", "kind": "Interface" },
+  { "name": "BaseSkeletonPropsOverrides", "kind": "Interface" },
   { "name": "BaseSwitchPropsOverrides", "kind": "Interface" },
   { "name": "BaseTextFieldPropsOverrides", "kind": "Interface" },
   { "name": "BaseTooltipPropsOverrides", "kind": "Interface" },