From 2a17695a01939219ce68ea175e27aa9eccc0bdef Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 13 Dec 2024 21:49:04 -0500 Subject: [PATCH 1/2] refactor: move Badge to leaf import --- .../toolbar/GridToolbarFilterButton.tsx | 3 +- .../src/models/gridSlotsComponentsProps.ts | 38 +++++++++++++++++-- 2 files changed, 36 insertions(+), 5 deletions(-) diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx index 29a4a8c637f6..53bea811c0ca 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/gridSlotsComponentsProps'; 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/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index ecc364336082..1b63834a1fab 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'; @@ -33,9 +34,18 @@ import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay'; import type { GridRowCountProps } from '../components/GridRowCount'; import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon'; -type DividerProps = {}; +export type BadgeProps = { + badgeContent?: React.ReactNode; + children: React.ReactNode; + color?: 'primary' | 'default' | 'error'; + overlap?: 'circular'; + variant?: 'dot'; + invisible?: boolean; +}; + +export type DividerProps = {}; -type MenuItemProps = { +export type MenuItemProps = { autoFocus?: boolean; children: React.ReactNode; /** For items that aren't interactive themselves (but may contain an interactive widget) */ @@ -86,7 +96,7 @@ export interface PinnedRowsPropsOverrides {} export interface SkeletonCellPropsOverrides {} export interface RowPropsOverrides {} -export interface GridSlotProps { +interface GridBaseSlotProps { baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; baseDivider: DividerProps & BaseDividerPropsOverrides; @@ -108,6 +118,14 @@ export interface GridSlotProps { children?: React.ReactNode; } & BaseSelectOptionPropsOverrides; baseChip: ChipProps & BaseChipPropsOverrides; +} + +interface GridMaterialSlotProps { + baseBadge: MUIBadgeProps; + baseMenuItem: MUIMenuItemProps; +} + +interface GridElementSlotProps { cell: GridCellProps & CellPropsOverrides; columnHeaders: GridColumnHeadersProps; columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & @@ -131,6 +149,18 @@ export interface GridSlotProps { toolbar: GridToolbarProps & ToolbarPropsOverrides; } +/* 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 & GridElementSlotProps; + /** * Overridable components props dynamically passed to the component at rendering. */ From 27ffb044301cc6ca369b6fabd0417a8dd94ef9b2 Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Sat, 14 Dec 2024 20:29:58 -0500 Subject: [PATCH 2/2] lint --- .../x-data-grid/src/models/gridSlotsComponentsProps.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index 1b63834a1fab..a7c1fefec9ba 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -96,7 +96,7 @@ export interface PinnedRowsPropsOverrides {} export interface SkeletonCellPropsOverrides {} export interface RowPropsOverrides {} -interface GridBaseSlotProps { +interface BaseSlotProps { baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; baseDivider: DividerProps & BaseDividerPropsOverrides; @@ -120,12 +120,12 @@ interface GridBaseSlotProps { baseChip: ChipProps & BaseChipPropsOverrides; } -interface GridMaterialSlotProps { +interface MaterialSlotProps { baseBadge: MUIBadgeProps; baseMenuItem: MUIMenuItemProps; } -interface GridElementSlotProps { +interface ElementSlotProps { cell: GridCellProps & CellPropsOverrides; columnHeaders: GridColumnHeadersProps; columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & @@ -159,7 +159,7 @@ type Merge = { ? A[K] : never; }; -export type GridSlotProps = Merge & GridElementSlotProps; +export type GridSlotProps = Merge & ElementSlotProps; /** * Overridable components props dynamically passed to the component at rendering.