@mui/x-data-grid 7.15.0 → 7.16.0

package/modern/hooks/core/pipeProcessing/index.js

@@ -1,4 +1,4 @@
-export * from './gridPipeProcessingApi';
-export * from './useGridPipeProcessing';
-export * from './useGridRegisterPipeProcessor';
-export * from './useGridRegisterPipeApplier';
+export * from "./gridPipeProcessingApi.js";
+export * from "./useGridPipeProcessing.js";
+export * from "./useGridRegisterPipeProcessor.js";
+export * from "./useGridRegisterPipeApplier.js";

package/modern/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 /**
  * Implement the Pipeline Pattern
  *

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFirstRender } from '../../utils/useFirstRender';
+import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeApplier = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/modern/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFirstRender } from '../../utils/useFirstRender';
+import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterPipeProcessor = (apiRef, group, callback) => {
   const cleanup = React.useRef();
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);

package/modern/hooks/core/strategyProcessing/index.js

@@ -1,3 +1,3 @@
-export * from './gridStrategyProcessingApi';
-export * from './useGridRegisterStrategyProcessor';
-export * from './useGridStrategyProcessing';
+export * from "./gridStrategyProcessingApi.js";
+export * from "./useGridRegisterStrategyProcessor.js";
+export * from "./useGridStrategyProcessing.js";

package/modern/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useFirstRender } from '../../utils/useFirstRender';
+import { useFirstRender } from "../../utils/useFirstRender.js";
 export const useGridRegisterStrategyProcessor = (apiRef, strategyName, group, processor) => {
   const registerPreProcessor = React.useCallback(() => {
     apiRef.current.registerStrategyProcessor(strategyName, group, processor);

package/modern/hooks/core/strategyProcessing/useGridStrategyProcessing.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _toPropertyKey from "@babel/runtime/helpers/esm/toPropertyKey";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 export const GRID_DEFAULT_STRATEGY = 'none';
 export const GRID_STRATEGIES_PROCESSORS = {
   rowTreeCreation: 'rowTree',

package/modern/hooks/core/useGridApiInitialization.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { EventManager } from '@mui/x-internals/EventManager';
-import { Store } from '../../utils/Store';
-import { useGridApiMethod } from '../utils/useGridApiMethod';
-import { GridSignature } from '../utils/useGridApiEventHandler';
+import { Store } from "../../utils/Store.js";
+import { useGridApiMethod } from "../utils/useGridApiMethod.js";
+import { GridSignature } from "../utils/useGridApiEventHandler.js";
 const SYMBOL_API_PRIVATE = Symbol('mui.api_private');
 const isSyntheticEvent = event => {
   return event.isPropagationStopped !== undefined;

package/modern/hooks/core/useGridInitialization.js

@@ -1,11 +1,11 @@
-import { useGridRefs } from './useGridRefs';
-import { useGridIsRtl } from './useGridIsRtl';
-import { useGridLoggerFactory } from './useGridLoggerFactory';
-import { useGridApiInitialization } from './useGridApiInitialization';
-import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPipeProcessing } from './pipeProcessing';
-import { useGridStrategyProcessing } from './strategyProcessing';
-import { useGridStateInitialization } from './useGridStateInitialization';
+import { useGridRefs } from "./useGridRefs.js";
+import { useGridIsRtl } from "./useGridIsRtl.js";
+import { useGridLoggerFactory } from "./useGridLoggerFactory.js";
+import { useGridApiInitialization } from "./useGridApiInitialization.js";
+import { useGridLocaleText } from "./useGridLocaleText.js";
+import { useGridPipeProcessing } from "./pipeProcessing/index.js";
+import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
+import { useGridStateInitialization } from "./useGridStateInitialization.js";
 
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs

package/modern/hooks/core/useGridLoggerFactory.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { localStorageAvailable } from '../../utils/utils';
-import { useGridApiMethod } from '../utils';
+import { localStorageAvailable } from "../../utils/utils.js";
+import { useGridApiMethod } from "../utils/index.js";
 const forceDebug = localStorageAvailable() && window.localStorage.getItem('DEBUG') != null;
 const noop = () => {};
 const noopLogger = {

package/modern/hooks/core/useGridStateInitialization.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../utils';
-import { isFunction } from '../../utils/utils';
+import { useGridApiMethod } from "../utils/index.js";
+import { isFunction } from "../../utils/utils.js";
 export const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();

package/modern/hooks/features/clipboard/useGridClipboard.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useGridApiOptionHandler, useGridNativeEventListener } from '../../utils';
-import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
-import { serializeCellValue } from '../export/serializers/csvSerializer';
+import { useGridApiOptionHandler, useGridNativeEventListener } from "../../utils/index.js";
+import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
+import { serializeCellValue } from "../export/serializers/csvSerializer.js";
 function writeToClipboardPolyfill(data) {
   const span = document.createElement('span');
   span.style.whiteSpace = 'pre';

package/modern/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -1,4 +1,4 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
 /**
  * @category ColumnGrouping
  * @ignore - do not document.

package/modern/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -1,5 +1,5 @@
-import { isLeaf } from '../../../models/gridColumnGrouping';
-import { isDeepEqual } from '../../../utils/utils';
+import { isLeaf } from "../../../models/gridColumnGrouping.js";
+import { isDeepEqual } from "../../../utils/utils.js";
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
   if (isLeaf(columnGroupNode)) {

package/modern/hooks/features/columnGrouping/index.js

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

package/modern/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["groupId", "children"];
 import * as React from 'react';
-import { isLeaf } from '../../../models/gridColumnGrouping';
-import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from './gridColumnGroupsSelector';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from './gridColumnGroupsUtils';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from '../columns';
+import { isLeaf } from "../../../models/gridColumnGrouping.js";
+import { gridColumnGroupsLookupSelector, gridColumnGroupsUnwrappedModelSelector } from "./gridColumnGroupsSelector.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { getColumnGroupsHeaderStructure, unwrapGroupingColumnModel } from "./gridColumnGroupsUtils.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { gridColumnFieldsSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 const createGroupLookup = columnGroupingModel => {
   let groupLookup = {};
   columnGroupingModel.forEach(node => {

package/modern/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -3,22 +3,21 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
-import { useGridSelector } from '../../utils';
-import { useGridRootProps } from '../../utils/useGridRootProps';
-import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
-import { gridDimensionsSelector } from '../dimensions';
-import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
-import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
-import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
-import { gridColumnGroupsUnwrappedModelSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
-import { getPinnedCellOffset } from '../../../internals/utils/getPinnedCellOffset';
-import { GridColumnHeaderSeparatorSides } from '../../../components/columnHeaders/GridColumnHeaderSeparator';
-import { gridClasses } from '../../../constants/gridClasses';
+import { useGridSelector } from "../../utils/index.js";
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
+import { gridDimensionsSelector } from "../dimensions/index.js";
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
+import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
+import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
+import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
+import { GridScrollbarFillerCell as ScrollbarFiller } from "../../../components/GridScrollbarFillerCell.js";
+import { getPinnedCellOffset } from "../../../internals/utils/getPinnedCellOffset.js";
+import { GridColumnHeaderSeparatorSides } from "../../../components/columnHeaders/GridColumnHeaderSeparator.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const GridColumnHeaderRow = styled('div', {
   name: 'MuiDataGrid',
@@ -53,7 +52,7 @@ export const useGridColumnHeaders = props => {
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const offsetLeft = computeOffsetLeft(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
@@ -87,7 +86,7 @@ export const useGridColumnHeaders = props => {
       // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
-    const firstColumnToRender = !hasVirtualization ? 0 : currentContext.firstColumnIndex;
+    const firstColumnToRender = currentContext.firstColumnIndex;
     const lastColumnToRender = !hasVirtualization ? maxLastColumn : currentContext.lastColumnIndex;
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
@@ -96,7 +95,7 @@ export const useGridColumnHeaders = props => {
       lastColumnToRender
     };
   };
-  const getFillers = (params, children, leftOverflow, borderTop = false) => {
+  const getFillers = (params, children, leftOverflow, borderBottom = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
     const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
@@ -109,11 +108,12 @@ export const useGridColumnHeaders = props => {
         }
       }), children, isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",
-        className: clsx(gridClasses.filler, borderTop && gridClasses['filler--borderTop'])
+        className: clsx(gridClasses.filler, borderBottom && gridClasses['filler--borderBottom'])
       }), hasScrollbarFiller && /*#__PURE__*/_jsx(ScrollbarFiller, {
         header: true,
-        borderTop: borderTop,
-        pinnedRight: isPinnedRight
+        pinnedRight: isPinnedRight,
+        borderBottom: borderBottom,
+        borderTop: false
       })]
     });
   };
