@mui/x-data-grid 7.12.1 → 7.13.0

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

@@ -23,6 +23,7 @@ export const filterStateInitializer = (state, props, apiRef) => {
     filter: {
       filterModel: sanitizeFilterModel(filterModel, props.disableMultipleColumnsFiltering, apiRef),
       filteredRowsLookup: {},
+      filteredChildrenCountLookup: {},
       filteredDescendantCountLookup: {}
     },
     visibleRowsLookup: {}
@@ -273,6 +274,7 @@ export const useGridFilter = (apiRef, props) => {
     if (props.filterMode !== 'client' || !params.isRowMatchingFilters) {
       return {
         filteredRowsLookup: {},
+        filteredChildrenCountLookup: {},
         filteredDescendantCountLookup: {}
       };
     }
@@ -301,6 +303,7 @@ export const useGridFilter = (apiRef, props) => {
     }
     return {
       filteredRowsLookup,
+      filteredChildrenCountLookup: {},
       filteredDescendantCountLookup: {}
     };
   }, [apiRef, props.filterMode, getRowId, getRowsRef]);

package/modern/hooks/features/rowSelection/useGridRowSelection.js

@@ -105,6 +105,9 @@ export const useGridRowSelection = (apiRef, props) => {
   }, [apiRef, logger, props.rowSelection, props.signature, canHaveMultipleSelection]);
   const isRowSelected = React.useCallback(id => gridRowSelectionStateSelector(apiRef.current.state).includes(id), [apiRef]);
   const isRowSelectable = React.useCallback(id => {
+    if (props.rowSelection === false) {
+      return false;
+    }
     if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
       return false;
     }
@@ -113,7 +116,7 @@ export const useGridRowSelection = (apiRef, props) => {
       return false;
     }
     return true;
-  }, [apiRef, propIsRowSelectable]);
+  }, [apiRef, props.rowSelection, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => selectedGridRowsSelector(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
     if (!apiRef.current.isRowSelectable(id)) {

package/modern/hooks/features/rows/useGridRowAriaAttributes.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { selectedIdsLookupSelector } from '../rowSelection';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
+import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
+export const useGridRowAriaAttributes = () => {
+  const apiRef = useGridPrivateApiContext();
+  const selectedIdsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  return React.useCallback((rowNode, index) => {
+    const ariaAttributes = {};
+    const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+    ariaAttributes['aria-rowindex'] = ariaRowIndex;
+    if (apiRef.current.isRowSelectable(rowNode.id)) {
+      ariaAttributes['aria-selected'] = selectedIdsLookup[rowNode.id] !== undefined;
+    }
+    return ariaAttributes;
+  }, [apiRef, selectedIdsLookup, headerGroupingMaxDepth]);
+};

package/modern/hooks/utils/useGridAriaAttributes.js

@@ -2,24 +2,21 @@ import { gridVisibleColumnDefinitionsSelector } from '../features/columns/gridCo
 import { useGridSelector } from './useGridSelector';
 import { useGridRootProps } from './useGridRootProps';
 import { gridColumnGroupsHeaderMaxDepthSelector } from '../features/columnGrouping/gridColumnGroupsSelector';
-import { gridPinnedRowsCountSelector, gridRowCountSelector } from '../features/rows/gridRowsSelector';
+import { gridPinnedRowsCountSelector } from '../features/rows/gridRowsSelector';
 import { useGridPrivateApiContext } from './useGridPrivateApiContext';
 import { isMultipleRowSelectionEnabled } from '../features/rowSelection/utils';
+import { gridExpandedRowCountSelector } from '../features/filter/gridFilterSelector';
 export const useGridAriaAttributes = () => {
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
-  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const accessibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
   const pinnedRowsCount = useGridSelector(apiRef, gridPinnedRowsCountSelector);
-  let role = 'grid';
-  if (rootProps.treeData) {
-    role = 'treegrid';
-  }
   return {
-    role,
+    role: 'grid',
     'aria-colcount': visibleColumns.length,
-    'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + totalRowCount,
+    'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + accessibleRowCount,
     'aria-multiselectable': isMultipleRowSelectionEnabled(rootProps)
   };
 };

package/modern/hooks/utils/useGridConfiguration.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { GridConfigurationContext } from '../../components/GridConfigurationContext';
+export const useGridConfiguration = () => {
+  const configuration = React.useContext(GridConfigurationContext);
+  if (configuration === undefined) {
+    throw new Error(['MUI X: Could not find the data grid configuration context.', 'It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component.', 'This can also happen if you are bundling multiple versions of the data grid.'].join('\n'));
+  }
+  return configuration;
+};

package/modern/hooks/utils/useGridSelector.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import { useLazyRef } from './useLazyRef';
 import { useOnMount } from './useOnMount';
 import { warnOnce } from '../../internals/utils/warning';
-import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare';
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.12.1
+ * @mui/x-data-grid v7.13.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internals/index.js

@@ -23,6 +23,7 @@ export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
 export { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
 export { passFilterLogic } from '../hooks/features/filter/gridFilterUtils';
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from '../hooks/features/filter/gridFilterSelector';
 export { isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
 export { useGridFocus, focusStateInitializer } from '../hooks/features/focus/useGridFocus';
 export { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
@@ -31,6 +32,8 @@ export { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hoo
 export { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
 export { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
 export { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
+export { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
+export { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 export { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
 export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
@@ -59,7 +62,6 @@ export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSel
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';
-export * from '../utils/fastMemo';
 export { exportAs } from '../utils/exportAs';
 export * from '../utils/getPublicApiRef';
 export * from '../utils/cellBorderUtils';

package/modern/locales/viVN.js

@@ -30,11 +30,10 @@ const viVNGrid = {
   toolbarExportPrint: 'In',
   toolbarExportExcel: 'Xuất Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Tìm kiếm',
+  columnsManagementNoColumns: 'Không có cột',
+  columnsManagementShowHideAllText: 'Hiện/Ẩn Tất cả',
+  columnsManagementReset: 'Đặt lại',
   // Filter panel text
   filterPanelAddFilter: 'Thêm bộ lọc',
   filterPanelRemoveAll: 'Xóa tất cả',

package/modern/models/configuration/gridConfiguration.js

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

package/modern/models/configuration/gridRowConfiguration.js

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

package/node/DataGrid/DataGrid.js

@@ -10,6 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _components = require("../components");
+var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
+var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _GridContextProvider = require("../context/GridContextProvider");
 var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
@@ -17,6 +19,12 @@ var _propValidation = require("../internals/utils/propValidation");
 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); }
 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 && {}.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 configuration = {
+  hooks: {
+    useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
+    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes
+  }
+};
 let propValidators;
 if (process.env.NODE_ENV !== 'production') {
   propValidators = [..._propValidation.propValidatorsDataGrid,
@@ -31,6 +39,7 @@ const DataGridRaw = /*#__PURE__*/React.forwardRef(function DataGrid(inProps, ref
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridContextProvider.GridContextProvider, {
     privateApiRef: privateApiRef,
+    configuration: configuration,
     props: props,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.GridRoot, (0, _extends2.default)({
       className: props.className,
@@ -329,7 +338,7 @@ DataGridRaw.propTypes = {
   /**
    * Determines if a row can be selected.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {boolean} A boolean indicating if the cell is selectable.
+   * @returns {boolean} A boolean indicating if the row is selectable.
    */
   isRowSelectable: _propTypes.default.func,
   /**

package/node/components/GridColumnHeaders.js

@@ -9,7 +9,7 @@ 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 _fastMemo = require("../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridColumnHeaders = require("../hooks/features/columnHeaders/useGridColumnHeaders");
 var _GridBaseColumnHeaders = require("./columnHeaders/GridBaseColumnHeaders");
 var _jsxRuntime = require("react/jsx-runtime");

package/node/{utils/fastMemo.js → components/GridConfigurationContext.js}

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fastMemo = fastMemo;
+exports.GridConfigurationContext = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _fastObjectShallowCompare = require("./fastObjectShallowCompare");
 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 && {}.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; }
-function fastMemo(component) {
-  return /*#__PURE__*/React.memo(component, _fastObjectShallowCompare.fastObjectShallowCompare);
+const GridConfigurationContext = exports.GridConfigurationContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  GridConfigurationContext.displayName = 'GridConfigurationContext';
 }

package/node/components/GridHeaders.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridHeaders = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _fastMemo = require("../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");

package/node/components/GridRow.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _fastMemo = require("../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _gridEditRowModel = require("../models/gridEditRowModel");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
@@ -26,11 +26,11 @@ var _gridActionsColDef = require("../colDef/gridActionsColDef");
 var _gridDetailPanelToggleField = require("../constants/gridDetailPanelToggleField");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
-var _gridColumnGroupsSelector = require("../hooks/features/columnGrouping/gridColumnGroupsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _GridCell = require("./cell/GridCell");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
+var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetTop", "offsetLeft", "dimensions", "renderContext", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
 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); }
@@ -77,12 +77,12 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const configuration = (0, _useGridConfiguration.useGridConfiguration)();
   const ref = React.useRef(null);
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
-  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const editRowsState = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridEditRowsStateSelector);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
@@ -94,11 +94,10 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
-  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
-
   const classes = (0, _composeGridClasses.composeGridClasses)(rootProps.classes, {
     root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isFirstVisible && 'row--firstVisible', isLastVisible && 'row--lastVisible', showBottomBorder && 'row--borderBottom', rowHeight === 'auto' && 'row--dynamicHeight']
   });
+  const getRowAriaAttributes = configuration.hooks.useGridRowAriaAttributes();
   React.useLayoutEffect(() => {
     if (currentPage.range) {
       // The index prop is relative to the rows from all pages. As example, the index prop of the
@@ -221,6 +220,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+  const ariaAttributes = rowNode ? getRowAriaAttributes(rowNode, index) : undefined;
   if (typeof rootProps.getRowClassName === 'function') {
     const indexRelativeToCurrentPage = index - (currentPage.range?.firstRowIndex || 0);
     const rowParams = (0, _extends2.default)({}, apiRef.current.getRowParams(rowId), {
@@ -317,10 +317,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     "data-rowindex": index,
     role: "row",
     className: (0, _clsx.default)(...rowClassNames, classes.root, className),
-    "aria-rowindex": ariaRowIndex,
-    "aria-selected": selected,
     style: style
-  }, eventHandlers, other, {
+  }, ariaAttributes, eventHandlers, other, {
     children: [leftCells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
       className: _gridClasses.gridClasses.cellOffsetLeft,

package/node/components/GridScrollArea.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _system = require("@mui/system");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _constants = require("../constants");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
@@ -20,7 +21,6 @@ var _densitySelector = require("../hooks/features/density/densitySelector");
 var _gridColumnsSelector = require("../hooks/features/columns/gridColumnsSelector");
 var _useTimeout = require("../hooks/utils/useTimeout");
 var _gridColumnsUtils = require("../hooks/features/columns/gridColumnsUtils");
-var _fastMemo = require("../utils/fastMemo");
 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); }
 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 && {}.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; }

package/node/components/GridSkeletonLoadingOverlay.js

@@ -128,7 +128,7 @@ const GridSkeletonLoadingOverlay = exports.GridSkeletonLoadingOverlay = /*#__PUR
         if (hasScrollbarFiller) {
           rowCells.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
             pinnedRight: pinnedColumns.right.length > 0
-          }));
+          }, `skeleton-scrollbar-filler-${i}`));
         }
       }
       array.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/node/components/cell/GridCell.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _fastMemo = require("../../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");

package/node/components/cell/GridSkeletonCell.js

@@ -9,10 +9,10 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _utils = require("@mui/utils");
-var _clsx = _interopRequireDefault(require("clsx"));
-var _fastMemo = require("../../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _utils2 = require("../../utils/utils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -10,7 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
-var _fastMemo = require("../../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");

package/node/components/containers/GridRootStyles.js

@@ -675,9 +675,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['filler--borderTop']}`]: {
       borderTop: '1px solid var(--DataGrid-rowBorderColor)'
     },
-    /* Hide grid rows and vertical scrollbar when skeleton overlay is visible */
+    /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
     [`& .${_gridClasses.gridClasses['main--hasSkeletonLoadingOverlay']}`]: {
-      [`& .${_gridClasses.gridClasses.virtualScrollerContent}, & .${_gridClasses.gridClasses['scrollbar--vertical']}, & .${_gridClasses.gridClasses.pinnedRows}`]: {
+      [`& .${_gridClasses.gridClasses.virtualScrollerContent}`]: {
+        // We use visibility hidden so that the virtual scroller content retains its height.
+        // Position fixed is used to remove the virtual scroller content from the flow.
+        // https://github.com/mui/mui-x/issues/14061
+        position: 'fixed',
+        visibility: 'hidden'
+      },
+      [`& .${_gridClasses.gridClasses['scrollbar--vertical']}, & .${_gridClasses.gridClasses.pinnedRows}, & .${_gridClasses.gridClasses.virtualScroller} > .${_gridClasses.gridClasses.filler}`]: {
         display: 'none'
       }
     }

package/node/components/virtualization/GridMainContainer.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridAriaAttributes = require("../../hooks/utils/useGridAriaAttributes");
+var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
 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); }
 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 && {}.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; }
@@ -28,8 +28,9 @@ const Element = (0, _system.styled)('div', {
   overflow: 'hidden'
 });
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const ariaAttributes = (0, _useGridAriaAttributes.useGridAriaAttributes)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const configuration = (0, _useGridConfiguration.useGridConfiguration)();
+  const ariaAttributes = configuration.hooks.useGridAriaAttributes();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, (0, _extends2.default)({
     ref: ref,
     ownerState: rootProps,

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridVirtualScrollerFiller = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
-var _fastMemo = require("../../utils/fastMemo");
+var _fastMemo = require("@mui/x-internals/fastMemo");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _dimensions = require("../../hooks/features/dimensions");

package/node/context/GridContextProvider.js

@@ -8,22 +8,27 @@ var React = _interopRequireWildcard(require("react"));
 var _GridApiContext = require("../components/GridApiContext");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _GridRootPropsContext = require("./GridRootPropsContext");
+var _GridConfigurationContext = require("../components/GridConfigurationContext");
 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); }
 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 && {}.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; }
 function GridContextProvider({
   privateApiRef,
+  configuration,
   props,
   children
 }) {
   const apiRef = React.useRef(privateApiRef.current.getPublicApi());
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootPropsContext.GridRootPropsContext.Provider, {
-    value: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useGridPrivateApiContext.GridPrivateApiContext.Provider, {
-      value: privateApiRef,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridApiContext.GridApiContext.Provider, {
-        value: apiRef,
-        children: children
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridConfigurationContext.GridConfigurationContext.Provider, {
+    value: configuration,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootPropsContext.GridRootPropsContext.Provider, {
+      value: props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_useGridPrivateApiContext.GridPrivateApiContext.Provider, {
+        value: privateApiRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridApiContext.GridApiContext.Provider, {
+          value: apiRef,
+          children: children
+        })
       })
     })
   });

package/node/hooks/core/useGridStateInitialization.js

@@ -57,9 +57,7 @@ const useGridStateInitialization = apiRef => {
     if (!ignoreSetState) {
       // We always assign it as we mutate rows for perf reason.
       apiRef.current.state = newState;
-      if (apiRef.current.publishEvent) {
-        apiRef.current.publishEvent('stateChange', newState);
-      }
+      apiRef.current.publishEvent('stateChange', newState);
       apiRef.current.store.update(newState);
     }
     if (updatedControlStateIds.length === 1) {

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

@@ -9,9 +9,9 @@ exports.useGridDimensions = useGridDimensions;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _throttle = require("@mui/x-internals/throttle");
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
-var _throttle = require("../../../utils/throttle");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _columns = require("../columns");
 var _gridDimensionsSelectors = require("./gridDimensionsSelectors");

package/node/hooks/features/export/serializers/csvSerializer.js

@@ -8,6 +8,9 @@ exports.serializeCellValue = void 0;
 var _colDef = require("../../../../colDef");
 var _warning = require("../../../../internals/utils/warning");
 function sanitizeCellValue(value, csvOptions) {
+  if (value === null || value === undefined) {
+    return '';
+  }
   const valueStr = typeof value === 'string' ? value : `${value}`;
   if (csvOptions.shouldAppendQuotes || csvOptions.escapeFormulas) {
     const escapedValue = valueStr.replace(/"/g, '""');
@@ -59,9 +62,7 @@ class CSVRow {
     if (!this.isEmpty) {
       this.rowString += this.options.csvOptions.delimiter;
     }
-    if (value === null || value === undefined) {
-      this.rowString += '';
-    } else if (typeof this.options.sanitizeCellValue === 'function') {
+    if (typeof this.options.sanitizeCellValue === 'function') {
       this.rowString += this.options.sanitizeCellValue(value, this.options.csvOptions);
     } else {
       this.rowString += value;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredRowCountSelector = exports.gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
+exports.gridVisibleRowsLookupSelector = exports.gridQuickFilterValuesSelector = exports.gridFilteredTopLevelRowCountSelector = exports.gridFilteredSortedTopLevelRowEntriesSelector = exports.gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowEntriesSelector = exports.gridFilteredRowsLookupSelector = exports.gridFilteredRowCountSelector = exports.gridFilteredDescendantRowCountSelector = exports.gridFilteredDescendantCountLookupSelector = exports.gridFilteredChildrenCountLookupSelector = exports.gridFilterModelSelector = exports.gridFilterActiveItemsSelector = exports.gridFilterActiveItemsLookupSelector = exports.gridExpandedSortedRowTreeLevelPositionLookupSelector = exports.gridExpandedSortedRowIdsSelector = exports.gridExpandedSortedRowEntriesSelector = exports.gridExpandedRowCountSelector = void 0;
 var _createSelector = require("../../../utils/createSelector");
 var _gridSortingSelector = require("../sorting/gridSortingSelector");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
@@ -38,6 +38,12 @@ const gridVisibleRowsLookupSelector = state => state.visibleRowsLookup;
 exports.gridVisibleRowsLookupSelector = gridVisibleRowsLookupSelector;
 const gridFilteredRowsLookupSelector = exports.gridFilteredRowsLookupSelector = (0, _createSelector.createSelector)(gridFilterStateSelector, filterState => filterState.filteredRowsLookup);
 
+/**
+ * @category Filtering
+ * @ignore - do not document.
+ */
+const gridFilteredChildrenCountLookupSelector = exports.gridFilteredChildrenCountLookupSelector = (0, _createSelector.createSelector)(gridFilterStateSelector, filterState => filterState.filteredChildrenCountLookup);
+
 /**
  * @category Filtering
  * @ignore - do not document.
@@ -72,6 +78,34 @@ const gridFilteredSortedRowEntriesSelector = exports.gridFilteredSortedRowEntrie
  */
 const gridFilteredSortedRowIdsSelector = exports.gridFilteredSortedRowIdsSelector = (0, _createSelector.createSelectorMemoized)(gridFilteredSortedRowEntriesSelector, filteredSortedRowEntries => filteredSortedRowEntries.map(row => row.id));
 
+/**
+ * Get the ids to position in the current tree level lookup of the rows accessible after the filtering process.
+ * Does not contain the collapsed children.
+ * @category Filtering
+ * @ignore - do not document.
+ */
+const gridExpandedSortedRowTreeLevelPositionLookupSelector = exports.gridExpandedSortedRowTreeLevelPositionLookupSelector = (0, _createSelector.createSelectorMemoized)(gridExpandedSortedRowIdsSelector, _gridRowsSelector.gridRowTreeSelector, (visibleSortedRowIds, rowTree) => {
+  const depthPositionCounter = {};
+  let lastDepth = 0;
+  return visibleSortedRowIds.reduce((acc, rowId) => {
+    const rowNode = rowTree[rowId];
+    if (!depthPositionCounter[rowNode.depth]) {
+      depthPositionCounter[rowNode.depth] = 0;
+    }
+
+    // going deeper in the tree should reset the counter
+    // since it might have been used in some other branch at the same level, up in the tree
+    // going back up should keep the counter and continue where it left off
+    if (rowNode.depth > lastDepth) {
+      depthPositionCounter[rowNode.depth] = 0;
+    }
+    lastDepth = rowNode.depth;
+    depthPositionCounter[rowNode.depth] += 1;
+    acc[rowId] = depthPositionCounter[rowNode.depth];
+    return acc;
+  }, {});
+});
+
 /**
  * Get the id and the model of the top level rows accessible after the filtering process.
  * @category Filtering