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

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

@@ -22,7 +22,7 @@ var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../../constants/gridClasses");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "readOnly", "children"],
   _excluded2 = ["InputComponentProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -110,7 +110,6 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
       hasMultipleFilters,
       deleteFilter,
       applyFilterChanges,
-      multiFilterOperator,
       showMultiFilterOperators,
       disableMultiFilterOperator,
       applyMultiFilterOperatorChanges,
@@ -122,10 +121,12 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
       logicOperatorInputProps = {},
       operatorInputProps = {},
       columnInputProps = {},
-      valueInputProps = {}
+      valueInputProps = {},
+      readOnly
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const columnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
   const columnSelectId = (0, _utils.unstable_useId)();
@@ -136,6 +137,7 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
+  const multiFilterOperator = filterModel.logicOperator ?? _gridFilterItem.GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
   const baseFormControlProps = rootProps.slotProps?.baseFormControl || {};
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};
@@ -151,6 +153,15 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
     selectedField
   } = React.useMemo(() => {
     let itemField = item.field;
+
+    // Yields a valid value if the current filter belongs to a column that is not filterable
+    const 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,
@@ -172,7 +183,7 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
       }),
       selectedField: itemField
     };
-  }, [filterColumns, filterModel?.items, filterableColumns, item.field]);
+  }, [filterColumns, filterModel?.items, filterableColumns, item.field, columnLookup]);
   const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -279,7 +290,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
-        size: "small"
+        size: "small",
+        disabled: readOnly
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
@@ -326,7 +338,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: selectedField ?? '',
         onChange: changeColumn,
-        native: isBaseSelectNative
+        native: isBaseSelectNative,
+        disabled: readOnly
       }, rootProps.slotProps?.baseSelect, {
         children: sortedFilteredColumns.map(col => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
@@ -351,7 +364,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         value: item.operator,
         onChange: changeOperator,
         native: isBaseSelectNative,
-        inputRef: filterSelectorRef
+        inputRef: filterSelectorRef,
+        disabled: readOnly
       }, rootProps.slotProps?.baseSelect, {
         children: currentColumn?.filterOperators?.map(operator => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
@@ -369,7 +383,8 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
-        focusElementRef: valueRef
+        focusElementRef: valueRef,
+        disabled: readOnly
       }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
@@ -452,15 +467,17 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    * @default [GridLogicOperator.And, GridLogicOperator.Or]
    */
   logicOperators: _propTypes.default.arrayOf(_propTypes.default.oneOf(['and', 'or']).isRequired),
-  /**
-   * The current logic operator applied.
-   */
-  multiFilterOperator: _propTypes.default.oneOf(['and', 'or']),
   /**
    * Props passed to the operator input component.
    * @default {}
    */
   operatorInputProps: _propTypes.default.any,
+  /**
+   * `true` if the filter is disabled/read only.
+   * i.e. `colDef.fiterable = false` but passed in `filterModel`
+   * @default false
+   */
+  readOnly: _propTypes.default.bool,
   /**
    * If `true`, the logic operator field is visible.
    */

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

@@ -34,6 +34,7 @@ const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const filterModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterModelSelector);
   const filterableColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnDefinitionsSelector);
+  const filterableColumnsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridFilterableColumnLookupSelector);
   const lastFilterRef = React.useRef(null);
   const placeholderFilter = React.useRef(null);
   const {
@@ -103,63 +104,88 @@ const GridFilterPanel = exports.GridFilterPanel = /*#__PURE__*/React.forwardRef(
     return placeholderFilter.current ? [placeholderFilter.current] : [];
   }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
-  const addNewFilter = () => {
+  const {
+    readOnlyFilters,
+    validFilters
+  } = React.useMemo(() => items.reduce((acc, item) => {
+    if (filterableColumnsLookup[item.field]) {
+      acc.validFilters.push(item);
+    } else {
+      acc.readOnlyFilters.push(item);
+    }
+    return acc;
+  }, {
+    readOnlyFilters: [],
+    validFilters: []
+  }), [items, filterableColumnsLookup]);
+  const addNewFilter = React.useCallback(() => {
     const newFilter = getNewFilter();
     if (!newFilter) {
       return;
     }
     apiRef.current.upsertFilterItems([...items, newFilter]);
-  };
+  }, [apiRef, getNewFilter, items]);
   const deleteFilter = React.useCallback(item => {
-    const shouldCloseFilterPanel = items.length === 1;
+    const shouldCloseFilterPanel = validFilters.length === 1;
     apiRef.current.deleteFilterItem(item);
     if (shouldCloseFilterPanel) {
       apiRef.current.hideFilterPanel();
     }
-  }, [apiRef, items.length]);
-  const handleRemoveAll = () => {
-    if (items.length === 1 && items[0].value === undefined) {
-      apiRef.current.deleteFilterItem(items[0]);
-      apiRef.current.hideFilterPanel();
+  }, [apiRef, validFilters.length]);
+  const handleRemoveAll = React.useCallback(() => {
+    if (validFilters.length === 1 && validFilters[0].value === undefined) {
+      apiRef.current.deleteFilterItem(validFilters[0]);
+      return apiRef.current.hideFilterPanel();
     }
-    apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
-      items: []
+    return apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
+      items: readOnlyFilters
     }));
