@mui/x-data-grid 7.0.0-beta.6 → 7.0.0

package/modern/joy/joySlots.js

@@ -4,10 +4,9 @@ const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size",
   _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
   _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
   _excluded4 = ["color", "size", "sx", "touchRippleRef"],
-  _excluded5 = ["name", "checkedIcon", "color", "disableRipple", "disableFocusRipple", "disableTouchRipple", "edge", "icon", "inputProps", "inputRef", "size", "sx", "onChange", "onClick"],
-  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
-  _excluded7 = ["native"],
-  _excluded8 = ["shrink", "variant", "sx"];
+  _excluded5 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded6 = ["native"],
+  _excluded7 = ["shrink", "variant", "sx"];
 import * as React from 'react';
 import JoyCheckbox from '@mui/joy/Checkbox';
 import JoyInput from '@mui/joy/Input';
@@ -15,7 +14,6 @@ import JoyFormControl from '@mui/joy/FormControl';
 import JoyFormLabel from '@mui/joy/FormLabel';
 import JoyButton from '@mui/joy/Button';
 import JoyIconButton from '@mui/joy/IconButton';
-import JoySwitch from '@mui/joy/Switch';
 import JoySelect from '@mui/joy/Select';
 import JoyOption from '@mui/joy/Option';
 import JoyBox from '@mui/joy/Box';
@@ -154,43 +152,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref)
     sx: sx
   }));
 });
-const Switch = /*#__PURE__*/React.forwardRef(function Switch(_ref5, ref) {
-  let {
-      name,
-      color: colorProp,
-      edge,
-      icon,
-      inputProps,
-      inputRef,
-      size,
-      sx,
-      onChange,
-      onClick
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
-  return /*#__PURE__*/_jsx(JoySwitch, _extends({}, props, {
-    onChange: onChange,
-    size: convertSize(size),
-    color: convertColor(colorProp),
-    ref: ref,
-    slotProps: {
-      input: _extends({}, inputProps, {
-        name,
-        onClick: onClick,
-        ref: inputRef
-      }),
-      thumb: {
-        children: icon
-      }
-    },
-    sx: [_extends({}, edge === 'start' && {
-      ml: '-8px'
-    }, edge === 'end' && {
-      mr: '-8px'
-    }), ...(Array.isArray(sx) ? sx : [sx])]
-  }));
-});
-const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
       open,
       onOpen,
@@ -202,8 +164,8 @@ const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
       MenuProps,
       inputRef,
       labelId
-    } = _ref6,
-    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   const handleChange = (event, newValue) => {
     if (event && onChange) {
       // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
@@ -254,17 +216,17 @@ const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
     }
   }));
 });
-const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+const Option = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   return /*#__PURE__*/_jsx(JoyOption, _extends({}, props, {
     ref: ref
   }));
 });
-const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
       sx
-    } = _ref8,
-    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
+    } = _ref7,
+    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
     ref: ref,
     sx: sx
