@mui/x-data-grid 7.14.0 → 7.16.0

package/models/props/DataGridProps.d.ts

@@ -217,6 +217,14 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      * @default false
      */
     ignoreDiacritics: boolean;
+    /**
+     * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
+     * will select all the rows under it.
+     * If `deselect`, it will deselect all the rows under it.
+     * Works only if `checkboxSelection` is enabled.
+     * @default "deselect"
+     */
+    indeterminateCheckboxAction: 'select' | 'deselect';
     /**
      * If `true`, the selection model will retain selected rows that do not exist.
      * Useful when using server side pagination and row selections need to be retained
@@ -275,12 +283,12 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
      */
     rowSpacingType: 'margin' | 'border';
     /**
-     * If `true`, the vertical borders of the cells are displayed.
+     * If `true`, vertical borders will be displayed between cells.
      * @default false
      */
     showCellVerticalBorder: boolean;
     /**
-     * If `true`, the right border of the column headers are displayed.
+     * If `true`, vertical borders will be displayed between column header items.
      * @default false
      */
     showColumnVerticalBorder: boolean;

package/modern/DataGrid/DataGrid.js

@@ -3,13 +3,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
-import { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
-import { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
-import { GridContextProvider } from '../context/GridContextProvider';
-import { useDataGridComponent } from './useDataGridComponent';
-import { useDataGridProps } from './useDataGridProps';
-import { propValidatorsDataGrid, validateProps } from '../internals/utils/propValidation';
+import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from "../components/index.js";
+import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
+import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+import { GridContextProvider } from "../context/GridContextProvider.js";
+import { useDataGridComponent } from "./useDataGridComponent.js";
+import { useDataGridProps } from "./useDataGridProps.js";
+import { propValidatorsDataGrid, validateProps } from "../internals/utils/propValidation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const configuration = {
   hooks: {
@@ -315,6 +315,14 @@ DataGridRaw.propTypes = {
     clipboardExport: PropTypes.bool,
     csvExport: PropTypes.bool
   }), PropTypes.bool]),
+  /**
+   * If `select`, a group header checkbox in indeterminate state (like "Select All" checkbox)
+   * will select all the rows under it.
+   * If `deselect`, it will deselect all the rows under it.
+   * Works only if `checkboxSelection` is enabled.
+   * @default "deselect"
+   */
+  indeterminateCheckboxAction: PropTypes.oneOf(['deselect', 'select']),
   /**
    * The initial state of the DataGrid.
    * The data in it will be set in the state on initialization but will not be controlled.
@@ -696,12 +704,12 @@ DataGridRaw.propTypes = {
    */
   scrollbarSize: PropTypes.number,
   /**
-   * If `true`, the vertical borders of the cells are displayed.
+   * If `true`, vertical borders will be displayed between cells.
    * @default false
    */
   showCellVerticalBorder: PropTypes.bool,
   /**
-   * If `true`, the right border of the column headers are displayed.
+   * If `true`, vertical borders will be displayed between column header items.
    * @default false
    */
   showColumnVerticalBorder: PropTypes.bool,

package/modern/DataGrid/index.js

@@ -1,2 +1,2 @@
-export * from './DataGrid';
-export { DATA_GRID_PROPS_DEFAULT_VALUES } from './useDataGridProps';
+export * from "./DataGrid.js";
+export { DATA_GRID_PROPS_DEFAULT_VALUES } from "./useDataGridProps.js";

package/modern/DataGrid/useDataGridComponent.js

