wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/node/hooks/features/columns/gridColumnsInterfaces.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/columns/gridColumnsSelector.js

@@ -0,0 +1,93 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridVisibleColumnFieldsSelector = exports.gridVisibleColumnDefinitionsSelector = exports.gridFilterableColumnLookupSelector = exports.gridFilterableColumnDefinitionsSelector = exports.gridColumnsTotalWidthSelector = exports.gridColumnsStateSelector = exports.gridColumnVisibilityModelSelector = exports.gridColumnPositionsSelector = exports.gridColumnLookupSelector = exports.gridColumnFieldsSelector = exports.gridColumnDefinitionsSelector = void 0;
+var _createSelector = require("../../../utils/createSelector");
+/**
+ * Get the columns state
+ * @category Columns
+ */
+const gridColumnsStateSelector = state => state.columns;
+
+/**
+ * Get an array of column fields in the order rendered on screen.
+ * @category Columns
+ */
+exports.gridColumnsStateSelector = gridColumnsStateSelector;
+const gridColumnFieldsSelector = exports.gridColumnFieldsSelector = (0, _createSelector.createSelector)(gridColumnsStateSelector, columnsState => columnsState.orderedFields);
+
+/**
+ * Get the columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+const gridColumnLookupSelector = exports.gridColumnLookupSelector = (0, _createSelector.createSelector)(gridColumnsStateSelector, columnsState => columnsState.lookup);
+
+/**
+ * Get an array of column definitions in the order rendered on screen..
+ * @category Columns
+ */
+const gridColumnDefinitionsSelector = exports.gridColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnFieldsSelector, gridColumnLookupSelector, (allFields, lookup) => allFields.map(field => lookup[field]));
+
+/**
+ * Get the column visibility model, containing the visibility status of each column.
+ * If a column is not registered in the model, it is visible.
+ * @category Visible Columns
+ */
+const gridColumnVisibilityModelSelector = exports.gridColumnVisibilityModelSelector = (0, _createSelector.createSelector)(gridColumnsStateSelector, columnsState => columnsState.columnVisibilityModel);
+
+/**
+ * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Visible Columns
+ */
+const gridVisibleColumnDefinitionsSelector = exports.gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+
+/**
+ * Get the field of each visible column.
+ * @category Visible Columns
+ */
+const gridVisibleColumnFieldsSelector = exports.gridVisibleColumnFieldsSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.map(column => column.field));
+
+/**
+ * Get the left position in pixel of each visible columns relative to the left of the first column.
+ * @category Visible Columns
+ */
+const gridColumnPositionsSelector = exports.gridColumnPositionsSelector = (0, _createSelector.createSelectorMemoized)(gridVisibleColumnDefinitionsSelector, visibleColumns => {
+  const positions = [];
+  let currentPosition = 0;
+  for (let i = 0; i < visibleColumns.length; i += 1) {
+    positions.push(currentPosition);
+    currentPosition += visibleColumns[i].computedWidth;
+  }
+  return positions;
+});
+
+/**
+ * Get the summed width of all the visible columns.
+ * @category Visible Columns
+ */
+const gridColumnsTotalWidthSelector = exports.gridColumnsTotalWidthSelector = (0, _createSelector.createSelector)(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth;
+});
+
+/**
+ * Get the filterable columns as an array.
+ * @category Columns
+ */
+const gridFilterableColumnDefinitionsSelector = exports.gridFilterableColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.filter(col => col.filterable));
+
+/**
+ * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
+ * @category Columns
+ */
+const gridFilterableColumnLookupSelector = exports.gridFilterableColumnLookupSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, columns => columns.reduce((acc, col) => {
+  if (col.filterable) {
+    acc[col.field] = col;
+  }
+  return acc;
+}, {}));

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

