@mui/x-data-grid 7.15.0 → 7.16.0

package/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/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/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/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/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/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/components/columnSelection/index.js

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

package/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/components/columnsManagement/index.js

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

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

package/components/containers/GridRootStyles.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { alpha, styled, darken, lighten, decomposeColor, recomposeColor } from '@mui/material/styles';
-import { gridClasses as c } from '../../constants/gridClasses';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions/gridDimensionsSelectors';
+import { gridClasses as c } from "../../constants/gridClasses.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
 function getBorderColor(theme) {
   if (theme.vars) {
     return theme.vars.palette.TableCell.border;
@@ -13,12 +13,6 @@ function getBorderColor(theme) {
   }
   return darken(alpha(theme.palette.divider, 1), 0.68);
 }
-const columnHeadersStyles = {
-  [`.${c.columnSeparator}, .${c['columnSeparator--resizing']}`]: {
-    visibility: 'visible',
-    width: 'auto'
-  }
-};
 const columnHeaderStyles = {
   [`& .${c.iconButtonContainer}`]: {
     visibility: 'visible',
@@ -29,6 +23,14 @@ const columnHeaderStyles = {
     visibility: 'visible'
   }
 };
+const columnSeparatorTargetSize = 10;
+const columnSeparatorOffset = -5;
+const focusOutlineWidth = 1;
+const separatorIconDragStyles = {
+  width: 3,
+  rx: 1.5,
+  x: 10.5
+};
 
 // Emotion thinks it knows better than us which selector we should use.
 // https://github.com/emotion-js/emotion/issues/1105#issuecomment-1722524968
@@ -261,23 +263,49 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.columnHeader}, & .${c.cell}`]: {
       WebkitTapHighlightColor: 'transparent',
-      lineHeight: null,
       padding: '0 10px',
       boxSizing: 'border-box'
     },
     [`& .${c.columnHeader}:focus-within, & .${c.cell}:focus-within`]: {
-      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : alpha(t.palette.primary.main, 0.5)} 1px`,
-      outlineWidth: 1,
-      outlineOffset: -1
+      outline: `solid ${t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / 0.5)` : alpha(t.palette.primary.main, 0.5)} ${focusOutlineWidth}px`,
+      outlineOffset: focusOutlineWidth * -1
     },
     [`& .${c.columnHeader}:focus, & .${c.cell}:focus`]: {
-      outline: `solid ${t.palette.primary.main} 1px`
+      outline: `solid ${t.palette.primary.main} ${focusOutlineWidth}px`,
+      outlineOffset: focusOutlineWidth * -1
+    },
+    // Hide the column separator when:
+    // - the column is focused and has an outline
+    // - the next column is focused and has an outline
+    // - the column has a left or right border
+    // - the next column is pinned right and has a left border
+    [`& .${c.columnHeader}:focus,
+      & .${c.columnHeader}:focus-within,
+      & .${c.columnHeader}:has(+ .${c.columnHeader}:focus),
+      & .${c.columnHeader}:has(+ .${c.columnHeader}:focus-within),
+      & .${c['columnHeader--withLeftBorder']},
+      & .${c['columnHeader--withRightBorder']},
+      & .${c.columnHeader}:has(+ .${c.filler} + .${c['columnHeader--withLeftBorder']}),
+      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}
+      `]: {
+      [`& .${c.columnSeparator}`]: {
+        opacity: 0
+      },
+      // Show resizable separators at all times on touch devices
+      '@media (hover: none)': {
+        [`& .${c['columnSeparator--resizable']}`]: {
+          opacity: 1
+        }
+      },
+      [`& .${c['columnSeparator--resizable']}:hover`]: {
+        opacity: 1
+      }
     },
     [`&.${c['root--noToolbar']} [aria-rowindex="1"] [aria-colindex="1"]`]: {
       borderTopLeftRadius: 'calc(var(--unstable_DataGrid-radius) - 1px)'
     },
     [`&.${c['root--noToolbar']} [aria-rowindex="1"] .${c['columnHeader--last']}`]: {
-      borderTopRightRadius: !dimensions.hasScrollY || dimensions.scrollbarSize === 0 ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
+      borderTopRightRadius: dimensions.hasScrollX && (!dimensions.hasScrollY || dimensions.scrollbarSize === 0) ? 'calc(var(--unstable_DataGrid-radius) - 1px)' : undefined
     },
     [`& .${c.columnHeaderCheckbox}, & .${c.cellCheckbox}`]: {
       padding: 0,
@@ -289,7 +317,7 @@ export const GridRootStyles = styled('div', {
       display: 'flex',
       alignItems: 'center'
     },
-    [`& .${c['columnHeader--last']}`]: {
+    [`& .${c['virtualScroller--hasScrollX']} .${c['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
     [`& .${c['columnHeader--sorted']} .${c.iconButtonContainer}, & .${c['columnHeader--filtered']} .${c.iconButtonContainer}`]: {
@@ -305,12 +333,11 @@ export const GridRootStyles = styled('div', {
     [`& .${c.columnHeaderTitleContainer}`]: {
       display: 'flex',
       alignItems: 'center',
+      gap: t.spacing(0.25),
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      // to anchor the aggregation label
-      position: 'relative'
+      overflow: 'hidden'
     },
     [`& .${c.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',
@@ -334,13 +361,12 @@ export const GridRootStyles = styled('div', {
     [`& .${c['columnHeader--alignRight']} .${c.columnHeaderDraggableContainer}, & .${c['columnHeader--alignRight']} .${c.columnHeaderTitleContainer}`]: {
       flexDirection: 'row-reverse'
     },
-    [`& .${c['columnHeader--alignCenter']} .${c.menuIcon}, & .${c['columnHeader--alignRight']} .${c.menuIcon}`]: {
-      marginRight: 'auto',
-      marginLeft: -6
+    [`& .${c['columnHeader--alignCenter']} .${c.menuIcon}`]: {
+      marginLeft: 'auto'
     },
-    [`& .${c['columnHeader--alignRight']} .${c.menuIcon}, & .${c['columnHeader--alignRight']} .${c.menuIcon}`]: {
+    [`& .${c['columnHeader--alignRight']} .${c.menuIcon}`]: {
       marginRight: 'auto',
-      marginLeft: -10
+      marginLeft: -5
     },
     [`& .${c['columnHeader--moving']}`]: {
       backgroundColor: (t.vars || t).palette.action.hover
@@ -352,59 +378,79 @@ export const GridRootStyles = styled('div', {
       background: 'var(--DataGrid-pinnedBackground)'
     },
     [`& .${c.columnSeparator}`]: {
-      visibility: 'hidden',
       position: 'absolute',
+      overflow: 'hidden',
       zIndex: 3,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
+      alignItems: 'center',
+      maxWidth: columnSeparatorTargetSize,
       color: borderColor
     },
     [`& .${c.columnHeaders}`]: {
       width: 'var(--DataGrid-rowWidth)'
     },
     '@media (hover: hover)': {
-      [`& .${c.columnHeaders}:hover`]: columnHeadersStyles,
       [`& .${c.columnHeader}:hover`]: columnHeaderStyles,
       [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortIcon}`]: {
         opacity: 0.5
       }
     },
     '@media (hover: none)': {
-      [`& .${c.columnHeaders}`]: columnHeadersStyles,
-      [`& .${c.columnHeader}`]: columnHeaderStyles
+      [`& .${c.columnHeader}`]: columnHeaderStyles,
+      [`& .${c.columnHeader}:focus,
+        & .${c.columnHeader}:focus-within,
+        & .${c.columnHeader}:has(+ .${c.columnHeader}:focus),
+        & .${c.columnHeader}:has(+ .${c.columnHeader}:focus-within)`]: {
+        [`.${c['columnSeparator--resizable']}`]: {
+          color: (t.vars || t).palette.primary.main
+        }
+      }
     },
     [`& .${c['columnSeparator--sideLeft']}`]: {
-      left: -12
+      left: columnSeparatorOffset
     },
     [`& .${c['columnSeparator--sideRight']}`]: {
-      right: -12
+      right: columnSeparatorOffset
+    },
+    [`& .${c['columnHeader--withRightBorder']} .${c['columnSeparator--sideLeft']}`]: {
+      left: columnSeparatorOffset - 0.5
+    },
+    [`& .${c['columnHeader--withRightBorder']} .${c['columnSeparator--sideRight']}`]: {
+      right: columnSeparatorOffset - 0.5
     },
     [`& .${c['columnSeparator--resizable']}`]: {
       cursor: 'col-resize',
       touchAction: 'none',
-      '&:hover': {
-        color: (t.vars || t).palette.text.primary,
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          color: borderColor
-        }
-      },
       [`&.${c['columnSeparator--resizing']}`]: {
-        color: (t.vars || t).palette.text.primary
+        color: (t.vars || t).palette.primary.main
+      },
+      // Always appear as draggable on touch devices
+      '@media (hover: none)': {
+        [`& .${c.iconSeparator} rect`]: separatorIconDragStyles
+      },
+      '@media (hover: hover)': {
+        '&:hover': {
+          color: (t.vars || t).palette.primary.main,
+          [`& .${c.iconSeparator} rect`]: separatorIconDragStyles
+        }
       },
       '& svg': {
         pointerEvents: 'none'
       }
     },
     [`& .${c.iconSeparator}`]: {
-      color: 'inherit'
+      color: 'inherit',
+      transition: t.transitions.create(['color', 'width'], {
+        duration: t.transitions.duration.shortest
+      })
     },
     [`& .${c.menuIcon}`]: {
       width: 0,
       visibility: 'hidden',
       fontSize: 20,
-      marginRight: -10,
+      marginRight: -5,
       display: 'flex',
       alignItems: 'center'
     },
@@ -415,7 +461,7 @@ export const GridRootStyles = styled('div', {
     [`& .${c.headerFilterRow}`]: {
       [`& .${c.columnHeader}`]: {
         boxSizing: 'border-box',
-        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+        borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       }
     },
     /* Bottom border of the top-container */
@@ -458,8 +504,7 @@ export const GridRootStyles = styled('div', {
     /* Cell styles */
     [`& .${c.cell}`]: {
       height: 'var(--height)',
-      minWidth: 'var(--width)',
-      maxWidth: 'var(--width)',
+      width: 'var(--width)',
       lineHeight: 'calc(var(--height) - 1px)',
       // -1px for the border
 
@@ -473,6 +518,11 @@ export const GridRootStyles = styled('div', {
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
       borderTopColor: 'transparent'
     },
+    [`& .${c['pinnedRows--top']} :first-of-type`]: {
+      [`& .${c.cell}, .${c.scrollbarFiller}`]: {
+        borderTop: 'none'
+      }
+    },
     [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
       userSelect: 'none'
     },
@@ -493,8 +543,8 @@ export const GridRootStyles = styled('div', {
       boxShadow: t.shadows[2],
       backgroundColor: (t.vars || t).palette.background.paper,
       '&:focus-within': {
-        outline: `solid ${(t.vars || t).palette.primary.main} 1px`,
-        outlineOffset: '-1px'
+        outline: `${focusOutlineWidth}px solid ${(t.vars || t).palette.primary.main}`,
+        outlineOffset: focusOutlineWidth * -1
       }
     },
     [`& .${c['row--editing']}`]: {
@@ -654,7 +704,10 @@ export const GridRootStyles = styled('div', {
       minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
       alignSelf: 'stretch',
       [`&.${c['scrollbarFiller--borderTop']}`]: {
-        borderTop: '1px solid var(--rowBorderColor)'
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+      },
+      [`&.${c['scrollbarFiller--borderBottom']}`]: {
+        borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
       },
       [`&.${c['scrollbarFiller--pinnedRight']}`]: {
         backgroundColor: 'var(--DataGrid-pinnedBackground)',
@@ -665,8 +718,8 @@ export const GridRootStyles = styled('div', {
     [`& .${c.filler}`]: {
       flex: 1
     },
-    [`& .${c['filler--borderTop']}`]: {
-      borderTop: '1px solid var(--DataGrid-rowBorderColor)'
+    [`& .${c['filler--borderBottom']}`]: {
+      borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
     /* Hide grid rows, row filler, and vertical scrollbar when skeleton overlay is visible */
     [`& .${c['main--hasSkeletonLoadingOverlay']}`]: {

package/components/containers/GridToolbarContainer.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-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/containers/index.js

@@ -1,4 +1,4 @@
-export * from './GridRoot';
-export * from './GridFooterContainer';
-export * from './GridOverlay';
-export * from './GridToolbarContainer';
+export * from "./GridRoot.js";
+export * from "./GridFooterContainer.js";
+export * from "./GridOverlay.js";
+export * from "./GridToolbarContainer.js";

package/components/index.js

@@ -1,19 +1,19 @@
-export * from './base';
-export * from './cell';
-export * from './containers';
-export * from './columnHeaders';
-export * from './columnSelection';
-export * from '../material/icons';
-export * from './menu';
-export * from './panel';
-export * from './columnsManagement';
-export * from './toolbar';
-export * from './GridApiContext';
-export * from './GridFooter';
-export * from './GridHeader';
-export * from './GridLoadingOverlay';
-export * from './GridNoRowsOverlay';
-export { GridPagination } from './GridPagination';
-export * from './GridRowCount';
-export * from './GridRow';
-export * from './GridSelectedRowCount';
+export * from "./base/index.js";
+export * from "./cell/index.js";
+export * from "./containers/index.js";
+export * from "./columnHeaders/index.js";
+export * from "./columnSelection/index.js";
+export * from "../material/icons/index.js";
+export * from "./menu/index.js";
+export * from "./panel/index.js";
+export * from "./columnsManagement/index.js";
+export * from "./toolbar/index.js";
+export * from "./GridApiContext.js";
+export * from "./GridFooter.js";
+export * from "./GridHeader.js";
+export * from "./GridLoadingOverlay.js";
+export * from "./GridNoRowsOverlay.js";
+export { GridPagination } from "./GridPagination.js";
+export * from "./GridRowCount.js";
+export * from "./GridRow.js";
+export * from "./GridSelectedRowCount.js";

package/components/menu/GridMenu.js

@@ -10,9 +10,9 @@ import Grow from '@mui/material/Grow';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass, gridClasses } 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/menu/columnMenu/GridColumnHeaderMenu.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEventCallback as useEventCallback, HTMLElementType } from '@mui/utils';
-import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
-import { GridMenu } from '../GridMenu';
+import { useGridApiContext } from "../../../hooks/utils/useGridApiContext.js";
+import { GridMenu } from "../GridMenu.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnHeaderMenu({
   columnMenuId,

package/components/menu/columnMenu/GridColumnMenu.js

@@ -3,11 +3,11 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["defaultSlots", "defaultSlotProps", "slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useGridColumnMenuSlots } from '../../../hooks/features/columnMenu/useGridColumnMenuSlots';
-import { GridColumnMenuContainer } from './GridColumnMenuContainer';
-import { GridColumnMenuColumnsItem } from './menuItems/GridColumnMenuColumnsItem';
-import { GridColumnMenuFilterItem } from './menuItems/GridColumnMenuFilterItem';
-import { GridColumnMenuSortItem } from './menuItems/GridColumnMenuSortItem';
+import { useGridColumnMenuSlots } from "../../../hooks/features/columnMenu/useGridColumnMenuSlots.js";
+import { GridColumnMenuContainer } from "./GridColumnMenuContainer.js";
+import { GridColumnMenuColumnsItem } from "./menuItems/GridColumnMenuColumnsItem.js";
+import { GridColumnMenuFilterItem } from "./menuItems/GridColumnMenuFilterItem.js";
+import { GridColumnMenuSortItem } from "./menuItems/GridColumnMenuSortItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_COLUMN_MENU_SLOTS = {
   columnMenuSortItem: GridColumnMenuSortItem,

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
-import { isHideMenuKey } from '../../../utils/keyboardUtils';
-import { gridClasses } from '../../../constants/gridClasses';
+import { isHideMenuKey } from "../../../utils/keyboardUtils.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(MenuList)(() => ({
   minWidth: 248