@@ -1,32 +1,32 @@
-import { useGridInitialization } from '../hooks/core/useGridInitialization';
-import { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
-import { useGridClipboard } from '../hooks/features/clipboard/useGridClipboard';
-import { columnMenuStateInitializer, useGridColumnMenu } from '../hooks/features/columnMenu/useGridColumnMenu';
-import { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
-import { densityStateInitializer, useGridDensity } from '../hooks/features/density/useGridDensity';
-import { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
-import { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';
-import { useGridFilter, filterStateInitializer } from '../hooks/features/filter/useGridFilter';
-import { focusStateInitializer, useGridFocus } from '../hooks/features/focus/useGridFocus';
-import { useGridKeyboardNavigation } from '../hooks/features/keyboardNavigation/useGridKeyboardNavigation';
-import { useGridPagination, paginationStateInitializer } from '../hooks/features/pagination/useGridPagination';
-import { useGridPreferencesPanel, preferencePanelStateInitializer } from '../hooks/features/preferencesPanel/useGridPreferencesPanel';
-import { useGridEditing, editingStateInitializer } from '../hooks/features/editing/useGridEditing';
-import { useGridRows, rowsStateInitializer } from '../hooks/features/rows/useGridRows';
-import { useGridRowsPreProcessors } from '../hooks/features/rows/useGridRowsPreProcessors';
-import { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-import { rowSelectionStateInitializer, useGridRowSelection } from '../hooks/features/rowSelection/useGridRowSelection';
-import { useGridRowSelectionPreProcessors } from '../hooks/features/rowSelection/useGridRowSelectionPreProcessors';
-import { useGridSorting, sortingStateInitializer } from '../hooks/features/sorting/useGridSorting';
-import { useGridScroll } from '../hooks/features/scroll/useGridScroll';
-import { useGridEvents } from '../hooks/features/events/useGridEvents';
-import { dimensionsStateInitializer, useGridDimensions } from '../hooks/features/dimensions/useGridDimensions';
-import { rowsMetaStateInitializer, useGridRowsMeta } from '../hooks/features/rows/useGridRowsMeta';
-import { useGridStatePersistence } from '../hooks/features/statePersistence/useGridStatePersistence';
-import { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
-import { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
-import { useGridVirtualization, virtualizationStateInitializer } from '../hooks/features/virtualization';
-import { columnResizeStateInitializer, useGridColumnResize } from '../hooks/features/columnResize/useGridColumnResize';
+import { useGridInitialization } from "../hooks/core/useGridInitialization.js";
+import { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
+import { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
+import { columnMenuStateInitializer, useGridColumnMenu } from "../hooks/features/columnMenu/useGridColumnMenu.js";
+import { useGridColumns, columnsStateInitializer } from "../hooks/features/columns/useGridColumns.js";
+import { densityStateInitializer, useGridDensity } from "../hooks/features/density/useGridDensity.js";
+import { useGridCsvExport } from "../hooks/features/export/useGridCsvExport.js";
+import { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.js";
+import { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
+import { focusStateInitializer, useGridFocus } from "../hooks/features/focus/useGridFocus.js";
+import { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.js";
+import { useGridPagination, paginationStateInitializer } from "../hooks/features/pagination/useGridPagination.js";
+import { useGridPreferencesPanel, preferencePanelStateInitializer } from "../hooks/features/preferencesPanel/useGridPreferencesPanel.js";
+import { useGridEditing, editingStateInitializer } from "../hooks/features/editing/useGridEditing.js";
+import { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGridRows.js";
+import { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
+import { useGridParamsApi } from "../hooks/features/rows/useGridParamsApi.js";
+import { rowSelectionStateInitializer, useGridRowSelection } from "../hooks/features/rowSelection/useGridRowSelection.js";
+import { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
+import { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
+import { useGridScroll } from "../hooks/features/scroll/useGridScroll.js";
+import { useGridEvents } from "../hooks/features/events/useGridEvents.js";
+import { dimensionsStateInitializer, useGridDimensions } from "../hooks/features/dimensions/useGridDimensions.js";
+import { rowsMetaStateInitializer, useGridRowsMeta } from "../hooks/features/rows/useGridRowsMeta.js";
+import { useGridStatePersistence } from "../hooks/features/statePersistence/useGridStatePersistence.js";
+import { useGridColumnSpanning } from "../hooks/features/columns/useGridColumnSpanning.js";
+import { useGridColumnGrouping, columnGroupsStateInitializer } from "../hooks/features/columnGrouping/useGridColumnGrouping.js";
+import { useGridVirtualization, virtualizationStateInitializer } from "../hooks/features/virtualization/index.js";
+import { columnResizeStateInitializer, useGridColumnResize } from "../hooks/features/columnResize/useGridColumnResize.js";
 export const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = useGridInitialization(inputApiRef, props);
 

package/modern/DataGrid/useDataGridProps.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { GRID_DEFAULT_LOCALE_TEXT } from '../constants';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from '../constants/defaultGridSlotsComponents';
-import { GridEditModes } from '../models';
-import { computeSlots, useProps } from '../internals/utils';
+import { GRID_DEFAULT_LOCALE_TEXT } from "../constants/index.js";
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS } from "../constants/defaultGridSlotsComponents.js";
+import { GridEditModes } from "../models/index.js";
+import { computeSlots, useProps } from "../internals/utils/index.js";
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -52,6 +52,8 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   hideFooterSelectedRowCount: false,
   ignoreDiacritics: false,
   ignoreValueFormatterDuringExport: false,
+  // TODO v8: Update to 'select'
+  indeterminateCheckboxAction: 'deselect',
   keepColumnPositionIfDraggedOutside: false,
   keepNonExistentRowsSelected: false,
   loading: false,

package/modern/colDef/gridActionsColDef.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderActionsCell } from '../components/cell/GridActionsCell';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderActionsCell } from "../components/cell/GridActionsCell.js";
 export const GRID_ACTIONS_COLUMN_TYPE = 'actions';
 export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortable: false,

package/modern/colDef/gridBooleanColDef.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderBooleanCell } from '../components/cell/GridBooleanCell';
-import { renderEditBooleanCell } from '../components/cell/GridEditBooleanCell';
-import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridBooleanOperators } from './gridBooleanOperators';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderBooleanCell } from "../components/cell/GridBooleanCell.js";
+import { renderEditBooleanCell } from "../components/cell/GridEditBooleanCell.js";
+import { gridNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridBooleanOperators } from "./gridBooleanOperators.js";
 const gridBooleanFormatter = (value, row, column, apiRef) => {
   return value ? apiRef.current.getLocaleText('booleanCellTrueLabel') : apiRef.current.getLocaleText('booleanCellFalseLabel');
 };

package/modern/colDef/gridBooleanOperators.js

@@ -1,4 +1,4 @@
-import { GridFilterInputBoolean } from '../components/panel/filterPanel/GridFilterInputBoolean';
+import { GridFilterInputBoolean } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
 export const getGridBooleanOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridCellCheckboxRenderer } from '../components/columnSelection/GridCellCheckboxRenderer';
-import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderCheckbox';
-import { selectedIdsLookupSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
-import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
+import { GridCellCheckboxRenderer } from "../components/columnSelection/GridCellCheckboxRenderer.js";
+import { GridHeaderCheckbox } from "../components/columnSelection/GridHeaderCheckbox.js";
+import { selectedIdsLookupSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {

package/modern/colDef/gridDateColDef.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridDateComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridDateOperators } from './gridDateOperators';
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderEditDateCell } from '../components/cell/GridEditDateCell';
+import { gridDateComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridDateOperators } from "./gridDateOperators.js";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderEditDateCell } from "../components/cell/GridEditDateCell.js";
 function throwIfNotDateObject({
   value,
   columnType,

package/modern/colDef/gridDateOperators.js

@@ -1,4 +1,4 @@
-import { GridFilterInputDate } from '../components/panel/filterPanel/GridFilterInputDate';
+import { GridFilterInputDate } from "../components/panel/filterPanel/GridFilterInputDate.js";
 function buildApplyFilterFn(filterItem, compareFn, showTime, keepHours) {
   if (!filterItem.value) {
     return null;

package/modern/colDef/gridDefaultColumnTypes.js

@@ -1,9 +1,9 @@
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { GRID_NUMERIC_COL_DEF } from './gridNumericColDef';
-import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from './gridDateColDef';
-import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
-import { GRID_SINGLE_SELECT_COL_DEF } from './gridSingleSelectColDef';
-import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from './gridActionsColDef';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { GRID_NUMERIC_COL_DEF } from "./gridNumericColDef.js";
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from "./gridDateColDef.js";
+import { GRID_BOOLEAN_COL_DEF } from "./gridBooleanColDef.js";
+import { GRID_SINGLE_SELECT_COL_DEF } from "./gridSingleSelectColDef.js";
+import { GRID_ACTIONS_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "./gridActionsColDef.js";
 export const DEFAULT_GRID_COL_TYPE_KEY = 'string';
 export const getGridDefaultColumnTypes = () => {
   const nativeColumnTypes = {

package/modern/colDef/gridNumericColDef.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { gridNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { isNumber } from '../utils/utils';
-import { getGridNumericOperators, getGridNumericQuickFilterFn } from './gridNumericOperators';
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
+import { gridNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { isNumber } from "../utils/utils.js";
+import { getGridNumericOperators, getGridNumericQuickFilterFn } from "./gridNumericOperators.js";
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
 export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'number',
   align: 'right',

package/modern/colDef/gridNumericOperators.js

@@ -1,5 +1,5 @@
-import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
-import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.js";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.js";
 const parseNumericValue = value => {
   if (value == null) {
     return null;

package/modern/colDef/gridSingleSelectColDef.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GRID_STRING_COL_DEF } from './gridStringColDef';
-import { renderEditSingleSelectCell } from '../components/cell/GridEditSingleSelectCell';
-import { getGridSingleSelectOperators } from './gridSingleSelectOperators';
-import { getValueOptions, isSingleSelectColDef } from '../components/panel/filterPanel/filterPanelUtils';
-import { isObject } from '../utils/utils';
+import { GRID_STRING_COL_DEF } from "./gridStringColDef.js";
+import { renderEditSingleSelectCell } from "../components/cell/GridEditSingleSelectCell.js";
+import { getGridSingleSelectOperators } from "./gridSingleSelectOperators.js";
+import { getValueOptions, isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
+import { isObject } from "../utils/utils.js";
 const isArrayOfObjects = options => {
   return typeof options[0] === 'object';
 };

package/modern/colDef/gridSingleSelectOperators.js

@@ -1,6 +1,6 @@
-import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
-import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
-import { isObject } from '../utils/utils';
+import { GridFilterInputSingleSelect } from "../components/panel/filterPanel/GridFilterInputSingleSelect.js";
+import { GridFilterInputMultipleSingleSelect } from "../components/panel/filterPanel/GridFilterInputMultipleSingleSelect.js";
+import { isObject } from "../utils/utils.js";
 const parseObjectValue = value => {
   if (value == null || !isObject(value)) {
     return value;

package/modern/colDef/gridStringColDef.js

@@ -1,6 +1,6 @@
-import { renderEditInputCell } from '../components/cell/GridEditInputCell';
-import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
-import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+import { renderEditInputCell } from "../components/cell/GridEditInputCell.js";
+import { gridStringOrNumberComparator } from "../hooks/features/sorting/gridSortingUtils.js";
+import { getGridStringOperators, getGridStringQuickFilterFn } from "./gridStringOperators.js";
 
 /**
  * TODO: Move pro and premium properties outside of this Community file

package/modern/colDef/gridStringOperators.js

@@ -1,7 +1,7 @@
-import { GridFilterInputValue } from '../components/panel/filterPanel/GridFilterInputValue';
-import { escapeRegExp } from '../utils/utils';
-import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/GridFilterInputMultipleValue';
-import { removeDiacritics } from '../hooks/features/filter/gridFilterUtils';
+import { GridFilterInputValue } from "../components/panel/filterPanel/GridFilterInputValue.js";
+import { escapeRegExp } from "../utils/utils.js";
+import { GridFilterInputMultipleValue } from "../components/panel/filterPanel/GridFilterInputMultipleValue.js";
+import { removeDiacritics } from "../hooks/features/filter/gridFilterUtils.js";
 export const getGridStringQuickFilterFn = value => {
   if (!value) {
     return null;

package/modern/colDef/index.js

@@ -1,13 +1,13 @@
-export * from './gridActionsColDef';
-export * from './gridBooleanColDef';
-export * from './gridCheckboxSelectionColDef';
-export * from './gridDateColDef';
-export * from './gridNumericColDef';
-export * from './gridSingleSelectColDef';
-export * from './gridStringColDef';
-export * from './gridBooleanOperators';
-export * from './gridDateOperators';
-export * from './gridNumericOperators';
-export * from './gridSingleSelectOperators';
-export * from './gridStringOperators';
-export * from './gridDefaultColumnTypes';
+export * from "./gridActionsColDef.js";
+export * from "./gridBooleanColDef.js";
+export * from "./gridCheckboxSelectionColDef.js";
+export * from "./gridDateColDef.js";
+export * from "./gridNumericColDef.js";
+export * from "./gridSingleSelectColDef.js";
+export * from "./gridStringColDef.js";
+export * from "./gridBooleanOperators.js";
+export * from "./gridDateOperators.js";
+export * from "./gridNumericOperators.js";
+export * from "./gridSingleSelectOperators.js";
+export * from "./gridStringOperators.js";
+export * from "./gridDefaultColumnTypes.js";

package/modern/components/GridColumnHeaders.js

@@ -4,8 +4,8 @@ const _excluded = ["className", "visibleColumns", "sortColumnLookup", "filterCol
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+import { GridBaseColumnHeaders } from "./columnHeaders/GridBaseColumnHeaders.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
   const {

package/modern/components/GridFooter.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
-import { selectedGridRowsCountSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
-import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridSelectedRowCount } from './GridSelectedRowCount';
-import { GridFooterContainer } from './containers/GridFooterContainer';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { gridTopLevelRowCountSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { selectedGridRowsCountSelector } from "../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { gridFilteredTopLevelRowCountSelector } from "../hooks/features/filter/gridFilterSelector.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridSelectedRowCount } from "./GridSelectedRowCount.js";
+import { GridFooterContainer } from "./containers/GridFooterContainer.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
   const apiRef = useGridApiContext();

package/modern/components/GridHeader.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { GridPreferencesPanel } from './panel/GridPreferencesPanel';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { GridPreferencesPanel } from "./panel/GridPreferencesPanel.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function GridHeader() {
   const rootProps = useGridRootProps();

package/modern/components/GridHeaders.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { gridFilterActiveItemsLookupSelector } from '../hooks/features/filter/gridFilterSelector';
-import { gridSortColumnLookupSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from '../hooks/features/focus/gridFocusStateSelector';
-import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { gridColumnMenuSelector } from '../hooks/features/columnMenu/columnMenuSelector';
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
+import { gridFilterActiveItemsLookupSelector } from "../hooks/features/filter/gridFilterSelector.js";
+import { gridSortColumnLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, gridTabIndexColumnGroupHeaderSelector, gridFocusColumnGroupHeaderSelector } from "../hooks/features/focus/gridFocusStateSelector.js";
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from "../hooks/features/columnGrouping/gridColumnGroupsSelector.js";
+import { gridColumnMenuSelector } from "../hooks/features/columnMenu/columnMenuSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridHeaders() {
   const apiRef = useGridPrivateApiContext();

package/modern/components/GridLoadingOverlay.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
-import { GridOverlay } from './containers/GridOverlay';
-import { GridSkeletonLoadingOverlay } from './GridSkeletonLoadingOverlay';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridRowCountSelector, useGridSelector } from '../hooks';
+import { GridOverlay } from "./containers/GridOverlay.js";
+import { GridSkeletonLoadingOverlay } from "./GridSkeletonLoadingOverlay.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridRowCountSelector, useGridSelector } from "../hooks/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const LOADING_VARIANTS = {
   'circular-progress': {

package/modern/components/GridNoResultsOverlay.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridOverlay } from './containers/GridOverlay';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
   const apiRef = useGridApiContext();

package/modern/components/GridNoRowsOverlay.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { GridOverlay } from './containers/GridOverlay';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridOverlay } from "./containers/GridOverlay.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
   const apiRef = useGridApiContext();

package/modern/components/GridPagination.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from "../hooks/features/pagination/gridPaginationSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme

package/modern/components/GridRow.js

@@ -6,25 +6,25 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { gridClasses } from '../constants/gridClasses';
-import { composeGridClasses } from '../utils/composeGridClasses';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridColumnPositionsSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
-import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
-import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
-import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
-import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
-import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
-import { PinnedPosition, gridPinnedColumnPositionLookup } from './cell/GridCell';
-import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
-import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
-import { useGridConfiguration } from '../hooks/utils/useGridConfiguration';
+import { GridEditModes, GridRowModes, GridCellModes } from "../models/gridEditRowModel.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { gridClasses } from "../constants/gridClasses.js";
+import { composeGridClasses } from "../utils/composeGridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { gridColumnPositionsSelector } from "../hooks/features/columns/gridColumnsSelector.js";
+import { useGridSelector, objectShallowCompare } from "../hooks/utils/useGridSelector.js";
+import { useGridVisibleRows } from "../hooks/utils/useGridVisibleRows.js";
+import { findParentElementFromClassName, isEventTargetInPortal } from "../utils/domUtils.js";
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../colDef/gridCheckboxSelectionColDef.js";
+import { GRID_ACTIONS_COLUMN_TYPE } from "../colDef/gridActionsColDef.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../constants/gridDetailPanelToggleField.js";
+import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
+import { gridRowMaximumTreeDepthSelector } from "../hooks/features/rows/gridRowsSelector.js";
+import { gridEditRowsStateSelector } from "../hooks/features/editing/gridEditingSelectors.js";
+import { PinnedPosition, gridPinnedColumnPositionLookup } from "./cell/GridCell.js";
+import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
+import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
+import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function EmptyCell({
   width

package/modern/components/GridRowCount.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../constants/gridClasses';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../constants/gridClasses.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {