@mui/x-data-grid 5.13.0 → 5.15.0

package/legacy/hooks/features/export/utils.js

@@ -1,5 +1,7 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
 import { gridFilteredSortedRowIdsSelector } from '../filter';
+import { gridPinnedRowsSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 export var getColumnsToExport = function getColumnsToExport(_ref) {
   var apiRef = _ref.apiRef,
       options = _ref.options;
@@ -21,15 +23,32 @@ export var getColumnsToExport = function getColumnsToExport(_ref) {
   });
 };
 export var defaultGetRowsToExport = function defaultGetRowsToExport(_ref2) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
   var apiRef = _ref2.apiRef;
   var filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  var rowTree = gridRowTreeSelector(apiRef);
   var selectedRows = apiRef.current.getSelectedRows();
+  var bodyRows = filteredSortedRowIds.filter(function (id) {
+    var _rowTree$id$position;
+
+    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
+  });
+  var pinnedRows = gridPinnedRowsSelector(apiRef);
+  var topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(function (row) {
+    return row.id;
+  })) || [];
+  var bottomPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(function (row) {
+    return row.id;
+  })) || [];
+  bodyRows.unshift.apply(bodyRows, _toConsumableArray(topPinnedRowsIds));
+  bodyRows.push.apply(bodyRows, _toConsumableArray(bottomPinnedRowsIds));
 
   if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(function (id) {
+    return bodyRows.filter(function (id) {
       return selectedRows.has(id);
     });
   }
 
-  return filteredSortedRowIds;
+  return bodyRows;
 };

package/legacy/hooks/features/filter/gridFilterUtils.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
+import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -89,6 +90,7 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
   var items = filterModel.items,
       _filterModel$linkOper = filterModel.linkOperator,
       linkOperator = _filterModel$linkOper === void 0 ? GridLinkOperator.And : _filterModel$linkOper;
