@mui/x-data-grid 8.0.0-alpha.1 → 8.0.0-alpha.10

package/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +36,7 @@ const GridColumnHeadersRoot = (0, _system.styled)('div', {
   borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
   borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
 });
-const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = (0, _forwardRef.forwardRef)(function GridColumnHeaders(props, ref) {
   const {
       className
     } = props,
@@ -43,10 +44,10 @@ const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
-    role: "presentation"
+    role: "presentation",
+    ref: ref
   }));
 });

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -9,6 +9,7 @@ exports.GridColumnGroupHeader = GridColumnGroupHeader;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
@@ -16,7 +17,8 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
-var _cellBorderUtils = require("../../utils/cellBorderUtils");
+var _constants = require("../../internals/constants");
+var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -30,7 +32,7 @@ const useUtilityClasses = ownerState => {
     pinnedPosition
   } = ownerState;
   const slots = {
-    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight', isLastColumn && 'columnHeader--last'],
     draggableContainer: ['columnHeaderDraggableContainer'],
     titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
     titleContainerContent: ['columnHeaderTitleContainerContent']
@@ -50,12 +52,10 @@ function GridColumnGroupHeader(props) {
     tabIndex,
     isLastColumn,
     pinnedPosition,
-    style,
-    indexInSection,
-    sectionLength,
-    gridHasFiller
+    pinnedOffset
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const columnGroupsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector);
@@ -80,12 +80,8 @@ function GridColumnGroupHeader(props) {
   if (groupId && render) {
     headerComponent = render(renderParams);
   }
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
-    showLeftBorder,
-    showRightBorder,
     headerAlign,
     depth,
     isDragging: false
@@ -118,6 +114,7 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButton;
+exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButtonWrapped;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -27,6 +27,21 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
+function GridColumnHeaderFilterIconButtonWrapped(props) {
+  if (!props.counter) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderFilterIconButton, (0, _extends2.default)({}, props));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButtonWrapped.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: _propTypes.default.number,
+  field: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+} : void 0;
 function GridColumnHeaderFilterIconButton(props) {
   const {
     counter,
@@ -39,8 +54,8 @@ function GridColumnHeaderFilterIconButton(props) {
     classes: rootProps.classes
   });
   const classes = useUtilityClasses(ownerState);
-  const preferencePanel = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
   const labelId = (0, _utils.unstable_useId)();
+  const isOpen = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelSelectorWithLabel, labelId);
   const panelId = (0, _utils.unstable_useId)();
   const toggleFilter = React.useCallback(event => {
     event.preventDefault();
@@ -61,17 +76,15 @@ function GridColumnHeaderFilterIconButton(props) {
   if (!counter) {
     return null;
   }
-  const open = preferencePanel.open && preferencePanel.labelId === labelId;
   const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
     id: labelId,
     onClick: toggleFilter,
-    color: "default",
     "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
     size: "small",
     tabIndex: -1,
     "aria-haspopup": "menu",
-    "aria-expanded": open,
-    "aria-controls": open ? panelId : undefined
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? panelId : undefined
   }, rootProps.slotProps?.baseIconButton, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnFilteredIcon, {
       className: classes.icon,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("@mui/x-internals/fastMemo");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
@@ -19,7 +20,8 @@ var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
-var _cellBorderUtils = require("../../utils/cellBorderUtils");
+var _constants = require("../../internals/constants");
+var _utils2 = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -39,7 +41,7 @@ const useUtilityClasses = ownerState => {
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === 'left' && 'columnHeader--pinnedLeft', pinnedPosition === 'right' && 'columnHeader--pinnedRight',
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
     // See https://github.com/mui/mui-x/pull/14559
     isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],
@@ -64,14 +66,14 @@ function GridColumnHeaderItem(props) {
     tabIndex,
     disableReorder,
     separatorSide,
-    style,
+    showLeftBorder,
+    showRightBorder,
     pinnedPosition,
-    indexInSection,
-    sectionLength,
-    gridHasFiller
+    pinnedOffset
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
   const columnMenuId = (0, _utils.unstable_useId)();
   const columnMenuButtonId = (0, _utils.unstable_useId)();
@@ -82,8 +84,6 @@ function GridColumnHeaderItem(props) {
   if (colDef.renderHeader) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
-  const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
     showRightBorder,
@@ -179,6 +179,7 @@ function GridColumnHeaderItem(props) {
     colDef
   }) : colDef.headerClassName;
   const label = colDef.headerName ?? colDef.field;
+  const style = React.useMemo(() => (0, _utils2.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,
@@ -217,18 +218,18 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   columnMenuOpen: _propTypes.default.bool.isRequired,
   disableReorder: _propTypes.default.bool,
   filterItemsCounter: _propTypes.default.number,
-  gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   headerHeight: _propTypes.default.number.isRequired,
-  indexInSection: _propTypes.default.number.isRequired,
   isDragging: _propTypes.default.bool.isRequired,
   isLast: _propTypes.default.bool.isRequired,
   isLastUnpinned: _propTypes.default.bool.isRequired,
   isResizing: _propTypes.default.bool.isRequired,
   isSiblingFocused: _propTypes.default.bool.isRequired,
-  pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
-  sectionLength: _propTypes.default.number.isRequired,
+  pinnedOffset: _propTypes.default.number,
+  pinnedPosition: _propTypes.default.oneOf([0, 1, 2, 3]),
   separatorSide: _propTypes.default.oneOf(['left', 'right']),
+  showLeftBorder: _propTypes.default.bool.isRequired,
+  showRightBorder: _propTypes.default.bool.isRequired,
   sortDirection: _propTypes.default.oneOf(['asc', 'desc']),
   sortIndex: _propTypes.default.number,
   style: _propTypes.default.object,

package/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _domUtils = require("../../utils/domUtils");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -38,7 +39,7 @@ const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
   fontWeight: 'var(--unstable_DataGrid-headWeight)',
   lineHeight: 'normal'
 });
-const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+const ColumnHeaderInnerTitle = (0, _forwardRef.forwardRef)(function ColumnHeaderInnerTitle(props, ref) {
   // Tooltip adds aria-label to the props, which is not needed since the children prop is a string
   // See https://github.com/mui/mui-x/pull/14482
   const {
@@ -48,10 +49,11 @@ const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHead
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderTitleRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 // No React.memo here as if we display the sort icon, we need to recalculate the isOver
 function GridColumnHeaderTitle(props) {

package/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -11,13 +11,14 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps", "style"];
-const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _forwardRef.forwardRef)(function GridGenericColumnHeaderItem(props, ref) {
   const {
       classes,
       colIndex,
@@ -62,7 +63,6 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
     }
   }, [apiRef, hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: handleRef,
     className: (0, _clsx.default)(classes.root, headerClassName),
     style: (0, _extends2.default)({}, style, {
       height,
@@ -73,6 +73,7 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__P
     "aria-colindex": colIndex + 1,
     "aria-sort": ariaSort
   }, other, {
+    ref: handleRef,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,
       draggable: isDraggable,

package/node/components/columnHeaders/GridIconButtonContainer.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -34,7 +35,7 @@ const GridIconButtonContainerRoot = (0, _system.styled)('div', {
   visibility: 'hidden',
   width: 0
 }));
-const GridIconButtonContainer = exports.GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+const GridIconButtonContainer = exports.GridIconButtonContainer = (0, _forwardRef.forwardRef)(function GridIconButtonContainer(props, ref) {
   const {
       className
     } = props,
@@ -42,8 +43,9 @@ const GridIconButtonContainer = exports.GridIconButtonContainer = /*#__PURE__*/R
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonContainerRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
@@ -27,7 +28,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
+const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = (0, _forwardRef.forwardRef)(function GridCellCheckboxRenderer(props, ref) {
   const {
       field,
       id,
@@ -83,26 +84,27 @@ const GridCellCheckboxForwardRef = exports.GridCellCheckboxForwardRef = /*#__PUR
   const {
     isIndeterminate,
     isChecked
-  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector);
+  } = (0, _useGridSelector.useGridSelector)(apiRef, checkboxPropsSelector, undefined, _useGridSelector.objectShallowCompare);
   if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
     return null;
   }
-  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
-  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
+  const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-    ref: handleRef,
     tabIndex: tabIndex,
-    checked: checked,
+    checked: isChecked && !isIndeterminate,
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_row'
     },
     onKeyDown: handleKeyDown,
     indeterminate: isIndeterminate,
     disabled: !isSelectable,
     touchRippleRef: rippleRef /* FIXME: typing error */
-  }, rootProps.slotProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: handleRef
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/columnSelection/GridHeaderCheckbox.js

@@ -11,6 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _utils = require("../../hooks/features/rowSelection/utils");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
@@ -31,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _gridClasses.getDataGridUtilityClass, classes);
 };
-const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
+const GridHeaderCheckbox = exports.GridHeaderCheckbox = (0, _forwardRef.forwardRef)(function GridHeaderCheckbox(props, ref) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const [, forceUpdate] = React.useState(false);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -49,13 +50,16 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
       return selection;
     }
     return selection.filter(id => {
+      if (rootProps.keepNonExistentRowsSelected) {
+        return true;
+      }
       // The row might have been deleted
       if (!apiRef.current.getRow(id)) {
         return false;
       }
       return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
     });
-  }, [apiRef, rootProps.isRowSelectable, selection]);
+  }, [apiRef, rootProps.isRowSelectable, selection, rootProps.keepNonExistentRowsSelected]);
 
   // All the rows that could be selected / unselected by toggling this checkbox
   const selectionCandidates = React.useMemo(() => {
@@ -64,10 +68,13 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
     // Convert to an object to make O(1) checking if a row exists or not
     // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
     return rowIds.reduce((acc, id) => {
+      if (!apiRef.current.isRowSelectable(id)) {
+        return acc;
+      }
       acc[id] = true;
       return acc;
     }, {});
-  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+  }, [apiRef, rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
 
   // Amount of rows selected and that are visible in the current page
   const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);
@@ -100,21 +107,22 @@ const GridHeaderCheckbox = exports.GridHeaderCheckbox = /*#__PURE__*/React.forwa
   React.useEffect(() => {
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
-  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
-  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
+  const label = apiRef.current.getLocaleText(isChecked && !isIndeterminate ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
-    ref: ref,
     indeterminate: isIndeterminate,
-    checked: checked,
+    checked: isChecked && !isIndeterminate,
     onChange: handleChange,
     className: classes.root,
     inputProps: {
-      'aria-label': label
+      'aria-label': label,
+      name: 'select_all_rows'
     },
     tabIndex: tabIndex,
     onKeyDown: handleKeyDown,
     disabled: !(0, _utils.isMultipleRowSelectionEnabled)(rootProps)
-  }, rootProps.slotProps?.baseCheckbox, other));
+  }, rootProps.slotProps?.baseCheckbox, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/columnsManagement/GridColumnsManagement.js

@@ -12,7 +12,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
 var _styles = require("@mui/material/styles");
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _InputBase = require("@mui/material/InputBase");
 var _gridColumnsSelector = require("../../hooks/features/columns/gridColumnsSelector");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
@@ -21,6 +20,7 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _useLazyRef = require("../../hooks/utils/useLazyRef");
 var _utils = require("./utils");
+var _assert = require("../../utils/assert");
 var _jsxRuntime = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
@@ -138,32 +138,33 @@ function GridColumnsManagement(props) {
         className: classes.searchInput,
         value: searchValue,
         onChange: handleSearchValueChange,
-        variant: "outlined",
         size: "small",
         type: "search",
-        InputProps: {
-          startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
-            position: "start",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
-          }),
-          endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
-            "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
-            size: "small",
-            sx: [searchValue ? {
-              visibility: 'visible'
-            } : {
-              visibility: 'hidden'
-            }],
-            tabIndex: -1,
-            onClick: handleSearchReset
-          }, rootProps.slotProps?.baseIconButton, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
-              fontSize: "small"
-            })
-          }))
-        },
-        inputProps: {
-          'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
+        slotProps: {
+          input: {
+            startAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseInputAdornment, {
+              position: "start",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterIcon, {})
+            }),
+            endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+              "aria-label": apiRef.current.getLocaleText('columnsManagementDeleteIconLabel'),
+              size: "small",
+              style: searchValue ? {
+                visibility: 'visible'
+              } : {
+                visibility: 'hidden'
+              },
+              tabIndex: -1,
+              onClick: handleSearchReset
+            }, rootProps.slotProps?.baseIconButton, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {
+                fontSize: "small"
+              })
+            }))
+          },
+          htmlInput: {
+            'aria-label': apiRef.current.getLocaleText('columnsManagementSearchTitle')
+          }
         },
         autoComplete: "off",
         fullWidth: true
