@mui/x-data-grid 6.4.0 → 6.6.0

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

@@ -10,10 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _filterPanelUtils = require("./filterPanelUtils");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const renderSingleSelectOptions = ({
@@ -40,6 +41,11 @@ const renderSingleSelectOptions = ({
     }), label);
   });
 };
+const SingleSelectOperatorContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'flex-end',
+  width: '100%'
+});
 function GridFilterInputSingleSelect(props) {
   const {
       item,
@@ -48,7 +54,13 @@ function GridFilterInputSingleSelect(props) {
       apiRef,
       focusElementRef,
       getOptionLabel: getOptionLabelProp,
-      getOptionValue: getOptionValueProp
+      getOptionValue: getOptionValueProp,
+      placeholder,
+      tabIndex,
+      label: labelProp,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [filterValueState, setFilterValueState] = React.useState(item.value ?? '');
@@ -106,36 +118,41 @@ function GridFilterInputSingleSelect(props) {
   if (!(0, _filterPanelUtils.isSingleSelectColDef)(resolvedColumn)) {
     return null;
   }
-  const label = apiRef.current.getLocaleText('filterPanelInputLabel');
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
-      id: labelId,
-      shrink: true,
-      variant: "standard",
-      children: label
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
-      id: id,
-      label: label,
-      labelId: labelId,
-      value: filterValueState,
-      onChange: onFilterChange,
-      variant: "standard",
-      type: type || 'text',
-      inputProps: {
-        ref: focusElementRef,
-        placeholder: apiRef.current.getLocaleText('filterPanelInputPlaceholder')
-      },
-      native: isSelectNative
-    }, others, rootProps.slotProps?.baseSelect, {
-      children: renderSingleSelectOptions({
-        column: resolvedColumn,
-        OptionComponent: rootProps.slots.baseSelectOption,
-        getOptionLabel,
-        getOptionValue,
-        isSelectNative,
-        baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
-      })
-    }))]
+  const label = labelProp ?? apiRef.current.getLocaleText('filterPanelInputLabel');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SingleSelectOperatorContainer, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseFormControl, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputLabel, (0, _extends2.default)({}, rootProps.slotProps?.baseInputLabel, {
+        id: labelId,
+        htmlFor: id,
+        shrink: true,
+        variant: "standard",
+        children: label
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({
+        id: id,
+        label: label,
+        labelId: labelId,
+        value: filterValueState,
+        onChange: onFilterChange,
+        startAdornment: isFilterActive ? headerFilterMenu : null,
+        variant: "standard",
+        type: type || 'text',
+        inputProps: {
+          tabIndex,
+          ref: focusElementRef,
+          placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder')
+        },
+        native: isSelectNative
+      }, others, rootProps.slotProps?.baseSelect, {
+        children: renderSingleSelectOptions({
+          column: resolvedColumn,
+          OptionComponent: rootProps.slots.baseSelectOption,
+          getOptionLabel,
+          getOptionValue,
+          isSelectNative,
+          baseSelectOptionProps: rootProps.slotProps?.baseSelectOption
+        })
+      }))]
+    }), clearButton]
   });
 }
 process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes = {
@@ -147,6 +164,7 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * Used to determine the label displayed for a given value option.
@@ -160,6 +178,12 @@ process.env.NODE_ENV !== "production" ? GridFilterInputSingleSelect.propTypes =
    * @returns {string} The value to be used.
    */
   getOptionValue: _propTypes.default.func,
+  headerFilterMenu: _propTypes.default.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 const SUBMIT_FILTER_STROKE_TIME = 500;
@@ -24,7 +24,13 @@ function GridFilterInputValue(props) {
       applyValue,
       type,
       apiRef,
-      focusElementRef
+      focusElementRef,
+      tabIndex,
+      disabled,
+      headerFilterMenu,
+      isFilterActive,
+      clearButton,
+      InputProps
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const filterTimeout = React.useRef();
@@ -55,9 +61,6 @@ function GridFilterInputValue(props) {
     const itemValue = item.value ?? '';
     setFilterValueState(String(itemValue));
   }, [item.value]);
-  const InputProps = applying ? {
-    endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {})
-  } : others.InputProps;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({
     id: id,
     label: apiRef.current.getLocaleText('filterPanelInputLabel'),
@@ -66,7 +69,20 @@ function GridFilterInputValue(props) {
     onChange: onFilterChange,
     variant: "standard",
     type: type || 'text',
-    InputProps: InputProps,
+    InputProps: (0, _extends2.default)({}, applying || clearButton ? {
+      endAdornment: applying ? /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.loadIcon, {
+        fontSize: "small",
+        color: "action"
+      }) : clearButton
+    } : {}, headerFilterMenu && isFilterActive ? {
+      startAdornment: headerFilterMenu
+    } : {}, {
+      disabled
+    }, InputProps, {
+      inputProps: (0, _extends2.default)({
+        tabIndex
+      }, InputProps?.inputProps)
+    }),
     InputLabelProps: {
       shrink: true
     },
@@ -82,7 +98,14 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
     current: _propTypes.default.object.isRequired
   }).isRequired,
   applyValue: _propTypes.default.func.isRequired,
