wip:milestone 0 fixes

control-plane-ui/node_modules/@mui/x-data-grid/components/DataGridVirtualScroller.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const DataGridVirtualScroller: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { DataGridVirtualScroller };

control-plane-ui/node_modules/@mui/x-data-grid/components/DataGridVirtualScroller.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import { GridVirtualScroller } from './virtualization/GridVirtualScroller';
+import { GridVirtualScrollerContent } from './virtualization/GridVirtualScrollerContent';
+import { GridVirtualScrollerRenderZone } from './virtualization/GridVirtualScrollerRenderZone';
+import { useGridVirtualScroller } from '../hooks/features/virtualization/useGridVirtualScroller';
+import { GridOverlays } from './base/GridOverlays';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DataGridVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridVirtualScroller(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    getRootProps,
+    getContentProps,
+    getRenderZoneProps,
+    getRows
+  } = useGridVirtualScroller({
+    ref
+  });
+  return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({
+    className: className
+  }, getRootProps(other), {
+    children: [/*#__PURE__*/_jsx(GridOverlays, {}), /*#__PURE__*/_jsx(GridVirtualScrollerContent, _extends({}, getContentProps(), {
+      children: /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows()
+      }))
+    }))]
+  }));
+});
+export { DataGridVirtualScroller };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridApiContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const GridApiContext: React.Context<unknown>;

control-plane-ui/node_modules/@mui/x-data-grid/components/GridApiContext.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export const GridApiContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  GridApiContext.displayName = 'GridApiContext';
+}

control-plane-ui/node_modules/@mui/x-data-grid/components/GridColumnHeaders.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { UseGridColumnHeadersProps } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+interface GridColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement>, Omit<UseGridColumnHeadersProps, 'innerRef'> {
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+declare const MemoizedGridColumnHeaders: React.ForwardRefExoticComponent<GridColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridColumnHeaders.js

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["innerRef", "className", "visibleColumns", "sortColumnLookup", "filterColumnLookup", "columnPositions", "columnHeaderTabIndexState", "columnGroupHeaderTabIndexState", "columnHeaderFocus", "columnGroupHeaderFocus", "densityFactor", "headerGroupingMaxDepth", "columnMenuState", "columnVisibility", "columnGroupsHeaderStructure", "hasOtherElementInTabSequence"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { refType } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
+import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
+import { GridBaseColumnHeaders } from './columnHeaders/GridBaseColumnHeaders';
+import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnsHeaders(props, ref) {
+  const {
+      innerRef,
+      visibleColumns,
+      sortColumnLookup,
+      filterColumnLookup,
+      columnPositions,
+      columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState,
+      columnHeaderFocus,
+      columnGroupHeaderFocus,
+      densityFactor,
+      headerGroupingMaxDepth,
+      columnMenuState,
+      columnVisibility,
+      columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    isDragging,
+    getRootProps,
+    getInnerProps,
+    getColumnHeaders,
+    getColumnGroupHeaders
+  } = useGridColumnHeaders({
+    innerRef,
+    visibleColumns,
+    sortColumnLookup,
+    filterColumnLookup,
+    columnPositions,
+    columnHeaderTabIndexState,
+    columnGroupHeaderTabIndexState,
+    columnHeaderFocus,
+    columnGroupHeaderFocus,
+    densityFactor,
+    headerGroupingMaxDepth,
+    columnMenuState,
+    columnVisibility,
+    columnGroupsHeaderStructure,
+    hasOtherElementInTabSequence
+  });
+  return /*#__PURE__*/_jsx(GridBaseColumnHeaders, _extends({
+    ref: ref
+  }, getRootProps(other), {
+    children: /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: [getColumnGroupHeaders(), getColumnHeaders()]
+    }))
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridColumnHeaders.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  columnGroupHeaderFocus: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupHeaderTabIndexState: PropTypes.shape({
+    depth: PropTypes.number.isRequired,
+    field: PropTypes.string.isRequired
+  }),
+  columnGroupsHeaderStructure: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+    columnFields: PropTypes.arrayOf(PropTypes.string).isRequired,
+    groupId: PropTypes.string
+  }))).isRequired,
+  columnHeaderFocus: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnHeaderTabIndexState: PropTypes.shape({
+    field: PropTypes.string.isRequired
+  }),
+  columnMenuState: PropTypes.shape({
+    field: PropTypes.string,
+    open: PropTypes.bool.isRequired
+  }).isRequired,
+  columnPositions: PropTypes.arrayOf(PropTypes.number).isRequired,
+  columnVisibility: PropTypes.object.isRequired,
+  densityFactor: PropTypes.number.isRequired,
+  filterColumnLookup: PropTypes.object.isRequired,
+  hasOtherElementInTabSequence: PropTypes.bool.isRequired,
+  headerGroupingMaxDepth: PropTypes.number.isRequired,
+  innerRef: refType,
+  minColumnIndex: PropTypes.number,
+  sortColumnLookup: PropTypes.object.isRequired,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+const MemoizedGridColumnHeaders = fastMemo(GridColumnHeaders);
+export { MemoizedGridColumnHeaders as GridColumnHeaders };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridFooter.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const GridFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooter };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridFooter.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridTopLevelRowCountSelector } from '../hooks/features/rows/gridRowsSelector';
+import { selectedGridRowsCountSelector } from '../hooks/features/rowSelection/gridRowSelectionSelector';
+import { gridFilteredTopLevelRowCountSelector } from '../hooks/features/filter/gridFilterSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridSelectedRowCount } from './GridSelectedRowCount';
+import { GridFooterContainer } from './containers/GridFooterContainer';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridFooter = /*#__PURE__*/React.forwardRef(function GridFooter(props, ref) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalTopLevelRowCount = useGridSelector(apiRef, gridTopLevelRowCountSelector);
+  const selectedRowCount = useGridSelector(apiRef, selectedGridRowsCountSelector);
+  const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
+  const selectedRowCountElement = !rootProps.hideFooterSelectedRowCount && selectedRowCount > 0 ? /*#__PURE__*/_jsx(GridSelectedRowCount, {
+    selectedRowCount: selectedRowCount
+  }) : /*#__PURE__*/_jsx("div", {});
+  const rowCountElement = !rootProps.hideFooterRowCount && !rootProps.pagination ? /*#__PURE__*/_jsx(rootProps.slots.footerRowCount, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footerRowCount, {
+    rowCount: totalTopLevelRowCount,
+    visibleRowCount: visibleTopLevelRowCount
+  })) : null;
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.pagination));
+  return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({
+    ref: ref
+  }, props, {
+    children: [selectedRowCountElement, rowCountElement, paginationElement]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridFooter.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridFooter };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridHeader.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridHeader(): React.JSX.Element;

control-plane-ui/node_modules/@mui/x-data-grid/components/GridHeader.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export function GridHeader() {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  const rootProps = useGridRootProps();
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [/*#__PURE__*/_jsx(rootProps.slots.preferencesPanel, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.preferencesPanel)), rootProps.slots.toolbar && /*#__PURE__*/_jsx(rootProps.slots.toolbar, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.toolbar))]
+  });
+}

control-plane-ui/node_modules/@mui/x-data-grid/components/GridLoadingOverlay.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const GridLoadingOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridLoadingOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridLoadingOverlay.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import CircularProgress from '@mui/material/CircularProgress';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: /*#__PURE__*/_jsx(CircularProgress, {})
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridLoadingOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridNoResultsOverlay.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const GridNoResultsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

control-plane-ui/node_modules/@mui/x-data-grid/components/GridNoResultsOverlay.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GridNoResultsOverlay = /*#__PURE__*/React.forwardRef(function GridNoResultsOverlay(props, ref) {
+  const apiRef = useGridApiContext();
+  const noResultsOverlayLabel = apiRef.current.getLocaleText('noResultsOverlayLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: noResultsOverlayLabel
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/GridNoRowsOverlay.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+declare const GridNoRowsOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: import("@mui/system").SxProps<import("@mui/system").Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridNoRowsOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridNoRowsOverlay.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { GridOverlay } from './containers/GridOverlay';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridNoRowsOverlay = /*#__PURE__*/React.forwardRef(function GridNoRowsOverlay(props, ref) {
+  const apiRef = useGridApiContext();
+  const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
+  return /*#__PURE__*/_jsx(GridOverlay, _extends({
+    ref: ref
+  }, props, {
+    children: noRowsLabel
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridNoRowsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridNoRowsOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridPagination.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { TablePaginationProps } from '@mui/material/TablePagination';
+interface GridPaginationOwnProps {
+    component?: React.ElementType;
+}
+declare const GridPagination: React.ForwardRefExoticComponent<Omit<Partial<Omit<TablePaginationProps, "component">> & GridPaginationOwnProps, "ref"> & React.RefAttributes<unknown>>;
+export { GridPagination };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridPagination.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
+import { styled } from '@mui/material/styles';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridPaginationModelSelector, gridPaginationRowCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridPaginationRoot = styled(TablePagination)(({
+  theme
+}) => ({
+  [`& .${tablePaginationClasses.selectLabel}`]: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block'
+    }
+  },
+  [`& .${tablePaginationClasses.input}`]: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'inline-flex'
+    }
+  }
+}));
+
+// A mutable version of a readonly array.
+
+const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(props, ref) {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  const lastPage = React.useMemo(() => Math.floor(rowCount / (paginationModel.pageSize || 1)), [rowCount, paginationModel.pageSize]);
+  const handlePageSizeChange = React.useCallback(event => {
+    const pageSize = Number(event.target.value);
+    apiRef.current.setPageSize(pageSize);
+  }, [apiRef]);
+  const handlePageChange = React.useCallback((_, page) => {
+    apiRef.current.setPage(page);
+  }, [apiRef]);
+  const isPageSizeIncludedInPageSizeOptions = pageSize => {
+    for (let i = 0; i < rootProps.pageSizeOptions.length; i += 1) {
+      const option = rootProps.pageSizeOptions[i];
+      if (typeof option === 'number') {
+        if (option === pageSize) {
+          return true;
+        }
+      } else if (option.value === pageSize) {
+        return true;
+      }
+    }
+    return false;
+  };
+  if (process.env.NODE_ENV !== 'production') {
+    var _rootProps$pagination, _rootProps$pagination2;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const warnedOnceMissingInPageSizeOptions = React.useRef(false);
+    const pageSize = (_rootProps$pagination = (_rootProps$pagination2 = rootProps.paginationModel) == null ? void 0 : _rootProps$pagination2.pageSize) != null ? _rootProps$pagination : paginationModel.pageSize;
+    if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
+      console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
+      warnedOnceMissingInPageSizeOptions.current = true;
+    }
+  }
+  const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
+  return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
+    ref: ref,
+    component: "div",
+    count: rowCount,
+    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
+    // for x-data-grid is past the fix.
+    // Note that Material UI will not mutate the array, so this is safe.
+    ,
+    rowsPerPageOptions: pageSizeOptions,
+    rowsPerPage: paginationModel.pageSize,
+    onPageChange: handlePageChange,
+    onRowsPerPageChange: handlePageSizeChange
+  }, apiRef.current.getLocaleText('MuiTablePagination'), props));
+});
+process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  component: PropTypes.elementType
+} : void 0;
+export { GridPagination };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridRow.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { GridRowId, GridRowModel } from '../models/gridRows';
+import { GridStateColDef } from '../models/colDef/gridColDef';
+export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
+    rowId: GridRowId;
+    selected: boolean;
+    /**
+     * Index of the row in the whole sorted and filtered dataset.
+     * If some rows above have expanded children, this index also take those children into account.
+     */
+    index: number;
+    rowHeight: number | 'auto';
+    containerWidth: number;
+    firstColumnToRender: number;
+    lastColumnToRender: number;
+    visibleColumns: GridStateColDef[];
+    renderedColumns: GridStateColDef[];
+    position: 'left' | 'center' | 'right';
+    /**
+     * Determines which cell has focus.
+     * If `null`, no cell in this row has focus.
+     */
+    focusedCell: string | null;
+    /**
+     * Determines which cell should be tabbable by having tabIndex=0.
+     * If `null`, no cell in this row is in the tab sequence.
+     */
+    tabbableCell: string | null;
+    row?: GridRowModel;
+    isLastVisible?: boolean;
+    focusedCellColumnIndexNotInRange?: number;
+    isNotVisible?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    [x: string]: any;
+}
+declare const MemoizedGridRow: React.ForwardRefExoticComponent<Omit<GridRowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridRow as GridRow };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridRow.js