@@ -242,7 +243,29 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: _propTypes.default.func,
-  searchInputProps: _propTypes.default.object,
+  searchInputProps: _propTypes.default.shape({
+    autoComplete: _propTypes.default.string,
+    className: _propTypes.default.string,
+    color: _propTypes.default.oneOf(['error', 'primary']),
+    disabled: _propTypes.default.bool,
+    error: _propTypes.default.bool,
+    fullWidth: _propTypes.default.bool,
+    helperText: _propTypes.default.string,
+    id: _propTypes.default.string,
+    inputRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.object
+    })]),
+    label: _propTypes.default.node,
+    onChange: _propTypes.default.func,
+    onKeyDown: _propTypes.default.func,
+    placeholder: _propTypes.default.string,
+    size: _propTypes.default.oneOf(['medium', 'small']),
+    slotProps: _propTypes.default.object,
+    style: _propTypes.default.object,
+    tabIndex: _propTypes.default.number,
+    type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'checkbox', 'color', 'date', 'datetime-local', 'email', 'file', 'hidden', 'image', 'month', 'number', 'password', 'radio', 'range', 'reset', 'search', 'submit', 'tel', 'text', 'time', 'url', 'week']), _propTypes.default.object]),
+    value: _propTypes.default.string
+  }),
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc']),
   /**
@@ -277,7 +300,7 @@ const GridColumnsManagementHeader = (0, _styles.styled)('div', {
 }) => ({
   padding: theme.spacing(1.5, 3)
 }));
-const SearchInput = (0, _styles.styled)(_TextField.default, {
+const SearchInput = (0, _styles.styled)(_assert.NotRendered, {
   name: 'MuiDataGrid',
   slot: 'ColumnsManagementSearchInput',
   overridesResolver: (props, styles) => styles.columnsManagementSearchInput

package/node/components/containers/GridFooterContainer.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -37,7 +38,7 @@ const GridFooterContainerRoot = (0, _system.styled)('div', {
   minHeight: 52,
   borderTop: '1px solid'
 });
-const GridFooterContainer = exports.GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+const GridFooterContainer = exports.GridFooterContainer = (0, _forwardRef.forwardRef)(function GridFooterContainer(props, ref) {
   const {
       className
     } = props,
@@ -45,10 +46,11 @@ const GridFooterContainer = exports.GridFooterContainer = /*#__PURE__*/React.for
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridFooterContainerRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/components/containers/GridOverlay.js

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _system = require("@mui/system");
+var _forwardRef = require("@mui/x-internals/forwardRef");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,7 +40,7 @@ const GridOverlayRoot = (0, _system.styled)('div', {
   justifyContent: 'center',
   backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
 });
-const GridOverlay = exports.GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+const GridOverlay = exports.GridOverlay = (0, _forwardRef.forwardRef)(function GridOverlay(props, ref) {
   const {
       className
     } = props,
@@ -47,10 +48,11 @@ const GridOverlay = exports.GridOverlay = /*#__PURE__*/React.forwardRef(function
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridOverlayRoot, (0, _extends2.default)({
-    ref: ref,
     className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
-  }, other));
+  }, other, {
+    ref: ref
+  }));
 });
 process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
   // ----------------------------- Warning --------------------------------