update density item

mui · Nov 4, 2024 · 76ba05e · 76ba05e
1 parent b7c8f44
commit 76ba05e
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 45 deletions.
diff --git a/packages/x-data-grid/src/components/toolbar/v8/GridToolbarDensityItem.tsx b/packages/x-data-grid/src/components/toolbar/v8/GridToolbarDensityItem.tsx
@@ -11,9 +11,7 @@ import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { GridDensityOption } from '../../../models/api/gridDensityApi';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { GridToolbarTooltip } from './GridToolbarTooltip';
-import { GridToolbarToggleButtonGroup } from './GridToolbarToggleButtonGroup';
 import { GridToolbarToggleButton } from './GridToolbarToggleButton';
-import { GridToolbarPopover } from './GridToolbarPopover';
 
 interface GridToolbarDensityItemProps {
   /**
@@ -30,7 +28,6 @@ interface GridToolbarDensityItemProps {
 const GridToolbarDensityItem = React.forwardRef<HTMLButtonElement, GridToolbarDensityItemProps>(
   function GridToolbarDensityItem(props, ref) {
     const { slotProps = {} } = props;
-    const toggleButtonGroupProps = slotProps.toggleButtonGroup || {};
     const toggleButtonProps = slotProps.toggleButton || {};
     const tooltipProps = slotProps.tooltip || {};
     const apiRef = useGridApiContext();
@@ -73,10 +70,7 @@ const GridToolbarDensityItem = React.forwardRef<HTMLButtonElement, GridToolbarDe
       },
     ];
 
-    const handleDensityUpdate = (
-      event: React.MouseEvent<HTMLElement, MouseEvent>,
-      newDensity: GridDensity,
-    ) => {
+    const handleDensityUpdate = (newDensity: GridDensity) => {
       if (newDensity !== null) {
         apiRef.current.setDensity(newDensity);
       }
@@ -100,38 +94,39 @@ const GridToolbarDensityItem = React.forwardRef<HTMLButtonElement, GridToolbarDe
             value="density"
             selected={!!anchorEl}
             onChange={handleDensitySelectorOpen}
+            sx={{ gap: 1 }}
             {...toggleButtonProps}
           >
             {densityIcons[density]}
-            <rootProps.slots.arrowDropDownIcon fontSize="small" sx={{ mr: -0.75 }} />
+            Density
+            <rootProps.slots.arrowDropDownIcon fontSize="small" sx={{ ml: -0.75, mr: -0.5 }} />
           </GridToolbarToggleButton>
         </GridToolbarTooltip>
 
-        <GridToolbarPopover
+        <rootProps.slots.baseMenu
           open={!!anchorEl}
           anchorEl={anchorEl}
           onClose={handleDensitySelectorOpen}
           id={densityMenuId}
+          {...rootProps.slotProps?.baseMenu}
         >
-          <GridToolbarToggleButtonGroup
-            value={density}
-            onChange={handleDensityUpdate}
-            exclusive
-            {...toggleButtonGroupProps}
-          >
-            {densityOptions.map((option) => (
-              <GridToolbarTooltip key={option.value} title={option.label} {...tooltipProps}>
-                <GridToolbarToggleButton
-                  value={option.value}
-                  aria-label={option.label}
-                  {...toggleButtonProps}
-                >
-                  {option.icon}
-                </GridToolbarToggleButton>
-              </GridToolbarTooltip>
-            ))}
-          </GridToolbarToggleButtonGroup>
-        </GridToolbarPopover>
+          {densityOptions.map((option) => (
+            <rootProps.slots.baseMenuItem
+              key={option.value}
+              value={option.value}
+              selected={option.value === density}
+              onClick={() => handleDensityUpdate(option.value)}
+              {...rootProps.slotProps?.baseMenuItem}
+            >
+              <rootProps.slots.baseListItemIcon {...rootProps.slotProps?.baseListItemIcon}>
+                {option.icon}
+              </rootProps.slots.baseListItemIcon>
+              <rootProps.slots.baseListItemText {...rootProps.slotProps?.baseListItemText}>
+                {option.label}
+              </rootProps.slots.baseListItemText>
+            </rootProps.slots.baseMenuItem>
+          ))}
+        </rootProps.slots.baseMenu>
       </React.Fragment>
     );
   },

diff --git a/packages/x-data-grid/src/components/toolbar/v8/GridToolbarRoot.tsx b/packages/x-data-grid/src/components/toolbar/v8/GridToolbarRoot.tsx
@@ -31,7 +31,7 @@ const StyledGridToolbarRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
   flexWrap: 'wrap',
-  gap: theme.spacing(0.5),
+  gap: theme.spacing(0.25),
   padding: theme.spacing(0.75, 0.75),
   borderBottom: `1px solid ${theme.palette.divider}`,
 }));

diff --git a/packages/x-data-grid/src/components/toolbar/v8/GridToolbarSeparator.tsx b/packages/x-data-grid/src/components/toolbar/v8/GridToolbarSeparator.tsx
@@ -34,6 +34,7 @@ const Separator = styled('div', {
   backgroundColor: theme.palette.divider,
 }));
 
+// TODO: This should be a divider component from Material UI
 function GridToolbarSeparator(props: GridToolbarSeparatorProps) {
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);

diff --git a/packages/x-data-grid/src/components/toolbar/v8/GridToolbarToggleButton.tsx b/packages/x-data-grid/src/components/toolbar/v8/GridToolbarToggleButton.tsx
@@ -25,9 +25,10 @@ const StyledToggleButton = styled(ToggleButton, {
   name: 'MuiDataGrid',
   slot: 'ToolbarToggleButton',
   overridesResolver: (_, styles) => styles.toolbarToggleButton,
-})<{ ownerState: OwnerState }>({
+})<{ ownerState: OwnerState }>(({ theme }) => ({
   border: 0,
-});
+  gap: theme.spacing(0.5),
+}));
 
 const GridToolbarToggleButton = React.forwardRef<HTMLButtonElement, GridToolbarToggleButtonProps>(
   function GridToolbarToggleButton(props, ref) {

diff --git a/packages/x-data-grid/src/components/toolbar/v8/GridToolbarTooltip.tsx b/packages/x-data-grid/src/components/toolbar/v8/GridToolbarTooltip.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/system';
-import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
+import { TooltipProps } from '@mui/material/Tooltip';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../../constants/gridClasses';
@@ -21,24 +20,14 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const StyledTooltip = styled(Tooltip, {
-  name: 'MuiDataGrid',
-  slot: 'ToolbarTooltip',
-  overridesResolver: (_, styles) => styles.toolbarTooltip,
-})<{ ownerState: OwnerState }>({
-  border: 0,
-});
-
 function GridToolbarTooltip(props: GridToolbarTooltipProps) {
   const rootProps = useGridRootProps();
   const { children, className, ...other } = props;
   const classes = useUtilityClasses(rootProps);
 
   return (
-    <StyledTooltip
-      ownerState={rootProps}
+    <rootProps.slots.baseTooltip
       className={clsx(classes.root, className)}
-      as={rootProps.slots.baseTooltip}
       enterDelay={1000}
       slotProps={{
         popper: {
@@ -56,7 +45,7 @@ function GridToolbarTooltip(props: GridToolbarTooltipProps) {
       {...other}
     >
       {children}
-    </StyledTooltip>
+    </rootProps.slots.baseTooltip>
   );
 }
 

diff --git a/packages/x-data-grid/src/material/index.ts b/packages/x-data-grid/src/material/index.ts
@@ -1,8 +1,11 @@
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
 import MUIDivider from '@mui/material/Divider';
+import MUIMenu from '@mui/material/Menu';
 import MUIMenuList from '@mui/material/MenuList';
 import MUIMenuItem from '@mui/material/MenuItem';
+import MUIListItemIcon from '@mui/material/ListItemIcon';
+import MUIListItemText from '@mui/material/ListItemText';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
@@ -95,8 +98,11 @@ const materialSlots: GridBaseSlots & GridIconSlotsComponent = {
   baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
   baseDivider: MUIDivider,
+  baseMenu: MUIMenu,
   baseMenuList: MUIMenuList,
   baseMenuItem: MUIMenuItem,
+  baseListItemIcon: MUIListItemIcon,
+  baseListItemText: MUIListItemText,
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,

diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts
@@ -25,6 +25,11 @@ export interface GridBaseSlots {
    * @default Divider
    */
   baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
+  /**
+   * The custom Menu component used in the grid.
+   * @default Menu
+   */
+  baseMenu: React.JSXElementConstructor<GridSlotProps['baseMenu']>;
   /**
    * The custom MenuList component used in the grid.
    * @default MenuList
@@ -35,6 +40,16 @@ export interface GridBaseSlots {
    * @default MenuItem
    */
   baseMenuItem: React.JSXElementConstructor<GridSlotProps['baseMenuItem']>;
+  /**
+   * The custom ListItemIcon component used in the grid.
+   * @default ListItemIcon
+   */
+  baseListItemIcon: React.JSXElementConstructor<GridSlotProps['baseListItemIcon']>;
+  /**
+   * The custom ListItemText component used in the grid.
+   * @default ListItemText
+   */
+  baseListItemText: React.JSXElementConstructor<GridSlotProps['baseListItemText']>;
   /**
    * The custom InputAdornment component used in the grid.
    * @default InputAdornment

diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
@@ -1,8 +1,11 @@
 import * as React from 'react';
 import type { BadgeProps } from '@mui/material/Badge';
 import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { MenuProps } from '@mui/material/Menu';
 import type { MenuListProps } from '@mui/material/MenuList';
 import type { MenuItemProps } from '@mui/material/MenuItem';
+import type { ListItemIconProps } from '@mui/material/ListItemIcon';
+import type { ListItemTextProps } from '@mui/material/ListItemText';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { FormControlProps } from '@mui/material/FormControl';
 import type { SelectProps } from '@mui/material/Select';
@@ -43,8 +46,11 @@ type DividerProps = {};
 export interface BaseBadgePropsOverrides {}
 export interface BaseCheckboxPropsOverrides {}
 export interface BaseDividerPropsOverrides {}
+export interface BaseMenuPropsOverrides {}
 export interface BaseMenuListPropsOverrides {}
 export interface BaseMenuItemPropsOverrides {}
+export interface BaseListItemIconPropsOverrides {}
+export interface BaseListItemTextPropsOverrides {}
 export interface BaseTextFieldPropsOverrides {}
 export interface BaseFormControlPropsOverrides {}
 export interface BaseSelectPropsOverrides {}
@@ -84,8 +90,11 @@ export interface GridSlotProps {
   baseBadge: BadgeProps & BaseBadgePropsOverrides;
   baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
   baseDivider: DividerProps & BaseDividerPropsOverrides;
+  baseMenu: MenuProps & BaseMenuPropsOverrides;
   baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
   baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
+  baseListItemIcon: ListItemIconProps & BaseListItemIconPropsOverrides;
+  baseListItemText: ListItemTextProps & BaseListItemTextPropsOverrides;
   baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
   baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
   baseSelect: SelectProps & BaseSelectPropsOverrides;