@mui/x-data-grid 7.0.0-alpha.7 → 7.0.0-alpha.9

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+var _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "readOnly", "children"],
   _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
-import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { GridLogicOperator } from '../../../models/gridFilterItem';
@@ -103,7 +103,7 @@ var getLogicOperatorLocaleKey = function getLogicOperatorLocaleKey(logicOperator
     case GridLogicOperator.Or:
       return 'filterPanelOperatorOr';
     default:
-      throw new Error('MUI: Invalid `logicOperator` property in the `GridFilterPanel`.');
+      throw new Error('MUI X: Invalid `logicOperator` property in the `GridFilterPanel`.');
   }
 };
 var getColumnLabel = function getColumnLabel(col) {
@@ -111,12 +111,11 @@ var getColumnLabel = function getColumnLabel(col) {
 };
 var collator = new Intl.Collator();
 var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
+  var _filterModel$logicOpe, _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
   var item = props.item,
     hasMultipleFilters = props.hasMultipleFilters,
     deleteFilter = props.deleteFilter,
     applyFilterChanges = props.applyFilterChanges,
-    multiFilterOperator = props.multiFilterOperator,
     showMultiFilterOperators = props.showMultiFilterOperators,
     disableMultiFilterOperator = props.disableMultiFilterOperator,
     applyMultiFilterOperatorChanges = props.applyMultiFilterOperatorChanges,
@@ -135,9 +134,11 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     columnInputProps = _props$columnInputPro === void 0 ? {} : _props$columnInputPro,
     _props$valueInputProp = props.valueInputProps,
     valueInputProps = _props$valueInputProp === void 0 ? {} : _props$valueInputProp,
+    readOnly = props.readOnly,
     children = props.children,
     other = _objectWithoutProperties(props, _excluded);
   var apiRef = useGridApiContext();
+  var columnLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   var columnSelectId = useId();
@@ -148,6 +149,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
   var classes = useUtilityClasses(rootProps);
   var valueRef = React.useRef(null);
   var filterSelectorRef = React.useRef(null);
+  var multiFilterOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : GridLogicOperator.And;
   var hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
   var baseFormControlProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
   var baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
@@ -158,6 +160,15 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
     valueInputPropsOther = _objectWithoutProperties(valueInputProps, _excluded2);
   var _React$useMemo = React.useMemo(function () {
       var itemField = item.field;
+
+      // Yields a valid value if the current filter belongs to a column that is not filterable
+      var selectedNonFilterableColumn = columnLookup[item.field].filterable === false ? columnLookup[item.field] : null;
+      if (selectedNonFilterableColumn) {
+        return {
+          filteredColumns: [selectedNonFilterableColumn],
+          selectedField: itemField
+        };
+      }
       if (filterColumns === undefined || typeof filterColumns !== 'function') {
         return {
           filteredColumns: filterableColumns,
@@ -179,7 +190,7 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         }),
         selectedField: itemField
       };
-    }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field]),
+    }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field, columnLookup]),
     filteredColumns = _React$useMemo.filteredColumns,
     selectedField = _React$useMemo.selectedField;
   var sortedFilteredColumns = React.useMemo(function () {
@@ -302,7 +313,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
-        size: "small"
+        size: "small",
+        disabled: readOnly
       }, (_rootProps$slotProps5 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps5.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
@@ -351,7 +363,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: selectedField != null ? selectedField : '',
         onChange: changeColumn,
-        native: isBaseSelectNative
+        native: isBaseSelectNative,
+        disabled: readOnly
       }, (_rootProps$slotProps7 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps7.baseSelect, {
         children: sortedFilteredColumns.map(function (col) {
           return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
@@ -378,7 +391,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         value: item.operator,
         onChange: changeOperator,
         native: isBaseSelectNative,
-        inputRef: filterSelectorRef
+        inputRef: filterSelectorRef,
+        disabled: readOnly
       }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
         children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(function (operator) {
           return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
@@ -398,7 +412,8 @@ var GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
-        focusElementRef: valueRef
+        focusElementRef: valueRef,
+        disabled: readOnly
       }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
@@ -481,15 +496,17 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    * @default [GridLogicOperator.And, GridLogicOperator.Or]
    */
   logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
-  /**
-   * The current logic operator applied.
-   */
-  multiFilterOperator: PropTypes.oneOf(['and', 'or']),
   /**
    * Props passed to the operator input component.
    * @default {}
    */
   operatorInputProps: PropTypes.any,
+  /**
+   * `true` if the filter is disabled/read only.
+   * i.e. `colDef.fiterable = false` but passed in `filterModel`
+   * @default false
+   */
+  readOnly: PropTypes.bool,
   /**
    * If `true`, the logic operator field is visible.
    */

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -13,7 +13,7 @@ import { GridFilterForm } from './GridFilterForm';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
-import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var getGridFilter = function getGridFilter(col) {
@@ -29,6 +29,7 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
   var rootProps = useGridRootProps();
   var filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   var filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  var filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
   var lastFilterRef = React.useRef(null);
   var placeholderFilter = React.useRef(null);
   var _props$logicOperators = props.logicOperators,
@@ -105,65 +106,93 @@ var GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(pro
     return placeholderFilter.current ? [placeholderFilter.current] : [];
   }, [filterModel.items, getDefaultFilter]);
   var hasMultipleFilters = items.length > 1;
-  var addNewFilter = function addNewFilter() {
+  var _React$useMemo = React.useMemo(function () {
+      return items.reduce(function (acc, item) {
+        if (filterableColumnsLookup[item.field]) {
+          acc.validFilters.push(item);
+        } else {
+          acc.readOnlyFilters.push(item);
+        }
+        return acc;
+      }, {
+        readOnlyFilters: [],
+        validFilters: []
+      });
+    }, [items, filterableColumnsLookup]),
+    readOnlyFilters = _React$useMemo.readOnlyFilters,
+    validFilters = _React$useMemo.validFilters;
+  var addNewFilter = React.useCallback(function () {
     var newFilter = getNewFilter();
     if (!newFilter) {
       return;
     }
     apiRef.current.upsertFilterItems([].concat(_toConsumableArray(items), [newFilter]));
-  };
+  }, [apiRef, getNewFilter, items]);
   var deleteFilter = React.useCallback(function (item) {
-    var shouldCloseFilterPanel = items.length === 1;
+    var shouldCloseFilterPanel = validFilters.length === 1;
     apiRef.current.deleteFilterItem(item);
     if (shouldCloseFilterPanel) {
       apiRef.current.hideFilterPanel();
     }
-  }, [apiRef, items.length]);
-  var handleRemoveAll = function handleRemoveAll() {
-    if (items.length === 1 && items[0].value === undefined) {
-      apiRef.current.deleteFilterItem(items[0]);
-      apiRef.current.hideFilterPanel();
+  }, [apiRef, validFilters.length]);
+  var handleRemoveAll = React.useCallback(function () {
+    if (validFilters.length === 1 && validFilters[0].value === undefined) {
+      apiRef.current.deleteFilterItem(validFilters[0]);
+      return apiRef.current.hideFilterPanel();
     }
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: []
+    return apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: readOnlyFilters
     }));
-  };
+  }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(function () {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
       applyFilterLogicOperator(logicOperators[0]);
     }
   }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
   React.useEffect(function () {
-    if (items.length > 0) {
+    if (validFilters.length > 0) {
       lastFilterRef.current.focus();
     }
-  }, [items.length]);
+  }, [validFilters.length]);
   return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelContent, {
-      children: items.map(function (item, index) {
+    children: [/*#__PURE__*/_jsxs(GridPanelContent, {
+      children: [readOnlyFilters.map(function (item, index) {
         return /*#__PURE__*/_jsx(GridFilterForm, _extends({
           item: item,
           applyFilterChanges: applyFilter,
           deleteFilter: deleteFilter,
           hasMultipleFilters: hasMultipleFilters,
           showMultiFilterOperators: index > 0,
-          multiFilterOperator: filterModel.logicOperator,
           disableMultiFilterOperator: index !== 1,
           applyMultiFilterOperatorChanges: applyFilterLogicOperator,
-          focusElementRef: index === items.length - 1 ? lastFilterRef : null,
+          focusElementRef: null,
+          readOnly: true,
           logicOperators: logicOperators,
           columnsSort: columnsSort
         }, filterFormProps), item.id == null ? index : item.id);
-      })
+      }), validFilters.map(function (item, index) {
+        return /*#__PURE__*/_jsx(GridFilterForm, _extends({
+          item: item,
+          applyFilterChanges: applyFilter,
+          deleteFilter: deleteFilter,
+          hasMultipleFilters: hasMultipleFilters,
+          showMultiFilterOperators: readOnlyFilters.length + index > 0,
+          disableMultiFilterOperator: readOnlyFilters.length + index !== 1,
+          applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+          focusElementRef: index === validFilters.length - 1 ? lastFilterRef : null,
+          logicOperators: logicOperators,
+          columnsSort: columnsSort
+        }, filterFormProps), item.id == null ? index + readOnlyFilters.length : item.id);
+      })]
     }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
       }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: handleRemoveAll,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelRemoveAllIcon, {})
       }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {

package/legacy/components/toolbar/GridToolbarColumnsButton.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onClick"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId } from '@mui/material/utils';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
@@ -9,22 +8,25 @@ import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
-  var _rootProps$slotProps;
-  var onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
+var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var columnButtonId = useId();
   var columnPanelId = useId();
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
   var showColumns = function showColumns(event) {
+    var _buttonProps$onClick;
     if (preferencePanel.open && preferencePanel.openedPanelValue === GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();
     } else {
       apiRef.current.showPreferences(GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
 
   // Disable the button if the corresponding is disabled
@@ -32,18 +34,35 @@ export var GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function Gri
     return null;
   }
   var isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
-  return /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-    ref: ref,
-    id: columnButtonId,
-    size: "small",
-    "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
-    "aria-haspopup": "menu",
-    "aria-expanded": isOpen,
-    "aria-controls": isOpen ? columnPanelId : undefined,
-    startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
-  }, other, {
-    onClick: showColumns
-  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-    children: apiRef.current.getLocaleText('toolbarColumns')
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    enterDelay: 1000
+  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      ref: ref,
+      id: columnButtonId,
+      size: "small",
+      "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? columnPanelId : undefined,
+      startIcon: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {})
+    }, buttonProps, {
+      onClick: showColumns
+    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+      children: apiRef.current.getLocaleText('toolbarColumns')
+    }))
   }));
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarColumnsButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarColumnsButton };

