From fd31143c5681f9f4c79c025386bcd3e358b6cfcb Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Mon, 16 Dec 2024 17:59:46 -0500 Subject: [PATCH] [DataGrid] Refactor: move Badge to leaf import (#15879) --- .../toolbar/GridToolbarFilterButton.tsx | 3 +- .../x-data-grid/src/models/gridBaseSlots.ts | 23 +++++++++++ .../src/models/gridSlotsComponentsProps.ts | 40 +++++++++++-------- scripts/x-data-grid-premium.exports.json | 2 +- scripts/x-data-grid-pro.exports.json | 2 +- scripts/x-data-grid.exports.json | 2 +- 6 files changed, 52 insertions(+), 20 deletions(-) create mode 100644 packages/x-data-grid/src/models/gridBaseSlots.ts diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx index 29a4a8c637f6..1f6f55aa594e 100644 --- a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx +++ b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx @@ -8,7 +8,7 @@ import { } from '@mui/utils'; import { ButtonProps } from '@mui/material/Button'; import { TooltipProps } from '@mui/material/Tooltip'; -import { BadgeProps } from '@mui/material/Badge'; +import { BadgeProps } from '../../models/gridBaseSlots'; import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector'; import { useGridSelector } from '../../hooks/utils/useGridSelector'; import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector'; @@ -42,6 +42,7 @@ const GridToolbarFilterListRoot = styled('ul', { padding: theme.spacing(0, 1), })); +// FIXME(v8:romgrk): override slotProps export interface GridToolbarFilterButtonProps { /** * The props used for each slot inside. diff --git a/packages/x-data-grid/src/models/gridBaseSlots.ts b/packages/x-data-grid/src/models/gridBaseSlots.ts new file mode 100644 index 000000000000..67eb9713d954 --- /dev/null +++ b/packages/x-data-grid/src/models/gridBaseSlots.ts @@ -0,0 +1,23 @@ +export type BadgeProps = { + badgeContent?: React.ReactNode; + children: React.ReactNode; + color?: 'primary' | 'default' | 'error'; + overlap?: 'circular'; + variant?: 'dot'; + invisible?: boolean; +}; + +export type DividerProps = {}; + +export type MenuItemProps = { + autoFocus?: boolean; + children: React.ReactNode; + /** For items that aren't interactive themselves (but may contain an interactive widget) */ + inert?: boolean; + disabled?: boolean; + onClick?: React.MouseEventHandler; + iconStart?: React.ReactNode; + iconEnd?: React.ReactNode; + selected?: boolean; + value?: number | string | readonly string[]; +}; diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index 8f4ca6926174..1f9f2fcc4402 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,7 +1,8 @@ import * as React from 'react'; -import type { BadgeProps } from '@mui/material/Badge'; +import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge'; import type { CheckboxProps } from '@mui/material/Checkbox'; import type { MenuListProps } from '@mui/material/MenuList'; +import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem'; import type { TextFieldProps } from '@mui/material/TextField'; import type { FormControlProps } from '@mui/material/FormControl'; import type { SelectProps } from '@mui/material/Select'; @@ -32,24 +33,11 @@ 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'; -type DividerProps = {}; type RootProps = React.HTMLAttributes & Record<`data-${string}`, string>; type MainProps = React.HTMLAttributes & Record<`data-${string}`, string>; -type MenuItemProps = { - autoFocus?: boolean; - children: React.ReactNode; - /** For items that aren't interactive themselves (but may contain an interactive widget) */ - inert?: boolean; - disabled?: boolean; - onClick?: React.MouseEventHandler; - iconStart?: React.ReactNode; - iconEnd?: React.ReactNode; - selected?: boolean; - value?: number | string | readonly string[]; -}; - // Overrides for module augmentation export interface BaseBadgePropsOverrides {} export interface BaseCheckboxPropsOverrides {} @@ -88,7 +76,7 @@ export interface PinnedRowsPropsOverrides {} export interface SkeletonCellPropsOverrides {} export interface RowPropsOverrides {} -export interface GridSlotProps { +interface BaseSlotProps { baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; baseDivider: DividerProps & BaseDividerPropsOverrides; @@ -110,6 +98,14 @@ export interface GridSlotProps { children?: React.ReactNode; } & BaseSelectOptionPropsOverrides; baseChip: ChipProps & BaseChipPropsOverrides; +} + +interface MaterialSlotProps { + baseBadge: MUIBadgeProps; + baseMenuItem: MUIMenuItemProps; +} + +interface ElementSlotProps { cell: GridCellProps & CellPropsOverrides; columnHeaders: GridColumnHeadersProps; columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & @@ -141,6 +137,18 @@ export interface GridSlotProps { root: RootProps; } +/* Merge MUI types into base types to keep slotProps working. */ +type Merge = { + [K in keyof A | keyof B]: K extends keyof A & keyof B + ? A[K] & B[K] + : K extends keyof B + ? B[K] + : K extends keyof A + ? A[K] + : never; +}; +export type GridSlotProps = Merge & ElementSlotProps; + /** * Overridable components props dynamically passed to the component at rendering. */ diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 9fbabee08cbf..8a40105fbd39 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -567,7 +567,7 @@ { "name": "GridSkeletonCell", "kind": "Variable" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, - { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "TypeAlias" }, { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 285e6817f6e2..4ba7e2f6454b 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -518,7 +518,7 @@ { "name": "GridSkeletonCell", "kind": "Variable" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, - { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "TypeAlias" }, { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 34314a105432..6f8e730aff19 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -469,7 +469,7 @@ { "name": "GridSkeletonCell", "kind": "Variable" }, { "name": "GridSkeletonCellProps", "kind": "Interface" }, { "name": "GridSkeletonRowNode", "kind": "Interface" }, - { "name": "GridSlotProps", "kind": "Interface" }, + { "name": "GridSlotProps", "kind": "TypeAlias" }, { "name": "GridSlots", "kind": "Interface" }, { "name": "GridSlotsComponent", "kind": "Interface" }, { "name": "GridSlotsComponentsProps", "kind": "TypeAlias" },