+  clearButton: _propTypes.default.node,
   focusElementRef: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+  headerFilterMenu: _propTypes.default.node,
+  /**
+   * It is `true` if the filter either has a value or an operator with no value
+   * required is selected (e.g. `isEmpty`)
+   */
+  isFilterActive: _propTypes.default.bool,
   item: _propTypes.default.shape({
     field: _propTypes.default.string.isRequired,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridFilterPanel = void 0;
+exports.getGridFilter = exports.GridFilterPanel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -28,6 +28,7 @@ const getGridFilter = col => ({
   operator: col.filterOperators[0].value,
   id: Math.round(Math.random() * 1e5)
 });
+exports.getGridFilter = getGridFilter;
 const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

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

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  GridFilterPanel: true
+};
+Object.defineProperty(exports, "GridFilterPanel", {
+  enumerable: true,
+  get: function () {
+    return _GridFilterPanel.GridFilterPanel;
+  }
+});
 var _GridFilterForm = require("./GridFilterForm");
 Object.keys(_GridFilterForm).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterForm[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_GridFilterForm).forEach(function (key) {
 var _GridFilterInputValue = require("./GridFilterInputValue");
 Object.keys(_GridFilterInputValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_GridFilterInputValue).forEach(function (key) {
 var _GridFilterInputDate = require("./GridFilterInputDate");
 Object.keys(_GridFilterInputDate).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputDate[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_GridFilterInputDate).forEach(function (key) {
 var _GridFilterInputSingleSelect = require("./GridFilterInputSingleSelect");
 Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputSingleSelect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -47,31 +60,35 @@ Object.keys(_GridFilterInputSingleSelect).forEach(function (key) {
     }
   });
 });
-var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
-Object.keys(_GridFilterInputValueProps).forEach(function (key) {
+var _GridFilterInputBoolean = require("./GridFilterInputBoolean");
+Object.keys(_GridFilterInputBoolean).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputBoolean[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _GridFilterInputValueProps[key];
+      return _GridFilterInputBoolean[key];
     }
   });
 });
-var _GridFilterPanel = require("./GridFilterPanel");
-Object.keys(_GridFilterPanel).forEach(function (key) {
+var _GridFilterInputValueProps = require("./GridFilterInputValueProps");
+Object.keys(_GridFilterInputValueProps).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridFilterPanel[key]) return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _GridFilterInputValueProps[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _GridFilterPanel[key];
+      return _GridFilterInputValueProps[key];
     }
   });
 });