@@ -394,7 +356,6 @@ const joySlots = _extends({}, joyIconSlots, {
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,
-  baseSwitch: Switch,
   baseSelect: Select,
   baseSelectOption: Option,
   baseInputLabel: InputLabel,

package/modern/locales/jaJP.js

@@ -30,10 +30,9 @@ const jaJPGrid = {
   toolbarExportPrint: '印刷',
   toolbarExportExcel: 'Excelダウンロード',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: '検索',
+  columnsManagementNoColumns: 'カラムなし',
+  columnsManagementShowHideAllText: 'すべて表示/非表示',
   // Filter panel text
   filterPanelAddFilter: 'フィルター追加',
   filterPanelRemoveAll: 'すべて削除',

package/modern/material/index.js

@@ -3,7 +3,6 @@ import MUICheckbox from '@mui/material/Checkbox';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
-import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUIIconButton from '@mui/material/IconButton';
 import MUIInputAdornment from '@mui/material/InputAdornment';
@@ -56,7 +55,6 @@ const materialSlots = _extends({}, iconSlots, {
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,
-  baseSwitch: MUISwitch,
   baseButton: MUIButton,
   baseIconButton: MUIIconButton,
   baseInputAdornment: MUIInputAdornment,

package/modern/models/api/index.js

@@ -12,5 +12,4 @@ export * from './gridPreferencesPanelApi';
 export * from './gridPrintExportApi';
 export * from './gridCallbackDetails';
 export * from './gridScrollApi';
-export * from './gridVirtualizationApi';
 export {};

package/modern/utils/cellBorderUtils.js

@@ -0,0 +1,8 @@
+import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
+export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp) => {
+  const isSectionLastCell = indexInSection === sectionLength - 1;
+  return showCellVerticalBorderRootProp && (pinnedPosition !== GridPinnedColumnPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell;
+};
+export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {
+  return pinnedPosition === GridPinnedColumnPosition.RIGHT && indexInSection === 0;
+};

package/modern/utils/createSelector.js

@@ -1,7 +1,7 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { buildWarning } from './warning';
 const cache = new WeakMap();
-const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, e.g. `mySelector(apiRef)`, or pass the instance ID explicitly, e.g. `mySelector(state, apiRef.current.instanceId)`.']);
+const missingInstanceIdWarning = buildWarning(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
 }

package/modern/utils/domUtils.js

@@ -46,4 +46,148 @@ export function isEventTargetInPortal(event) {
     return true;
   }
   return false;
+}
+export function getFieldFromHeaderElem(colCellEl) {
+  return colCellEl.getAttribute('data-field');
+}
+export function findHeaderElementFromField(elem, field) {
+  return elem.querySelector(`[data-field="${field}"]`);
+}
+export function findGroupHeaderElementsFromField(elem, field) {
+  return Array.from(elem.querySelectorAll(`[data-fields*="|-${field}-|"]`) ?? []);
+}
+export function findGridCellElementsFromCol(col, api) {
+  const root = findParentElementFromClassName(col, gridClasses.root);
+  if (!root) {
+    throw new Error('MUI X: The root element is not found.');
+  }
+  const ariaColIndex = col.getAttribute('aria-colindex');
+  if (!ariaColIndex) {
+    return [];
+  }
+  const colIndex = Number(ariaColIndex) - 1;
+  const cells = [];
+  if (!api.virtualScrollerRef?.current) {
+    return [];
+  }
+  queryRows(api).forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+    if (!rowId) {
+      return;
+    }
+    let columnIndex = colIndex;
+    const cellColSpanInfo = api.unstable_getCellColSpanInfo(rowId, colIndex);
+    if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+      columnIndex = cellColSpanInfo.leftVisibleCellIndex;
+    }
+    const cell = rowElement.querySelector(`[data-colindex="${columnIndex}"]`);
+    if (cell) {
+      cells.push(cell);
+    }
+  });
+  return cells;
+}
+export function findGridElement(api, klass) {
+  return api.rootElementRef.current.querySelector(`.${gridClasses[klass]}`);
+}
+const findPinnedCells = ({
+  api,
+  colIndex,
+  position,
+  filterFn
+}) => {
+  if (colIndex === null) {
+    return [];
+  }
+  const cells = [];
+  queryRows(api).forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+    if (!rowId) {
+      return;
+    }
+    rowElement.querySelectorAll(`.${gridClasses[position === 'left' ? 'cell--pinnedLeft' : 'cell--pinnedRight']}`).forEach(cell => {
+      const currentColIndex = parseCellColIndex(cell);
+      if (currentColIndex !== null && filterFn(currentColIndex)) {
+        cells.push(cell);
+      }
+    });
+  });
+  return cells;
+};
+export function findLeftPinnedCellsAfterCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedCells({
+    api,
+    colIndex,
+    position: 'left',
+    filterFn: index => index > colIndex
+  });
+}
+export function findRightPinnedCellsBeforeCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedCells({
+    api,
+    colIndex,
+    position: 'right',
+    filterFn: index => index < colIndex
+  });
+}
+const findPinnedHeaders = ({
+  api,
+  colIndex,
+  position,
+  filterFn
+}) => {
+  if (!api.columnHeadersContainerRef?.current) {
+    return [];
+  }
+  if (colIndex === null) {
+    return [];
+  }
+  const elements = [];
+  api.columnHeadersContainerRef.current.querySelectorAll(`.${gridClasses[position === 'left' ? 'columnHeader--pinnedLeft' : 'columnHeader--pinnedRight']}`).forEach(element => {
+    const currentColIndex = parseCellColIndex(element);
+    if (currentColIndex !== null && filterFn(currentColIndex)) {
+      elements.push(element);
+    }
+  });
+  return elements;
+};
+export function findLeftPinnedHeadersAfterCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedHeaders({
+    api,
+    position: 'left',
+    colIndex,
+    filterFn: index => index > colIndex
+  });
+}
+export function findRightPinnedHeadersBeforeCol(api, col) {
+  const colIndex = parseCellColIndex(col);
+  return findPinnedHeaders({
+    api,
+    position: 'right',
+    colIndex,
+    filterFn: index => index < colIndex
+  });
+}
+export function findGridHeader(api, field) {
+  const headers = api.columnHeadersContainerRef.current;
+  return headers.querySelector(`:scope > div > [data-field="${field}"][role="columnheader"]`);
+}
+export function findGridCells(api, field) {
+  const container = api.virtualScrollerRef.current;
+  return Array.from(container.querySelectorAll(`:scope > div > div > div > [data-field="${field}"][role="gridcell"]`));
+}
+function queryRows(api) {
+  return api.virtualScrollerRef.current.querySelectorAll(
+  // Use > to ignore rows from nested data grids (for example in detail panel)
+  `:scope > div > div > .${gridClasses.row}`);
+}
+function parseCellColIndex(col) {
+  const ariaColIndex = col.getAttribute('aria-colindex');
+  if (!ariaColIndex) {
+    return null;
+  }
+  return Number(ariaColIndex) - 1;
 }

