@mui/x-data-grid 7.15.0 → 7.16.0

package/modern/components/cell/GridEditDateCell.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import InputBase from '@mui/material/InputBase';
 import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledInputBase = styled(InputBase)({
   fontSize: 'inherit'

package/modern/components/cell/GridEditInputCell.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import InputBase from '@mui/material/InputBase';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -5,11 +5,11 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridEditModes } from '../../models/gridEditRowModel';
-import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { GridCellEditStopReasons } from "../../models/params/gridEditCellParams.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { GridEditModes } from "../../models/gridEditRowModel.js";
+import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from "../panel/filterPanel/filterPanelUtils.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {

package/modern/components/cell/GridSkeletonCell.js

@@ -7,9 +7,9 @@ import clsx from 'clsx';
 import Skeleton from '@mui/material/Skeleton';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { createRandomNumberGenerator } from '../../utils/utils';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { createRandomNumberGenerator } from "../../utils/utils.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CIRCULAR_CONTENT_SIZE = '1.3em';
 const CONTENT_HEIGHT = '1.2em';

package/modern/components/cell/index.js

@@ -1,9 +1,9 @@
-export { GridCell } from './GridCell';
-export * from './GridBooleanCell';
-export * from './GridEditBooleanCell';
-export * from './GridEditDateCell';
-export * from './GridEditInputCell';
-export * from './GridEditSingleSelectCell';
-export * from './GridActionsCell';
-export * from './GridActionsCellItem';
-export * from './GridSkeletonCell';
+export { GridCell } from "./GridCell.js";
+export * from "./GridBooleanCell.js";
+export * from "./GridEditBooleanCell.js";
+export * from "./GridEditDateCell.js";
+export * from "./GridEditInputCell.js";
+export * from "./GridEditSingleSelectCell.js";
+export * from "./GridActionsCell.js";
+export * from "./GridActionsCellItem.js";
+export * from "./GridSkeletonCell.js";

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
-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 { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -54,7 +54,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         id: columnMenuButtonId
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
-          fontSize: "small"
+          fontSize: "inherit"
         })
       }))
     }))