@@ -0,0 +1,383 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["selected", "hovered", "rowId", "row", "index", "style", "position", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "isLastVisible", "focusedCellColumnIndexNotInRange", "isNotVisible", "focusedCell", "tabbableCell", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { fastMemo } from '../utils/fastMemo';
+import { GridEditModes, GridRowModes, GridCellModes } from '../models/gridEditRowModel';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass, gridClasses } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridColumnsSelector';
+import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
+import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
+import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
+import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
+import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
+import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
+import { gridColumnGroupsHeaderMaxDepthSelector } from '../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { randomNumberBetween } from '../utils/utils';
+import { GridCellWrapper, GridCellV7 } from './cell/GridCell';
+import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    editable,
+    editing,
+    selected,
+    isLastVisible,
+    rowHeight,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function EmptyCell({
+  width
+}) {
+  if (!width) {
+    return null;
+  }
+  const style = {
+    width
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: `${gridClasses.cell} ${gridClasses.withBorderColor}`,
+    style: style
+  }); // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
+}
+const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
+  const {
+      selected,
+      hovered,
+      rowId,
+      row,
+      index,
+      style: styleProp,
+      position,
+      rowHeight,
+      className,
+      visibleColumns,
+      renderedColumns,
+      containerWidth,
+      firstColumnToRender,
+      isLastVisible = false,
+      focusedCellColumnIndexNotInRange,
+      isNotVisible,
+      focusedCell,
+      onClick,
+      onDoubleClick,
+      onMouseEnter,
+      onMouseLeave,
+      onMouseOut,
+      onMouseOver
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const ref = React.useRef(null);
+  const rootProps = useGridRootProps();
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
+  const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
+  const handleRef = useForkRef(ref, refProp);
+  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
+
+  const ownerState = {
+    selected,
+    hovered,
+    isLastVisible,
+    classes: rootProps.classes,
+    editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
+    editable: rootProps.editMode === GridEditModes.Row,
+    rowHeight
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(() => {
+    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight, position);
+    }
+  }, [apiRef, rowHeight, rowId, position]);
+  React.useLayoutEffect(() => {
+    if (currentPage.range) {
+      // The index prop is relative to the rows from all pages. As example, the index prop of the
+      // first row is 5 if `paginationModel.pageSize=5` and `paginationModel.page=1`. However, the index used by the virtualization
+      // doesn't care about pagination and considers the rows from the current page only, so the
+      // first row always has index=0. We need to subtract the index of the first row to make it
+      // compatible with the index used by the virtualization.
+      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+      // pinned rows are not part of the visible rows
+      if (rowIndex != null) {
+        apiRef.current.unstable_setLastMeasuredRowIndex(rowIndex);
+      }
+    }
+    const rootElement = ref.current;
+    const hasFixedHeight = rowHeight !== 'auto';
+    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries;
+      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height, position);
+    });
+    resizeObserver.observe(rootElement);
+    return () => resizeObserver.disconnect();
+  }, [apiRef, currentPage.range, index, rowHeight, rowId, position]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // Ignore portal
+    if (isEventTargetInPortal(event)) {
+      return;
+    }
+
+    // The row might have been deleted
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(rowId), event);
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, rowId]);
+  const publishClick = React.useCallback(event => {
+    const cell = findParentElementFromClassName(event.target, gridClasses.cell);
+    const field = cell == null ? void 0 : cell.getAttribute('data-field');
+
+    // Check if the field is available because the cell that fills the empty
+    // space of the row has no field.
+    if (field) {
+      // User clicked in the checkbox added by checkboxSelection
+      if (field === GRID_CHECKBOX_SELECTION_COL_DEF.field) {
+        return;
+      }
+
+      // User opened a detail panel
+      if (field === GRID_DETAIL_PANEL_TOGGLE_FIELD) {
+        return;
+      }
+
+      // User reorders a row
+      if (field === '__reorder__') {
+        return;
+      }
+
+      // User is editing a cell
+      if (apiRef.current.getCellMode(rowId, field) === GridCellModes.Edit) {
+        return;
+      }
+
+      // User clicked a button from the "actions" column type
+      const column = apiRef.current.getColumn(field);
+      if ((column == null ? void 0 : column.type) === GRID_ACTIONS_COLUMN_TYPE) {
+        return;
+      }
+    }
+    publish('rowClick', onClick)(event);
+  }, [apiRef, onClick, publish, rowId]);
+  const {
+    slots,
+    slotProps,
+    disableColumnReorder
+  } = rootProps;
+  const CellComponent = slots.cell === GridCellV7 ? GridCellV7 : GridCellWrapper;
+  const rowReordering = rootProps.rowReordering;
+  const getCell = (column, cellProps) => {
+    var _editRowsState$rowId$, _editRowsState$rowId;
+    const disableDragEvents = disableColumnReorder && column.disableReorder || !rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
+    const editCellState = (_editRowsState$rowId$ = (_editRowsState$rowId = editRowsState[rowId]) == null ? void 0 : _editRowsState$rowId[column.field]) != null ? _editRowsState$rowId$ : null;
+    let cellIsNotVisible = false;
+    if (focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+      cellIsNotVisible = true;
+    }
+    return /*#__PURE__*/_jsx(CellComponent, _extends({
+      column: column,
+      width: cellProps.width,
+      rowId: rowId,
+      height: rowHeight,
+      showRightBorder: cellProps.showRightBorder,
+      align: column.align || 'left',
+      colIndex: cellProps.indexRelativeToAllColumns,
+      colSpan: cellProps.colSpan,
+      disableDragEvents: disableDragEvents,
+      editCellState: editCellState,
+      isNotVisible: cellIsNotVisible
+    }, slotProps == null ? void 0 : slotProps.cell), column.field);
+  };
+  const sizes = useGridSelector(apiRef, () => _extends({}, apiRef.current.unstable_getRowInternalSizes(rowId)), objectShallowCompare);
+  let minHeight = rowHeight;
+  if (minHeight === 'auto' && sizes) {
+    let numberOfBaseSizes = 0;
+    const maximumSize = Object.entries(sizes).reduce((acc, [key, size]) => {
+      const isBaseHeight = /^base[A-Z]/.test(key);
+      if (!isBaseHeight) {
+        return acc;
+      }
+      numberOfBaseSizes += 1;
+      if (size > acc) {
+        return size;
+      }
+      return acc;
+    }, 0);
+    if (maximumSize > 0 && numberOfBaseSizes > 1) {
+      minHeight = maximumSize;
+    }
+  }
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        opacity: 0,
+        width: 0,
+        height: 0
+      };
+    }
+    const rowStyle = _extends({}, styleProp, {
+      maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+      // max-height doesn't support "auto"
+      minHeight
+    });
+    if (sizes != null && sizes.spacingTop) {
+      const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+      rowStyle[property] = sizes.spacingTop;
+    }
+    if (sizes != null && sizes.spacingBottom) {
+      const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+      let propertyValue = rowStyle[property];
+      // avoid overriding existing value
+      if (typeof propertyValue !== 'number') {
+        propertyValue = parseInt(propertyValue || '0', 10);
+      }
+      propertyValue += sizes.spacingBottom;
+      rowStyle[property] = propertyValue;
+    }
+    return rowStyle;
+  }, [isNotVisible, rowHeight, styleProp, minHeight, sizes, rootProps.rowSpacingType]);
+  const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
+  if (typeof rootProps.getRowClassName === 'function') {
+    var _currentPage$range;
+    const indexRelativeToCurrentPage = index - (((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.firstRowIndex) || 0);
+    const rowParams = _extends({}, apiRef.current.getRowParams(rowId), {
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+      indexRelativeToCurrentPage
+    });
+    rowClassNames.push(rootProps.getRowClassName(rowParams));
+  }
+  const randomNumber = randomNumberBetween(10000, 20, 80);
+  const rowNode = apiRef.current.getRowNode(rowId);
+  if (!rowNode) {
+    return null;
+  }
+  const rowType = rowNode.type;
+  const cells = [];
+  for (let i = 0; i < renderedColumns.length; i += 1) {
+    const column = renderedColumns[i];
+    let indexRelativeToAllColumns = firstColumnToRender + i;
+    if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
+      if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
+        indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
+      } else {
+        indexRelativeToAllColumns -= 1;
+      }
+    }
+    const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
+    if (cellColSpanInfo && !cellColSpanInfo.spannedByColSpan) {
+      if (rowType !== 'skeletonRow') {
+        const {
+          colSpan,
+          width
+        } = cellColSpanInfo.cellProps;
+        const cellProps = {
+          width,
+          colSpan,
+          showRightBorder: rootProps.showCellVerticalBorder,
+          indexRelativeToAllColumns
+        };
+        cells.push(getCell(column, cellProps));
+      } else {
+        const {
+          width
+        } = cellColSpanInfo.cellProps;
+        const contentWidth = Math.round(randomNumber());
+        cells.push( /*#__PURE__*/_jsx(slots.skeletonCell, {
+          width: width,
+          contentWidth: contentWidth,
+          field: column.field,
+          align: column.align
+        }, column.field));
+      }
+    }
+  }
+  const emptyCellWidth = containerWidth - columnsTotalWidth;
+  const eventHandlers = row ? {
+    onClick: publishClick,
+    onDoubleClick: publish('rowDoubleClick', onDoubleClick),
+    onMouseEnter: publish('rowMouseEnter', onMouseEnter),
+    onMouseLeave: publish('rowMouseLeave', onMouseLeave),
+    onMouseOut: publish('rowMouseOut', onMouseOut),
+    onMouseOver: publish('rowMouseOver', onMouseOver)
+  } : null;
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: handleRef,
+    "data-id": rowId,
+    "data-rowindex": index,
+    role: "row",
+    className: clsx(...rowClassNames, classes.root, className, hovered && 'Mui-hovered'),
+    "aria-rowindex": ariaRowIndex,
+    "aria-selected": selected,
+    style: style
+  }, eventHandlers, other, {
+    children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
+      width: emptyCellWidth
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  containerWidth: PropTypes.number.isRequired,
+  firstColumnToRender: PropTypes.number.isRequired,
+  /**
+   * Determines which cell has focus.
+   * If `null`, no cell in this row has focus.
+   */
+  focusedCell: PropTypes.string,
+  focusedCellColumnIndexNotInRange: PropTypes.number,
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  index: PropTypes.number.isRequired,
+  isLastVisible: PropTypes.bool,
+  isNotVisible: PropTypes.bool,
+  lastColumnToRender: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
+  position: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  row: PropTypes.object,
+  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  selected: PropTypes.bool.isRequired,
+  /**
+   * Determines which cell should be tabbable by having tabIndex=0.
+   * If `null`, no cell in this row is in the tab sequence.
+   */
+  tabbableCell: PropTypes.string,
+  visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired
+} : void 0;
+const MemoizedGridRow = fastMemo(GridRow);
+export { MemoizedGridRow as GridRow };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridRowCount.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface RowCountProps {
+    rowCount: number;
+    visibleRowCount: number;
+}
+export type GridRowCountProps = React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+    sx?: SxProps<Theme>;
+};
+declare const GridRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & RowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridRowCount };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridRowCount.js

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "rowCount", "visibleRowCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['rowCount']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowCount',
+  overridesResolver: (props, styles) => styles.rowCount
+})(({
+  theme
+}) => ({
+  alignItems: 'center',
+  display: 'flex',
+  margin: theme.spacing(0, 2)
+}));
+const GridRowCount = /*#__PURE__*/React.forwardRef(function GridRowCount(props, ref) {
+  const {
+      className,
+      rowCount,
+      visibleRowCount
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const ownerState = useGridRootProps();
+  const classes = useUtilityClasses(ownerState);
+  if (rowCount === 0) {
+    return null;
+  }
+  const text = visibleRowCount < rowCount ? apiRef.current.getLocaleText('footerTotalVisibleRows')(visibleRowCount, rowCount) : rowCount.toLocaleString();
+  return /*#__PURE__*/_jsxs(GridRowCountRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: [apiRef.current.getLocaleText('footerTotalRows'), " ", text]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRowCount.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  rowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  visibleRowCount: PropTypes.number.isRequired
+} : void 0;
+export { GridRowCount };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridSelectedRowCount.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface SelectedRowCountProps {
+    selectedRowCount: number;
+}
+declare const GridSelectedRowCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & SelectedRowCountProps & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridSelectedRowCount };

control-plane-ui/node_modules/@mui/x-data-grid/components/GridSelectedRowCount.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "selectedRowCount"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../constants/gridClasses';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['selectedRowCount']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridSelectedRowCountRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'SelectedRowCount',
+  overridesResolver: (props, styles) => styles.selectedRowCount
+})(({
+  theme
+}) => ({
+  alignItems: 'center',
+  display: 'flex',
+  margin: theme.spacing(0, 2),
+  visibility: 'hidden',
+  width: 0,
+  height: 0,
+  [theme.breakpoints.up('sm')]: {
+    visibility: 'visible',
+    width: 'auto',
+    height: 'auto'
+  }
+}));
+const GridSelectedRowCount = /*#__PURE__*/React.forwardRef(function GridSelectedRowCount(props, ref) {
+  const {
+      className,
+      selectedRowCount
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const ownerState = useGridRootProps();
+  const classes = useUtilityClasses(ownerState);
+  const rowSelectedText = apiRef.current.getLocaleText('footerRowSelected')(selectedRowCount);
+  return /*#__PURE__*/_jsx(GridSelectedRowCountRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: ownerState
+  }, other, {
+    children: rowSelectedText
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridSelectedRowCount.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  selectedRowCount: PropTypes.number.isRequired,
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridSelectedRowCount };

control-plane-ui/node_modules/@mui/x-data-grid/components/base/GridBody.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface GridBodyProps {
+    children?: React.ReactNode;
+    ColumnHeadersProps?: Record<string, any>;
+    VirtualScrollerComponent: React.JSXElementConstructor<React.HTMLAttributes<HTMLDivElement> & {
+        ref: React.Ref<HTMLDivElement>;
+    }>;
+}
+declare function GridBody(props: GridBodyProps): React.JSX.Element;
+declare namespace GridBody {
+    var propTypes: any;
+}
+export { GridBody };

control-plane-ui/node_modules/@mui/x-data-grid/components/base/GridBody.js

@@ -0,0 +1,116 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridMainContainer } from '../containers/GridMainContainer';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnPositionsSelector, gridColumnVisibilityModelSelector, gridVisibleColumnDefinitionsSelector } from '../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterActiveItemsLookupSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridSortColumnLookupSelector } from '../../hooks/features/sorting/gridSortingSelector';
+import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector, unstable_gridTabIndexColumnGroupHeaderSelector, unstable_gridFocusColumnGroupHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { gridDensityFactorSelector } from '../../hooks/features/density/densitySelector';
+import { gridColumnGroupsHeaderMaxDepthSelector, gridColumnGroupsHeaderStructureSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { gridColumnMenuSelector } from '../../hooks/features/columnMenu/columnMenuSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function GridBody(props) {
+  const {
+    VirtualScrollerComponent,
+    ColumnHeadersProps,
+    children
+  } = props;
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const rootRef = React.useRef(null);
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
+  const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
+  const columnHeaderTabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
+  const columnGroupHeaderTabIndexState = useGridSelector(apiRef, unstable_gridTabIndexColumnGroupHeaderSelector);
+  const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
+  const columnGroupHeaderFocus = useGridSelector(apiRef, unstable_gridFocusColumnGroupHeaderSelector);
+  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridColumnGroupsHeaderMaxDepthSelector);
+  const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
+  const columnVisibility = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  const columnGroupsHeaderStructure = useGridSelector(apiRef, gridColumnGroupsHeaderStructureSelector);
+  const hasOtherElementInTabSequence = !(columnGroupHeaderTabIndexState === null && columnHeaderTabIndexState === null && cellTabIndexState === null);
+  useEnhancedEffect(() => {
+    apiRef.current.computeSizeAndPublishResizeEvent();
+    const elementToObserve = rootRef.current;
+    if (typeof ResizeObserver === 'undefined') {
+      return () => {};
+    }
+    let animationFrame;
+    const observer = new ResizeObserver(() => {
+      // See https://github.com/mui/mui-x/issues/8733
+      animationFrame = requestAnimationFrame(() => {
+        apiRef.current.computeSizeAndPublishResizeEvent();
+      });
+    });
+    if (elementToObserve) {
+      observer.observe(elementToObserve);
+    }
+    return () => {
+      if (animationFrame) {
+        window.cancelAnimationFrame(animationFrame);
+      }
+      if (elementToObserve) {
+        observer.unobserve(elementToObserve);
+      }
+    };
+  }, [apiRef]);
+  const columnHeadersRef = React.useRef(null);
+  const columnsContainerRef = React.useRef(null);
+  const virtualScrollerRef = React.useRef(null);
+  apiRef.current.register('private', {
+    columnHeadersContainerElementRef: columnsContainerRef,
+    columnHeadersElementRef: columnHeadersRef,
+    virtualScrollerRef,
+    mainElementRef: rootRef
+  });
+  const hasDimensions = !!apiRef.current.getRootDimensions();
+  return /*#__PURE__*/_jsxs(GridMainContainer, {
+    ref: rootRef,
+    children: [/*#__PURE__*/_jsx(rootProps.slots.columnHeaders, _extends({
+      ref: columnsContainerRef,
+      innerRef: columnHeadersRef,
+      visibleColumns: visibleColumns,
+      filterColumnLookup: filterColumnLookup,
+      sortColumnLookup: sortColumnLookup,
+      columnPositions: columnPositions,
+      columnHeaderTabIndexState: columnHeaderTabIndexState,
+      columnGroupHeaderTabIndexState: columnGroupHeaderTabIndexState,
+      columnHeaderFocus: columnHeaderFocus,
+      columnGroupHeaderFocus: columnGroupHeaderFocus,
+      densityFactor: densityFactor,
+      headerGroupingMaxDepth: headerGroupingMaxDepth,
+      columnMenuState: columnMenuState,
+      columnVisibility: columnVisibility,
+      columnGroupsHeaderStructure: columnGroupsHeaderStructure,
+      hasOtherElementInTabSequence: hasOtherElementInTabSequence
+    }, ColumnHeadersProps)), hasDimensions && /*#__PURE__*/_jsx(VirtualScrollerComponent
+    // The content is only rendered after dimensions are computed because
+    // the lazy-loading hook is listening to `renderedRowsIntervalChange`,
+    // but only does something if the dimensions are also available.
+    // If this event is published while dimensions haven't been computed,
+    // the `onFetchRows` prop won't be called during mount.
+    , {
+      ref: virtualScrollerRef
+    }), children]
+  });
+}
+process.env.NODE_ENV !== "production" ? GridBody.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  ColumnHeadersProps: PropTypes.object,
+  VirtualScrollerComponent: PropTypes.elementType.isRequired
+} : void 0;
+export { GridBody };

control-plane-ui/node_modules/@mui/x-data-grid/components/base/GridFooterPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridFooterPlaceholder(): React.JSX.Element | null;

control-plane-ui/node_modules/@mui/x-data-grid/components/base/GridFooterPlaceholder.js

@@ -0,0 +1,12 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function GridFooterPlaceholder() {
+  var _rootProps$slotProps;
+  const rootProps = useGridRootProps();
+  if (rootProps.hideFooter) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.footer, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.footer));
+}

control-plane-ui/node_modules/@mui/x-data-grid/components/base/GridOverlays.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function GridOverlays(): React.JSX.Element | null;

control-plane-ui/node_modules/@mui/x-data-grid/components/base/GridOverlays.js

@@ -0,0 +1,126 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import clsx from 'clsx';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridExpandedRowCountSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../../hooks/features/rows/gridRowsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getMinimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridOverlayWrapperRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapper',
+  shouldForwardProp: prop => prop !== 'overlayType',
+  overridesResolver: (props, styles) => styles.overlayWrapper
+})(({
+  overlayType
+}) => ({
+  position: 'sticky',
+  // To stay in place while scrolling
+  top: 0,
+  left: 0,
+  width: 0,
+  // To stay above the content instead of shifting it down
+  height: 0,
+  // To stay above the content instead of shifting it down
+  zIndex: overlayType === 'loadingOverlay' ? 5 // Should be above pinned columns, pinned rows, and detail panel
+  : 4 // Should be above pinned columns and detail panel
+}));
+const GridOverlayWrapperInner = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'OverlayWrapperInner',
+  shouldForwardProp: prop => prop !== 'overlayType',
+  overridesResolver: (props, styles) => styles.overlayWrapperInner
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['overlayWrapper'],
+    inner: ['overlayWrapperInner']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridOverlayWrapper(props) {
+  var _viewportInnerSize$he, _viewportInnerSize$wi;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const [viewportInnerSize, setViewportInnerSize] = React.useState(() => {
+    var _apiRef$current$getRo, _apiRef$current$getRo2;
+    return (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.viewportInnerSize) != null ? _apiRef$current$getRo : null;
+  });
+  const handleViewportSizeChange = React.useCallback(() => {
+    var _apiRef$current$getRo3, _apiRef$current$getRo4;
+    setViewportInnerSize((_apiRef$current$getRo3 = (_apiRef$current$getRo4 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo4.viewportInnerSize) != null ? _apiRef$current$getRo3 : null);
+  }, [apiRef]);
+  useEnhancedEffect(() => {
+    return apiRef.current.subscribeEvent('viewportInnerSizeChange', handleViewportSizeChange);
+  }, [apiRef, handleViewportSizeChange]);
+  let height = (_viewportInnerSize$he = viewportInnerSize == null ? void 0 : viewportInnerSize.height) != null ? _viewportInnerSize$he : 0;
+  if (rootProps.autoHeight && height === 0) {
+    height = getMinimalContentHeight(apiRef, rootProps.rowHeight); // Give room to show the overlay when there no rows.
+  }
+  const classes = useUtilityClasses(_extends({}, props, {
+    classes: rootProps.classes
+  }));
+  if (!viewportInnerSize) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridOverlayWrapperRoot, {
+    className: clsx(classes.root),
+    overlayType: props.overlayType,
+    children: /*#__PURE__*/_jsx(GridOverlayWrapperInner, _extends({
+      className: clsx(classes.inner),
+      style: {
+        height,
+        width: (_viewportInnerSize$wi = viewportInnerSize == null ? void 0 : viewportInnerSize.width) != null ? _viewportInnerSize$wi : 0
+      }
+    }, props))
+  });
+}
+process.env.NODE_ENV !== "production" ? GridOverlayWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  overlayType: PropTypes.string.isRequired
+} : void 0;
+export function GridOverlays() {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && totalRowCount === 0;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  let overlay = null;
+  let overlayType = '';
+  if (showNoRowsOverlay) {
+    var _rootProps$slotProps;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noRowsOverlay, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.noRowsOverlay));
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoResultsOverlay) {
+    var _rootProps$slotProps2;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.noResultsOverlay, _extends({}, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.noResultsOverlay));
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    var _rootProps$slotProps3;
+    overlay = /*#__PURE__*/_jsx(rootProps.slots.loadingOverlay, _extends({}, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.loadingOverlay));
+    overlayType = 'loadingOverlay';
+  }
+  if (overlay === null) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridOverlayWrapper, {
+    overlayType: overlayType,
+    children: overlay
+  });
+}