package/legacy/components/toolbar/GridToolbarDensitySelector.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["onClick"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
@@ -16,10 +15,12 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
-  var _rootProps$slotProps;
-  var onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
+var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  var _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var densityValue = useGridSelector(apiRef, gridDensityValueSelector);
@@ -55,10 +56,11 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     }
   }, [densityValue, rootProps]);
   var handleDensitySelectorOpen = function handleDensitySelectorOpen(event) {
+    var _buttonProps$onClick;
     setOpen(function (prevOpen) {
       return !prevOpen;
     });
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
   var handleDensitySelectorClose = function handleDensitySelectorClose() {
     setOpen(false);
@@ -92,19 +94,24 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
     }, index);
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: handleRef,
-      size: "small",
-      startIcon: startIcon,
-      "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
-      "aria-haspopup": "menu",
-      "aria-expanded": open,
-      "aria-controls": open ? densityMenuId : undefined,
-      id: densityButtonId
-    }, other, {
-      onClick: handleDensitySelectorOpen
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarDensity')
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('toolbarDensityLabel'),
+      enterDelay: 1000
+    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        ref: handleRef,
+        size: "small",
+        startIcon: startIcon,
+        "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? densityMenuId : undefined,
+        id: densityButtonId
+      }, buttonProps, {
+        onClick: handleDensitySelectorOpen
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarDensity')
+      }))
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -120,4 +127,16 @@ export var GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function G
       })
     })]
   });
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarDensitySelector.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarDensitySelector };

package/legacy/components/toolbar/GridToolbarExport.js

@@ -70,6 +70,11 @@ process.env.NODE_ENV !== "production" ? GridToolbarExport.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
   csvOptions: PropTypes.object,
-  printOptions: PropTypes.object
+  printOptions: PropTypes.object,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
 } : void 0;
 export { GridToolbarExport };

package/legacy/components/toolbar/GridToolbarExportContainer.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "onClick"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
@@ -12,11 +11,13 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridClasses } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
-  var _rootProps$slotProps;
+var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
   var children = props.children,
-    onClick = props.onClick,
-    other = _objectWithoutProperties(props, _excluded);
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var exportButtonId = useId();
@@ -28,10 +29,11 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
   var buttonRef = React.useRef(null);
   var handleRef = useForkRef(ref, buttonRef);
   var handleMenuOpen = function handleMenuOpen(event) {
+    var _buttonProps$onClick;
     setOpen(function (prevOpen) {
       return !prevOpen;
     });
-    onClick == null || onClick(event);
+    (_buttonProps$onClick = buttonProps.onClick) == null || _buttonProps$onClick.call(buttonProps, event);
   };
   var handleMenuClose = function handleMenuClose() {
     return setOpen(false);
@@ -48,19 +50,24 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
     return null;
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-      ref: handleRef,
-      size: "small",
-      startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
-      "aria-expanded": open,
-      "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
-      "aria-haspopup": "menu",
-      "aria-controls": open ? exportMenuId : undefined,
-      id: exportButtonId
-    }, other, {
-      onClick: handleMenuOpen
-    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarExport')
+    children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('toolbarExportLabel'),
+      enterDelay: 1000
+    }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+        ref: handleRef,
+        size: "small",
+        startIcon: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {}),
+        "aria-expanded": open,
+        "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
+        "aria-haspopup": "menu",
+        "aria-controls": open ? exportMenuId : undefined,
+        id: exportButtonId
+      }, buttonProps, {
+        onClick: handleMenuOpen
+      }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarExport')
+      }))
     })), /*#__PURE__*/_jsx(GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -83,4 +90,16 @@ export var GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function G
       })
     })]
   });
