@mui/x-data-grid 7.13.0 → 7.15.0

package/modern/locales/heIL.js

@@ -30,11 +30,10 @@ const heILGrid = {
   toolbarExportPrint: 'הדפסה',
   toolbarExportExcel: 'ייצוא ל- Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'חיפוש',
+  columnsManagementNoColumns: 'אין עמודות',
+  columnsManagementShowHideAllText: 'הצג/הסתר הכל',
+  columnsManagementReset: 'אתחול',
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelRemoveAll: 'מחק הכל',

package/modern/utils/createSelector.js

@@ -1,5 +1,18 @@
 import { createSelector as reselectCreateSelector } from 'reselect';
 import { warnOnce } from '../internals/utils/warning';
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `OutputSelector`
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `SelectorArgs`
+
+// TODO v8: Remove this type
+
+// TODO v8: Rename this type to `CreateSelectorFunction`
+
 const cache = new WeakMap();
 function checkIsAPIRef(value) {
   return 'current' in value && 'instanceId' in value.current;
@@ -7,6 +20,8 @@ function checkIsAPIRef(value) {
 const DEFAULT_INSTANCE_ID = {
   id: 'default'
 };
+
+// TODO v8: Remove this function
 export const createSelector = (a, b, c, d, e, f, ...other) => {
   if (other.length > 0) {
     throw new Error('Unsupported number of selectors');
@@ -71,6 +86,74 @@ export const createSelector = (a, b, c, d, e, f, ...other) => {
   selector.acceptsApiRef = true;
   return selector;
 };
+
+// TODO v8: Rename this function to `createSelector`
+export const createSelectorV8 = (a, b, c, d, e, f, ...other) => {
+  if (other.length > 0) {
+    throw new Error('Unsupported number of selectors');
+  }
+  let selector;
+  if (a && b && c && d && e && f) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      const vd = d(state, args, instanceId);
+      const ve = e(state, args, instanceId);
+      return f(va, vb, vc, vd, ve, args);
+    };
+  } else if (a && b && c && d && e) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      const vd = d(state, args, instanceId);
+      return e(va, vb, vc, vd, args);
+    };
+  } else if (a && b && c && d) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      const vc = c(state, args, instanceId);
+      return d(va, vb, vc, args);
+    };
+  } else if (a && b && c) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      const vb = b(state, args, instanceId);
+      return c(va, vb, args);
+    };
+  } else if (a && b) {
+    selector = (stateOrApiRef, args, instanceIdParam) => {
+      const isAPIRef = checkIsAPIRef(stateOrApiRef);
+      const instanceId = instanceIdParam ?? (isAPIRef ? stateOrApiRef.current.instanceId : DEFAULT_INSTANCE_ID);
+      const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+      const va = a(state, args, instanceId);
+      return b(va, args);
+    };
+  } else {
+    throw new Error('Missing arguments');
+  }
+
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+
+// TODO v8: Remove this function
 export const createSelectorMemoized = (...args) => {
   const selector = (stateOrApiRef, instanceId) => {
     const isAPIRef = checkIsAPIRef(stateOrApiRef);
@@ -97,6 +180,39 @@ export const createSelectorMemoized = (...args) => {
     return fn(state, cacheKey);
   };
 
+  // We use this property to detect if the selector was created with createSelector
+  // or it's only a simple function the receives the state and returns part of it.
+  selector.acceptsApiRef = true;
+  return selector;
+};
+
+// TODO v8: Rename this function to `createSelectorMemoized`
+export const createSelectorMemoizedV8 = (...args) => {
+  const selector = (stateOrApiRef, selectorArgs, instanceId) => {
+    const isAPIRef = checkIsAPIRef(stateOrApiRef);
+    const cacheKey = isAPIRef ? stateOrApiRef.current.instanceId : instanceId ?? DEFAULT_INSTANCE_ID;
+    const state = isAPIRef ? stateOrApiRef.current.state : stateOrApiRef;
+    if (process.env.NODE_ENV !== 'production') {
+      if (cacheKey.id === 'default') {
+        warnOnce(['MUI X: A selector was called without passing the instance ID, which may impact the performance of the grid.', 'To fix, call it with `apiRef`, for example `mySelector(apiRef)`, or pass the instance ID explicitly, for example `mySelector(state, apiRef.current.instanceId)`.']);
+      }
+    }
+    const cacheArgsInit = cache.get(cacheKey);
+    const cacheArgs = cacheArgsInit ?? new Map();
+    const cacheFn = cacheArgs?.get(args);
+    if (cacheArgs && cacheFn) {
+      // We pass the cache key because the called selector might have as
+      // dependency another selector created with this `createSelector`.
+      return cacheFn(state, selectorArgs, cacheKey);
+    }
+    const fn = reselectCreateSelector(...args);
+    if (!cacheArgsInit) {
+      cache.set(cacheKey, cacheArgs);
+    }
+    cacheArgs.set(args, fn);
+    return fn(state, selectorArgs, cacheKey);
+  };
+
   // We use this property to detect if the selector was created with createSelector
   // or it's only a simple function the receives the state and returns part of it.
   selector.acceptsApiRef = true;

package/modern/utils/keyboardUtils.js

@@ -1,13 +1,3 @@
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isEscapeKey = key => key === 'Escape';
-
-/**
- * @deprecated there is no meaninfuly logic abstracted, use event.key directly.
- */
-export const isTabKey = key => key === 'Tab';
-
 // Non printable keys have a name, for example "ArrowRight", see the whole list:
 // https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
 // So event.key.length === 1 is often enough.
@@ -27,7 +17,7 @@ export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.index
 export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 export const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 export const isKeyboardEvent = event => !!event.key;
-export const isHideMenuKey = key => isTabKey(key) || isEscapeKey(key);
+export const isHideMenuKey = key => key === 'Tab' || key === 'Escape';
 
 // In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
 // However, maybe it's overkill to fix, so let's be lazy.

package/node/components/cell/GridActionsCell.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("@mui/utils");
 var _gridClasses = require("../../constants/gridClasses");
 var _GridMenu = require("../menu/GridMenu");
@@ -39,7 +39,7 @@ function GridActionsCell(props) {
   const buttonRef = React.useRef(null);
   const ignoreCallToFocus = React.useRef(false);
   const touchRippleRefs = React.useRef({});
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const menuId = (0, _utils.unstable_useId)();
   const buttonId = (0, _utils.unstable_useId)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -120,7 +120,7 @@ function GridActionsCell(props) {
       }
 
       // for rtl mode we need to reverse the direction
-      const rtlMod = theme.direction === 'rtl' ? -1 : 1;
+      const rtlMod = isRtl ? -1 : 1;
       const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
 
       // if the button that should receive focus is disabled go one more step

package/node/components/cell/GridCell.js

@@ -116,13 +116,12 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const field = column.field;
-  const cellParamsWithAPI = (0, _useGridSelector.useGridSelector)(apiRef, () => {
+  const cellParams = (0, _useGridSelector.useGridSelector)(apiRef, () => {
     // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
     // associated with `rowId`/`fieldId`, but this selector runs after the state has been
     // updated, while `rowId`/`fieldId` reference an entry in the old state.
     try {
-      const cellParams = apiRef.current.getCellParams(rowId, field);
-      const result = cellParams;
+      const result = apiRef.current.getCellParams(rowId, field);
       result.api = apiRef.current;
       return result;
     } catch (e) {
@@ -141,9 +140,9 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
     hasFocus,
     isEditable = false,
     value
-  } = cellParamsWithAPI;
+  } = cellParams;
   const canManageOwnFocus = column.type === 'actions' && column.getActions?.(apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled);
-  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1;
   const {
     classes: rootClasses,
     getCellClassName
@@ -156,15 +155,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   }).filter(Boolean).join(' '));
   const classNames = [pipesClassName];
   if (column.cellClassName) {
-    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName);
   }
   if (column.display === 'flex') {
     classNames.push(_gridClasses.gridClasses['cell--flex']);
   }
   if (getCellClassName) {
-    classNames.push(getCellClassName(cellParamsWithAPI));
+    classNames.push(getCellClassName(cellParams));
   }
-  const valueToRender = cellParamsWithAPI.formattedValue ?? value;
+  const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef(null);
   const handleRef = (0, _utils.unstable_useForkRef)(ref, cellRef);
   const focusElementRef = React.useRef(null);
@@ -247,7 +246,7 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
       }
     }
   }, [hasFocus, cellMode, apiRef]);
