@mui/x-data-grid 7.14.0 → 7.16.0

package/hooks/features/export/useGridPrintExport.js

@@ -1,19 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridExpandedRowCountSelector } from '../filter/gridFilterSelector';
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridClasses } from '../../../constants/gridClasses';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
-import { GRID_ID_AUTOGENERATED } from '../rows/gridRowsUtils';
-import { defaultGetRowsToExport, getColumnsToExport } from './utils';
-import { getDerivedPaginationModel } from '../pagination/useGridPaginationModel';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { GridPrintExportMenuItem } from '../../../components/toolbar/GridToolbarExport';
-import { getTotalHeaderHeight } from '../columns/gridColumnsUtils';
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridExpandedRowCountSelector } from "../filter/gridFilterSelector.js";
+import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from "../columns/gridColumnsSelector.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
+import { GRID_ID_AUTOGENERATED } from "../rows/gridRowsUtils.js";
+import { defaultGetRowsToExport, getColumnsToExport } from "./utils.js";
+import { getDerivedPaginationModel } from "../pagination/useGridPaginationModel.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { GridPrintExportMenuItem } from "../../../components/toolbar/GridToolbarExport.js";
+import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function raf() {
   return new Promise(resolve => {

package/hooks/features/export/utils.js

@@ -1,6 +1,6 @@
-import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
-import { gridFilteredSortedRowIdsSelector } from '../filter';
-import { gridPinnedRowsSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from "../columns/index.js";
+import { gridFilteredSortedRowIdsSelector } from "../filter/index.js";
+import { gridPinnedRowsSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 export const getColumnsToExport = ({
   apiRef,
   options

package/hooks/features/filter/gridFilterSelector.js

@@ -1,7 +1,7 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { gridSortedRowEntriesSelector } from '../sorting/gridSortingSelector';
-import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
-import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridSortedRowEntriesSelector } from "../sorting/gridSortingSelector.js";
+import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 
 /**
  * @category Filtering

package/hooks/features/filter/gridFilterState.js

@@ -1,4 +1,4 @@
-import { GridLogicOperator } from '../../../models/gridFilterItem';
+import { GridLogicOperator } from "../../../models/gridFilterItem.js";
 export const getDefaultGridFilterModel = () => ({
   items: [],
   logicOperator: GridLogicOperator.And,

package/hooks/features/filter/gridFilterUtils.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GridLogicOperator } from '../../../models';
-import { getDefaultGridFilterModel } from './gridFilterState';
-import { warnOnce } from '../../../internals/utils/warning';
-import { getPublicApiRef } from '../../../utils/getPublicApiRef';
-import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from '../columns';
+import { GridLogicOperator } from "../../../models/index.js";
+import { getDefaultGridFilterModel } from "./gridFilterState.js";
+import { warnOnce } from "../../../internals/utils/warning.js";
+import { getPublicApiRef } from "../../../utils/getPublicApiRef.js";
+import { gridColumnFieldsSelector, gridColumnLookupSelector, gridVisibleColumnFieldsSelector } from "../columns/index.js";
 let hasEval;
 function getHasEval() {
   if (hasEval !== undefined) {

package/hooks/features/filter/index.js

@@ -1,2 +1,2 @@
-export { getDefaultGridFilterModel } from './gridFilterState';
-export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from './gridFilterSelector';
+export { getDefaultGridFilterModel } from "./gridFilterState.js";
+export { gridFilterModelSelector, gridQuickFilterValuesSelector, gridVisibleRowsLookupSelector, gridFilteredRowsLookupSelector, gridFilteredDescendantCountLookupSelector, gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedRowEntriesSelector, gridFilteredSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector, gridExpandedRowCountSelector, gridFilteredTopLevelRowCountSelector, gridFilteredRowCountSelector, gridFilteredDescendantRowCountSelector, gridFilterActiveItemsSelector, gridFilterActiveItemsLookupSelector } from "./gridFilterSelector.js";

package/hooks/features/filter/useGridFilter.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { defaultMemoize } from 'reselect';
+import { lruMemoize } from 'reselect';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
-import { useLazyRef } from '../../utils/useLazyRef';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
-import { GridPreferencePanelsValue } from '../preferencesPanel/gridPreferencePanelsValue';
-import { getDefaultGridFilterModel } from './gridFilterState';
-import { gridFilterModelSelector } from './gridFilterSelector';
-import { useFirstRender } from '../../utils/useFirstRender';
-import { gridRowsLookupSelector } from '../rows';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns } from './gridFilterUtils';
-import { isDeepEqual } from '../../../utils/utils';
+import { useLazyRef } from "../../utils/useLazyRef.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridColumnLookupSelector } from "../columns/gridColumnsSelector.js";
+import { GridPreferencePanelsValue } from "../preferencesPanel/gridPreferencePanelsValue.js";
+import { getDefaultGridFilterModel } from "./gridFilterState.js";
+import { gridFilterModelSelector } from "./gridFilterSelector.js";
+import { useFirstRender } from "../../utils/useFirstRender.js";
+import { gridRowsLookupSelector } from "../rows/index.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from "../../core/strategyProcessing/index.js";
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic, shouldQuickFilterExcludeHiddenColumns } from "./gridFilterUtils.js";
+import { isDeepEqual } from "../../../utils/utils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
   const filterModel = props.filterModel ?? props.initialState?.filter?.filterModel ?? getDefaultGridFilterModel();
@@ -40,7 +40,7 @@ function getVisibleRowsLookupState(apiRef, state) {
   });
 }
 function createMemoizedValues() {
-  return defaultMemoize(Object.values);
+  return lruMemoize(Object.values);
 }
 
 /**

package/hooks/features/focus/gridFocusStateSelector.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector } from "../../../utils/createSelector.js";
 export const gridFocusStateSelector = state => state.focus;
 export const gridFocusCellSelector = createSelector(gridFocusStateSelector, focusState => focusState.cell);
 export const gridFocusColumnHeaderSelector = createSelector(gridFocusStateSelector, focusState => focusState.columnHeader);

package/hooks/features/focus/index.js

@@ -1,2 +1,2 @@
-export * from './gridFocusStateSelector';
-export * from './gridFocusState';
+export * from "./gridFocusStateSelector.js";
+export * from "./gridFocusState.js";

package/hooks/features/focus/useGridFocus.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_ownerDocument as ownerDocument, unstable_useEventCallback as useEventcallback } from '@mui/utils';
-import { gridClasses } from '../../../constants/gridClasses';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { gridFocusCellSelector, gridFocusColumnGroupHeaderSelector } from './gridFocusStateSelector';
-import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
-import { getVisibleRows } from '../../utils/useGridVisibleRows';
-import { clamp } from '../../../utils/utils';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
+import { gridClasses } from "../../../constants/gridClasses.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { isNavigationKey } from "../../../utils/keyboardUtils.js";
+import { gridFocusCellSelector, gridFocusColumnGroupHeaderSelector } from "./gridFocusStateSelector.js";
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { clamp } from "../../../utils/utils.js";
+import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
 export const focusStateInitializer = state => _extends({}, state, {
   focus: {
     cell: null,

package/hooks/features/headerFiltering/gridHeaderFilteringSelectors.js

@@ -1,4 +1,4 @@
-import { createSelector } from '../../../utils/createSelector';
+import { createSelector } from "../../../utils/createSelector.js";
 export const gridHeaderFilteringStateSelector = state => state.headerFiltering;
 export const gridHeaderFilteringEnabledSelector = createSelector(gridHeaderFilteringStateSelector,
 // No initialization in MIT, so we need to default to false to be used by `getTotalHeaderHeight`

package/hooks/features/headerFiltering/index.js

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

package/hooks/features/headerFiltering/useGridHeaderFiltering.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils';
-import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from '../columns/gridColumnsSelector';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/index.js";
+import { gridColumnLookupSelector, gridColumnVisibilityModelSelector, gridColumnFieldsSelector } from "../columns/gridColumnsSelector.js";
 export const headerFilteringStateInitializer = (state, props) => _extends({}, state, {
   headerFiltering: {
     enabled: props.headerFilters ?? false,

package/hooks/features/index.js

@@ -1,18 +1,18 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
-export * from './columnMenu';
-export * from './columns';
-export * from './columnGrouping';
-export * from './columnResize';
-export * from './density';
-export * from './editing';
-export * from './filter';
-export * from './focus';
-export * from './pagination';
-export * from './preferencesPanel';
-export * from './rows';
-export * from './rowSelection';
-export * from './sorting';
-export * from './dimensions';
-export * from './statePersistence';
-export * from './headerFiltering';
-export * from './virtualization';
+export * from "./columnMenu/index.js";
+export * from "./columns/index.js";
+export * from "./columnGrouping/index.js";
+export * from "./columnResize/index.js";
+export * from "./density/index.js";
+export * from "./editing/index.js";
+export * from "./filter/index.js";
+export * from "./focus/index.js";
+export * from "./pagination/index.js";
+export * from "./preferencesPanel/index.js";
+export * from "./rows/index.js";
+export * from "./rowSelection/index.js";
+export * from "./sorting/index.js";
+export * from "./dimensions/index.js";
+export * from "./statePersistence/index.js";
+export * from "./headerFiltering/index.js";
+export * from "./virtualization/index.js";

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,21 +1,21 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
-import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { gridExpandedSortedRowEntriesSelector } from '../filter/gridFilterSelector';
-import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
-import { gridClasses } from '../../../constants/gridClasses';
-import { GridCellModes } from '../../../models/gridEditRowModel';
-import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
-import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
-import { gridFocusColumnGroupHeaderSelector } from '../focus';
-import { gridColumnGroupsHeaderMaxDepthSelector } from '../columnGrouping/gridColumnGroupsSelector';
-import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from '../headerFiltering/gridHeaderFilteringSelectors';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { isEventTargetInPortal } from '../../../utils/domUtils';
+import { useRtl } from '@mui/system/RtlProvider';
+import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { gridExpandedSortedRowEntriesSelector } from "../filter/gridFilterSelector.js";
+import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSelectionColDef.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
+import { GridCellModes } from "../../../models/gridEditRowModel.js";
+import { isNavigationKey } from "../../../utils/keyboardUtils.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
+import { gridPinnedRowsSelector } from "../rows/gridRowsSelector.js";
+import { gridFocusColumnGroupHeaderSelector } from "../focus/index.js";
+import { gridColumnGroupsHeaderMaxDepthSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
+import { gridHeaderFilteringEditFieldSelector, gridHeaderFilteringMenuSelector } from "../headerFiltering/gridHeaderFilteringSelectors.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { isEventTargetInPortal } from "../../../utils/domUtils.js";
 function enrichPageRowsWithPinnedRows(apiRef, rows) {
   const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
   return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
@@ -24,13 +24,13 @@ const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
-  direction
+  isRtl
 }) => {
-  if (direction === 'rtl') {
+  if (isRtl) {
     if (currentColIndex < lastColIndex) {
       return currentColIndex + 1;
     }
-  } else if (direction === 'ltr') {
+  } else if (!isRtl) {
     if (currentColIndex > firstColIndex) {
       return currentColIndex - 1;
     }
@@ -41,13 +41,13 @@ const getRightColumnIndex = ({
   currentColIndex,
   firstColIndex,
   lastColIndex,
-  direction
+  isRtl
 }) => {
-  if (direction === 'rtl') {
+  if (isRtl) {
     if (currentColIndex > firstColIndex) {
       return currentColIndex - 1;
     }
-  } else if (direction === 'ltr') {
+  } else if (!isRtl) {
     if (currentColIndex < lastColIndex) {
       return currentColIndex + 1;
     }
@@ -67,7 +67,7 @@ const getRightColumnIndex = ({
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
   const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
-  const theme = useTheme();
+  const isRtl = useRtl();
   const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
@@ -161,7 +161,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (rightColIndex !== null) {
             goToHeader(rightColIndex, event);
@@ -174,7 +174,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (leftColIndex !== null) {
             goToHeader(leftColIndex, event);
@@ -225,7 +225,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, theme.direction, goToHeader, goToGroupHeader]);
+  }, [apiRef, currentPageRows.length, headerFilteringEnabled, goToHeaderFilter, goToCell, getRowIdFromIndex, isRtl, goToHeader, goToGroupHeader]);
   const handleHeaderFilterKeyDown = React.useCallback((params, event) => {
     const isEditing = gridHeaderFilteringEditFieldSelector(apiRef) === params.field;
     const isHeaderMenuOpen = gridHeaderFilteringMenuSelector(apiRef) === params.field;
@@ -254,7 +254,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (rightColIndex !== null) {
             goToHeaderFilter(rightColIndex, event);
@@ -267,7 +267,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction: theme.direction
+            isRtl
           });
           if (leftColIndex !== null) {
             goToHeaderFilter(leftColIndex, event);
@@ -311,7 +311,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows.length, goToHeaderFilter, theme.direction, goToHeader, goToCell, getRowIdFromIndex]);
+  }, [apiRef, currentPageRows.length, goToHeaderFilter, isRtl, goToHeader, goToCell, getRowIdFromIndex]);
   const handleColumnGroupHeaderKeyDown = React.useCallback((params, event) => {
     const focusedColumnGroup = gridFocusColumnGroupHeaderSelector(apiRef);
     if (focusedColumnGroup === null) {
@@ -419,7 +419,6 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (currentPageRows.length === 0) {
       return;
     }
-    const direction = theme.direction;
     const viewportPageSize = apiRef.current.getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
     const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
@@ -454,10 +453,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction
+            isRtl
           });
           if (rightColIndex !== null) {
-            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'left' : 'right');
+            goToCell(rightColIndex, getRowIdFromIndex(rowIndexBefore), isRtl ? 'left' : 'right');
           }
           break;
         }
@@ -467,10 +466,10 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
             currentColIndex: colIndexBefore,
             firstColIndex,
             lastColIndex,
-            direction
+            isRtl
           });
           if (leftColIndex !== null) {
-            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), direction === 'rtl' ? 'right' : 'left');
+            goToCell(leftColIndex, getRowIdFromIndex(rowIndexBefore), isRtl ? 'right' : 'left');
           }
           break;
         }
@@ -545,7 +544,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPageRows, theme.direction, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
+  }, [apiRef, currentPageRows, isRtl, goToCell, getRowIdFromIndex, headerFilteringEnabled, goToHeaderFilter, goToHeader]);
   const checkIfCanStartEditing = React.useCallback((initialValue, {
     event
   }) => {

package/hooks/features/overlays/useGridOverlays.js

@@ -1,8 +1,8 @@
-import { useGridSelector } from '../../utils';
-import { useGridApiContext } from '../../utils/useGridApiContext';
-import { useGridRootProps } from '../../utils/useGridRootProps';
-import { gridExpandedRowCountSelector } from '../filter';
-import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
+import { useGridSelector } from "../../utils/index.js";
+import { useGridApiContext } from "../../utils/useGridApiContext.js";
+import { useGridRootProps } from "../../utils/useGridRootProps.js";
+import { gridExpandedRowCountSelector } from "../filter/index.js";
+import { gridRowCountSelector, gridRowsLoadingSelector } from "../rows/index.js";
 /**
  * Uses the grid state to determine which overlay to display.
  * Returns the active overlay type and the active loading overlay variant.

package/hooks/features/pagination/gridPaginationSelector.js

@@ -1,7 +1,7 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from '../filter/gridFilterSelector';
-import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
-import { getPageCount } from './gridPaginationUtils';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridExpandedSortedRowEntriesSelector, gridExpandedSortedRowIdsSelector, gridFilteredSortedTopLevelRowEntriesSelector } from "../filter/gridFilterSelector.js";
+import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { getPageCount } from "./gridPaginationUtils.js";
 
 /**
  * @category Pagination

package/hooks/features/pagination/gridPaginationUtils.js

@@ -1,4 +1,4 @@
-import { GridSignature } from '../../utils';
+import { GridSignature } from "../../utils/index.js";
 const MAX_PAGE_SIZE = 100;
 export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 export const getPageCount = (rowCount, pageSize, page) => {

package/hooks/features/pagination/index.js

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

package/hooks/features/pagination/useGridPagination.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from './gridPaginationUtils';
-import { useGridPaginationModel } from './useGridPaginationModel';
-import { useGridRowCount } from './useGridRowCount';
-import { useGridPaginationMeta } from './useGridPaginationMeta';
+import { throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel } from "./gridPaginationUtils.js";
+import { useGridPaginationModel } from "./useGridPaginationModel.js";
+import { useGridRowCount } from "./useGridRowCount.js";
+import { useGridPaginationMeta } from "./useGridPaginationMeta.js";
 export const paginationStateInitializer = (state, props) => {
   const paginationModel = _extends({}, getDefaultGridPaginationModel(props.autoPageSize), props.paginationModel ?? props.initialState?.pagination?.paginationModel);
   throwIfPageSizeExceedsTheLimit(paginationModel.pageSize, props.signature);

package/hooks/features/pagination/useGridPaginationMeta.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPaginationMetaSelector } from './gridPaginationSelector';
+import { useGridLogger, useGridSelector, useGridApiMethod } from "../../utils/index.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { gridPaginationMetaSelector } from "./gridPaginationSelector.js";
 export const useGridPaginationMeta = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPaginationMeta');
   const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);

package/hooks/features/pagination/useGridPaginationModel.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { gridDensityFactorSelector } from '../density';
-import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPageCountSelector, gridPaginationModelSelector } from './gridPaginationSelector';
-import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from './gridPaginationUtils';
+import { gridDensityFactorSelector } from "../density/index.js";
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { gridPageCountSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
+import { getPageCount, defaultPageSize, throwIfPageSizeExceedsTheLimit, getDefaultGridPaginationModel, getValidPage } from "./gridPaginationUtils.js";
 export const getDerivedPaginationModel = (paginationState, signature, paginationModelProp) => {
   let paginationModel = paginationState.paginationModel;
   const rowCount = paginationState.rowCount;

package/hooks/features/pagination/useGridRowCount.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import useLazyRef from '@mui/utils/useLazyRef';
-import { gridFilteredTopLevelRowCountSelector } from '../filter';
-import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPaginationRowCountSelector, gridPaginationMetaSelector, gridPaginationModelSelector } from './gridPaginationSelector';
+import { gridFilteredTopLevelRowCountSelector } from "../filter/index.js";
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from "../../utils/index.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { gridPaginationRowCountSelector, gridPaginationMetaSelector, gridPaginationModelSelector } from "./gridPaginationSelector.js";
 export const useGridRowCount = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowCount');
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);

package/hooks/features/preferencesPanel/index.js

@@ -1,3 +1,3 @@
-export * from './gridPreferencePanelSelector';
-export * from './gridPreferencePanelState';
-export * from './gridPreferencePanelsValue';
+export * from "./gridPreferencePanelSelector.js";
+export * from "./gridPreferencePanelState.js";
+export * from "./gridPreferencePanelsValue.js";

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
+import { gridPreferencePanelStateSelector } from "./gridPreferencePanelSelector.js";
 export const preferencePanelStateInitializer = (state, props) => _extends({}, state, {
   preferencePanel: props.initialState?.preferencePanel ?? {
     open: false

package/hooks/features/rowSelection/gridRowSelectionSelector.js

@@ -1,5 +1,5 @@
-import { createSelector, createSelectorMemoized } from '../../../utils/createSelector';
-import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
+import { createSelector, createSelectorMemoized } from "../../../utils/createSelector.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
 export const gridRowSelectionStateSelector = state => state.rowSelection;
 export const selectedGridRowsCountSelector = createSelector(gridRowSelectionStateSelector, selection => selection.length);
 export const selectedGridRowsSelector = createSelectorMemoized(gridRowSelectionStateSelector, gridRowsLookupSelector, (selectedRows, rowsLookup) => new Map(selectedRows.map(id => [id, rowsLookup[id]])));

package/hooks/features/rowSelection/index.js

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

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridRowSelectionSelector';
-import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
-import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
-import { gridExpandedSortedRowIdsSelector, gridFilterModelSelector } from '../filter/gridFilterSelector';
-import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
-import { GridCellModes } from '../../../models/gridEditRowModel';
-import { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
-import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
-import { gridClasses } from '../../../constants/gridClasses';
-import { isEventTargetInPortal } from '../../../utils/domUtils';
-import { isMultipleRowSelectionEnabled } from './utils';
+import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEventHandler.js";
+import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
+import { useGridLogger } from "../../utils/useGridLogger.js";
+import { gridRowsLookupSelector } from "../rows/gridRowsSelector.js";
+import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
+import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
+import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
+import { gridExpandedSortedRowIdsSelector, gridFilterModelSelector } from "../filter/gridFilterSelector.js";
+import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from "../../../colDef/index.js";
+import { GridCellModes } from "../../../models/gridEditRowModel.js";
+import { isKeyboardEvent, isNavigationKey } from "../../../utils/keyboardUtils.js";
+import { useGridVisibleRows } from "../../utils/useGridVisibleRows.js";
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../constants/gridDetailPanelToggleField.js";
+import { gridClasses } from "../../../constants/gridClasses.js";
+import { isEventTargetInPortal } from "../../../utils/domUtils.js";
+import { isMultipleRowSelectionEnabled } from "./utils.js";
 const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
   if (selectionModelProp == null) {
     return selectionModelProp;