@mui/x-data-grid 5.17.3 → 5.17.5

package/modern/components/GridRow.js

@@ -5,7 +5,7 @@ const _excluded = ["selected", "rowId", "row", "index", "style", "position", "ro
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { unstable_composeClasses as composeClasses, useForkRef } from '@mui/material';
 import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
@@ -55,7 +55,7 @@ const EmptyCell = ({
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const {
     selected,
     rowId,
@@ -88,6 +88,7 @@ function GridRow(props) {
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
   const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
   const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const handleRef = useForkRef(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const {
@@ -368,7 +369,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/_jsxs("div", _extends({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -381,8 +382,7 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/components/toolbar/GridToolbarFilterButton.js

@@ -71,7 +71,7 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
         children: activeFilters.map((item, index) => _extends({}, lookup[item.columnField] && /*#__PURE__*/_jsx("li", {
           children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
+                  ${item.value ?? ''}`
         }, index)))
       })]
     });

package/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id", "field"],
       _excluded2 = ["id", "field"];
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -185,7 +186,7 @@ export const useGridCellEditing = (apiRef, props) => {
     const isEditing = editingState[id] && editingState[id][field];
     return isEditing ? GridCellModes.Edit : GridCellModes.View;
   }, [apiRef]);
-  const updateCellModesModel = React.useCallback(newModel => {
+  const updateCellModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.cellModesModel;
 
     if (onCellModesModelChange && isNewModelDifferentFromProp) {
@@ -202,7 +203,7 @@ export const useGridCellEditing = (apiRef, props) => {
     setCellModesModel(newModel);
     cellModesModelRef.current = newModel;
     apiRef.current.publishEvent('cellModesModelChange', newModel);
-  }, [apiRef, onCellModesModelChange, props.cellModesModel, signature]);
+  });
   const updateFieldInCellModesModel = React.useCallback((id, field, newProps) => {
     // We use the ref because it always contain the up-to-date value, different from the state
     // that needs a rerender to reflect the new value
@@ -261,7 +262,7 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.Edit
     }, other));
   }, [throwIfNotEditable, throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStartCellEditMode = React.useCallback(params => {
+  const updateStateToStartCellEditMode = useEventCallback(params => {
     const {
       id,
       field,
@@ -274,7 +275,7 @@ export const useGridCellEditing = (apiRef, props) => {
     };
     updateOrDeleteFieldState(id, field, newProps);
     apiRef.current.setCellFocus(id, field);
-  }, [apiRef, updateOrDeleteFieldState]);
+  });
   const stopCellEditMode = React.useCallback(params => {
     const {
       id,
@@ -287,7 +288,7 @@ export const useGridCellEditing = (apiRef, props) => {
       mode: GridCellModes.View
     }, other));
   }, [throwIfNotInMode, updateFieldInCellModesModel]);
-  const updateStateToStopCellEditMode = React.useCallback(async params => {
+  const updateStateToStopCellEditMode = useEventCallback(async params => {
     const {
       id,
       field,
@@ -332,7 +333,11 @@ export const useGridCellEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevCellModesModel.current[id][field].mode = GridCellModes.Edit;
+        prevCellModesModel.current[id][field].mode = GridCellModes.Edit; // Revert the mode in the cellModesModel prop back to "edit"
+
+        updateFieldInCellModesModel(id, field, {
+          mode: GridCellModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -354,7 +359,7 @@ export const useGridCellEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishCellEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, throwIfNotInMode, updateFieldInCellModesModel, updateOrDeleteFieldState]);
+  });
   const setCellEditingEditCellValue = React.useCallback(async params => {
     const {
       id,

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["id"],
       _excluded2 = ["id"];
 import * as React from 'react';
+import { unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useGridApiEventHandler, useGridApiOptionHandler, GridSignature } from '../../utils/useGridApiEventHandler';
 import { GridEditModes, GridRowModes } from '../../../models/gridEditRowModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
@@ -250,7 +251,7 @@ export const useGridRowEditing = (apiRef, props) => {
     const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? GridRowModes.Edit : GridRowModes.View;
   }, [apiRef, props.editMode]);
-  const updateRowModesModel = React.useCallback(newModel => {
+  const updateRowModesModel = useEventCallback(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
 
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
@@ -267,7 +268,7 @@ export const useGridRowEditing = (apiRef, props) => {
     setRowModesModel(newModel);
     rowModesModelRef.current = newModel;
     apiRef.current.publishEvent('rowModesModelChange', newModel);
-  }, [apiRef, onRowModesModelChange, props.rowModesModel, signature]);
+  });
   const updateRowInRowModesModel = React.useCallback((id, newProps) => {
     const newModel = _extends({}, rowModesModelRef.current);
 
@@ -328,7 +329,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStartRowEditMode = React.useCallback(params => {
+  const updateStateToStartRowEditMode = useEventCallback(params => {
     const {
       id,
       fieldToFocus,
@@ -355,7 +356,7 @@ export const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   const stopRowEditMode = React.useCallback(params => {
     const {
       id
@@ -367,7 +368,7 @@ export const useGridRowEditing = (apiRef, props) => {
       mode: GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = React.useCallback(params => {
+  const updateStateToStopRowEditMode = useEventCallback(params => {
     const {
       id,
       ignoreModifications,
@@ -414,7 +415,11 @@ export const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = GridRowModes.Edit;
+        prevRowModesModel.current[id].mode = GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+        updateRowInRowModesModel(id, {
+          mode: GridRowModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -435,7 +440,7 @@ export const useGridRowEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,

package/modern/hooks/features/focus/useGridFocus.js

@@ -28,6 +28,14 @@ export const focusStateInitializer = state => _extends({}, state, {
 export const useGridFocus = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
+  const publishCellFocusOut = React.useCallback((cell, event) => {
+    if (cell) {
+      // The row might have been deleted
+      if (apiRef.current.getRow(cell.id)) {
+        apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
+      }
+    }
+  }, [apiRef]);
   const setCellFocus = React.useCallback((id, field) => {
     const focusedCell = gridFocusCellSelector(apiRef);
 
@@ -63,18 +71,14 @@ export const useGridFocus = (apiRef, props) => {
     if (focusedCell) {
       // There's a focused cell but another cell was clicked
       // Publishes an event to notify that the focus was lost
-      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field));
+      publishCellFocusOut(focusedCell, {});
     }
 
     apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
-  }, [apiRef, logger]);
+  }, [apiRef, logger, publishCellFocusOut]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
     const cell = gridFocusCellSelector(apiRef);
-
-    if (cell) {
-      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(cell.id, cell.field), event);
-    }
-
+    publishCellFocusOut(cell, event);
     apiRef.current.setState(state => {
       logger.debug(`Focusing on column header with colIndex=${field}`);
       return _extends({}, state, {
@@ -93,7 +97,7 @@ export const useGridFocus = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, logger]);
+  }, [apiRef, logger, publishCellFocusOut]);
   const moveFocusToRelativeCell = React.useCallback((id, field, direction) => {
     let columnIndexToFocus = apiRef.current.getColumnIndex(field);
     let rowIndexToFocus = apiRef.current.getRowIndexRelativeToVisibleRows(id);
@@ -202,11 +206,6 @@ export const useGridFocus = (apiRef, props) => {
 
     if (cellElement?.contains(event.target)) {
       return;
-    } // The row might have been deleted during the click
-
-
-    if (!apiRef.current.getRow(focusedCell.id)) {
-      return;
     }
 
     if (cellParams) {
@@ -221,9 +220,9 @@ export const useGridFocus = (apiRef, props) => {
       apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
       // Publishes an event to notify that the focus was lost
 
-      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+      publishCellFocusOut(focusedCell, event);
     }
-  }, [apiRef]);
+  }, [apiRef, publishCellFocusOut]);
   const handleCellModeChange = React.useCallback(params => {
     if (params.cellMode === 'view') {
       return;

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -87,16 +87,16 @@ export const useGridVirtualScroller = props => {
   const prevTotalWidth = React.useRef(columnsTotalWidth);
   const getNearestIndexToRender = React.useCallback(offset => {
     const lastMeasuredIndexRelativeToAllRows = apiRef.current.unstable_getLastMeasuredRowIndex();
-    const lastMeasuredIndexRelativeToCurrentPage = lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0);
-    const lastMeasuredIndex = Math.max(0, lastMeasuredIndexRelativeToCurrentPage);
-    let allRowsMeasured = lastMeasuredIndex === Infinity;
+    let allRowsMeasured = lastMeasuredIndexRelativeToAllRows === Infinity;
 
     if (currentPage.range?.lastRowIndex && !allRowsMeasured) {
       // Check if all rows in this page are already measured
-      allRowsMeasured = lastMeasuredIndex >= currentPage.range.lastRowIndex;
+      allRowsMeasured = lastMeasuredIndexRelativeToAllRows >= currentPage.range.lastRowIndex;
     }
 
-    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+    const lastMeasuredIndexRelativeToCurrentPage = clamp(lastMeasuredIndexRelativeToAllRows - (currentPage.range?.firstRowIndex || 0), 0, rowsMeta.positions.length);
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndexRelativeToCurrentPage] >= offset) {
       // If all rows were measured (when no row has "auto" as height) or all rows before the offset
       // were measured, then use a binary search because it's faster.
       return binarySearch(offset, rowsMeta.positions);
@@ -106,7 +106,7 @@ export const useGridVirtualScroller = props => {
     // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
 
 
-    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndexRelativeToCurrentPage);
   }, [apiRef, currentPage.range?.firstRowIndex, currentPage.range?.lastRowIndex, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.17.3
+/** @license MUI v5.17.5
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/locales/faIR.js

@@ -21,15 +21,15 @@ const faIRGrid = {
   toolbarFiltersTooltipShow: 'نمایش فیلترها',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} فیلترهای فعال` : `${count} فیلتر فعال`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'جستجو...',
+  toolbarQuickFilterLabel: 'جستجو',
+  toolbarQuickFilterDeleteIconLabel: 'حذف',
   // Export selector toolbar button text
   toolbarExport: 'خروجی',
   toolbarExportLabel: 'خروجی',
   toolbarExportCSV: 'دانلود به صورت CSV',
   toolbarExportPrint: 'چاپ',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'دانلود به صورت اکسل',
   // Columns panel text
   columnsPanelTextFieldLabel: 'پیداکردن ستون',
   columnsPanelTextFieldPlaceholder: 'عنوان ستون',
@@ -107,17 +107,17 @@ const faIRGrid = {
   groupColumn: name => `گروه‌بندی براساس ${name}`,
   unGroupColumn: name => `لغو گروه‌بندی براساس ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
+  detailPanelToggle: 'پنل جزئیات',
   expandDetailPanel: 'بازکردن پنل جزئیات',
-  collapseDetailPanel: 'بستن پنل جزئیات' // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  collapseDetailPanel: 'بستن پنل جزئیات',
+  // Row reordering text
+  rowReorderingHeaderName: 'ترتیب مجدد سطر',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  aggregationMenuItemHeader: 'تجمیع',
+  aggregationFunctionLabelSum: 'جمع',
+  aggregationFunctionLabelAvg: 'میانگین',
+  aggregationFunctionLabelMin: 'حداقل',
+  aggregationFunctionLabelMax: 'حداکثر',
+  aggregationFunctionLabelSize: 'اندازه'
 };
 export const faIR = getGridLocalization(faIRGrid, faIRCore);

package/modern/locales/fiFI.js

@@ -6,7 +6,7 @@ const fiFIGrid = {
   noResultsOverlayLabel: 'Ei tuloksia.',
   errorOverlayDefaultLabel: 'Tapahtui virhe.',
   // Density selector toolbar button text
-  toolbarDensity: 'Density',
+  toolbarDensity: 'Tiiveys',
   toolbarDensityLabel: 'Tiiveys',
   toolbarDensityCompact: 'Kompakti',
   toolbarDensityStandard: 'Vakio',
@@ -21,15 +21,15 @@ const fiFIGrid = {
   toolbarFiltersTooltipShow: 'Näytä suodattimet',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktiivista suodatinta` : `${count} aktiivinen suodatin`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Hae…',
+  toolbarQuickFilterLabel: 'Hae',
+  toolbarQuickFilterDeleteIconLabel: 'Tyhjennä',
   // Export selector toolbar button text
-  toolbarExport: 'Export',
-  toolbarExportLabel: 'Export',
+  toolbarExport: 'Vie',
+  toolbarExportLabel: 'Vie',
   toolbarExportCSV: 'Lataa CSV-muodossa',
   toolbarExportPrint: 'Tulosta',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Lataa Excel-muodossa',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Etsi sarake',
   columnsPanelTextFieldPlaceholder: 'Sarakkeen otsikko',
@@ -39,7 +39,7 @@ const fiFIGrid = {
   // Filter panel text
   filterPanelAddFilter: 'Lisää suodatin',
   filterPanelDeleteIconLabel: 'Poista',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'Logiikkaoperaattori',
   filterPanelOperators: 'Operaattorit',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'Ja',
@@ -60,7 +60,7 @@ const fiFIGrid = {
   filterOperatorOnOrBefore: 'on sama tai ennen',
   filterOperatorIsEmpty: 'on tyhjä',
   filterOperatorIsNotEmpty: 'ei ole tyhjä',
-  // filterOperatorIsAnyOf: 'is any of',
+  filterOperatorIsAnyOf: 'mikä tahansa seuraavista',
   // Filter values text
   filterValueAny: 'mikä tahansa',
   filterValueTrue: 'tosi',
@@ -85,10 +85,10 @@ const fiFIGrid = {
   footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} / ${totalCount.toLocaleString()}`,
   // Checkbox selection text
   checkboxSelectionHeaderName: 'Valintaruutu',
-  // checkboxSelectionSelectAllRows: 'Select all rows',
-  // checkboxSelectionUnselectAllRows: 'Unselect all rows',
-  // checkboxSelectionSelectRow: 'Select row',
-  // checkboxSelectionUnselectRow: 'Unselect row',
+  checkboxSelectionSelectAllRows: 'Valitse kaikki rivit',
+  checkboxSelectionUnselectAllRows: 'Poista kaikkien rivien valinta',
+  checkboxSelectionSelectRow: 'Valitse rivi',
+  checkboxSelectionUnselectRow: 'Poista rivin valinta',
   // Boolean cell text
   booleanCellTrueLabel: 'tosi',
   booleanCellFalseLabel: 'epätosi',
@@ -101,23 +101,23 @@ const fiFIGrid = {
   // Tree Data
   treeDataGroupingHeaderName: 'Ryhmä',
   treeDataExpand: 'Laajenna',
-  treeDataCollapse: 'Supista' // Grouping columns
-  // groupingColumnHeaderName: 'Group',
-  // groupColumn: name => `Group by ${name}`,
-  // unGroupColumn: name => `Stop grouping by ${name}`,
+  treeDataCollapse: 'Supista',
+  // Grouping columns
+  groupingColumnHeaderName: 'Ryhmä',
+  groupColumn: name => `Ryhmittelyperuste ${name}`,
+  unGroupColumn: name => `Poista ryhmittelyperuste ${name}`,
   // Master/detail
-  // detailPanelToggle: 'Detail panel toggle',
-  // expandDetailPanel: 'Expand',
-  // collapseDetailPanel: 'Collapse',
+  detailPanelToggle: 'Yksityiskohtapaneelin vaihto',
+  expandDetailPanel: 'Laajenna',
+  collapseDetailPanel: 'Tiivistä',
   // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
+  rowReorderingHeaderName: 'Rivien uudelleenjärjestely',
   // Aggregation
-  // aggregationMenuItemHeader: 'Aggregation',
-  // aggregationFunctionLabelSum: 'sum',
-  // aggregationFunctionLabelAvg: 'avg',
-  // aggregationFunctionLabelMin: 'min',
-  // aggregationFunctionLabelMax: 'max',
-  // aggregationFunctionLabelSize: 'size',
-
+  aggregationMenuItemHeader: 'Koostaminen',
+  aggregationFunctionLabelSum: 'summa',
+  aggregationFunctionLabelAvg: 'ka.',
+  aggregationFunctionLabelMin: 'min.',
+  aggregationFunctionLabelMax: 'maks.',
+  aggregationFunctionLabelSize: 'koko'
 };
 export const fiFI = getGridLocalization(fiFIGrid, fiFICore);

package/modern/locales/plPL.js

@@ -21,15 +21,15 @@ const plPLGrid = {
   toolbarFiltersTooltipShow: 'Pokaż filtry',
   toolbarFiltersTooltipActive: count => `Liczba aktywnych filtrów: ${count}`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search…',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Wyszukaj…',
+  toolbarQuickFilterLabel: 'Szukaj',
+  toolbarQuickFilterDeleteIconLabel: 'Wyczyść',
   // Export selector toolbar button text
   toolbarExport: 'Eksportuj',
   toolbarExportLabel: 'Eksportuj',
   toolbarExportCSV: 'Pobierz jako plik CSV',
   toolbarExportPrint: 'Drukuj',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Pobierz jako plik Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Znajdź kolumnę',
   columnsPanelTextFieldPlaceholder: 'Tytuł kolumny',
@@ -109,9 +109,9 @@ const plPLGrid = {
   // Master/detail
   // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Rozwiń',
-  collapseDetailPanel: 'Zwiń' // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-  // Aggregation
+  collapseDetailPanel: 'Zwiń',
+  // Row reordering text
+  rowReorderingHeaderName: 'Porządkowanie wierszy' // Aggregation
   // aggregationMenuItemHeader: 'Aggregation',
   // aggregationFunctionLabelSum: 'sum',
   // aggregationFunctionLabelAvg: 'avg',

package/node/components/GridPagination.js

@@ -75,8 +75,7 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
-    ref: ref // @ts-ignore
-    ,
+    ref: ref,
     component: "div",
     count: paginationState.rowCount,
     page: paginationState.page <= lastPage ? paginationState.page : lastPage,

package/node/components/GridRow.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridRow = GridRow;
+exports.GridRow = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -89,7 +89,7 @@ const EmptyCell = ({
   }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props) {
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   var _apiRef$current$getRo;
 
   const {
@@ -123,6 +123,7 @@ function GridRow(props) {
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
   const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowTreeDepthSelector);
   const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderGroupingMaxDepthSelector);
+  const handleRef = (0, _material.useForkRef)(ref, refProp);
   const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
   const {
@@ -407,7 +408,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   } : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    ref: ref,
+    ref: handleRef,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -420,8 +421,8 @@ function GridRow(props) {
       width: emptyCellWidth
     })]
   }));
-}
-
+});
+exports.GridRow = GridRow;
 process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -98,11 +98,15 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       children: [apiRef.current.getLocaleText('toolbarFiltersTooltipActive')(activeFilters.length), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarFilterListRoot, {
         className: classes.root,
-        children: activeFilters.map((item, index) => (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
-          children: `${lookup[item.columnField].headerName || item.columnField}
+        children: activeFilters.map((item, index) => {
+          var _item$value;
+
+          return (0, _extends2.default)({}, lookup[item.columnField] && /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: `${lookup[item.columnField].headerName || item.columnField}
                   ${getOperatorLabel(item)}
-                  ${item.value}`
-        }, index)))
+                  ${(_item$value = item.value) != null ? _item$value : ''}`
+          }, index));
+        })
       })]
     });
   }, [apiRef, preferencePanel.open, activeFilters, lookup, classes]);