@@ -157,7 +157,7 @@ export const useGridColumnHeaders = props => {
         columnIndex,
         computedWidth: colDef.computedWidth
       });
-      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
+      columns.push(/*#__PURE__*/_jsx(GridColumnHeaderItem, _extends({}, sortColumnLookup[colDef.field], {
         columnMenuOpen: open,
         filterItemsCounter: filterColumnLookup[colDef.field] && filterColumnLookup[colDef.field].length,
         headerHeight: dimensions.headerHeight,
@@ -182,7 +182,7 @@ export const useGridColumnHeaders = props => {
       role: "row",
       "aria-rowindex": headerGroupingMaxDepth + 1,
       ownerState: rootProps,
-      className: pinnedRows.top.length === 0 ? gridClasses['row--borderBottom'] : undefined,
+      className: gridClasses['row--borderBottom'],
       children: [leftRenderContext && getColumnHeaders({
         position: GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
@@ -239,7 +239,7 @@ export const useGridColumnHeaders = props => {
     const firstVisibleColumnIndex = visibleColumnGroupHeader[0].columnFields.indexOf(firstColumnFieldToRender);
     const hiddenGroupColumns = visibleColumnGroupHeader[0].columnFields.slice(0, firstVisibleColumnIndex);
     const leftOverflow = hiddenGroupColumns.reduce((acc, field) => {
-      const column = apiRef.current.getColumn(field);
+      const column = columnsLookup[field];
       return acc + (column.computedWidth ?? 0);
     }, 0);
     let columnIndex = firstColumnToRender;
@@ -251,7 +251,7 @@ export const useGridColumnHeaders = props => {
       const tabIndex = columnGroupHeaderTabIndexState !== null && columnGroupHeaderTabIndexState.depth === depth && columnFields.includes(columnGroupHeaderTabIndexState.field) ? 0 : -1;
       const headerInfo = {
         groupId,
-        width: columnFields.reduce((acc, field) => acc + apiRef.current.getColumn(field).computedWidth, 0),
+        width: columnFields.reduce((acc, field) => acc + columnsLookup[field].computedWidth, 0),
         fields: columnFields,
         colIndex: columnIndex,
         hasFocus,
@@ -295,7 +295,7 @@ export const useGridColumnHeaders = props => {
     }
     const headerRows = [];
     for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
-      headerRows.push( /*#__PURE__*/_jsxs(GridColumnHeaderRow, {
+      headerRows.push(/*#__PURE__*/_jsxs(GridColumnHeaderRow, {
         role: "row",
         "aria-rowindex": depth + 1,
         ownerState: rootProps,

package/modern/hooks/features/columnMenu/index.js

@@ -1,2 +1,2 @@
-export * from './columnMenuInterfaces';
-export * from './columnMenuSelector';
+export * from "./columnMenuInterfaces.js";
+export * from "./columnMenuSelector.js";

package/modern/hooks/features/columnMenu/useGridColumnMenu.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { gridColumnMenuSelector } from './columnMenuSelector';
-import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { useGridLogger, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { gridColumnMenuSelector } from "./columnMenuSelector.js";
+import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 export const columnMenuStateInitializer = state => _extends({}, state, {
   columnMenu: {
     open: false

package/modern/hooks/features/columnMenu/useGridColumnMenuSlots.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["displayOrder"];
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
-import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
+import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 const useGridColumnMenuSlots = props => {
   const apiRef = useGridPrivateApiContext();
   const {

package/modern/hooks/features/columnResize/columnResizeSelector.js

@@ -1,3 +1,3 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector } from "../../../utils/createSelector.js";
 export const gridColumnResizeSelector = state => state.columnResize;
 export const gridResizingColumnFieldSelector = createSelector(gridColumnResizeSelector, columnResize => columnResize.resizingColumnField);

package/modern/hooks/features/columnResize/index.js

@@ -1,3 +1,3 @@
-export * from './columnResizeSelector';
-export * from './columnResizeState';
-export * from './gridColumnResizeApi';
+export * from "./columnResizeSelector.js";
+export * from "./columnResizeState.js";
+export * from "./gridColumnResizeApi.js";

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -3,16 +3,16 @@ import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import { useRtl } from '@mui/system/RtlProvider';
-import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from '../../../utils/domUtils';
-import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from './gridColumnResizeApi';
-import { gridClasses } from '../../../constants/gridClasses';
-import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from '../../utils';
-import { gridVirtualizationColumnEnabledSelector } from '../virtualization';
-import { createControllablePromise } from '../../../utils/createControllablePromise';
-import { clamp } from '../../../utils/utils';
-import { useTimeout } from '../../utils/useTimeout';
-import { GridPinnedColumnPosition } from '../columns/gridColumnsInterfaces';
-import { gridColumnsStateSelector } from '../columns';
+import { findGridCellElementsFromCol, findGridElement, findLeftPinnedCellsAfterCol, findRightPinnedCellsBeforeCol, getFieldFromHeaderElem, findHeaderElementFromField, getFieldsFromGroupHeaderElem, findGroupHeaderElementsFromField, findGridHeader, findGridCells, findParentElementFromClassName, findLeftPinnedHeadersAfterCol, findRightPinnedHeadersBeforeCol, escapeOperandAttributeSelector } from "../../../utils/domUtils.js";
+import { DEFAULT_GRID_AUTOSIZE_OPTIONS } from "./gridColumnResizeApi.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
+import { useGridApiEventHandler, useGridApiMethod, useGridApiOptionHandler, useGridLogger, useGridNativeEventListener, useGridSelector, useOnMount } from "../../utils/index.js";
+import { gridVirtualizationColumnEnabledSelector } from "../virtualization/index.js";
+import { createControllablePromise } from "../../../utils/createControllablePromise.js";
+import { clamp } from "../../../utils/utils.js";
+import { useTimeout } from "../../utils/useTimeout.js";
+import { GridPinnedColumnPosition } from "../columns/gridColumnsInterfaces.js";
+import { gridColumnsStateSelector } from "../columns/index.js";
 function trackFinger(event, currentTouchId) {
   if (currentTouchId !== undefined && event.changedTouches) {
     for (let i = 0; i < event.changedTouches.length; i += 1) {
@@ -199,13 +199,9 @@ export const useGridColumnResize = (apiRef, props) => {
     refs.colDef.width = newWidth;
     refs.colDef.flex = 0;
     refs.columnHeaderElement.style.width = `${newWidth}px`;
-    refs.columnHeaderElement.style.minWidth = `${newWidth}px`;
-    refs.columnHeaderElement.style.maxWidth = `${newWidth}px`;
     const headerFilterElement = refs.headerFilterElement;
     if (headerFilterElement) {
       headerFilterElement.style.width = `${newWidth}px`;
-      headerFilterElement.style.minWidth = `${newWidth}px`;
-      headerFilterElement.style.maxWidth = `${newWidth}px`;
     }
     refs.groupHeaderElements.forEach(element => {
       const div = element;
@@ -218,8 +214,6 @@ export const useGridColumnResize = (apiRef, props) => {
         finalWidth = `${div.offsetWidth + widthDiff}px`;
       }
       div.style.width = finalWidth;
-      div.style.minWidth = finalWidth;
-      div.style.maxWidth = finalWidth;
     });
     refs.cellElements.forEach(element => {
       const div = element;
@@ -290,8 +284,6 @@ export const useGridColumnResize = (apiRef, props) => {
         }, 0);
         const finalWidth = `${newWidth}px`;
         div.style.width = finalWidth;
-        div.style.minWidth = finalWidth;
-        div.style.maxWidth = finalWidth;
       });
     }
     stopResizeEventTimeout.start(0, () => {

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -1,6 +1,6 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
-import { gridIsRtlSelector } from '../../core/gridCoreSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
+import { gridIsRtlSelector } from "../../core/gridCoreSelector.js";
 
 /**
  * Get the columns state

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from '../../../colDef';
-import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
-import { clamp } from '../../../utils/utils';
-import { gridDensityFactorSelector } from '../density/densitySelector';
-import { gridHeaderFilteringEnabledSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
+import { DEFAULT_GRID_COL_TYPE_KEY, GRID_STRING_COL_DEF, getGridDefaultColumnTypes } from "../../../colDef/index.js";
+import { gridColumnsStateSelector, gridColumnVisibilityModelSelector } from "./gridColumnsSelector.js";
+import { clamp } from "../../../utils/utils.js";
+import { gridDensityFactorSelector } from "../density/densitySelector.js";
+import { gridHeaderFilteringEnabledSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
 export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 const COLUMN_TYPES = getGridDefaultColumnTypes();
 

package/modern/hooks/features/columns/index.js

@@ -1,2 +1,2 @@
-export * from './gridColumnsSelector';
-export * from './gridColumnsInterfaces';
+export * from "./gridColumnsSelector.js";
+export * from "./gridColumnsInterfaces.js";

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)

package/modern/hooks/features/columns/useGridColumns.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from './gridColumnsSelector';
-import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from '../../core/pipeProcessing';
-import { EMPTY_PINNED_COLUMN_FIELDS } from './gridColumnsInterfaces';
-import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from './gridColumnsUtils';
-import { GridPreferencePanelsValue } from '../preferencesPanel';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnFieldsSelector, gridColumnDefinitionsSelector, gridColumnLookupSelector, gridColumnsStateSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from "./gridColumnsSelector.js";
+import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridRegisterPipeProcessor, useGridRegisterPipeApplier } from "../../core/pipeProcessing/index.js";
+import { EMPTY_PINNED_COLUMN_FIELDS } from "./gridColumnsInterfaces.js";
+import { hydrateColumnsWidth, createColumnsState, COLUMNS_DIMENSION_PROPERTIES } from "./gridColumnsUtils.js";
+import { GridPreferencePanelsValue } from "../preferencesPanel/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const columnsStateInitializer = (state, props, apiRef) => {
   const columnsState = createColumnsState({

package/modern/hooks/features/density/densitySelector.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector } from "../../../utils/createSelector.js";
 export const COMPACT_DENSITY_FACTOR = 0.7;
 export const COMFORTABLE_DENSITY_FACTOR = 1.3;
 const DENSITY_FACTORS = {

package/modern/hooks/features/density/index.js

@@ -1,2 +1,2 @@
-export * from './densityState';
-export * from './densitySelector';
+export * from "./densityState.js";
+export * from "./densitySelector.js";

package/modern/hooks/features/density/useGridDensity.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useEventCallback from '@mui/utils/useEventCallback';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridDensitySelector } from './densitySelector';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { gridDensitySelector } from "./densitySelector.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
 export const densityStateInitializer = (state, props) => _extends({}, state, {
   density: props.initialState?.density ?? props.density ?? 'standard'
 });

package/modern/hooks/features/dimensions/index.js

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

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

@@ -2,18 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { throttle } from '@mui/x-internals/throttle';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
-import { gridDimensionsSelector } from './gridDimensionsSelectors';
-import { gridDensityFactorSelector } from '../density';
-import { gridRenderContextSelector } from '../virtualization';
-import { useGridSelector } from '../../utils';
-import { getVisibleRows } from '../../utils/useGridVisibleRows';
-import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
-import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
+import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnsTotalWidthSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
+import { gridDimensionsSelector } from "./gridDimensionsSelectors.js";
+import { gridDensityFactorSelector } from "../density/index.js";
+import { gridRenderContextSelector } from "../virtualization/index.js";
+import { useGridSelector } from "../../utils/index.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
+import { calculatePinnedRowsHeight } from "../rows/gridRowsUtils.js";
+import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 const EMPTY_SIZE = {
   width: 0,
   height: 0

package/modern/hooks/features/editing/index.js

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

package/modern/hooks/features/editing/useGridCellEditing.js

@@ -5,15 +5,15 @@ const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 import * as React from 'react';
 import { unstable_useEventCallback as useEventCallback, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
-import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isPrintableKey, isPasteShortcut } from '../../../utils/keyboardUtils';
-import { warnOnce } from '../../../internals/utils/warning';
-import { gridRowsDataRowIdToIdLookupSelector } from '../rows/gridRowsSelector';
-import { deepClone } from '../../../utils/utils';
-import { GridCellEditStartReasons, GridCellEditStopReasons } from '../../../models/params/gridEditCellParams';
+import { useGridApiEventHandler, useGridApiOptionHandler } from "../../utils/useGridApiEventHandler.js";
+import { GridEditModes, GridCellModes } from "../../../models/gridEditRowModel.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
+import { isPrintableKey, isPasteShortcut } from "../../../utils/keyboardUtils.js";
+import { warnOnce } from "../../../internals/utils/warning.js";
+import { gridRowsDataRowIdToIdLookupSelector } from "../rows/gridRowsSelector.js";
+import { deepClone } from "../../../utils/utils.js";
+import { GridCellEditStartReasons, GridCellEditStopReasons } from "../../../models/params/gridEditCellParams.js";
 export const useGridCellEditing = (apiRef, props) => {
   const [cellModesModel, setCellModesModel] = React.useState({});
   const cellModesModelRef = React.useRef(cellModesModel);

package/modern/hooks/features/editing/useGridEditing.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridCellEditing } from './useGridCellEditing';
-import { GridCellModes, GridEditModes } from '../../../models/gridEditRowModel';
-import { useGridRowEditing } from './useGridRowEditing';
-import { gridEditRowsStateSelector } from './gridEditingSelectors';
-import { isAutogeneratedRowNode } from '../rows/gridRowsUtils';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridCellEditing } from "./useGridCellEditing.js";
+import { GridCellModes, GridEditModes } from "../../../models/gridEditRowModel.js";
+import { useGridRowEditing } from "./useGridRowEditing.js";
+import { gridEditRowsStateSelector } from "./gridEditingSelectors.js";
+import { isAutogeneratedRowNode } from "../rows/gridRowsUtils.js";
 export const editingStateInitializer = state => _extends({}, state, {
   editRows: {}
 });