@mui/x-data-grid 7.13.0 → 7.14.0

package/CHANGELOG.md

@@ -3,6 +3,86 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.14.0
+
+_Aug 23, 2024_
+
+We'd like to offer a big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
+
+- 💫 Allow [filtering the axis on zoom](https://mui.com/x/react-charts/zoom-and-pan/#zoom-filtering), making the axis adapt by removing values outside the view.
+
+  <img width="600" src="https://github.com/user-attachments/assets/e65bbd00-d2a8-4136-81cd-3598f1373c16" alt="filtering the axis on zoom" />
+
+- 📊 Improve bar chart performances
+- 🌍 Improve Czech (cs-CZ) and Hebrew (he-IL) locales on the Data Grid
+- 🌍 Improve Chinese (zh-HK), Hebrew (he-IL), and Vietnamese (vi-VN) locales on the Date and Time Pickers
+- 🐞 Bugfixes
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### `@mui/x-data-grid@7.14.0`
+
+- [DataGrid] Use readonly array result for `getTreeDataPath` (#11743) @pcorpet
+- [DataGrid] Use `event.key` for `Tab` and `Escape` keys (#14170) @k-rajat19
+- [DataGrid] Introduce selectors with arguments (#14236) @MBilalShafi
+- [DataGrid] include `api` in `gridCellParams` interface (#14201) @k-rajat19
+- [l10n] Improve Czech (cs-CZ) locale (#14135) @chirimiri22
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+
+#### `@mui/x-data-grid-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@7.14.0`.
+
+#### `@mui/x-data-grid-premium@7.14.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@7.14.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste not working for a single cell on non-first page (#14261) @arminmeh
+- [DataGridPremium] Fix `onCellSelectionModelChange` not triggered when additional cell range is selected (#14199) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@7.14.0`
+
+- [l10n] Improve Chinese (zh-HK) locale (#13289) @yeeharn
+- [l10n] Improve Hebrew (he-IL) locale (#14287) @rotembarsela
+- [l10n] Improve Vietnamese (vi-VN) locale (#14238) @locnbk2002
+- [TimePicker] Handle `Space` and `Enter` on the `TimeClock` component @arthurbalduini
+
+#### `@mui/x-date-pickers-pro@7.14.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@7.14.0`.
+
+### Charts
+
+#### `@mui/x-charts@7.14.0`
+
+- [charts] Fix grid overflow with zooming (#14280) @alexfauquette
+- [charts] Improve bar chart performances (#14278) @alexfauquette
+- [charts] Test pointer events (#14042) @alexfauquette
+- [charts] Use `isPointInside` function for both graphs and axis (#14222) @JCQuintas
+
+#### `@mui/x-charts-pro@7.0.0-alpha.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@7.14.0`, plus:
+
+- [charts-pro] Zoom axis filtering (#14121) @JCQuintas
+
+### Docs
+
+- [docs] Consistent use of UTC and timezones (#14250) @oliviertassinari
+- [docs] Fix missing leading slashes in URLs (#14249) @oliviertassinari
+- [docs] Dash usage revision on pickers pages (#14260) @arthurbalduini
+
+### Core
+
+- [core] Follow JSDocs convention @oliviertassinari
+- [core] Prepare for material v6 (#14143) @LukasTy
+- [code-infra] Set up `eslint-plugin-testing-library` (#14232) @LukasTy
+- [infra] Updated mui-x roadmap links with new project URL (#14271) @michelengelen
+
 ## 7.13.0
 
 _Aug 16, 2024_
@@ -58,7 +138,7 @@ Same changes as in `@mui/x-date-pickers@7.13.0`.
 - [charts] Rename `CartesianContextProvider` to `CartesianProvider` (#14102) @JCQuintas
 - [charts] Support axis with the same value for all data points (#14191) @alexfauquette
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.13.0`.
 
@@ -132,7 +212,7 @@ Same changes as in `@mui/x-date-pickers@7.12.1`.
 - [charts] Fix charts vendor publish config (#14073) @JCQuintas
 - [charts] Move `plugins` to `PluginProvider` (#14056) @JCQuintas
 
-#### `@mui/x-date-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+#### `@mui/x-charts-pro@7.0.0-alpha.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
 
 Same changes as in `@mui/x-charts@7.12.1`, plus:
 

package/components/cell/GridCell.js

@@ -107,13 +107,12 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const field = column.field;
-  const cellParamsWithAPI = useGridSelector(apiRef, () => {
+  const cellParams = 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) {
@@ -132,9 +131,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
@@ -147,15 +146,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['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 = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
@@ -238,7 +237,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;
@@ -260,15 +259,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 = _objectWithoutPropertiesLoose(editCellState, _excluded2);
-    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParamsWithAPI.formattedValue;
-    const params = _extends({}, cellParamsWithAPI, {
+    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParams.formattedValue;
+    const params = _extends({}, cellParams, {
       row: updatedRow,
       formattedValue
     }, editCellStateRest);

package/components/cell/GridEditSingleSelectCell.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
@@ -80,10 +79,10 @@ function GridEditSingleSelectCell(props) {
       setOpen(false);
       return;
     }
-    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+    if (reason === 'backdropClick' || event.key === 'Escape') {
       const params = apiRef.current.getCellParams(id, field);
       apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
-        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+        reason: event.key === 'Escape' ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
       }));
     }
   };

package/components/menu/columnMenu/GridColumnMenuContainer.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
-import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../../utils/keyboardUtils';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(MenuList)(() => ({
@@ -23,7 +23,7 @@ const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColum
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const handleListKeyDown = React.useCallback(event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/components/panel/GridPanel.js

@@ -10,7 +10,6 @@ import ClickAwayListener from '@mui/material/ClickAwayListener';
 import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
@@ -51,7 +50,7 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
     apiRef.current.hidePreferences();
   }, [apiRef]);
   const handleKeyDown = React.useCallback(event => {
-    if (isEscapeKey(event.key)) {
+    if (event.key === 'Escape') {
       apiRef.current.hidePreferences();
     }
   }, [apiRef]);

package/components/panel/filterPanel/GridFilterForm.js

@@ -281,10 +281,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       variant: "standard",
       as: rootProps.slots.baseFormControl
     }, baseFormControlProps, logicOperatorInputProps, {
-      sx: _extends({
-        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: clsx(classes.logicOperatorInput, baseFormControlProps.className, logicOperatorInputProps.className),
       ownerState: rootProps,
       children: /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({

package/components/toolbar/GridToolbarDensitySelector.js

@@ -6,7 +6,7 @@ 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, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
 import { GridMenu } from '../menu/GridMenu';
@@ -62,7 +62,7 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
     setOpen(false);
   };
   const handleListKeyDown = event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/components/toolbar/GridToolbarExportContainer.js

@@ -3,7 +3,7 @@ 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, isTabKey } from '../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../utils/keyboardUtils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { GridMenu } from '../menu/GridMenu';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -29,7 +29,7 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   };
   const handleMenuClose = () => setOpen(false);
   const handleListKeyDown = event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {

package/components/toolbar/GridToolbarQuickFilter.js

@@ -105,9 +105,11 @@ function GridToolbarQuickFilter(props) {
       endAdornment: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         "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__*/_jsx(rootProps.slots.quickFilterClearIcon, {

package/hooks/features/rows/useGridParamsApi.js

@@ -51,7 +51,8 @@ export function useGridParamsApi(apiRef) {
       tabIndex: cellTabIndex && cellTabIndex.field === field && cellTabIndex.id === id ? 0 : -1,
       value,
       formattedValue: value,
-      isEditable: false
+      isEditable: false,
+      api: {}
     };
     if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter(value, row, colDef, apiRef);

package/hooks/utils/useGridSelector.d.ts

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import type { GridApiCommon } from '../../models/api/gridApiCommon';
-import { OutputSelector } from '../../utils/createSelector';
+import { OutputSelector, OutputSelectorV8 } from '../../utils/createSelector';
+type Selector<Api extends GridApiCommon, Args, T> = ((state: Api['state']) => T) | OutputSelectorV8<Api['state'], Args, T>;
 export declare const objectShallowCompare: typeof fastObjectShallowCompare;
 export declare const useGridSelector: <Api extends GridApiCommon, T>(apiRef: React.MutableRefObject<Api>, selector: ((state: Api["state"]) => T) | OutputSelector<Api["state"], T>, equals?: (a: T, b: T) => boolean) => T;
+export declare const useGridSelectorV8: <Api extends GridApiCommon, Args, T>(apiRef: React.MutableRefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: (a: T, b: T) => boolean) => T;
+export {};

package/hooks/utils/useGridSelector.js

@@ -6,12 +6,21 @@ import { warnOnce } from '../../internals/utils/warning';
 function isOutputSelector(selector) {
   return selector.acceptsApiRef;
 }
+// TODO v8: Remove this function
 function applySelector(apiRef, selector) {
   if (isOutputSelector(selector)) {
     return selector(apiRef);
   }
   return selector(apiRef.current.state);
 }
+
+// TODO v8: Rename this function to `applySelector`
+function applySelectorV8(apiRef, selector, args, instanceId) {
+  if (isOutputSelector(selector)) {
+    return selector(apiRef, args);
+  }
+  return selector(apiRef.current.state, instanceId);
+}
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
 const createRefs = () => ({
@@ -19,6 +28,8 @@ const createRefs = () => ({
   equals: null,
   selector: null
 });
+
+// TODO v8: Remove this function
 export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!apiRef.current.state) {
@@ -43,4 +54,31 @@ export const useGridSelector = (apiRef, selector, equals = defaultCompare) => {
     });
   });
   return state;
+};
+
+// TODO v8: Rename this function to `useGridSelector`
+export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = defaultCompare) => {
+  if (process.env.NODE_ENV !== 'production') {
+    if (!apiRef.current.state) {
+      warnOnce(['MUI X: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
+    }
+  }
+  const refs = useLazyRef(createRefs);
+  const didInit = refs.current.selector !== null;
+  const [state, setState] = React.useState(
+  // We don't use an initialization function to avoid allocations
+  didInit ? null : applySelectorV8(apiRef, selector, args, apiRef.current.instanceId));
+  refs.current.state = state;
+  refs.current.equals = equals;
+  refs.current.selector = selector;
+  useOnMount(() => {
+    return apiRef.current.store.subscribe(() => {
+      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      if (!refs.current.equals(refs.current.state, newState)) {
+        refs.current.state = newState;
+        setState(newState);
+      }
+    });
+  });
+  return state;
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.13.0
+ * @mui/x-data-grid v7.14.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -72,7 +72,8 @@ export type * from '../models/props/DataGridProps';
 export type * from '../models/gridDataSource';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8, } from '../utils/createSelector';
+export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';

package/internals/index.js

@@ -57,7 +57,8 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
-export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { createSelector, createSelectorV8, createSelectorMemoized, createSelectorMemoizedV8 } from '../utils/createSelector';
+export { useGridSelectorV8 } from '../hooks/utils/useGridSelector';
 export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';

package/locales/csCZ.js

@@ -38,11 +38,10 @@ const csCZGrid = {
   toolbarExportPrint: 'Vytisknout',
   toolbarExportExcel: 'Stáhnout jako Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Hledat sloupce',
+  columnsManagementNoColumns: 'Žádné sloupce',
+  columnsManagementShowHideAllText: 'Zobrazit/skrýt vše',
+  columnsManagementReset: 'Resetovat',
   // Filter panel text
   filterPanelAddFilter: 'Přidat filtr',
   filterPanelRemoveAll: 'Odstranit vše',

package/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/models/gridDataSource.d.ts

@@ -43,19 +43,19 @@ export interface GridGetRowsResponse {
 }
 export interface GridDataSource {
     /**
-     * This method will be called when the grid needs to fetch some rows
+     * This method will be called when the grid needs to fetch some rows.
      * @param {GridGetRowsParams} params The parameters required to fetch the rows
      * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse]
      */
     getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
     /**
-     * This method will be called when the user updates a row [Not yet implemented]
+     * This method will be called when the user updates a row [Not yet implemented].
      * @param {GridRowModel} updatedRow The updated row
      * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache
      */
     updateRow?(updatedRow: GridRowModel): Promise<any>;
     /**
-     * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data .
+     * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data.
      * @param {GridRowModel} row The row to get the group key of
      * @returns {string} The group key for the row
      */
@@ -70,19 +70,19 @@ export interface GridDataSource {
 }
 export interface GridDataSourceCache {
     /**
-     * Set the cache entry for the given key
+     * Set the cache entry for the given key.
      * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
      * @param {GridGetRowsResponse} value The value to be stored in the cache
      */
     set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
     /**
-     * Get the cache entry for the given key
+     * Get the cache entry for the given key.
      * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
      * @returns {GridGetRowsResponse} The value stored in the cache
      */
     get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
     /**
-     * Clear the cache
+     * Clear the cache.
      */
     clear: () => void;
 }

package/models/params/gridCellParams.d.ts

@@ -53,6 +53,10 @@ export interface GridCellParams<R extends GridValidRowModel = any, V = unknown,
      * the tabIndex value.
      */
     tabIndex: 0 | -1;
+    /**
+     * GridApi that let you manipulate the grid.
+     */
+    api: GridApiCommunity;
 }
 export interface FocusElement {
     focus(): void;

package/modern/components/cell/GridCell.js

@@ -107,13 +107,12 @@ const GridCell = /*#__PURE__*/React.forwardRef(function GridCell(props, ref) {
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const field = column.field;
-  const cellParamsWithAPI = useGridSelector(apiRef, () => {
+  const cellParams = 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) {
@@ -132,9 +131,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
@@ -147,15 +146,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['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 = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef(null);
@@ -238,7 +237,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;
@@ -260,15 +259,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 = _objectWithoutPropertiesLoose(editCellState, _excluded2);
-    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParamsWithAPI.formattedValue;
-    const params = _extends({}, cellParamsWithAPI, {
+    const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value, updatedRow, column, apiRef) : cellParams.formattedValue;
+    const params = _extends({}, cellParams, {
       row: updatedRow,
       formattedValue
     }, editCellStateRest);

package/modern/components/cell/GridEditSingleSelectCell.js

@@ -6,7 +6,6 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
 import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
-import { isEscapeKey } from '../../utils/keyboardUtils';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridEditModes } from '../../models/gridEditRowModel';
 import { getValueFromValueOptions, getValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
@@ -80,10 +79,10 @@ function GridEditSingleSelectCell(props) {
       setOpen(false);
       return;
     }
-    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+    if (reason === 'backdropClick' || event.key === 'Escape') {
       const params = apiRef.current.getCellParams(id, field);
       apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
-        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+        reason: event.key === 'Escape' ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
       }));
     }
   };

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

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import MenuList from '@mui/material/MenuList';
 import { styled } from '@mui/material/styles';
-import { isHideMenuKey, isTabKey } from '../../../utils/keyboardUtils';
+import { isHideMenuKey } from '../../../utils/keyboardUtils';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledMenuList = styled(MenuList)(() => ({
@@ -23,7 +23,7 @@ const GridColumnMenuContainer = /*#__PURE__*/React.forwardRef(function GridColum
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const handleListKeyDown = React.useCallback(event => {
-    if (isTabKey(event.key)) {
+    if (event.key === 'Tab') {
       event.preventDefault();
     }
     if (isHideMenuKey(event.key)) {