@mui/x-data-grid-pro 5.13.1 → 5.15.1

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -43,6 +43,8 @@ const mergeStateWithPinnedColumns = pinnedColumns => state => _extends({}, state
 });
 
 export const useGridColumnPinning = (apiRef, props) => {
+  var _props$initialState4;
+
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
   // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
   // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
@@ -164,17 +166,24 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return initialValue;
   }, [apiRef, pinnedColumns]);
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState3, _pinnedColumnsToExpor, _pinnedColumnsToExpor2;
+
     const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+    const shouldExportPinnedColumns = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.pinnedColumns != null || // Always export if the model has been initialized
+    ((_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.pinnedColumns) != null || // Export if the model is not empty
+    ((_pinnedColumnsToExpor = pinnedColumnsToExport.left) != null ? _pinnedColumnsToExpor : []).length > 0 || ((_pinnedColumnsToExpor2 = pinnedColumnsToExport.right) != null ? _pinnedColumnsToExpor2 : []).length > 0;
 
-    if ((!pinnedColumnsToExport.left || pinnedColumnsToExport.left.length === 0) && (!pinnedColumnsToExport.right || pinnedColumnsToExport.right.length === 0)) {
+    if (!shouldExportPinnedColumns) {
       return prevState;
     }
 
     return _extends({}, prevState, {
       pinnedColumns: pinnedColumnsToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.pinnedColumns, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.pinnedColumns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
 

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -12,6 +12,8 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF
   sortable: false,
   filterable: false,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/hooks/features/index.d.ts

@@ -4,3 +4,4 @@ export * from './columnResize';
 export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';
+export * from './rowPinning';

package/hooks/features/index.js

@@ -4,4 +4,5 @@ export * from './columnReorder';
 export * from './columnResize';
 export * from './rowReorder';
 export * from './treeData';
-export * from './detailPanel';
+export * from './detailPanel';
+export * from './rowPinning';

package/hooks/features/rowPinning/gridRowPinningInterface.d.ts

@@ -0,0 +1,17 @@
+import { GridRowId, GridRowsLookup, GridRowsProp } from '@mui/x-data-grid';
+export interface GridPinnedRowsProp<R = any> {
+    top?: GridRowsProp<R>;
+    bottom?: GridRowsProp<R>;
+}
+export interface GridRowPinningApi {
+    /**
+     * Changes the pinned rows.
+     * @param {GridPinnedRowsProp} pinnedRows An object containing the rows to pin.
+     */
+    unstable_setPinnedRows: (pinnedRows?: GridPinnedRowsProp) => void;
+}
+export interface GridRowPinningInternalCache {
+    topIds: GridRowId[];
+    bottomIds: GridRowId[];
+    idLookup: GridRowsLookup;
+}

package/hooks/features/rowPinning/gridRowPinningInterface.js

@@ -0,0 +1 @@
+export {};

package/hooks/features/rowPinning/gridRowPinningSelector.d.ts

@@ -0,0 +1 @@
+export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, } from '@mui/x-data-grid/internals';

package/hooks/features/rowPinning/gridRowPinningSelector.js

@@ -0,0 +1 @@
+export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '@mui/x-data-grid/internals';

package/hooks/features/rowPinning/index.d.ts

@@ -0,0 +1 @@
+export * from './gridRowPinningInterface';

package/hooks/features/rowPinning/index.js

@@ -0,0 +1 @@
+export * from './gridRowPinningInterface';

package/hooks/features/rowPinning/useGridRowPinning.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>>;
+export declare const useGridRowPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>) => void;

package/hooks/features/rowPinning/useGridRowPinning.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '@mui/x-data-grid';
+import { getRowIdFromRowModel } from '@mui/x-data-grid/internals';
+
+function createPinnedRowsInternalCache(pinnedRows, getRowId) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  const cache = {
+    topIds: [],
+    bottomIds: [],
+    idLookup: {}
+  };
+  pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(rowModel => {
+    const id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.topIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(rowModel => {
+    const id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.bottomIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  return cache;
+}
+
+export const rowPinningStateInitializer = (state, props, apiRef) => {
+  var _props$experimentalFe, _state$rows;
+
+  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.rowPinning)) {
+    return state;
+  }
+
+  apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
+  return _extends({}, state, {
+    rows: _extends({}, state.rows, {
+      additionalRowGroups: _extends({}, (_state$rows = state.rows) == null ? void 0 : _state$rows.additionalRowGroups, {
+        pinnedRows: {
+          top: [],
+          bottom: []
+        }
+      })
+    })
+  });
+};
+export const useGridRowPinning = (apiRef, props) => {
+  var _props$experimentalFe3;
+
+  const setPinnedRows = React.useCallback(newPinnedRows => {
+    var _props$experimentalFe2;
+
+    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.rowPinning)) {
+      return;
+    }
+
+    apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.rowPinning, props.getRowId]);
+  useGridApiMethod(apiRef, {
+    unstable_setPinnedRows: setPinnedRows
+  }, 'rowPinningApi');
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    apiRef.current.unstable_setPinnedRows(props.pinnedRows);
+  }, [apiRef, props.pinnedRows]);
+};

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
+import { GridRowEntry, GridRowId, GridRowModel } from '@mui/x-data-grid';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { GridPinnedRowsProp } from './gridRowPinningInterface';
+declare type GridPinnedRowPosition = keyof GridPinnedRowsProp;
+export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, }: {
+    groupingParams: GridHydrateRowsValue;
+    rowModel: GridRowModel;
+    rowId: GridRowId;
+    position: GridPinnedRowPosition;
+    apiRef: React.MutableRefObject<GridApiPro>;
+}): {
+    idRowsLookup: {
+        [x: string]: any;
+        [x: number]: any;
+    };
+    tree: {
+        [x: string]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
+        [x: number]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
+    };
+    additionalRowGroups: {
+        pinnedRows: {
+            top?: GridRowEntry<any>[] | undefined;
+            bottom?: GridRowEntry<any>[] | undefined;
+        };
+    };
+    groupingName: string;
+    treeDepth: number;
+    ids: GridRowId[];
+    idToIdLookup: Record<string, GridRowId>;
+};
+export declare const useGridRowPinningPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>) => void;
+export {};

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+export function addPinnedRow({
+  groupingParams,
+  rowModel,
+  rowId,
+  position,
+  apiRef
+}) {
+  var _groupingParams$addit;
+
+  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+
+  const tree = _extends({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+
+
+  idRowsLookup[rowId] = rowModel; // Do not push it to ids list so that pagination is not affected by pinned rows
+  // ids.push(rowId);
+
+  tree[rowId] = {
+    id: rowId,
+    isAutoGenerated: false,
+    parent: null,
+    depth: 0,
+    groupingKey: null,
+    groupingField: null,
+    isPinned: true
+  };
+  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = _extends({}, rowModel);
+  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  const previousPinnedRows = ((_groupingParams$addit = groupingParams.additionalRowGroups) == null ? void 0 : _groupingParams$addit.pinnedRows) || {};
+  const newPinnedRow = {
+    id: rowId,
+    model: rowModel
+  };
+  return _extends({}, groupingParams, {
+    idRowsLookup,
+    tree,
+    additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+      pinnedRows: _extends({}, previousPinnedRows, {
+        [position]: [...(previousPinnedRows[position] || []), newPinnedRow]
+      })
+    })
+  });
+}
+export const useGridRowPinningPreProcessors = apiRef => {
+  const addPinnedRows = React.useCallback(groupingParams => {
+    var _pinnedRowsCache$topI, _pinnedRowsCache$bott;
+
+    const pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
+
+    let newGroupingParams = _extends({}, groupingParams, {
+      additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+        // reset pinned rows state
+        pinnedRows: {}
+      })
+    });
+
+    (_pinnedRowsCache$topI = pinnedRowsCache.topIds) == null ? void 0 : _pinnedRowsCache$topI.forEach(rowId => {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId,
+        position: 'top',
+        apiRef
+      });
+    });
+    (_pinnedRowsCache$bott = pinnedRowsCache.bottomIds) == null ? void 0 : _pinnedRowsCache$bott.forEach(rowId => {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId,
+        position: 'bottom',
+        apiRef
+      });
+    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from `ids`
+
+    newGroupingParams.ids = newGroupingParams.ids.filter(rowId => {
+      if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].isPinned) {
+        return false;
+      }
+
+      return true;
+    });
+    return newGroupingParams;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addPinnedRows);
+};

