@mui/x-data-grid 8.0.0-beta.1 → 8.0.0-beta.3

package/hooks/features/scroll/useGridScroll.js

@@ -58,7 +58,7 @@ const useGridScroll = (apiRef, props) => {
   const scrollToIndexes = React.useCallback(params => {
     const dimensions = (0, _dimensions.gridDimensionsSelector)(apiRef);
     const totalRowCount = (0, _gridRowsSelector.gridRowCountSelector)(apiRef);
-    const visibleColumns = props.unstable_listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+    const visibleColumns = props.listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
     const scrollToHeader = params.rowIndex == null;
     if (!scrollToHeader && totalRowCount === 0 || visibleColumns.length === 0) {
       return false;
@@ -105,7 +105,7 @@ const useGridScroll = (apiRef, props) => {
       return true;
     }
     return false;
-  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.unstable_listView]);
+  }, [logger, apiRef, virtualScrollerRef, props.pagination, visibleSortedRows, props.listView]);
   const scroll = React.useCallback(params => {
     if (virtualScrollerRef.current && params.left !== undefined && colRef.current) {
       const direction = isRtl ? -1 : 1;

package/hooks/features/sorting/gridSortingSelector.d.ts

@@ -5,17 +5,17 @@ import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
  * Get the id of the rows after the sorting process.
  * @category Sorting
  */
-export declare const gridSortedRowIdsSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridSortingState").GridSortingState, GridRowId[]>;
+export declare const gridSortedRowIdsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridSortingState, GridRowId[]>;
 /**
  * Get the id and the model of the rows after the sorting process.
  * @category Sorting
  */
-export declare const gridSortedRowEntriesSelector: import("../../..").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig, GridRowEntry<GridValidRowModel>[]>;
+export declare const gridSortedRowEntriesSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridRowTreeConfig, GridRowEntry<GridValidRowModel>[]>;
 /**
  * Get the current sorting model.
  * @category Sorting
  */
-export declare const gridSortModelSelector: import("../../..").OutputSelector<GridStateCommunity, import("./gridSortingState").GridSortingState, GridSortModel>;
+export declare const gridSortModelSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridSortingState, GridSortModel>;
 export type GridSortColumnLookup = Record<string, {
   sortDirection: GridSortDirection;
   sortIndex?: number;
@@ -24,9 +24,9 @@ export type GridSortColumnLookup = Record<string, {
  * @category Sorting
  * @ignore - do not document.
  */
-export declare const gridSortColumnLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridSortModel, GridSortColumnLookup>;
+export declare const gridSortColumnLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridSortModel, GridSortColumnLookup>;
 /**
  * @category Sorting
  * @ignore - do not document.
  */
-export declare const gridSortedRowIndexLookupSelector: import("../../..").OutputSelector<GridStateCommunity, GridRowId[], Record<GridRowId, number>>;
+export declare const gridSortedRowIndexLookupSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, GridRowId[], Record<GridRowId, number>>;

package/hooks/features/sorting/useGridSorting.js

@@ -9,7 +9,7 @@ exports.useGridSorting = exports.sortingStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
-var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _useGridEvent = require("../../utils/useGridEvent");
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 var _useGridLogger = require("../../utils/useGridLogger");
 var _gridColumnsSelector = require("../columns/gridColumnsSelector");
@@ -235,11 +235,11 @@ const useGridSorting = (apiRef, props) => {
     }
   }, [apiRef]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItem);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsSet', apiRef.current.applySorting);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', handleColumnsChange);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderClick', handleColumnHeaderClick);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnHeaderKeyDown', handleColumnHeaderKeyDown);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'rowsSet', apiRef.current.applySorting);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'columnsChange', handleColumnsChange);
+  (0, _useGridEvent.useGridEvent)(apiRef, 'activeStrategyProcessorChange', handleStrategyProcessorChange);
 
   /**
    * 1ST RENDER

package/hooks/features/virtualization/gridFocusedVirtualCellSelector.d.ts

@@ -1,6 +1,6 @@
-export declare const gridFocusedVirtualCellSelector: import("../../..").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("../../..").GridCellCoordinates | null, {
+export declare const gridFocusedVirtualCellSelector: import("@mui/x-data-grid").OutputSelector<import("../../../models/gridStateCommunity").GridStateCommunity, import("@mui/x-data-grid").GridCellCoordinates | null, {
   rowIndex: number;
   columnIndex: number;
-  id?: import("../../..").GridRowId | undefined;
+  id?: import("@mui/x-data-grid").GridRowId | undefined;
   field?: string | undefined;
 } | null>;

package/hooks/features/virtualization/gridVirtualizationSelectors.d.ts

@@ -4,33 +4,33 @@ import { GridStateCommunity } from "../../../models/gridStateCommunity.js";
  * Get the columns state
  * @category Virtualization
  */
