@mui/x-data-grid 5.4.0 → 5.6.0

package/modern/components/containers/GridRootStyles.js

@@ -0,0 +1,357 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { darken, lighten, alpha, styled } from '@mui/material/styles';
+import { gridClasses } from '../../constants/gridClasses';
+export const GridRootStyles = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'Root',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`& .${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.cellContent}`]: styles.cellContent
+  }, {
+    [`& .${gridClasses.cellCheckbox}`]: styles.cellCheckbox
+  }, {
+    [`& .${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}`]: styles.columnHeader
+  }, {
+    [`& .${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}`]: styles.row
+  }, {
+    [`& .${gridClasses.sortIcon}`]: styles.sortIcon
+  }, {
+    [`& .${gridClasses.withBorder}`]: styles.withBorder
+  }, {
+    [`& .${gridClasses.treeDataGroupingCell}`]: styles.treeDataGroupingCell
+  }, {
+    [`& .${gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
+  }, {
+    [`& .${gridClasses.detailPanelToggleCell}`]: styles.detailPanelToggleCell
+  }, {
+    [`& .${gridClasses['detailPanelToggleCell--expanded']}`]: styles['detailPanelToggleCell--expanded']
+  }, styles.root]
+})(({
+  theme
+}) => {
+  const borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
+
+  const gridStyle = _extends({
+    flex: 1,
+    boxSizing: 'border-box',
+    position: 'relative',
+    border: `1px solid ${borderColor}`,
+    borderRadius: theme.shape.borderRadius,
+    color: theme.palette.text.primary
+  }, theme.typography.body2, {
+    outline: 'none',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    [`&.${gridClasses.autoHeight}`]: {
+      height: 'auto',
+      [`& .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
+        borderColor: 'transparent'
+      }
+    },
+    [`& .${gridClasses['virtualScrollerContent--overflowed']} .${gridClasses['row--lastVisible']} .${gridClasses.cell}`]: {
+      borderColor: '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 ${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}`]: {
+      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.columnHeader}:not(.${gridClasses['columnHeader--sorted']}):hover .${gridClasses.sortIcon}`]: {
+      opacity: 0.5
+    },
+    [`& .${gridClasses.columnHeaderTitleContainer}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      flex: 1,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    [`& .${gridClasses.columnHeaderTitleContainerContent}`]: {
+      overflow: 'hidden',
+      display: 'flex',
+      alignItems: 'center'
+    },
+    [`& .${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.palette.action.hover
+    },
+    [`& .${gridClasses.columnSeparator}`]: {
+      position: 'absolute',
+      zIndex: 100,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      color: borderColor
+    },
+    [`& .${gridClasses['columnSeparator--sideLeft']}`]: {
+      left: -12
+    },
+    [`& .${gridClasses['columnSeparator--sideRight']}`]: {
+      right: -12
+    },
+    [`& .${gridClasses['columnSeparator--resizable']}`]: {
+      cursor: 'col-resize',
+      touchAction: 'none',
+      '&:hover': {
+        color: theme.palette.text.primary,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          color: borderColor
+        }
+      },
+      [`&.${gridClasses['columnSeparator--resizing']}`]: {
+        color: theme.palette.text.primary
+      }
+    },
+    [`& .${gridClasses.iconSeparator}`]: {
+      color: 'inherit'
+    },
+    [`& .${gridClasses.menuIcon}`]: {
+      width: 0,
+      visibility: 'hidden',
+      fontSize: 20,
+      marginRight: -10,
+      display: 'flex',
+      alignItems: 'center'
+    },
+    [`& .${gridClasses.columnHeader}:hover`]: {
+      [`& .${gridClasses.iconButtonContainer}`]: {
+        visibility: 'visible',
+        width: 'auto'
+      },
+      [`& .${gridClasses.menuIcon}`]: {
+        width: 'auto',
+        visibility: 'visible'
+      }
+    },
+    [`.${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.palette.action.hover,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      '&.Mui-selected': {
+        backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
+        '&:hover, &.Mui-hovered': {
+          backgroundColor: 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: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+          }
+        }
+      }
+    },
+    [`& .${gridClasses.cell}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      borderBottom: `1px solid ${borderColor}`
+    },
+    [`& .${gridClasses.cellContent}`]: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    },
+    [`& .${gridClasses.cell}.${gridClasses['cell--editing']}`]: {
+      padding: 1,
+      display: 'flex',
+      boxShadow: theme.shadows[2],
+      backgroundColor: theme.palette.background.paper,
+      '&:focus-within': {
+        outline: `solid ${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.palette.background.paper
+    },
+    [`& .${gridClasses.editBooleanCell}`]: {
+      display: 'flex',
+      height: '100%',
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    [`& .${gridClasses.booleanCell}[data-value="true"]`]: {
+      color: theme.palette.text.secondary
+    },
+    [`& .${gridClasses.booleanCell}[data-value="false"]`]: {
+      color: theme.palette.text.disabled
+    },
+    [`& .${gridClasses.actionsCell}`]: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gridGap: theme.spacing(1)
+    },
+    [`& .${gridClasses.withBorder}`]: {
+      borderRight: `1px solid ${borderColor}`
+    },
+    [`& .${gridClasses['cell--textLeft']}`]: {
+      justifyContent: 'flex-start'
+    },
+    [`& .${gridClasses['cell--textRight']}`]: {
+      justifyContent: 'flex-end'
+    },
+    [`& .${gridClasses['cell--textCenter']}`]: {
+      justifyContent: 'center'
+    },
+    [`& .${gridClasses.columnHeaderDraggableContainer}`]: {
+      display: 'flex',
+      width: '100%'
+    },
+    [`& .${gridClasses['columnHeader--dragging']}`]: {
+      background: theme.palette.background.paper,
+      padding: '0 12px',
+      borderRadius: theme.shape.borderRadius,
+      opacity: theme.palette.action.disabledOpacity
+    },
+    [`& .${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;
+});

package/modern/components/containers/GridToolbarContainer.js

@@ -0,0 +1,56 @@
+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 clsx from 'clsx';
+import { styled } from '@mui/material/styles';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+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: (props, styles) => styles.toolbarContainer
+})(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(0.5, 0.5, 0)
+}));
+export const GridToolbarContainer = /*#__PURE__*/React.forwardRef(function GridToolbarContainer(props, ref) {
+  const {
+    className,
+    children
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+
+  if (!children) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridToolbarContainerRoot, _extends({
+    ref: ref,
+    className: clsx(className, classes.root)
+  }, other, {
+    children: children
+  }));
+});

package/modern/components/containers/index.js

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

package/modern/components/icons/index.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { createSvgIcon } from '@mui/material/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GridArrowUpwardIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
+}), 'ArrowUpward');
+export const GridArrowDownwardIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
+}), 'ArrowDownward');
+export const GridKeyboardArrowRight = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"
+}), 'KeyboardArrowRight');
+export const GridExpandMoreIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
+}), 'ExpandMore');
+export const GridFilterListIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"
+}), 'FilterList');
+export const GridFilterAltIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M4.25 5.61C6.27 8.2 10 13 10 13v6c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-6s3.72-4.8 5.74-7.39c.51-.66.04-1.61-.79-1.61H5.04c-.83 0-1.3.95-.79 1.61z"
+}), 'FilterAlt');
+export const GridSearchIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+}), 'Search');
+export const GridMenuIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
+}), 'Menu');
+export const GridCheckCircleIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+}), 'CheckCircle');
+export const GridColumnIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M6 5H3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm14 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zm-7 0h-3c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h3c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1z"
+}), 'ColumnIcon');
+export const GridSeparatorIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M11 19V5h2v14z"
+}), 'Separator');
+export const GridViewHeadlineIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M4 15h16v-2H4v2zm0 4h16v-2H4v2zm0-8h16V9H4v2zm0-6v2h16V5H4z"
+}), 'ViewHeadline');
+export const GridTableRowsIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M21,8H3V4h18V8z M21,10H3v4h18V10z M21,16H3v4h18V16z"
+}), 'TableRows');
+export const GridViewStreamIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M4 18h17v-6H4v6zM4 5v6h17V5H4z"
+}), 'ViewStream');
+export const GridTripleDotsVerticalIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+}), 'TripleDotsVertical');
+export const GridCloseIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), 'Close');
+export const GridAddIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+}), 'Add');
+export const GridRemoveIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M19 13H5v-2h14v2z"
+}), 'Remove');
+export const GridLoadIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"
+}), 'Load');
+export const GridDragIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+}), 'Drag');
+export const GridSaveAltIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"
+}), 'SaveAlt');
+export const GridCheckIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+}), 'Check');
+export const GridMoreVertIcon = createSvgIcon( /*#__PURE__*/_jsx("path", {
+  d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
+}), 'MoreVert');

package/modern/components/index.js

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

package/modern/components/menu/GridMenu.js

@@ -0,0 +1,124 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["open", "target", "onClickAway", "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 } from '@mui/material';
+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 { HTMLElementType } from '@mui/utils';
+import { getDataGridUtilityClass, gridClasses } 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: ['menu']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridMenuRoot = styled(Popper, {
+  name: 'MuiDataGrid',
+  slot: 'Menu',
+  overridesResolver: (props, styles) => styles.menu
+})(({
+  theme
+}) => ({
+  zIndex: theme.zIndex.modal,
+  [`& .${gridClasses.menuList}`]: {
+    outline: 0
+  }
+}));
+const transformOrigin = {
+  'bottom-start': 'top left',
+  'bottom-end': 'top right'
+};
+
+const GridMenu = props => {
+  const {
+    open,
+    target,
+    onClickAway,
+    children,
+    position,
+    className,
+    onExited
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const prevTarget = React.useRef(target);
+  const prevOpen = React.useRef(open);
+  const rootProps = useGridRootProps();
+  const ownerState = {
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  React.useEffect(() => {
+    if (prevOpen.current && prevTarget.current) {
+      prevTarget.current.focus();
+    }
+
+    prevOpen.current = open;
+    prevTarget.current = target;
+  }, [open, target]);
+
+  const handleExited = popperOnExited => node => {
+    if (popperOnExited) {
+      popperOnExited();
+    }
+
+    if (onExited) {
+      onExited(node);
+    }
+  };
+
+  return /*#__PURE__*/_jsx(GridMenuRoot, _extends({
+    as: rootProps.components.BasePopper,
+    className: clsx(className, classes.root),
+    open: open,
+    anchorEl: target,
+    transition: true,
+    placement: position
+  }, other, rootProps.componentsProps?.basePopper, {
+    children: ({
+      TransitionProps,
+      placement
+    }) => /*#__PURE__*/_jsx(ClickAwayListener, {
+      onClickAway: onClickAway,
+      children: /*#__PURE__*/_jsx(Grow, _extends({}, TransitionProps, {
+        style: {
+          transformOrigin: transformOrigin[placement]
+        },
+        onExited: handleExited(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"  |
+  // ----------------------------------------------------------------------
+  onClickAway: 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 };