package/modern/components/columnHeaders/GridBaseColumnHeaders.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/columnHeaders/GridColumnGroupHeader.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useId as useId, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
-import { isEventTargetInPortal } from '../../utils/domUtils';
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridColumnGroupsLookupSelector } from "../../hooks/features/columnGrouping/gridColumnGroupsSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { GridGenericColumnHeaderItem } from "./GridGenericColumnHeaderItem.js";
+import { isEventTargetInPortal } from "../../utils/domUtils.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -73,7 +73,7 @@ function GridColumnGroupHeader(props) {
     headerComponent = render(renderParams);
   }
   const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, props, {
     classes: rootProps.classes,
     showLeftBorder,

package/modern/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -3,13 +3,13 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
-import { useGridSelector } from '../../hooks';
-import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
-import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { useGridSelector } from "../../hooks/index.js";
+import { gridPreferencePanelStateSelector } from "../../hooks/features/preferencesPanel/gridPreferencePanelSelector.js";
+import { GridPreferencePanelsValue } from "../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { GridIconButtonContainer } from "./GridIconButtonContainer.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
-import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
-import { isEventTargetInPortal } from '../../utils/domUtils';
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { ColumnHeaderMenuIcon } from "./ColumnHeaderMenuIcon.js";
+import { GridColumnHeaderMenu } from "../menu/columnMenu/GridColumnHeaderMenu.js";
+import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { GridGenericColumnHeaderItem } from "./GridGenericColumnHeaderItem.js";
+import { isEventTargetInPortal } from "../../utils/domUtils.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -70,7 +70,7 @@ function GridColumnHeaderItem(props) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
   const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
+  const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showColumnVerticalBorder, gridHasFiller);
   const ownerState = _extends({}, props, {
     classes: rootProps.classes,
     showRightBorder,

package/modern/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -4,8 +4,8 @@ const _excluded = ["resizable", "resizing", "height", "side"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var GridColumnHeaderSeparatorSides = /*#__PURE__*/function (GridColumnHeaderSeparatorSides) {
   GridColumnHeaderSeparatorSides["Left"] = "left";
@@ -47,8 +47,7 @@ function GridColumnHeaderSeparatorRaw(props) {
     _jsx("div", _extends({
       className: classes.root,
       style: {
-        minHeight: height,
-        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
+        minHeight: height
       }
     }, other, {
       onClick: stopClick,

package/modern/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -5,10 +5,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import Badge from '@mui/material/Badge';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { GridIconButtonContainer } from "./GridIconButtonContainer.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/columnHeaders/GridColumnHeaderTitle.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 { isOverflown } from '../../utils/domUtils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { isOverflown } from "../../utils/domUtils.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -27,7 +27,8 @@ const GridColumnHeaderTitleRoot = styled('div', {
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  fontWeight: 'var(--unstable_DataGrid-headWeight)'
+  fontWeight: 'var(--unstable_DataGrid-headWeight)',
+  lineHeight: 'normal'
 });
 const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
   const {

package/modern/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -4,10 +4,10 @@ const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizin
 import * as React from 'react';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
-import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { GridColumnHeaderTitle } from "./GridColumnHeaderTitle.js";
+import { GridColumnHeaderSeparator } from "./GridColumnHeaderSeparator.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
   const {
@@ -58,9 +58,7 @@ const GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridG
     className: clsx(classes.root, headerClassName),
     style: _extends({}, style, {
       height,
-      width,
-      minWidth: width,
-      maxWidth: width
+      width
     }),
     role: "columnheader",
     tabIndex: tabIndex,

package/modern/components/columnHeaders/GridIconButtonContainer.js

@@ -5,8 +5,8 @@ import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/columnHeaders/index.js

@@ -1,5 +1,5 @@
-export * from './GridColumnHeaderItem';
-export * from './GridColumnHeaderSeparator';
-export * from './GridColumnHeaderSortIcon';
-export * from './GridColumnHeaderFilterIconButton';
-export * from './GridColumnHeaderTitle';
+export * from "./GridColumnHeaderItem.js";
+export * from "./GridColumnHeaderSeparator.js";
+export * from "./GridColumnHeaderSortIcon.js";
+export * from "./GridColumnHeaderFilterIconButton.js";
+export * from "./GridColumnHeaderTitle.js";

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -4,9 +4,9 @@ const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/columnSelection/GridHeaderCheckbox.js

@@ -4,15 +4,15 @@ const _excluded = ["field", "colDef"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { isMultipleRowSelectionEnabled } from '../../hooks/features/rowSelection/utils';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
-import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridExpandedSortedRowIdsSelector } from '../../hooks/features/filter/gridFilterSelector';
-import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../../hooks/features/pagination/gridPaginationSelector';
+import { isMultipleRowSelectionEnabled } from "../../hooks/features/rowSelection/utils.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridTabIndexColumnHeaderSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
+import { gridRowSelectionStateSelector } from "../../hooks/features/rowSelection/gridRowSelectionSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridExpandedSortedRowIdsSelector } from "../../hooks/features/filter/gridFilterSelector.js";
+import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../../hooks/features/pagination/gridPaginationSelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -93,10 +93,11 @@ const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderChec
     return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
   }, [apiRef, handleSelectionChange]);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
+  const checked = rootProps.indeterminateCheckboxAction === 'select' ? isChecked && !isIndeterminate : isChecked;
   return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
     ref: ref,
     indeterminate: isIndeterminate,
-    checked: isChecked,
+    checked: checked,
     onChange: handleChange,
     className: classes.root,
     inputProps: {

package/modern/components/columnSelection/index.js

@@ -1,2 +1,2 @@
-export * from './GridCellCheckboxRenderer';
-export * from './GridHeaderCheckbox';
+export * from "./GridCellCheckboxRenderer.js";
+export * from "./GridHeaderCheckbox.js";

package/modern/components/columnsManagement/GridColumnsManagement.js

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import { styled } from '@mui/material/styles';
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useLazyRef } from '../../hooks/utils/useLazyRef';
-import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from './utils';
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useLazyRef } from "../../hooks/utils/useLazyRef.js";
+import { checkColumnVisibilityModelsSame, defaultSearchPredicate } from "./utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/modern/components/columnsManagement/index.js

@@ -1 +1 @@
-export * from './GridColumnsManagement';
+export * from "./GridColumnsManagement.js";

package/modern/components/containers/GridFooterContainer.js

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

package/modern/components/containers/GridOverlay.js

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

package/modern/components/containers/GridRoot.js

@@ -5,12 +5,12 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
-import { GridRootStyles } from './GridRootStyles';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
+import { GridRootStyles } from "./GridRootStyles.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, density) => {
   const {