wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/node/hooks/features/columnGrouping/gridColumnGroupsInterfaces.js

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

control-plane-ui/node_modules/@mui/x-data-grid/node/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridColumnGroupsUnwrappedModelSelector = exports.gridColumnGroupsLookupSelector = exports.gridColumnGroupsHeaderStructureSelector = exports.gridColumnGroupsHeaderMaxDepthSelector = exports.gridColumnGroupingSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+const gridColumnGroupingSelector = state => state.columnGrouping;
+exports.gridColumnGroupingSelector = gridColumnGroupingSelector;
+const gridColumnGroupsUnwrappedModelSelector = exports.gridColumnGroupsUnwrappedModelSelector = (0, _createSelector.createSelectorMemoized)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.unwrappedGroupingModel ?? {});
+const gridColumnGroupsLookupSelector = exports.gridColumnGroupsLookupSelector = (0, _createSelector.createSelectorMemoized)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.lookup ?? {});
+const gridColumnGroupsHeaderStructureSelector = exports.gridColumnGroupsHeaderStructureSelector = (0, _createSelector.createSelectorMemoized)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.headerStructure ?? []);
+const gridColumnGroupsHeaderMaxDepthSelector = exports.gridColumnGroupsHeaderMaxDepthSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping?.maxDepth ?? 0);

control-plane-ui/node_modules/@mui/x-data-grid/node/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unwrapGroupingColumnModel = exports.getColumnGroupsHeaderStructure = void 0;
+var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
+var _utils = require("../../../utils/utils");
+// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
+const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
+  if ((0, _gridColumnGrouping.isLeaf)(columnGroupNode)) {
+    if (unwrappedGroupingModelToComplete[columnGroupNode.field] !== undefined) {
+      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplete[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
+    }
+    unwrappedGroupingModelToComplete[columnGroupNode.field] = parents;
+    return;
+  }
+  const {
+    groupId,
+    children
+  } = columnGroupNode;
+  children.forEach(child => {
+    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplete);
+  });
+};
+
+/**
+ * This is a function that provide for each column the array of its parents.
+ * Parents are ordered from the root to the leaf.
+ * @param columnGroupingModel The model such as provided in DataGrid props
+ * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
+ */
+const unwrapGroupingColumnModel = columnGroupingModel => {
+  if (!columnGroupingModel) {
+    return {};
+  }
+  const unwrappedSubTree = {};
+  columnGroupingModel.forEach(columnGroupNode => {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+exports.unwrapGroupingColumnModel = unwrapGroupingColumnModel;
+const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
+  const getParents = field => unwrappedGroupingModel[field] ?? [];
+  const groupingHeaderStructure = [];
+  const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
+  const haveSameParents = (field1, field2, depth) => (0, _utils.isDeepEqual)(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
+  const haveDifferentContainers = (field1, field2) => {
+    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
+      return true;
+    }
+    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
+      return true;
+    }
+    return false;
+  };
+  for (let depth = 0; depth < maxDepth; depth += 1) {
+    const depthStructure = orderedColumns.reduce((structure, newField) => {
+      const groupId = getParents(newField)[depth] ?? null;
+      if (structure.length === 0) {
+        return [{
+          columnFields: [newField],
+          groupId
+        }];
+      }
+      const lastGroup = structure[structure.length - 1];
+      const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
+      const prevGroupId = lastGroup.groupId;
+      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth) ||
+      // Fix for https://github.com/mui/mui-x/issues/7041
+      haveDifferentContainers(prevField, newField)) {
+        // It's a new group
+        return [...structure, {
+          columnFields: [newField],
+          groupId
+        }];
+      }
+
+      // It extends the previous group
+      return [...structure.slice(0, structure.length - 1), {
+        columnFields: [...lastGroup.columnFields, newField],
+        groupId
+      }];
+    }, []);
+    groupingHeaderStructure.push(depthStructure);
+  }
+  return groupingHeaderStructure;
+};
+exports.getColumnGroupsHeaderStructure = getColumnGroupsHeaderStructure;

control-plane-ui/node_modules/@mui/x-data-grid/node/hooks/features/columnGrouping/index.js

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

