@mui/x-data-grid 7.27.3 → 7.28.0

package/locales/elGR.js

@@ -97,6 +97,7 @@ const elGRGrid = {
   filterValueFalse: 'ψευδές',
   // Column menu text
   columnMenuLabel: 'Μενού',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Εμφάνιση στηλών',
   columnMenuManageColumns: 'Διαχείριση στηλών',
   columnMenuFilter: 'Φίλτρο',

package/locales/esES.js

@@ -96,6 +96,7 @@ const esESGrid = {
   filterValueFalse: 'falso',
   // Column menu text
   columnMenuLabel: 'Menú',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Mostrar columnas',
   columnMenuManageColumns: 'Administrar columnas',
   columnMenuFilter: 'Filtro',

package/locales/faIR.js

@@ -96,6 +96,7 @@ const faIRGrid = {
   filterValueFalse: 'غلط',
   // Column menu text
   columnMenuLabel: 'فهرست',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'نمایش ستون‌ها',
   columnMenuManageColumns: 'مدیریت ستون‌ها',
   columnMenuFilter: 'فیلتر',

package/locales/fiFI.js

@@ -97,6 +97,7 @@ const fiFIGrid = {
   filterValueFalse: 'epätosi',
   // Column menu text
   columnMenuLabel: 'Valikko',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Näytä sarakkeet',
   columnMenuManageColumns: 'Hallitse sarakkeita',
   columnMenuFilter: 'Suodata',

package/locales/frFR.js

@@ -97,6 +97,7 @@ const frFRGrid = {
   filterValueFalse: 'faux',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Afficher les colonnes',
   columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',

package/locales/heIL.js

@@ -97,6 +97,7 @@ const heILGrid = {
   filterValueFalse: 'לא',
   // Column menu text
   columnMenuLabel: 'תפריט',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'הצג עמודות',
   columnMenuManageColumns: 'נהל עמודות',
   columnMenuFilter: 'סנן',

package/locales/hrHR.js

@@ -105,6 +105,7 @@ const hrHRGrid = {
   filterValueFalse: 'netačno',
   // Column menu text
   columnMenuLabel: 'Izbornik',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Prikaži stupce',
   columnMenuManageColumns: 'Upravljanje stupcima',
   columnMenuFilter: 'Filter',

package/locales/huHU.js

@@ -96,6 +96,7 @@ const huHUGrid = {
   filterValueFalse: 'hamis',
   // Column menu text
   columnMenuLabel: 'Menü',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Oszlopok megjelenítése',
   columnMenuManageColumns: 'Oszlopok kezelése',
   columnMenuFilter: 'Szűrők',

package/locales/isIS.js

@@ -97,6 +97,7 @@ const isISGrid = {
   filterValueFalse: 'falskt',
   // Column menu text
   columnMenuLabel: 'Valmynd',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Sýna dálka',
   columnMenuManageColumns: 'Stjórna dálkum',
   columnMenuFilter: 'Síur',

package/locales/itIT.js

@@ -97,6 +97,7 @@ const itITGrid = {
   filterValueFalse: 'falso',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Mostra le colonne',
   columnMenuManageColumns: 'Gestisci colonne',
   columnMenuFilter: 'Filtra',

package/locales/jaJP.js

@@ -97,6 +97,7 @@ const jaJPGrid = {
   filterValueFalse: '偽',
   // Column menu text
   columnMenuLabel: 'メニュー',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: '列表示',
   columnMenuManageColumns: '列管理',
   columnMenuFilter: 'フィルター',

package/locales/koKR.js

@@ -96,6 +96,7 @@ const koKRGrid = {
   filterValueFalse: '거짓',
   // Column menu text
   columnMenuLabel: '메뉴',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: '열 표시',
   columnMenuManageColumns: '열 관리',
   columnMenuFilter: '필터',
@@ -143,7 +144,7 @@ const koKRGrid = {
   // Row reordering text
   rowReorderingHeaderName: '행 재배치',
   // Aggregation
-  aggregationMenuItemHeader: '총계',
+  aggregationMenuItemHeader: '집계',
   aggregationFunctionLabelSum: '합',
   aggregationFunctionLabelAvg: '평균',
   aggregationFunctionLabelMin: '최소값',

package/locales/nbNO.js

@@ -97,6 +97,7 @@ const nbNOGrid = {
   filterValueFalse: 'usant',
   // Column menu text
   columnMenuLabel: 'Meny',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',

package/locales/nlNL.js

@@ -96,6 +96,7 @@ const nlNLGrid = {
   filterValueFalse: 'onwaar',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Toon kolommen',
   columnMenuManageColumns: 'Kolommen beheren',
   columnMenuFilter: 'Filteren',

package/locales/nnNO.js

@@ -97,6 +97,7 @@ const nnNOGrid = {
   filterValueFalse: 'usant',
   // Column menu text
   columnMenuLabel: 'Meny',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Vis kolonner',
   columnMenuManageColumns: 'Administrer kolonner',
   columnMenuFilter: 'Filter',

package/locales/plPL.js

@@ -96,6 +96,7 @@ const plPLGrid = {
   filterValueFalse: 'fałsz',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Pokaż wszystkie kolumny',
   columnMenuManageColumns: 'Zarządzaj kolumnami',
   columnMenuFilter: 'Filtr',

package/locales/ptBR.js

@@ -96,6 +96,7 @@ const ptBRGrid = {
   filterValueFalse: 'falso',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Exibir colunas',
   columnMenuManageColumns: 'Gerir colunas',
   columnMenuFilter: 'Filtrar',

package/locales/ptPT.js

@@ -96,6 +96,7 @@ const ptPTGrid = {
   filterValueFalse: 'falso',
   // Column menu text
   columnMenuLabel: 'Menu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Mostrar colunas',
   columnMenuManageColumns: 'Gerir colunas',
   columnMenuFilter: 'Filtro',

package/locales/roRO.js

@@ -96,6 +96,7 @@ const roROGrid = {
   filterValueFalse: 'Nu',
   // Column menu text
   columnMenuLabel: 'Meniu',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Afișează toate coloanele',
   columnMenuManageColumns: 'Gestionează coloane',
   columnMenuFilter: 'Filtru',

package/locales/ruRU.js

@@ -111,6 +111,7 @@ const ruRUGrid = {
   filterValueFalse: 'ложь',
   // Column menu text
   columnMenuLabel: 'Меню',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Показать столбцы',
   columnMenuManageColumns: 'Управление колонками',
   columnMenuFilter: 'Фильтр',

package/locales/skSK.js

@@ -41,9 +41,8 @@ const skSKGrid = {
   columnsManagementSearchTitle: 'Vyhľadať',
   columnsManagementNoColumns: 'Žiadne stĺpce',
   columnsManagementShowHideAllText: 'Zobraziť/Skryť všetko',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementReset: 'Resetovať',
+  columnsManagementDeleteIconLabel: 'Vymazať',
   // Filter panel text
   filterPanelAddFilter: 'Pridať filter',
   filterPanelRemoveAll: 'Odstrániť všetky',
@@ -57,9 +56,9 @@ const skSKGrid = {
   filterPanelInputPlaceholder: 'Hodnota filtra',
   // Filter operators text
   filterOperatorContains: 'obsahuje',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'neobsahuje',
   filterOperatorEquals: 'rovná sa',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nerovná sa',
   filterOperatorStartsWith: 'začína s',
   filterOperatorEndsWith: 'končí na',
   filterOperatorIs: 'je',
@@ -79,9 +78,9 @@ const skSKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Obsahuje',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Neobsahuje',
   headerFilterOperatorEquals: 'Rovná sa',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nerovná sa',
   headerFilterOperatorStartsWith: 'Začína s',
   headerFilterOperatorEndsWith: 'Končí na',
   headerFilterOperatorIs: 'Je',
@@ -105,6 +104,7 @@ const skSKGrid = {
   filterValueFalse: 'nie',
   // Column menu text
   columnMenuLabel: 'Menu',
+  columnMenuAriaLabel: columnName => `Ponuka stĺpca ${columnName}`,
   columnMenuShowColumns: 'Zobraziť stĺpce',
   columnMenuManageColumns: 'Spravovať stĺpce',
   columnMenuFilter: 'Filter',

package/locales/svSE.js

@@ -97,6 +97,7 @@ const svSEGrid = {
   filterValueFalse: 'falskt',
   // Column menu text
   columnMenuLabel: 'Meny',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Visa kolumner',
   columnMenuManageColumns: 'Hantera kolumner',
   columnMenuFilter: 'Filtrera',

package/locales/trTR.js

@@ -96,6 +96,7 @@ const trTRGrid = {
   filterValueFalse: 'yanlış',
   // Column menu text
   columnMenuLabel: 'Menü',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Sütunları göster',
   columnMenuManageColumns: 'Sütunları yönet',
   columnMenuFilter: 'Filtre Ekle',

package/locales/ukUA.js

@@ -111,6 +111,7 @@ const ukUAGrid = {
   filterValueFalse: 'ні',
   // Column menu text
   columnMenuLabel: 'Меню',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Показати стовпці',
   columnMenuManageColumns: 'Керування стовпцями',
   columnMenuFilter: 'Фільтр',

package/locales/urPK.js

@@ -96,6 +96,7 @@ const urPKGrid = {
   filterValueFalse: 'غلط',
   // Column menu text
   columnMenuLabel: 'مینیو',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'کالم دکھائیں',
   columnMenuManageColumns: 'کالم مینج کریں',
   columnMenuFilter: 'فلٹر',

package/locales/viVN.js

@@ -97,6 +97,7 @@ const viVNGrid = {
   filterValueFalse: 'Không',
   // Column menu text
   columnMenuLabel: 'Danh mục',
+  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
   columnMenuShowColumns: 'Danh sách cột',
   columnMenuManageColumns: 'Quản lý cột',
   columnMenuFilter: 'Bộ lọc',

package/locales/zhCN.js

@@ -96,6 +96,7 @@ const zhCNGrid = {
   filterValueFalse: '假',
   // Column menu text
   columnMenuLabel: '菜单',
+  columnMenuAriaLabel: columnName => `${columnName} 列菜单`,
   columnMenuShowColumns: '显示',
   columnMenuManageColumns: '管理列',
   columnMenuFilter: '筛选器',

package/locales/zhHK.js

@@ -30,12 +30,11 @@ const zhHKGrid = {
   toolbarExportPrint: '列印',
   toolbarExportExcel: '下載為 Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '搜尋',
+  columnsManagementNoColumns: '沒有列',
+  columnsManagementShowHideAllText: '顯示/隱藏所有',
+  columnsManagementReset: '重置',
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '新增過濾器',
   filterPanelRemoveAll: '移除所有',
@@ -49,9 +48,9 @@ const zhHKGrid = {
   filterPanelInputPlaceholder: '過濾值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等於',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等於',
   filterOperatorStartsWith: '以。。開始',
   filterOperatorEndsWith: '以。。結束',
   filterOperatorIs: '是',
@@ -71,9 +70,9 @@ const zhHKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等於',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等於',
   headerFilterOperatorStartsWith: '以。。開始',
   headerFilterOperatorEndsWith: '以。。結束',
   headerFilterOperatorIs: '是',
@@ -87,7 +86,7 @@ const zhHKGrid = {
   headerFilterOperatorIsAnyOf: '是以下任一個',
   'headerFilterOperator=': '等於',
   'headerFilterOperator!=': '不等於',
-  'headerFilterOperator>': '比...更棒',
+  'headerFilterOperator>': '大於',
   'headerFilterOperator>=': '大於或等於',
   'headerFilterOperator<': '少於',
   'headerFilterOperator<=': '小於或等於',
@@ -97,6 +96,7 @@ const zhHKGrid = {
   filterValueFalse: '錯誤的',
   // Column menu text
   columnMenuLabel: '選單',
+  columnMenuAriaLabel: columnName => `${columnName} 欄目選單`,
   columnMenuShowColumns: '顯示欄目',
   columnMenuManageColumns: '管理欄目',
   columnMenuFilter: '篩選',

package/locales/zhTW.js

@@ -30,12 +30,11 @@ const zhTWGrid = {
   toolbarExportPrint: '列印',
   toolbarExportExcel: '匯出 Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-  // columnsManagementDeleteIconLabel: 'Clear',
-
+  columnsManagementSearchTitle: '搜尋',
+  columnsManagementNoColumns: '沒有欄位',
+  columnsManagementShowHideAllText: '顯示/隱藏所有',
+  columnsManagementReset: '重置',
+  columnsManagementDeleteIconLabel: '清除',
   // Filter panel text
   filterPanelAddFilter: '增加篩選器',
   filterPanelRemoveAll: '清除所有',
@@ -49,9 +48,9 @@ const zhTWGrid = {
   filterPanelInputPlaceholder: '篩選值',
   // Filter operators text
   filterOperatorContains: '包含',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: '不包含',
   filterOperatorEquals: '等於',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: '不等於',
   filterOperatorStartsWith: '以...開頭',
   filterOperatorEndsWith: '以...結束',
   filterOperatorIs: '為',
@@ -71,9 +70,9 @@ const zhTWGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: '包含',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: '不包含',
   headerFilterOperatorEquals: '等於',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: '不等於',
   headerFilterOperatorStartsWith: '以...開頭',
   headerFilterOperatorEndsWith: '以...結束',
   headerFilterOperatorIs: '為',
@@ -97,6 +96,7 @@ const zhTWGrid = {
   filterValueFalse: '假',
   // Column menu text
   columnMenuLabel: '選單',
+  columnMenuAriaLabel: columnName => `${columnName} 欄位選單`,
   columnMenuShowColumns: '顯示欄位',
   columnMenuManageColumns: '管理欄位',
   columnMenuFilter: '篩選器',

package/models/api/gridLocaleTextApi.d.ts

@@ -92,6 +92,7 @@ export interface GridLocaleText {
     filterValueTrue: string;
     filterValueFalse: string;
     columnMenuLabel: string;
+    columnMenuAriaLabel: (columnName: string) => string;
     columnMenuShowColumns: React.ReactNode;
     columnMenuManageColumns: React.ReactNode;
     columnMenuFilter: React.ReactNode;

package/models/api/gridRowSelectionApi.d.ts

@@ -1,4 +1,5 @@
 import { GridRowId, GridRowModel } from '../gridRows';
+import { GridRowSelectionModel } from '../gridRowSelectionModel';
 /**
  * The selection API interface that is available in the grid [[apiRef]].
  */
@@ -28,11 +29,13 @@ export interface GridRowSelectionApi {
      */
     getSelectedRows: () => Map<GridRowId, GridRowModel>;
     /**
-     * Updates the selected rows to be those passed to the `rowIds` argument.
-     * Any row already selected will be unselected.
-     * @param {readonly GridRowId[]} rowIds The row ids to select.
+     * Sets the new row selection model.
+     *
+     * ⚠️ Caution: `setRowSelectionModel` doesn't apply the selection propagation automatically.
+     * Pass model returned by API method `getPropagatedRowSelectionModel` instead to apply the selection propagation.
+     * @param {gridRowSelectionModel} rowSelectionModel The new row selection model
      */
-    setRowSelectionModel: (rowIds: readonly GridRowId[]) => void;
+    setRowSelectionModel: (rowSelectionModel: GridRowSelectionModel) => void;
 }
 export interface GridRowMultiSelectionApi {
     /**
@@ -54,6 +57,14 @@ export interface GridRowMultiSelectionApi {
         startId: GridRowId;
         endId: GridRowId;
     }, isSelected?: boolean, resetSelection?: boolean) => void;
+    /**
+     * Returns the modified selection model after applying row selection propagation.
+     *
+     * Use this to achieve proper `rowSelectionPropagation` behavior when setting the selection model using `setRowSelectionModel`.
+     * @param {GridRowSelectionModel} inputSelectionModel The selection model to propagate.
+     * @returns {GridRowSelectionModel} The modified selection model.
+     */
+    getPropagatedRowSelectionModel: (inputSelectionModel: GridRowSelectionModel) => GridRowSelectionModel;
 }
 export interface GridMultiSelectionApi {
     /**

package/modern/components/cell/GridActionsCell.js

@@ -90,7 +90,9 @@ function GridActionsCell(props) {
   const hideMenu = () => {
     setOpen(false);
   };
-  const toggleMenu = () => {
+  const toggleMenu = event => {
+    event.stopPropagation();
+    event.preventDefault();
     if (open) {
       hideMenu();
     } else {

package/modern/components/cell/GridCell.js

@@ -193,9 +193,9 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     const isRightPinned = pinnedPosition === PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
       cellStyle.height = `calc(var(--height) * ${rowSpan})`;
-      cellStyle.zIndex = 5;
+      cellStyle.zIndex = 10;
       if (isLeftPinned || isRightPinned) {
-        cellStyle.zIndex = 6;
+        cellStyle.zIndex = 40;
       }
     }
     return cellStyle;

package/modern/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -35,6 +35,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
     event.stopPropagation();
     apiRef.current.toggleColumnMenu(colDef.field);
   }, [apiRef, colDef.field]);
+  const columnName = colDef.headerName ?? colDef.field;
   return /*#__PURE__*/_jsx("div", {
     className: classes.root,
     children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
@@ -45,7 +46,7 @@ export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
         ref: iconButtonRef,
         tabIndex: -1,
         className: classes.button,
-        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        "aria-label": apiRef.current.getLocaleText('columnMenuAriaLabel')(columnName),
         size: "small",
         onClick: handleMenuIconClick,
         "aria-haspopup": "menu",

package/modern/components/containers/GridRootStyles.js

@@ -485,14 +485,14 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['columnHeader--pinnedLeft']}, & .${c['columnHeader--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 4,
+      zIndex: 40,
       // Should be above the column separator
       background: 'var(--DataGrid-pinnedBackground)'
     },
     [`& .${c.columnSeparator}`]: {
       position: 'absolute',
       overflow: 'hidden',
-      zIndex: 3,
+      zIndex: 30,
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
@@ -732,7 +732,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
       position: 'sticky',
-      zIndex: 3,
+      zIndex: 30,
       background: 'var(--DataGrid-pinnedBackground)',
       '&.Mui-selected': {
         backgroundColor: pinnedSelectedBackgroundColor

package/modern/components/panel/filterPanel/index.js

@@ -1,5 +1,5 @@
 export * from "./GridFilterForm.js";
-export * from "./GridFilterInputValue.js";
+export { GridFilterInputValue } from "./GridFilterInputValue.js";
 export * from "./GridFilterInputDate.js";
 export * from "./GridFilterInputSingleSelect.js";
 export * from "./GridFilterInputBoolean.js";

package/modern/components/virtualization/GridBottomContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 4,
+  zIndex: 40,
   bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
 });
 export function GridBottomContainer(props) {

package/modern/components/virtualization/GridTopContainer.js

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 };
 const Element = styled('div')({
   position: 'sticky',
-  zIndex: 4,
+  zIndex: 40,
   top: 0
 });
 export function GridTopContainer(props) {

package/modern/components/virtualization/GridVirtualScrollbar.js

@@ -21,9 +21,9 @@ const useUtilityClasses = (ownerState, position) => {
 const Scrollbar = styled('div')({
   position: 'absolute',
   display: 'inline-block',
-  zIndex: 6,
+  zIndex: 60,
   '&:hover': {
-    zIndex: 7
+    zIndex: 70
   },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need

package/modern/constants/localeTextConstants.js

@@ -94,6 +94,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   filterValueFalse: 'false',
   // Column menu text
   columnMenuLabel: 'Menu',
+  columnMenuAriaLabel: columnName => `${columnName} column menu`,
   columnMenuShowColumns: 'Show columns',
   columnMenuManageColumns: 'Manage columns',
   columnMenuFilter: 'Filter',