wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/ColumnHeaderMenuIcon.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnHeaderMenuIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+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 useUtilityClasses = ownerState => {
+  const {
+    classes,
+    open
+  } = ownerState;
+  const slots = {
+    root: ['menuIcon', open && 'menuOpen'],
+    button: ['menuIconButton']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const ColumnHeaderMenuIcon = exports.ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
+  const {
+    colDef,
+    open,
+    columnMenuId,
+    columnMenuButtonId,
+    iconButtonRef
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const handleMenuIconClick = React.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    apiRef.current.toggleColumnMenu(colDef.field);
+  }, [apiRef, colDef.field]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: classes.root,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+      title: apiRef.current.getLocaleText('columnMenuLabel'),
+      enterDelay: 1000
+    }, rootProps.slotProps?.baseTooltip, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+        ref: iconButtonRef,
+        tabIndex: -1,
+        className: classes.button,
+        "aria-label": apiRef.current.getLocaleText('columnMenuLabel'),
+        size: "small",
+        onClick: handleMenuIconClick,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? columnMenuId : undefined,
+        id: columnMenuButtonId
+      }, rootProps.slotProps?.baseIconButton, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
+    }))
+  });
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridBaseColumnHeaders.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridBaseColumnHeaders = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaders', 'withBorderColor']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridColumnHeadersRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaders',
+  overridesResolver: (props, styles) => styles.columnHeaders
+})({
+  position: 'relative',
+  overflow: 'hidden',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box',
+  borderBottom: '1px solid',
+  borderTopLeftRadius: 'var(--unstable_DataGrid-radius)',
+  borderTopRightRadius: 'var(--unstable_DataGrid-radius)'
+});
+const GridBaseColumnHeaders = exports.GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersRoot, (0, _extends2.default)({
+    ref: ref,
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    role: "presentation"
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnGroupHeader = GridColumnGroupHeader;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
+var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
+var _domUtils = require("../../utils/domUtils");
+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 useUtilityClasses = ownerState => {
+  const {
+    classes,
+    headerAlign,
+    isDragging,
+    showColumnBorder,
+    groupId
+  } = ownerState;
+  const slots = {
+    root: ['columnHeader', headerAlign === 'left' && 'columnHeader--alignLeft', headerAlign === 'center' && 'columnHeader--alignCenter', headerAlign === 'right' && 'columnHeader--alignRight', isDragging && 'columnHeader--moving', showColumnBorder && 'columnHeader--showColumnBorder', showColumnBorder && 'columnHeader--withRightBorder', 'withBorderColor', groupId === null ? 'columnHeader--emptyGroup' : 'columnHeader--filledGroup'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer', 'withBorderColor'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function GridColumnGroupHeader(props) {
+  const {
+    groupId,
+    width,
+    depth,
+    maxDepth,
+    fields,
+    height,
+    colIndex,
+    hasFocus,
+    tabIndex,
+    isLastColumn
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const headerCellRef = React.useRef(null);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const columnGroupsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector);
+  const group = groupId ? columnGroupsLookup[groupId] : {};
+  const {
+    headerName = groupId ?? '',
+    description = '',
+    headerAlign = undefined
+  } = group;
+  let headerComponent;
+  const render = groupId && columnGroupsLookup[groupId]?.renderHeaderGroup;
+  const renderParams = React.useMemo(() => ({
+    groupId,
+    headerName,
+    description,
+    depth,
+    maxDepth,
+    fields,
+    colIndex,
+    isLastColumn
+  }), [groupId, headerName, description, depth, maxDepth, fields, colIndex, isLastColumn]);
+  if (groupId && render) {
+    headerComponent = render(renderParams);
+  }
+  const showColumnBorder = rootProps.showColumnVerticalBorder;
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes,
+    showColumnBorder,
+    headerAlign,
+    depth,
+    isDragging: false
+  });
+  const label = headerName ?? groupId;
+  const id = (0, _utils.unstable_useId)();
+  const elementId = groupId === null ? `empty-group-cell-${id}` : groupId;
+  const classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(() => {
+    if (hasFocus) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus?.focus();
+    }
+  }, [apiRef, hasFocus]);
+  const publish = React.useCallback(eventName => event => {
+    // Ignore portal
+    // See https://github.com/mui/mui-x/issues/1721
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
+      return;
+    }
+    apiRef.current.publishEvent(eventName, renderParams, event);
+  },
+  // For now this is stupid, because renderParams change all the time.
+  // Need to move it's computation in the api, such that for a given depth+columnField, I can get the group parameters
+  [apiRef, renderParams]);
+  const mouseEventsHandlers = React.useMemo(() => ({
+    onKeyDown: publish('columnGroupHeaderKeyDown'),
+    onFocus: publish('columnGroupHeaderFocus'),
+    onBlur: publish('columnGroupHeaderBlur')
+  }), [publish]);
+  const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
+    ref: headerCellRef,
+    classes: classes,
+    columnMenuOpen: false,
+    colIndex: colIndex,
+    height: height,
+    isResizing: false,
+    sortDirection: null,
+    hasFocus: false,
+    tabIndex: tabIndex,
+    isDraggable: false,
+    headerComponent: headerComponent,
+    headerClassName: headerClassName,
+    description: description,
+    elementId: elementId,
+    width: width,
+    columnMenuIconButton: null,
+    columnTitleIconButtons: null,
+    resizable: false,
+    label: label,
+    "aria-colspan": fields.length
+    // The fields are wrapped between |-...-| to avoid confusion between fields "id" and "id2" when using selector data-fields~=
+    ,
+    "data-fields": `|-${fields.join('-|-')}-|`
+  }, mouseEventsHandlers));
+}

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnHeaderFilterIconButton.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaderFilterIconButton = GridColumnHeaderFilterIconButton;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _hooks = require("../../hooks");
+var _gridPreferencePanelSelector = require("../../hooks/features/preferencesPanel/gridPreferencePanelSelector");
+var _gridPreferencePanelsValue = require("../../hooks/features/preferencesPanel/gridPreferencePanelsValue");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridIconButtonContainer = require("./GridIconButtonContainer");
+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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    icon: ['filterIcon']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderFilterIconButton(props) {
+  const {
+    counter,
+    field,
+    onClick
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const preferencePanel = (0, _hooks.useGridSelector)(apiRef, _gridPreferencePanelSelector.gridPreferencePanelStateSelector);
+  const labelId = (0, _utils.unstable_useId)();
+  const panelId = (0, _utils.unstable_useId)();
+  const toggleFilter = React.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const {
+      open,
+      openedPanelValue
+    } = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(apiRef.current.state);
+    if (open && openedPanelValue === _gridPreferencePanelsValue.GridPreferencePanelsValue.filters) {
+      apiRef.current.hideFilterPanel();
+    } else {
+      apiRef.current.showFilterPanel(undefined, panelId, labelId);
+    }
+    if (onClick) {
+      onClick(apiRef.current.getColumnHeaderParams(field), event);
+    }
+  }, [apiRef, field, onClick, panelId, labelId]);
+  if (!counter) {
+    return null;
+  }
+  const open = preferencePanel.open && preferencePanel.labelId === labelId;
+  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    id: labelId,
+    onClick: toggleFilter,
+    color: "default",
+    "aria-label": apiRef.current.getLocaleText('columnHeaderFiltersLabel'),
+    size: "small",
+    tabIndex: -1,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? panelId : undefined
+  }, rootProps.slotProps?.baseIconButton, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnFilteredIcon, {
+      className: classes.icon,
+      fontSize: "small"
+    })
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+    title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
+    enterDelay: 1000
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
+      children: [counter > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        badgeContent: counter,
+        color: "default",
+        children: iconButton
+      }), counter === 1 && iconButton]
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderFilterIconButton.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  counter: _propTypes.default.number,
+  field: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -0,0 +1,206 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaderItem = GridColumnHeaderItem;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _GridColumnHeaderSortIcon = require("./GridColumnHeaderSortIcon");
+var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
+var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
+var _domUtils = require("../../utils/domUtils");
+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 useUtilityClasses = ownerState => {
+  const {
+    colDef,
+    classes,
+    isDragging,
+    sortDirection,
+    showRightBorder,
+    filterItemsCounter
+  } = ownerState;
+  const isColumnSorted = sortDirection != null;
+  const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
+  // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
+  const isColumnNumeric = colDef.type === 'number';
+  const slots = {
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder'],
+    draggableContainer: ['columnHeaderDraggableContainer'],
+    titleContainer: ['columnHeaderTitleContainer'],
+    titleContainerContent: ['columnHeaderTitleContainerContent']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderItem(props) {
+  const {
+    colDef,
+    columnMenuOpen,
+    colIndex,
+    headerHeight,
+    isResizing,
+    sortDirection,
+    sortIndex,
+    filterItemsCounter,
+    hasFocus,
+    tabIndex,
+    disableReorder,
+    separatorSide
+  } = props;
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const headerCellRef = React.useRef(null);
+  const columnMenuId = (0, _utils.unstable_useId)();
+  const columnMenuButtonId = (0, _utils.unstable_useId)();
+  const iconButtonRef = React.useRef(null);
+  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !colDef.disableReorder, [rootProps.disableColumnReorder, disableReorder, colDef.disableReorder]);
+  let headerComponent;
+  if (colDef.renderHeader) {
+    headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
+  }
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes,
+    showRightBorder: rootProps.showColumnVerticalBorder
+  });
+  const classes = useUtilityClasses(ownerState);
+  const publish = React.useCallback(eventName => event => {
+    // Ignore portal
+    // See https://github.com/mui/mui-x/issues/1721
+    if ((0, _domUtils.isEventTargetInPortal)(event)) {
+      return;
+    }
+    apiRef.current.publishEvent(eventName, apiRef.current.getColumnHeaderParams(colDef.field), event);
+  }, [apiRef, colDef.field]);
+  const mouseEventsHandlers = React.useMemo(() => ({
+    onClick: publish('columnHeaderClick'),
+    onDoubleClick: publish('columnHeaderDoubleClick'),
+    onMouseOver: publish('columnHeaderOver'),
+    // TODO remove as it's not used
+    onMouseOut: publish('columnHeaderOut'),
+    // TODO remove as it's not used
+    onMouseEnter: publish('columnHeaderEnter'),
+    // TODO remove as it's not used
+    onMouseLeave: publish('columnHeaderLeave'),
+    // TODO remove as it's not used
+    onKeyDown: publish('columnHeaderKeyDown'),
+    onFocus: publish('columnHeaderFocus'),
+    onBlur: publish('columnHeaderBlur')
+  }), [publish]);
+  const draggableEventHandlers = React.useMemo(() => isDraggable ? {
+    onDragStart: publish('columnHeaderDragStart'),
+    onDragEnter: publish('columnHeaderDragEnter'),
+    onDragOver: publish('columnHeaderDragOver'),
+    onDragEnd: publish('columnHeaderDragEnd')
+  } : {}, [isDraggable, publish]);
+  const columnHeaderSeparatorProps = React.useMemo(() => ({
+    onMouseDown: publish('columnSeparatorMouseDown'),
+    onDoubleClick: publish('columnSeparatorDoubleClick')
+  }), [publish]);
+  React.useEffect(() => {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  const handleExited = React.useCallback(() => {
+    setShowColumnMenuIcon(false);
+  }, []);
+  const columnMenuIconButton = !rootProps.disableColumnMenu && !colDef.disableColumnMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnHeaderMenuIcon.ColumnHeaderMenuIcon, {
+    colDef: colDef,
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    open: showColumnMenuIcon,
+    iconButtonRef: iconButtonRef
+  });
+  const columnMenu = /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderMenu.GridColumnHeaderMenu, {
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    field: colDef.field,
+    open: columnMenuOpen,
+    target: iconButtonRef.current,
+    ContentComponent: rootProps.slots.columnMenu,
+    contentComponentProps: rootProps.slotProps?.columnMenu,
+    onExited: handleExited
+  });
+  const sortingOrder = colDef.sortingOrder ?? rootProps.sortingOrder;
+  const columnTitleIconButtons = /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnHeaderFilterIconButton, (0, _extends2.default)({
+      field: colDef.field,
+      counter: filterItemsCounter
+    }, rootProps.slotProps?.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSortIcon.GridColumnHeaderSortIcon, {
+      direction: sortDirection,
+      index: sortIndex,
+      sortingOrder: sortingOrder
+    })]
+  });
+  React.useLayoutEffect(() => {
+    const columnMenuState = apiRef.current.state.columnMenu;
+    if (hasFocus && !columnMenuState.open) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus?.focus();
+      if (apiRef.current.columnHeadersContainerElementRef?.current) {
+        apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+      }
+    }
+  }, [apiRef, hasFocus]);
+  const headerClassName = typeof colDef.headerClassName === 'function' ? colDef.headerClassName({
+    field: colDef.field,
+    colDef
+  }) : colDef.headerClassName;
+  const label = colDef.headerName ?? colDef.field;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
+    ref: headerCellRef,
+    classes: classes,
+    columnMenuOpen: columnMenuOpen,
+    colIndex: colIndex,
+    height: headerHeight,
+    isResizing: isResizing,
+    sortDirection: sortDirection,
+    hasFocus: hasFocus,
+    tabIndex: tabIndex,
+    separatorSide: separatorSide,
+    isDraggable: isDraggable,
+    headerComponent: headerComponent,
+    description: colDef.description,
+    elementId: colDef.field,
+    width: colDef.computedWidth,
+    columnMenuIconButton: columnMenuIconButton,
+    columnTitleIconButtons: columnTitleIconButtons,
+    headerClassName: headerClassName,
+    label: label,
+    resizable: !rootProps.disableColumnResize && !!colDef.resizable,
+    "data-field": colDef.field,
+    columnMenu: columnMenu,
+    draggableContainerProps: draggableEventHandlers,
+    columnHeaderSeparatorProps: columnHeaderSeparatorProps
+  }, mouseEventsHandlers));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  colDef: _propTypes.default.object.isRequired,
+  colIndex: _propTypes.default.number.isRequired,
+  columnMenuOpen: _propTypes.default.bool.isRequired,
+  disableReorder: _propTypes.default.bool,
+  filterItemsCounter: _propTypes.default.number,
+  hasFocus: _propTypes.default.bool,
+  headerHeight: _propTypes.default.number.isRequired,
+  isDragging: _propTypes.default.bool.isRequired,
+  isResizing: _propTypes.default.bool.isRequired,
+  separatorSide: _propTypes.default.oneOf(['left', 'right']),
+  sortDirection: _propTypes.default.oneOf(['asc', 'desc']),
+  sortIndex: _propTypes.default.number,
+  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaderSeparatorSides = exports.GridColumnHeaderSeparator = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["resizable", "resizing", "height", "side"];
+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; }
+var GridColumnHeaderSeparatorSides = exports.GridColumnHeaderSeparatorSides = /*#__PURE__*/function (GridColumnHeaderSeparatorSides) {
+  GridColumnHeaderSeparatorSides["Left"] = "left";
+  GridColumnHeaderSeparatorSides["Right"] = "right";
+  return GridColumnHeaderSeparatorSides;
+}(GridColumnHeaderSeparatorSides || {});
+const useUtilityClasses = ownerState => {
+  const {
+    resizable,
+    resizing,
+    classes,
+    side
+  } = ownerState;
+  const slots = {
+    root: ['columnSeparator', resizable && 'columnSeparator--resizable', resizing && 'columnSeparator--resizing', side && `columnSeparator--side${(0, _utils.unstable_capitalize)(side)}`],
+    icon: ['iconSeparator']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderSeparatorRaw(props) {
+  const {
+      height,
+      side = GridColumnHeaderSeparatorSides.Right
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, props, {
+    side,
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const stopClick = React.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    (0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+      className: classes.root,
+      style: {
+        minHeight: height,
+        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
+      }
+    }, other, {
+      onClick: stopClick,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnResizeIcon, {
+        className: classes.icon
+      })
+    }))
+  );
+}
+const GridColumnHeaderSeparator = exports.GridColumnHeaderSeparator = /*#__PURE__*/React.memo(GridColumnHeaderSeparatorRaw);
+process.env.NODE_ENV !== "production" ? GridColumnHeaderSeparatorRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  height: _propTypes.default.number.isRequired,
+  resizable: _propTypes.default.bool.isRequired,
+  resizing: _propTypes.default.bool.isRequired,
+  side: _propTypes.default.oneOf(['left', 'right'])
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnHeaderSortIcon.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaderSortIcon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("@mui/utils");
+var _Badge = _interopRequireDefault(require("@mui/material/Badge"));
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _GridIconButtonContainer = require("./GridIconButtonContainer");
+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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    icon: ['sortIcon']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+function getIcon(icons, direction, className, sortingOrder) {
+  let Icon;
+  const iconProps = {};
+  if (direction === 'asc') {
+    Icon = icons.columnSortedAscendingIcon;
+  } else if (direction === 'desc') {
+    Icon = icons.columnSortedDescendingIcon;
+  } else {
+    Icon = icons.columnUnsortedIcon;
+    iconProps.sortingOrder = sortingOrder;
+  }
+  return Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({
+    fontSize: "small",
+    className: className
+  }, iconProps)) : null;
+}
+function GridColumnHeaderSortIconRaw(props) {
+  const {
+    direction,
+    index,
+    sortingOrder
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
+  if (!iconElement) {
+    return null;
+  }
+  const iconButton = /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
+    tabIndex: -1,
+    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    size: "small"
+  }, rootProps.slotProps?.baseIconButton, {
+    children: iconElement
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridIconButtonContainer.GridIconButtonContainer, {
+    children: [index != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+      badgeContent: index,
+      color: "default",
+      children: iconButton
+    }), index == null && iconButton]
+  });
+}
+const GridColumnHeaderSortIcon = exports.GridColumnHeaderSortIcon = /*#__PURE__*/React.memo(GridColumnHeaderSortIconRaw);
+process.env.NODE_ENV !== "production" ? GridColumnHeaderSortIconRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  direction: _propTypes.default.oneOf(['asc', 'desc']),
+  index: _propTypes.default.number,
+  sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnHeaderTitle.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeaderTitle = GridColumnHeaderTitle;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _domUtils = require("../../utils/domUtils");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaderTitle']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridColumnHeaderTitleRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderTitle',
+  overridesResolver: (props, styles) => styles.columnHeaderTitle
+})({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  fontWeight: 'var(--unstable_DataGrid-headWeight)'
+});
+const ColumnHeaderInnerTitle = /*#__PURE__*/React.forwardRef(function ColumnHeaderInnerTitle(props, ref) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderTitleRoot, (0, _extends2.default)({
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});
+// No React.memo here as if we display the sort icon, we need to recalculate the isOver
+function GridColumnHeaderTitle(props) {
+  const {
+    label,
+    description
+  } = props;
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const titleRef = React.useRef(null);
+  const [tooltip, setTooltip] = React.useState('');
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef?.current) {
+      const isOver = (0, _domUtils.isOverflown)(titleRef.current);
+      if (isOver) {
+        setTooltip(label);
+      } else {
+        setTooltip('');
+      }
+    }
+  }, [description, label]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
+    title: description || tooltip
+  }, rootProps.slotProps?.baseTooltip, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnHeaderInnerTitle, {
+      onMouseOver: handleMouseOver,
+      ref: titleRef,
+      children: label
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridColumnHeaderTitle.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnWidth: _propTypes.default.number.isRequired,
+  description: _propTypes.default.node,
+  label: _propTypes.default.string.isRequired
+} : void 0;

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridColumnHeadersInner.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridColumnHeadersInner = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["isDragging", "className"];
+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 useUtilityClasses = ownerState => {
+  const {
+    isDragging,
+    hasScrollX,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridColumnHeadersInnerRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'columnHeadersInner',
+  overridesResolver: (props, styles) => [{
+    [`&.${_gridClasses.gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone
+  }, styles.columnHeadersInner]
+})(() => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  [`&.${_gridClasses.gridClasses.columnHeaderDropZone} .${_gridClasses.gridClasses.columnHeaderDraggableContainer}`]: {
+    cursor: 'move'
+  },
+  [`&.${_gridClasses.gridClasses['columnHeadersInner--scrollable']} .${_gridClasses.gridClasses.columnHeader}:last-child`]: {
+    borderRight: 'none'
+  }
+}));
+const GridColumnHeadersInner = exports.GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
+  const {
+      isDragging,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const ownerState = (0, _extends2.default)({}, rootProps, {
+    isDragging,
+    hasScrollX: apiRef.current.getRootDimensions()?.hasScrollX ?? false
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersInnerRoot, (0, _extends2.default)({
+    ref: ref,
+    className: (0, _clsx.default)(className, classes.root),
+    ownerState: ownerState
+  }, other));
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridGenericColumnHeaderItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
+var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps"];
+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 GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = /*#__PURE__*/React.forwardRef(function GridGenericColumnHeaderItem(props, ref) {
+  const {
+      classes,
+      columnMenuOpen,
+      colIndex,
+      height,
+      isResizing,
+      sortDirection,
+      hasFocus,
+      tabIndex,
+      separatorSide,
+      isDraggable,
+      headerComponent,
+      description,
+      width,
+      columnMenuIconButton = null,
+      columnMenu = null,
+      columnTitleIconButtons = null,
+      headerClassName,
+      label,
+      resizable,
+      draggableContainerProps,
+      columnHeaderSeparatorProps
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const headerCellRef = React.useRef(null);
+  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const handleRef = (0, _utils.unstable_useForkRef)(headerCellRef, ref);
+  let ariaSort = 'none';
+  if (sortDirection != null) {
+    ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
+  }
+  React.useEffect(() => {
+    if (!showColumnMenuIcon) {
+      setShowColumnMenuIcon(columnMenuOpen);
+    }
+  }, [showColumnMenuIcon, columnMenuOpen]);
+  React.useLayoutEffect(() => {
+    const columnMenuState = apiRef.current.state.columnMenu;
+    if (hasFocus && !columnMenuState.open) {
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus?.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [apiRef, hasFocus]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    ref: handleRef,
+    className: (0, _clsx.default)(classes.root, headerClassName),
+    style: {
+      height,
+      width,
+      minWidth: width,
+      maxWidth: width
+    },
+    role: "columnheader",
+    tabIndex: tabIndex,
+    "aria-colindex": colIndex + 1,
+    "aria-sort": ariaSort,
+    "aria-label": headerComponent == null ? label : undefined
+  }, other, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+      className: classes.draggableContainer,
+      draggable: isDraggable,
+      role: "presentation"
+    }, draggableContainerProps, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: classes.titleContainer,
+        role: "presentation",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+            label: label,
+            description: description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderSeparator.GridColumnHeaderSeparator, (0, _extends2.default)({
+      resizable: !rootProps.disableColumnResize && !!resizable,
+      resizing: isResizing,
+      height: height,
+      side: separatorSide
+    }, columnHeaderSeparatorProps)), columnMenu]
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/GridIconButtonContainer.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridIconButtonContainer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _utils = require("@mui/utils");
+var _system = require("@mui/system");
+var _gridClasses = require("../../constants/gridClasses");
+var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["className"];
+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 useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['iconButtonContainer']
+  };
+  return (0, _utils.unstable_composeClasses)(slots, _gridClasses.getDataGridUtilityClass, classes);
+};
+const GridIconButtonContainerRoot = (0, _system.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'IconButtonContainer',
+  overridesResolver: (props, styles) => styles.iconButtonContainer
+})(() => ({
+  display: 'flex',
+  visibility: 'hidden',
+  width: 0
+}));
+const GridIconButtonContainer = exports.GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+  const {
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridIconButtonContainerRoot, (0, _extends2.default)({
+    ref: ref,
+    className: (0, _clsx.default)(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});

control-plane-ui/node_modules/@mui/x-data-grid/node/components/columnHeaders/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _GridColumnHeaderItem = require("./GridColumnHeaderItem");
+Object.keys(_GridColumnHeaderItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderItem[key];
+    }
+  });
+});
+var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
+Object.keys(_GridColumnHeaderSeparator).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderSeparator[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderSeparator[key];
+    }
+  });
+});
+var _GridColumnHeaderSortIcon = require("./GridColumnHeaderSortIcon");
+Object.keys(_GridColumnHeaderSortIcon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderSortIcon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderSortIcon[key];
+    }
+  });
+});
+var _GridColumnHeaderFilterIconButton = require("./GridColumnHeaderFilterIconButton");
+Object.keys(_GridColumnHeaderFilterIconButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderFilterIconButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderFilterIconButton[key];
+    }
+  });
+});
+var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
+Object.keys(_GridColumnHeaderTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _GridColumnHeaderTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _GridColumnHeaderTitle[key];
+    }
+  });
+});