@mui/x-data-grid-pro 5.14.0 → 5.15.2

package/node/DataGridPro/DataGridPro.js

@@ -241,6 +241,12 @@ DataGridProRaw.propTypes = {
    */
   disableExtendRowFullWidth: _propTypes.default.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.default.bool,
+
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false
@@ -294,6 +300,7 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: _propTypes.default.shape({
     newEditingApi: _propTypes.default.bool,
     preventCommitWhileValidating: _propTypes.default.bool,
+    rowPinning: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
@@ -839,7 +846,7 @@ DataGridProRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: _propTypes.default.func,
 
@@ -878,6 +885,14 @@ DataGridProRaw.propTypes = {
     right: _propTypes.default.arrayOf(_propTypes.default.string)
   }),
 
+  /**
+   * Rows data to pin on top or bottom.
+   */
+  pinnedRows: _propTypes.default.shape({
+    bottom: _propTypes.default.array,
+    top: _propTypes.default.array
+  }),
+
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/node/DataGridPro/useDataGridProComponent.js

@@ -29,6 +29,10 @@ var _useGridRowReorder = require("../hooks/features/rowReorder/useGridRowReorder
 
 var _useGridRowReorderPreProcessors = require("../hooks/features/rowReorder/useGridRowReorderPreProcessors");
 
+var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning");
+
+var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
+
 // Pro-only features
 const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;
@@ -41,6 +45,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
   (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
+  (0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
   (0, _useGridDetailPanelPreProcessors.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.
 
@@ -54,6 +59,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridRowPinning.rowPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? _internals.editingStateInitializer_new : _internals.editingStateInitializer_old, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
@@ -70,6 +76,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridSelection)(apiRef, props);
   (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
+  (0, _useGridRowPinning.useGridRowPinning)(apiRef, props);
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);

package/node/components/DataGridProVirtualScroller.js

@@ -31,6 +31,8 @@ var _detailPanel = require("../hooks/features/detailPanel");
 
 var _GridDetailPanel = require("./GridDetailPanel");
 
+var _gridRowPinningSelector = require("../hooks/features/rowPinning/gridRowPinningSelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "disableVirtualization"];
@@ -69,13 +71,14 @@ exports.filterColumns = filterColumns;
 
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    leftPinnedColumns,
-    rightPinnedColumns
+    classes
   } = ownerState;
   const slots = {
-    leftPinnedColumns: ['pinnedColumns', leftPinnedColumns && leftPinnedColumns.length > 0 && 'pinnedColumns--left'],
-    rightPinnedColumns: ['pinnedColumns', rightPinnedColumns && rightPinnedColumns.length > 0 && 'pinnedColumns--right'],
+    leftPinnedColumns: ['pinnedColumns', 'pinnedColumns--left'],
+    rightPinnedColumns: ['pinnedColumns', 'pinnedColumns--right'],
+    topPinnedRows: ['pinnedRows', 'pinnedRows--top'],
+    bottomPinnedRows: ['pinnedRows', 'pinnedRows--bottom'],
+    pinnedRowsRenderZone: ['pinnedRowsRenderZone'],
     detailPanels: ['detailPanels'],
     detailPanel: ['detailPanel']
   };
@@ -95,6 +98,10 @@ const getOverlayAlpha = elevation => {
   return alphaValue / 100;
 };
 
+const getBoxShadowColor = theme => {
+  return (0, _styles.alpha)(theme.palette.common.black, 0.21);
+};
+
 const VirtualScrollerDetailPanels = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
@@ -102,6 +109,7 @@ const VirtualScrollerDetailPanels = (0, _styles.styled)('div', {
 })({
   position: 'relative'
 });
+const darkModeBackgroundImage = `linear-gradient(${(0, _styles.alpha)('#fff', getOverlayAlpha(2))}, ${(0, _styles.alpha)('#fff', getOverlayAlpha(2))})`;
 const VirtualScrollerPinnedColumns = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -113,21 +121,56 @@ const VirtualScrollerPinnedColumns = (0, _styles.styled)('div', {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({
-  position: 'sticky',
-  overflow: 'hidden',
-  zIndex: 1,
-  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.default
-}, theme.palette.mode === 'dark' && {
-  backgroundImage: `linear-gradient(${(0, _styles.alpha)('#fff', getOverlayAlpha(2))}, ${(0, _styles.alpha)('#fff', getOverlayAlpha(2))})`
-}, ownerState.side === _columnPinning.GridPinnedPosition.left && {
-  left: 0,
-  float: 'left'
-}, ownerState.side === _columnPinning.GridPinnedPosition.right && {
-  right: 0,
-  float: 'right'
-}));
+}) => {
+  const boxShadowColor = getBoxShadowColor(theme);
+  return (0, _extends2.default)({
+    position: 'sticky',
+    overflow: 'hidden',
+    zIndex: 1,
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: darkModeBackgroundImage
+  }, ownerState.side === _columnPinning.GridPinnedPosition.left && {
+    left: 0,
+    float: 'left',
+    boxShadow: `2px 0px 4px -2px ${boxShadowColor}`
+  }, ownerState.side === _columnPinning.GridPinnedPosition.right && {
+    right: 0,
+    float: 'right',
+    boxShadow: `-2px 0px 4px -2px ${boxShadowColor}`
+  });
+});
+const VirtualScrollerPinnedRows = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedRows',
+  overridesResolver: (props, styles) => [{
+    [`&.${_xDataGrid.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
+  }, {
+    [`&.${_xDataGrid.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
+  }, styles.pinnedRows]
+})(({
+  theme,
+  ownerState
+}) => {
+  const boxShadowColor = getBoxShadowColor(theme);
+  return (0, _extends2.default)({
+    position: 'sticky',
+    // should be above the detail panel
+    zIndex: 3,
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: darkModeBackgroundImage
+  }, ownerState.position === 'top' && {
+    top: 0,
+    boxShadow: `0px 3px 4px -2px ${boxShadowColor}`
+  }, ownerState.position === 'bottom' && {
+    boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
+    bottom: 0
+  });
+});
+const VirtualScrollerPinnedRowsRenderZone = (0, _styles.styled)('div')({
+  position: 'absolute'
+});
 const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -138,8 +181,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const detailPanelsHeights = (0, _xDataGrid.useGridSelector)(apiRef, _detailPanel.gridDetailPanelExpandedRowsHeightCacheSelector);
   const leftColumns = React.useRef(null);
   const rightColumns = React.useRef(null);
+  const topPinnedRowsRenderZoneRef = React.useRef(null);
+  const bottomPinnedRowsRenderZoneRef = React.useRef(null);
   const handleRenderZonePositioning = React.useCallback(({
-    top
+    top,
+    left
   }) => {
     if (leftColumns.current) {
       leftColumns.current.style.transform = `translate3d(0px, ${top}px, 0px)`;
@@ -148,6 +194,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     if (rightColumns.current) {
       rightColumns.current.style.transform = `translate3d(0px, ${top}px, 0px)`;
     }
+
+    if (topPinnedRowsRenderZoneRef.current) {
+      topPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
+    }
+
+    if (bottomPinnedRowsRenderZoneRef.current) {
+      bottomPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
+    }
   }, []);
 
   const getRowProps = id => {
@@ -165,10 +219,15 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
 
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const pinnedRows = (0, _xDataGrid.useGridSelector)(apiRef, _gridRowPinningSelector.gridPinnedRowsSelector);
+  const topPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.top) || [], [pinnedRows == null ? void 0 : pinnedRows.top]);
+  const bottomPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.bottom) || [], [pinnedRows == null ? void 0 : pinnedRows.bottom]);
   const ownerState = {
     classes: rootProps.classes,
     leftPinnedColumns,
-    rightPinnedColumns
+    rightPinnedColumns,
+    topPinnedRowsCount: topPinnedRowsData.length,
+    bottomPinnedRowsCount: bottomPinnedRowsData.length
   };
   const classes = useUtilityClasses(ownerState);
   const {
@@ -201,10 +260,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const contentProps = getContentProps();
-  const pinnedColumnsStyle = {
-    minHeight: contentProps.style.minHeight
-  };
 
   const getDetailPanels = () => {
     const panels = [];
@@ -245,8 +300,73 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   };
 
   const detailPanels = getDetailPanels();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScrollerContent, (0, _extends2.default)({}, contentProps, {
+  const topPinnedRows = getRows({
+    renderContext,
+    rows: topPinnedRowsData
+  });
+  const pinnedRowsHeight = (0, _internals.calculatePinnedRowsHeight)(apiRef);
+  const mainRows = getRows({
+    renderContext,
+    rowIndexOffset: topPinnedRowsData.length
+  });
+  const bottomPinnedRows = getRows({
+    renderContext,
+    rows: bottomPinnedRowsData,
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+  });
+  const contentProps = getContentProps();
+  const pinnedColumnsStyle = {
+    minHeight: contentProps.style.minHeight
+  };
+
+  if (contentProps.style.minHeight && contentProps.style.minHeight === '100%') {
+    contentProps.style.minHeight = `calc(100% - ${pinnedRowsHeight.top}px - ${pinnedRowsHeight.bottom}px)`;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
+    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
+      className: classes.topPinnedRows,
+      ownerState: {
+        position: 'top'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.top
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: _columnPinning.GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: topPinnedRowsData
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: topPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: topPinnedRows
+      }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: _columnPinning.GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          ignoreAutoHeight: true,
+          availableSpace: 0,
+          rows: topPinnedRowsData
+        })
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScrollerContent, (0, _extends2.default)({}, contentProps, {
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
@@ -259,12 +379,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
+        children: mainRows
       })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
@@ -277,13 +396,58 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), detailPanels.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]
-    }))
+    })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
+      className: classes.bottomPinnedRows,
+      ownerState: {
+        position: 'bottom'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.bottom
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: _columnPinning.GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: bottomPinnedRowsData,
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: bottomPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: bottomPinnedRows
+      }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: _columnPinning.GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: bottomPinnedRowsData,
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+        })
+      })]
+    }) : null]
   }));
 });
 exports.DataGridProVirtualScroller = DataGridProVirtualScroller;