+  var tree = gridRowTreeSelector(apiRef);
 
   var getFilterCallbackFromItem = function getFilterCallbackFromItem(filterItem) {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -158,6 +160,10 @@ export var buildAggregatedFilterItemsApplier = function buildAggregatedFilterIte
   }
 
   return function (rowId, shouldApplyFilter) {
+    if (tree[rowId].position === 'footer') {
+      return true;
+    }
+
     var filteredAppliers = shouldApplyFilter ? appliers.filter(function (applier) {
       return shouldApplyFilter(applier.item.columnField);
     }) : appliers; // Return `false` as soon as we have a failing filter

package/legacy/hooks/features/filter/useGridFilter.js

@@ -35,7 +35,7 @@ export var filterStateInitializer = function filterStateInitializer(state, props
  */
 
 export var useGridFilter = function useGridFilter(apiRef, props) {
-  var _props$componentsProp2;
+  var _props$initialState3, _props$initialState3$, _props$componentsProp2;
 
   var logger = useGridLogger(apiRef, 'useGridFilter');
   apiRef.current.unstable_registerControlState({
@@ -125,7 +125,25 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
     if (targetColumnField) {
       var filterModel = gridFilterModelSelector(apiRef);
       var filterItemsWithValue = filterModel.items.filter(function (item) {
-        return item.value !== undefined;
+        var _column$filterOperato;
+
+        if (item.value !== undefined) {
+          return true;
+        }
+
+        var column = apiRef.current.getColumn(item.columnField);
+        var filterOperator = (_column$filterOperato = column.filterOperators) == null ? void 0 : _column$filterOperato.find(function (operator) {
+          return operator.value === item.operatorValue;
+        });
+        var requiresFilterValue = typeof (filterOperator == null ? void 0 : filterOperator.requiresFilterValue) === 'undefined' ? true : filterOperator == null ? void 0 : filterOperator.requiresFilterValue; // Operators like `isEmpty` don't have and don't require `item.value`.
+        // So we don't want to remove them from the filter model if `item.value === undefined`.
+        // See https://github.com/mui/mui-x/issues/5402
+
+        if (requiresFilterValue) {
+          return false;
+        }
+
+        return true;
       });
       var newFilterItems;
       var filterItemOnTarget = filterItemsWithValue.find(function (item) {
@@ -209,10 +227,17 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
+    var _props$initialState2, _props$initialState2$;
+
     var filterModelToExport = gridFilterModelSelector(apiRef);
+    var shouldExportFilterModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.filterModel != null || // Always export if the model has been initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.filter) == null ? void 0 : _props$initialState2$.filterModel) != null || // Export if the model is not equal to the default value
+    !isDeepEqual(filterModelToExport, getDefaultGridFilterModel());
 
-    if (filterModelToExport.items.length === 0 && filterModelToExport.linkOperator === getDefaultGridFilterModel().linkOperator) {
+    if (!shouldExportFilterModel) {
       return prevState;
     }
 
@@ -221,7 +246,7 @@ export var useGridFilter = function useGridFilter(apiRef, props) {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef]);
+  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.filter) == null ? void 0 : _props$initialState3$.filterModel]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var _context$stateToResto;
 

package/legacy/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
@@ -9,6 +10,12 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
+import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
+
+function enrichPageRowsWithPinnedRows(apiRef, rows) {
+  var pinnedRows = gridPinnedRowsSelector(apiRef) || {};
+  return [].concat(_toConsumableArray(pinnedRows.top || []), _toConsumableArray(rows), _toConsumableArray(pinnedRows.bottom || []));
+}
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -19,21 +26,22 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPan
  * @requires useGridColumnSpanning (method) - can be after
  */
 
+
 export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef, props) {
   var logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
-  var currentPage = useGridVisibleRows(apiRef, props);
+  var initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
+  var currentPageRows = React.useMemo(function () {
+    return enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows);
+  }, [apiRef, initialCurrentPageRows]);
   /**
    * @param {number} colIndex Index of the column to focus
    * @param {number} rowIndex index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
    */
 
-  var goToCell = React.useCallback(function (colIndex, rowIndex) {
-    var _visibleSortedRows$ro;
-
+  var goToCell = React.useCallback(function (colIndex, rowId) {
     var closestColumnToUse = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'left';
     var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    var rowId = (_visibleSortedRows$ro = visibleSortedRows[rowIndex]) == null ? void 0 : _visibleSortedRows$ro.id;
     var nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
 
     if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
@@ -42,12 +50,17 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       } else if (closestColumnToUse === 'right') {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
-    }
+    } // `scrollToIndexes` requires a rowIndex relative to all visible rows.
+    // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
 
-    logger.debug("Navigating to cell row ".concat(rowIndex, ", col ").concat(colIndex));
+
+    var rowIndexRelativeToAllRows = visibleSortedRows.findIndex(function (row) {
+      return row.id === rowId;
+    });
+    logger.debug("Navigating to cell row ".concat(rowIndexRelativeToAllRows, ", col ").concat(colIndex));
     apiRef.current.scrollToIndexes({
       colIndex: colIndex,
-      rowIndex: rowIndex
+      rowIndex: rowIndexRelativeToAllRows
     });
     var field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setCellFocus(rowId, field);
@@ -60,21 +73,23 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     var field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  var getRowIdFromIndex = React.useCallback(function (rowIndex) {
+    return currentPageRows[rowIndex].id;
+  }, [currentPageRows]);
   var handleCellNavigationKeyDown = React.useCallback(function (params, event) {
     var dimensions = apiRef.current.getRootDimensions();
 
-    if (!currentPage.range || !dimensions) {
+    if (currentPageRows.length === 0 || !dimensions) {
       return;
     }
 
     var viewportPageSize = apiRef.current.unstable_getViewportPageSize();
-    var visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
     var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    var rowIndexBefore = visibleSortedRows.findIndex(function (row) {
+    var rowIndexBefore = currentPageRows.findIndex(function (row) {
       return row.id === params.id;
     });
-    var firstRowIndexInPage = currentPage.range.firstRowIndex;
-    var lastRowIndexInPage = currentPage.range.lastRowIndex;
+    var firstRowIndexInPage = 0;
+    var lastRowIndexInPage = currentPageRows.length - 1;
     var firstColIndex = 0;
     var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
     var shouldPreventDefault = true;
@@ -85,7 +100,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
         {
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, rowIndexBefore + 1);
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));
           }
 
           break;
@@ -94,7 +109,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowUp':
         {
           if (rowIndexBefore > firstRowIndexInPage) {
-            goToCell(colIndexBefore, rowIndexBefore - 1);
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore - 1));
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -105,7 +120,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
+            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
 
           break;
@@ -114,7 +129,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowLeft':
         {
           if (colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -124,9 +139,9 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
+            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
+            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
 
           break;
@@ -147,7 +162,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
           }
 
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -156,7 +171,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -168,7 +183,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
           var nextRowIndex = Math.max(rowIndexBefore - viewportPageSize, firstRowIndexInPage);
 
           if (nextRowIndex !== rowIndexBefore && nextRowIndex >= firstRowIndexInPage) {
-            goToCell(colIndexBefore, nextRowIndex);
+            goToCell(colIndexBefore, getRowIdFromIndex(nextRowIndex));
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -179,9 +194,9 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'Home':
         {
           if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            goToCell(firstColIndex, firstRowIndexInPage);
+            goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
           } else {
-            goToCell(firstColIndex, rowIndexBefore);
+            goToCell(firstColIndex, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -190,9 +205,9 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'End':
         {
           if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            goToCell(lastColIndex, lastRowIndexInPage);
+            goToCell(lastColIndex, getRowIdFromIndex(lastRowIndexInPage));
           } else {
-            goToCell(lastColIndex, rowIndexBefore);
+            goToCell(lastColIndex, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -207,10 +222,8 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPage, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
   var handleColumnHeaderKeyDown = React.useCallback(function (params, event) {
-    var _currentPage$range$fi, _currentPage$range, _currentPage$range$la, _currentPage$range2;
-
     var headerTitleNode = event.currentTarget.querySelector(".".concat(gridClasses.columnHeaderTitleContainerContent));
     var isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
 
@@ -228,8 +241,8 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
 
     var viewportPageSize = apiRef.current.unstable_getViewportPageSize();
     var colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    var firstRowIndexInPage = (_currentPage$range$fi = (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) != null ? _currentPage$range$fi : null;
-    var lastRowIndexInPage = (_currentPage$range$la = (_currentPage$range2 = currentPage.range) == null ? void 0 : _currentPage$range2.lastRowIndex) != null ? _currentPage$range$la : null;
+    var firstRowIndexInPage = 0;
+    var lastRowIndexInPage = currentPageRows.length - 1;
     var firstColIndex = 0;
     var lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
     var shouldPreventDefault = true;
@@ -238,7 +251,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'ArrowDown':
         {
           if (firstRowIndexInPage !== null) {
-            goToCell(colIndexBefore, firstRowIndexInPage);
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
 
           break;
@@ -265,7 +278,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
-            goToCell(colIndexBefore, Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -307,7 +320,7 @@ export var useGridKeyboardNavigation = function useGridKeyboardNavigation(apiRef
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPage, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
   var handleCellKeyDown = React.useCallback(function (params, event) {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {

package/legacy/hooks/features/pagination/useGridPage.js

@@ -67,13 +67,14 @@ export var useGridPage = function useGridPage(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
     var _props$initialState, _props$initialState$p;
 
     var pageToExport = gridPageSelector(apiRef);
-    var shouldExportPage = // Always export if the page is controlled
+    var shouldExportPage = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page is controlled
     props.page != null || // Always export if the page has been initialized
-    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page is not equal to the default value
     pageToExport !== 0;
 
     if (!shouldExportPage) {

package/legacy/hooks/features/pagination/useGridPageSize.js

@@ -4,6 +4,7 @@ import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelecto
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 export var defaultPageSize = function defaultPageSize(autoPageSize) {
   return autoPageSize ? 0 : 100;
 };
@@ -55,13 +56,14 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
     var _props$initialState, _props$initialState$p;
 
     var pageSizeToExport = gridPageSizeSelector(apiRef);
-    var shouldExportPageSize = // Always export if the page size is controlled
+    var shouldExportPageSize = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page size is controlled
     props.pageSize != null || // Always export if the page size has been initialized
-    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size is not equal to the default value
     pageSizeToExport !== defaultPageSize(props.autoPageSize);
 
     if (!shouldExportPageSize) {
@@ -102,7 +104,8 @@ export var useGridPageSize = function useGridPageSize(apiRef, props) {
       return;
     }
 
-    var maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+    var maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);

package/legacy/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -17,7 +17,9 @@ export var preferencePanelStateInitializer = function preferencePanelStateInitia
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
 
-export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
+export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef, props) {
+  var _props$initialState3;
+
   var logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
   var hideTimeout = React.useRef();
   var immediateTimeout = React.useRef();
@@ -80,17 +82,23 @@ export var useGridPreferencesPanel = function useGridPreferencesPanel(apiRef) {
    * PRE-PROCESSING
    */
 
-  var stateExportPreProcessing = React.useCallback(function (prevState) {
+  var stateExportPreProcessing = React.useCallback(function (prevState, context) {
+    var _props$initialState2;
+
     var preferencePanelToExport = gridPreferencePanelStateSelector(apiRef.current.state);
+    var shouldExportPreferencePanel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the panel was initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.preferencePanel) != null || // Always export if the panel is opened
+    preferencePanelToExport.open;
 
-    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+    if (!shouldExportPreferencePanel) {
       return prevState;
     }
 
     return _extends({}, prevState, {
       preferencePanel: preferencePanelToExport
     });
-  }, [apiRef]);
+  }, [apiRef, (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.preferencePanel]);
   var stateRestorePreProcessing = React.useCallback(function (params, context) {
     var preferencePanel = context.stateToRestore.preferencePanel;
 

package/legacy/hooks/features/rows/gridRowsSelector.js

@@ -28,4 +28,27 @@ export var gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, func
 });
 export var gridRowIdsSelector = createSelector(gridRowsStateSelector, function (rows) {
   return rows.ids;
+});
+/**
+ * @ignore - do not document.
+ */
+
+export var gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelector, function (rows) {
+  return rows == null ? void 0 : rows.additionalRowGroups;
+});
+/**
+ * @ignore - do not document.
+ */
+
+export var gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, function (additionalRowGroups) {
+  return additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
+});
+/**
+ * @ignore - do not document.
+ */
+
+export var gridPinnedRowsCountSelector = createSelector(gridPinnedRowsSelector, function (pinnedRows) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  return ((pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.length) || 0) + ((pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.length) || 0);
 });

package/legacy/hooks/features/rows/gridRowsUtils.js

@@ -2,13 +2,14 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["rowsBeforePartialUpdates"];
-
+import { gridPinnedRowsSelector } from './gridRowsSelector';
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
  * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
+
 export function checkGridRowIdIsValid(id, row) {
   var detailErrorMessage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'A row was provided without id in the rows prop:';
 
@@ -59,7 +60,7 @@ export var getRowsStateFromCache = function getRowsStateFromCache(_ref2) {
   }));
   var processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
   var dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(function (node) {
-    return node.parent == null;
+    return node.parent == null && !node.isPinned;
   }).length;
   return _extends({}, processedGroupingResponse, {
     groupingResponseBeforeRowHydration: groupingResponse,
@@ -91,4 +92,21 @@ export var getTreeNodeDescendants = function getTreeNodeDescendants(tree, parent
   }
 
   return validDescendants;
-};
+};
+export function calculatePinnedRowsHeight(apiRef) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  var pinnedRows = gridPinnedRowsSelector(apiRef);
+  var topPinnedRowsHeight = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.reduce(function (acc, value) {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0)) || 0;
+  var bottomPinnedRowsHeight = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.reduce(function (acc, value) {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0)) || 0;
+  return {
+    top: topPinnedRowsHeight,
+    bottom: bottomPinnedRowsHeight
+  };
+}

package/legacy/hooks/features/rows/index.js

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
-export * from './gridRowsSelector';
+export { gridRowsStateSelector, gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthSelector, gridRowIdsSelector } from './gridRowsSelector';
 export { checkGridRowIdIsValid } from './gridRowsUtils';

package/legacy/hooks/features/rows/useGridRowsMeta.js

@@ -9,6 +9,7 @@ import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
+import { gridPinnedRowsSelector } from './gridRowsSelector';
 export var rowsMetaStateInitializer = function rowsMetaStateInitializer(state) {
   return _extends({}, state, {
     rowsMeta: {
@@ -35,13 +36,14 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
   var paginationState = useGridSelector(apiRef, gridPaginationSelector);
   var sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   var currentPage = useGridVisibleRows(apiRef, props);
+  var pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   var hydrateRowsMeta = React.useCallback(function () {
+    var _pinnedRows$top, _pinnedRows$bottom;
+
     hasRowWithAutoHeight.current = false;
     var densityFactor = gridDensityFactorSelector(apiRef.current.state, apiRef.current.instanceId);
-    var positions = [];
-    var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
-      positions.push(acc);
 
+    var calculateRowProcessedSizes = function calculateRowProcessedSizes(row) {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
@@ -112,11 +114,24 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
 
       var processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
       rowsHeightLookup.current[row.id].sizes = processedSizes;
+      return processedSizes;
+    };
+
+    var positions = [];
+    var currentPageTotalHeight = currentPage.rows.reduce(function (acc, row) {
+      positions.push(acc);
+      var processedSizes = calculateRowProcessedSizes(row);
       var finalRowHeight = Object.values(processedSizes).reduce(function (acc2, value) {
         return acc2 + value;
       }, 0);
       return acc + finalRowHeight;
     }, 0);
+    pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(function (row) {
+      calculateRowProcessedSizes(row);
+    });
+    pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(function (row) {
+      calculateRowProcessedSizes(row);
+    });
     apiRef.current.setState(function (state) {
       return _extends({}, state, {
         rowsMeta: {
@@ -132,7 +147,7 @@ export var useGridRowsMeta = function useGridRowsMeta(apiRef, props) {
     }
 
     apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   var getRowHeight = React.useCallback(function (rowId) {
     var height = rowsHeightLookup.current[rowId];
     return height ? height.sizes.base : rowHeightFromDensity;

package/legacy/hooks/features/rows/useGridRowsPreProcessors.js

@@ -10,7 +10,8 @@ var flatRowTreeCreationMethod = function flatRowTreeCreationMethod(_ref) {
   for (var i = 0; i < ids.length; i += 1) {
     var rowId = ids[i];
 
-    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null && // pinned row can be unpinned
+    !previousTree[rowId].isPinned) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {

package/legacy/hooks/features/scroll/useGridScroll.js

@@ -7,7 +7,8 @@ import { gridPageSelector, gridPageSizeSelector } from '../pagination/gridPagina
 import { gridRowCountSelector } from '../rows/gridRowsSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
+import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector';
+import { gridClasses } from '../../../constants/gridClasses'; // Logic copied from https://www.w3.org/TR/wai-aria-practices/examples/listbox/js/listbox.js
 // Similar to https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
 
 function scrollIntoView(dimensions) {
@@ -87,13 +88,17 @@ export var useGridScroll = function useGridScroll(apiRef, props) {
     }
 
     if (params.rowIndex != null) {
+      var _querySelector, _querySelector2;
+
       var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
       var page = gridPageSelector(apiRef);
       var pageSize = gridPageSizeSelector(apiRef);
       var elementIndex = !props.pagination ? params.rowIndex : params.rowIndex - page * pageSize;
       var targetOffsetHeight = rowsMeta.positions[elementIndex + 1] ? rowsMeta.positions[elementIndex + 1] - rowsMeta.positions[elementIndex] : rowsMeta.currentPageTotalHeight - rowsMeta.positions[elementIndex];
+      var topPinnedRowsHeight = ((_querySelector = windowRef.current.querySelector(".".concat(gridClasses['pinnedRows--top']))) == null ? void 0 : _querySelector.clientHeight) || 0;
+      var bottomPinnedRowsHeight = ((_querySelector2 = windowRef.current.querySelector(".".concat(gridClasses['pinnedRows--bottom']))) == null ? void 0 : _querySelector2.clientHeight) || 0;
       scrollCoordinates.top = scrollIntoView({
-        clientHeight: windowRef.current.clientHeight,
+        clientHeight: windowRef.current.clientHeight - topPinnedRowsHeight - bottomPinnedRowsHeight,
         scrollTop: windowRef.current.scrollTop,
         offsetHeight: targetOffsetHeight,
         offsetTop: rowsMeta.positions[elementIndex]