-export declare const gridVirtualizationSelector: import("../../..").OutputSelector<GridStateCommunity, unknown, import("./useGridVirtualization").GridVirtualizationState>;
+export declare const gridVirtualizationSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, import("@mui/x-data-grid").GridVirtualizationState>;
 /**
  * Get the enabled state for virtualization
  * @category Virtualization
  * @deprecated Use `gridVirtualizationColumnEnabledSelector` and `gridVirtualizationRowEnabledSelector`
  */
-export declare const gridVirtualizationEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+export declare const gridVirtualizationEnabledSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, boolean>;
 /**
  * Get the enabled state for column virtualization
  * @category Virtualization
  */
-export declare const gridVirtualizationColumnEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+export declare const gridVirtualizationColumnEnabledSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, boolean>;
 /**
  * Get the enabled state for row virtualization
  * @category Virtualization
  */
-export declare const gridVirtualizationRowEnabledSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, boolean>;
+export declare const gridVirtualizationRowEnabledSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, boolean>;
 /**
  * Get the render context
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextSelector: import("../../..").OutputSelector<GridStateCommunity, import("./useGridVirtualization").GridVirtualizationState, import("../../..").GridRenderContext>;
+export declare const gridRenderContextSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridVirtualizationState, import("@mui/x-data-grid").GridRenderContext>;
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.
  * @category Virtualization
  * @ignore - do not document.
  */
-export declare const gridRenderContextColumnsSelector: import("../../..").OutputSelector<GridStateCommunity, number, GridColumnsRenderContext>;
+export declare const gridRenderContextColumnsSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, number, GridColumnsRenderContext>;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -64,7 +64,7 @@ const useGridVirtualScroller = () => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const {
-    unstable_listView: listView
+    listView
   } = rootProps;
   const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, () => listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef));
   const enabledForRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridVirtualizationSelectors.gridVirtualizationRowEnabledSelector) && !_isJSDOM.isJSDOM;
