@mui/x-data-grid 5.11.1 → 5.12.2

package/modern/models/events/gridEvents.js

@@ -82,6 +82,8 @@ var GridEvents;
   GridEvents["virtualScrollerTouchMove"] = "virtualScrollerTouchMove";
   GridEvents["preferencePanelClose"] = "preferencePanelClose";
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
+  GridEvents["menuOpen"] = "menuOpen";
+  GridEvents["menuClose"] = "menuClose";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/modern/models/gridApiCaches.js

@@ -0,0 +1 @@
+export {};

package/modern/models/params/gridMenuParams.js

@@ -0,0 +1 @@
+export {};

package/modern/models/params/index.js

@@ -10,4 +10,5 @@ export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
-export * from './gridPreferencePanelParams';
+export * from './gridPreferencePanelParams';
+export * from './gridMenuParams';

package/node/DataGrid/DataGrid.js

@@ -252,6 +252,15 @@ DataGridRaw.propTypes = {
    */
   getDetailPanelContent: _propTypes.default.func,
 
+  /**
+   * Function that returns the estimated height for a row.
+   * Only works if dynamic row height is used.
+   * Once the row height is measured this value is discarded.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
+   */
+  getEstimatedRowHeight: _propTypes.default.func,
+
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -262,7 +271,7 @@ DataGridRaw.propTypes = {
   /**
    * Function that sets the row height per row.
    * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
-   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied.
+   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied. If "auto" then the row height is calculated based on the content.
    */
   getRowHeight: _propTypes.default.func,
 
@@ -529,6 +538,22 @@ DataGridRaw.propTypes = {
    */
   onFilterModelChange: _propTypes.default.func,
 
+  /**
+   * Callback fired when the menu is closed.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuClose: _propTypes.default.func,
+
+  /**
+   * Callback fired when the menu is opened.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuOpen: _propTypes.default.func,
+
   /**
    * Callback fired when the current page has changed.
    * @param {number} page Index of the page displayed on the Grid.

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GRID_CHECKBOX_SELECTION_COL_DEF = void 0;
+exports.GRID_CHECKBOX_SELECTION_FIELD = exports.GRID_CHECKBOX_SELECTION_COL_DEF = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,8 +25,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 GRID_CHECKBOX_SELECTION_FIELD = '__check__';
+exports.GRID_CHECKBOX_SELECTION_FIELD = GRID_CHECKBOX_SELECTION_FIELD;
 const GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanColDef.GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/node/colDef/gridNumericColDef.js

@@ -25,7 +25,7 @@ const GRID_NUMERIC_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   valueParser: value => value === '' ? null : Number(value),
   valueFormatter: ({
     value
-  }) => value && (0, _utils.isNumber)(value) && value.toLocaleString() || value,
+  }) => (0, _utils.isNumber)(value) ? value.toLocaleString() : value || '',
   filterOperators: (0, _gridNumericOperators.getGridNumericOperators)(),
   getApplyQuickFilterFn: _gridNumericOperators.getGridNumericQuickFilterFn
 });

package/node/components/GridRow.js

@@ -41,6 +41,10 @@ var _gridActionsColDef = require("../colDef/gridActionsColDef");
 
 var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
 
+var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
+
+var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
@@ -55,25 +59,24 @@ const useUtilityClasses = ownerState => {
     editing,
     selected,
     isLastVisible,
+    rowHeight,
     classes
   } = ownerState;
   const slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return (0, _material.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
 
 const EmptyCell = ({
-  width,
-  height
+  width
 }) => {
-  if (!width || !height) {
+  if (!width) {
     return null;
   }
 
   const style = {
-    width,
-    height
+    width
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "MuiDataGrid-cell",
@@ -109,9 +112,12 @@ function GridRow(props) {
   const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
 
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const ref = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnsTotalWidthSelector);
+  const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
+  const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeDepthSelector);
   const {
     hasScrollX,
     hasScrollY
@@ -124,9 +130,41 @@ function GridRow(props) {
     isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === _gridEditRowModel.GridRowModes.Edit,
-    editable: rootProps.editMode === _gridEditRowModel.GridEditModes.Row
+    editable: rootProps.editMode === _gridEditRowModel.GridEditModes.Row,
+    rowHeight
   };
   const classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(() => {
+    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
+    }
+  });
+  React.useLayoutEffect(() => {
+    if (currentPage.range) {
+      // The index prop is relative to the rows from all pages. As example, the index prop of the
+      // first row is 5 if pageSize=5 and page=1. However, the index used by the virtualization
+      // doesn't care about pagination and considers the rows from the current page only, so the
+      // first row always has index=0. We need to subtract the index of the first row to make it
+      // compatible with the index used by the virtualization.
+      apiRef.current.unstable_setLastMeasuredRowIndex(index - currentPage.range.firstRowIndex);
+    }
+
+    const rootElement = ref.current;
+    const hasFixedHeight = rowHeight !== 'auto';
+
+    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const resizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries;
+      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
+    });
+    resizeObserver.observe(rootElement);
+    return () => resizeObserver.disconnect();
+  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     // The target is not an element when triggered by a Select inside the cell
@@ -183,7 +221,8 @@ function GridRow(props) {
     publish('rowClick', onClick)(event);
   }, [apiRef, onClick, publish, rowId]);
   const style = (0, _extends2.default)({}, styleProp, {
-    maxHeight: rowHeight,
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
     minHeight: rowHeight
   });
   const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
@@ -220,6 +259,7 @@ function GridRow(props) {
     const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = [];
+    const disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
 
     if (column.cellClassName) {
       classNames.push((0, _clsx.default)(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
@@ -289,7 +329,8 @@ function GridRow(props) {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         className: (0, _clsx.default)(classNames),
-        colSpan: colSpan
+        colSpan: colSpan,
+        disableDragEvents: disableDragEvents
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
         children: content
       }), column.field));
@@ -298,6 +339,7 @@ function GridRow(props) {
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    ref: ref,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -311,8 +353,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyCell, {
-      width: emptyCellWidth,
-      height: rowHeight
+      width: emptyCellWidth
     })]
   }));
 }
@@ -337,7 +378,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   lastColumnToRender: _propTypes.default.number.isRequired,
   renderedColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   row: _propTypes.default.any.isRequired,
-  rowHeight: _propTypes.default.number.isRequired,
+  rowHeight: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   rowId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   selected: _propTypes.default.bool.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired

package/node/components/cell/GridCell.js

@@ -33,7 +33,7 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+const _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
 
 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); }
 
@@ -92,6 +92,7 @@ function GridCell(props) {
     className,
     showRightBorder,
     colSpan,
+    disableDragEvents,
     onClick,
     onDoubleClick,
     onMouseDown,
@@ -143,7 +144,8 @@ function GridCell(props) {
     minWidth: width,
     maxWidth: width,
     minHeight: height,
-    maxHeight: height
+    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+
   };
   React.useLayoutEffect(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
@@ -208,6 +210,10 @@ function GridCell(props) {
     return children;
   };
 
+  const draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
     ref: cellRef,
     className: (0, _clsx.default)(className, classes.root),
@@ -222,10 +228,8 @@ function GridCell(props) {
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),
     onMouseDown: publish('cellMouseDown', onMouseDown),
     onMouseUp: publishMouseUp('cellMouseUp'),
-    onKeyDown: publish('cellKeyDown', onKeyDown),
-    onDragEnter: publish('cellDragEnter', onDragEnter),
-    onDragOver: publish('cellDragOver', onDragOver)
-  }, other, {
+    onKeyDown: publish('cellKeyDown', onKeyDown)
+  }, draggableEventHandlers, other, {
     onFocus: handleFocus,
     children: renderChildren()
   }));
@@ -242,10 +246,11 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: _propTypes.default.string,
   colIndex: _propTypes.default.number.isRequired,
   colSpan: _propTypes.default.number,
+  disableDragEvents: _propTypes.default.bool,
   field: _propTypes.default.string.isRequired,
   formattedValue: _propTypes.default.any,
   hasFocus: _propTypes.default.bool,
-  height: _propTypes.default.number.isRequired,
+  height: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.number]).isRequired,
   isEditable: _propTypes.default.bool,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -96,6 +96,7 @@ function GridColumnHeaderItem(props) {
     hasScrollX: false,
     hasScrollY: false
   };
+  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
   let headerComponent = null;
 
   if (column.renderHeader) {
@@ -126,12 +127,12 @@ function GridColumnHeaderItem(props) {
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
   };
-  const draggableEventHandlers = {
+  const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  };
+  } : null;
   const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
   const ownerState = (0, _extends2.default)({}, props, {
@@ -186,6 +187,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: headerCellRef,
     className: (0, _clsx.default)(classes.root, headerClassName),
@@ -198,18 +200,19 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,
-      draggable: !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder
+      draggable: isDraggable
     }, draggableEventHandlers, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: classes.titleContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
-            label: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -108,7 +108,6 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -138,7 +138,6 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/node/components/containers/GridRootStyles.js

@@ -176,7 +176,7 @@ const GridRootStyles = (0, _styles.styled)('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflowX: 'hidden'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
@@ -232,6 +232,9 @@ const GridRootStyles = (0, _styles.styled)('div', {
       },
       [`&.${_gridClasses.gridClasses['columnSeparator--resizing']}`]: {
         color: theme.palette.text.primary
+      },
+      '& svg': {
+        pointerEvents: 'none'
       }
     },
     [`& .${_gridClasses.gridClasses.iconSeparator}`]: {
@@ -285,10 +288,12 @@ const GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.cell}`]: {
       display: 'flex',
       alignItems: 'center',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
       borderBottom: `1px solid ${borderColor}`
     },
+    [`& .${_gridClasses.gridClasses.row}:not(.${_gridClasses.gridClasses['row--dynamicHeight']}) > .${_gridClasses.gridClasses.cell}`]: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
     [`& .${_gridClasses.gridClasses.cellContent}`]: {
       overflow: 'hidden',
       textOverflow: 'ellipsis'

package/node/components/menu/GridMenu.js

@@ -35,6 +35,8 @@ var _gridClasses = require("../../constants/gridClasses");
 
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["open", "target", "onClickAway", "children", "position", "className", "onExited"];
@@ -83,6 +85,7 @@ const GridMenu = props => {
     onExited
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const prevTarget = React.useRef(target);
   const prevOpen = React.useRef(open);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -93,11 +96,16 @@ const GridMenu = props => {
   React.useEffect(() => {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
-    }
+    } // Emit menuOpen or menuClose events
+
 
+    const eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target
+    });
     prevOpen.current = open;
     prevTarget.current = target;
-  }, [open, target]);
+  }, [apiRef, open, target]);
 
   const handleExited = popperOnExited => node => {
     if (popperOnExited) {

package/node/components/panel/GridColumnsPanel.js

@@ -107,8 +107,16 @@ function GridColumnsPanel(props) {
   };
 
   const toggleAllColumns = React.useCallback(isVisible => {
-    // TODO v6: call `setColumnVisibilityModel` directly
-    apiRef.current.updateColumns(columns.map(col => {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
+      if (isVisible) {
+        return apiRef.current.setColumnVisibilityModel({});
+      }
+
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(col => [col.field, false])));
+    } // TODO v6: Remove
+
+
+    return apiRef.current.updateColumns(columns.map(col => {
       if (col.hideable !== false) {
         return {
           field: col.field,
@@ -158,7 +166,6 @@ function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                color: "primary",
                 size: "small"
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
@@ -175,13 +182,11 @@ function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

package/node/components/panel/GridPanelWrapper.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridPanelWrapper = GridPanelWrapper;
+exports.GridPanelWrapper = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -58,7 +58,7 @@ const GridPanelWrapperRoot = (0, _styles.styled)('div', {
 
 const isEnabled = () => true;
 
-function GridPanelWrapper(props) {
+const GridPanelWrapper = /*#__PURE__*/React.forwardRef(function GridPanelWrapper(props, ref) {
   const {
     className
   } = props,
@@ -73,8 +73,10 @@ function GridPanelWrapper(props) {
     disableEnforceFocus: true,
     isEnabled: isEnabled,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
+      ref: ref,
       tabIndex: -1,
       className: (0, _clsx.default)(className, classes.root)
     }, other))
   });
-}
+});
+exports.GridPanelWrapper = GridPanelWrapper;