control-plane-ui/node_modules/@mui/x-data-grid/components/base/index.d.ts

@@ -0,0 +1,3 @@
+export * from './GridBody';
+export * from './GridFooterPlaceholder';
+export * from './GridOverlays';

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

@@ -0,0 +1,3 @@
+export * from './GridBody';
+export * from './GridFooterPlaceholder';
+export * from './GridOverlays';

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridActionsCell.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GridMenuProps } from '../menu/GridMenu';
+interface GridActionsCellProps extends Omit<GridRenderCellParams, 'api'> {
+    api?: GridRenderCellParams['api'];
+    position?: GridMenuProps['position'];
+}
+declare function GridActionsCell(props: GridActionsCellProps): React.JSX.Element;
+declare namespace GridActionsCell {
+    var propTypes: any;
+}
+export { GridActionsCell };
+export declare const renderActionsCell: (params: GridRenderCellParams) => React.JSX.Element;

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridActionsCell.js

@@ -0,0 +1,257 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["api", "colDef", "id", "hasFocus", "isEditable", "field", "value", "formattedValue", "row", "rowNode", "cellMode", "tabIndex", "position", "focusElementRef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuList from '@mui/material/MenuList';
+import { useTheme } from '@mui/material/styles';
+import { unstable_useId as useId } from '@mui/utils';
+import { gridClasses } from '../../constants/gridClasses';
+import { GridMenu } from '../menu/GridMenu';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const hasActions = colDef => typeof colDef.getActions === 'function';
+function GridActionsCell(props) {
+  var _rootProps$slotProps;
+  const {
+      colDef,
+      id,
+      hasFocus,
+      tabIndex,
+      position = 'bottom-end',
+      focusElementRef
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [focusedButtonIndex, setFocusedButtonIndex] = React.useState(-1);
+  const [open, setOpen] = React.useState(false);
+  const apiRef = useGridApiContext();
+  const rootRef = React.useRef(null);
+  const buttonRef = React.useRef(null);
+  const ignoreCallToFocus = React.useRef(false);
+  const touchRippleRefs = React.useRef({});
+  const theme = useTheme();
+  const menuId = useId();
+  const buttonId = useId();
+  const rootProps = useGridRootProps();
+  if (!hasActions(colDef)) {
+    throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
+  }
+  const options = colDef.getActions(apiRef.current.getRowParams(id));
+  const iconButtons = options.filter(option => !option.props.showInMenu);
+  const menuButtons = options.filter(option => option.props.showInMenu);
+  const numberOfButtons = iconButtons.length + (menuButtons.length ? 1 : 0);
+  React.useLayoutEffect(() => {
+    if (!hasFocus) {
+      Object.entries(touchRippleRefs.current).forEach(([index, ref]) => {
+        ref == null || ref.stop({}, () => {
+          delete touchRippleRefs.current[index];
+        });
+      });
+    }
+  }, [hasFocus]);
+  React.useEffect(() => {
+    if (focusedButtonIndex < 0 || !rootRef.current) {
+      return;
+    }
+    if (focusedButtonIndex >= rootRef.current.children.length) {
+      return;
+    }
+    const child = rootRef.current.children[focusedButtonIndex];
+    child.focus({
+      preventScroll: true
+    });
+  }, [focusedButtonIndex]);
+  React.useEffect(() => {
+    if (!hasFocus) {
+      setFocusedButtonIndex(-1);
+      ignoreCallToFocus.current = false;
+    }
+  }, [hasFocus]);
+  React.useImperativeHandle(focusElementRef, () => ({
+    focus() {
+      // If ignoreCallToFocus is true, then one of the buttons was clicked and the focus is already set
+      if (!ignoreCallToFocus.current) {
+        // find the first focusable button and pass the index to the state
+        const focusableButtonIndex = options.findIndex(o => !o.props.disabled);
+        setFocusedButtonIndex(focusableButtonIndex);
+      }
+    }
+  }), [options]);
+  React.useEffect(() => {
+    if (focusedButtonIndex >= numberOfButtons) {
+      setFocusedButtonIndex(numberOfButtons - 1);
+    }
+  }, [focusedButtonIndex, numberOfButtons]);
+  const showMenu = () => {
+    setOpen(true);
+    setFocusedButtonIndex(numberOfButtons - 1);
+    ignoreCallToFocus.current = true;
+  };
+  const hideMenu = () => {
+    setOpen(false);
+  };
+  const handleTouchRippleRef = index => instance => {
+    touchRippleRefs.current[index] = instance;
+  };
+  const handleButtonClick = (index, onClick) => event => {
+    setFocusedButtonIndex(index);
+    ignoreCallToFocus.current = true;
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  const handleRootKeyDown = event => {
+    if (numberOfButtons <= 1) {
+      return;
+    }
+    const getNewIndex = (index, direction) => {
+      var _options;
+      if (index < 0 || index > options.length) {
+        return index;
+      }
+
+      // for rtl mode we need to reverse the direction
+      const rtlMod = theme.direction === 'rtl' ? -1 : 1;
+      const indexMod = (direction === 'left' ? -1 : 1) * rtlMod;
+
+      // if the button that should receive focus is disabled go one more step
+      return (_options = options[index + indexMod]) != null && _options.props.disabled ? getNewIndex(index + indexMod, direction) : index + indexMod;
+    };
+    let newIndex = focusedButtonIndex;
+    if (event.key === 'ArrowRight') {
+      newIndex = getNewIndex(focusedButtonIndex, 'right');
+    } else if (event.key === 'ArrowLeft') {
+      newIndex = getNewIndex(focusedButtonIndex, 'left');
+    }
+    if (newIndex < 0 || newIndex >= numberOfButtons) {
+      return; // We're already in the first or last item = do nothing and let the grid listen the event
+    }
+    if (newIndex !== focusedButtonIndex) {
+      event.preventDefault(); // Prevent scrolling
+      event.stopPropagation(); // Don't stop propagation for other keys, e.g. ArrowUp
+      setFocusedButtonIndex(newIndex);
+    }
+  };
+  const handleListKeyDown = event => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+    }
+    if (['Tab', 'Escape'].includes(event.key)) {
+      hideMenu();
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", _extends({
+    role: "menu",
+    ref: rootRef,
+    tabIndex: -1,
+    className: gridClasses.actionsCell,
+    onKeyDown: handleRootKeyDown
+  }, other, {
+    children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+      key: index,
+      touchRippleRef: handleTouchRippleRef(index),
+      onClick: handleButtonClick(index, button.props.onClick),
+      tabIndex: focusedButtonIndex === index ? tabIndex : -1
+    })), menuButtons.length > 0 && buttonId && /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      ref: buttonRef,
+      id: buttonId,
+      "aria-label": apiRef.current.getLocaleText('actionsCellMore'),
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? menuId : undefined,
+      role: "menuitem",
+      size: "small",
+      onClick: showMenu,
+      touchRippleRef: handleTouchRippleRef(buttonId),
+      tabIndex: focusedButtonIndex === iconButtons.length ? tabIndex : -1
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.moreActionsIcon, {
+        fontSize: "small"
+      })
+    })), menuButtons.length > 0 && /*#__PURE__*/_jsx(GridMenu, {
+      open: open,
+      target: buttonRef.current,
+      position: position,
+      onClose: hideMenu,
+      children: /*#__PURE__*/_jsx(MenuList, {
+        id: menuId,
+        className: gridClasses.menuList,
+        onKeyDown: handleListKeyDown,
+        "aria-labelledby": buttonId,
+        variant: "menu",
+        autoFocusItem: true,
+        children: menuButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
+          key: index,
+          closeMenu: hideMenu
+        }))
+      })
+    })]
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridActionsCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  api: PropTypes.object,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridActionsCell };
+export const renderActionsCell = params => /*#__PURE__*/_jsx(GridActionsCell, _extends({}, params));

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridActionsCellItem.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { MenuItemProps } from '@mui/material/MenuItem';
+interface GridActionsCellItemCommonProps {
+    label: string;
+    icon?: React.ReactElement;
+    /** from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component */
+    component?: React.ElementType;
+}
+export type GridActionsCellItemProps = GridActionsCellItemCommonProps & (({
+    showInMenu?: false;
+    icon: React.ReactElement;
+} & Omit<IconButtonProps, 'component'>) | ({
+    showInMenu: true;
+    /**
+     * If false, the menu will not close when this item is clicked.
+     * @default true
+     */
+    closeMenuOnClick?: boolean;
+    closeMenu?: () => void;
+} & Omit<MenuItemProps, 'component'>));
+declare const GridActionsCellItem: React.ForwardRefExoticComponent<(Omit<GridActionsCellItemCommonProps & {
+    showInMenu?: false | undefined;
+    icon: React.ReactElement;
+} & Omit<IconButtonProps, "component">, "ref"> | Omit<GridActionsCellItemCommonProps & {
+    showInMenu: true;
+    /**
+     * If false, the menu will not close when this item is clicked.
+     * @default true
+     */
+    closeMenuOnClick?: boolean | undefined;
+    closeMenu?: (() => void) | undefined;
+} & Omit<MenuItemProps, "component">, "ref">) & React.RefAttributes<HTMLElement>>;
+export { GridActionsCellItem };

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridActionsCellItem.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["label", "icon", "showInMenu", "onClick"],
+  _excluded2 = ["label", "icon", "showInMenu", "onClick", "closeMenuOnClick", "closeMenu"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const GridActionsCellItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const rootProps = useGridRootProps();
+  if (!props.showInMenu) {
+    var _rootProps$slotProps;
+    const {
+        label,
+        icon,
+        onClick
+      } = props,
+      other = _objectWithoutPropertiesLoose(props, _excluded);
+    const handleClick = event => {
+      onClick == null || onClick(event);
+    };
+    return /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+      ref: ref,
+      size: "small",
+      role: "menuitem",
+      "aria-label": label
+    }, other, {
+      onClick: handleClick
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+      children: /*#__PURE__*/React.cloneElement(icon, {
+        fontSize: 'small'
+      })
+    }));
+  }
+  const {
+      label,
+      icon,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const handleClick = event => {
+    onClick == null || onClick(event);
+    if (closeMenuOnClick) {
+      closeMenu == null || closeMenu();
+    }
+  };
+  return /*#__PURE__*/_jsxs(MenuItem, _extends({
+    ref: ref
+  }, other, {
+    onClick: handleClick,
+    children: [icon && /*#__PURE__*/_jsx(ListItemIcon, {
+      children: icon
+    }), label]
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridActionsCellItem.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * from https://mui.com/material-ui/api/button-base/#ButtonBase-prop-component
+   */
+  component: PropTypes.elementType,
+  icon: PropTypes.element,
+  label: PropTypes.string.isRequired,
+  showInMenu: PropTypes.bool
+} : void 0;
+export { GridActionsCellItem };

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridBooleanCell.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { GridRenderCellParams } from '../../models/params/gridCellParams';
+import { GridColDef } from '../../models/colDef/gridColDef';
+interface GridBooleanCellProps extends GridRenderCellParams, Omit<SvgIconProps, 'tabIndex' | 'id'> {
+}
+declare function GridBooleanCellRaw(props: GridBooleanCellProps): React.JSX.Element;
+declare namespace GridBooleanCellRaw {
+    var propTypes: any;
+}
+declare const GridBooleanCell: React.MemoExoticComponent<typeof GridBooleanCellRaw>;
+export { GridBooleanCell };
+export declare const renderBooleanCell: GridColDef['renderCell'];

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridBooleanCell.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { isAutoGeneratedRow } from '../../hooks/features/rows/gridRowsUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['booleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridBooleanCellRaw(props) {
+  const {
+      value
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const Icon = React.useMemo(() => value ? rootProps.slots.booleanCellTrueIcon : rootProps.slots.booleanCellFalseIcon, [rootProps.slots.booleanCellFalseIcon, rootProps.slots.booleanCellTrueIcon, value]);
+  return /*#__PURE__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: classes.root,
+    titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
+    "data-value": Boolean(value)
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+export { GridBooleanCell };
+export const renderBooleanCell = params => {
+  if (isAutoGeneratedRow(params.rowNode)) {
+    return '';
+  }
+  return /*#__PURE__*/_jsx(GridBooleanCell, _extends({}, params));
+};

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridCell.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { GridRowId, GridCellMode, GridEditCellProps } from '../../models';
+import { GridColDef, GridAlignment } from '../../models/colDef/gridColDef';
+type GridCellV7Props = {
+    align: GridAlignment;
+    className?: string;
+    colIndex: number;
+    column: GridColDef;
+    rowId: GridRowId;
+    height: number | 'auto';
+    showRightBorder?: boolean;
+    width: number;
+    colSpan?: number;
+    disableDragEvents?: boolean;
+    isNotVisible?: boolean;
+    editCellState: GridEditCellProps<any> | null;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onDragEnter?: React.DragEventHandler<HTMLDivElement>;
+    onDragOver?: React.DragEventHandler<HTMLDivElement>;
+    [x: string]: any;
+};
+type GridCellWrapperProps = GridCellV7Props;
+export type GridCellProps<V = any, F = V> = GridCellWrapperProps & {
+    field: string;
+    formattedValue?: F;
+    hasFocus?: boolean;
+    isEditable?: boolean;
+    isSelected?: boolean;
+    value?: V;
+    cellMode?: GridCellMode;
+    children: React.ReactNode;
+    tabIndex: 0 | -1;
+};
+declare const GridCell: React.ForwardRefExoticComponent<Omit<GridCellProps<any, any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const MemoizedCellWrapper: React.ForwardRefExoticComponent<Omit<GridCellV7Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedCellWrapper as GridCellWrapper, GridCell };
+declare const MemoizedGridCellV7: React.ForwardRefExoticComponent<Omit<GridCellV7Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { MemoizedGridCellV7 as GridCellV7 };

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridCell.js

@@ -0,0 +1,650 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["changeReason", "unstable_updateValueOnRender"],
+  _excluded2 = ["align", "children", "editCellState", "colIndex", "column", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "isSelected", "rowId", "tabIndex", "style", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+  _excluded3 = ["column", "rowId", "editCellState", "align", "children", "colIndex", "height", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "isNotVisible", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver", "style"],
+  _excluded4 = ["changeReason", "unstable_updateValueOnRender"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef, unstable_composeClasses as composeClasses, unstable_ownerDocument as ownerDocument, unstable_capitalize as capitalize } from '@mui/utils';
+import { fastMemo } from '../../utils/fastMemo';
+import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
+import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
+import { GridCellModes } from '../../models';
+import { useGridSelector, objectShallowCompare } from '../../hooks/utils/useGridSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
+import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY_CELL_PARAMS = {
+  id: -1,
+  field: '__unset__',
+  row: {},
+  rowNode: {
+    id: -1,
+    depth: 0,
+    type: 'leaf',
+    parent: -1,
+    groupingKey: null
+  },
+  colDef: {
+    type: 'string',
+    field: '__unset__',
+    computedWidth: 0
+  },
+  cellMode: GridCellModes.View,
+  hasFocus: false,
+  tabIndex: -1,
+  value: null,
+  formattedValue: '__unset__',
+  isEditable: false,
+  api: {}
+};
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    showRightBorder,
+    isEditable,
+    isSelected,
+    isSelectionMode,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['cell', `cell--text${capitalize(align)}`, isEditable && 'cell--editable', isSelected && 'selected', showRightBorder && 'cell--withRightBorder', isSelectionMode && !isEditable && 'cell--selectionMode', 'withBorderColor'],
+    content: ['cellContent']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+let warnedOnce = false;
+
+// GridCellWrapper is a compatibility layer for the V6 cell slot. If we can use the more efficient
+// `GridCellV7`, we should. That component is a merge of `GridCellWrapper` and `GridCell`.
+// TODO(v7): Remove the wrapper & cellV6 and use the cellV7 exclusively.
+// TODO(v7): Removing the wrapper will break the docs performance visualization demo.
+const GridCellWrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    column,
+    rowId,
+    editCellState
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const field = column.field;
+  const cellParamsWithAPI = useGridSelector(apiRef, () => {
+    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
+    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
+    // updated, while `rowId`/`fieldId` reference an entry in the old state.
+    try {
+      const cellParams = apiRef.current.getCellParams(rowId, field);
+      const result = cellParams;
+      result.api = apiRef.current;
+      return result;
+    } catch (e) {
+      if (e instanceof MissingRowIdError) {
+        return EMPTY_CELL_PARAMS;
+      }
+      throw e;
+    }
+  }, objectShallowCompare);
+  const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+    id: rowId,
+    field
+  }));
+  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+    return null;
+  }
+  const {
+    cellMode,
+    hasFocus,
+    isEditable,
+    value,
+    formattedValue
+  } = cellParamsWithAPI;
+  const managesOwnFocus = column.type === 'actions';
+  const tabIndex = (cellMode === 'view' || !isEditable) && !managesOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  const {
+    classes: rootClasses,
+    getCellClassName
+  } = rootProps;
+  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field
+  });
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParamsWithAPI));
+  }
+  let children;
+  if (editCellState == null && column.renderCell) {
+    children = column.renderCell(cellParamsWithAPI);
+    classNames.push(gridClasses['cell--withRenderer']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
+  }
+  if (editCellState != null && column.renderEditCell) {
+    const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded);
+    const params = _extends({}, cellParamsWithAPI, {
+      row: updatedRow
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+  }
+  const {
+    slots
+  } = rootProps;
+  const CellComponent = slots.cell;
+  const cellProps = _extends({}, props, {
+    ref,
+    field,
+    formattedValue,
+    hasFocus,
+    isEditable,
+    isSelected,
+    value,
+    cellMode,
+    children,
+    tabIndex,
+    className: clsx(classNames)
+  });
+  return /*#__PURE__*/React.createElement(CellComponent, cellProps);
+});
+const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _rootProps$experiment, _rootProps$experiment2;
+  const {
+      align,
+      children: childrenProp,
+      colIndex,
+      column,
+      cellMode,
+      field,
+      formattedValue,
+      hasFocus,
+      height,
+      isEditable,
+      isSelected,
+      rowId,
+      tabIndex,
+      style: styleProp,
+      value,
+      width,
+      className,
+      showRightBorder,
+      colSpan,
+      disableDragEvents,
+      isNotVisible,
+      onClick,
+      onDoubleClick,
+      onMouseDown,
+      onMouseUp,
+      onMouseOver,
+      onKeyDown,
+      onKeyUp,
+      onDragEnter,
+      onDragOver
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded2);
+  const valueToRender = formattedValue == null ? value : formattedValue;
+  const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
+  const focusElementRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    align,
+    showRightBorder,
+    isEditable,
+    classes: rootProps.classes,
+    isSelected
+  };
+  const classes = useUtilityClasses(ownerState);
+  const publishMouseUp = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+    if (onMouseUp) {
+      onMouseUp(event);
+    }
+  }, [apiRef, field, onMouseUp, rowId]);
+  const publishMouseDown = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  }, [apiRef, field, onMouseDown, rowId]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, field, rowId]);
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return {
+        padding: 0,
+        opacity: 0,
+        width: 0,
+        border: 0
+      };
+    }
+    const cellStyle = _extends({
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
+    return cellStyle;
+  }, [width, height, isNotVisible, styleProp]);
+  React.useEffect(() => {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  let handleFocus = other.onFocus;
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.warnIfFocusStateIsNotSynced) {
+    handleFocus = event => {
+      const focusedCell = gridFocusCellSelector(apiRef);
+      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+      if (!warnedOnce) {
+        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        warnedOnce = true;
+      }
+    };
+  }
+  const managesOwnFocus = column.type === 'actions';
+  let children = childrenProp;
+  if (children === undefined) {
+    const valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    children = /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      title: valueString,
+      role: "presentation",
+      children: valueString
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(children) && managesOwnFocus) {
+    children = /*#__PURE__*/React.cloneElement(children, {
+      focusElementRef
+    });
+  }
+  const draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
+  const ariaV7 = (_rootProps$experiment2 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment2.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      ref: handleRef,
+      className: clsx(className, classes.root),
+      role: ariaV7 ? 'gridcell' : 'cell',
+      "data-field": field,
+      "data-colindex": colIndex,
+      "aria-colindex": colIndex + 1,
+      "aria-colspan": colSpan,
+      style: style,
+      tabIndex: tabIndex,
+      onClick: publish('cellClick', onClick),
+      onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+      onMouseOver: publish('cellMouseOver', onMouseOver),
+      onMouseDown: publishMouseDown('cellMouseDown'),
+      onMouseUp: publishMouseUp('cellMouseUp'),
+      onKeyDown: publish('cellKeyDown', onKeyDown),
+      onKeyUp: publish('cellKeyUp', onKeyUp)
+    }, draggableEventHandlers, other, {
+      onFocus: handleFocus,
+      children: children
+    }))
+  );
+});
+const MemoizedCellWrapper = fastMemo(GridCellWrapper);
+process.env.NODE_ENV !== "production" ? GridCellWrapper.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  className: PropTypes.string,
+  colIndex: PropTypes.number,
+  colSpan: PropTypes.number,
+  column: PropTypes.object,
+  disableDragEvents: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number
+} : void 0;
+process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']),
+  cellMode: PropTypes.oneOf(['edit', 'view']),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  colIndex: PropTypes.number,
+  colSpan: PropTypes.number,
+  column: PropTypes.object,
+  disableDragEvents: PropTypes.bool,
+  editCellState: PropTypes.shape({
+    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+    isProcessingProps: PropTypes.bool,
+    isValidating: PropTypes.bool,
+    value: PropTypes.any
+  }),
+  isNotVisible: PropTypes.bool,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number
+} : void 0;
+export { MemoizedCellWrapper as GridCellWrapper, GridCell };
+const GridCellV7 = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _getActions, _ref, _rootProps$unstable_c, _rootProps$experiment3, _rootProps$experiment4;
+  const {
+      column,
+      rowId,
+      editCellState,
+      align,
+      colIndex,
+      height,
+      width,
+      className,
+      showRightBorder,
+      colSpan,
+      disableDragEvents,
+      isNotVisible,
+      onClick,
+      onDoubleClick,
+      onMouseDown,
+      onMouseUp,
+      onMouseOver,
+      onKeyDown,
+      onKeyUp,
+      onDragEnter,
+      onDragOver,
+      style: styleProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded3);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const field = column.field;
+  const cellParamsWithAPI = useGridSelector(apiRef, () => {
+    // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
+    // associated with `rowId`/`fieldId`, but this selector runs after the state has been
+    // updated, while `rowId`/`fieldId` reference an entry in the old state.
+    try {
+      const cellParams = apiRef.current.getCellParams(rowId, field);
+      const result = cellParams;
+      result.api = apiRef.current;
+      return result;
+    } catch (e) {
+      if (e instanceof MissingRowIdError) {
+        return EMPTY_CELL_PARAMS;
+      }
+      throw e;
+    }
+  }, objectShallowCompare);
+  const isSelected = useGridSelector(apiRef, () => apiRef.current.unstable_applyPipeProcessors('isCellSelected', false, {
+    id: rowId,
+    field
+  }));
+  const {
+    cellMode,
+    hasFocus,
+    isEditable,
+    value,
+    formattedValue
+  } = cellParamsWithAPI;
+  const canManageOwnFocus = column.type === 'actions' && ((_getActions = (_ref = column).getActions) == null ? void 0 : _getActions.call(_ref, apiRef.current.getRowParams(rowId)).some(action => !action.props.disabled));
+  const tabIndex = (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+  const {
+    classes: rootClasses,
+    getCellClassName
+  } = rootProps;
+  const classNames = apiRef.current.unstable_applyPipeProcessors('cellClassName', [], {
+    id: rowId,
+    field
+  });
+  if (column.cellClassName) {
+    classNames.push(typeof column.cellClassName === 'function' ? column.cellClassName(cellParamsWithAPI) : column.cellClassName);
+  }
+  if (getCellClassName) {
+    classNames.push(getCellClassName(cellParamsWithAPI));
+  }
+  const valueToRender = formattedValue == null ? value : formattedValue;
+  const cellRef = React.useRef(null);
+  const handleRef = useForkRef(ref, cellRef);
+  const focusElementRef = React.useRef(null);
+  // @ts-expect-error To access `unstable_cellSelection` flag as it's a `premium` feature
+  const isSelectionMode = (_rootProps$unstable_c = rootProps.unstable_cellSelection) != null ? _rootProps$unstable_c : false;
+  const ownerState = {
+    align,
+    showRightBorder,
+    isEditable,
+    classes: rootProps.classes,
+    isSelected,
+    isSelectionMode
+  };
+  const classes = useUtilityClasses(ownerState);
+  const publishMouseUp = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+    if (onMouseUp) {
+      onMouseUp(event);
+    }
+  }, [apiRef, field, onMouseUp, rowId]);
+  const publishMouseDown = React.useCallback(eventName => event => {
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  }, [apiRef, field, onMouseDown, rowId]);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // The row might have been deleted during the click
+    if (!apiRef.current.getRow(rowId)) {
+      return;
+    }
+    const params = apiRef.current.getCellParams(rowId, field || '');
+    apiRef.current.publishEvent(eventName, params, event);
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, field, rowId]);
+  const style = React.useMemo(() => {
+    if (isNotVisible) {
+      return _extends({
+        padding: 0,
+        opacity: 0,
+        width: 0,
+        border: 0
+      }, styleProp);
+    }
+    const cellStyle = _extends({
+      minWidth: width,
+      maxWidth: width,
+      minHeight: height,
+      maxHeight: height === 'auto' ? 'none' : height
+    }, styleProp);
+    return cellStyle;
+  }, [width, height, isNotVisible, styleProp]);
+  React.useEffect(() => {
+    if (!hasFocus || cellMode === GridCellModes.Edit) {
+      return;
+    }
+    const doc = ownerDocument(apiRef.current.rootElementRef.current);
+    if (cellRef.current && !cellRef.current.contains(doc.activeElement)) {
+      const focusableElement = cellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusElementRef.current || focusableElement || cellRef.current;
+      if (doesSupportPreventScroll()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
+    }
+  }, [hasFocus, cellMode, apiRef]);
+  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+    return null;
+  }
+  let handleFocus = other.onFocus;
+  if (process.env.NODE_ENV === 'test' && (_rootProps$experiment3 = rootProps.experimentalFeatures) != null && _rootProps$experiment3.warnIfFocusStateIsNotSynced) {
+    handleFocus = event => {
+      const focusedCell = gridFocusCellSelector(apiRef);
+      if ((focusedCell == null ? void 0 : focusedCell.id) === rowId && focusedCell.field === field) {
+        if (typeof other.onFocus === 'function') {
+          other.onFocus(event);
+        }
+        return;
+      }
+      if (!warnedOnce) {
+        console.warn([`MUI: The cell with id=${rowId} and field=${field} received focus.`, `According to the state, the focus should be at id=${focusedCell == null ? void 0 : focusedCell.id}, field=${focusedCell == null ? void 0 : focusedCell.field}.`, "Not syncing the state may cause unwanted behaviors since the `cellFocusIn` event won't be fired.", 'Call `fireEvent.mouseUp` before the `fireEvent.click` to sync the focus with the state.'].join('\n'));
+        warnedOnce = true;
+      }
+    };
+  }
+  let children;
+  if (editCellState == null && column.renderCell) {
+    children = column.renderCell(cellParamsWithAPI);
+    classNames.push(gridClasses['cell--withRenderer']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--withRenderer']);
+  }
+  if (editCellState != null && column.renderEditCell) {
+    const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
+
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const editCellStateRest = _objectWithoutPropertiesLoose(editCellState, _excluded4);
+    const params = _extends({}, cellParamsWithAPI, {
+      row: updatedRow
+    }, editCellStateRest);
+    children = column.renderEditCell(params);
+    classNames.push(gridClasses['cell--editing']);
+    classNames.push(rootClasses == null ? void 0 : rootClasses['cell--editing']);
+  }
+  if (children === undefined) {
+    const valueString = valueToRender == null ? void 0 : valueToRender.toString();
+    children = /*#__PURE__*/_jsx("div", {
+      className: classes.content,
+      title: valueString,
+      role: "presentation",
+      children: valueString
+    });
+  }
+  if ( /*#__PURE__*/React.isValidElement(children) && canManageOwnFocus) {
+    children = /*#__PURE__*/React.cloneElement(children, {
+      focusElementRef
+    });
+  }
+  const draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
+  const ariaV7 = (_rootProps$experiment4 = rootProps.experimentalFeatures) == null ? void 0 : _rootProps$experiment4.ariaV7;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsx("div", _extends({
+      ref: handleRef,
+      className: clsx(className, classNames, classes.root),
+      role: ariaV7 ? 'gridcell' : 'cell',
+      "data-field": field,
+      "data-colindex": colIndex,
+      "aria-colindex": colIndex + 1,
+      "aria-colspan": colSpan,
+      style: style,
+      tabIndex: tabIndex,
+      onClick: publish('cellClick', onClick),
+      onDoubleClick: publish('cellDoubleClick', onDoubleClick),
+      onMouseOver: publish('cellMouseOver', onMouseOver),
+      onMouseDown: publishMouseDown('cellMouseDown'),
+      onMouseUp: publishMouseUp('cellMouseUp'),
+      onKeyDown: publish('cellKeyDown', onKeyDown),
+      onKeyUp: publish('cellKeyUp', onKeyUp)
+    }, draggableEventHandlers, other, {
+      onFocus: handleFocus,
+      children: children
+    }))
+  );
+});
+process.env.NODE_ENV !== "production" ? GridCellV7.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.oneOf(['center', 'left', 'right']).isRequired,
+  className: PropTypes.string,
+  colIndex: PropTypes.number.isRequired,
+  colSpan: PropTypes.number,
+  column: PropTypes.object.isRequired,
+  disableDragEvents: PropTypes.bool,
+  editCellState: PropTypes.shape({
+    changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+    isProcessingProps: PropTypes.bool,
+    isValidating: PropTypes.bool,
+    value: PropTypes.any
+  }),
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
+  isNotVisible: PropTypes.bool,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onDragEnter: PropTypes.func,
+  onDragOver: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseUp: PropTypes.func,
+  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  showRightBorder: PropTypes.bool,
+  width: PropTypes.number.isRequired
+} : void 0;
+const MemoizedGridCellV7 = fastMemo(GridCellV7);
+export { MemoizedGridCellV7 as GridCellV7 };

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditBooleanCell.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+export interface GridEditBooleanCellProps extends GridRenderEditCellParams, Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, 'id' | 'tabIndex'> {
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: boolean) => Promise<void> | void;
+}
+declare function GridEditBooleanCell(props: GridEditBooleanCellProps): React.JSX.Element;
+declare namespace GridEditBooleanCell {
+    var propTypes: any;
+}
+export { GridEditBooleanCell };
+export declare const renderEditBooleanCell: (params: GridEditBooleanCellProps) => React.JSX.Element;

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditBooleanCell.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editBooleanCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridEditBooleanCell(props) {
+  var _rootProps$slotProps;
+  const {
+      id: idProp,
+      value,
+      field,
+      className,
+      hasFocus,
+      onValueChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const inputRef = React.useRef(null);
+  const id = useId();
+  const [valueState, setValueState] = React.useState(value);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const handleChange = React.useCallback(async event => {
+    const newValue = event.target.checked;
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+    setValueState(newValue);
+    await apiRef.current.setEditCellValue({
+      id: idProp,
+      field,
+      value: newValue
+    }, event);
+  }, [apiRef, field, idProp, onValueChange]);
+  React.useEffect(() => {
+    setValueState(value);
+  }, [value]);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx("label", _extends({
+    htmlFor: id,
+    className: clsx(classes.root, className)
+  }, other, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+      id: id,
+      inputRef: inputRef,
+      checked: Boolean(valueState),
+      onChange: handleChange,
+      size: "small"
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox))
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridEditBooleanCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {boolean} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditBooleanCell };
+export const renderEditBooleanCell = params => /*#__PURE__*/_jsx(GridEditBooleanCell, _extends({}, params));

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditDateCell.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { InputBaseProps } from '@mui/material/InputBase';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+export interface GridEditDateCellProps extends GridRenderEditCellParams, Omit<InputBaseProps, 'id' | 'value' | 'tabIndex'> {
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: Date | null) => Promise<void> | void;
+}
+declare function GridEditDateCell(props: GridEditDateCellProps): React.JSX.Element;
+declare namespace GridEditDateCell {
+    var propTypes: any;
+}
+export { GridEditDateCell };
+export declare const renderEditDateCell: (params: GridRenderEditCellParams) => React.JSX.Element;

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditDateCell.js

