@mui/x-data-grid 6.5.0 → 6.7.0

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

@@ -13,13 +13,16 @@ var _utils = require("@mui/utils");
 var _styles = require("@mui/material/styles");
 var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "label"];
+const _excluded = ["item", "applyValue", "apiRef", "focusElementRef", "isFilterActive", "clearButton", "tabIndex", "label"];
 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 BooleanOperatorContainer = (0, _styles.styled)('div')({
   display: 'flex',
-  alignItems: 'flex-end',
-  width: '100%'
+  alignItems: 'center',
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
 });
 function GridFilterInputBoolean(props) {
   const {
@@ -27,8 +30,6 @@ function GridFilterInputBoolean(props) {
       applyValue,
       apiRef,
       focusElementRef,
-      headerFilterMenu,
-      isFilterActive,
       clearButton,
       tabIndex,
       label: labelProp
@@ -69,7 +70,6 @@ function GridFilterInputBoolean(props) {
         variant: "standard",
         native: isSelectNative,
         displayEmpty: true,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         inputProps: {
           ref: focusElementRef,
           tabIndex
@@ -105,7 +105,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputBoolean.propTypes = {
   focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
     current: _propTypes.default.any.isRequired
   })]),
-  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`)

package/node/components/panel/filterPanel/GridFilterInputDate.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", "InputProps", "headerFilterMenu", "isFilterActive", "clearButton", "tabIndex", "disabled"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "InputProps", "isFilterActive", "clearButton", "tabIndex", "disabled"];
 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_DATE_STROKE_TIME = 500;
@@ -26,8 +26,6 @@ function GridFilterInputDate(props) {
       apiRef,
       focusElementRef,
       InputProps,
-      headerFilterMenu,
-      isFilterActive,
       clearButton,
       tabIndex,
       disabled
@@ -77,8 +75,6 @@ function GridFilterInputDate(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled
     }, InputProps, {
@@ -100,7 +96,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputDate.propTypes = {
   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`)

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

@@ -14,7 +14,7 @@ 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", "placeholder", "tabIndex", "label", "headerFilterMenu", "isFilterActive", "clearButton"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "getOptionLabel", "getOptionValue", "placeholder", "tabIndex", "label", "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 = ({
@@ -44,7 +44,10 @@ const renderSingleSelectOptions = ({
 const SingleSelectOperatorContainer = (0, _styles.styled)('div')({
   display: 'flex',
   alignItems: 'flex-end',
-  width: '100%'
+  width: '100%',
+  [`& button`]: {
+    margin: 'auto 0px 5px 5px'
+  }
 });
 function GridFilterInputSingleSelect(props) {
   const {
@@ -58,8 +61,6 @@ function GridFilterInputSingleSelect(props) {
       placeholder,
       tabIndex,
       label: labelProp,
-      headerFilterMenu,
-      isFilterActive,
       clearButton
     } = props,
     others = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -123,6 +124,7 @@ function GridFilterInputSingleSelect(props) {
     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
@@ -132,7 +134,6 @@ function GridFilterInputSingleSelect(props) {
         labelId: labelId,
         value: filterValueState,
         onChange: onFilterChange,
-        startAdornment: isFilterActive ? headerFilterMenu : null,
         variant: "standard",
         type: type || 'text',
         inputProps: {
@@ -177,7 +178,6 @@ 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`)

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", "tabIndex", "disabled", "headerFilterMenu", "isFilterActive", "clearButton", "InputProps"];
+const _excluded = ["item", "applyValue", "type", "apiRef", "focusElementRef", "tabIndex", "disabled", "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;
@@ -27,8 +27,6 @@ function GridFilterInputValue(props) {
       focusElementRef,
       tabIndex,
       disabled,
-      headerFilterMenu,
-      isFilterActive,
       clearButton,
       InputProps
     } = props,
@@ -74,8 +72,6 @@ function GridFilterInputValue(props) {
         fontSize: "small",
         color: "action"
       }) : clearButton
-    } : {}, headerFilterMenu && isFilterActive ? {
-      startAdornment: headerFilterMenu
     } : {}, {
       disabled
     }, InputProps, {
@@ -100,7 +96,6 @@ process.env.NODE_ENV !== "production" ? GridFilterInputValue.propTypes = {
   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`)

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

@@ -185,7 +185,15 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
    * If not specified, the order is derived from the `columns` prop.
    */
   columnsSort: _propTypes.default.oneOf(['asc', 'desc']),
+  /**
+   * If `true`, the `Add filter` button will not be displayed.
+   * @default false
+   */
   disableAddFilterButton: _propTypes.default.bool,
+  /**
+   * If `true`, the `Remove all` button will be disabled
+   * @default false
+   */
   disableRemoveAllButton: _propTypes.default.bool,
   /**
    * Props passed to each filter form.

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/gridClasses.js

@@ -9,5 +9,5 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorderColor', 'cell--withRightBorder', 'columnHeader--withRightBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
 exports.gridClasses = gridClasses;

package/node/constants/localeTextConstants.js

@@ -86,10 +86,10 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   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',
+  'headerFilterOperator>': 'Greater than',
+  'headerFilterOperator>=': 'Greater than or equal to',
+  'headerFilterOperator<': 'Less than',
+  'headerFilterOperator<=': '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/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;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridFilter = exports.filterStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
@@ -19,7 +20,7 @@ var _rows = require("../rows");
 var _pipeProcessing = require("../../core/pipeProcessing");
 var _strategyProcessing = require("../../core/strategyProcessing");
 var _gridFilterUtils = require("./gridFilterUtils");
-var _utils = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 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; }
@@ -28,18 +29,28 @@ const filterStateInitializer = (state, props, apiRef) => {
   return (0, _extends2.default)({}, state, {
     filter: {
       filterModel: (0, _gridFilterUtils.sanitizeFilterModel)(filterModel, props.disableMultipleColumnsFiltering, apiRef),
-      visibleRowsLookup: {},
       filteredDescendantCountLookup: {}
-    }
+    },
+    visibleRowsLookup: {}
   });
 };
+exports.filterStateInitializer = filterStateInitializer;
+const getVisibleRowsLookup = params => {
+  // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
+  return params.filteredRowsLookup;
+};
+function getVisibleRowsLookupState(apiRef, state) {
+  return apiRef.current.applyStrategyProcessor('visibleRowsLookupCreation', {
+    tree: state.rows.tree,
+    filteredRowsLookup: state.filter.filteredRowsLookup
+  });
+}
 
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-exports.filterStateInitializer = filterStateInitializer;
 const useGridFilter = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFilter');
   apiRef.current.registerControlState({
@@ -57,9 +68,13 @@ const useGridFilter = (apiRef, props) => {
         isRowMatchingFilters,
         filterModel: filterModel ?? (0, _gridFilterState.getDefaultGridFilterModel)()
       });
-      return (0, _extends2.default)({}, state, {
+      const newState = (0, _extends2.default)({}, state, {
         filter: (0, _extends2.default)({}, state.filter, filteringResult)
       });
+      const visibleRowsLookupState = getVisibleRowsLookupState(apiRef, newState);
+      return (0, _extends2.default)({}, newState, {
+        visibleRowsLookup: visibleRowsLookupState
+      });
     });
     apiRef.current.publishEvent('filteredRowsSet');
   }, [props.filterMode, apiRef]);
@@ -115,7 +130,7 @@ const useGridFilter = (apiRef, props) => {
       items
     }), 'deleteFilterItem');
   }, [apiRef]);
-  const showFilterPanel = React.useCallback(targetColumnField => {
+  const showFilterPanel = React.useCallback((targetColumnField, panelId, labelId) => {
     logger.debug('Displaying filter panel');
     if (targetColumnField) {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
@@ -160,7 +175,7 @@ const useGridFilter = (apiRef, props) => {
         items: newFilterItems
       }));
     }
-    apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.filters);
+    apiRef.current.showPreferences(_gridPreferencePanelsValue.GridPreferencePanelsValue.filters, panelId, labelId);
   }, [apiRef, logger, props.disableMultipleColumnsFiltering]);
   const hideFilterPanel = React.useCallback(() => {
     logger.debug('Hiding filter panel');
@@ -177,7 +192,7 @@ const useGridFilter = (apiRef, props) => {
   }, [apiRef]);
   const setQuickFilterValues = React.useCallback(values => {
     const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(apiRef);
-    if ((0, _utils.isDeepEqual)(filterModel.quickFilterValues, values)) {
+    if ((0, _utils2.isDeepEqual)(filterModel.quickFilterValues, values)) {
       return;
     }
     apiRef.current.setFilterModel((0, _extends2.default)({}, filterModel, {
@@ -218,7 +233,7 @@ const useGridFilter = (apiRef, props) => {
     // Always export if the model has been initialized
     props.initialState?.filter?.filterModel != null ||
     // Export if the model is not equal to the default value
-    !(0, _utils.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
+    !(0, _utils2.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
     if (!shouldExportFilterModel) {
       return prevState;
     }
@@ -266,13 +281,10 @@ const useGridFilter = (apiRef, props) => {
       }
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
-        visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };
     }
     return {
-      visibleRowsLookup: {},
       filteredRowsLookup: {},
       filteredDescendantCountLookup: {}
     };
@@ -282,6 +294,7 @@ const useGridFilter = (apiRef, props) => {
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
   (0, _strategyProcessing.useGridRegisterStrategyProcessor)(apiRef, _strategyProcessing.GRID_DEFAULT_STRATEGY, 'filtering', flatFilteringMethod);
+  (0, _strategyProcessing.useGridRegisterStrategyProcessor)(apiRef, _strategyProcessing.GRID_DEFAULT_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * EVENTS
@@ -302,13 +315,21 @@ const useGridFilter = (apiRef, props) => {
       apiRef.current.unstable_applyFilters();
     }
   }, [apiRef]);
+  const updateVisibleRowsLookupState = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        visibleRowsLookup: getVisibleRowsLookupState(apiRef, state)
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
 
   // Do not call `apiRef.current.forceUpdate` to avoid re-render before updating the sorted rows.
   // Otherwise, the state is not consistent during the render
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', updateFilteredRows);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowExpansionChange', apiRef.current.unstable_applyFilters);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowExpansionChange', updateVisibleRowsLookupState);
 
   /**
    * 1ST RENDER
@@ -320,7 +341,7 @@ const useGridFilter = (apiRef, props) => {
   /**
    * EFFECTS
    */
-  React.useEffect(() => {
+  (0, _utils.unstable_useEnhancedEffect)(() => {
     if (props.filterModel !== undefined) {
       apiRef.current.setFilterModel(props.filterModel);
     }

package/node/hooks/features/focus/useGridFocus.js

@@ -360,6 +360,7 @@ const useGridFocus = (apiRef, props) => {
     };
   }, [apiRef, handleDocumentClick]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'headerFilterBlur', handleBlur);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', handleCellMouseDown);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);

package/node/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -58,13 +58,15 @@ const useGridPreferencesPanel = (apiRef, props) => {
   const hidePreferencesDelayed = React.useCallback(() => {
     hideTimeout.current = setTimeout(hidePreferences, 100);
   }, [hidePreferences]);
-  const showPreferences = React.useCallback(newValue => {
+  const showPreferences = React.useCallback((newValue, panelId, labelId) => {
     logger.debug('Opening Preferences Panel');
     doNotHidePanel();
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       preferencePanel: (0, _extends2.default)({}, state.preferencePanel, {
         open: true,
-        openedPanelValue: newValue
+        openedPanelValue: newValue,
+        panelId,
+        labelId
       })
     }));
     apiRef.current.publishEvent('preferencePanelOpen', {