@mui/x-data-grid 7.22.1 → 8.0.0-alpha.0

package/hooks/features/editing/useGridCellEditing.js

@@ -241,26 +241,45 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = useEventCallback(params => {
+  const updateStateToStartCellEditMode = useEventCallback(async params => {
     const {
       id,
       field,
       deleteValue,
       initialValue
     } = params;
-    let newValue = apiRef.current.getCellValue(id, field);
+    const value = apiRef.current.getCellValue(id, field);
+    let newValue = value;
     if (deleteValue) {
       newValue = getDefaultCellValue(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }
-    const newProps = {
+    const column = apiRef.current.getColumn(field);
+    const shouldProcessEditCellProps = !!column.preProcessEditCellProps && deleteValue;
+    let newProps = {
       value: newValue,
       error: false,
-      isProcessingProps: false
+      isProcessingProps: shouldProcessEditCellProps
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
+    if (shouldProcessEditCellProps) {
+      newProps = await Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps,
+        hasChanged: newValue !== value
+      }));
+      // Check if still in edit mode before updating
+      if (apiRef.current.getCellMode(id, field) === GridCellModes.Edit) {
+        const editingState = gridEditRowsStateSelector(apiRef.current.state);
+        updateOrDeleteFieldState(id, field, _extends({}, newProps, {
+          value: editingState[id][field].value,
+          isProcessingProps: false
+        }));
+      }
+    }
   });
   const stopCellEditMode = React.useCallback(params => {
     const {

package/hooks/features/editing/useGridRowEditing.js

@@ -318,10 +318,11 @@ export const useGridRowEditing = (apiRef, props) => {
       if (!cellParams.isEditable) {
         return acc;
       }
+      const column = apiRef.current.getColumn(field);
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
         if (deleteValue) {
-          newValue = getDefaultCellValue(apiRef.current.getColumn(field));
+          newValue = getDefaultCellValue(column);
         } else if (initialValue) {
           newValue = initialValue;
         }
@@ -329,7 +330,7 @@ export const useGridRowEditing = (apiRef, props) => {
       acc[field] = {
         value: newValue,
         error: false,
-        isProcessingProps: false
+        isProcessingProps: !!column.preProcessEditCellProps && deleteValue
       };
       return acc;
     }, {});
@@ -337,6 +338,26 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
+    columnFields.filter(field => !!apiRef.current.getColumn(field).preProcessEditCellProps && deleteValue).forEach(field => {
+      const column = apiRef.current.getColumn(field);
+      const value = apiRef.current.getCellValue(id, field);
+      const newValue = deleteValue ? getDefaultCellValue(column) : initialValue ?? value;
+      Promise.resolve(column.preProcessEditCellProps({
+        id,
+        row: apiRef.current.getRow(id),
+        props: newProps[field],
+        hasChanged: newValue !== value
+      })).then(processedProps => {
+        // Check if still in edit mode before updating
+        if (apiRef.current.getRowMode(id) === GridRowModes.Edit) {
+          const editingState = gridEditRowsStateSelector(apiRef.current.state);
+          updateOrDeleteFieldState(id, field, _extends({}, processedProps, {
+            value: editingState[id][field].value,
+            isProcessingProps: false
+          }));
+        }
+      });
+    });
   });
   const stopRowEditMode = React.useCallback(params => {
     const {

package/hooks/features/export/useGridCsvExport.js

@@ -5,7 +5,7 @@ import { exportAs } from "../../../utils/exportAs.js";
 import { buildCSV } from "./serializers/csvSerializer.js";
 import { getColumnsToExport, defaultGetRowsToExport } from "./utils.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
-import { GridCsvExportMenuItem } from "../../../components/toolbar/GridToolbarExport.js";
+import { GridCsvExportMenuItem } from "../../../components/toolbar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * @requires useGridColumns (state)

package/hooks/features/export/useGridPrintExport.js

@@ -11,7 +11,7 @@ import { GRID_ID_AUTOGENERATED } from "../rows/gridRowsUtils.js";
 import { defaultGetRowsToExport, getColumnsToExport } from "./utils.js";
 import { getDerivedPaginationModel } from "../pagination/useGridPaginationModel.js";
 import { useGridRegisterPipeProcessor } from "../../core/pipeProcessing/index.js";
-import { GridPrintExportMenuItem } from "../../../components/toolbar/GridToolbarExport.js";
+import { GridPrintExportMenuItem } from "../../../components/toolbar/index.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { jsx as _jsx } from "react/jsx-runtime";

package/hooks/features/pagination/useGridPaginationModel.js

@@ -75,7 +75,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       pagination: _extends({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'setPaginationModel');
   }, [apiRef, logger, props.signature]);
   const paginationModelApi = {
     setPage,
@@ -113,7 +113,7 @@ export const useGridPaginationModel = (apiRef, props) => {
       pagination: _extends({}, state.pagination, {
         paginationModel: getDerivedPaginationModel(state.pagination, props.signature, paginationModel)
       })
-    }));
+    }), 'stateRestorePreProcessing');
     return params;
   }, [apiRef, props.autoPageSize, props.signature]);
   useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);

