@mui/x-data-grid 7.15.0 → 7.16.0

package/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/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 {

package/components/GridScrollArea.js

@@ -4,16 +4,16 @@ import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass, gridClasses } from '../constants';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridApiEventHandler } from '../hooks/utils/useGridApiEventHandler';
-import { useGridSelector } from '../hooks/utils/useGridSelector';
-import { gridDimensionsSelector } from '../hooks/features/dimensions/gridDimensionsSelectors';
-import { gridDensityFactorSelector } from '../hooks/features/density/densitySelector';
-import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
-import { useTimeout } from '../hooks/utils/useTimeout';
-import { getTotalHeaderHeight } from '../hooks/features/columns/gridColumnsUtils';
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { getDataGridUtilityClass, gridClasses } from "../constants/index.js";
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridApiEventHandler } from "../hooks/utils/useGridApiEventHandler.js";
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { gridDimensionsSelector } from "../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { gridDensityFactorSelector } from "../hooks/features/density/densitySelector.js";
+import { gridColumnsTotalWidthSelector } from "../hooks/features/columns/gridColumnsSelector.js";
+import { useTimeout } from "../hooks/utils/useTimeout.js";
+import { getTotalHeaderHeight } from "../hooks/features/columns/gridColumnsUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CLIFF = 1;
 const SLOP = 1.5;

package/components/GridScrollbarFillerCell.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-declare function GridScrollbarFillerCell({ header, borderTop, pinnedRight, }: {
+declare function GridScrollbarFillerCell({ header, borderTop, borderBottom, pinnedRight, }: {
     header?: boolean;
     borderTop?: boolean;
+    borderBottom?: boolean;
     pinnedRight?: boolean;
 }): React.JSX.Element;
 export { GridScrollbarFillerCell };

package/components/GridScrollbarFillerCell.js

@@ -1,21 +1,23 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { gridClasses } from '../constants';
+import { gridClasses } from "../constants/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
   root: gridClasses.scrollbarFiller,
   header: gridClasses['scrollbarFiller--header'],
   borderTop: gridClasses['scrollbarFiller--borderTop'],
+  borderBottom: gridClasses['scrollbarFiller--borderBottom'],
   pinnedRight: gridClasses['scrollbarFiller--pinnedRight']
 };
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
+  borderBottom,
   pinnedRight
 }) {
   return /*#__PURE__*/_jsx("div", {
     role: "presentation",
-    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, pinnedRight && classes.pinnedRight)
+    className: clsx(classes.root, header && classes.header, borderTop && classes.borderTop, borderBottom && classes.borderBottom, pinnedRight && classes.pinnedRight)
   });
 }
 export { GridScrollbarFillerCell };

package/components/GridSelectedRowCount.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 { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/GridSkeletonLoadingOverlay.js

@@ -4,14 +4,14 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import useForkRef from '@mui/utils/useForkRef';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from '../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from '../hooks';
-import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
-import { getPinnedCellOffset } from '../internals/utils/getPinnedCellOffset';
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../utils/cellBorderUtils';
-import { escapeOperandAttributeSelector } from '../utils/domUtils';
-import { GridScrollbarFillerCell } from './GridScrollbarFillerCell';
+import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridColumnsTotalWidthSelector, gridDimensionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, useGridApiEventHandler, useGridSelector } from "../hooks/index.js";
+import { getDataGridUtilityClass, gridClasses } from "../constants/gridClasses.js";
+import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../utils/cellBorderUtils.js";
+import { escapeOperandAttributeSelector } from "../utils/domUtils.js";
+import { GridScrollbarFillerCell } from "./GridScrollbarFillerCell.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SkeletonOverlay = styled('div', {
   name: 'MuiDataGrid',
@@ -101,7 +101,7 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
         if (hasFillerBefore) {
           rowCells.push(emptyCell);
         }
