@mui/x-data-grid 7.14.0 → 7.16.0

package/components/toolbar/GridToolbarDensitySelector.js

@@ -5,13 +5,13 @@ import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import { gridDensitySelector } from '../../hooks/features/density/densitySelector';
-import { isHideMenuKey } from '../../utils/keyboardUtils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { GridMenu } from '../menu/GridMenu';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
+import { gridDensitySelector } from "../../hooks/features/density/densitySelector.js";
+import { isHideMenuKey } from "../../utils/keyboardUtils.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { GridMenu } from "../menu/GridMenu.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridToolbarDensitySelector(props, ref) {
   const {

package/components/toolbar/GridToolbarExport.js

@@ -6,8 +6,8 @@ const _excluded = ["hideMenu", "options"],
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridToolbarExportContainer } from './GridToolbarExportContainer';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridToolbarExportContainer } from "./GridToolbarExportContainer.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridCsvExportMenuItem(props) {
   const apiRef = useGridApiContext();

package/components/toolbar/GridToolbarExportContainer.js

@@ -3,11 +3,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useId as useId, unstable_useForkRef as useForkRef } from '@mui/utils';
 import MenuList from '@mui/material/MenuList';
-import { isHideMenuKey } from '../../utils/keyboardUtils';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridMenu } from '../menu/GridMenu';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { gridClasses } from '../../constants/gridClasses';
+import { isHideMenuKey } from "../../utils/keyboardUtils.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { GridMenu } from "../menu/GridMenu.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridClasses } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridToolbarExportContainer(props, ref) {
   const {

package/components/toolbar/GridToolbarFilterButton.js

@@ -4,14 +4,14 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize, unstable_useId as useId } from '@mui/utils';
 import Badge from '@mui/material/Badge';
-import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridFilterActiveItemsSelector } from '../../hooks/features/filter/gridFilterSelector';
-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 { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridColumnLookupSelector } from "../../hooks/features/columns/gridColumnsSelector.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridFilterActiveItemsSelector } from "../../hooks/features/filter/gridFilterSelector.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 { getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/toolbar/GridToolbarQuickFilter.js

@@ -8,12 +8,12 @@ import TextField from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass } from '../../constants';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridQuickFilterValuesSelector } from '../../hooks/features/filter';
-import { isDeepEqual } from '../../utils/utils';
+import { getDataGridUtilityClass } from "../../constants/index.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridQuickFilterValuesSelector } from "../../hooks/features/filter/index.js";
+import { isDeepEqual } from "../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {

package/components/toolbar/index.js

@@ -1,7 +1,7 @@
-export * from './GridToolbar';
-export * from './GridToolbarColumnsButton';
-export * from './GridToolbarDensitySelector';
-export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from './GridToolbarExport';
-export * from './GridToolbarFilterButton';
-export * from './GridToolbarExportContainer';
-export * from './GridToolbarQuickFilter';
+export * from "./GridToolbar.js";
+export * from "./GridToolbarColumnsButton.js";
+export * from "./GridToolbarDensitySelector.js";
+export { GridCsvExportMenuItem, GridPrintExportMenuItem, GridToolbarExport } from "./GridToolbarExport.js";
+export * from "./GridToolbarFilterButton.js";
+export * from "./GridToolbarExportContainer.js";
+export * from "./GridToolbarQuickFilter.js";