-});
+});
+process.env.NODE_ENV !== "production" ? GridToolbarExportContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.object
+} : void 0;
+export { GridToolbarExportContainer };

package/legacy/components/toolbar/GridToolbarFilterButton.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["componentsProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -38,10 +36,10 @@ var GridToolbarFilterListRoot = styled('ul', {
 });
 var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
   var _rootProps$slotProps, _rootProps$slotProps2;
-  var _props$componentsProp = props.componentsProps,
-    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-    other = _objectWithoutProperties(props, _excluded);
-  var buttonProps = componentsProps.button || {};
+  var _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
+  var buttonProps = slotProps.button || {};
+  var tooltipProps = slotProps.tooltip || {};
   var apiRef = useGridApiContext();
   var rootProps = useGridRootProps();
   var activeFilters = useGridSelector(apiRef, gridFilterActiveItemsSelector);
@@ -103,7 +101,7 @@ var GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbar
   return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+  }, tooltipProps, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
     children: /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
       ref: ref,
       id: filterButtonId,
@@ -133,8 +131,6 @@ process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: PropTypes.shape({
-    button: PropTypes.object
-  })
+  slotProps: PropTypes.object
 } : void 0;
 export { GridToolbarFilterButton };

package/legacy/components/toolbar/GridToolbarQuickFilter.js

@@ -139,12 +139,16 @@ process.env.NODE_ENV !== "production" ? GridToolbarQuickFilter.propTypes = {
    * Function responsible for formatting values of quick filter in a string when the model is modified
    * @param {any[]} values The new values passed to the quick filter model
    * @returns {string} The string to display in the text field
+   * @default (values: string[]) => values.join(' ')
    */
   quickFilterFormatter: PropTypes.func,
   /**
    * Function responsible for parsing text input in an array of independent values for quick filtering.
    * @param {string} input The value entered by the user
    * @returns {any[]} The array of value on which quick filter is applied
+   * @default (searchText: string) => searchText
+   *   .split(' ')
+   *   .filter((word) => word !== '')
    */
   quickFilterParser: PropTypes.func
 } : void 0;