@@ -0,0 +1,348 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyInitialState = exports.COLUMNS_DIMENSION_PROPERTIES = void 0;
+exports.computeFlexColumnsWidth = computeFlexColumnsWidth;
+exports.createColumnsState = void 0;
+exports.getFirstColumnIndexToRender = getFirstColumnIndexToRender;
+exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
+exports.getTotalHeaderHeight = getTotalHeaderHeight;
+exports.mergeColumnsState = exports.hydrateColumnsWidth = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _colDef = require("../../../colDef");
+var _gridColumnsSelector = require("./gridColumnsSelector");
+var _utils = require("../../../utils/utils");
+var _densitySelector = require("../density/densitySelector");
+var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
+const COLUMNS_DIMENSION_PROPERTIES = exports.COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
+/**
+ * Computes width for flex columns.
+ * Based on CSS Flexbox specification:
+ * https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+ */
+function computeFlexColumnsWidth({
+  initialFreeSpace,
+  totalFlexUnits,
+  flexColumns
+}) {
+  const uniqueFlexColumns = new Set(flexColumns.map(col => col.field));
+  const flexColumnsLookup = {
+    all: {},
+    frozenFields: [],
+    freeze: field => {
+      const value = flexColumnsLookup.all[field];
+      if (value && value.frozen !== true) {
+        flexColumnsLookup.all[field].frozen = true;
+        flexColumnsLookup.frozenFields.push(field);
+      }
+    }
+  };
+
+  // Step 5 of https://drafts.csswg.org/css-flexbox-1/#resolve-flexible-lengths
+  function loopOverFlexItems() {
+    // 5a: If all the flex items on the line are frozen, free space has been distributed.
+    if (flexColumnsLookup.frozenFields.length === uniqueFlexColumns.size) {
+      return;
+    }
+    const violationsLookup = {
+      min: {},
+      max: {}
+    };
+    let remainingFreeSpace = initialFreeSpace;
+    let flexUnits = totalFlexUnits;
+    let totalViolation = 0;
+
+    // 5b: Calculate the remaining free space
+    flexColumnsLookup.frozenFields.forEach(field => {
+      remainingFreeSpace -= flexColumnsLookup.all[field].computedWidth;
+      flexUnits -= flexColumnsLookup.all[field].flex;
+    });
+    for (let i = 0; i < flexColumns.length; i += 1) {
+      const column = flexColumns[i];
+      if (flexColumnsLookup.all[column.field] && flexColumnsLookup.all[column.field].frozen === true) {
+        continue;
+      }
+
+      // 5c: Distribute remaining free space proportional to the flex factors
+      const widthPerFlexUnit = remainingFreeSpace / flexUnits;
+      let computedWidth = widthPerFlexUnit * column.flex;
+
+      // 5d: Fix min/max violations
+      if (computedWidth < column.minWidth) {
+        totalViolation += column.minWidth - computedWidth;
+        computedWidth = column.minWidth;
+        violationsLookup.min[column.field] = true;
+      } else if (computedWidth > column.maxWidth) {
+        totalViolation += column.maxWidth - computedWidth;
+        computedWidth = column.maxWidth;
+        violationsLookup.max[column.field] = true;
+      }
+      flexColumnsLookup.all[column.field] = {
+        frozen: false,
+        computedWidth,
+        flex: column.flex
+      };
+    }
+
+    // 5e: Freeze over-flexed items
+    if (totalViolation < 0) {
+      // Freeze all the items with max violations
+      Object.keys(violationsLookup.max).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else if (totalViolation > 0) {
+      // Freeze all the items with min violations
+      Object.keys(violationsLookup.min).forEach(field => {
+        flexColumnsLookup.freeze(field);
+      });
+    } else {
+      // Freeze all items
+      flexColumns.forEach(({
+        field
+      }) => {
+        flexColumnsLookup.freeze(field);
+      });
+    }
+
+    // 5f: Return to the start of this loop
+    loopOverFlexItems();
+  }
+  loopOverFlexItems();
+  return flexColumnsLookup.all;
+}
+
+/**
+ * Compute the `computedWidth` (ie: the width the column should have during rendering) based on the `width` / `flex` / `minWidth` / `maxWidth` properties of `GridColDef`.
+ * The columns already have been merged with there `type` default values for `minWidth`, `maxWidth` and `width`, thus the `!` for those properties below.
+ * TODO: Unit test this function in depth and only keep basic cases for the whole grid testing.
+ * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
+ */
+const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
+  const columnsLookup = {};
+  let totalFlexUnits = 0;
+  let widthAllocatedBeforeFlex = 0;
+  const flexColumns = [];
+
+  // For the non-flex columns, compute their width
+  // For the flex columns, compute there minimum width and how much width must be allocated during the flex allocation
+  rawState.orderedFields.forEach(columnField => {
+    const newColumn = (0, _extends2.default)({}, rawState.lookup[columnField]);
+    if (rawState.columnVisibilityModel[columnField] === false) {
+      newColumn.computedWidth = 0;
+    } else {
+      let computedWidth;
+      if (newColumn.flex && newColumn.flex > 0) {
+        totalFlexUnits += newColumn.flex;
+        computedWidth = 0;
+        flexColumns.push(newColumn);
+      } else {
+        computedWidth = (0, _utils.clamp)(newColumn.width || _colDef.GRID_STRING_COL_DEF.width, newColumn.minWidth || _colDef.GRID_STRING_COL_DEF.minWidth, newColumn.maxWidth || _colDef.GRID_STRING_COL_DEF.maxWidth);
+      }
+      widthAllocatedBeforeFlex += computedWidth;
+      newColumn.computedWidth = computedWidth;
+    }
+    columnsLookup[columnField] = newColumn;
+  });
+  const initialFreeSpace = Math.max(viewportInnerWidth - widthAllocatedBeforeFlex, 0);
+
+  // Allocate the remaining space to the flex columns
+  if (totalFlexUnits > 0 && viewportInnerWidth > 0) {
+    const computedColumnWidths = computeFlexColumnsWidth({
+      initialFreeSpace,
+      totalFlexUnits,
+      flexColumns
+    });
+    Object.keys(computedColumnWidths).forEach(field => {
+      columnsLookup[field].computedWidth = computedColumnWidths[field].computedWidth;
+    });
+  }
+  return (0, _extends2.default)({}, rawState, {
+    lookup: columnsLookup
+  });
+};
+
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+exports.hydrateColumnsWidth = hydrateColumnsWidth;
+const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const field = orderedFields[i];
+
+    // Ignores the fields in the initialState that matches no field on the current column state
+    if (columnsState.lookup[field]) {
+      orderedFieldsLookup[field] = true;
+      cleanOrderedFields.push(field);
+    }
+  }
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.orderedFields : [...cleanOrderedFields, ...columnsState.orderedFields.filter(field => !orderedFieldsLookup[field])];
+  const newColumnLookup = (0, _extends2.default)({}, columnsState.lookup);
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    const newColDef = (0, _extends2.default)({}, newColumnLookup[field], {
+      hasBeenResized: true
+    });
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  }
+  const newColumnsState = (0, _extends2.default)({}, columnsState, {
+    orderedFields: newOrderedFields,
+    lookup: newColumnLookup
+  });
+  return newColumnsState;
+};
+exports.applyInitialState = applyInitialState;
+function getDefaultColTypeDef(columnTypes, type) {
+  let colDef = columnTypes[_colDef.DEFAULT_GRID_COL_TYPE_KEY];
+  if (type && columnTypes[type]) {
+    colDef = columnTypes[type];
+  }
+  return colDef;
+}
+const createColumnsState = ({
+  apiRef,
+  columnsToUpsert,
+  initialState,
+  columnTypes,
+  columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef),
+  keepOnlyColumnsToUpsert = false
+}) => {
+  const isInsideStateInitializer = !apiRef.current.state.columns;
+  let columnsState;
+  if (isInsideStateInitializer) {
+    columnsState = {
+      orderedFields: [],
+      lookup: {},
+      columnVisibilityModel
+    };
+  } else {
+    const currentState = (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state);
+    columnsState = {
+      orderedFields: keepOnlyColumnsToUpsert ? [] : [...currentState.orderedFields],
+      lookup: (0, _extends2.default)({}, currentState.lookup),
+      // Will be cleaned later if keepOnlyColumnsToUpsert=true
+      columnVisibilityModel
+    };
+  }
+  let columnsToKeep = {};
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
+      [key]: false
+    }), {});
+  }
+  const columnsToUpsertLookup = {};
+  columnsToUpsert.forEach(newColumn => {
+    const {
+      field
+    } = newColumn;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    let existingState = columnsState.lookup[field];
+    if (existingState == null) {
+      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+        field,
+        hasBeenResized: false
+      });
+      columnsState.orderedFields.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsState.orderedFields.push(field);
+    }
+
+    // If the column type has changed - merge the existing state with the default column type definition
+    if (existingState && existingState.type !== newColumn.type) {
+      existingState = (0, _extends2.default)({}, getDefaultColTypeDef(columnTypes, newColumn.type), {
+        field
+      });
+    }
+    let hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
+    columnsState.lookup[field] = (0, _extends2.default)({}, existingState, newColumn, {
+      hasBeenResized
+    });
+  });
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsState.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsState.lookup[field];
+      }
+    });
+  }
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsState);
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+  return hydrateColumnsWidth(columnsStateWithPortableColumns, apiRef.current.getRootDimensions?.()?.viewportInnerSize.width ?? 0);
+};
+exports.createColumnsState = createColumnsState;
+const mergeColumnsState = columnsState => state => (0, _extends2.default)({}, state, {
+  columns: columnsState
+});
+exports.mergeColumnsState = mergeColumnsState;
+function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+    const row = visibleRows[i];
+    if (row) {
+      const rowId = visibleRows[i].id;
+      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+  return firstNonSpannedColumnToRender;
+}
+function getFirstColumnIndexToRender({
+  firstColumnIndex,
+  minColumnIndex,
+  columnBuffer,
+  firstRowToRender,
+  lastRowToRender,
+  apiRef,
+  visibleRows
+}) {
+  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    lastRowToRender,
+    visibleRows
+  });
+  return firstColumnToRender;
+}
+function getTotalHeaderHeight(apiRef, headerHeight) {
+  const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
+  const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
+  return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + 1);
+}

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "gridColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnDefinitionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnFieldsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnFieldsSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnPositionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnPositionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnVisibilityModelSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnVisibilityModelSelector;
+  }
+});
+Object.defineProperty(exports, "gridColumnsTotalWidthSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridColumnsTotalWidthSelector;
+  }
+});
+Object.defineProperty(exports, "gridFilterableColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridFilterableColumnDefinitionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridFilterableColumnLookupSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridFilterableColumnLookupSelector;
+  }
+});
+Object.defineProperty(exports, "gridVisibleColumnDefinitionsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridVisibleColumnDefinitionsSelector;
+  }
+});
+Object.defineProperty(exports, "gridVisibleColumnFieldsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridColumnsSelector.gridVisibleColumnFieldsSelector;
+  }
+});
+var _gridColumnsSelector = require("./gridColumnsSelector");

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

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnSpanning = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+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; }
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+const useGridColumnSpanning = apiRef => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+    const sizes = lookup.current;
+    if (!sizes[rowId]) {
+      sizes[rowId] = {};
+    }
+    sizes[rowId][columnIndex] = cellColSpanInfo;
+  }, []);
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
+    return lookup.current[rowId]?.[columnIndex];
+  }, []);
+
+  // Calculate `colSpan` for the cell.
+  const calculateCellColSpan = React.useCallback(params => {
+    const {
+      columnIndex,
+      rowId,
+      minFirstColumnIndex,
+      maxLastColumnIndex,
+      columns
+    } = params;
+    const columnsLength = columns.length;
+    const column = columns[columnIndex];
+    const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
+    if (!colSpan || colSpan === 1) {
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan: 1,
+          width: column.computedWidth
+        }
+      });
+      return {
+        colSpan: 1
+      };
+    }
+    let width = column.computedWidth;
+    for (let j = 1; j < colSpan; j += 1) {
+      const nextColumnIndex = columnIndex + j;
+      // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
+      if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
+        const nextColumn = columns[nextColumnIndex];
+        width += nextColumn.computedWidth;
+        setCellColSpanInfo(rowId, columnIndex + j, {
+          spannedByColSpan: true,
+          rightVisibleCellIndex: Math.min(columnIndex + colSpan, columnsLength - 1),
+          leftVisibleCellIndex: columnIndex
+        });
+      }
+      setCellColSpanInfo(rowId, columnIndex, {
+        spannedByColSpan: false,
+        cellProps: {
+          colSpan,
+          width
+        }
+      });
+    }
+    return {
+      colSpan
+    };
+  }, [apiRef, setCellColSpanInfo]);
+
+  // Calculate `colSpan` for each cell in the row
+  const calculateColSpan = React.useCallback(({
+    rowId,
+    minFirstColumn,
+    maxLastColumn,
+    columns
+  }) => {
+    for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
+      const cellProps = calculateCellColSpan({
+        columnIndex: i,
+        rowId,
+        minFirstColumnIndex: minFirstColumn,
+        maxLastColumnIndex: maxLastColumn,
+        columns
+      });
+      if (cellProps.colSpan > 1) {
+        i += cellProps.colSpan - 1;
+      }
+    }
+  }, [calculateCellColSpan]);
+  const columnSpanningPublicApi = {
+    unstable_getCellColSpanInfo: getCellColSpanInfo
+  };
+  const columnSpanningPrivateApi = {
+    calculateColSpan
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPublicApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningPrivateApi, 'private');
+  const handleColumnReorderChange = React.useCallback(() => {
+    // `colSpan` needs to be recalculated after column reordering
+    lookup.current = {};
+  }, []);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
+};
+exports.useGridColumnSpanning = useGridColumnSpanning;

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