-  };
+  }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(() => {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
       applyFilterLogicOperator(logicOperators[0]);
     }
   }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
   React.useEffect(() => {
-    if (items.length > 0) {
+    if (validFilters.length > 0) {
       lastFilterRef.current.focus();
     }
-  }, [items.length]);
+  }, [validFilters.length]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelWrapper.GridPanelWrapper, (0, _extends2.default)({
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelContent.GridPanelContent, {
-      children: items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelContent.GridPanelContent, {
+      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
         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((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridFilterForm.GridFilterForm, (0, _extends2.default)({
+        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 : item.id))
+      }, filterFormProps), item.id == null ? index + readOnlyFilters.length : item.id))]
     }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelAddIcon, {})
       }, rootProps.slotProps?.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
-      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableRemoveAllButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+      })) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
         onClick: handleRemoveAll,
         startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.filterPanelRemoveAllIcon, {})
       }, rootProps.slotProps?.baseButton, {

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarColumnsButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/material/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
@@ -15,14 +15,14 @@ var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridToolbarColumnsButton(props, ref) {
   const {
-      onClick
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const columnButtonId = (0, _utils.unstable_useId)();
   const columnPanelId = (0, _utils.unstable_useId)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -34,7 +34,7 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
     } else {
       apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
-    onClick?.(event);
+    buttonProps.onClick?.(event);
   };
 
   // Disable the button if the corresponding is disabled
@@ -42,18 +42,34 @@ const GridToolbarColumnsButton = exports.GridToolbarColumnsButton = /*#__PURE__*
     return null;
   }
   const isOpen = preferencePanel.open && preferencePanel.panelId === columnPanelId;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-    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__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {})
-  }, other, {
-    onClick: showColumns
-  }, rootProps.slotProps?.baseButton, {
-    children: apiRef.current.getLocaleText('toolbarColumns')
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+    title: apiRef.current.getLocaleText('toolbarColumnsLabel'),
+    enterDelay: 1000
+  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+      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__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnSelectorIcon, {})
+    }, buttonProps, {
+      onClick: showColumns
+    }, rootProps.slotProps?.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.default.object
+} : void 0;

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarDensitySelector = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
@@ -20,14 +20,14 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {
-      onClick
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
@@ -61,7 +61,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
   }, [densityValue, rootProps]);
   const handleDensitySelectorOpen = event => {
     setOpen(prevOpen => !prevOpen);
-    onClick?.(event);
+    buttonProps.onClick?.(event);
   };
   const handleDensitySelectorClose = () => {
     setOpen(false);
@@ -91,19 +91,24 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     }), option.label]
   }, index));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      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?.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarDensity')
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+      title: apiRef.current.getLocaleText('toolbarDensityLabel'),
+      enterDelay: 1000
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        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.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarDensity')
+      }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -119,4 +124,15 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
       })
     })]
   });
-});
+});
+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.default.object
+} : void 0;

package/node/components/toolbar/GridToolbarExport.js

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

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarExportContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _keyboardUtils = require("../../utils/keyboardUtils");
@@ -16,15 +16,15 @@ var _GridMenu = require("../menu/GridMenu");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
   const {
-      children,
-      onClick
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    children,
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const exportButtonId = (0, _utils.unstable_useId)();
@@ -34,7 +34,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
   const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
   const handleMenuOpen = event => {
     setOpen(prevOpen => !prevOpen);
-    onClick?.(event);
+    buttonProps.onClick?.(event);
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
@@ -49,19 +49,24 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
-      ref: handleRef,
-      size: "small",
-      startIcon: /*#__PURE__*/(0, _jsxRuntime.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?.baseButton, {
-      children: apiRef.current.getLocaleText('toolbarExport')
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+      title: apiRef.current.getLocaleText('toolbarExportLabel'),
+      enterDelay: 1000
+    }, tooltipProps, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
+        ref: handleRef,
+        size: "small",
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.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.slotProps?.baseButton, {
+        children: apiRef.current.getLocaleText('toolbarExport')
+      }))
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
@@ -84,4 +89,15 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
       })
     })]
   });
-});
+});
+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.default.object
+} : void 0;

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridToolbarFilterButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
@@ -21,7 +20,6 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["componentsProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const useUtilityClasses = ownerState => {
@@ -45,10 +43,10 @@ const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
 }));
 const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolbarFilterButton(props, ref) {
   const {
-      componentsProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const buttonProps = componentsProps.button || {};
+    slotProps = {}
+  } = props;
+  const buttonProps = slotProps.button || {};
+  const tooltipProps = slotProps.tooltip || {};
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const activeFilters = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsSelector);
@@ -106,7 +104,7 @@ const GridToolbarFilterButton = exports.GridToolbarFilterButton = /*#__PURE__*/R
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
-  }, other, rootProps.slotProps?.baseTooltip, {
+  }, tooltipProps, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
       id: filterButtonId,
@@ -136,7 +134,5 @@ process.env.NODE_ENV !== "production" ? GridToolbarFilterButton.propTypes = {
    * The props used for each slot inside.
    * @default {}
    */
-  componentsProps: _propTypes.default.shape({
-    button: _propTypes.default.object
-  })
+  slotProps: _propTypes.default.object
 } : void 0;

package/node/components/virtualization/GridBottomContainer.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridBottomContainer = GridBottomContainer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _system = require("@mui/system");
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useUtilityClasses = () => {
+  const slots = {
+    root: ['bottomContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, {});
+};
+const Element = (0, _system.styled)('div')({
+  position: 'sticky',
+  zIndex: 2,
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+});
+function GridBottomContainer(props) {
+  const classes = useUtilityClasses();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
+    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--bottom']),
+    role: "presentation"
+  }));
+}