package/components/virtualization/GridBottomContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {

package/components/virtualization/GridMainContainer.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridConfiguration } from '../../hooks/utils/useGridConfiguration';
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GridPanelAnchor = styled('div')({
   position: 'absolute',

package/components/virtualization/GridTopContainer.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from "../../constants/gridClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
   const slots = {

package/components/virtualization/GridVirtualScrollbar.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback } from '@mui/utils';
-import { useOnMount } from '../../hooks/utils/useOnMount';
-import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
-import { gridDimensionsSelector, useGridSelector } from '../../hooks';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useOnMount } from "../../hooks/utils/useOnMount.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
+import { gridDimensionsSelector, useGridSelector } from "../../hooks/index.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, position) => {
   const {

package/components/virtualization/GridVirtualScroller.js

@@ -2,23 +2,23 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { GridScrollArea } from '../GridScrollArea';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
-import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
-import { GridOverlays as Overlays } from '../base/GridOverlays';
-import { GridHeaders } from '../GridHeaders';
-import { GridMainContainer as Container } from './GridMainContainer';
-import { GridTopContainer as TopContainer } from './GridTopContainer';
-import { GridBottomContainer as BottomContainer } from './GridBottomContainer';
-import { GridVirtualScrollerContent as Content } from './GridVirtualScrollerContent';
-import { GridVirtualScrollerFiller as SpaceFiller } from './GridVirtualScrollerFiller';
-import { GridVirtualScrollerRenderZone as RenderZone } from './GridVirtualScrollerRenderZone';
-import { GridVirtualScrollbar as Scrollbar } from './GridVirtualScrollbar';
+import { GridScrollArea } from "../GridScrollArea.js";
+import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
+import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
+import { GridOverlays as Overlays } from "../base/GridOverlays.js";
+import { GridHeaders } from "../GridHeaders.js";
+import { GridMainContainer as Container } from "./GridMainContainer.js";
+import { GridTopContainer as TopContainer } from "./GridTopContainer.js";
+import { GridBottomContainer as BottomContainer } from "./GridBottomContainer.js";
+import { GridVirtualScrollerContent as Content } from "./GridVirtualScrollerContent.js";
+import { GridVirtualScrollerFiller as SpaceFiller } from "./GridVirtualScrollerFiller.js";
+import { GridVirtualScrollerRenderZone as RenderZone } from "./GridVirtualScrollerRenderZone.js";
+import { GridVirtualScrollbar as Scrollbar } from "./GridVirtualScrollbar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   const {
@@ -26,7 +26,7 @@ const useUtilityClasses = (ownerState, dimensions, loadingOverlayVariant) => {
   } = ownerState;
   const slots = {
     root: ['main', dimensions.rightPinnedWidth > 0 && 'main--hasPinnedRight', loadingOverlayVariant === 'skeleton' && 'main--hasSkeletonLoadingOverlay'],
-    scroller: ['virtualScroller']
+    scroller: ['virtualScroller', dimensions.hasScrollX && 'virtualScroller--hasScrollX']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };

package/components/virtualization/GridVirtualScrollerContent.js

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

package/components/virtualization/GridVirtualScrollerFiller.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { styled } from '@mui/system';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { gridDimensionsSelector } from '../../hooks/features/dimensions';
-import { gridClasses } from '../../constants';
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { gridDimensionsSelector } from "../../hooks/features/dimensions/index.js";
+import { gridClasses } from "../../constants/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div')({
   display: 'flex',

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -5,12 +5,12 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridRowsMetaSelector } from '../../hooks/features/rows';
-import { gridRenderContextSelector } from '../../hooks/features/virtualization';
-import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
+import { gridRowsMetaSelector } from "../../hooks/features/rows/index.js";
+import { gridRenderContextSelector } from "../../hooks/features/virtualization/index.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/constants/defaultGridSlotsComponents.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from '../components';
-import { GridCell } from '../components/cell/GridCell';
-import { GridColumnHeaders } from '../components/GridColumnHeaders';
-import { GridColumnMenu } from '../components/menu/columnMenu/GridColumnMenu';
-import { GridDetailPanels } from '../components/GridDetailPanels';
-import { GridPinnedRows } from '../components/GridPinnedRows';
-import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
-import materialSlots from '../material';
+import { GridSkeletonCell, GridColumnsPanel, GridFilterPanel, GridFooter, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridRow, GridColumnHeaderFilterIconButton, GridRowCount, GridColumnsManagement, GridColumnHeaderSortIcon } from "../components/index.js";
+import { GridCell } from "../components/cell/GridCell.js";
+import { GridColumnHeaders } from "../components/GridColumnHeaders.js";
+import { GridColumnMenu } from "../components/menu/columnMenu/GridColumnMenu.js";
+import { GridDetailPanels } from "../components/GridDetailPanels.js";
+import { GridPinnedRows } from "../components/GridPinnedRows.js";
+import { GridNoResultsOverlay } from "../components/GridNoResultsOverlay.js";
+import materialSlots from "../material/index.js";
 
 // TODO: camelCase these key. It's a private helper now.
 // Remove then need to call `uncapitalizeObjectKeys`.

package/constants/gridClasses.d.ts

@@ -292,10 +292,10 @@ export interface GridClasses {
      */
     filler: string;
     /**
-     * Styles applied to the filler row with top border.
+     * Styles applied to the filler row with bottom border.
      * @ignore - do not document.
      */
-    'filler--borderTop': string;
+    'filler--borderBottom': string;
     /**
      * Styles applied to the filler row pinned left section.
      * @ignore - do not document.
@@ -403,6 +403,11 @@ export interface GridClasses {
      * Styles applied to the virtualization container.
      */
     virtualScroller: string;
+    /**
+     * Styles applied to the virtualization container when it is scrollable in the horizontal direction.
+     * @ignore - do not document.
+     */
+    'virtualScroller--hasScrollX': string;
     /**
      * Styles applied to the virtualization content.
      */
@@ -541,6 +546,11 @@ export interface GridClasses {
      * Styles applied to the scrollbar filler cell, with a border top.
      */
     'scrollbarFiller--borderTop': string;
+    /**
+     * @ignore - do not document.
+     * Styles applied to the scrollbar filler cell, with a border bottom.
+     */
+    'scrollbarFiller--borderBottom': string;
     /**
      * @ignore - do not document.
      * Styles applied to the scrollbar filler cell.

package/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { unstable_generateUtilityClasses as generateUtilityClasses, unstable_gen
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hasSkeletonLoadingOverlay', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--borderBottom', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/constants/index.js

@@ -1,3 +1,3 @@
-export * from './envConstants';
-export * from './localeTextConstants';
-export * from './gridClasses';
+export * from "./envConstants.js";
+export * from "./localeTextConstants.js";
+export * from "./gridClasses.js";

package/context/GridContextProvider.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { GridApiContext } from '../components/GridApiContext';
-import { GridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext';
-import { GridRootPropsContext } from './GridRootPropsContext';
-import { GridConfigurationContext } from '../components/GridConfigurationContext';
+import { GridApiContext } from "../components/GridApiContext.js";
+import { GridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { GridRootPropsContext } from "./GridRootPropsContext.js";
+import { GridConfigurationContext } from "../components/GridConfigurationContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridContextProvider({
   privateApiRef,

package/context/index.js

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

package/hooks/core/gridCoreSelector.d.ts

@@ -3,4 +3,4 @@ import { GridStateCommunity } from '../../models/gridStateCommunity';
  * Get the theme state
  * @category Core
  */
-export declare const gridThemeSelector: (state: GridStateCommunity) => import("@mui/material").Theme;
+export declare const gridIsRtlSelector: (state: GridStateCommunity) => boolean;

package/hooks/core/gridCoreSelector.js

@@ -2,4 +2,4 @@
  * Get the theme state
  * @category Core
  */
-export const gridThemeSelector = state => state.theme;
+export const gridIsRtlSelector = state => state.isRtl;

package/hooks/core/pipeProcessing/index.js

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

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

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

package/hooks/core/pipeProcessing/useGridRegisterPipeApplier.js

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

package/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.js

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

package/hooks/core/strategyProcessing/index.js

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

package/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.js

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

package/hooks/core/strategyProcessing/useGridStrategyProcessing.js

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

package/hooks/core/useGridApiInitialization.js

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

package/hooks/core/useGridInitialization.js

@@ -1,11 +1,11 @@
-import { useGridRefs } from './useGridRefs';
-import { useGridTheme } from './useGridTheme';
-import { useGridLoggerFactory } from './useGridLoggerFactory';
-import { useGridApiInitialization } from './useGridApiInitialization';
-import { useGridLocaleText } from './useGridLocaleText';
-import { useGridPipeProcessing } from './pipeProcessing';
-import { useGridStrategyProcessing } from './strategyProcessing';
-import { useGridStateInitialization } from './useGridStateInitialization';
+import { useGridRefs } from "./useGridRefs.js";
+import { useGridIsRtl } from "./useGridIsRtl.js";
+import { useGridLoggerFactory } from "./useGridLoggerFactory.js";
+import { useGridApiInitialization } from "./useGridApiInitialization.js";
+import { useGridLocaleText } from "./useGridLocaleText.js";
+import { useGridPipeProcessing } from "./pipeProcessing/index.js";
+import { useGridStrategyProcessing } from "./strategyProcessing/index.js";
+import { useGridStateInitialization } from "./useGridStateInitialization.js";
 
 /**
  * Initialize the technical pieces of the DataGrid (logger, state, ...) that any DataGrid implementation needs
@@ -13,7 +13,7 @@ import { useGridStateInitialization } from './useGridStateInitialization';
 export const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = useGridApiInitialization(inputApiRef, props);
   useGridRefs(privateApiRef);
-  useGridTheme(privateApiRef);
+  useGridIsRtl(privateApiRef);
   useGridLoggerFactory(privateApiRef, props);
   useGridStateInitialization(privateApiRef);
   useGridPipeProcessing(privateApiRef);

package/hooks/core/{useGridTheme.d.ts → useGridIsRtl.d.ts}

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
-export declare const useGridTheme: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;
+export declare const useGridIsRtl: (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => void;

package/hooks/core/{useGridTheme.js → useGridIsRtl.js}

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-export const useGridTheme = apiRef => {
-  const theme = useTheme();
-  if (!apiRef.current.state.theme) {
-    apiRef.current.state.theme = theme;
+import { useRtl } from '@mui/system/RtlProvider';
+export const useGridIsRtl = apiRef => {
+  const isRtl = useRtl();
+  if (apiRef.current.state.isRtl === undefined) {
+    apiRef.current.state.isRtl = isRtl;
   }
   const isFirstEffect = React.useRef(true);
   React.useEffect(() => {
@@ -12,8 +12,8 @@ export const useGridTheme = apiRef => {
       isFirstEffect.current = false;
     } else {
       apiRef.current.setState(state => _extends({}, state, {
-        theme
+        isRtl
       }));
     }
-  }, [apiRef, theme]);
+  }, [apiRef, isRtl]);
 };

package/hooks/core/useGridLoggerFactory.js

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

package/hooks/core/useGridStateInitialization.js

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

package/hooks/features/clipboard/useGridClipboard.js

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

package/hooks/features/columnGrouping/gridColumnGroupsSelector.js

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

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

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

package/hooks/features/columnGrouping/index.js

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