+var _GridFilterPanel = require("./GridFilterPanel");
 var _GridFilterInputMultipleValue = require("./GridFilterInputMultipleValue");
 Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputMultipleValue[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +100,7 @@ Object.keys(_GridFilterInputMultipleValue).forEach(function (key) {
 var _GridFilterInputMultipleSingleSelect = require("./GridFilterInputMultipleSingleSelect");
 Object.keys(_GridFilterInputMultipleSingleSelect).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFilterInputMultipleSingleSelect[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -8,6 +8,7 @@ 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 _utils = require("@mui/material/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
 var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
@@ -22,17 +23,16 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
       onClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const columnButtonId = (0, _utils.unstable_useId)();
+  const columnPanelId = (0, _utils.unstable_useId)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const {
-    open,
-    openedPanelValue
-  } = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+  const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const showColumns = event => {
-    if (open && openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns) {
+    if (preferencePanel.open && preferencePanel.openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.columns) {
       apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.columns);
+      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.columns, columnPanelId, columnButtonId);
     }
     onClick?.(event);
   };
@@ -41,10 +41,15 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   if (rootProps.disableColumnSelector) {
     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

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -101,9 +101,9 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),
-      "aria-expanded": open ? 'true' : undefined,
       "aria-haspopup": "menu",
-      "aria-controls": densityMenuId,
+      "aria-expanded": open,
+      "aria-controls": open ? densityMenuId : undefined,
       id: densityButtonId
     }, other, {
       onClick: handleDensitySelectorOpen

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -27,8 +27,8 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const buttonId = (0, _utils.unstable_useId)();
-  const menuId = (0, _utils.unstable_useId)();
+  const exportButtonId = (0, _utils.unstable_useId)();
+  const exportMenuId = (0, _utils.unstable_useId)();
   const [open, setOpen] = React.useState(false);
   const buttonRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, buttonRef);
@@ -61,11 +61,11 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
       ref: handleRef,
       size: "small",
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.exportIcon, {}),
-      "aria-expanded": open ? 'true' : undefined,
+      "aria-expanded": open,
       "aria-label": apiRef.current.getLocaleText('toolbarExportLabel'),
       "aria-haspopup": "menu",
-      "aria-labelledby": menuId,
-      id: buttonId
+      "aria-controls": open ? exportMenuId : undefined,
+      id: exportButtonId
     }, other, {
       onClick: handleMenuOpen
     }, rootProps.slotProps?.baseButton, {
@@ -76,9 +76,9 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
       onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
-        id: menuId,
+        id: exportMenuId,
         className: _gridClasses.gridClasses.menuList,
-        "aria-labelledby": buttonId,
+        "aria-labelledby": exportButtonId,
         onKeyDown: handleListKeyDown,
         autoFocusItem: open,
         children: React.Children.map(children, child => {

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
 const GridToolbarFilterListRoot = (0, _styles.styled)('ul', {
   name: 'MuiDataGrid',
   slot: 'ToolbarFilterList',
-  overridesResolver: (props, styles) => styles.toolbarFilterList
+  overridesResolver: (_props, styles) => styles.toolbarFilterList
 })(({
   theme
 }) => ({
@@ -55,6 +55,8 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   const lookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnLookupSelector);
   const preferencePanel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const classes = useUtilityClasses(rootProps);
+  const filterButtonId = (0, _utils.unstable_useId)();
+  const filterPanelId = (0, _utils.unstable_useId)();
   const tooltipContentNode = React.useMemo(() => {
     if (preferencePanel.open) {
       return apiRef.current.getLocaleText('toolbarFiltersTooltipHide');
@@ -89,9 +91,9 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
       openedPanelValue
     } = preferencePanel;
     if (open && openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.filters) {
-      apiRef.current.hideFilterPanel();
+      apiRef.current.hidePreferences();
     } else {
-      apiRef.current.showFilterPanel();
+      apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.filters, filterPanelId, filterButtonId);
     }
     buttonProps.onClick?.(event);
   };
@@ -100,14 +102,19 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
   if (rootProps.disableColumnFilter) {
     return null;
   }
+  const isOpen = preferencePanel.open && preferencePanel.panelId === filterPanelId;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
     title: tooltipContentNode,
     enterDelay: 1000
   }, other, rootProps.slotProps?.baseTooltip, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseButton, (0, _extends2.default)({
       ref: ref,
+      id: filterButtonId,
       size: "small",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
+      "aria-controls": isOpen ? filterPanelId : undefined,
+      "aria-expanded": isOpen,
+      "aria-haspopup": true,
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
         badgeContent: activeFilters.length,
         color: "primary",

package/node/constants/localeTextConstants.js

@@ -64,6 +64,32 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   filterOperatorIsEmpty: 'is empty',
   filterOperatorIsNotEmpty: 'is not empty',
   filterOperatorIsAnyOf: 'is any of',
+  'filterOperator=': '=',
+  'filterOperator!=': '!=',
+  'filterOperator>': '>',
+  'filterOperator>=': '>=',
+  'filterOperator<': '<',
+  'filterOperator<=': '<=',
+  // Header filter operators text
+  headerFilterOperatorContains: 'Contains',
+  headerFilterOperatorEquals: 'Equals',
+  headerFilterOperatorStartsWith: 'Starts with',
+  headerFilterOperatorEndsWith: 'Ends with',
+  headerFilterOperatorIs: 'Is',
+  headerFilterOperatorNot: 'Is not',
+  headerFilterOperatorAfter: 'Is after',
+  headerFilterOperatorOnOrAfter: 'Is on or after',
+  headerFilterOperatorBefore: 'Is before',
+  headerFilterOperatorOnOrBefore: 'Is on or before',
+  headerFilterOperatorIsEmpty: 'Is empty',
+  headerFilterOperatorIsNotEmpty: 'Is not empty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Equals',
+  'headerFilterOperator!=': 'Not equals',
+  'headerFilterOperator>': 'Is greater than',
+  'headerFilterOperator>=': 'Is greater than or equal to',
+  'headerFilterOperator<': 'Is less than',
+  'headerFilterOperator<=': 'Is less than or equal to',
   // Filter values text
   filterValueAny: 'any',
   filterValueTrue: 'true',

package/node/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -16,7 +16,8 @@ exports.GRID_DEFAULT_STRATEGY = GRID_DEFAULT_STRATEGY;
 const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',
   filtering: 'rowTree',
-  sorting: 'rowTree'
+  sorting: 'rowTree',
+  visibleRowsLookupCreation: 'rowTree'
 };
 exports.GRID_STRATEGIES_PROCESSORS = GRID_STRATEGIES_PROCESSORS;
 /**

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -269,7 +269,7 @@ const useGridColumnHeaders = props => {
         const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
         const headerInfo = {
           groupId,
-          width: columnFields.map(field => apiRef.current.getColumn(field).computedWidth).reduce((acc, val) => acc + val, 0),
+          width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
           fields: columnFields,
           colIndex: columnIndex,
           hasFocus,
@@ -325,6 +325,7 @@ const useGridColumnHeaders = props => {
   return {
     renderContext,
     getColumnHeaders,
+    getColumnsToRender,
     getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => (0, _extends2.default)({
@@ -333,7 +334,8 @@ const useGridColumnHeaders = props => {
     getInnerProps: () => ({
       ref: handleInnerRef,
       role: 'rowgroup'
-    })
+    }),
+    headerHeight
   };
 };
 exports.useGridColumnHeaders = useGridColumnHeaders;

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -161,8 +161,8 @@ function useGridDimensions(apiRef, props) {
     if (!mainEl) {
       return;
     }
-    const height = mainEl.offsetHeight || 0;
-    const width = mainEl.offsetWidth || 0;
+    const height = mainEl.clientHeight || 0;
+    const width = mainEl.clientWidth || 0;
     const win = (0, _utils.unstable_ownerWindow)(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
     const paddingLeft = parseInt(computedStyle.paddingLeft, 10) || 0;

package/node/hooks/features/editing/useGridEditing.js

@@ -39,9 +39,6 @@ const useGridEditing = (apiRef, props) => {
     if (isCellEditableProp) {
       return isCellEditableProp(params);
     }
-    if (params.rowNode.type === 'pinnedRow') {
-      return false;
-    }
     return true;
   }, [isCellEditableProp]);
   const maybeDebounce = (id, field, debounceMs, callback) => {

package/node/hooks/features/filter/gridFilterSelector.js

@@ -27,11 +27,11 @@ exports.gridFilterModelSelector = gridFilterModelSelector;
 const gridQuickFilterValuesSelector = (0, _createSelector.createSelector)(gridFilterModelSelector, filterModel => filterModel.quickFilterValues);
 
 /**
- * @category Filtering
+ * @category Visible rows
  * @ignore - do not document.
  */
 exports.gridQuickFilterValuesSelector = gridQuickFilterValuesSelector;
-const gridVisibleRowsLookupSelector = (0, _createSelector.createSelector)(gridFilterStateSelector, filterState => filterState.visibleRowsLookup);
+const gridVisibleRowsLookupSelector = state => state.visibleRowsLookup;
 
 /**
  * @category Filtering

package/node/hooks/features/filter/gridFilterState.js

@@ -16,4 +16,10 @@ const getDefaultGridFilterModel = () => ({
  * @param {GridRowId} rowId The id of the row we want to filter.
  * @param {(filterItem: GridFilterItem) => boolean} shouldApplyItem An optional callback to allow the filtering engine to only apply some items.
  */
+
+/**
+ * Visibility status for each row.
+ * A row is visible if it is passing the filters AND if its parents are expanded.
+ * If a row is not registered in this lookup, it is visible.
+ */
 exports.getDefaultGridFilterModel = getDefaultGridFilterModel;