@mui/x-data-grid 7.15.0 → 7.17.0

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,47 @@ 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--withLeftBorder']},
+      & .${c['columnHeader--withRightBorder']},
+      & .${c['columnHeader--siblingFocused']},
+      & .${c['virtualScroller--hasScrollX']} .${c['columnHeader--lastUnpinned']},
+      & .${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 +315,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 +331,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 +359,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 +376,77 @@ 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--siblingFocused']}`]: {
+        [`.${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 +457,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 +500,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 +514,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 +539,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 +700,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 +714,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

package/components/menu/columnMenu/index.js

@@ -1,9 +1,9 @@
 // shared modules
-export * from './GridColumnHeaderMenu';
-export * from './GridColumnMenuProps';
-export * from './GridColumnMenuItemProps';
-export * from './GridColumnMenuContainer';
-export { GridGenericColumnMenu } from './GridColumnMenu';
+export * from "./GridColumnHeaderMenu.js";
+export * from "./GridColumnMenuProps.js";
+export * from "./GridColumnMenuItemProps.js";
+export * from "./GridColumnMenuContainer.js";
+export { GridGenericColumnMenu } from "./GridColumnMenu.js";
 
 // items
-export * from './menuItems';
+export * from "./menuItems/index.js";

package/components/menu/columnMenu/menuItems/GridColumnMenuColumnsItem.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridColumnMenuHideItem } from './GridColumnMenuHideItem';
-import { GridColumnMenuManageItem } from './GridColumnMenuManageItem';
+import { GridColumnMenuHideItem } from "./GridColumnMenuHideItem.js";
+import { GridColumnMenuManageItem } from "./GridColumnMenuManageItem.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuColumnsItem(props) {
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/components/menu/columnMenu/menuItems/GridColumnMenuFilterItem.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuFilterItem(props) {
   const {

package/components/menu/columnMenu/menuItems/GridColumnMenuHideItem.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
-import { gridVisibleColumnDefinitionsSelector } from '../../../../hooks/features/columns';
+import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
+import { gridVisibleColumnDefinitionsSelector } from "../../../../hooks/features/columns/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuHideItem(props) {
   const {

package/components/menu/columnMenu/menuItems/GridColumnMenuManageItem.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { GridPreferencePanelsValue } from '../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
+import { GridPreferencePanelsValue } from "../../../../hooks/features/preferencesPanel/gridPreferencePanelsValue.js";
+import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuManageItem(props) {
   const {

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { useGridSelector } from '../../../../hooks/utils/useGridSelector';
-import { gridSortModelSelector } from '../../../../hooks/features/sorting/gridSortingSelector';
-import { useGridApiContext } from '../../../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../../../hooks/utils/useGridRootProps';
+import { useGridSelector } from "../../../../hooks/utils/useGridSelector.js";
+import { gridSortModelSelector } from "../../../../hooks/features/sorting/gridSortingSelector.js";
+import { useGridApiContext } from "../../../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function GridColumnMenuSortItem(props) {
   const {

package/components/menu/columnMenu/menuItems/index.js

@@ -1,5 +1,5 @@
-export * from './GridColumnMenuColumnsItem';
-export * from './GridColumnMenuManageItem';
-export * from './GridColumnMenuFilterItem';
-export * from './GridColumnMenuHideItem';
-export * from './GridColumnMenuSortItem';
+export * from "./GridColumnMenuColumnsItem.js";
+export * from "./GridColumnMenuManageItem.js";
+export * from "./GridColumnMenuFilterItem.js";
+export * from "./GridColumnMenuHideItem.js";
+export * from "./GridColumnMenuSortItem.js";

package/components/menu/index.js

@@ -1,2 +1,2 @@
-export * from './columnMenu';
-export * from './GridMenu';
+export * from "./columnMenu/index.js";
+export * from "./GridMenu.js";

package/components/panel/GridColumnsPanel.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridPanelWrapper } from './GridPanelWrapper';
-import { GridColumnsManagement } from '../columnsManagement';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridPanelWrapper } from "./GridPanelWrapper.js";
+import { GridColumnsManagement } from "../columnsManagement/index.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function GridColumnsPanel(props) {
   const rootProps = useGridRootProps();

package/components/panel/GridPanel.js

@@ -9,8 +9,8 @@ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
 const GridPanelRoot = styled(Popper, {

package/components/panel/GridPanelContent.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/panel/GridPanelFooter.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/panel/GridPanelHeader.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/panel/GridPanelWrapper.js

@@ -7,8 +7,8 @@ import clsx from 'clsx';
 import FocusTrap from '@mui/material/Unstable_TrapFocus';
 import { styled } from '@mui/material/styles';
 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/panel/GridPreferencesPanel.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { gridColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
-import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnDefinitionsSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.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 { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridPreferencesPanel() {
   const apiRef = useGridApiContext();