@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.10

package/components/panel/filterPanel/GridFilterInputSingleSelect.js

@@ -1,10 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "placeholder", "tabIndex", "label", "variant", "isFilterActive", "clearButton", "InputLabelProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "isFilterActive", "clearButton", "headerFilterMenu", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
-import { styled } from '@mui/material/styles';
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from "./filterPanelUtils.js";
 import { createElement as _createElement } from "react";
@@ -31,14 +30,6 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
-const SingleSelectOperatorContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%',
-  [`& button`]: {
-    margin: 'auto 0px 5px 5px'
-  }
-});
 function GridFilterInputSingleSelect(props) {
   const {
       item,
@@ -46,11 +37,10 @@ function GridFilterInputSingleSelect(props) {
       type,
       apiRef,
       focusElementRef,
-      placeholder,
       tabIndex,
-      label: labelProp,
-      variant = 'standard',
-      clearButton
+      clearButton,
+      headerFilterMenu,
+      slotProps
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
   const filterValue = item.value ?? '';
@@ -82,15 +72,15 @@ function GridFilterInputSingleSelect(props) {
   if (!isSingleSelectColDef(resolvedColumn)) {
     return null;
   }
-  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/_jsxs(SingleSelectOperatorContainer, {
+  const label = slotProps?.root.label ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsxs(rootProps.slots.baseFormControl, {
       fullWidth: true,
       children: [/*#__PURE__*/_jsx(rootProps.slots.baseInputLabel, _extends({}, rootProps.slotProps?.baseInputLabel, {
         id: labelId,
         htmlFor: id,
         shrink: true,
-        variant: variant,
+        variant: "outlined",
         children: label
       })), /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
         id: id,
@@ -98,16 +88,16 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValue,
         onChange: onFilterChange,
-        variant: variant,
+        variant: "outlined",
         type: type || 'text',
-        inputProps: {
+        inputProps: _extends({
           tabIndex,
           ref: focusElementRef,
-          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-        },
+          placeholder: slotProps?.root.placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        }, slotProps?.root.slotProps?.htmlInput),
         native: isSelectNative,
-        notched: variant === 'outlined' ? true : undefined
-      }, others /* FIXME: typing error */, rootProps.slotProps?.baseSelect, {
+        notched: true
+      }, rootProps.slotProps?.baseSelect, others /* FIXME: typing error */, slotProps?.root, {
         children: renderSingleSelectOptions({
           column: resolvedColumn,
           OptionComponent: rootProps.slots.baseSelectOption,
@@ -117,7 +107,7 @@ function GridFilterInputSingleSelect(props) {
           baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
         })
       }))]
-    }), clearButton]
+    }), headerFilterMenu, clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -129,8 +119,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
   clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  })]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
@@ -141,6 +145,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
-  }).isRequired
+  }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
+  type: PropTypes.oneOf(['singleSelect'])
 } : void 0;
 export { GridFilterInputSingleSelect };

package/components/panel/filterPanel/GridFilterInputValue.d.ts

@@ -1,14 +1,8 @@
 import * as React from 'react';
