[DataGrid] Refactor: create base button props (mui#15930)

lauri865 · Jan 3, 2025 · 3ebf4fb · 3ebf4fb
1 parent 513b8f6
commit 3ebf4fb
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 22 deletions.
diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterClearButton.tsx
@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { IconButtonProps } from '@mui/material/IconButton';
+import { GridSlotProps } from '@mui/x-data-grid';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-interface GridHeaderFilterClearIconProps extends IconButtonProps {}
+type BaseIconButtonProps = GridSlotProps['baseIconButton'];
 
-const sx = { padding: '2px' };
+// FIXME(v8:romgrk): Make parametric
+interface GridHeaderFilterClearIconProps extends BaseIconButtonProps {}
+
+const style = { padding: '2px' };
 
 function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
   const rootProps = useGridRootProps();
@@ -13,7 +16,7 @@ function GridHeaderFilterClearButton(props: GridHeaderFilterClearIconProps) {
       tabIndex={-1}
       aria-label="Clear filter"
       size="small"
-      sx={sx}
+      style={style}
       {...props}
       {...rootProps.slotProps?.baseIconButton}
     >

diff --git a/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx b/packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx
@@ -11,7 +11,7 @@ import { refType, unstable_useId as useId } from '@mui/utils';
 import { gridHeaderFilteringMenuSelector } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
-const sx = {
+const style = {
   width: 22,
   height: 22,
   margin: 'auto 0 10px 5px',
@@ -69,7 +69,7 @@ function GridHeaderFilterMenuContainer(props: {
         tabIndex={-1}
         size="small"
         onClick={handleClick}
-        sx={sx}
+        style={style}
         disabled={disabled}
         {...rootProps.slotProps?.baseIconButton}
       >

diff --git a/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx b/packages/x-data-grid/src/components/cell/GridActionsCellItem.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { IconButtonProps } from '@mui/material/IconButton';
-import { MenuItemProps } from '@mui/material/MenuItem';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { GridSlotProps } from '../../models/gridSlotsComponentsProps';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 
 interface GridActionsCellItemCommonProps {
@@ -12,9 +11,13 @@ interface GridActionsCellItemCommonProps {
   component?: React.ElementType;
 }
 
+// FIXME(v8:romgrk): Make parametric
 export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
   (
-    | ({ showInMenu?: false; icon: React.ReactElement<any> } & Omit<IconButtonProps, 'component'>)
+    | ({ showInMenu?: false; icon: React.ReactElement<any> } & Omit<
+        GridSlotProps['baseIconButton'],
+        'component'
+      >)
     | ({
         showInMenu: true;
         /**
@@ -23,7 +26,7 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
          */
         closeMenuOnClick?: boolean;
         closeMenu?: () => void;
-      } & Omit<MenuItemProps, 'component'>)
+      } & Omit<GridSlotProps['baseMenuItem'], 'component'>)
   );
 
 const GridActionsCellItem = forwardRef<HTMLElement, GridActionsCellItemProps>((props, ref) => {

diff --git a/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx b/packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx
@@ -71,7 +71,6 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
     <rootProps.slots.baseIconButton
       id={labelId}
       onClick={toggleFilter}
-      color="default"
       aria-label={apiRef.current.getLocaleText('columnHeaderFiltersLabel')}
       size="small"
       tabIndex={-1}

diff --git a/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx b/packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx
@@ -241,15 +241,15 @@ function GridColumnsManagement(props: GridColumnsManagementProps) {
               <rootProps.slots.baseIconButton
                 aria-label={apiRef.current.getLocaleText('columnsManagementDeleteIconLabel')}
                 size="small"
-                sx={[
+                style={
                   searchValue
                     ? {
                         visibility: 'visible',
                       }
                     : {
                         visibility: 'hidden',
-                      },
-                ]}
+                      }
+                }
                 tabIndex={-1}
                 onClick={handleSearchReset}
                 {...rootProps.slotProps?.baseIconButton}

diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -161,15 +161,15 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
               aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
               size="small"
               edge="end"
-              sx={[
+              style={
                 searchValue
                   ? {
                       visibility: 'visible',
                     }
                   : {
                       visibility: 'hidden',
-                    },
-              ]}
+                    }
+              }
               onClick={handleSearchReset}
               {...rootProps.slotProps?.baseIconButton}
             >

diff --git a/packages/x-data-grid/src/models/gridBaseSlots.ts b/packages/x-data-grid/src/models/gridBaseSlots.ts
@@ -1,17 +1,43 @@
+type Ref<T = HTMLElement> = React.RefCallback<T | null> | React.RefObject<T | null> | null;
+
 export type BadgeProps = {
   badgeContent?: React.ReactNode;
   children: React.ReactNode;
   color?: 'primary' | 'default' | 'error';
+  invisible?: boolean;
   overlap?: 'circular';
   variant?: 'dot';
-  invisible?: boolean;
+  style?: React.CSSProperties;
+};
+
+export type ButtonProps = {
+  ref?: Ref;
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  id?: string;
+  onClick?: React.MouseEventHandler<HTMLElement>;
+  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+  role?: string;
+  size?: 'small' | 'medium' | 'large';
+  startIcon?: React.ReactNode;
+  style?: React.CSSProperties;
+  tabIndex?: number;
+  title?: string;
+  touchRippleRef?: any; // FIXME(v8:romgrk): find a way to remove
+};
+
+export type IconButtonProps = Omit<ButtonProps, 'startIcon'> & {
+  label?: string;
+  color?: 'default' | 'inherit' | 'primary';
+  edge?: 'start' | 'end' | false;
 };
 
 export type DividerProps = {};
 
 export type MenuItemProps = {
   autoFocus?: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
   /** For items that aren't interactive themselves (but may contain an interactive widget) */
   inert?: boolean;
   disabled?: boolean;
@@ -20,6 +46,7 @@ export type MenuItemProps = {
   iconEnd?: React.ReactNode;
   selected?: boolean;
   value?: number | string | readonly string[];
+  style?: React.CSSProperties;
 };
 
 export type CircularProgressProps = {

diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge';
+import type { ButtonProps as MUIButtonProps } from '@mui/material/Button';
 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';
@@ -9,8 +10,7 @@ import type { TextFieldProps } from '@mui/material/TextField';
 import type { FormControlProps } from '@mui/material/FormControl';
 import type { SelectProps } from '@mui/material/Select';
 import type { SwitchProps } from '@mui/material/Switch';
-import type { ButtonProps } from '@mui/material/Button';
-import type { IconButtonProps } from '@mui/material/IconButton';
+import type { IconButtonProps as MUIIconButtonProps } from '@mui/material/IconButton';
 import type { InputAdornmentProps } from '@mui/material/InputAdornment';
 import type { TooltipProps } from '@mui/material/Tooltip';
 import type { InputLabelProps } from '@mui/material/InputLabel';
@@ -37,8 +37,10 @@ import type { GridRowCountProps } from '../components/GridRowCount';
 import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 import type {
   BadgeProps,
+  ButtonProps,
   CircularProgressProps,
   DividerProps,
+  IconButtonProps,
   LinearProgressProps,
   MenuItemProps,
   SkeletonProps,
@@ -118,8 +120,10 @@ interface BaseSlotProps {
 
 interface MaterialSlotProps {
   baseBadge: MUIBadgeProps;
-  baseCircularProgress: MUICircularProgressProps;
+  baseButton: MUIButtonProps;
+  baseIconButton: MUIIconButtonProps;
   baseLinearProgress: MUILinearProgressProps;
+  baseCircularProgress: MUICircularProgressProps;
   baseMenuItem: MUIMenuItemProps;
 }