@@ -270,6 +270,7 @@ const useGridVirtualScroller = () => {
     if (!params.rows && !currentPage.range) {
       return [];
     }
+    const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
     let baseRenderContext = renderContext;
     if (params.renderContext) {
       baseRenderContext = params.renderContext;
@@ -315,6 +316,16 @@ const useGridVirtualScroller = () => {
         id,
         model
       } = rowModels[rowIndexInPage];
+
+      // In certain cases, the state might already be updated and `currentPage.rows` (which sets `rowModels`)
+      // contains stale data.
+      // In that case, skip any further row processing.
+      // See:
+      // - https://github.com/mui/mui-x/issues/16638
+      // - https://github.com/mui/mui-x/issues/17022
+      if (!rowTree[id]) {
+        return;
+      }
       const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
 
       // NOTE: This is an expensive feature, the colSpan code could be optimized.
@@ -500,9 +511,9 @@ const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
-  (0, _utils.useGridApiOptionHandler)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
-  (0, _utils.useGridApiOptionHandler)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
-  (0, _utils.useGridApiOptionHandler)(apiRef, 'columnsChange', forceUpdateRenderContext);
+  (0, _utils.useGridEventPriority)(apiRef, 'sortedRowsSet', forceUpdateRenderContext);
+  (0, _utils.useGridEventPriority)(apiRef, 'paginationModelChange', forceUpdateRenderContext);
+  (0, _utils.useGridEventPriority)(apiRef, 'columnsChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -550,7 +561,7 @@ function needsHorizontalScrollbarSelector(apiRef) {
 function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
   const dimensions = (0, _gridDimensionsSelectors.gridDimensionsSelector)(apiRef);
   const currentPage = (0, _useGridVisibleRows.getVisibleRows)(apiRef, rootProps);
-  const visibleColumns = rootProps.unstable_listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
+  const visibleColumns = rootProps.listView ? [(0, _gridListViewSelectors.gridListColumnSelector)(apiRef)] : (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef);
   const hiddenCellsOriginMap = (0, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsOriginMapSelector)(apiRef);
   const lastRowId = apiRef.current.state.rows.dataRowIds.at(-1);
   const lastColumn = visibleColumns.at(-1);
@@ -574,7 +585,7 @@ function inputsSelector(apiRef, rootProps, enabledForRows, enabledForColumns) {
     pinnedColumns: (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef),
     visibleColumns,
     hiddenCellsOriginMap,
-    listView: rootProps.unstable_listView ?? false,
+    listView: rootProps.listView ?? false,
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight
   };
 }

package/hooks/utils/index.d.ts

@@ -1,4 +1,4 @@
-export { useGridApiEventHandler, useGridApiOptionHandler, unstable_resetCleanupTracking } from "./useGridApiEventHandler.js";
+export { useGridEvent, useGridEventPriority, unstable_resetCleanupTracking } from "./useGridEvent.js";
 export * from "./useGridApiMethod.js";
 export * from "./useGridLogger.js";
 export { useGridSelector } from "./useGridSelector.js";

package/hooks/utils/index.js

@@ -4,27 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  useGridApiEventHandler: true,
-  useGridApiOptionHandler: true,
+  useGridEvent: true,
+  useGridEventPriority: true,
   unstable_resetCleanupTracking: true,
   useGridSelector: true
 };
 Object.defineProperty(exports, "unstable_resetCleanupTracking", {
   enumerable: true,
   get: function () {
-    return _useGridApiEventHandler.unstable_resetCleanupTracking;
+    return _useGridEvent.unstable_resetCleanupTracking;
   }
 });
-Object.defineProperty(exports, "useGridApiEventHandler", {
+Object.defineProperty(exports, "useGridEvent", {
   enumerable: true,
   get: function () {
-    return _useGridApiEventHandler.useGridApiEventHandler;
+    return _useGridEvent.useGridEvent;
   }
 });
-Object.defineProperty(exports, "useGridApiOptionHandler", {
+Object.defineProperty(exports, "useGridEventPriority", {
   enumerable: true,
   get: function () {
-    return _useGridApiEventHandler.useGridApiOptionHandler;
+    return _useGridEvent.useGridEventPriority;
   }
 });
 Object.defineProperty(exports, "useGridSelector", {
@@ -33,7 +33,7 @@ Object.defineProperty(exports, "useGridSelector", {
     return _useGridSelector.useGridSelector;
   }
 });
-var _useGridApiEventHandler = require("./useGridApiEventHandler");
+var _useGridEvent = require("./useGridEvent");
 var _useGridApiMethod = require("./useGridApiMethod");
 Object.keys(_useGridApiMethod).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/hooks/utils/useGridAriaAttributes.js

@@ -19,8 +19,14 @@ const useGridAriaAttributes = () => {
   const accessibleRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridExpandedRowCountSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector);
   const pinnedRowsCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsCountSelector);
+  const ariaLabel = rootProps['aria-label'];
+  const ariaLabelledby = rootProps['aria-labelledby'];
+  // `aria-label` and `aria-labelledby` should take precedence over `label`
+  const shouldUseLabelAsAriaLabel = !ariaLabel && !ariaLabelledby && rootProps.label;
   return {
     role: 'grid',
+    'aria-label': shouldUseLabelAsAriaLabel ? rootProps.label : ariaLabel,
+    'aria-labelledby': ariaLabelledby,
     'aria-colcount': visibleColumns.length,
     'aria-rowcount': headerGroupingMaxDepth + 1 + pinnedRowsCount + accessibleRowCount,
     'aria-multiselectable': (0, _utils.isMultipleRowSelectionEnabled)(rootProps)

package/{modern/hooks/utils/useGridApiEventHandler.d.ts → hooks/utils/useGridEvent.d.ts}

@@ -4,8 +4,8 @@ import { GridEventListener, GridEvents } from "../../models/events/index.js";
 import { TimerBasedCleanupTracking } from "../../utils/cleanupTracking/TimerBasedCleanupTracking.js";
 import { FinalizationRegistryBasedCleanupTracking } from "../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking.js";
 import type { GridApiCommon } from '../../models';
-export declare function useGridApiEventHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: RefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions): void;
-export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: RefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
+export declare function useGridEvent<Api extends GridApiCommon, E extends GridEvents>(apiRef: RefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions): void;
+export declare function useGridEventPriority<Api extends GridApiCommon, E extends GridEvents>(apiRef: RefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
 export declare function unstable_resetCleanupTracking(): void;
 export declare const internal_registryContainer: {
   current: TimerBasedCleanupTracking | FinalizationRegistryBasedCleanupTracking;

package/hooks/utils/{useGridApiEventHandler.js → useGridEvent.js}

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.internal_registryContainer = void 0;
 exports.unstable_resetCleanupTracking = unstable_resetCleanupTracking;
-exports.useGridApiEventHandler = useGridApiEventHandler;
-exports.useGridApiOptionHandler = useGridApiOptionHandler;
+exports.useGridEvent = useGridEvent;
+exports.useGridEventPriority = useGridEventPriority;
 var React = _interopRequireWildcard(require("react"));
 var _TimerBasedCleanupTracking = require("../../utils/cleanupTracking/TimerBasedCleanupTracking");
 var _FinalizationRegistryBasedCleanupTracking = require("../../utils/cleanupTracking/FinalizationRegistryBasedCleanupTracking");
@@ -24,7 +24,7 @@ const registryContainer = {
   current: createRegistry()
 };
 let cleanupTokensCounter = 0;
-function useGridApiEventHandler(apiRef, eventName, handler, options) {
+function useGridEvent(apiRef, eventName, handler, options) {
   const objectRetainedByReact = React.useState(ObjectToBeRetainedByReact.create)[0];
   const subscription = React.useRef(null);
   const handlerRef = React.useRef(null);
@@ -80,8 +80,8 @@ function useGridApiEventHandler(apiRef, eventName, handler, options) {
 const OPTIONS_IS_FIRST = {
   isFirst: true
 };
-function useGridApiOptionHandler(apiRef, eventName, handler) {
-  useGridApiEventHandler(apiRef, eventName, handler, OPTIONS_IS_FIRST);
+function useGridEventPriority(apiRef, eventName, handler) {
+  useGridEvent(apiRef, eventName, handler, OPTIONS_IS_FIRST);
 }
 
 // TODO: move to @mui/x-data-grid/internals

package/hooks/utils/useGridNativeEventListener.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useGridNativeEventListener = void 0;
 var _useGridLogger = require("./useGridLogger");
-var _useGridApiEventHandler = require("./useGridApiEventHandler");
+var _useGridEvent = require("./useGridEvent");
 const useGridNativeEventListener = (apiRef, ref, eventName, handler, options) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useNativeEventListener');
-  (0, _useGridApiEventHandler.useGridApiOptionHandler)(apiRef, 'rootMount', () => {
+  (0, _useGridEvent.useGridEventPriority)(apiRef, 'rootMount', () => {
     const targetElement = ref();
     if (!targetElement || !eventName) {
       return undefined;

package/hooks/utils/useGridVisibleRows.d.ts

@@ -2,12 +2,12 @@ import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridApiCommon } from '../../models';
 export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: RefObject<Api>, props?: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
-  rows: import("../..").GridRowEntry<import("../..").GridValidRowModel>[];
+  rows: import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
   range: {
     firstRowIndex: number;
     lastRowIndex: number;
   } | null;
-  rowIdToIndexMap: Map<import("../..").GridRowId, number>;
+  rowIdToIndexMap: Map<import("@mui/x-data-grid").GridRowId, number>;
 };
 /**
  * Computes the list of rows that are reachable by scroll.
@@ -17,10 +17,10 @@ export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: RefObje
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: RefObject<Api>, props?: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
-  rows: import("../..").GridRowEntry<import("../..").GridValidRowModel>[];
+  rows: import("@mui/x-data-grid").GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[];
   range: {
     firstRowIndex: number;
     lastRowIndex: number;
   } | null;
-  rowIdToIndexMap: Map<import("../..").GridRowId, number>;
+  rowIdToIndexMap: Map<import("@mui/x-data-grid").GridRowId, number>;
 };

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v8.0.0-beta.1
+ * @mui/x-data-grid v8.0.0-beta.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/locales/deDE.js

@@ -114,7 +114,7 @@ const deDEGrid = {
   filterValueFalse: 'Nein',
   // Column menu text
   columnMenuLabel: 'Menü',
-  // columnMenuAriaLabel: (columnName: string) => `${columnName} column menu`,
+  columnMenuAriaLabel: columnName => `${columnName} Spaltenmenü`,
   columnMenuShowColumns: 'Zeige alle Spalten',
   columnMenuManageColumns: 'Spalten verwalten',
   columnMenuFilter: 'Filter',
@@ -161,18 +161,18 @@ const deDEGrid = {
   collapseDetailPanel: 'Zuklappen',
   // Pagination
   paginationRowsPerPage: 'Zeilen pro Seite:',
-  // paginationDisplayedRows: ({
-  //   from,
-  //   to,
-  //   count,
-  //   estimated
-  // }) => {
-  //   if (!estimated) {
-  //     return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-  //   }
-  //   const estimatedLabel = estimated && estimated > to ? `around ${estimated}` : `more than ${to}`;
-  //   return `${from}–${to} of ${count !== -1 ? count : estimatedLabel}`;
-  // },
+  paginationDisplayedRows: ({
+    from,
+    to,
+    count,
+    estimated
+  }) => {
+    if (!estimated) {
+      return `${from}–${to} von ${count !== -1 ? count : `mehr als ${to}`}`;
+    }
+    const estimatedLabel = estimated && estimated > to ? `ungefähr ${estimated}` : `mehr als ${to}`;
+    return `${from}–${to} von ${count !== -1 ? count : estimatedLabel}`;
+  },
   paginationItemAriaLabel: type => {
     if (type === 'first') {
       return 'Zur ersten Seite';

package/material/augmentation.d.ts

@@ -0,0 +1,74 @@
+import type { AutocompleteProps } from '@mui/material/Autocomplete';
+import type { BadgeProps } from '@mui/material/Badge';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { CircularProgressProps } from '@mui/material/CircularProgress';
+import type { DividerProps } from '@mui/material/Divider';
+import type { LinearProgressProps } from '@mui/material/LinearProgress';
+import type { MenuListProps } from '@mui/material/MenuList';
+import type { MenuItemProps } from '@mui/material/MenuItem';
+import type { TextFieldProps } from '@mui/material/TextField';
+import type { SwitchProps } from '@mui/material/Switch';
+import type { ButtonProps } from '@mui/material/Button';
+import type { IconButtonProps } from '@mui/material/IconButton';
+import type { TablePaginationProps } from '@mui/material/TablePagination';
+import type { PopperProps } from '@mui/material/Popper';
+import type { TooltipProps } from '@mui/material/Tooltip';
+import type { InputProps } from '@mui/material/Input';
+import type { SelectProps } from '@mui/material/Select';
+import type { SkeletonProps } from '@mui/material/Skeleton';
+declare module '@mui/x-data-grid' {
+  interface BaseAutocompletePropsOverrides {
+    material?: Partial<AutocompleteProps<string, true, false, true>>;
+  }
+  interface BaseBadgePropsOverrides {
+    material?: Partial<BadgeProps>;
+  }
+  interface BaseCheckboxPropsOverrides {
+    material?: Partial<CheckboxProps>;
+  }
+  interface BaseCircularProgressPropsOverrides {
+    material?: Partial<CircularProgressProps>;
+  }
+  interface BaseDividerPropsOverrides {
+    material?: Partial<DividerProps>;
+  }
+  interface BaseLinearProgressPropsOverrides {
+    material?: Partial<LinearProgressProps>;
+  }
+  interface BaseMenuListPropsOverrides {
+    material?: Partial<MenuListProps>;
+  }
+  interface BaseMenuItemPropsOverrides {
+    material?: Partial<MenuItemProps>;
+  }
+  interface BaseTextFieldPropsOverrides {
+    material?: Partial<TextFieldProps>;
+  }
+  interface BaseSwitchPropsOverrides {
+    material?: Partial<SwitchProps>;
+  }
+  interface BaseButtonPropsOverrides {
+    material?: Partial<ButtonProps>;
+  }
+  interface BaseIconButtonPropsOverrides {
+    material?: Partial<IconButtonProps>;
+  }
+  interface BasePaginationPropsOverrides {
+    material?: Partial<TablePaginationProps>;
+  }
+  interface BasePopperPropsOverrides {
+    material?: Partial<PopperProps>;
+  }
+  interface BaseTooltipPropsOverrides {
+    material?: Partial<TooltipProps>;
+  }
+  interface BaseInputPropsOverrides {
+    material?: Partial<InputProps>;
+  }
+  interface BaseSelectPropsOverrides {
+    material?: Partial<SelectProps>;
+  }
+  interface BaseSkeletonPropsOverrides {
+    material?: Partial<SkeletonProps>;
+  }
+}

package/material/augmentation.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/material/index.d.ts

@@ -1,5 +1,6 @@
 import type { GridIconSlotsComponent } from '../models';
 import type { GridBaseSlots } from '../models/gridSlotsComponent';
+import "./augmentation.js";
 export { useMaterialCSSVariables } from "./variables.js";
 declare const materialSlots: GridBaseSlots & GridIconSlotsComponent;
 export default materialSlots;