-import { TextFieldProps } from '@mui/material/TextField';
-import { GridFilterInputValueProps } from './GridFilterInputValueProps';
-export type GridTypeFilterInputValueProps = GridFilterInputValueProps & TextFieldProps & {
+import { TextFieldProps } from '../../../models/gridBaseSlots';
+import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent';
+export type GridTypeFilterInputValueProps = GridFilterInputValueProps<TextFieldProps> & {
     type?: 'text' | 'number' | 'date' | 'datetime-local';
-    clearButton?: React.ReactNode | null;
-    /**
-     * It is `true` if the filter either has a value or an operator with no value
-     * required is selected (for example `isEmpty`)
-     */
-    isFilterActive?: boolean;
 };
 declare function GridFilterInputValue(props: GridTypeFilterInputValueProps): React.JSX.Element;
 declare namespace GridFilterInputValue {

package/components/panel/filterPanel/GridFilterInputValue.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "clearButton", "InputProps", "variant"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "isFilterActive", "slotProps", "clearButton", "headerFilterMenu"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/utils';
 import { useTimeout } from "../../../hooks/utils/useTimeout.js";
 import { useGridRootProps } from "../../../hooks/utils/useGridRootProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridFilterInputValue(props) {
   const {
       item,
@@ -16,25 +16,24 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
+      slotProps,
       clearButton,
-      InputProps,
-      variant = 'standard'
+      headerFilterMenu
     } = props,
     others = _objectWithoutPropertiesLoose(props, _excluded);
+  const textFieldProps = slotProps?.root;
   const filterTimeout = useTimeout();
-  const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
+  const [filterValueState, setFilterValueState] = React.useState(sanitizeFilterItemValue(item.value));
   const [applying, setIsApplying] = React.useState(false);
   const id = useId();
   const rootProps = useGridRootProps();
   const onFilterChange = React.useCallback(event => {
-    const {
-      value
-    } = event.target;
-    setFilterValueState(String(value));
+    const value = sanitizeFilterItemValue(event.target.value);
+    setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
       const newItem = _extends({}, item, {
-        value: type === 'number' ? Number(value) : value,
+        value: type === 'number' && !Number.isNaN(Number(value)) ? Number(value) : value,
         fromInput: id
       });
       applyValue(newItem);
@@ -43,35 +42,42 @@ function GridFilterInputValue(props) {
   }, [filterTimeout, rootProps.filterDebounceMs, item, type, id, applyValue]);
   React.useEffect(() => {
     const itemPlusTag = item;
-    if (itemPlusTag.fromInput !== id || item.value === undefined) {
-      setFilterValueState(String(item.value ?? ''));
+    if (itemPlusTag.fromInput !== id || item.value == null) {
+      setFilterValueState(sanitizeFilterItemValue(item.value));
     }
   }, [id, item]);
-  return /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-    id: id,
-    label: apiRef.current.getLocaleText('filterPanelInputLabel'),
-    placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
-    value: filterValueState,
-    onChange: onFilterChange,
-    variant: variant,
-    type: type || 'text',
-    InputProps: _extends({}, applying || clearButton ? {
-      endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
-        fontSize: "small",
-        color: "action"
-      }) : clearButton
-    } : {}, {
-      disabled
-    }, InputProps, {
-      inputProps: _extends({
-        tabIndex
-      }, InputProps?.inputProps)
-    }),
-    InputLabelProps: {
-      shrink: true
-    },
-    inputRef: focusElementRef
-  }, others, rootProps.slotProps?.baseTextField));
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
+      id: id,
+      label: apiRef.current.getLocaleText('filterPanelInputLabel'),
+      placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
+      value: filterValueState ?? '',
+      onChange: onFilterChange,
+      type: type || 'text',
+      disabled: disabled,
+      slotProps: _extends({}, textFieldProps?.slotProps, {
+        input: _extends({
+          endAdornment: applying ? /*#__PURE__*/_jsx(rootProps.slots.baseInputAdornment, {
+            position: "end",
+            children: /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+              fontSize: "small",
+              color: "action"
+            })
+          }) : null
+        }, textFieldProps?.slotProps?.input),
+        htmlInput: _extends({
+          tabIndex
+        }, textFieldProps?.slotProps?.htmlInput)
+      }),
+      inputRef: focusElementRef
+    }, rootProps.slotProps?.baseTextField, others, textFieldProps)), headerFilterMenu, clearButton]
+  });
+}
+function sanitizeFilterItemValue(value) {
+  if (value == null || value === '') {
+    return undefined;
+  }
+  return String(value);
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -82,8 +88,22 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: PropTypes.object.isRequired
   }).isRequired,
   applyValue: PropTypes.func.isRequired,
+  className: PropTypes.string,
   clearButton: PropTypes.node,
+  disabled: PropTypes.bool,
   focusElementRef: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.func, PropTypes.object]),
+  headerFilterMenu: PropTypes.node,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  })]),
   /**
    * It is `true` if the filter either has a value or an operator with no value
    * required is selected (for example `isEmpty`)
@@ -94,6 +114,11 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any
-  }).isRequired
+  }).isRequired,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  slotProps: PropTypes.object,
+  tabIndex: PropTypes.number,
+  type: PropTypes.oneOf(['date', 'datetime-local', 'number', 'text'])
 } : void 0;
 export { GridFilterInputValue };

package/components/panel/filterPanel/GridFilterPanel.d.ts

@@ -38,7 +38,7 @@ export interface GridFilterPanelProps extends Pick<GridFilterFormProps, 'logicOp
     children?: React.ReactNode;
 }
 declare const getGridFilter: (col: GridStateColDef) => GridFilterItem;
-declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridFilterPanel: React.ForwardRefExoticComponent<GridFilterPanelProps> | React.ForwardRefExoticComponent<GridFilterPanelProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Demos:
  * - [Filtering - overview](https://mui.com/x/react-data-grid/filtering/)

package/components/panel/filterPanel/GridFilterPanel.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["logicOperators", "columnsSort", "filterFormProps", "getColumnForNewFilter", "children", "disableAddFilterButton", "disableRemoveAllButton"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridLogicOperator } from "../../../models/gridFilterItem.js";
 import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
 import { GridPanelContent } from "../GridPanelContent.js";
@@ -19,7 +20,7 @@ const getGridFilter = col => ({
   operator: col.filterOperators[0].value,
   id: Math.round(Math.random() * 1e5)
 });
-const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
+const GridFilterPanel = forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
@@ -141,9 +142,8 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
       lastFilterRef.current.focus();
     }
   }, [validFilters.length]);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsxs(GridPanelContent, {
       children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
         item: item,

package/components/panel/filterPanel/index.d.ts

@@ -2,8 +2,8 @@ export * from './GridFilterForm';
 export * from './GridFilterInputValue';
 export * from './GridFilterInputDate';
 export * from './GridFilterInputSingleSelect';
-export * from './GridFilterInputBoolean';
-export * from './GridFilterInputValueProps';
+export { GridFilterInputBoolean } from './GridFilterInputBoolean';
+export type { GridFilterInputBooleanProps } from './GridFilterInputBoolean';
 export { GridFilterPanel } from './GridFilterPanel';
 export type { GetColumnForNewFilterArgs } from './GridFilterPanel';
 export * from './GridFilterInputMultipleValue';

package/components/panel/filterPanel/index.js

@@ -2,8 +2,7 @@ export * from "./GridFilterForm.js";
 export * from "./GridFilterInputValue.js";
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
-export * from "./GridFilterInputBoolean.js";
-export * from "./GridFilterInputValueProps.js";
+export { GridFilterInputBoolean } from "./GridFilterInputBoolean.js";
 export { GridFilterPanel } from "./GridFilterPanel.js";
 export * from "./GridFilterInputMultipleValue.js";
 export * from "./GridFilterInputMultipleSingleSelect.js";

package/components/toolbar/GridToolbar.d.ts

@@ -13,5 +13,5 @@ export interface GridToolbarProps extends GridToolbarContainerProps, GridToolbar
      */
     quickFilterProps?: GridToolbarQuickFilterProps;
 }
-declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
+declare const GridToolbar: React.ForwardRefExoticComponent<GridToolbarProps> | React.ForwardRefExoticComponent<GridToolbarProps & React.RefAttributes<HTMLDivElement>>;
 export { GridToolbar };

package/components/toolbar/GridToolbar.js

@@ -3,6 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["className", "csvOptions", "printOptions", "excelOptions", "showQuickFilter", "quickFilterProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridToolbarContainer } from "../containers/GridToolbarContainer.js";
 import { GridToolbarColumnsButton } from "./GridToolbarColumnsButton.js";
 import { GridToolbarDensitySelector } from "./GridToolbarDensitySelector.js";
@@ -11,7 +12,7 @@ import { GridToolbarExport } from "./GridToolbarExport.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { GridToolbarQuickFilter } from "./GridToolbarQuickFilter.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, ref) {
+const GridToolbar = forwardRef(function GridToolbar(props, ref) {
   // TODO v7: think about where export option should be passed.
   // from slotProps={{ toolbarExport: { ...exportOption } }} seems to be more appropriate
   const _ref = props,
@@ -27,9 +28,8 @@ const GridToolbar = /*#__PURE__*/React.forwardRef(function GridToolbar(props, re
   if (rootProps.disableColumnFilter && rootProps.disableColumnSelector && rootProps.disableDensitySelector && !showQuickFilter) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({
-    ref: ref
-  }, other, {
+  return /*#__PURE__*/_jsxs(GridToolbarContainer, _extends({}, other, {
+    ref: ref,
     children: [/*#__PURE__*/_jsx(GridToolbarColumnsButton, {}), /*#__PURE__*/_jsx(GridToolbarFilterButton, {}), /*#__PURE__*/_jsx(GridToolbarDensitySelector, {}), /*#__PURE__*/_jsx(GridToolbarExport, {
       csvOptions: csvOptions,
       printOptions: printOptions
@@ -53,7 +53,13 @@ process.env.NODE_ENV !== "production" ? GridToolbar.propTypes = {
   /**
    * Props passed to the quick filter component.
    */
-  quickFilterProps: PropTypes.object,
+  quickFilterProps: PropTypes.shape({
+    className: PropTypes.string,
+    debounceMs: PropTypes.number,
+    quickFilterFormatter: PropTypes.func,
+    quickFilterParser: PropTypes.func,
+    slotProps: PropTypes.object
+  }),
   /**
    * Show the quick filter component.
    * @default false

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -11,5 +11,5 @@ interface GridToolbarColumnsButtonProps {
         tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps> | React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarColumnsButton };

package/components/toolbar/GridToolbarColumnsButton.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useId from '@mui/utils/useId';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
 import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+const GridToolbarColumnsButton = forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -36,9 +37,8 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
     enterDelay: 1000
-  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+  }, rootProps.slotProps?.baseTooltip, tooltipProps, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: ref,
       id: columnButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
@@ -46,9 +46,15 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       "aria-expanded": isOpen,
       "aria-controls": isOpen ? columnPanelId : undefined,
       startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
-    }, buttonProps, {
-      onClick: showColumns
-    }, rootProps.slotProps?.baseButton, {
+    }, rootProps.slotProps?.baseButton, buttonProps, {
+      onPointerUp: event => {
+        if (preferencePanel.open) {
+          event.stopPropagation();
+        }
+        buttonProps.onPointerUp?.(event);
+      },
+      onClick: showColumns,
+      ref: ref,
       children: apiRef.current.getLocaleText('toolbarColumns')
     }))
   }));

package/components/toolbar/GridToolbarDensitySelector.d.ts

@@ -11,5 +11,5 @@ interface GridToolbarDensitySelectorProps {
         tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarDensitySelector: React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps> | React.ForwardRefExoticComponent<GridToolbarDensitySelectorProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarDensitySelector };

package/components/toolbar/GridToolbarDensitySelector.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
@@ -11,7 +11,7 @@ import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+const GridToolbarDensitySelector = forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
     slotProps = {}
   } = props;
@@ -72,20 +72,18 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   if (rootProps.disableDensitySelector) {
     return null;
   }
-  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsxs(rootProps.slots.baseMenuItem, {
+  const densityElements = densityOptions.map((option, index) => /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: () => handleDensityUpdate(option.value),
     selected: option.value === density,
-    children: [/*#__PURE__*/_jsx(ListItemIcon, {
-      children: option.icon
-    }), option.label]
+    iconStart: option.icon,
+    children: option.label
   }, index));
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarDensityLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
         size: "small",
         startIcon: startIcon,
         "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
@@ -93,9 +91,9 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-expanded": open,
         "aria-controls": open ? densityMenuId : undefined,
         id: densityButtonId
-      }, buttonProps, {
-        onClick: handleDensitySelectorOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleDensitySelectorOpen,
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarDensity')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarExport.d.ts

@@ -36,5 +36,5 @@ declare function GridPrintExportMenuItem(props: GridPrintExportMenuItemProps): R
 declare namespace GridPrintExportMenuItem {
     var propTypes: any;
 }
-declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarExport: React.ForwardRefExoticComponent<GridToolbarExportProps> | React.ForwardRefExoticComponent<GridToolbarExportProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExport, GridCsvExportMenuItem, GridPrintExportMenuItem };

package/components/toolbar/GridToolbarExport.js

@@ -5,6 +5,7 @@ const _excluded = ["hideMenu", "options"],
   _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
@@ -83,7 +84,7 @@ process.env.NODE_ENV !== "production" ? GridPrintExportMenuItem.propTypes = {
     pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
   })
 } : void 0;
-const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
+const GridToolbarExport = forwardRef(function GridToolbarExport(props, ref) {
   const _ref = props,
     {
       csvOptions = {},

package/components/toolbar/GridToolbarExportContainer.d.ts

@@ -11,7 +11,7 @@ interface GridToolbarExportContainerProps {
         tooltip?: Partial<TooltipProps>;
     };
 }
-declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
+declare const GridToolbarExportContainer: React.ForwardRefExoticComponent<React.PropsWithChildren<GridToolbarExportContainerProps>> | React.ForwardRefExoticComponent<GridToolbarExportContainerProps & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarExportContainer };

package/components/toolbar/GridToolbarExportContainer.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { isHideMenuKey } from "../../utils/keyboardUtils.js";
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { GridMenu } from "../menu/GridMenu.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+const GridToolbarExportContainer = forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
     children,
     slotProps = {}
@@ -42,9 +43,8 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
       title: apiRef.current.getLocaleText('toolbarExportLabel'),
       enterDelay: 1000
-    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    }, rootProps.slotProps?.baseTooltip, tooltipProps, {
       children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        ref: handleRef,
         size: "small",
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
         "aria-expanded": open,
@@ -52,9 +52,9 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
         "aria-haspopup": "menu",
         "aria-controls": open ? exportMenuId : undefined,
         id: exportButtonId
-      }, buttonProps, {
-        onClick: handleMenuOpen
-      }, rootProps.slotProps?.baseButton, {
+      }, rootProps.slotProps?.baseButton, buttonProps, {
+        onClick: handleMenuOpen,
+        ref: handleRef,
         children: apiRef.current.getLocaleText('toolbarExport')
       }))
     })), /*#__PURE__*/_jsx(GridMenu, {

package/components/toolbar/GridToolbarFilterButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
+import { BadgeProps } from '../../models/gridBaseSlots';
 export interface GridToolbarFilterButtonProps {
     /**
      * The props used for each slot inside.
@@ -9,7 +10,8 @@ export interface GridToolbarFilterButtonProps {
     slotProps?: {
         button?: Partial<ButtonProps>;
         tooltip?: Partial<TooltipProps>;
+        badge?: Partial<BadgeProps>;
     };
 }
-declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const GridToolbarFilterButton: React.ForwardRefExoticComponent<GridToolbarFilterButtonProps> | React.ForwardRefExoticComponent<GridToolbarFilterButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { GridToolbarFilterButton };