@@ -0,0 +1,313 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnsStateInitializer = void 0;
+exports.useGridColumns = useGridColumns;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+var _useGridLogger = require("../../utils/useGridLogger");
+var _gridColumnsSelector = require("./gridColumnsSelector");
+var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
+var _pipeProcessing = require("../../core/pipeProcessing");
+var _gridColumnsUtils = require("./gridColumnsUtils");
+var _preferencesPanel = require("../preferencesPanel");
+var _colDef = require("../../../colDef");
+var _jsxRuntime = require("react/jsx-runtime");
+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 defaultColumnTypes = (0, _colDef.getGridDefaultColumnTypes)();
+const columnsStateInitializer = (state, props, apiRef) => {
+  const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+    apiRef,
+    columnTypes: defaultColumnTypes,
+    columnsToUpsert: props.columns,
+    initialState: props.initialState?.columns,
+    columnVisibilityModel: props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
+    keepOnlyColumnsToUpsert: true
+  });
+  return (0, _extends2.default)({}, state, {
+    columns: columnsState
+  });
+};
+
+/**
+ * @requires useGridParamsApi (method)
+ * @requires useGridDimensions (method, event) - can be after
+ * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
+ */
+exports.columnsStateInitializer = columnsStateInitializer;
+function useGridColumns(apiRef, props) {
+  const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
+  const columnTypes = defaultColumnTypes;
+  const previousColumnsProp = React.useRef(props.columns);
+  const previousColumnTypesProp = React.useRef(columnTypes);
+  apiRef.current.registerControlState({
+    stateId: 'visibleColumns',
+    propModel: props.columnVisibilityModel,
+    propOnChange: props.onColumnVisibilityModelChange,
+    stateSelector: _gridColumnsSelector.gridColumnVisibilityModelSelector,
+    changeEvent: 'columnVisibilityModelChange'
+  });
+  const setGridColumnsState = React.useCallback(columnsState => {
+    logger.debug('Updating columns state.');
+    apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
+    apiRef.current.forceUpdate();
+    apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+  }, [logger, apiRef]);
+
+  /**
+   * API METHODS
+   */
+  const getColumn = React.useCallback(field => (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef)[field], [apiRef]);
+  const getAllColumns = React.useCallback(() => (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef), [apiRef]);
+  const getVisibleColumns = React.useCallback(() => (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef), [apiRef]);
+  const getColumnIndex = React.useCallback((field, useVisibleColumns = true) => {
+    const columns = useVisibleColumns ? (0, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector)(apiRef) : (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
+    return columns.findIndex(col => col.field === field);
+  }, [apiRef]);
+  const getColumnPosition = React.useCallback(field => {
+    const index = getColumnIndex(field);
+    return (0, _gridColumnsSelector.gridColumnPositionsSelector)(apiRef)[index];
+  }, [apiRef, getColumnIndex]);
+  const setColumnVisibilityModel = React.useCallback(model => {
+    const currentModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    if (currentModel !== model) {
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        columns: (0, _gridColumnsUtils.createColumnsState)({
+          apiRef,
+          columnTypes,
+          columnsToUpsert: [],
+          initialState: undefined,
+          columnVisibilityModel: model,
+          keepOnlyColumnsToUpsert: false
+        })
+      }));
+      apiRef.current.forceUpdate();
+    }
+  }, [apiRef, columnTypes]);
+  const updateColumns = React.useCallback(columns => {
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnTypes,
+      columnsToUpsert: columns,
+      initialState: undefined,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, setGridColumnsState, columnTypes]);
+  const setColumnVisibility = React.useCallback((field, isVisible) => {
+    const columnVisibilityModel = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const isCurrentlyVisible = columnVisibilityModel[field] ?? true;
+    if (isVisible !== isCurrentlyVisible) {
+      const newModel = (0, _extends2.default)({}, columnVisibilityModel, {
+        [field]: isVisible
+      });
+      apiRef.current.setColumnVisibilityModel(newModel);
+    }
+  }, [apiRef]);
+  const getColumnIndexRelativeToVisibleColumns = React.useCallback(field => {
+    const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
+    return allColumns.findIndex(col => col === field);
+  }, [apiRef]);
+  const setColumnIndex = React.useCallback((field, targetIndexPosition) => {
+    const allColumns = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
+    const oldIndexPosition = getColumnIndexRelativeToVisibleColumns(field);
+    if (oldIndexPosition === targetIndexPosition) {
+      return;
+    }
+    logger.debug(`Moving column ${field} to index ${targetIndexPosition}`);
+    const updatedColumns = [...allColumns];
+    const fieldRemoved = updatedColumns.splice(oldIndexPosition, 1)[0];
+    updatedColumns.splice(targetIndexPosition, 0, fieldRemoved);
+    setGridColumnsState((0, _extends2.default)({}, (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), {
+      orderedFields: updatedColumns
+    }));
+    const params = {
+      column: apiRef.current.getColumn(field),
+      targetIndex: apiRef.current.getColumnIndexRelativeToVisibleColumns(field),
+      oldIndex: oldIndexPosition
+    };
+    apiRef.current.publishEvent('columnIndexChange', params);
+  }, [apiRef, logger, setGridColumnsState, getColumnIndexRelativeToVisibleColumns]);
+  const setColumnWidth = React.useCallback((field, width) => {
+    logger.debug(`Updating column ${field} width to ${width}`);
+    const columnsState = (0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state);
+    const column = columnsState.lookup[field];
+    const newColumn = (0, _extends2.default)({}, column, {
+      width,
+      hasBeenResized: true
+    });
+    setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _extends2.default)({}, columnsState, {
+      lookup: (0, _extends2.default)({}, columnsState.lookup, {
+        [field]: newColumn
+      })
+    }), apiRef.current.getRootDimensions()?.viewportInnerSize.width ?? 0));
+    apiRef.current.publishEvent('columnWidthChange', {
+      element: apiRef.current.getColumnHeaderElement(field),
+      colDef: newColumn,
+      width
+    });
+  }, [apiRef, logger, setGridColumnsState]);
+  const columnApi = {
+    getColumn,
+    getAllColumns,
+    getColumnIndex,
+    getColumnPosition,
+    getVisibleColumns,
+    getColumnIndexRelativeToVisibleColumns,
+    updateColumns,
+    setColumnVisibilityModel,
+    setColumnVisibility,
+    setColumnWidth
+  };
+  const columnReorderApi = {
+    setColumnIndex
+  };
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnApi, 'public');
+  (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnReorderApi, props.signature === _useGridApiEventHandler.GridSignature.DataGrid ? 'private' : 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const columnsStateToExport = {};
+    const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+    const shouldExportColumnVisibilityModel =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the model is controlled
+    props.columnVisibilityModel != null ||
+    // Always export if the model has been initialized
+    // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
+    Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 ||
+    // Always export if the model is not empty
+    Object.keys(columnVisibilityModelToExport).length > 0;
+    if (shouldExportColumnVisibilityModel) {
+      columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+    }
+    columnsStateToExport.orderedFields = (0, _gridColumnsSelector.gridColumnFieldsSelector)(apiRef);
+    const columns = (0, _gridColumnsSelector.gridColumnDefinitionsSelector)(apiRef);
+    const dimensions = {};
+    columns.forEach(colDef => {
+      if (colDef.hasBeenResized) {
+        const colDefDimensions = {};
+        _gridColumnsUtils.COLUMNS_DIMENSION_PROPERTIES.forEach(propertyName => {
+          let propertyValue = colDef[propertyName];
+          if (propertyValue === Infinity) {
+            propertyValue = -1;
+          }
+          colDefDimensions[propertyName] = propertyValue;
+        });
+        dimensions[colDef.field] = colDefDimensions;
+      }
+    });
+    if (Object.keys(dimensions).length > 0) {
+      columnsStateToExport.dimensions = dimensions;
+    }
+    return (0, _extends2.default)({}, prevState, {
+      columns: columnsStateToExport
+    });
+  }, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
+    const initialState = context.stateToRestore.columns;
+    if (columnVisibilityModelToImport == null && initialState == null) {
+      return params;
+    }
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnTypes,
+      columnsToUpsert: [],
+      initialState,
+      columnVisibilityModel: columnVisibilityModelToImport,
+      keepOnlyColumnsToUpsert: false
+    });
+    apiRef.current.setState((0, _gridColumnsUtils.mergeColumnsState)(columnsState));
+    if (initialState != null) {
+      apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    }
+    return params;
+  }, [apiRef, columnTypes]);
+  const preferencePanelPreProcessing = React.useCallback((initialValue, value) => {
+    if (value === _preferencesPanel.GridPreferencePanelsValue.columns) {
+      const ColumnsPanel = props.slots.columnsPanel;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnsPanel, (0, _extends2.default)({}, props.slotProps?.columnsPanel));
+    }
+    return initialValue;
+  }, [props.slots.columnsPanel, props.slotProps?.columnsPanel]);
+  const addColumnMenuItems = React.useCallback(columnMenuItems => {
+    if (props.disableColumnSelector) {
+      return columnMenuItems;
+    }
+    return [...columnMenuItems, 'columnMenuColumnsItem'];
+  }, [props.disableColumnSelector]);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuItems);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'preferencePanel', preferencePanelPreProcessing);
+
+  /**
+   * EVENTS
+   */
+  const prevInnerWidth = React.useRef(null);
+  const handleGridSizeChange = viewportInnerSize => {
+    if (prevInnerWidth.current !== viewportInnerSize.width) {
+      prevInnerWidth.current = viewportInnerSize.width;
+      setGridColumnsState((0, _gridColumnsUtils.hydrateColumnsWidth)((0, _gridColumnsSelector.gridColumnsStateSelector)(apiRef.current.state), viewportInnerSize.width));
+    }
+  };
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'viewportInnerSizeChange', handleGridSizeChange);
+
+  /**
+   * APPLIERS
+   */
+  const hydrateColumns = React.useCallback(() => {
+    logger.info(`Columns pipe processing have changed, regenerating the columns`);
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnTypes,
+      columnsToUpsert: [],
+      initialState: undefined,
+      keepOnlyColumnsToUpsert: false
+    });
+    setGridColumnsState(columnsState);
+  }, [apiRef, logger, setGridColumnsState, columnTypes]);
+  (0, _pipeProcessing.useGridRegisterPipeApplier)(apiRef, 'hydrateColumns', hydrateColumns);
+
+  /**
+   * EFFECTS
+   */
+  // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    logger.info(`GridColumns have changed, new length ${props.columns.length}`);
+    if (previousColumnsProp.current === props.columns && previousColumnTypesProp.current === columnTypes) {
+      return;
+    }
+    const columnsState = (0, _gridColumnsUtils.createColumnsState)({
+      apiRef,
+      columnTypes,
+      initialState: undefined,
+      // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
+      columnsToUpsert: props.columns,
+      keepOnlyColumnsToUpsert: true
+    });
+    previousColumnsProp.current = props.columns;
+    previousColumnTypesProp.current = columnTypes;
+    setGridColumnsState(columnsState);
+  }, [logger, apiRef, setGridColumnsState, props.columns, columnTypes]);
+  React.useEffect(() => {
+    if (props.columnVisibilityModel !== undefined) {
+      apiRef.current.setColumnVisibilityModel(props.columnVisibilityModel);
+    }
+  }, [apiRef, logger, props.columnVisibilityModel]);
+}