@mui/x-data-grid 5.14.0 → 5.15.2

package/modern/locales/zhCN.js

@@ -21,15 +21,15 @@ const zhCNGrid = {
   toolbarFiltersTooltipShow: '显示筛选器',
   toolbarFiltersTooltipActive: count => `${count} 个筛选器`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: '搜索…',
+  toolbarQuickFilterLabel: '搜索',
+  toolbarQuickFilterDeleteIconLabel: '清除',
   // Export selector toolbar button text
   toolbarExport: '导出',
   toolbarExportLabel: '导出',
   toolbarExportCSV: '导出至CSV',
-  // toolbarExportPrint: 'Print',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportPrint: '打印',
+  toolbarExportExcel: '导出至Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: '搜索列',
   columnsPanelTextFieldPlaceholder: '列名',
@@ -39,7 +39,7 @@ const zhCNGrid = {
   // Filter panel text
   filterPanelAddFilter: '添加筛选器',
   filterPanelDeleteIconLabel: '删除',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: '逻辑操作器',
   filterPanelOperators: '操作器',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: '与',
@@ -60,7 +60,7 @@ const zhCNGrid = {
   filterOperatorOnOrBefore: '正在前面',
   filterOperatorIsEmpty: '为空',
   filterOperatorIsNotEmpty: '不为空',
-  // filterOperatorIsAnyOf: 'is any of',
+  filterOperatorIsAnyOf: '属于',
   // Filter values text
   filterValueAny: '任何',
   filterValueTrue: '真',
@@ -85,39 +85,39 @@ const zhCNGrid = {
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} / ${totalCount.toLocaleString()}`,
   // Checkbox selection text
   checkboxSelectionHeaderName: '多选框',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: '全选行',
+  checkboxSelectionUnselectAllRows: '反选所有行',
+  checkboxSelectionSelectRow: '选择行',
+  checkboxSelectionUnselectRow: '反选行',
   // Boolean cell text
   booleanCellTrueLabel: '真',
-  booleanCellFalseLabel: '假' // Actions cell more text
-  // actionsCellMore: 'more',
+  booleanCellFalseLabel: '假',
+  // Actions cell more text
+  actionsCellMore: '更多',
   // Column pinning text
-  // pinToLeft: 'Pin to left',
-  // pinToRight: 'Pin to right',
-  // unpin: 'Unpin',
+  pinToLeft: '固定到左侧',
+  pinToRight: '固定到右侧',
+  unpin: '取消固定',
   // Tree Data
-  // treeDataGroupingHeaderName: 'Group',
-  // treeDataExpand: 'see children',
-  // treeDataCollapse: 'hide children',
+  treeDataGroupingHeaderName: '组',
+  treeDataExpand: '查看子项目',
+  treeDataCollapse: '隐藏子项目',
   // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
+  groupingColumnHeaderName: '组',
+  groupColumn: name => `用${name}分组`,
+  unGroupColumn: name => `不再用${name}分组`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  detailPanelToggle: '详细信息',
+  expandDetailPanel: '显示',
+  collapseDetailPanel: '折叠',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  rowReorderingHeaderName: '重新排列行',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  aggregationMenuItemHeader: '集合',
+  aggregationFunctionLabelSum: '总数',
+  aggregationFunctionLabelAvg: '平均',
+  aggregationFunctionLabelMin: '最小',
+  aggregationFunctionLabelMax: '最大',
+  aggregationFunctionLabelSize: '大小'
 };
 export const zhCN = getGridLocalization(zhCNGrid, zhCNCore);

package/modern/locales/zhTW.js

@@ -21,7 +21,7 @@ const zhTWGrid = {
   toolbarFiltersTooltipShow: '顯示篩選器',
   toolbarFiltersTooltipActive: count => `${count} 個篩選器`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: '搜尋...',
+  toolbarQuickFilterPlaceholder: '搜尋…',
   toolbarQuickFilterLabel: '搜尋',
   toolbarQuickFilterDeleteIconLabel: '清除',
   // Export selector toolbar button text

package/modern/utils/keyboardUtils.js

@@ -10,13 +10,18 @@ export const isHomeOrEndKeys = key => key === 'Home' || key === 'End';
 export const isPageKeys = key => key.indexOf('Page') === 0;
 export const isDeleteKeys = key => key === 'Delete' || key === 'Backspace'; // Non printable keys have a name, e.g. "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+// We need to ignore shortcuts, for example: select all:
+// - Windows: Ctrl+A, event.ctrlKey is true
+// - macOS: ⌘ Command+A, event.metaKey is true
 
-export const isPrintableKey = key => key.length === 1;
+export function isPrintableKey(event) {
+  return event.key.length === 1 && event.ctrlKey === false && event.metaKey === false;
+}
 export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
 export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
 export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
 export const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
-export const isCellEnterEditModeKeys = key => isEnterKey(key) || isDeleteKeys(key) || isPrintableKey(key);
+export const isCellEnterEditModeKeys = event => isEnterKey(event.key) || isDeleteKeys(event.key) || isPrintableKey(event);
 export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 export const isNavigationKey = key => isHomeOrEndKeys(key) || isArrowKeys(key) || isPageKeys(key) || isSpaceKey(key);

package/node/DataGrid/DataGrid.js

@@ -178,6 +178,12 @@ DataGridRaw.propTypes = {
    */
   disableExtendRowFullWidth: _propTypes.default.bool,
 
+  /**
+   * If `true`, modification to a cell will not be discarded if the mode is changed from "edit" to "view" while processing props.
+   * @default false
+   */
+  disableIgnoreModificationsIfProcessingProps: _propTypes.default.bool,
+
   /**
    * If `true`, the selection on click on a row or cell is disabled.
    * @default false
@@ -662,7 +668,7 @@ DataGridRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: _propTypes.default.func,
 

package/node/DataGrid/useDataGridProps.js

@@ -60,6 +60,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = {
   disableMultipleColumnsSorting: false,
   disableSelectionOnClick: false,
   disableVirtualization: false,
+  disableIgnoreModificationsIfProcessingProps: false,
   editMode: _models.GridEditModes.Cell,
   filterMode: _models.GridFeatureModeConstant.client,
   headerHeight: 56,

package/node/colDef/gridStringColDef.js

@@ -26,7 +26,7 @@ const GRID_STRING_COL_DEF = {
   groupable: true,
   pinnable: true,
   // @ts-ignore
-  private_aggregable: true,
+  aggregable: true,
   editable: false,
   sortComparator: _gridSortingUtils.gridStringOrNumberComparator,
   type: 'string',

package/node/components/GridRow.js

@@ -147,7 +147,11 @@ function GridRow(props) {
       // 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 rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId); // pinned rows are not part of the visible rows
+
+      if (rowIndex != null) {
+        apiRef.current.unstable_setLastMeasuredRowIndex(rowIndex);
+      }
     }
 
     const rootElement = ref.current;

package/node/components/base/GridOverlays.js

@@ -67,8 +67,8 @@ function GridOverlayWrapper(props) {
       position: 'absolute',
       top: headerHeight,
       bottom: height === 'auto' ? 0 : undefined,
-      zIndex: 3,
-      // should be above pinned columns and detail panel
+      zIndex: 4,
+      // should be above pinned columns, pinned rows and detail panel
       pointerEvents: 'none'
     }
   }, props));

package/node/components/cell/GridEditInputCell.js

@@ -5,8 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridEditInputCell = GridEditInputCell;
-exports.renderEditInputCell = void 0;
+exports.renderEditInputCell = exports.GridEditInputCell = void 0;
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
@@ -65,8 +64,7 @@ const GridEditInputCellRoot = (0, _styles.styled)(_InputBase.default, {
     height: '100%'
   }
 }));
-
-function GridEditInputCell(props) {
+const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _rootProps$experiment;
 
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -112,6 +110,7 @@ function GridEditInputCell(props) {
     }
   }, [hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridEditInputCellRoot, (0, _extends2.default)({
+    ref: ref,
     inputRef: inputRef,
     className: classes.root,
     fullWidth: true,
@@ -120,8 +119,8 @@ function GridEditInputCell(props) {
     onChange: handleChange,
     endAdornment: isProcessingProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GridLoadIcon, {}) : undefined
   }, other));
-}
-
+});
+exports.GridEditInputCell = GridEditInputCell;
 process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
@@ -132,23 +131,23 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * GridApi that let you manipulate the grid.
    * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
    */
-  api: _propTypes.default.any.isRequired,
+  api: _propTypes.default.any,
 
   /**
    * The mode of the cell.
    */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
+  cellMode: _propTypes.default.oneOf(['edit', 'view']),
 
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: _propTypes.default.object.isRequired,
+  colDef: _propTypes.default.object,
   debounceMs: _propTypes.default.number,
 
   /**
    * The column field of the cell that triggered the event.
    */
-  field: _propTypes.default.string.isRequired,
+  field: _propTypes.default.string,
 
   /**
    * The cell value formatted with the column valueFormatter.
@@ -162,17 +161,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
    * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
-  getValue: _propTypes.default.func.isRequired,
+  getValue: _propTypes.default.func,
 
   /**
    * If true, the cell is the active element.
    */
-  hasFocus: _propTypes.default.bool.isRequired,
+  hasFocus: _propTypes.default.bool,
 
   /**
    * The grid row id.
    */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
   /**
    * If true, the cell is editable.
@@ -192,17 +191,17 @@ process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.object.isRequired,
+  row: _propTypes.default.object,
 
   /**
    * The node of the row that the current cell belongs to.
    */
-  rowNode: _propTypes.default.object.isRequired,
+  rowNode: _propTypes.default.object,
 
   /**
    * the tabIndex value.
    */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
+  tabIndex: _propTypes.default.oneOf([-1, 0]),
 
   /**
    * The cell value, but if the column has valueGetter, use getValue.

package/node/components/cell/GridEditSingleSelectCell.js

@@ -32,7 +32,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "getValue", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen"];
 
 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); }
 
@@ -52,6 +52,7 @@ const renderSingleSelectOptions = (option, OptionComponent) => {
 function GridEditSingleSelectCell(props) {
   var _rootProps$components, _baseSelectProps$nati, _rootProps$components2;
 
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
     id,
     value,
@@ -61,14 +62,14 @@ function GridEditSingleSelectCell(props) {
     colDef,
     hasFocus,
     error,
-    onValueChange
+    onValueChange,
+    initialOpen = rootProps.editMode === _gridEditRowModel.GridEditModes.Cell
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const ref = React.useRef();
   const inputRef = React.useRef();
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
-  const [open, setOpen] = React.useState(rootProps.editMode === 'cell');
+  const [open, setOpen] = React.useState(initialOpen);
   const baseSelectProps = ((_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseSelect) || {};
   const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
   let valueOptionsFormatted;
@@ -243,6 +244,11 @@ process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
    */
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
 
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: _propTypes.default.bool,
+
   /**
    * If true, the cell is editable.
    */

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -108,6 +108,11 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
 
   const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+
+  if (rowNode.isPinned) {
+    return null;
+  }
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseCheckbox, (0, _extends2.default)({
     ref: handleRef,
     tabIndex: tabIndex,

package/node/components/containers/GridRoot.js

@@ -70,6 +70,7 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
   const densityValue = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityValueSelector);
   const rootContainerRef = React.useRef(null);
   const handleRef = (0, _utils.useForkRef)(rootContainerRef, ref);
+  const pinnedRowsCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
   const ownerState = {
     density: densityValue,
     classes: rootProps.classes,
@@ -97,7 +98,8 @@ const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
     className: (0, _clsx.default)(className, classes.root),
     role: "grid",
     "aria-colcount": visibleColumns.length,
-    "aria-rowcount": totalRowCount,
+    "aria-rowcount": totalRowCount + pinnedRowsCount + 1 // +1 for the header row
+    ,
     "aria-multiselectable": !rootProps.disableMultipleSelection,
     "aria-label": rootProps['aria-label'],
     "aria-labelledby": rootProps['aria-labelledby']

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -87,11 +87,20 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   }, [densityValue, rootProps]);
 
   const handleDensitySelectorOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
-  const handleDensitySelectorClose = () => setOpen(false);
+  const handleDensitySelectorClickAway = event => {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
 
   const handleDensityUpdate = newDensity => {
     apiRef.current.setDensity(newDensity);
@@ -104,7 +113,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     }
 
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {
-      handleDensitySelectorClose();
+      setOpen(false);
     }
   }; // Disable the button if the corresponding is disabled
 
@@ -137,7 +146,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleDensitySelectorClose,
+      onClickAway: handleDensitySelectorClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
         id: densityMenuId,

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -52,7 +52,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   const handleRef = (0, _utils.useForkRef)(ref, buttonRef);
 
   const handleMenuOpen = event => {
-    setOpen(true);
+    setOpen(prevOpen => !prevOpen);
     onClick == null ? void 0 : onClick(event);
   };
 
@@ -68,6 +68,17 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     }
   };
 
+  const handleMenuClickAway = event => {
+    var _buttonRef$current;
+
+    if (buttonRef.current === event.target || // if user clicked on the icon
+    (_buttonRef$current = buttonRef.current) != null && _buttonRef$current.contains(event.target)) {
+      return;
+    }
+
+    setOpen(false);
+  };
+
   if (children == null) {
     return null;
   }
@@ -89,7 +100,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridMenu.GridMenu, {
       open: open,
       target: buttonRef.current,
-      onClickAway: handleMenuClose,
+      onClickAway: handleMenuClickAway,
       position: "bottom-start",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, {
         id: menuId,

package/node/constants/envConstants.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GRID_EXPERIMENTAL_ENABLED = void 0;
-
-var _utils = require("../utils/utils");
-
-// A guide to feature toggling.
+// A guide to feature toggling (deprecated)
 //
 // The feature toggle is:
 // - independent from the NODE_ENV
@@ -24,13 +21,5 @@ var _utils = require("../utils/utils");
 //
 // Developers (users) are discouraged to enable the experimental feature by setting the GRID_EXPERIMENTAL_ENABLED env.
 // Instead, prefer exposing experimental APIs, for instance, a prop or a new `unstable_` module.
-let experimentalEnabled = false;
-
-if (typeof process !== 'undefined' && process.env.GRID_EXPERIMENTAL_ENABLED !== undefined && (0, _utils.localStorageAvailable)() && window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED')) {
-  experimentalEnabled = window.localStorage.getItem('GRID_EXPERIMENTAL_ENABLED') === 'true';
-} else if (typeof process !== 'undefined') {
-  experimentalEnabled = process.env.GRID_EXPERIMENTAL_ENABLED === 'true';
-}
-
-const GRID_EXPERIMENTAL_ENABLED = experimentalEnabled;
+const GRID_EXPERIMENTAL_ENABLED = false;
 exports.GRID_EXPERIMENTAL_ENABLED = GRID_EXPERIMENTAL_ENABLED;

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', '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', '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', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', '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', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', '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', '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', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', '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', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
 exports.gridClasses = gridClasses;

package/node/constants/localeTextConstants.js

@@ -25,7 +25,7 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipShow: 'Show filters',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text

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

@@ -25,6 +25,8 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
 var _gridRowsMetaSelector = require("../rows/gridRowsMetaSelector");
 
+var _gridRowsUtils = require("../rows/gridRowsUtils");
+
 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; }
@@ -68,6 +70,7 @@ function useGridDimensions(apiRef, props) {
 
     const rootElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null ? void 0 : _apiRef$current$rootE.current;
     const columnsTotalWidth = (0, _columns.gridColumnsTotalWidthSelector)(apiRef);
+    const pinnedRowsHeight = (0, _gridRowsUtils.calculatePinnedRowsHeight)(apiRef);
 
     if (!rootDimensionsRef.current) {
       return;
@@ -113,7 +116,10 @@ function useGridDimensions(apiRef, props) {
           width: Math.round(columnsTotalWidth),
           height: rowsMeta.currentPageTotalHeight
         },
-        container: viewportOuterSize,
+        container: {
+          width: viewportOuterSize.width,
+          height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
+        },
         scrollBarSize
       });
       hasScrollY = scrollInformation.hasScrollY;