package/hooks/features/rowSelection/useGridRowSelection.d.ts

@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;
+export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "filterMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "rowSelectionPropagation" | "signature">) => void;

package/hooks/features/rowSelection/useGridRowSelection.js

@@ -4,7 +4,7 @@ import { GridSignature, useGridApiEventHandler } from "../../utils/useGridApiEve
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { useGridLogger } from "../../utils/useGridLogger.js";
 import { useGridSelector } from "../../utils/useGridSelector.js";
-import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
+import { gridRowsLookupSelector, gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from "../rows/gridRowsSelector.js";
 import { gridRowSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from "./gridRowSelectionSelector.js";
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from "../pagination/index.js";
 import { gridFocusCellSelector } from "../focus/gridFocusStateSelector.js";
@@ -171,30 +171,33 @@ export const useGridRowSelection = (apiRef, props) => {
     let newSelection;
     if (resetSelection) {
       if (isSelected) {
-        newSelection = selectableIds;
+        newSelection = new Set(selectableIds);
         if (applyAutoSelection) {
           const addRow = rowId => {
-            newSelection.push(rowId);
+            newSelection.add(rowId);
           };
           selectableIds.forEach(id => {
             findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           });
         }
       } else {
-        newSelection = [];
+        newSelection = new Set();
+      }
+      const currentLookup = selectedIdsLookupSelector(apiRef);
+      if (newSelection.size === Object.keys(currentLookup).length && Array.from(newSelection).every(id => currentLookup[id] === id)) {
+        return;
       }
     } else {
-      // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
-      const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+      newSelection = new Set(Object.values(selectedIdsLookupSelector(apiRef)));
       const addRow = rowId => {
-        selectionLookup[rowId] = rowId;
+        newSelection.add(rowId);
       };
       const removeRow = rowId => {
-        delete selectionLookup[rowId];
+        newSelection.delete(rowId);
       };
       selectableIds.forEach(id => {
         if (isSelected) {
-          selectionLookup[id] = id;
+          newSelection.add(id);
           if (applyAutoSelection) {
             findRowsToSelect(apiRef, tree, id, props.rowSelectionPropagation?.descendants ?? false, props.rowSelectionPropagation?.parents ?? false, addRow);
           }
@@ -205,11 +208,10 @@ export const useGridRowSelection = (apiRef, props) => {
           }
         }
       });
-      newSelection = Object.values(selectionLookup);
     }
-    const isSelectionValid = newSelection.length < 2 || canHaveMultipleSelection;
+    const isSelectionValid = newSelection.size < 2 || canHaveMultipleSelection;
     if (isSelectionValid) {
-      apiRef.current.setRowSelectionModel(newSelection);
+      apiRef.current.setRowSelectionModel(Array.from(newSelection));
     }
   }, [logger, applyAutoSelection, canHaveMultipleSelection, apiRef, tree, props.rowSelectionPropagation?.descendants, props.rowSelectionPropagation?.parents]);
   const selectRowRange = React.useCallback(({
@@ -252,13 +254,20 @@ export const useGridRowSelection = (apiRef, props) => {
       return;
     }
     const currentSelection = gridRowSelectionStateSelector(apiRef.current.state);
+    const rowsLookup = gridRowsLookupSelector(apiRef);
     const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
 
     // We clone the existing object to avoid mutating the same object returned by the selector to others part of the project
     const selectionLookup = _extends({}, selectedIdsLookupSelector(apiRef));
+    const isNonExistent = id => {
+      if (props.filterMode === 'server') {
+        return !rowsLookup[id];
+      }
+      return filteredRowsLookup[id] !== true;
+    };
     let hasChanged = false;
     currentSelection.forEach(id => {
-      if (filteredRowsLookup[id] !== true) {
+      if (isNonExistent(id)) {
         if (props.keepNonExistentRowsSelected) {
           return;
         }
@@ -284,15 +293,20 @@ export const useGridRowSelection = (apiRef, props) => {
         }
       }
     });
-    if (hasChanged || isNestedData && !sortModelUpdated) {
+
+    // For nested data, on row tree updation (filtering, adding rows, etc.) when the selection is
+    // not empty, we need to re-run scanning of the tree to propagate the selection changes
+    // Example: A parent whose de-selected children are filtered out should now be selected
+    const shouldReapplyPropagation = isNestedData && props.rowSelectionPropagation?.parents && Object.keys(selectionLookup).length > 0;
+    if (hasChanged || shouldReapplyPropagation && !sortModelUpdated) {
       const newSelection = Object.values(selectionLookup);
-      if (isNestedData) {
+      if (shouldReapplyPropagation) {
         apiRef.current.selectRows(newSelection, true, true);
       } else {
         apiRef.current.setRowSelectionModel(newSelection);
       }
     }
-  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, tree]);
+  }, [apiRef, isNestedData, props.rowSelectionPropagation?.parents, props.keepNonExistentRowsSelected, props.filterMode, tree]);
   const handleSingleRowSelection = React.useCallback((id, event) => {
     const hasCtrlKey = event.metaKey || event.ctrlKey;
 

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -37,7 +37,7 @@ export declare function calculatePinnedRowsHeight(apiRef: React.MutableRefObject
     top: number;
     bottom: number;
 };
-export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>): string;
+export declare const minimalContentHeight = "var(--DataGrid-overlayHeight, calc(var(--height) * 2))";
 export declare function computeRowsUpdates(apiRef: React.MutableRefObject<GridApiCommunity>, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId']): GridRowModelUpdate[];
 export declare const getValidRowHeight: (rowHeightProp: any, defaultRowHeight: number, warningMessage: string) => number;
 export declare const rowHeightWarning: string;

package/hooks/features/rows/gridRowsUtils.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { gridPinnedRowsSelector } from "./gridRowsSelector.js";
-import { gridDimensionsSelector } from "../dimensions/gridDimensionsSelectors.js";
 export const GRID_ROOT_GROUP_ID = `auto-generated-group-node-root`;
 export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated');
 export const buildRootGroup = () => ({
@@ -285,10 +284,7 @@ export function calculatePinnedRowsHeight(apiRef) {
     bottom: bottomPinnedRowsHeight
   };
 }
-export function getMinimalContentHeight(apiRef) {
-  const dimensions = gridDimensionsSelector(apiRef.current.state);
-  return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
-}
+export const minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))';
 export function computeRowsUpdates(apiRef, updates, getRowId) {
   const nonPinnedRowsUpdates = [];
   updates.forEach(update => {

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -21,11 +21,11 @@ import { clamp, range } from "../../../utils/utils.js";
 import { selectedIdsLookupSelector } from "../rowSelection/gridRowSelectionSelector.js";
 import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { getFirstNonSpannedColumnToRender } from "../columns/gridColumnsUtils.js";
-import { getMinimalContentHeight } from "../rows/gridRowsUtils.js";
 import { gridRenderContextSelector, gridVirtualizationRowEnabledSelector, gridVirtualizationColumnEnabledSelector } from "./gridVirtualizationSelectors.js";
 import { EMPTY_RENDER_CONTEXT } from "./useGridVirtualization.js";
 import { gridRowSpanningHiddenCellsOriginMapSelector } from "../rows/gridRowSpanningSelectors.js";
 import { gridListColumnSelector } from "../listView/gridListViewSelectors.js";
+import { minimalContentHeight } from "../rows/gridRowsUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MINIMUM_COLUMN_WIDTH = 50;
 var ScrollDirection = /*#__PURE__*/function (ScrollDirection) {
@@ -381,11 +381,11 @@ export const useGridVirtualScroller = () => {
       flexBasis: contentHeight,
       flexShrink: 0
     };
-    if (rootProps.autoHeight && currentPage.rows.length === 0) {
-      size.flexBasis = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows.
+    if (size.flexBasis === 0) {
+      size.flexBasis = minimalContentHeight; // Give room to show the overlay when there no rows.
     }
     return size;
-  }, [apiRef, columnsTotalWidth, contentHeight, needsHorizontalScrollbar, rootProps.autoHeight, currentPage.rows.length]);
+  }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]);
   React.useEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
   }, [apiRef, contentSize]);

package/hooks/utils/useGridSelector.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { fastObjectShallowCompare } from '@mui/x-internals/fastObjectShallowCompare';
 import type { GridApiCommon } from '../../models/api/gridApiCommon';
-import { OutputSelector, OutputSelectorV8 } from '../../utils/createSelector';
+import type { 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 argsEqual: (prev: any, curr: any) => boolean;
 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 declare const useGridSelectorV8: <Api extends GridApiCommon, Args, T>(apiRef: React.MutableRefObject<Api>, selector: Selector<Api, Args, T>, args?: Args, equals?: <U = T>(a: U, b: U) => boolean) => T;
 export {};

package/hooks/utils/useGridSelector.js

@@ -23,10 +23,26 @@ function applySelectorV8(apiRef, selector, args, instanceId) {
 }
 const defaultCompare = Object.is;
 export const objectShallowCompare = fastObjectShallowCompare;
+const arrayShallowCompare = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  return a.length === b.length && a.every((v, i) => v === b[i]);
+};
+export const argsEqual = (prev, curr) => {
+  let fn = Object.is;
+  if (curr instanceof Array) {
+    fn = arrayShallowCompare;
+  } else if (curr instanceof Object) {
+    fn = objectShallowCompare;
+  }
+  return fn(prev, curr);
+};
 const createRefs = () => ({
   state: null,
   equals: null,
-  selector: null
+  selector: null,
+  args: null
 });
 
 // TODO v8: Remove this function
@@ -71,9 +87,18 @@ export const useGridSelectorV8 = (apiRef, selector, args = undefined, equals = d
   refs.current.state = state;
   refs.current.equals = equals;
   refs.current.selector = selector;
+  const prevArgs = refs.current.args;
+  refs.current.args = args;
+  if (didInit && !argsEqual(prevArgs, args)) {
+    const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
+    if (!refs.current.equals(refs.current.state, newState)) {
+      refs.current.state = newState;
+      setState(newState);
+    }
+  }
   useOnMount(() => {
     return apiRef.current.store.subscribe(() => {
-      const newState = applySelectorV8(apiRef, refs.current.selector, args, apiRef.current.instanceId);
+      const newState = applySelectorV8(apiRef, refs.current.selector, refs.current.args, apiRef.current.instanceId);
       if (!refs.current.equals(refs.current.state, newState)) {
         refs.current.state = newState;
         setState(newState);

package/index.d.ts

@@ -13,7 +13,6 @@ export * from './context';
 export * from './colDef';
 export * from './utils';
 export type { DataGridProps, GridExperimentalFeatures } from './models/props/DataGridProps';
-export type { GridToolbarExportProps } from './components/toolbar/GridToolbarExport';
 export type { GridExportFormat, GridExportExtension } from './models/gridExport';
 export { GridColumnHeaders } from './components/GridColumnHeaders';
 export type { GridColumnHeadersProps } from './components/GridColumnHeaders';

package/index.js

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

package/locales/plPL.js

@@ -30,11 +30,10 @@ const plPLGrid = {
   toolbarExportPrint: 'Drukuj',
   toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Szukaj',
+  columnsManagementNoColumns: 'Brak kolumn',
+  columnsManagementShowHideAllText: 'Wyświetl/Ukryj wszystkie',
+  columnsManagementReset: 'Resetuj',
   // Filter panel text
   filterPanelAddFilter: 'Dodaj filtr',
   filterPanelRemoveAll: 'Usuń wszystkie',
@@ -48,9 +47,9 @@ const plPLGrid = {
   filterPanelInputPlaceholder: 'Filtrowana wartość',
   // Filter operators text
   filterOperatorContains: 'zawiera',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'nie zawiera',
   filterOperatorEquals: 'równa się',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'nie równa się',
   filterOperatorStartsWith: 'zaczyna się od',
   filterOperatorEndsWith: 'kończy się na',
   filterOperatorIs: 'równa się',
@@ -71,27 +70,26 @@ const plPLGrid = {
 
   // Header filter operators text
   headerFilterOperatorContains: 'Zawiera',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Nie zawiera',
   headerFilterOperatorEquals: 'Równa się',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Nie równa się',
   headerFilterOperatorStartsWith: 'Zaczyna się od',
   headerFilterOperatorEndsWith: 'Kończy się na',
-  // headerFilterOperatorIs: 'Is',
+  headerFilterOperatorIs: 'Jest',
   headerFilterOperatorNot: 'Niepuste',
-  // headerFilterOperatorAfter: 'Is after',
-  // headerFilterOperatorOnOrAfter: 'Is on or after',
-  // headerFilterOperatorBefore: 'Is before',
-  // headerFilterOperatorOnOrBefore: 'Is on or before',
-  // headerFilterOperatorIsEmpty: 'Is empty',
-  // headerFilterOperatorIsNotEmpty: 'Is not empty',
-  // headerFilterOperatorIsAnyOf: 'Is any of',
-  // 'headerFilterOperator=': 'Equals',
-  // 'headerFilterOperator!=': 'Not equals',
-  // 'headerFilterOperator>': 'Greater than',
-  // 'headerFilterOperator>=': 'Greater than or equal to',
-  // 'headerFilterOperator<': 'Less than',
-  // 'headerFilterOperator<=': 'Less than or equal to',
-
+  headerFilterOperatorAfter: 'Jest po',
+  headerFilterOperatorOnOrAfter: 'Jest w lub po',
+  headerFilterOperatorBefore: 'Jest przed',
+  headerFilterOperatorOnOrBefore: 'Jest w lub przed',
+  headerFilterOperatorIsEmpty: 'Jest pusty',
+  headerFilterOperatorIsNotEmpty: 'Nie jest pusty',
+  headerFilterOperatorIsAnyOf: 'Is any of',
+  'headerFilterOperator=': 'Równa się',
+  'headerFilterOperator!=': 'Nie równa się',
+  'headerFilterOperator>': 'Większy niż',
+  'headerFilterOperator>=': 'Większy lub równy',
+  'headerFilterOperator<': 'Mniejszy niż',
+  'headerFilterOperator<=': 'Mniejszy lub równe',
   // Filter values text
   filterValueAny: 'dowolny',
   filterValueTrue: 'prawda',
@@ -139,14 +137,13 @@ const plPLGrid = {
   groupColumn: name => `Grupuj według ${name}`,
   unGroupColumn: name => `Rozgrupuj ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'Szczegóły',
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń',
   // Row reordering text
-  rowReorderingHeaderName: 'Porządkowanie wierszy'
-
+  rowReorderingHeaderName: 'Porządkowanie wierszy',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
+  aggregationMenuItemHeader: 'Agregacja'
   // aggregationFunctionLabelSum: 'sum',
   // aggregationFunctionLabelAvg: 'avg',
   // aggregationFunctionLabelMin: 'min',

package/locales/trTR.js

@@ -69,9 +69,9 @@ const trTRGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Şunu içerir',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'İçermez',
   headerFilterOperatorEquals: 'Şuna eşittir',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Eşit değildir',
   headerFilterOperatorStartsWith: 'Şununla başlar',
   headerFilterOperatorEndsWith: 'Şununla biter',
   headerFilterOperatorIs: 'Eşittir',

package/material/index.js

@@ -2,6 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
 import MUIDivider from '@mui/material/Divider';
+import MUIMenuList from '@mui/material/MenuList';
+import MUIMenuItem from '@mui/material/MenuItem';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
@@ -56,6 +58,8 @@ const materialSlots = _extends({}, iconSlots, {
   baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
   baseDivider: MUIDivider,
+  baseMenuList: MUIMenuList,
+  baseMenuItem: MUIMenuItem,
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,

package/models/gridSlotsComponent.d.ts

@@ -23,6 +23,16 @@ export interface GridBaseSlots {
      * @default Divider
      */
     baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
+    /**
+     * The custom MenuList component used in the grid.
+     * @default MenuList
+     */
+    baseMenuList: React.JSXElementConstructor<GridSlotProps['baseMenuList']>;
+    /**
+     * The custom MenuItem component used in the grid.
+     * @default MenuItem
+     */
+    baseMenuItem: React.JSXElementConstructor<GridSlotProps['baseMenuItem']>;
     /**
      * The custom InputAdornment component used in the grid.
      * @default InputAdornment

package/models/gridSlotsComponentsProps.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import type { BadgeProps } from '@mui/material/Badge';
 import type { CheckboxProps } from '@mui/material/Checkbox';
+import type { MenuListProps } from '@mui/material/MenuList';
+import type { MenuItemProps } from '@mui/material/MenuItem';
 import type { TextFieldProps } from '@mui/material/TextField';
 import type { FormControlProps } from '@mui/material/FormControl';
 import type { SelectProps } from '@mui/material/Select';
@@ -38,6 +40,10 @@ export interface BaseCheckboxPropsOverrides {
 }
 export interface BaseDividerPropsOverrides {
 }
+export interface BaseMenuListPropsOverrides {
+}
+export interface BaseMenuItemPropsOverrides {
+}
 export interface BaseTextFieldPropsOverrides {
 }
 export interface BaseFormControlPropsOverrides {
@@ -104,6 +110,8 @@ export interface GridSlotProps {
     baseBadge: BadgeProps & BaseBadgePropsOverrides;
     baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides;
     baseDivider: DividerProps & BaseDividerPropsOverrides;
+    baseMenuList: MenuListProps & BaseMenuListPropsOverrides;
+    baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides;
     baseTextField: TextFieldProps & BaseTextFieldPropsOverrides;
     baseFormControl: FormControlProps & BaseFormControlPropsOverrides;
     baseSelect: SelectProps & BaseSelectPropsOverrides;

package/models/props/DataGridProps.d.ts

@@ -613,7 +613,7 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridPaginationModel} model Updated pagination model.
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
-    onPaginationModelChange?: (model: GridPaginationModel, details: GridCallbackDetails) => void;
+    onPaginationModelChange?: (model: GridPaginationModel, details: GridCallbackDetails<'pagination'>) => void;
     /**
      * Callback fired when the row count has changed.
      * @param {number} count Updated row count.

package/modern/colDef/gridBooleanOperators.js

@@ -1,14 +1,12 @@
-import { GridFilterInputBoolean } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
+import { GridFilterInputBoolean, sanitizeFilterItemValue } from "../components/panel/filterPanel/GridFilterInputBoolean.js";
 export const getGridBooleanOperators = () => [{
   value: 'is',
   getApplyFilterFn: filterItem => {
-    if (!filterItem.value) {
+    const sanitizedValue = sanitizeFilterItemValue(filterItem.value);
+    if (sanitizedValue === undefined) {
       return null;
     }
-    const valueAsBoolean = String(filterItem.value) === 'true';
-    return value => {
-      return Boolean(value) === valueAsBoolean;
-    };
+    return value => Boolean(value) === sanitizedValue;
   },
   InputComponent: GridFilterInputBoolean
 }];

package/modern/components/GridDetailPanels.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function GridDetailPanels(_) {
   return null;
 }

package/modern/components/GridPinnedRows.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function GridPinnedRows(_) {
   return null;
 }