@@ -0,0 +1,189 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "inputProps", "isValidating", "isProcessingProps", "onValueChange"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import InputBase from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledInputBase = styled(InputBase)({
+  fontSize: 'inherit'
+});
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridEditDateCell(props) {
+  const {
+      id,
+      value: valueProp,
+      field,
+      colDef,
+      hasFocus,
+      inputProps,
+      onValueChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const isDateTime = colDef.type === 'dateTime';
+  const apiRef = useGridApiContext();
+  const inputRef = React.useRef();
+  const valueTransformed = React.useMemo(() => {
+    let parsedDate;
+    if (valueProp == null) {
+      parsedDate = null;
+    } else if (valueProp instanceof Date) {
+      parsedDate = valueProp;
+    } else {
+      parsedDate = new Date((valueProp != null ? valueProp : '').toString());
+    }
+    let formattedDate;
+    if (parsedDate == null || Number.isNaN(parsedDate.getTime())) {
+      formattedDate = '';
+    } else {
+      const localDate = new Date(parsedDate.getTime() - parsedDate.getTimezoneOffset() * 60 * 1000);
+      formattedDate = localDate.toISOString().substr(0, isDateTime ? 16 : 10);
+    }
+    return {
+      parsed: parsedDate,
+      formatted: formattedDate
+    };
+  }, [valueProp, isDateTime]);
+  const [valueState, setValueState] = React.useState(valueTransformed);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const parseValueToDate = React.useCallback(value => {
+    if (value === '') {
+      return null;
+    }
+    const [date, time] = value.split('T');
+    const [year, month, day] = date.split('-');
+    const parsedDate = new Date();
+    parsedDate.setFullYear(Number(year), Number(month) - 1, Number(day));
+    parsedDate.setHours(0, 0, 0, 0);
+    if (time) {
+      const [hours, minutes] = time.split(':');
+      parsedDate.setHours(Number(hours), Number(minutes), 0, 0);
+    }
+    return parsedDate;
+  }, []);
+  const handleChange = React.useCallback(async event => {
+    const newFormattedDate = event.target.value;
+    const newParsedDate = parseValueToDate(newFormattedDate);
+    if (onValueChange) {
+      await onValueChange(event, newParsedDate);
+    }
+    setValueState({
+      parsed: newParsedDate,
+      formatted: newFormattedDate
+    });
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: newParsedDate
+    }, event);
+  }, [apiRef, field, id, onValueChange, parseValueToDate]);
+  React.useEffect(() => {
+    setValueState(state => {
+      var _valueTransformed$par, _state$parsed;
+      if (valueTransformed.parsed !== state.parsed && ((_valueTransformed$par = valueTransformed.parsed) == null ? void 0 : _valueTransformed$par.getTime()) !== ((_state$parsed = state.parsed) == null ? void 0 : _state$parsed.getTime())) {
+        return valueTransformed;
+      }
+      return state;
+    });
+  }, [valueTransformed]);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
+    inputRef: inputRef,
+    fullWidth: true,
+    className: classes.root,
+    type: isDateTime ? 'datetime-local' : 'date',
+    inputProps: _extends({
+      max: isDateTime ? '9999-12-31T23:59' : '9999-12-31'
+    }, inputProps),
+    value: valueState.formatted,
+    onChange: handleChange
+  }, other));
+}
+process.env.NODE_ENV !== "production" ? GridEditDateCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditDateCell };
+export const renderEditDateCell = params => /*#__PURE__*/_jsx(GridEditDateCell, _extends({}, params));

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditInputCell.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { InputBaseProps } from '@mui/material/InputBase';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+export interface GridEditInputCellProps extends GridRenderEditCellParams, Omit<InputBaseProps, 'id' | 'value' | 'tabIndex' | 'ref'> {
+    debounceMs?: number;
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+     * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: React.ChangeEvent<HTMLInputElement>, newValue: string) => Promise<void> | void;
+}
+declare const GridEditInputCell: React.ForwardRefExoticComponent<Omit<GridEditInputCellProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export { GridEditInputCell };
+export declare const renderEditInputCell: (params: GridEditInputCellProps) => React.JSX.Element;

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditInputCell.js