package/modern/utils/keyboardUtils.js

@@ -8,7 +8,7 @@ export const isEscapeKey = key => key === 'Escape';
  */
 export const isTabKey = key => key === 'Tab';
 
-// Non printable keys have a name, e.g. "ArrowRight", see the whole list:
+// Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 // So event.key.length === 1 is often enough.
 //

package/node/DataGrid/DataGrid.js

@@ -74,6 +74,21 @@ DataGridRaw.propTypes = {
    * @default false
    */
   autoPageSize: _propTypes.default.bool,
+  /**
+   * If `true`, columns are autosized after the datagrid is mounted.
+   * @default false
+   */
+  autosizeOnMount: _propTypes.default.bool,
+  /**
+   * The options for autosize when user-initiated.
+   */
+  autosizeOptions: _propTypes.default.shape({
+    columns: _propTypes.default.arrayOf(_propTypes.default.string),
+    expand: _propTypes.default.bool,
+    includeHeaders: _propTypes.default.bool,
+    includeOutliers: _propTypes.default.bool,
+    outliersFactor: _propTypes.default.number
+  }),
   /**
    * Controls the modes of the cells.
    */
@@ -93,10 +108,10 @@ DataGridRaw.propTypes = {
    */
   clipboardCopyCellDelimiter: _propTypes.default.string,
   /**
-   * Number of extra columns to be rendered before/after the visible slice.
-   * @default 3
+   * Column region in pixels to render before/after the viewport
+   * @default 150
    */
-  columnBuffer: _propTypes.default.number,
+  columnBufferPx: _propTypes.default.number,
   columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * Sets the height in pixel of the column headers in the Data Grid.
@@ -107,11 +122,6 @@ DataGridRaw.propTypes = {
    * Set of columns of type [[GridColDef]][].
    */
   columns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
-  /**
-   * Number of rows from the `columnBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  columnThreshold: _propTypes.default.number,
   /**
    * Set the column visibility model of the Data Grid.
    * If defined, the Data Grid will ignore the `hide` property in [[GridColDef]].
@@ -122,6 +132,11 @@ DataGridRaw.propTypes = {
    * @default "standard"
    */
   density: _propTypes.default.oneOf(['comfortable', 'compact', 'standard']),
+  /**
+   * If `true`, column autosizing on header separator double-click is disabled.
+   * @default false
+   */
+  disableAutosize: _propTypes.default.bool,
   /**
    * If `true`, column filters are disabled.
    * @default false
@@ -132,6 +147,11 @@ DataGridRaw.propTypes = {
    * @default false
    */
   disableColumnMenu: _propTypes.default.bool,
+  /**
+   * If `true`, resizing columns is disabled.
+   * @default false
+   */
+  disableColumnResize: _propTypes.default.bool,
   /**
    * If `true`, hiding/showing columns is disabled.
    * @default false
@@ -429,12 +449,31 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnOrderChange: _propTypes.default.func,
+  /**
+   * Callback fired while a column is being resized.
+   * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnResize: _propTypes.default.func,
   /**
    * Callback fired when the column visibility model changes.
    * @param {GridColumnVisibilityModel} model The new model.
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onColumnVisibilityModelChange: _propTypes.default.func,
+  /**
+   * Callback fired when the width of a column is changed.
+   * @param {GridColumnResizeParams} params With all properties from [[GridColumnResizeParams]].
+   * @param {MuiEvent<React.MouseEvent>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onColumnWidthChange: _propTypes.default.func,
+  /**
+   * Callback fired when the density changes.
+   * @param {GridDensity} density New density value.
+   */
+  onDensityChange: _propTypes.default.func,
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -495,6 +534,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onRowClick: _propTypes.default.func,
+  /**
+   * Callback fired when the row count has changed.
+   * @param {number} count Updated row count.
+   */
+  onRowCountChange: _propTypes.default.func,
   /**
    * Callback fired when a double click event comes from a row container element.
    * @param {GridRowParams} params With all properties from [[RowParams]].
@@ -572,10 +616,10 @@ DataGridRaw.propTypes = {
    */
   processRowUpdate: _propTypes.default.func,
   /**
-   * Number of extra rows to be rendered before/after the visible slice.
-   * @default 3
+   * Row region in pixels to render before/after the viewport
+   * @default 150
    */
-  rowBuffer: _propTypes.default.number,
+  rowBufferPx: _propTypes.default.number,
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
@@ -599,8 +643,9 @@ DataGridRaw.propTypes = {
   rowPositionsDebounceMs: _propTypes.default.number,
   /**
    * Set of rows of type [[GridRowsProp]].
+   * @default []
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rows: _propTypes.default.arrayOf(_propTypes.default.object),
   /**
    * If `false`, the row selection mode is disabled.
    * @default true
@@ -615,11 +660,6 @@ DataGridRaw.propTypes = {
    * @default "margin"
    */
   rowSpacingType: _propTypes.default.oneOf(['border', 'margin']),
-  /**
-   * Number of rows from the `rowBuffer` that can be visible before a new slice is rendered.
-   * @default 3
-   */
-  rowThreshold: _propTypes.default.number,
   /**
    * Override the height/width of the Data Grid inner scrollbar.
    */

package/node/DataGrid/useDataGridComponent.js

@@ -32,6 +32,7 @@ var _useGridStatePersistence = require("../hooks/features/statePersistence/useGr
 var _useGridColumnSpanning = require("../hooks/features/columns/useGridColumnSpanning");
 var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridColumnGrouping");
 var _virtualization = require("../hooks/features/virtualization");
+var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
 
@@ -54,6 +55,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPreferencesPanel.preferencePanelStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridFilter.filterStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDensity.densityStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnResize.columnResizeStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridPagination.paginationStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
@@ -72,6 +74,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridFilter.useGridFilter)(apiRef, props);
   (0, _useGridSorting.useGridSorting)(apiRef, props);
   (0, _useGridDensity.useGridDensity)(apiRef, props);
+  (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
   (0, _useGridPagination.useGridPagination)(apiRef, props);
   (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, props);
   (0, _useGridScroll.useGridScroll)(apiRef, props);

package/node/DataGrid/useDataGridProps.js

@@ -22,7 +22,6 @@ const DATA_GRID_FORCED_PROPS = {
   pagination: true,
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
-  disableColumnResize: true,
   keepColumnPositionIfDraggedOutside: false,
   signature: 'DataGrid'
 };
@@ -35,12 +34,10 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   autoPageSize: false,
   checkboxSelection: false,
   checkboxSelectionVisibleOnly: false,
-  columnBuffer: 3,
-  rowBuffer: 3,
-  columnThreshold: 3,
-  rowThreshold: 3,
+  columnBufferPx: 150,
+  rowBufferPx: 150,
+  rows: [],
   rowSelection: true,
-  density: 'standard',
   disableColumnFilter: false,
   disableColumnMenu: false,
   disableColumnSelector: false,
@@ -79,7 +76,9 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   keepColumnPositionIfDraggedOutside: false,
   ignoreValueFormatterDuringExport: false,
   clipboardCopyCellDelimiter: '\t',
-  rowPositionsDebounceMs: 166
+  rowPositionsDebounceMs: 166,
+  autosizeOnMount: false,
+  disableAutosize: false
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {

package/node/components/GridColumnHeaders.js

@@ -9,18 +9,15 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
 var _fastMemo = require("../utils/fastMemo");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
-var _GridColumnHeadersInner = require("./columnHeaders/GridColumnHeadersInner");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {
-      innerRef,
       visibleColumns,
       sortColumnLookup,
       filterColumnLookup,
@@ -36,12 +33,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
-    isDragging,
     getInnerProps,
-    getColumnHeaders,
-    getColumnGroupHeaders
+    getColumnHeadersRow,
+    getColumnGroupHeadersRows
   } = (0, _useGridColumnHeaders.useGridColumnHeaders)({
-    innerRef,
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,
@@ -55,14 +50,10 @@ const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeade
     columnGroupsHeaderStructure,
     hasOtherElementInTabSequence
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridBaseColumnHeaders.GridBaseColumnHeaders, (0, _extends2.default)({
     ref: ref
-  }, other, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridColumnHeadersInner.GridColumnHeadersInner, (0, _extends2.default)({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: [getColumnGroupHeaders(), getColumnHeaders()]
-    }))
+  }, other, getInnerProps(), {
+    children: [getColumnGroupHeadersRows(), getColumnHeadersRow()]
   }));
 });
 process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
@@ -96,7 +87,6 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
   filterColumnLookup: _propTypes.default.object.isRequired,
   hasOtherElementInTabSequence: _propTypes.default.bool.isRequired,
   headerGroupingMaxDepth: _propTypes.default.number.isRequired,
-  innerRef: _utils.refType,
   sortColumnLookup: _propTypes.default.object.isRequired,
   visibleColumns: _propTypes.default.arrayOf(_propTypes.default.object).isRequired
 } : void 0;

package/node/components/GridHeaders.js

@@ -34,15 +34,12 @@ function GridHeaders() {
   const columnVisibility = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnVisibilityModelSelector);
   const columnGroupsHeaderStructure = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderStructureSelector);
   const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
-  const columnHeadersRef = React.useRef(null);
   const columnsContainerRef = React.useRef(null);
   apiRef.current.register('private', {
-    columnHeadersContainerElementRef: columnsContainerRef,
-    columnHeadersElementRef: columnHeadersRef
+    columnHeadersContainerRef: columnsContainerRef
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaders, {
     ref: columnsContainerRef,
-    innerRef: columnHeadersRef,
     visibleColumns: visibleColumns,
     filterColumnLookup: filterColumnLookup,
     sortColumnLookup: sortColumnLookup,

package/node/components/GridPagination.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridPagination = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TablePagination = _interopRequireWildcard(require("@mui/material/TablePagination"));
 var _styles = require("@mui/material/styles");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
-var _filter = require("../hooks/features/filter");
 var _gridPaginationSelector = require("../hooks/features/pagination/gridPaginationSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -40,8 +40,7 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
-  const visibleTopLevelRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _filter.gridFilteredTopLevelRowCountSelector);
-  const rowCount = React.useMemo(() => rootProps.rowCount ?? visibleTopLevelRowCount ?? 0, [rootProps.rowCount, visibleTopLevelRowCount]);
+  const rowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationRowCountSelector);
   const lastPage = React.useMemo(() => {
     const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
     return Math.max(0, calculatedValue);
@@ -90,4 +89,11 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange
   }, apiRef.current.getLocaleText('MuiTablePagination'), props));
-});
+});
+process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  component: _propTypes.default.elementType
+} : void 0;