package/node/components/GridRowReorderCell.js

@@ -94,6 +94,12 @@ const GridRowReorderCell = params => {
 
 exports.GridRowReorderCell = GridRowReorderCell;
 
-const renderRowReorderCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowReorderCell, (0, _extends2.default)({}, params));
+const renderRowReorderCell = params => {
+  if (params.rowNode.isPinned) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowReorderCell, (0, _extends2.default)({}, params));
+};
 
 exports.renderRowReorderCell = renderRowReorderCell;

package/node/hooks/features/index.js

@@ -80,4 +80,17 @@ Object.keys(_detailPanel).forEach(function (key) {
       return _detailPanel[key];
     }
   });
+});
+
+var _rowPinning = require("./rowPinning");
+
+Object.keys(_rowPinning).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rowPinning[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rowPinning[key];
+    }
+  });
 });

package/node/hooks/features/rowPinning/gridRowPinningInterface.js

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

package/node/hooks/features/rowPinning/gridRowPinningSelector.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "gridAdditionalRowGroupsSelector", {
+  enumerable: true,
+  get: function () {
+    return _internals.gridAdditionalRowGroupsSelector;
+  }
+});
+Object.defineProperty(exports, "gridPinnedRowsSelector", {
+  enumerable: true,
+  get: function () {
+    return _internals.gridPinnedRowsSelector;
+  }
+});
+
+var _internals = require("@mui/x-data-grid/internals");

package/node/hooks/features/rowPinning/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridRowPinningInterface = require("./gridRowPinningInterface");
+
+Object.keys(_gridRowPinningInterface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRowPinningInterface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRowPinningInterface[key];
+    }
+  });
+});

package/node/hooks/features/rowPinning/useGridRowPinning.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridRowPinning = exports.rowPinningStateInitializer = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _internals = require("@mui/x-data-grid/internals");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 = (0, _internals.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 = (0, _internals.getRowIdFromRowModel)(rowModel, getRowId);
+    cache.bottomIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  return cache;
+}
+
+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 (0, _extends2.default)({}, state, {
+    rows: (0, _extends2.default)({}, state.rows, {
+      additionalRowGroups: (0, _extends2.default)({}, (_state$rows = state.rows) == null ? void 0 : _state$rows.additionalRowGroups, {
+        pinnedRows: {
+          top: [],
+          bottom: []
+        }
+      })
+    })
+  });
+};
+
+exports.rowPinningStateInitializer = rowPinningStateInitializer;
+
+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]);
+  (0, _xDataGrid.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]);
+};
+
+exports.useGridRowPinning = useGridRowPinning;