@@ -0,0 +1,164 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "hasFocus", "isValidating", "debounceMs", "isProcessingProps", "onValueChange"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { styled } from '@mui/material/styles';
+import InputBase from '@mui/material/InputBase';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['editInputCell']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridEditInputCellRoot = styled(InputBase, {
+  name: 'MuiDataGrid',
+  slot: 'EditInputCell',
+  overridesResolver: (props, styles) => styles.editInputCell
+})(({
+  theme
+}) => _extends({}, theme.typography.body2, {
+  padding: '1px 0',
+  '& input': {
+    padding: '0 16px',
+    height: '100%'
+  }
+}));
+const GridEditInputCell = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const rootProps = useGridRootProps();
+  const {
+      id,
+      value,
+      field,
+      colDef,
+      hasFocus,
+      debounceMs = 200,
+      isProcessingProps,
+      onValueChange
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const inputRef = React.useRef();
+  const [valueState, setValueState] = React.useState(value);
+  const classes = useUtilityClasses(rootProps);
+  const handleChange = React.useCallback(async event => {
+    const newValue = event.target.value;
+    if (onValueChange) {
+      await onValueChange(event, newValue);
+    }
+    const column = apiRef.current.getColumn(field);
+    let parsedValue = newValue;
+    if (column.valueParser) {
+      parsedValue = column.valueParser(newValue, apiRef.current.getCellParams(id, field));
+    }
+    setValueState(parsedValue);
+    apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: parsedValue,
+      debounceMs,
+      unstable_skipValueParser: true
+    }, event);
+  }, [apiRef, debounceMs, field, id, onValueChange]);
+  const meta = apiRef.current.unstable_getEditCellMeta(id, field);
+  React.useEffect(() => {
+    if ((meta == null ? void 0 : meta.changeReason) !== 'debouncedSetEditCellValue') {
+      setValueState(value);
+    }
+  }, [meta, value]);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      inputRef.current.focus();
+    }
+  }, [hasFocus]);
+  return /*#__PURE__*/_jsx(GridEditInputCellRoot, _extends({
+    ref: ref,
+    inputRef: inputRef,
+    className: classes.root,
+    ownerState: rootProps,
+    fullWidth: true,
+    type: colDef.type === 'number' ? colDef.type : 'text',
+    value: valueState != null ? valueState : '',
+    onChange: handleChange,
+    endAdornment: isProcessingProps ? /*#__PURE__*/_jsx(rootProps.slots.loadIcon, {
+      fontSize: "small",
+      color: "action"
+    }) : undefined
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? GridEditInputCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  debounceMs: PropTypes.number,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
+   * @param {Date | null} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditInputCell };
+export const renderEditInputCell = params => /*#__PURE__*/_jsx(GridEditInputCell, _extends({}, params));

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditSingleSelectCell.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
+import { GridRenderEditCellParams } from '../../models/params/gridCellParams';
+import { GridSingleSelectColDef } from '../../models/colDef/gridColDef';
+export interface GridEditSingleSelectCellProps extends GridRenderEditCellParams, Omit<SelectProps, 'id' | 'tabIndex' | 'value'>, Pick<GridSingleSelectColDef, 'getOptionLabel' | 'getOptionValue'> {
+    /**
+     * Callback called when the value is changed by the user.
+     * @param {SelectChangeEvent<any>} event The event source of the callback.
+     * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+     * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+     */
+    onValueChange?: (event: SelectChangeEvent<any>, newValue: any) => Promise<void> | void;
+    /**
+     * If true, the select opens by default.
+     */
+    initialOpen?: boolean;
+}
+declare function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps): React.JSX.Element | null;
+declare namespace GridEditSingleSelectCell {
+    var propTypes: any;
+}
+export { GridEditSingleSelectCell };
+export declare const renderEditSingleSelectCell: (params: GridEditSingleSelectCellProps) => React.JSX.Element;

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridEditSingleSelectCell.js

@@ -0,0 +1,216 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "getOptionLabel", "getOptionValue"],
+  _excluded2 = ["MenuProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
+import { GridCellEditStopReasons } from '../../models/params/gridEditCellParams';
+import { isEscapeKey } from '../../utils/keyboardUtils';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridEditModes } from '../../models/gridEditRowModel';
+import { getValueFromValueOptions, isSingleSelectColDef } from '../panel/filterPanel/filterPanelUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+function isKeyboardEvent(event) {
+  return !!event.key;
+}
+function GridEditSingleSelectCell(props) {
+  var _rootProps$slotProps, _baseSelectProps$nati, _rootProps$slotProps2;
+  const rootProps = useGridRootProps();
+  const {
+      id,
+      value: valueProp,
+      field,
+      row,
+      colDef,
+      hasFocus,
+      error,
+      onValueChange,
+      initialOpen = rootProps.editMode === GridEditModes.Cell,
+      getOptionLabel: getOptionLabelProp,
+      getOptionValue: getOptionValueProp
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const ref = React.useRef();
+  const inputRef = React.useRef();
+  const [open, setOpen] = React.useState(initialOpen);
+  const baseSelectProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseSelect) || {};
+  const isSelectNative = (_baseSelectProps$nati = baseSelectProps.native) != null ? _baseSelectProps$nati : false;
+  const _ref = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {},
+    {
+      MenuProps
+    } = _ref,
+    otherBaseSelectProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  useEnhancedEffect(() => {
+    if (hasFocus) {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
+    }
+  }, [hasFocus]);
+  if (!isSingleSelectColDef(colDef)) {
+    return null;
+  }
+  let valueOptions;
+  if (typeof (colDef == null ? void 0 : colDef.valueOptions) === 'function') {
+    valueOptions = colDef == null ? void 0 : colDef.valueOptions({
+      id,
+      row,
+      field
+    });
+  } else {
+    valueOptions = colDef == null ? void 0 : colDef.valueOptions;
+  }
+  if (!valueOptions) {
+    return null;
+  }
+  const getOptionValue = getOptionValueProp || colDef.getOptionValue;
+  const getOptionLabel = getOptionLabelProp || colDef.getOptionLabel;
+  const handleChange = async event => {
+    if (!isSingleSelectColDef(colDef) || !valueOptions) {
+      return;
+    }
+    setOpen(false);
+    const target = event.target;
+    // NativeSelect casts the value to a string.
+    const formattedTargetValue = getValueFromValueOptions(target.value, valueOptions, getOptionValue);
+    if (onValueChange) {
+      await onValueChange(event, formattedTargetValue);
+    }
+    await apiRef.current.setEditCellValue({
+      id,
+      field,
+      value: formattedTargetValue
+    }, event);
+  };
+  const handleClose = (event, reason) => {
+    if (rootProps.editMode === GridEditModes.Row) {
+      setOpen(false);
+      return;
+    }
+    if (reason === 'backdropClick' || isEscapeKey(event.key)) {
+      const params = apiRef.current.getCellParams(id, field);
+      apiRef.current.publishEvent('cellEditStop', _extends({}, params, {
+        reason: isEscapeKey(event.key) ? GridCellEditStopReasons.escapeKeyDown : GridCellEditStopReasons.cellFocusOut
+      }));
+    }
+  };
+  const handleOpen = event => {
+    if (isKeyboardEvent(event) && event.key === 'Enter') {
+      return;
+    }
+    setOpen(true);
+  };
+  if (!valueOptions || !colDef) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(rootProps.slots.baseSelect, _extends({
+    ref: ref,
+    inputRef: inputRef,
+    value: valueProp,
+    onChange: handleChange,
+    open: open,
+    onOpen: handleOpen,
+    MenuProps: _extends({
+      onClose: handleClose
+    }, MenuProps),
+    error: error,
+    native: isSelectNative,
+    fullWidth: true
+  }, other, otherBaseSelectProps, {
+    children: valueOptions.map(valueOption => {
+      var _rootProps$slotProps3;
+      const value = getOptionValue(valueOption);
+      return /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, ((_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseSelectOption) || {}, {
+        native: isSelectNative,
+        key: value,
+        value: value
+      }), getOptionLabel(valueOption));
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridEditSingleSelectCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  changeReason: PropTypes.oneOf(['debouncedSetEditCellValue', 'setEditCellValue']),
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * Used to determine the label displayed for a given value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The text to be displayed.
+   */
+  getOptionLabel: PropTypes.func,
+  /**
+   * Used to determine the value used for a value option.
+   * @param {ValueOptions} value The current value option.
+   * @returns {string} The value to be used.
+   */
+  getOptionValue: PropTypes.func,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the select opens by default.
+   */
+  initialOpen: PropTypes.bool,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  isProcessingProps: PropTypes.bool,
+  isValidating: PropTypes.bool,
+  /**
+   * Callback called when the value is changed by the user.
+   * @param {SelectChangeEvent<any>} event The event source of the callback.
+   * @param {any} newValue The value that is going to be passed to `apiRef.current.setEditCellValue`.
+   * @returns {Promise<void> | void} A promise to be awaited before calling `apiRef.current.setEditCellValue`
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridEditSingleSelectCell };
+export const renderEditSingleSelectCell = params => /*#__PURE__*/_jsx(GridEditSingleSelectCell, _extends({}, params));

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridSkeletonCell.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface GridSkeletonCellProps {
+    width: number;
+    contentWidth: number;
+    field: string;
+    align: string;
+}
+declare function GridSkeletonCell(props: React.HTMLAttributes<HTMLDivElement> & GridSkeletonCellProps): React.JSX.Element;
+declare namespace GridSkeletonCell {
+    var propTypes: any;
+}
+export { GridSkeletonCell };

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/GridSkeletonCell.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["field", "align", "width", "contentWidth"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Skeleton from '@mui/material/Skeleton';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    align,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['cell', 'cellSkeleton', `cell--text${capitalize(align)}`, 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridSkeletonCell(props) {
+  const {
+      align,
+      width,
+      contentWidth
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes,
+    align
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx("div", _extends({
+    className: classes.root,
+    style: {
+      width
+    }
+  }, other, {
+    children: /*#__PURE__*/_jsx(Skeleton, {
+      width: `${contentWidth}%`
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridSkeletonCell.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  align: PropTypes.string.isRequired,
+  contentWidth: PropTypes.number.isRequired,
+  field: PropTypes.string.isRequired,
+  width: PropTypes.number.isRequired
+} : void 0;
+export { GridSkeletonCell };

control-plane-ui/node_modules/@mui/x-data-grid/components/cell/index.d.ts

@@ -0,0 +1,10 @@
+export { GridCell } from './GridCell';
+export type { GridCellProps } from './GridCell';
+export * from './GridBooleanCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
+export * from './GridEditInputCell';
+export * from './GridEditSingleSelectCell';
+export * from './GridActionsCell';
+export * from './GridActionsCellItem';
+export * from './GridSkeletonCell';

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

@@ -0,0 +1,9 @@
+export { GridCell } from './GridCell';
+export * from './GridBooleanCell';
+export * from './GridEditBooleanCell';
+export * from './GridEditDateCell';
+export * from './GridEditInputCell';
+export * from './GridEditSingleSelectCell';
+export * from './GridActionsCell';
+export * from './GridActionsCellItem';
+export * from './GridSkeletonCell';

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/ColumnHeaderMenuIcon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
+export interface ColumnHeaderMenuIconProps {
+    colDef: GridStateColDef;
+    columnMenuId: string;
+    columnMenuButtonId: string;
+    open: boolean;
+    iconButtonRef: React.RefObject<HTMLButtonElement>;
+}
+export declare const ColumnHeaderMenuIcon: React.MemoExoticComponent<(props: ColumnHeaderMenuIconProps) => React.JSX.Element>;

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    open
+  } = ownerState;
+  const slots = {
+    root: ['menuIcon', open && 'menuOpen'],
+    button: ['menuIconButton']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+export const ColumnHeaderMenuIcon = /*#__PURE__*/React.memo(props => {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  const {
+    colDef,
+    open,
+    columnMenuId,
+    columnMenuButtonId,
+    iconButtonRef
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, 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__*/_jsx("div", {
+    className: classes.root,
+    children: /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+      title: apiRef.current.getLocaleText('columnMenuLabel'),
+      enterDelay: 1000
+    }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+      children: /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+        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$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseIconButton, {
+        children: /*#__PURE__*/_jsx(rootProps.slots.columnMenuIcon, {
+          fontSize: "small"
+        })
+      }))
+    }))
+  });
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridBaseColumnHeaders.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface GridBaseColumnHeadersProps extends React.HTMLAttributes<HTMLDivElement> {
+    sx?: SxProps<Theme>;
+}
+export declare const GridBaseColumnHeaders: React.ForwardRefExoticComponent<GridBaseColumnHeadersProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaders', 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridColumnHeadersRoot = 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)'
+});
+export const GridBaseColumnHeaders = /*#__PURE__*/React.forwardRef(function GridColumnHeaders(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridColumnHeadersRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    role: "presentation"
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnGroupHeader.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface GridColumnGroupHeaderProps {
+    groupId: string | null;
+    width: number;
+    fields: string[];
+    colIndex: number;
+    isLastColumn: boolean;
+    depth: number;
+    maxDepth: number;
+    height: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
+}
+declare function GridColumnGroupHeader(props: GridColumnGroupHeaderProps): React.JSX.Element;
+export { GridColumnGroupHeader };

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

@@ -0,0 +1,129 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_useId as useId, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridColumnGroupsLookupSelector } from '../../hooks/features/columnGrouping/gridColumnGroupsSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+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 composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnGroupHeader(props) {
+  var _columnGroupsLookup$g;
+  const {
+    groupId,
+    width,
+    depth,
+    maxDepth,
+    fields,
+    height,
+    colIndex,
+    hasFocus,
+    tabIndex,
+    isLastColumn
+  } = props;
+  const rootProps = useGridRootProps();
+  const headerCellRef = React.useRef(null);
+  const apiRef = useGridApiContext();
+  const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
+  const group = groupId ? columnGroupsLookup[groupId] : {};
+  const {
+    headerName = groupId != null ? groupId : '',
+    description = '',
+    headerAlign = undefined
+  } = group;
+  let headerComponent;
+  const render = groupId && ((_columnGroupsLookup$g = columnGroupsLookup[groupId]) == null ? void 0 : _columnGroupsLookup$g.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 = _extends({}, props, {
+    classes: rootProps.classes,
+    showColumnBorder,
+    headerAlign,
+    depth,
+    isDragging: false
+  });
+  const label = headerName != null ? headerName : groupId;
+  const id = 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 == null || elementToFocus.focus();
+    }
+  }, [apiRef, hasFocus]);
+  const publish = React.useCallback(eventName => event => {
+    // Ignore portal
+    // See https://github.com/mui/mui-x/issues/1721
+    if (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__*/_jsx(GridGenericColumnHeaderItem, _extends({
+    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));
+}
+export { GridColumnGroupHeader };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnHeaderFilterIconButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
+export interface ColumnHeaderFilterIconButtonProps {
+    field: string;
+    counter?: number;
+    onClick?: (params: GridColumnHeaderParams, event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonProps): React.JSX.Element | null;
+declare namespace GridColumnHeaderFilterIconButton {
+    var propTypes: any;
+}
+export { GridColumnHeaderFilterIconButton };

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

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import Badge from '@mui/material/Badge';
+import { useGridSelector } from '../../hooks';
+import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
+import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    icon: ['filterIcon']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderFilterIconButton(props) {
+  var _rootProps$slotProps, _rootProps$slotProps2;
+  const {
+    counter,
+    field,
+    onClick
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const preferencePanel = useGridSelector(apiRef, gridPreferencePanelStateSelector);
+  const labelId = useId();
+  const panelId = useId();
+  const toggleFilter = React.useCallback(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    const {
+      open,
+      openedPanelValue
+    } = gridPreferencePanelStateSelector(apiRef.current.state);
+    if (open && openedPanelValue === 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__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    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 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    children: /*#__PURE__*/_jsx(rootProps.slots.columnFilteredIcon, {
+      className: classes.icon,
+      fontSize: "small"
+    })
+  }));
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: apiRef.current.getLocaleText('columnHeaderFiltersTooltipActive')(counter),
+    enterDelay: 1000
+  }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseTooltip, {
+    children: /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+      children: [counter > 1 && /*#__PURE__*/_jsx(Badge, {
+        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.number,
+  field: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+} : void 0;
+export { GridColumnHeaderFilterIconButton };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnHeaderItem.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
+import { GridSortDirection } from '../../models/gridSortModel';
+import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
+interface GridColumnHeaderItemProps {
+    colIndex: number;
+    colDef: GridStateColDef;
+    columnMenuOpen: boolean;
+    headerHeight: number;
+    isDragging: boolean;
+    isResizing: boolean;
+    sortDirection: GridSortDirection;
+    sortIndex?: number;
+    filterItemsCounter?: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
+    disableReorder?: boolean;
+    separatorSide?: GridColumnHeaderSeparatorProps['side'];
+}
+declare function GridColumnHeaderItem(props: GridColumnHeaderItemProps): React.JSX.Element;
+declare namespace GridColumnHeaderItem {
+    var propTypes: any;
+}
+export { GridColumnHeaderItem };

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

@@ -0,0 +1,201 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
+import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
+import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
+import { isEventTargetInPortal } from '../../utils/domUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+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 composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderItem(props) {
+  var _rootProps$slotProps, _colDef$sortingOrder, _rootProps$slotProps2, _colDef$headerName;
+  const {
+    colDef,
+    columnMenuOpen,
+    colIndex,
+    headerHeight,
+    isResizing,
+    sortDirection,
+    sortIndex,
+    filterItemsCounter,
+    hasFocus,
+    tabIndex,
+    disableReorder,
+    separatorSide
+  } = props;
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const headerCellRef = React.useRef(null);
+  const columnMenuId = useId();
+  const columnMenuButtonId = 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 = _extends({}, 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 (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__*/_jsx(ColumnHeaderMenuIcon, {
+    colDef: colDef,
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    open: showColumnMenuIcon,
+    iconButtonRef: iconButtonRef
+  });
+  const columnMenu = /*#__PURE__*/_jsx(GridColumnHeaderMenu, {
+    columnMenuId: columnMenuId,
+    columnMenuButtonId: columnMenuButtonId,
+    field: colDef.field,
+    open: columnMenuOpen,
+    target: iconButtonRef.current,
+    ContentComponent: rootProps.slots.columnMenu,
+    contentComponentProps: (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnMenu,
+    onExited: handleExited
+  });
+  const sortingOrder = (_colDef$sortingOrder = colDef.sortingOrder) != null ? _colDef$sortingOrder : rootProps.sortingOrder;
+  const columnTitleIconButtons = /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.columnHeaderFilterIconButton, _extends({
+      field: colDef.field,
+      counter: filterItemsCounter
+    }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.columnHeaderFilterIconButton)), colDef.sortable && !colDef.hideSortIcons && /*#__PURE__*/_jsx(GridColumnHeaderSortIcon, {
+      direction: sortDirection,
+      index: sortIndex,
+      sortingOrder: sortingOrder
+    })]
+  });
+  React.useLayoutEffect(() => {
+    const columnMenuState = apiRef.current.state.columnMenu;
+    if (hasFocus && !columnMenuState.open) {
+      var _apiRef$current$colum;
+      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
+      const elementToFocus = focusableElement || headerCellRef.current;
+      elementToFocus == null || elementToFocus.focus();
+      if ((_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) != null && _apiRef$current$colum.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.headerName) != null ? _colDef$headerName : colDef.field;
+  return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
+    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.object.isRequired,
+  colIndex: PropTypes.number.isRequired,
+  columnMenuOpen: PropTypes.bool.isRequired,
+  disableReorder: PropTypes.bool,
+  filterItemsCounter: PropTypes.number,
+  hasFocus: PropTypes.bool,
+  headerHeight: PropTypes.number.isRequired,
+  isDragging: PropTypes.bool.isRequired,
+  isResizing: PropTypes.bool.isRequired,
+  separatorSide: PropTypes.oneOf(['left', 'right']),
+  sortDirection: PropTypes.oneOf(['asc', 'desc']),
+  sortIndex: PropTypes.number,
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired
+} : void 0;
+export { GridColumnHeaderItem };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnHeaderSeparator.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare enum GridColumnHeaderSeparatorSides {
+    Left = "left",
+    Right = "right"
+}
+export interface GridColumnHeaderSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+    resizable: boolean;
+    resizing: boolean;
+    height: number;
+    side?: GridColumnHeaderSeparatorSides;
+}
+declare function GridColumnHeaderSeparatorRaw(props: GridColumnHeaderSeparatorProps): React.JSX.Element;
+declare namespace GridColumnHeaderSeparatorRaw {
+    var propTypes: any;
+}
+declare const GridColumnHeaderSeparator: React.MemoExoticComponent<typeof GridColumnHeaderSeparatorRaw>;
+export { GridColumnHeaderSeparator, GridColumnHeaderSeparatorSides };

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

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["resizable", "resizing", "height", "side"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_capitalize as capitalize } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+var 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${capitalize(side)}`],
+    icon: ['iconSeparator']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+function GridColumnHeaderSeparatorRaw(props) {
+  const {
+      height,
+      side = GridColumnHeaderSeparatorSides.Right
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, 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
+    _jsx("div", _extends({
+      className: classes.root,
+      style: {
+        minHeight: height,
+        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
+      }
+    }, other, {
+      onClick: stopClick,
+      children: /*#__PURE__*/_jsx(rootProps.slots.columnResizeIcon, {
+        className: classes.icon
+      })
+    }))
+  );
+}
+const 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.number.isRequired,
+  resizable: PropTypes.bool.isRequired,
+  resizing: PropTypes.bool.isRequired,
+  side: PropTypes.oneOf(['left', 'right'])
+} : void 0;
+export { GridColumnHeaderSeparator, GridColumnHeaderSeparatorSides };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnHeaderSortIcon.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { GridSortDirection } from '../../models/gridSortModel';
+export interface GridColumnHeaderSortIconProps {
+    direction: GridSortDirection;
+    index: number | undefined;
+    sortingOrder: readonly GridSortDirection[];
+}
+declare function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps): React.JSX.Element | null;
+declare namespace GridColumnHeaderSortIconRaw {
+    var propTypes: any;
+}
+declare const GridColumnHeaderSortIcon: React.MemoExoticComponent<typeof GridColumnHeaderSortIconRaw>;
+export { GridColumnHeaderSortIcon };

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

@@ -0,0 +1,80 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import Badge from '@mui/material/Badge';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { GridIconButtonContainer } from './GridIconButtonContainer';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    icon: ['sortIcon']
+  };
+  return composeClasses(slots, 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__*/_jsx(Icon, _extends({
+    fontSize: "small",
+    className: className
+  }, iconProps)) : null;
+}
+function GridColumnHeaderSortIconRaw(props) {
+  var _rootProps$slotProps;
+  const {
+    direction,
+    index,
+    sortingOrder
+  } = props;
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, props, {
+    classes: rootProps.classes
+  });
+  const classes = useUtilityClasses(ownerState);
+  const iconElement = getIcon(rootProps.slots, direction, classes.icon, sortingOrder);
+  if (!iconElement) {
+    return null;
+  }
+  const iconButton = /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
+    tabIndex: -1,
+    "aria-label": apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    title: apiRef.current.getLocaleText('columnHeaderSortIconLabel'),
+    size: "small"
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseIconButton, {
+    children: iconElement
+  }));
+  return /*#__PURE__*/_jsxs(GridIconButtonContainer, {
+    children: [index != null && /*#__PURE__*/_jsx(Badge, {
+      badgeContent: index,
+      color: "default",
+      children: iconButton
+    }), index == null && iconButton]
+  });
+}
+const 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.oneOf(['asc', 'desc']),
+  index: PropTypes.number,
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired
+} : void 0;
+export { GridColumnHeaderSortIcon };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnHeaderTitle.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface GridColumnHeaderTitleProps {
+    label: string;
+    columnWidth: number;
+    description?: React.ReactNode;
+}
+declare function GridColumnHeaderTitle(props: GridColumnHeaderTitleProps): React.JSX.Element;
+declare namespace GridColumnHeaderTitle {
+    var propTypes: any;
+}
+export { GridColumnHeaderTitle };

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

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { isOverflown } from '../../utils/domUtils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeaderTitle']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridColumnHeaderTitleRoot = 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridColumnHeaderTitleRoot, _extends({
+    ref: ref,
+    className: clsx(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) {
+  var _rootProps$slotProps;
+  const {
+    label,
+    description
+  } = props;
+  const rootProps = useGridRootProps();
+  const titleRef = React.useRef(null);
+  const [tooltip, setTooltip] = React.useState('');
+  const handleMouseOver = React.useCallback(() => {
+    if (!description && titleRef != null && titleRef.current) {
+      const isOver = isOverflown(titleRef.current);
+      if (isOver) {
+        setTooltip(label);
+      } else {
+        setTooltip('');
+      }
+    }
+  }, [description, label]);
+  return /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, _extends({
+    title: description || tooltip
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTooltip, {
+    children: /*#__PURE__*/_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.number.isRequired,
+  description: PropTypes.node,
+  label: PropTypes.string.isRequired
+} : void 0;
+export { GridColumnHeaderTitle };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridColumnHeadersInner.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+interface GridColumnHeadersInnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    isDragging: boolean;
+    sx?: SxProps<Theme>;
+}
+export declare const GridColumnHeadersInner: React.ForwardRefExoticComponent<GridColumnHeadersInnerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,59 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["isDragging", "className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    isDragging,
+    hasScrollX,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['columnHeadersInner', isDragging && 'columnHeaderDropZone', hasScrollX && 'columnHeadersInner--scrollable']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridColumnHeadersInnerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'columnHeadersInner',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses.columnHeaderDropZone}`]: styles.columnHeaderDropZone
+  }, styles.columnHeadersInner]
+})(() => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  flexDirection: 'column',
+  [`&.${gridClasses.columnHeaderDropZone} .${gridClasses.columnHeaderDraggableContainer}`]: {
+    cursor: 'move'
+  },
+  [`&.${gridClasses['columnHeadersInner--scrollable']} .${gridClasses.columnHeader}:last-child`]: {
+    borderRight: 'none'
+  }
+}));
+export const GridColumnHeadersInner = /*#__PURE__*/React.forwardRef(function GridColumnHeadersInner(props, ref) {
+  var _apiRef$current$getRo, _apiRef$current$getRo2;
+  const {
+      isDragging,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = _extends({}, rootProps, {
+    isDragging,
+    hasScrollX: (_apiRef$current$getRo = (_apiRef$current$getRo2 = apiRef.current.getRootDimensions()) == null ? void 0 : _apiRef$current$getRo2.hasScrollX) != null ? _apiRef$current$getRo : false
+  });
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(GridColumnHeadersInnerRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root),
+    ownerState: ownerState
+  }, other));
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridGenericColumnHeaderItem.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { GridStateColDef } from '../../models/colDef/gridColDef';
+import { GridSortDirection } from '../../models/gridSortModel';
+import { GridColumnHeaderSeparatorProps } from './GridColumnHeaderSeparator';
+import { GridColumnGroup } from '../../models/gridColumnGrouping';
+interface GridGenericColumnHeaderItemProps extends Pick<GridStateColDef, 'headerClassName' | 'description' | 'resizable'> {
+    classes: Record<'root' | 'draggableContainer' | 'titleContainer' | 'titleContainerContent', string>;
+    colIndex: number;
+    columnMenuOpen: boolean;
+    height: number;
+    isResizing: boolean;
+    sortDirection: GridSortDirection;
+    sortIndex?: number;
+    filterItemsCounter?: number;
+    hasFocus?: boolean;
+    tabIndex: 0 | -1;
+    disableReorder?: boolean;
+    separatorSide?: GridColumnHeaderSeparatorProps['side'];
+    headerComponent?: React.ReactNode;
+    elementId: GridStateColDef['field'] | GridColumnGroup['groupId'];
+    isDraggable: boolean;
+    width: number;
+    columnMenuIconButton?: React.ReactNode;
+    columnMenu?: React.ReactNode;
+    columnTitleIconButtons?: React.ReactNode;
+    label: string;
+    draggableContainerProps?: Partial<React.HTMLProps<HTMLDivElement>>;
+    columnHeaderSeparatorProps?: Partial<GridColumnHeaderSeparatorProps>;
+}
+declare const GridGenericColumnHeaderItem: React.ForwardRefExoticComponent<GridGenericColumnHeaderItemProps & React.RefAttributes<unknown>>;
+export { GridGenericColumnHeaderItem };

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

@@ -0,0 +1,101 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["classes", "columnMenuOpen", "colIndex", "height", "isResizing", "sortDirection", "hasFocus", "tabIndex", "separatorSide", "isDraggable", "headerComponent", "description", "elementId", "width", "columnMenuIconButton", "columnMenu", "columnTitleIconButtons", "headerClassName", "label", "resizable", "draggableContainerProps", "columnHeaderSeparatorProps"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef } from '@mui/utils';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { GridColumnHeaderTitle } from './GridColumnHeaderTitle';
+import { GridColumnHeaderSeparator } from './GridColumnHeaderSeparator';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const 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 = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
+  const headerCellRef = React.useRef(null);
+  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
+  const handleRef = 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 == null || elementToFocus.focus();
+      apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
+    }
+  }, [apiRef, hasFocus]);
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: handleRef,
+    className: clsx(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__*/_jsxs("div", _extends({
+      className: classes.draggableContainer,
+      draggable: isDraggable,
+      role: "presentation"
+    }, draggableContainerProps, {
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classes.titleContainer,
+        role: "presentation",
+        children: [/*#__PURE__*/_jsx("div", {
+          className: classes.titleContainerContent,
+          children: headerComponent !== undefined ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
+            description: description,
+            columnWidth: width
+          })
+        }), columnTitleIconButtons]
+      }), columnMenuIconButton]
+    })), /*#__PURE__*/_jsx(GridColumnHeaderSeparator, _extends({
+      resizable: !rootProps.disableColumnResize && !!resizable,
+      resizing: isResizing,
+      height: height,
+      side: separatorSide
+    }, columnHeaderSeparatorProps)), columnMenu]
+  }));
+});
+export { GridGenericColumnHeaderItem };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/GridIconButtonContainer.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export type GridIconButtonContainerProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const GridIconButtonContainer: React.ForwardRefExoticComponent<GridIconButtonContainerProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['iconButtonContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridIconButtonContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'IconButtonContainer',
+  overridesResolver: (props, styles) => styles.iconButtonContainer
+})(() => ({
+  display: 'flex',
+  visibility: 'hidden',
+  width: 0
+}));
+export const GridIconButtonContainer = /*#__PURE__*/React.forwardRef(function GridIconButtonContainer(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridIconButtonContainerRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/columnHeaders/index.d.ts

@@ -0,0 +1,5 @@
+export * from './GridColumnHeaderItem';
+export * from './GridColumnHeaderSeparator';
+export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
+export * from './GridColumnHeaderTitle';

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

@@ -0,0 +1,5 @@
+export * from './GridColumnHeaderItem';
+export * from './GridColumnHeaderSeparator';
+export * from './GridColumnHeaderSortIcon';
+export * from './GridColumnHeaderFilterIconButton';
+export * from './GridColumnHeaderTitle';

control-plane-ui/node_modules/@mui/x-data-grid/components/columnSelection/GridCellCheckboxRenderer.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { GridRenderCellParams } from '../../models/params/gridCellParams';
+declare const GridCellCheckboxForwardRef: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;
+export { GridCellCheckboxForwardRef };
+export declare const GridCellCheckboxRenderer: React.ForwardRefExoticComponent<GridRenderCellParams<any, any, any, import("../..").GridTreeNodeWithRender> & React.RefAttributes<HTMLInputElement>>;

control-plane-ui/node_modules/@mui/x-data-grid/components/columnSelection/GridCellCheckboxRenderer.js

@@ -0,0 +1,158 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["field", "id", "value", "formattedValue", "row", "rowNode", "colDef", "isEditable", "cellMode", "hasFocus", "tabIndex", "api"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses, unstable_useForkRef as useForkRef } from '@mui/utils';
+import { isSpaceKey } from '../../utils/keyboardUtils';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['checkboxInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCellCheckboxRenderer(props, ref) {
+  var _rootProps$slotProps;
+  const {
+      field,
+      id,
+      value: isChecked,
+      rowNode,
+      hasFocus,
+      tabIndex
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const checkboxElement = React.useRef(null);
+  const rippleRef = React.useRef(null);
+  const handleRef = useForkRef(checkboxElement, ref);
+  const element = apiRef.current.getCellElement(id, field);
+  const handleChange = event => {
+    const params = {
+      value: event.target.checked,
+      id
+    };
+    apiRef.current.publishEvent('rowSelectionCheckboxChange', params, event);
+  };
+  React.useLayoutEffect(() => {
+    if (tabIndex === 0 && element) {
+      element.tabIndex = -1;
+    }
+  }, [element, tabIndex]);
+  React.useEffect(() => {
+    if (hasFocus) {
+      var _checkboxElement$curr;
+      const input = (_checkboxElement$curr = checkboxElement.current) == null ? void 0 : _checkboxElement$curr.querySelector('input');
+      input == null || input.focus({
+        preventScroll: true
+      });
+    } else if (rippleRef.current) {
+      // Only available in @mui/material v5.4.1 or later
+      rippleRef.current.stop({});
+    }
+  }, [hasFocus]);
+  const handleKeyDown = React.useCallback(event => {
+    if (isSpaceKey(event.key)) {
+      // We call event.stopPropagation to avoid selecting the row and also scrolling to bottom
+      // TODO: Remove and add a check inside useGridKeyboardNavigation
+      event.stopPropagation();
+    }
+  }, []);
+  if (rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
+    return null;
+  }
+  const isSelectable = apiRef.current.isRowSelectable(id);
+  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+    ref: handleRef,
+    tabIndex: tabIndex,
+    checked: isChecked,
+    onChange: handleChange,
+    className: classes.root,
+    inputProps: {
+      'aria-label': label
+    },
+    onKeyDown: handleKeyDown,
+    disabled: !isSelectable,
+    touchRippleRef: rippleRef
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
+});
+process.env.NODE_ENV !== "production" ? GridCellCheckboxForwardRef.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: PropTypes.object.isRequired,
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.any.isRequired,
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+  /**
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
+   */
+  value: PropTypes.any
+} : void 0;
+export { GridCellCheckboxForwardRef };
+export const GridCellCheckboxRenderer = GridCellCheckboxForwardRef;

control-plane-ui/node_modules/@mui/x-data-grid/components/columnSelection/GridHeaderCheckbox.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { GridColumnHeaderParams } from '../../models/params/gridColumnHeaderParams';
+declare const GridHeaderCheckbox: React.ForwardRefExoticComponent<GridColumnHeaderParams<import("../../models/gridRows").GridValidRowModel, any, any> & React.RefAttributes<HTMLInputElement>>;
+export { GridHeaderCheckbox };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnSelection/GridHeaderCheckbox.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["field", "colDef"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { gridTabIndexColumnHeaderSelector } from '../../hooks/features/focus/gridFocusStateSelector';
+import { gridRowSelectionStateSelector } from '../../hooks/features/rowSelection/gridRowSelectionSelector';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { gridExpandedSortedRowIdsSelector } from '../../hooks/features/filter/gridFilterSelector';
+import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../../hooks/features/pagination/gridPaginationSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['checkboxInput']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckbox(props, ref) {
+  var _rootProps$slotProps;
+  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const [, forceUpdate] = React.useState(false);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const tabIndexState = useGridSelector(apiRef, gridTabIndexColumnHeaderSelector);
+  const selection = useGridSelector(apiRef, gridRowSelectionStateSelector);
+  const visibleRowIds = useGridSelector(apiRef, gridExpandedSortedRowIdsSelector);
+  const paginatedVisibleRowIds = useGridSelector(apiRef, gridPaginatedVisibleSortedGridRowIdsSelector);
+  const filteredSelection = React.useMemo(() => {
+    if (typeof rootProps.isRowSelectable !== 'function') {
+      return selection;
+    }
+    return selection.filter(id => {
+      // The row might have been deleted
+      if (!apiRef.current.getRow(id)) {
+        return false;
+      }
+      return rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+    });
+  }, [apiRef, rootProps.isRowSelectable, selection]);
+
+  // All the rows that could be selected / unselected by toggling this checkbox
+  const selectionCandidates = React.useMemo(() => {
+    const rowIds = !rootProps.pagination || !rootProps.checkboxSelectionVisibleOnly ? visibleRowIds : paginatedVisibleRowIds;
+
+    // Convert to an object to make O(1) checking if a row exists or not
+    // TODO create selector that returns visibleRowIds/paginatedVisibleRowIds as an object
+    return rowIds.reduce((acc, id) => {
+      acc[id] = true;
+      return acc;
+    }, {});
+  }, [rootProps.pagination, rootProps.checkboxSelectionVisibleOnly, paginatedVisibleRowIds, visibleRowIds]);
+
+  // Amount of rows selected and that are visible in the current page
+  const currentSelectionSize = React.useMemo(() => filteredSelection.filter(id => selectionCandidates[id]).length, [filteredSelection, selectionCandidates]);
+  const isIndeterminate = currentSelectionSize > 0 && currentSelectionSize < Object.keys(selectionCandidates).length;
+  const isChecked = currentSelectionSize > 0;
+  const handleChange = event => {
+    const params = {
+      value: event.target.checked
+    };
+    apiRef.current.publishEvent('headerSelectionCheckboxChange', params);
+  };
+  const tabIndex = tabIndexState !== null && tabIndexState.field === props.field ? 0 : -1;
+  React.useLayoutEffect(() => {
+    const element = apiRef.current.getColumnHeaderElement(props.field);
+    if (tabIndex === 0 && element) {
+      element.tabIndex = -1;
+    }
+  }, [tabIndex, apiRef, props.field]);
+  const handleKeyDown = React.useCallback(event => {
+    if (event.key === ' ') {
+      // imperative toggle the checkbox because Space is disable by some preventDefault
+      apiRef.current.publishEvent('headerSelectionCheckboxChange', {
+        value: !isChecked
+      });
+    }
+  }, [apiRef, isChecked]);
+  const handleSelectionChange = React.useCallback(() => {
+    forceUpdate(p => !p);
+  }, []);
+  React.useEffect(() => {
+    return apiRef.current.subscribeEvent('rowSelectionChange', handleSelectionChange);
+  }, [apiRef, handleSelectionChange]);
+  const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectAllRows' : 'checkboxSelectionSelectAllRows');
+  return /*#__PURE__*/_jsx(rootProps.slots.baseCheckbox, _extends({
+    ref: ref,
+    indeterminate: isIndeterminate,
+    checked: isChecked,
+    onChange: handleChange,
+    className: classes.root,
+    inputProps: {
+      'aria-label': label
+    },
+    tabIndex: tabIndex,
+    onKeyDown: handleKeyDown
+  }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseCheckbox, other));
+});
+process.env.NODE_ENV !== "production" ? GridHeaderCheckbox.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The column of the current header component.
+   */
+  colDef: PropTypes.object.isRequired,
+  /**
+   * The column field of the column that triggered the event
+   */
+  field: PropTypes.string.isRequired
+} : void 0;
+export { GridHeaderCheckbox };