control-plane-ui/node_modules/@mui/x-data-grid/node/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnGrouping = exports.columnGroupsStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
+var _gridColumnGroupsSelector = require("./gridColumnGroupsSelector");
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _gridColumnGroupsUtils = require("./gridColumnGroupsUtils");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _columns = require("../columns");
+const _excluded = ["groupId", "children"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const createGroupLookup = columnGroupingModel => {
+  let groupLookup = {};
+  columnGroupingModel.forEach(node => {
+    if ((0, _gridColumnGrouping.isLeaf)(node)) {
+      return;
+    }
+    const {
+        groupId,
+        children
+      } = node,
+      other = (0, _objectWithoutPropertiesLoose2.default)(node, _excluded);
+    if (!groupId) {
+      throw new Error('MUI: An element of the columnGroupingModel does not have either `field` or `groupId`.');
+    }
+    if (!children) {
+      console.warn(`MUI: group groupId=${groupId} has no children.`);
+    }
+    const groupParam = (0, _extends2.default)({}, other, {
+      groupId
+    });
+    const subTreeLookup = createGroupLookup(children);
+    if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
+      throw new Error(`MUI: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
+    }
+    groupLookup = (0, _extends2.default)({}, groupLookup, subTreeLookup, {
+      [groupId]: groupParam
+    });
+  });
+  return (0, _extends2.default)({}, groupLookup);
+};
+const columnGroupsStateInitializer = (state, props, apiRef) => {
+  if (!props.experimentalFeatures?.columnGrouping) {
+    return state;
+  }
+  const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+  const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
+  const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
+  const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
+  const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel,
+  // @ts-expect-error Move this part to `Pro` package
+  apiRef.current.state.pinnedColumns ?? {});
+  const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
+  return (0, _extends2.default)({}, state, {
+    columnGrouping: {
+      lookup: groupLookup,
+      unwrappedGroupingModel,
+      headerStructure: columnGroupsHeaderStructure,
+      maxDepth
+    }
+  });
+};
+
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+exports.columnGroupsStateInitializer = columnGroupsStateInitializer;
+const useGridColumnGrouping = (apiRef, props) => {
+  /**
+   * API METHODS
+   */
+  const getColumnGroupPath = React.useCallback(field => {
+    const unwrappedGroupingModel = (0, _gridColumnGroupsSelector.gridColumnGroupsUnwrappedModelSelector)(apiRef);
+    return unwrappedGroupingModel[field] ?? [];
+  }, [apiRef]);
+  const getAllGroupDetails = React.useCallback(() => {
+    const columnGroupLookup = (0, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector)(apiRef);
+    return columnGroupLookup;
+  }, [apiRef]);
+  const columnGroupingApi = {
+    unstable_getColumnGroupPath: getColumnGroupPath,
+    unstable_getAllGroupDetails: getAllGroupDetails
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnGroupingApi, 'public');
+  const handleColumnIndexChange = React.useCallback(() => {
+    const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(props.columnGroupingModel ?? []);
+    apiRef.current.setState(state => {
+      const orderedFields = state.columns?.orderedFields ?? [];
+
+      // @ts-expect-error Move this logic to `Pro` package
+      const pinnedColumns = state.pinnedColumns ?? {};
+      const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(orderedFields, unwrappedGroupingModel, pinnedColumns);
+      return (0, _extends2.default)({}, state, {
+        columnGrouping: (0, _extends2.default)({}, state.columnGrouping, {
+          headerStructure: columnGroupsHeaderStructure
+        })
+      });
+    });
+  }, [apiRef, props.columnGroupingModel]);
+  const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    if (!props.experimentalFeatures?.columnGrouping) {
+      return;
+    }
+    // @ts-expect-error Move this logic to `Pro` package
+    const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
+    const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
+    const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
+    const groupLookup = createGroupLookup(columnGroupingModel ?? []);
+    const unwrappedGroupingModel = (0, _gridColumnGroupsUtils.unwrapGroupingColumnModel)(columnGroupingModel ?? []);
+    const columnGroupsHeaderStructure = (0, _gridColumnGroupsUtils.getColumnGroupsHeaderStructure)(columnFields, unwrappedGroupingModel, pinnedColumns);
+    const maxDepth = visibleColumnFields.length === 0 ? 0 : Math.max(...visibleColumnFields.map(field => unwrappedGroupingModel[field]?.length ?? 0));
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        columnGrouping: {
+          lookup: groupLookup,
+          unwrappedGroupingModel,
+          headerStructure: columnGroupsHeaderStructure,
+          maxDepth
+        }
+      });
+    });
+  }, [apiRef, props.experimentalFeatures?.columnGrouping]);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnIndexChange', handleColumnIndexChange);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnsChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnVisibilityModelChange', () => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  });
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    updateColumnGroupingState(props.columnGroupingModel);
+  }, [updateColumnGroupingState, props.columnGroupingModel]);
+};
+exports.useGridColumnGrouping = useGridColumnGrouping;