-        rowCells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
+        rowCells.push(/*#__PURE__*/_jsx(slots.skeletonCell, {
           field: column.field,
           type: column.type,
           align: column.align,
@@ -117,12 +117,12 @@ const GridSkeletonLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridSk
           rowCells.push(emptyCell);
         }
         if (hasScrollbarFiller) {
-          rowCells.push( /*#__PURE__*/_jsx(GridScrollbarFillerCell, {
+          rowCells.push(/*#__PURE__*/_jsx(GridScrollbarFillerCell, {
             pinnedRight: pinnedColumns.right.length > 0
           }, `skeleton-scrollbar-filler-${i}`));
         }
       }
-      array.push( /*#__PURE__*/_jsx("div", {
+      array.push(/*#__PURE__*/_jsx("div", {
         className: clsx(gridClasses.row, gridClasses.rowSkeleton, i === 0 && gridClasses['row--firstVisible']),
         children: rowCells
       }, `skeleton-row-${i}`));

package/components/base/GridBody.js

@@ -1,2 +1,2 @@
-import { GridVirtualScroller } from '../virtualization/GridVirtualScroller';
+import { GridVirtualScroller } from "../virtualization/GridVirtualScroller.js";
 export { GridVirtualScroller as GridBody };

package/components/base/GridFooterPlaceholder.js

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

package/components/base/GridOverlays.js

@@ -4,13 +4,13 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridVisibleRows } from '../../hooks/utils/useGridVisibleRows';
-import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridVisibleRows } from "../../hooks/utils/useGridVisibleRows.js";
+import { getMinimalContentHeight } from "../../hooks/features/rows/gridRowsUtils.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridOverlayWrapperRoot = styled('div', {
   name: 'MuiDataGrid',

package/components/base/index.js

@@ -1,3 +1,3 @@
-export * from './GridBody';
-export * from './GridFooterPlaceholder';
-export * from './GridOverlays';
+export * from "./GridBody.js";
+export * from "./GridFooterPlaceholder.js";
+export * from "./GridOverlays.js";

package/components/cell/GridActionsCell.js

@@ -6,10 +6,10 @@ import PropTypes from 'prop-types';
 import MenuList from '@mui/material/MenuList';
 import { useRtl } from '@mui/system/RtlProvider';
 import { unstable_useId as useId } from '@mui/utils';
-import { gridClasses } from '../../constants/gridClasses';
-import { GridMenu } from '../menu/GridMenu';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { gridClasses } from "../../constants/gridClasses.js";
+import { GridMenu } from "../menu/GridMenu.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const hasActions = colDef => typeof colDef.getActions === 'function';
 function GridActionsCell(props) {

package/components/cell/GridActionsCellItem.js

@@ -6,7 +6,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = useGridRootProps();

package/components/cell/GridBooleanCell.js

@@ -4,10 +4,10 @@ const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowN
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { isAutogeneratedRowNode } from '../../hooks/features/rows/gridRowsUtils';
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { isAutogeneratedRowNode } from "../../hooks/features/rows/gridRowsUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/cell/GridCell.js

@@ -7,16 +7,16 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
-import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
-import { GridCellModes } from '../../models';
-import { useGridSelector, objectShallowCompare } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
-import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
-import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
-import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
+import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
+import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
+import { GridCellModes } from "../../models/index.js";
+import { useGridSelector, objectShallowCompare } from "../../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridFocusCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
+import { MissingRowIdError } from "../../hooks/features/rows/useGridParamsApi.js";
+import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from "../../utils/cellBorderUtils.js";
+import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export let PinnedPosition = /*#__PURE__*/function (PinnedPosition) {
   PinnedPosition[PinnedPosition["NONE"] = 0] = "NONE";
@@ -280,7 +280,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     children = valueString;
     title = valueString;
   }
-  if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
+  if (/*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
     children = /*#__PURE__*/React.cloneElement(children, {
       focusElementRef
     });

package/components/cell/GridEditBooleanCell.js

@@ -5,9 +5,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-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/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/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/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/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/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/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/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/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/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/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/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/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 {