control-plane-ui/node_modules/@mui/x-data-grid/components/columnSelection/index.d.ts

@@ -0,0 +1,2 @@
+export * from './GridCellCheckboxRenderer';
+export * from './GridHeaderCheckbox';

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

@@ -0,0 +1,2 @@
+export * from './GridCellCheckboxRenderer';
+export * from './GridHeaderCheckbox';

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridFooterContainer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+export type GridFooterContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridFooterContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridFooterContainer };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridFooterContainer.js

@@ -0,0 +1,52 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['footerContainer', 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridFooterContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'FooterContainer',
+  overridesResolver: (props, styles) => styles.footerContainer
+})({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  minHeight: 52,
+  borderTop: '1px solid'
+});
+const GridFooterContainer = /*#__PURE__*/React.forwardRef(function GridFooterContainer(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridFooterContainerRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? GridFooterContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridFooterContainer };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridMainContainer.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const GridMainContainer: React.ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridMainContainer.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['main']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridMainContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Main',
+  overridesResolver: (props, styles) => styles.main
+})(() => ({
+  position: 'relative',
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden'
+}));
+export const GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _rootProps$experiment;
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? useGridAriaAttributes : null;
+  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  return /*#__PURE__*/_jsx(GridMainContainerRoot, _extends({
+    ref: ref,
+    className: classes.root,
+    ownerState: rootProps
+  }, ariaAttributes, {
+    children: props.children
+  }));
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridOverlay.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Theme, SxProps } from '@mui/system';
+export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridOverlay: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridOverlay.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { styled } from '@mui/system';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['overlay']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridOverlayRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Overlay',
+  overridesResolver: (_, styles) => styles.overlay
+})({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignSelf: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'var(--unstable_DataGrid-overlayBackground)'
+});
+const GridOverlay = /*#__PURE__*/React.forwardRef(function GridOverlay(props, ref) {
+  const {
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  return /*#__PURE__*/_jsx(GridOverlayRoot, _extends({
+    ref: ref,
+    className: clsx(classes.root, className),
+    ownerState: rootProps
+  }, other));
+});
+process.env.NODE_ENV !== "production" ? GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridOverlay };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridRoot.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material/styles';
+export interface GridRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+}
+declare const GridRoot: React.ForwardRefExoticComponent<GridRootProps & React.RefAttributes<HTMLDivElement>>;
+export { GridRoot };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridRoot.js