package/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -13,6 +13,8 @@ export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   disableExport: true,
   disableReorder: true,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   renderHeader: () => ' ',
   renderCell: renderRowReorderCell
 });

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -60,10 +60,16 @@ export const useGridRowReorder = (apiRef, props) => {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   const handleDragOver = React.useCallback((params, event) => {
+    var _apiRef$current$getRo;
+
     if (dragRowId === '') {
       return;
     }
 
+    if ((_apiRef$current$getRo = apiRef.current.getRowNode(params.id)) != null && _apiRef$current$getRo.isPinned) {
+      return;
+    }
+
     logger.debug(`Dragging over row ${params.id}`);
     event.preventDefault(); // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.

package/hooks/features/treeData/gridTreeDataUtils.js

@@ -62,11 +62,20 @@ export const filterRowTreeFromTreeData = params => {
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
 
+    if (node.footerId != null) {
+      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+
     if (!shouldPassFilters) {
       return 0;
     }
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
+
+    if (node.position === 'footer') {
+      return filteredDescendantCount;
+    }
+
     return filteredDescendantCount + 1;
   };
 

package/index.js

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

package/internals/index.d.ts

@@ -12,6 +12,9 @@ export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorde
 export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
 export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
+export { useGridRowPinning, rowPinningStateInitializer, } from '../hooks/features/rowPinning/useGridRowPinning';
+export { useGridRowPinningPreProcessors, addPinnedRow, } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps';
 export { buildRowTree } from '../utils/tree/buildRowTree';
 export type { BuildRowTreeGroupingCriteria } from '../utils/tree/buildRowTree';

package/internals/index.js

@@ -12,5 +12,8 @@ export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorde
 export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
 export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
+export { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
+export { useGridRowPinningPreProcessors, addPinnedRow } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export { buildRowTree } from '../utils/tree/buildRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';

package/legacy/DataGridPro/DataGridPro.js

@@ -217,6 +217,12 @@ DataGridProRaw.propTypes = {
    */
   disableExtendRowFullWidth: PropTypes.bool,
 
+  /**
+   * If `true`, modification to a cell will not be discarded if the mode is changed from "edit" to "view" while processing props.
+   * @default false
+   */
+  disableIgnoreModificationsIfProcessingProps: PropTypes.bool,
+
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false
@@ -270,6 +276,7 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
+    rowPinning: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -854,6 +861,14 @@ DataGridProRaw.propTypes = {
     right: PropTypes.arrayOf(PropTypes.string)
   }),
 
+  /**
+   * Rows data to pin on top or bottom.
+   */
+  pinnedRows: PropTypes.shape({
+    bottom: PropTypes.array,
+    top: PropTypes.array
+  }),
+
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -11,6 +11,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
+import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -22,6 +24,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
+  useGridRowPinningPreProcessors(apiRef);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
 
@@ -35,6 +38,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -51,6 +55,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumnPinning(apiRef, props);
+  useGridRowPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
@@ -59,7 +64,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);