From 1bac67dd2a0ad01f7039b12879a29ec804f71761 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 20 Dec 2024 18:03:58 -0500 Subject: [PATCH] [DataGrid] Refactor: move skeleton to leaf import (#15931) --- docs/pages/x/api/data-grid/data-grid-premium.json | 8 +++++++- docs/pages/x/api/data-grid/data-grid-pro.json | 8 +++++++- docs/pages/x/api/data-grid/data-grid.json | 8 +++++++- .../data-grid/data-grid-premium/data-grid-premium.json | 1 + .../api-docs/data-grid/data-grid-pro/data-grid-pro.json | 1 + .../api-docs/data-grid/data-grid/data-grid.json | 1 + .../x-data-grid/src/components/cell/GridSkeletonCell.tsx | 3 +-- packages/x-data-grid/src/material/index.tsx | 2 ++ packages/x-data-grid/src/models/gridBaseSlots.ts | 6 ++++++ packages/x-data-grid/src/models/gridSlotsComponent.ts | 7 ++++++- .../x-data-grid/src/models/gridSlotsComponentsProps.ts | 3 +++ scripts/x-data-grid-premium.exports.json | 1 + scripts/x-data-grid-pro.exports.json | 1 + scripts/x-data-grid.exports.json | 1 + 14 files changed, 45 insertions(+), 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 index e0fefac2d87bf..950b63871a3ce 100644 --- 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 index 37584164686e3..38b86de22a6be 100644 --- 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 index 1fca1f7ac9195..d08f6d5092e94 100644 --- 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 index baa4a98ce7ab1..ea8da38d3b89e 100644 --- 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 index f25678416be30..10eef41c40023 100644 --- 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 index 255e6347c8a46..320e6b76fb458 100644 --- 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 index 79fb1e5d79397..d1a021fbc8668 100644 --- 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 && } + {!empty && } ); } diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx index fb2e9191eb826..0981a623540bb 100644 --- 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 index b09fda68b6334..a7343eeb9f8a0 100644 --- 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 index 0debed33c4e0d..b27d7f9249882 100644 --- 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; /** * The custom SelectOption component used in the grid. - * @default MenuItem + * @default SelectOption */ baseSelectOption: React.JSXElementConstructor; + /** + * The custom Skeleton component used in the grid. + * @default Skeleton + */ + baseSkeleton: React.JSXElementConstructor; } /** diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index f0a43ca1c4045..5ee2ca93f49b5 100644 --- 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 & 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 index e1d56cfb4f713..5e65c7cb46188 100644 --- 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 index 5efdd0168fa30..14e6ded81896d 100644 --- 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 index 88c0c6edc1bfd..85d8fa3b60f93 100644 --- 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" },