-  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+  if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
   let handleFocus = other.onFocus;
@@ -269,15 +268,15 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   let children;
   let title;
   if (editCellState === null && column.renderCell) {
-    children = column.renderCell(cellParamsWithAPI);
+    children = column.renderCell(cellParams);
   }
   if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
     const editCellStateRest = (0, _objectWithoutPropertiesLoose2.default)(editCellState, _excluded2);
-    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParamsWithAPI.formattedValue;
-    const params = (0, _extends2.default)({}, cellParamsWithAPI, {
+    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParams.formattedValue;
+    const params = (0, _extends2.default)({}, cellParams, {
       row: updatedRow,
       formattedValue
     }, editCellStateRest);

package/node/components/cell/GridEditSingleSelectCell.js

@@ -13,7 +13,6 @@ var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/utils");
 var _gridEditCellParams = require("../../models/params/gridEditCellParams");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridEditRowModel = require("../../models/gridEditRowModel");
 var _filterPanelUtils = require("../panel/filterPanel/filterPanelUtils");
@@ -90,10 +89,10 @@ function GridEditSingleSelectCell(props) {
       setOpen(false);
       return;
     }
-    if (reason === 'backdropClick' || (0, _keyboardUtils.isEscapeKey)(event.key)) {
+    if (reason === 'backdropClick' || event.key === 'Escape') {
       const params = apiRef.current.getCellParams(id, field);
       apiRef.current.publishEvent('cellEditStop', (0, _extends2.default)({}, params, {
-        reason: (0, _keyboardUtils.isEscapeKey)(event.key) ? _gridEditCellParams.GridCellEditStopReasons.escapeKeyDown : _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
+        reason: event.key === 'Escape' ? _gridEditCellParams.GridCellEditStopReasons.escapeKeyDown : _gridEditCellParams.GridCellEditStopReasons.cellFocusOut
       }));
     }
   };

package/node/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -32,7 +32,7 @@ const GridColumnMenuContainer = exports.GridColumnMenuContainer = /*#__PURE__*/R
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const handleListKeyDown = React.useCallback(event => {
-    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {

package/node/components/panel/GridPanel.js

@@ -16,7 +16,6 @@ var _ClickAwayListener = _interopRequireDefault(require("@mui/material/ClickAway
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
-var _keyboardUtils = require("../../utils/keyboardUtils");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "classes"];
@@ -60,7 +59,7 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
     apiRef.current.hidePreferences();
   }, [apiRef]);
   const handleKeyDown = React.useCallback(event => {
-    if ((0, _keyboardUtils.isEscapeKey)(event.key)) {
+    if (event.key === 'Escape') {
       apiRef.current.hidePreferences();
     }
   }, [apiRef]);

package/node/components/panel/filterPanel/GridFilterForm.js

@@ -290,10 +290,15 @@ const GridFilterForm = exports.GridFilterForm = /*#__PURE__*/React.forwardRef(fu
       variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
-      sx: (0, _extends2.default)({
-        display: hasLogicOperatorColumn ? 'flex' : 'none',
-        visibility: showMultiFilterOperators ? 'visible' : 'hidden'
-      }, baseFormControlProps.sx || {}, logicOperatorInputProps.sx || {}),
+      sx: [hasLogicOperatorColumn ? {
+        display: 'flex'
+      } : {
+        display: 'none'
+      }, showMultiFilterOperators ? {
+        visibility: 'visible'
+      } : {
+        visibility: 'hidden'
+      }, baseFormControlProps.sx, logicOperatorInputProps.sx],
       className: (0, _clsx.default)(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelect, (0, _extends2.default)({

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -71,7 +71,7 @@ const GridToolbarDensitySelector = exports.GridToolbarDensitySelector = /*#__PUR
     setOpen(false);
   };
   const handleListKeyDown = event => {
-    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -38,7 +38,7 @@ const GridToolbarExportContainer = exports.GridToolbarExportContainer = /*#__PUR
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
-    if ((0, _keyboardUtils.isTabKey)(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if ((0, _keyboardUtils.isHideMenuKey)(event.key)) {

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -114,9 +114,11 @@ function GridToolbarQuickFilter(props) {
       endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel'),
         size: "small",
-        sx: {
-          visibility: searchValue ? 'visible' : 'hidden'
-        },
+        sx: [searchValue ? {
+          visibility: 'visible'
+        } : {
+          visibility: 'hidden'
+        }],
         onClick: handleSearchReset
       }, rootProps.slotProps?.baseIconButton, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.quickFilterClearIcon, {

package/node/hooks/core/gridCoreSelector.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridThemeSelector = void 0;
+exports.gridIsRtlSelector = void 0;
 /**
  * Get the theme state
  * @category Core
  */
-const gridThemeSelector = state => state.theme;
-exports.gridThemeSelector = gridThemeSelector;
+const gridIsRtlSelector = state => state.isRtl;
+exports.gridIsRtlSelector = gridIsRtlSelector;

package/node/hooks/core/useGridInitialization.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridInitialization = void 0;
 var _useGridRefs = require("./useGridRefs");
-var _useGridTheme = require("./useGridTheme");
+var _useGridIsRtl = require("./useGridIsRtl");
 var _useGridLoggerFactory = require("./useGridLoggerFactory");
 var _useGridApiInitialization = require("./useGridApiInitialization");
 var _useGridLocaleText = require("./useGridLocaleText");
@@ -18,7 +18,7 @@ var _useGridStateInitialization = require("./useGridStateInitialization");
 const useGridInitialization = (inputApiRef, props) => {
   const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(inputApiRef, props);
   (0, _useGridRefs.useGridRefs)(privateApiRef);
-  (0, _useGridTheme.useGridTheme)(privateApiRef);
+  (0, _useGridIsRtl.useGridIsRtl)(privateApiRef);
   (0, _useGridLoggerFactory.useGridLoggerFactory)(privateApiRef, props);
   (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef);
   (0, _pipeProcessing.useGridPipeProcessing)(privateApiRef);

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

@@ -4,16 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridTheme = void 0;
+exports.useGridIsRtl = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useGridTheme = apiRef => {
-  const theme = (0, _styles.useTheme)();
-  if (!apiRef.current.state.theme) {
-    apiRef.current.state.theme = theme;
+const useGridIsRtl = apiRef => {
+  const isRtl = (0, _RtlProvider.useRtl)();
+  if (apiRef.current.state.isRtl === undefined) {
+    apiRef.current.state.isRtl = isRtl;
   }
   const isFirstEffect = React.useRef(true);
   React.useEffect(() => {
@@ -21,9 +21,9 @@ const useGridTheme = apiRef => {
       isFirstEffect.current = false;
     } else {
       apiRef.current.setState(state => (0, _extends2.default)({}, state, {
-        theme
+        isRtl
       }));
     }
-  }, [apiRef, theme]);
+  }, [apiRef, isRtl]);
 };
-exports.useGridTheme = useGridTheme;
+exports.useGridIsRtl = useGridIsRtl;

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -53,7 +54,7 @@ const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const dimensions = (0, _utils.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
   const hasVirtualization = (0, _utils.useGridSelector)(apiRef, _virtualization.gridVirtualizationColumnEnabledSelector);
@@ -62,7 +63,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const pinnedRows = (0, _utils.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
-  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
+  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
-var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
 var _domUtils = require("../../../utils/domUtils");
 var _gridColumnResizeApi = require("./gridColumnResizeApi");
 var _gridClasses = require("../../../constants/gridClasses");
@@ -61,9 +61,9 @@ function flipResizeDirection(side) {
   }
   return 'Right';
 }
-function getResizeDirection(separator, direction) {
+function getResizeDirection(separator, isRtl) {
   const side = separator.classList.contains(_gridClasses.gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
-  if (direction === 'rtl') {
+  if (isRtl) {
     // Resizing logic should be mirrored in the RTL case
     return flipResizeDirection(side);
   }
@@ -187,7 +187,7 @@ function createResizeRefs() {
  * TODO: improve experience for last column
  */
 const useGridColumnResize = (apiRef, props) => {
-  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
   const logger = (0, _utils2.useGridLogger)(apiRef, 'useGridColumnResize');
   const refs = (0, _useLazyRef.default)(createResizeRefs).current;
 
@@ -327,7 +327,7 @@ const useGridColumnResize = (apiRef, props) => {
     refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement);
     refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement);
     refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, refs.columnHeaderElement);
-    resizeDirection.current = getResizeDirection(separator, theme.direction);
+    resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };
   const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(finishResize);

package/node/hooks/features/columns/gridColumnsSelector.js

@@ -62,8 +62,8 @@ const gridPinnedColumnsSelector = state => state.pinnedColumns;
  * @category Visible Columns
  */
 exports.gridPinnedColumnsSelector = gridPinnedColumnsSelector;
-const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridThemeSelector, (columnsState, model, visibleColumnFields, theme) => {
-  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, theme.direction === 'rtl');
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
+  const visiblePinnedFields = filterVisibleColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),
     right: visiblePinnedFields.right.map(field => columnsState.lookup[field])