@@ -0,0 +1,76 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["children", "className"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_capitalize as capitalize, unstable_composeClasses as composeClasses } from '@mui/utils';
+import { GridRootStyles } from './GridRootStyles';
+import { useGridSelector } from '../../hooks/utils/useGridSelector';
+import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridDensityValueSelector } from '../../hooks/features/density/densitySelector';
+import { useGridAriaAttributes } from '../../hooks/utils/useGridAriaAttributes';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    autoHeight,
+    density,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', autoHeight && 'autoHeight', `root--density${capitalize(density)}`, 'withBorderColor']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridRoot = /*#__PURE__*/React.forwardRef(function GridRoot(props, ref) {
+  var _rootProps$experiment;
+  const rootProps = useGridRootProps();
+  const {
+      children,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridPrivateApiContext();
+  const densityValue = useGridSelector(apiRef, gridDensityValueSelector);
+  const rootContainerRef = React.useRef(null);
+  const handleRef = useForkRef(rootContainerRef, ref);
+  const getAriaAttributes = (_rootProps$experiment = rootProps.experimentalFeatures) != null && _rootProps$experiment.ariaV7 // ariaV7 should never change
+  ? null : useGridAriaAttributes;
+  const ariaAttributes = typeof getAriaAttributes === 'function' ? getAriaAttributes() : null;
+  const ownerState = _extends({}, rootProps, {
+    density: densityValue
+  });
+  const classes = useUtilityClasses(ownerState);
+  apiRef.current.register('public', {
+    rootElementRef: rootContainerRef
+  });
+
+  // Our implementation of <NoSsr />
+  const [mountedState, setMountedState] = React.useState(false);
+  useEnhancedEffect(() => {
+    setMountedState(true);
+  }, []);
+  if (!mountedState) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridRootStyles, _extends({
+    ref: handleRef,
+    className: clsx(className, classes.root),
+    ownerState: ownerState
+  }, ariaAttributes, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridRoot.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridRoot };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridRootStyles.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Theme } from '@mui/material/styles';
+import { DataGridProcessedProps } from '../../models/props/DataGridProps';
+export type OwnerState = DataGridProcessedProps;
+export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme> & {
+    ownerState: OwnerState;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridRootStyles.js

@@ -0,0 +1,523 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { alpha, styled, darken, lighten } from '@mui/material/styles';
+import { gridClasses } from '../../constants/gridClasses';
+function getBorderColor(theme) {
+  if (theme.vars) {
+    return theme.vars.palette.TableCell.border;
+  }
+  if (theme.palette.mode === 'light') {
+    return lighten(alpha(theme.palette.divider, 1), 0.88);
+  }
+  return darken(alpha(theme.palette.divider, 1), 0.68);
+}
+const columnHeadersStyles = {
+  [`.${gridClasses.columnSeparator}, .${gridClasses['columnSeparator--resizing']}`]: {
+    visibility: 'visible',
+    width: 'auto'
+  }
+};
+const columnHeaderStyles = {
+  [`& .${gridClasses.iconButtonContainer}`]: {
+    visibility: 'visible',
+    width: 'auto'
+  },
+  [`& .${gridClasses.menuIcon}`]: {
+    width: 'auto',
+    visibility: 'visible'
+  }
+};
+export const GridRootStyles = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`&.${gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+  }, {
+    [`&.${gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
+  }, {
+    [`&.${gridClasses['root--disableUserSelection']} .${gridClasses.cell}`]: styles['root--disableUserSelection']
+  }, {
+    [`&.${gridClasses.autosizing}`]: styles.autosizing
+  }, {
+    [`& .${gridClasses.editBooleanCell}`]: styles.editBooleanCell
+  }, {
+    [`& .${gridClasses['cell--editing']}`]: styles['cell--editing']
+  }, {
+    [`& .${gridClasses['cell--textCenter']}`]: styles['cell--textCenter']
+  }, {
+    [`& .${gridClasses['cell--textLeft']}`]: styles['cell--textLeft']
+  }, {
+    [`& .${gridClasses['cell--textRight']}`]: styles['cell--textRight']
+  },
+  // TODO v6: Remove
+  {
+    [`& .${gridClasses['cell--withRenderer']}`]: styles['cell--withRenderer']
+  }, {
+    [`& .${gridClasses.cell}`]: styles.cell
+  }, {
+    [`& .${gridClasses['cell--rangeTop']}`]: styles['cell--rangeTop']
+  }, {
+    [`& .${gridClasses['cell--rangeBottom']}`]: styles['cell--rangeBottom']
+  }, {
+    [`& .${gridClasses['cell--rangeLeft']}`]: styles['cell--rangeLeft']
+  }, {
+    [`& .${gridClasses['cell--rangeRight']}`]: styles['cell--rangeRight']
+  }, {
+    [`& .${gridClasses['cell--withRightBorder']}`]: styles['cell--withRightBorder']
+  }, {
+    [`& .${gridClasses.cellContent}`]: styles.cellContent
+  }, {
+    [`& .${gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${gridClasses.cellSkeleton}`]: styles.cellSkeleton
+  }, {
+    [`& .${gridClasses.checkboxInput}`]: styles.checkboxInput
+  }, {
+    [`& .${gridClasses['columnHeader--alignCenter']}`]: styles['columnHeader--alignCenter']
+  }, {
+    [`& .${gridClasses['columnHeader--alignLeft']}`]: styles['columnHeader--alignLeft']
+  }, {
+    [`& .${gridClasses['columnHeader--alignRight']}`]: styles['columnHeader--alignRight']
+  }, {
+    [`& .${gridClasses['columnHeader--dragging']}`]: styles['columnHeader--dragging']
+  }, {
+    [`& .${gridClasses['columnHeader--moving']}`]: styles['columnHeader--moving']
+  }, {
+    [`& .${gridClasses['columnHeader--numeric']}`]: styles['columnHeader--numeric']
+  }, {
+    [`& .${gridClasses['columnHeader--sortable']}`]: styles['columnHeader--sortable']
+  }, {
+    [`& .${gridClasses['columnHeader--sorted']}`]: styles['columnHeader--sorted']
+  }, {
+    [`& .${gridClasses['columnHeader--withRightBorder']}`]: styles['columnHeader--withRightBorder']
+  }, {
+    [`& .${gridClasses.columnHeader}`]: styles.columnHeader
+  }, {
+    [`& .${gridClasses.headerFilterRow}`]: styles.headerFilterRow
+  }, {
+    [`& .${gridClasses.columnHeaderCheckbox}`]: styles.columnHeaderCheckbox
+  }, {
+    [`& .${gridClasses.columnHeaderDraggableContainer}`]: styles.columnHeaderDraggableContainer
+  }, {
+    [`& .${gridClasses.columnHeaderTitleContainer}`]: styles.columnHeaderTitleContainer
+  }, {
+    [`& .${gridClasses['columnSeparator--resizable']}`]: styles['columnSeparator--resizable']
+  }, {
+    [`& .${gridClasses['columnSeparator--resizing']}`]: styles['columnSeparator--resizing']
+  }, {
+    [`& .${gridClasses.columnSeparator}`]: styles.columnSeparator
+  }, {
+    [`& .${gridClasses.filterIcon}`]: styles.filterIcon
+  }, {
+    [`& .${gridClasses.iconSeparator}`]: styles.iconSeparator
+  }, {
+    [`& .${gridClasses.menuIcon}`]: styles.menuIcon
+  }, {
+    [`& .${gridClasses.menuIconButton}`]: styles.menuIconButton
+  }, {
+    [`& .${gridClasses.menuOpen}`]: styles.menuOpen
+  }, {
+    [`& .${gridClasses.menuList}`]: styles.menuList
+  }, {
+    [`& .${gridClasses['row--editable']}`]: styles['row--editable']
+  }, {
+    [`& .${gridClasses['row--editing']}`]: styles['row--editing']
+  }, {
+    [`& .${gridClasses['row--dragging']}`]: styles['row--dragging']
+  }, {
+    [`& .${gridClasses.row}`]: styles.row
+  }, {
+    [`& .${gridClasses.rowReorderCellPlaceholder}`]: styles.rowReorderCellPlaceholder
+  }, {
+    [`& .${gridClasses.rowReorderCell}`]: styles.rowReorderCell
+  }, {
+    [`& .${gridClasses['rowReorderCell--draggable']}`]: styles['rowReorderCell--draggable']
+  }, {
+    [`& .${gridClasses.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${gridClasses.withBorderColor}`]: styles.withBorderColor
+  }, {
+    [`& .${gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, styles.root]
+})(({
+  theme
+}) => {
+  const borderColor = getBorderColor(theme);
+  const radius = theme.shape.borderRadius;
+  const gridStyle = _extends({
+    '--unstable_DataGrid-radius': typeof radius === 'number' ? `${radius}px` : radius,
+    '--unstable_DataGrid-headWeight': theme.typography.fontWeightMedium,
+    '--unstable_DataGrid-overlayBackground': theme.vars ? `rgba(${theme.vars.palette.background.defaultChannel} / ${theme.vars.palette.action.disabledOpacity})` : alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
+    '--DataGrid-cellOffsetMultiplier': 2,
+    flex: 1,
+    boxSizing: 'border-box',
+    position: 'relative',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor,
+    borderRadius: 'var(--unstable_DataGrid-radius)',
+    color: (theme.vars || theme).palette.text.primary
+  }, theme.typography.body2, {
+    outline: 'none',
+    height: '100%',
+    display: 'flex',
+    minWidth: 0,
+    // See https://github.com/mui/mui-x/issues/8547
+    minHeight: 0,
+    flexDirection: 'column',
+    overflowAnchor: 'none',
+    // Keep the same scrolling position
+    [`&.${gridClasses.autoHeight}`]: {
+      height: 'auto',
+      [`& .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
+        borderBottomColor: 'transparent'
+      }
+    },
+    [`&.${gridClasses.autosizing}`]: {
+      [`& .${gridClasses.columnHeaderTitleContainerContent} > *`]: {
+        overflow: 'visible !important'
+      },
+      [`& .${gridClasses.cell} > *`]: {
+        overflow: 'visible !important',
+        whiteSpace: 'nowrap'
+      },
+      [`& .${gridClasses.groupingCriteriaCell}`]: {
+        width: 'unset'
+      },
+      [`& .${gridClasses.treeDataGroupingCell}`]: {
+        width: 'unset'
+      }
+    },
+    [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
+      borderBottomColor: 'transparent'
+    },
+    [`& .${gridClasses.columnHeader}, & .${gridClasses.cell}`]: {
+      WebkitTapHighlightColor: 'transparent',
+      lineHeight: null,
+      padding: '0 10px',
+      boxSizing: 'border-box'
+    },
+    [`& .${gridClasses.columnHeader}:focus-within, & .${gridClasses.cell}:focus-within`]: {
+      outline: `solid ${theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.5)` : alpha(theme.palette.primary.main, 0.5)} 1px`,
+      outlineWidth: 1,
+      outlineOffset: -1
+    },
+    [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.cell}:focus`]: {
+      outline: `solid ${theme.palette.primary.main} 1px`
+    },
+    [`& .${gridClasses.columnHeaderCheckbox}, & .${gridClasses.cellCheckbox}`]: {
+      padding: 0,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    [`& .${gridClasses.columnHeader}`]: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    [`& .${gridClasses['columnHeader--sorted']} .${gridClasses.iconButtonContainer}, & .${gridClasses['columnHeader--filtered']} .${gridClasses.iconButtonContainer}`]: {
+      visibility: 'visible',
+      width: 'auto'
+    },
+    [`& .${gridClasses.columnHeader}:not(.${gridClasses['columnHeader--sorted']}) .${gridClasses.sortIcon}`]: {
+      opacity: 0,
+      transition: theme.transitions.create(['opacity'], {
+        duration: theme.transitions.duration.shorter
+      })
+    },
+    [`& .${gridClasses.columnHeaderTitleContainer}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      flex: 1,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      // to anchor the aggregation label
+      position: 'relative'
+    },
+    [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
+      overflow: 'hidden',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    [`& .${gridClasses['columnHeader--filledGroup']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      borderBottomWidth: '1px',
+      borderBottomStyle: 'solid',
+      boxSizing: 'border-box'
+    },
+    [`& .${gridClasses['columnHeader--filledGroup']}.${gridClasses['columnHeader--showColumnBorder']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      borderBottom: `none`
+    },
+    [`& .${gridClasses['columnHeader--filledGroup']}.${gridClasses['columnHeader--showColumnBorder']}`]: {
+      borderBottomWidth: '1px',
+      borderBottomStyle: 'solid',
+      boxSizing: 'border-box'
+    },
+    [`& .${gridClasses.headerFilterRow}`]: {
+      borderTop: `1px solid ${borderColor}`
+    },
+    [`& .${gridClasses.sortIcon}, & .${gridClasses.filterIcon}`]: {
+      fontSize: 'inherit'
+    },
+    [`& .${gridClasses['columnHeader--sortable']}`]: {
+      cursor: 'pointer'
+    },
+    [`& .${gridClasses['columnHeader--alignCenter']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      justifyContent: 'center'
+    },
+    [`& .${gridClasses['columnHeader--alignRight']} .${gridClasses.columnHeaderDraggableContainer}, & .${gridClasses['columnHeader--alignRight']} .${gridClasses.columnHeaderTitleContainer}`]: {
+      flexDirection: 'row-reverse'
+    },
+    [`& .${gridClasses['columnHeader--alignCenter']} .${gridClasses.menuIcon}, & .${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}`]: {
+      marginRight: 'auto',
+      marginLeft: -6
+    },
+    [`& .${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}, & .${gridClasses['columnHeader--alignRight']} .${gridClasses.menuIcon}`]: {
+      marginRight: 'auto',
+      marginLeft: -10
+    },
+    [`& .${gridClasses['columnHeader--moving']}`]: {
+      backgroundColor: (theme.vars || theme).palette.action.hover
+    },
+    [`& .${gridClasses.columnSeparator}`]: {
+      visibility: 'hidden',
+      position: 'absolute',
+      zIndex: 100,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      color: borderColor
+    },
+    '@media (hover: hover)': {
+      [`& .${gridClasses.columnHeaders}:hover`]: columnHeadersStyles,
+      [`& .${gridClasses.columnHeader}:hover`]: columnHeaderStyles,
+      [`& .${gridClasses.columnHeader}:not(.${gridClasses['columnHeader--sorted']}):hover .${gridClasses.sortIcon}`]: {
+        opacity: 0.5
+      }
+    },
+    '@media (hover: none)': {
+      [`& .${gridClasses.columnHeaders}`]: columnHeadersStyles,
+      [`& .${gridClasses.columnHeader}`]: columnHeaderStyles
+    },
+    [`& .${gridClasses['columnSeparator--sideLeft']}`]: {
+      left: -12
+    },
+    [`& .${gridClasses['columnSeparator--sideRight']}`]: {
+      right: -12
+    },
+    [`& .${gridClasses['columnSeparator--resizable']}`]: {
+      cursor: 'col-resize',
+      touchAction: 'none',
+      '&:hover': {
+        color: (theme.vars || theme).palette.text.primary,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          color: borderColor
+        }
+      },
+      [`&.${gridClasses['columnSeparator--resizing']}`]: {
+        color: (theme.vars || theme).palette.text.primary
+      },
+      '& svg': {
+        pointerEvents: 'none'
+      }
+    },
+    [`& .${gridClasses.iconSeparator}`]: {
+      color: 'inherit'
+    },
+    [`& .${gridClasses.menuIcon}`]: {
+      width: 0,
+      visibility: 'hidden',
+      fontSize: 20,
+      marginRight: -10,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    [`.${gridClasses.menuOpen}`]: {
+      visibility: 'visible',
+      width: 'auto'
+    },
+    [`& .${gridClasses.row}`]: {
+      display: 'flex',
+      width: 'fit-content',
+      breakInside: 'avoid',
+      // Avoid the row to be broken in two different print pages.
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: (theme.vars || theme).palette.action.hover,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+        '&:hover, &.Mui-hovered': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(
+                ${theme.vars.palette.action.selectedOpacity} + 
+                ${theme.vars.palette.action.hoverOpacity}
+              ))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+          }
+        }
+      }
+    },
+    [`& .${gridClasses.cell}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      borderBottom: '1px solid',
+      '&.Mui-selected': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+        '&:hover, &.Mui-hovered': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity + theme.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+          }
+        }
+      }
+    },
+    [`&.${gridClasses['root--disableUserSelection']} .${gridClasses.cell}`]: {
+      userSelect: 'none'
+    },
+    [`& .${gridClasses.row}:not(.${gridClasses['row--dynamicHeight']}) > .${gridClasses.cell}`]: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap'
+    },
+    [`& .${gridClasses.cellContent}`]: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    [`& .${gridClasses.cell}.${gridClasses['cell--selectionMode']}`]: {
+      cursor: 'default'
+    },
+    [`& .${gridClasses.cell}.${gridClasses['cell--editing']}`]: {
+      padding: 1,
+      display: 'flex',
+      boxShadow: theme.shadows[2],
+      backgroundColor: (theme.vars || theme).palette.background.paper,
+      '&:focus-within': {
+        outline: `solid ${(theme.vars || theme).palette.primary.main} 1px`,
+        outlineOffset: '-1px'
+      }
+    },
+    [`& .${gridClasses['row--editing']}`]: {
+      boxShadow: theme.shadows[2]
+    },
+    [`& .${gridClasses['row--editing']} .${gridClasses.cell}`]: {
+      boxShadow: theme.shadows[0],
+      backgroundColor: (theme.vars || theme).palette.background.paper
+    },
+    [`& .${gridClasses.editBooleanCell}`]: {
+      display: 'flex',
+      height: '100%',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    [`& .${gridClasses.booleanCell}[data-value="true"]`]: {
+      color: (theme.vars || theme).palette.text.secondary
+    },
+    [`& .${gridClasses.booleanCell}[data-value="false"]`]: {
+      color: (theme.vars || theme).palette.text.disabled
+    },
+    [`& .${gridClasses.actionsCell}`]: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gridGap: theme.spacing(1)
+    },
+    [`& .${gridClasses.rowReorderCell}`]: {
+      display: 'inline-flex',
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
+    },
+    [`& .${gridClasses['rowReorderCell--draggable']}`]: {
+      cursor: 'move',
+      opacity: 1
+    },
+    [`& .${gridClasses.rowReorderCellContainer}`]: {
+      padding: 0,
+      alignItems: 'stretch'
+    },
+    [`.${gridClasses.withBorderColor}`]: {
+      borderColor
+    },
+    [`& .${gridClasses['cell--withRightBorder']}`]: {
+      borderRightWidth: '1px',
+      borderRightStyle: 'solid'
+    },
+    [`& .${gridClasses['columnHeader--withRightBorder']}`]: {
+      borderRightWidth: '1px',
+      borderRightStyle: 'solid'
+    },
+    [`& .${gridClasses['cell--textLeft']}`]: {
+      justifyContent: 'flex-start'
+    },
+    [`& .${gridClasses['cell--textRight']}`]: {
+      justifyContent: 'flex-end'
+    },
+    [`& .${gridClasses['cell--textCenter']}`]: {
+      justifyContent: 'center'
+    },
+    [`& .${gridClasses.columnHeaderDraggableContainer}`]: {
+      display: 'flex',
+      width: '100%',
+      height: '100%'
+    },
+    [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
+      display: 'none'
+    },
+    [`& .${gridClasses['columnHeader--dragging']}, & .${gridClasses['row--dragging']}`]: {
+      background: (theme.vars || theme).palette.background.paper,
+      padding: '0 12px',
+      borderRadius: 'var(--unstable_DataGrid-radius)',
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
+    },
+    [`& .${gridClasses['row--dragging']}`]: {
+      background: (theme.vars || theme).palette.background.paper,
+      padding: '0 12px',
+      borderRadius: 'var(--unstable_DataGrid-radius)',
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
+      [`& .${gridClasses.rowReorderCellPlaceholder}`]: {
+        display: 'flex'
+      }
+    },
+    [`& .${gridClasses.treeDataGroupingCell}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%'
+    },
+    [`& .${gridClasses.treeDataGroupingCellToggle}`]: {
+      flex: '0 0 28px',
+      alignSelf: 'stretch',
+      marginRight: theme.spacing(2)
+    },
+    [`& .${gridClasses.groupingCriteriaCell}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%'
+    },
+    [`& .${gridClasses.groupingCriteriaCellToggle}`]: {
+      flex: '0 0 28px',
+      alignSelf: 'stretch',
+      marginRight: theme.spacing(2)
+    }
+  });
+  return gridStyle;
+});

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridToolbarContainer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/system';
+export type GridToolbarContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme>;
+};
+declare const GridToolbarContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export { GridToolbarContainer };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/GridToolbarContainer.js

@@ -0,0 +1,60 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["className", "children"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled } from '@mui/system';
+import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['toolbarContainer']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridToolbarContainerRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ToolbarContainer',
+  overridesResolver: (_, styles) => styles.toolbarContainer
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  gap: theme.spacing(1),
+  padding: theme.spacing(0.5, 0.5, 0)
+}));
+const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+  const {
+      className,
+      children
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root),
+    ownerState: rootProps
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? GridToolbarContainer.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
+export { GridToolbarContainer };

control-plane-ui/node_modules/@mui/x-data-grid/components/containers/index.d.ts

@@ -0,0 +1,4 @@
+export * from './GridRoot';
+export * from './GridFooterContainer';
+export * from './GridOverlay';
+export * from './GridToolbarContainer';

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

@@ -0,0 +1,4 @@
+export * from './GridRoot';
+export * from './GridFooterContainer';
+export * from './GridOverlay';
+export * from './GridToolbarContainer';

control-plane-ui/node_modules/@mui/x-data-grid/components/index.d.ts

@@ -0,0 +1,18 @@
+export * from './base';
+export * from './cell';
+export * from './containers';
+export * from './columnHeaders';
+export * from './columnSelection';
+export * from '../material/icons';
+export * from './menu';
+export * from './panel';
+export * from './toolbar';
+export * from './GridApiContext';
+export * from './GridFooter';
+export * from './GridHeader';
+export * from './GridLoadingOverlay';
+export * from './GridNoRowsOverlay';
+export * from './GridPagination';
+export * from './GridRowCount';
+export * from './GridRow';
+export * from './GridSelectedRowCount';

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

@@ -0,0 +1,18 @@
+export * from './base';
+export * from './cell';
+export * from './containers';
+export * from './columnHeaders';
+export * from './columnSelection';
+export * from '../material/icons';
+export * from './menu';
+export * from './panel';
+export * from './toolbar';
+export * from './GridApiContext';
+export * from './GridFooter';
+export * from './GridHeader';
+export * from './GridLoadingOverlay';
+export * from './GridNoRowsOverlay';
+export * from './GridPagination';
+export * from './GridRowCount';
+export * from './GridRow';
+export * from './GridSelectedRowCount';

control-plane-ui/node_modules/@mui/x-data-grid/components/menu/GridMenu.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { GrowProps } from '@mui/material/Grow';
+import { PopperProps } from '@mui/material/Popper';
+type MenuPosition = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | undefined;
+export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
+    open: boolean;
+    target: HTMLElement | null;
+    onClose: (event?: Event) => void;
+    position?: MenuPosition;
+    onExited?: GrowProps['onExited'];
+    children: React.ReactNode;
+}
+declare function GridMenu(props: GridMenuProps): React.JSX.Element;
+declare namespace GridMenu {
+    var propTypes: any;
+}
+export { GridMenu };

control-plane-ui/node_modules/@mui/x-data-grid/components/menu/GridMenu.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["open", "target", "onClose", "children", "position", "className", "onExited"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { unstable_composeClasses as composeClasses, unstable_useEnhancedEffect as useEnhancedEffect, HTMLElementType } from '@mui/utils';
+import Grow from '@mui/material/Grow';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import { styled } from '@mui/material/styles';
+import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
+import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['menu']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+const GridMenuRoot = styled(Popper, {
+  name: 'MuiDataGrid',
+  slot: 'Menu',
+  overridesResolver: (_, styles) => styles.menu
+})(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal,
+  [`& .${gridClasses.menuList}`]: {
+    outline: 0
+  }
+}));
+const transformOrigin = {
+  'bottom-start': 'top left',
+  'bottom-end': 'top right'
+};
+function GridMenu(props) {
+  var _rootProps$slotProps;
+  const {
+      open,
+      target,
+      onClose,
+      children,
+      position,
+      className,
+      onExited
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const classes = useUtilityClasses(rootProps);
+  const savedFocusRef = React.useRef(null);
+  useEnhancedEffect(() => {
+    if (open) {
+      savedFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    } else {
+      var _savedFocusRef$curren, _savedFocusRef$curren2;
+      (_savedFocusRef$curren = savedFocusRef.current) == null || (_savedFocusRef$curren2 = _savedFocusRef$curren.focus) == null || _savedFocusRef$curren2.call(_savedFocusRef$curren);
+      savedFocusRef.current = null;
+    }
+  }, [open]);
+  React.useEffect(() => {
+    // Emit menuOpen or menuClose events
+    const eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target
+    });
+  }, [apiRef, open, target]);
+  const handleExited = popperOnExited => node => {
+    if (popperOnExited) {
+      popperOnExited();
+    }
+    if (onExited) {
+      onExited(node);
+    }
+  };
+  const handleClickAway = event => {
+    if (event.target && (target === event.target || target != null && target.contains(event.target))) {
+      return;
+    }
+    onClose(event);
+  };
+  return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
+    as: rootProps.slots.basePopper,
+    className: clsx(className, classes.root),
+    ownerState: rootProps,
+    open: open,
+    anchorEl: target,
+    transition: true,
+    placement: position
+  }, other, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.basePopper, {
+    children: ({
+      TransitionProps,
+      placement
+    }) => /*#__PURE__*/_jsx(ClickAwayListener, {
+      onClickAway: handleClickAway,
+      mouseEvent: "onMouseDown",
+      children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
+        style: {
+          transformOrigin: transformOrigin[placement]
+        },
+        onExited: handleExited(TransitionProps == null ? void 0 : TransitionProps.onExited),
+        children: /*#__PURE__*/_jsx(Paper, {
+          children: children
+        })
+      }))
+    })
+  }));
+}
+process.env.NODE_ENV !== "production" ? GridMenu.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  children: PropTypes.node,
+  onClose: PropTypes.func.isRequired,
+  onExited: PropTypes.func,
+  /**
+   * If `true`, the component is shown.
+   */
+  open: PropTypes.bool.isRequired,
+  position: PropTypes.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
+  target: HTMLElementType
+} : void 0;
+export { GridMenu };