@mui/x-data-grid 6.0.0-alpha.0 → 6.0.0-alpha.2

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

@@ -15,6 +15,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _utils = require("@mui/utils");
+
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _gridEditRowModel = require("../../../models/gridEditRowModel");
@@ -31,7 +33,7 @@ var _warning = require("../../../utils/warning");
 
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 
-var _utils = require("../../../utils/utils");
+var _utils2 = require("../../../utils/utils");
 
 var _gridRowParams = require("../../../models/params/gridRowParams");
 
@@ -183,6 +185,10 @@ const useGridRowEditing = (apiRef, props) => {
     } else if (params.isEditable) {
       let reason;
 
+      if (event.key === ' ' && event.shiftKey) {
+        return; // Shift + Space is used to select the row
+      }
+
       if ((0, _keyboardUtils.isPrintableKey)(event)) {
         reason = _gridRowParams.GridRowEditStartReasons.printableKeyDown;
       } else if ((event.ctrlKey || event.metaKey) && event.key === 'v') {
@@ -273,7 +279,7 @@ const useGridRowEditing = (apiRef, props) => {
     const isEditing = editingState[id] && Object.keys(editingState[id]).length > 0;
     return isEditing ? _gridEditRowModel.GridRowModes.Edit : _gridEditRowModel.GridRowModes.View;
   }, [apiRef, props.editMode]);
-  const updateRowModesModel = React.useCallback(newModel => {
+  const updateRowModesModel = (0, _utils.unstable_useEventCallback)(newModel => {
     const isNewModelDifferentFromProp = newModel !== props.rowModesModel;
 
     if (onRowModesModelChange && isNewModelDifferentFromProp) {
@@ -290,7 +296,7 @@ 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 = (0, _extends2.default)({}, rowModesModelRef.current);
 
@@ -350,7 +356,7 @@ const useGridRowEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridRowModes.Edit
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStartRowEditMode = React.useCallback(params => {
+  const updateStateToStartRowEditMode = (0, _utils.unstable_useEventCallback)(params => {
     const {
       id,
       fieldToFocus,
@@ -377,7 +383,7 @@ const useGridRowEditing = (apiRef, props) => {
     if (fieldToFocus) {
       apiRef.current.setCellFocus(id, fieldToFocus);
     }
-  }, [apiRef, updateOrDeleteRowState]);
+  });
   const stopRowEditMode = React.useCallback(params => {
     const {
       id
@@ -388,7 +394,7 @@ const useGridRowEditing = (apiRef, props) => {
       mode: _gridEditRowModel.GridRowModes.View
     }, other));
   }, [throwIfNotInMode, updateRowInRowModesModel]);
-  const updateStateToStopRowEditMode = React.useCallback(params => {
+  const updateStateToStopRowEditMode = (0, _utils.unstable_useEventCallback)(params => {
     const {
       id,
       ignoreModifications,
@@ -435,7 +441,11 @@ const useGridRowEditing = (apiRef, props) => {
 
     if (processRowUpdate) {
       const handleError = errorThrown => {
-        prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit;
+        prevRowModesModel.current[id].mode = _gridEditRowModel.GridRowModes.Edit; // Revert the mode in the rowModesModel prop back to "edit"
+
+        updateRowInRowModesModel(id, {
+          mode: _gridEditRowModel.GridRowModes.Edit
+        });
 
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
@@ -456,7 +466,7 @@ const useGridRowEditing = (apiRef, props) => {
       apiRef.current.updateRows([rowUpdate]);
       finishRowEditMode();
     }
-  }, [apiRef, onProcessRowUpdateError, processRowUpdate, updateOrDeleteRowState, updateRowInRowModesModel]);
+  });
   const setRowEditingEditCellValue = React.useCallback(params => {
     const {
       id,
@@ -603,10 +613,10 @@ const useGridRowEditing = (apiRef, props) => {
     }
   }, [rowModesModelProp, updateRowModesModel]);
   React.useEffect(() => {
-    const idToIdLookup = (0, _gridRowsSelector.gridRowsIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
+    const idToIdLookup = (0, _gridRowsSelector.gridRowsDataRowIdToIdLookupSelector)(apiRef); // Update the ref here because updateStateToStopRowEditMode may change it later
 
     const copyOfPrevRowModesModel = prevRowModesModel.current;
-    prevRowModesModel.current = (0, _utils.deepClone)(rowModesModel); // Do a deep-clone because the attributes might be changed later
+    prevRowModesModel.current = (0, _utils2.deepClone)(rowModesModel); // Do a deep-clone because the attributes might be changed later
 
     Object.entries(rowModesModel).forEach(([id, params]) => {
       var _copyOfPrevRowModesMo, _idToIdLookup$id;

package/node/hooks/features/export/useGridPrintExport.js

@@ -39,6 +39,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 raf() {
+  return new Promise(resolve => {
+    requestAnimationFrame(() => {
+      resolve();
+    });
+  });
+}
+
 /**
  * @requires useGridColumns (state)
  * @requires useGridFilter (state)
@@ -56,6 +64,7 @@ const useGridPrintExport = (apiRef, props) => {
   // the new state needs to be in place before the grid can be sized correctly
 
   const updateGridColumnsForPrint = React.useCallback((fields, allColumns) => new Promise(resolve => {
+    // TODO remove unused Promise
     if (!fields && !allColumns) {
       resolve();
       return;
@@ -75,12 +84,10 @@ const useGridPrintExport = (apiRef, props) => {
     });
     apiRef.current.setColumnVisibilityModel(newColumnVisibilityModel);
     resolve();
-  }), [apiRef]);
+  }), [apiRef]); // TODO move outside of this scope and remove React.useCallback
+
   const buildPrintWindow = React.useCallback(title => {
     const iframeEl = document.createElement('iframe');
-    iframeEl.id = 'grid-print-window'; // Without this 'onload' event won't fire in some browsers
-
-    iframeEl.src = window.location.href;
     iframeEl.style.position = 'absolute';
     iframeEl.style.width = '0px';
     iframeEl.style.height = '0px';
@@ -88,17 +95,14 @@ const useGridPrintExport = (apiRef, props) => {
     return iframeEl;
   }, []);
   const handlePrintWindowLoad = React.useCallback((printWindow, options) => {
-    var _printWindow$contentW, _querySelector, _querySelector2;
+    var _querySelector, _querySelector2;
 
     const normalizeOptions = (0, _extends2.default)({
       copyStyles: true,
       hideToolbar: false,
       hideFooter: false
-    }, options); // Some agents, such as IE11 and Enzyme (as of 2 Jun 2020) continuously call the
-    // `onload` callback. This ensures that it is only called once.
-
-    printWindow.onload = null;
-    const printDoc = printWindow.contentDocument || ((_printWindow$contentW = printWindow.contentWindow) == null ? void 0 : _printWindow$contentW.document);
+    }, options);
+    const printDoc = printWindow.contentDocument;
 
     if (!printDoc) {
       return;
@@ -138,10 +142,12 @@ const useGridPrintExport = (apiRef, props) => {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // Remove all loaded elements from the current host
+    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
+    // prevents us to do it
 
-    printDoc.body.innerHTML = '';
-    printDoc.body.appendChild(gridClone);
+    const container = document.createElement('div');
+    container.appendChild(gridClone);
+    printDoc.body.innerHTML = container.innerHTML;
     const defaultPageStyle = typeof normalizeOptions.pageStyle === 'function' ? normalizeOptions.pageStyle() : normalizeOptions.pageStyle;
 
     if (typeof defaultPageStyle === 'string') {
@@ -235,17 +241,25 @@ const useGridPrintExport = (apiRef, props) => {
 
     await updateGridColumnsForPrint(options == null ? void 0 : options.fields, options == null ? void 0 : options.allColumns);
     apiRef.current.unstable_disableVirtualization();
+    await raf(); // wait for the state changes to take action
+
     const printWindow = buildPrintWindow(options == null ? void 0 : options.fileName);
-    doc.current.body.appendChild(printWindow);
 
     if (process.env.NODE_ENV === 'test') {
-      // In test env, run the all pipeline without waiting for loading
+      doc.current.body.appendChild(printWindow); // In test env, run the all pipeline without waiting for loading
+
       handlePrintWindowLoad(printWindow, options);
       handlePrintWindowAfterPrint(printWindow);
     } else {
-      printWindow.onload = () => handlePrintWindowLoad(printWindow, options);
+      printWindow.onload = () => {
+        handlePrintWindowLoad(printWindow, options);
+
+        printWindow.contentWindow.onafterprint = () => {
+          handlePrintWindowAfterPrint(printWindow);
+        };
+      };
 
-      printWindow.contentWindow.onafterprint = () => handlePrintWindowAfterPrint(printWindow);
+      doc.current.body.appendChild(printWindow);
     }
   }, [props, logger, apiRef, buildPrintWindow, handlePrintWindowLoad, handlePrintWindowAfterPrint, updateGridColumnsForPrint]);
   const printExportApi = {

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

@@ -35,11 +35,7 @@ const defaultGetRowsToExport = ({
   const filteredSortedRowIds = (0, _filter.gridFilteredSortedRowIdsSelector)(apiRef);
   const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
-  const bodyRows = filteredSortedRowIds.filter(id => {
-    var _rowTree$id$position;
-
-    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
-  });
+  const bodyRows = filteredSortedRowIds.filter(id => rowTree[id].type !== 'footer');
   const pinnedRows = (0, _gridRowsSelector.gridPinnedRowsSelector)(apiRef);
   const topPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.map(row => row.id)) || [];
   const bottomPinnedRowsIds = (pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.map(row => row.id)) || [];

package/node/hooks/features/filter/gridFilterSelector.js

@@ -100,7 +100,7 @@ const gridVisibleRowsSelector = gridVisibleSortedRowIdsSelector;
  */
 
 exports.gridVisibleRowsSelector = gridVisibleRowsSelector;
-const gridVisibleSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelector)(gridVisibleSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
+const gridVisibleSortedTopLevelRowEntriesSelector = (0, _createSelector.createSelector)(gridVisibleSortedRowEntriesSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, (visibleSortedRows, rowTree, rowTreeDepth) => {
   if (rowTreeDepth < 2) {
     return visibleSortedRows;
   }

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

@@ -11,8 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _gridFeatureMode = require("../../../models/gridFeatureMode");
-
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -80,7 +78,7 @@ const useGridFilter = (apiRef, props) => {
   const updateFilteredRows = React.useCallback(() => {
     apiRef.current.setState(state => {
       const filterModel = (0, _gridFilterSelector.gridFilterModelSelector)(state, apiRef.current.instanceId);
-      const isRowMatchingFilters = props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
+      const isRowMatchingFilters = props.filterMode === 'client' ? (0, _gridFilterUtils.buildAggregatedFilterApplier)(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
         isRowMatchingFilters,
         filterModel: filterModel != null ? filterModel : (0, _gridFilterState.getDefaultGridFilterModel)()
@@ -289,8 +287,9 @@ const useGridFilter = (apiRef, props) => {
     return initialValue;
   }, [props.components.FilterPanel, (_props$componentsProp2 = props.componentsProps) == null ? void 0 : _props$componentsProp2.filterPanel]);
   const flatFilteringMethod = React.useCallback(params => {
-    if (props.filterMode === _gridFeatureMode.GridFeatureModeConstant.client && params.isRowMatchingFilters) {
-      const rowIds = (0, _rows.gridRowIdsSelector)(apiRef);
+    if (props.filterMode === 'client' && params.isRowMatchingFilters) {
+      const tree = (0, _rows.gridRowTreeSelector)(apiRef);
+      const rowIds = tree[_rows.GRID_ROOT_GROUP_ID].children;
       const filteredRowsLookup = {};
 
       for (let i = 0; i < rowIds.length; i += 1) {
@@ -312,7 +311,7 @@ const useGridFilter = (apiRef, props) => {
 
       return {
         filteredRowsLookup,
-        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` since no row is collapsed.
+        // For flat tree, the `visibleRowsLookup` and the `filteredRowsLookup` are equals since no row is collapsed.
         visibleRowsLookup: filteredRowsLookup,
         filteredDescendantCountLookup: {}
       };

package/node/hooks/features/pagination/gridPaginationSelector.js

@@ -44,7 +44,7 @@ const gridPageCountSelector = (0, _createSelector.createSelector)(gridPagination
  */
 
 exports.gridPageCountSelector = gridPageCountSelector;
-const gridPaginationRowRangeSelector = (0, _createSelector.createSelector)(gridPaginationSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowTreeDepthSelector, _gridFilterSelector.gridVisibleSortedRowEntriesSelector, _gridFilterSelector.gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
+const gridPaginationRowRangeSelector = (0, _createSelector.createSelector)(gridPaginationSelector, _gridRowsSelector.gridRowTreeSelector, _gridRowsSelector.gridRowMaximumTreeDepthSelector, _gridFilterSelector.gridVisibleSortedRowEntriesSelector, _gridFilterSelector.gridVisibleSortedTopLevelRowEntriesSelector, (pagination, rowTree, rowTreeDepth, visibleSortedRowEntries, visibleSortedTopLevelRowEntries) => {
   const visibleTopLevelRowCount = visibleSortedTopLevelRowEntries.length;
   const topLevelFirstRowIndex = Math.min(pagination.pageSize * pagination.page, visibleTopLevelRowCount - 1);
   const topLevelLastRowIndex = Math.min(topLevelFirstRowIndex + pagination.pageSize - 1, visibleTopLevelRowCount - 1); // The range contains no element

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthSelector = exports.gridRowIdsSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridAdditionalRowGroupsSelector = void 0;
+exports.gridTopLevelRowCountSelector = exports.gridRowsStateSelector = exports.gridRowsLookupSelector = exports.gridRowsLoadingSelector = exports.gridRowsDataRowIdToIdLookupSelector = exports.gridRowTreeSelector = exports.gridRowTreeDepthsSelector = exports.gridRowMaximumTreeDepthSelector = exports.gridRowGroupingNameSelector = exports.gridRowCountSelector = exports.gridPinnedRowsSelector = exports.gridPinnedRowsCountSelector = exports.gridDataRowIdsSelector = exports.gridAdditionalRowGroupsSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -14,31 +14,64 @@ const gridRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSe
 exports.gridRowCountSelector = gridRowCountSelector;
 const gridRowsLoadingSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.loading);
 exports.gridRowsLoadingSelector = gridRowsLoadingSelector;
-const gridTopLevelRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalTopLevelRowCount);
+const gridTopLevelRowCountSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.totalTopLevelRowCount); // TODO rows v6: Rename
+
 exports.gridTopLevelRowCountSelector = gridTopLevelRowCountSelector;
-const gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.idRowsLookup);
+const gridRowsLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
 exports.gridRowsLookupSelector = gridRowsLookupSelector;
-const gridRowsIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.idToIdLookup);
-exports.gridRowsIdToIdLookupSelector = gridRowsIdToIdLookupSelector;
+const gridRowsDataRowIdToIdLookupSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
+exports.gridRowsDataRowIdToIdLookupSelector = gridRowsDataRowIdToIdLookupSelector;
 const gridRowTreeSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.tree);
 exports.gridRowTreeSelector = gridRowTreeSelector;
 const gridRowGroupingNameSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.groupingName);
 exports.gridRowGroupingNameSelector = gridRowGroupingNameSelector;
-const gridRowTreeDepthSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.treeDepth);
-exports.gridRowTreeDepthSelector = gridRowTreeDepthSelector;
-const gridRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.ids);
+const gridRowTreeDepthsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.treeDepths);
+exports.gridRowTreeDepthsSelector = gridRowTreeDepthsSelector;
+const gridRowMaximumTreeDepthSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => {
+  const entries = Object.entries(rows.treeDepths);
+
+  if (entries.length === 0) {
+    return 1;
+  }
+
+  return entries.filter(([, nodeCount]) => nodeCount > 0).map(([depth]) => Number(depth)).sort((a, b) => b - a)[0] + 1;
+});
+exports.gridRowMaximumTreeDepthSelector = gridRowMaximumTreeDepthSelector;
+const gridDataRowIdsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows.dataRowIds);
 /**
  * @ignore - do not document.
  */
 
-exports.gridRowIdsSelector = gridRowIdsSelector;
+exports.gridDataRowIdsSelector = gridDataRowIdsSelector;
 const gridAdditionalRowGroupsSelector = (0, _createSelector.createSelector)(gridRowsStateSelector, rows => rows == null ? void 0 : rows.additionalRowGroups);
 /**
  * @ignore - do not document.
  */
 
 exports.gridAdditionalRowGroupsSelector = gridAdditionalRowGroupsSelector;
-const gridPinnedRowsSelector = (0, _createSelector.createSelector)(gridAdditionalRowGroupsSelector, additionalRowGroups => additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows);
+const gridPinnedRowsSelector = (0, _createSelector.createSelector)(gridAdditionalRowGroupsSelector, additionalRowGroups => {
+  var _rawPinnedRows$bottom, _rawPinnedRows$top;
+
+  const rawPinnedRows = additionalRowGroups == null ? void 0 : additionalRowGroups.pinnedRows;
+  return {
+    bottom: rawPinnedRows == null ? void 0 : (_rawPinnedRows$bottom = rawPinnedRows.bottom) == null ? void 0 : _rawPinnedRows$bottom.map(rowEntry => {
+      var _rowEntry$model;
+
+      return {
+        id: rowEntry.id,
+        model: (_rowEntry$model = rowEntry.model) != null ? _rowEntry$model : {}
+      };
+    }),
+    top: rawPinnedRows == null ? void 0 : (_rawPinnedRows$top = rawPinnedRows.top) == null ? void 0 : _rawPinnedRows$top.map(rowEntry => {
+      var _rowEntry$model2;
+
+      return {
+        id: rowEntry.id,
+        model: (_rowEntry$model2 = rowEntry.model) != null ? _rowEntry$model2 : {}
+      };
+    })
+  };
+});
 /**
  * @ignore - do not document.
  */