@mui/x-data-grid 8.0.0-beta.2 → 8.0.0

package/material/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "useMaterialCSSVariables", {
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
 var _styles = require("@mui/material/styles");
@@ -28,7 +29,7 @@ var _InputBase = _interopRequireDefault(require("@mui/material/InputBase"));
 var _Unstable_TrapFocus = _interopRequireDefault(require("@mui/material/Unstable_TrapFocus"));
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _ListItemText = _interopRequireWildcard(require("@mui/material/ListItemText"));
 var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
@@ -48,27 +49,43 @@ var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
 var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _GridColumnUnsortedIcon = require("./icons/GridColumnUnsortedIcon");
 var _icons = require("./icons");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+require("./augmentation");
 var _jsxRuntime = require("react/jsx-runtime");
 var _variables = require("./variables");
-const _excluded = ["id", "label", "labelId", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
-  _excluded2 = ["onRowsPerPageChange", "disabled"],
-  _excluded3 = ["autoFocus", "label", "fullWidth", "slotProps", "className"],
-  _excluded4 = ["inert", "iconStart", "iconEnd", "children"],
-  _excluded5 = ["slotProps"],
-  _excluded6 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps"],
-  _excluded7 = ["key"],
-  _excluded8 = ["inputProps", "InputProps", "InputLabelProps"],
-  _excluded9 = ["slotProps"],
-  _excluded10 = ["native"];
-const InputAdornment = (0, _styles.styled)(_InputAdornment.default)({
+const _excluded = ["id", "label", "labelId", "material", "disabled", "slotProps", "onChange", "onKeyDown", "onOpen", "onClose", "size", "style", "fullWidth"],
+  _excluded2 = ["onRowsPerPageChange", "material", "disabled"],
+  _excluded3 = ["material"],
+  _excluded4 = ["autoFocus", "label", "fullWidth", "slotProps", "className", "material"],
+  _excluded5 = ["material"],
+  _excluded6 = ["material"],
+  _excluded7 = ["material"],
+  _excluded8 = ["material"],
+  _excluded9 = ["material"],
+  _excluded10 = ["material"],
+  _excluded11 = ["material"],
+  _excluded12 = ["material"],
+  _excluded13 = ["material", "label", "className"],
+  _excluded14 = ["material"],
+  _excluded15 = ["inert", "iconStart", "iconEnd", "children", "material"],
+  _excluded16 = ["slotProps", "material"],
+  _excluded17 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded18 = ["key"],
+  _excluded19 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded20 = ["slotProps", "material"],
+  _excluded21 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded22 = ["native"];
+/* eslint-disable material-ui/disallow-react-api-in-server-components */
+
+const InputAdornment = (0, _styles.styled)(_InputAdornment.default)(({
+  theme
+}) => ({
   [`&.${_InputAdornment.inputAdornmentClasses.positionEnd} .${_IconButton.iconButtonClasses.sizeSmall}`]: {
-    marginRight: '-7px'
+    marginRight: theme.spacing(-0.75)
   }
-});
+}));
 const FormControlLabel = (0, _styles.styled)(_FormControlLabel.default, {
   shouldForwardProp: prop => prop !== 'fullWidth'
 })(({
@@ -76,8 +93,12 @@ const FormControlLabel = (0, _styles.styled)(_FormControlLabel.default, {
 }) => ({
   gap: theme.spacing(0.5),
   margin: 0,
+  overflow: 'hidden',
   [`& .${_FormControlLabel.formControlLabelClasses.label}`]: {
-    fontSize: theme.typography.pxToRem(14)
+    fontSize: theme.typography.pxToRem(14),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
   },
   variants: [{
     props: {
@@ -102,11 +123,19 @@ const Checkbox = (0, _styles.styled)(_Checkbox.default, {
     }
   }]
 }));
+const ListItemText = (0, _styles.styled)(_ListItemText.default)({
+  [`& .${_ListItemText.listItemTextClasses.primary}`]: {
+    overflowX: 'clip',
+    textOverflow: 'ellipsis',
+    maxWidth: '300px'
+  }
+});
 const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
   const {
       id,
       label,
       labelId,
+      material,
       disabled,
       slotProps,
       onChange,
@@ -151,7 +180,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       onOpen: onOpen,
       MenuProps: menuProps,
       size: size
-    }))]
+    }, material))]
   });
 });
 const StyledPagination = (0, _styles.styled)(_TablePagination.default)(({
@@ -173,6 +202,7 @@ const StyledPagination = (0, _styles.styled)(_TablePagination.default)(({
 const BasePagination = (0, _forwardRef.forwardRef)(function BasePagination(props, ref) {
   const {
       onRowsPerPageChange,
+      material,
       disabled
     } = props,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
@@ -204,84 +234,29 @@ const BasePagination = (0, _forwardRef.forwardRef)(function BasePagination(props
       estimated: estimatedRowCount
     })),
     getItemAriaLabel: apiRef.current.getLocaleText('paginationItemAriaLabel')
-  }, computedProps, rest, {
+  }, computedProps, rest, material, {
     ref: ref
   }));
 });
-
-/* eslint-disable material-ui/disallow-react-api-in-server-components */
-
-const iconSlots = {
-  booleanCellTrueIcon: _icons.GridCheckIcon,
-  booleanCellFalseIcon: _icons.GridCloseIcon,
-  columnMenuIcon: _icons.GridTripleDotsVerticalIcon,
-  openFilterButtonIcon: _icons.GridFilterListIcon,
-  filterPanelDeleteIcon: _icons.GridCloseIcon,
-  columnFilteredIcon: _icons.GridFilterAltIcon,
-  columnSelectorIcon: _icons.GridColumnIcon,
-  columnUnsortedIcon: _GridColumnUnsortedIcon.GridColumnUnsortedIcon,
-  columnSortedAscendingIcon: _icons.GridArrowUpwardIcon,
-  columnSortedDescendingIcon: _icons.GridArrowDownwardIcon,
-  columnResizeIcon: _icons.GridSeparatorIcon,
-  densityCompactIcon: _icons.GridViewHeadlineIcon,
-  densityStandardIcon: _icons.GridTableRowsIcon,
-  densityComfortableIcon: _icons.GridViewStreamIcon,
-  exportIcon: _icons.GridDownloadIcon,
-  moreActionsIcon: _icons.GridMoreVertIcon,
-  treeDataCollapseIcon: _icons.GridExpandMoreIcon,
-  treeDataExpandIcon: _icons.GridKeyboardArrowRight,
-  groupingCriteriaCollapseIcon: _icons.GridExpandMoreIcon,
-  groupingCriteriaExpandIcon: _icons.GridKeyboardArrowRight,
-  detailPanelExpandIcon: _icons.GridAddIcon,
-  detailPanelCollapseIcon: _icons.GridRemoveIcon,
-  rowReorderIcon: _icons.GridDragIcon,
-  quickFilterIcon: _icons.GridSearchIcon,
-  quickFilterClearIcon: _icons.GridClearIcon,
-  columnMenuHideIcon: _icons.GridVisibilityOffIcon,
-  columnMenuSortAscendingIcon: _icons.GridArrowUpwardIcon,
-  columnMenuSortDescendingIcon: _icons.GridArrowDownwardIcon,
-  columnMenuUnsortIcon: null,
-  columnMenuFilterIcon: _icons.GridFilterAltIcon,
-  columnMenuManageColumnsIcon: _icons.GridViewColumnIcon,
-  columnMenuClearIcon: _icons.GridClearIcon,
-  loadIcon: _icons.GridLoadIcon,
-  filterPanelAddIcon: _icons.GridAddIcon,
-  filterPanelRemoveAllIcon: _icons.GridDeleteForeverIcon,
-  columnReorderIcon: _icons.GridDragIcon,
-  menuItemCheckIcon: _icons.GridCheckIcon
-};
-const baseSlots = {
-  baseAutocomplete: BaseAutocomplete,
-  baseBadge: _Badge.default,
-  baseCheckbox: /*#__PURE__*/React.forwardRef(BaseCheckbox),
-  baseCircularProgress: _CircularProgress.default,
-  baseDivider: _Divider.default,
-  baseInput: BaseInput,
-  baseLinearProgress: _LinearProgress.default,
-  baseMenuList: BaseMenuList,
-  baseMenuItem: BaseMenuItem,
-  baseTextField: BaseTextField,
-  baseButton: _Button.default,
-  baseIconButton: _IconButton.default,
-  baseTooltip: _Tooltip.default,
-  basePagination: BasePagination,
-  basePopper: BasePopper,
-  baseSelect: BaseSelect,
-  baseSelectOption: BaseSelectOption,
-  baseSkeleton: _Skeleton.default,
-  baseSwitch: _Switch.default
-};
-const materialSlots = (0, _extends2.default)({}, baseSlots, iconSlots);
-var _default = exports.default = materialSlots;
-function BaseCheckbox(props, ref) {
+const BaseBadge = (0, _forwardRef.forwardRef)(function BaseBadge(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseCheckbox = (0, _forwardRef.forwardRef)(function BaseCheckbox(props, ref) {
   const {
       autoFocus,
       label,
       fullWidth,
       slotProps,
-      className
+      className,
+      material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded4);
   const elementRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(elementRef, ref);
   const rippleRef = React.useRef(null);
@@ -298,8 +273,8 @@ function BaseCheckbox(props, ref) {
     }
   }, [autoFocus]);
   if (!label) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, {
-      className: className,
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, material, {
+      className: (0, _clsx.default)(className, material?.className),
       inputProps: slotProps?.htmlInput,
       ref: handleRef,
       touchRippleRef: rippleRef
@@ -307,7 +282,7 @@ function BaseCheckbox(props, ref) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlLabel, {
     className: className,
-    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, {
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, (0, _extends2.default)({}, other, material, {
       inputProps: slotProps?.htmlInput,
       ref: handleRef,
       touchRippleRef: rippleRef
@@ -315,24 +290,124 @@ function BaseCheckbox(props, ref) {
     label: label,
     fullWidth: fullWidth
   });
-}
-function BaseMenuList(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, (0, _extends2.default)({}, props));
-}
+});
+const BaseCircularProgress = (0, _forwardRef.forwardRef)(function BaseCircularProgress(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded5);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularProgress.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseDivider = (0, _forwardRef.forwardRef)(function BaseDivider(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded6);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseLinearProgress = (0, _forwardRef.forwardRef)(function BaseLinearProgress(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded7);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseButton = (0, _forwardRef.forwardRef)(function BaseButton(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded8);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseChip = (0, _forwardRef.forwardRef)(function BaseChip(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded9);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded10);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseTooltip = (0, _forwardRef.forwardRef)(function BaseTooltip(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded11);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseSkeleton = (0, _forwardRef.forwardRef)(function BaseSkeleton(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseSwitch = (0, _forwardRef.forwardRef)(function BaseSwitch(props, ref) {
+  const {
+      material,
+      label,
+      className
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded13);
+  if (!label) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, rest, material, {
+      className: className,
+      ref: ref
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FormControlLabel, {
+    className: className,
+    control: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, rest, material, {
+      ref: ref
+    })),
+    label: label
+  });
+});
+const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
 function BaseMenuItem(props) {
   const {
       inert,
       iconStart,
       iconEnd,
-      children
+      children,
+      material
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded4);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded15);
   if (inert) {
     other.disableRipple = true;
   }
-  return /*#__PURE__*/React.createElement(_MenuItem.default, other, [iconStart && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
+  return /*#__PURE__*/React.createElement(_MenuItem.default, (0, _extends2.default)({}, other, material), [iconStart && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
     children: iconStart
-  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemText.default, {
+  }, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItemText, {
     children: children
   }, "2"), iconEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemIcon.default, {
     children: iconEnd
@@ -342,12 +417,13 @@ function BaseTextField(props) {
   // MaterialUI v5 doesn't support slotProps, until we drop v5 support we need to
   // translate the pattern.
   const {
-      slotProps
+      slotProps,
+      material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded5);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded16);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({
     variant: "outlined"
-  }, rest, {
+  }, rest, material, {
     inputProps: slotProps?.htmlInput,
     InputProps: transformInputProps(slotProps?.input),
     InputLabelProps: (0, _extends2.default)({
@@ -368,9 +444,10 @@ function BaseAutocomplete(props) {
       onChange,
       label,
       placeholder,
-      slotProps
+      slotProps,
+      material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded6);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded17);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     id: id,
     multiple: multiple,
@@ -387,7 +464,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded7);
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded18);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         variant: "outlined",
         size: "small",
@@ -400,42 +477,50 @@ function BaseAutocomplete(props) {
           InputProps,
           InputLabelProps
         } = params,
-        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded8);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTextField, (0, _extends2.default)({}, inputRest, {
+        inputRest = (0, _objectWithoutPropertiesLoose2.default)(params, _excluded19);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, (0, _extends2.default)({}, inputRest, {
         label: label,
         placeholder: placeholder,
-        slotProps: {
-          input: InputProps,
-          inputLabel: InputLabelProps,
-          htmlInput: inputProps
-        }
+        inputProps: inputProps,
+        InputProps: transformInputProps(InputProps, false),
+        InputLabelProps: (0, _extends2.default)({
+          shrink: true
+        }, InputLabelProps)
       }, slotProps?.textField, rootProps.slotProps?.baseTextField));
     }
-  }, rest));
+  }, rest, material));
 }
 function BaseInput(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase.default, (0, _extends2.default)({}, transformInputProps(props)));
 }
-function transformInputProps(props) {
+function transformInputProps(props, wrapAdornments = true) {
   if (!props) {
     return undefined;
   }
   const {
-      slotProps
+      slotProps,
+      material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded9);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded20);
   const result = rest;
-  if (result.startAdornment) {
-    result.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
-      position: "start",
-      children: result.startAdornment
-    });
+  if (wrapAdornments) {
+    if (result.startAdornment) {
+      result.startAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
+        position: "start",
+        children: result.startAdornment
+      });
+    }
+    if (result.endAdornment) {
+      result.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
+        position: "end",
+        children: result.endAdornment
+      });
+    }
   }
-  if (result.endAdornment) {
-    result.endAdornment = /*#__PURE__*/(0, _jsxRuntime.jsx)(InputAdornment, {
-      position: "end",
-      children: result.endAdornment
-    });
+  for (const k in material) {
+    if (Object.hasOwn(material, k)) {
+      result[k] = material[k];
+    }
   }
   if (slotProps?.htmlInput) {
     if (result.inputProps) {
@@ -452,10 +537,20 @@ const transformOrigin = {
 };
 function BasePopper(props) {
   const {
-    flip,
-    onDidShow,
-    onDidHide
-  } = props;
+      open,
+      children,
+      className,
+      flip,
+      onExited,
+      onDidShow,
+      onDidHide,
+      id,
+      target,
+      transition,
+      placement,
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded21);
   const modifiers = React.useMemo(() => {
     const result = [];
     if (flip) {
@@ -483,40 +578,38 @@ function BasePopper(props) {
     return result;
   }, [flip, onDidShow, onDidHide]);
   let content;
-  if (!props.transition) {
-    content = wrappers(props, props.children);
+  if (!transition) {
+    content = wrappers(props, children);
   } else {
     const handleExited = popperOnExited => node => {
       if (popperOnExited) {
         popperOnExited();
       }
-      if (props.onExited) {
-        props.onExited(node);
+      if (onExited) {
+        onExited(node);
       }
     };
-    content = ({
-      TransitionProps,
-      placement
-    }) => wrappers(props, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grow.default, (0, _extends2.default)({}, TransitionProps, {
+    content = p => wrappers(props, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Grow.default, (0, _extends2.default)({}, p.TransitionProps, {
       style: {
-        transformOrigin: transformOrigin[placement]
+        transformOrigin: transformOrigin[p.placement]
       },
-      onExited: handleExited(TransitionProps?.onExited),
+      onExited: handleExited(p.TransitionProps?.onExited),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Paper.default, {
-        children: props.children
+        children: children
       })
     })));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, {
-    id: props.id,
-    className: props.className,
-    open: props.open,
-    anchorEl: props.target,
-    transition: props.transition,
-    placement: props.placement,
-    modifiers: modifiers,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Popper.default, (0, _extends2.default)({
+    id: id,
+    className: className,
+    open: open,
+    anchorEl: target,
+    transition: transition,
+    placement: placement,
+    modifiers: modifiers
+  }, rest, material, {
     children: content
-  });
+  }));
 }
 function wrappers(props, content) {
   return focusTrapWrapper(props, clickAwayWrapper(props, content));
@@ -550,9 +643,71 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded10);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded22);
   if (native) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("option", (0, _extends2.default)({}, props));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({}, props));
-}
+}
+const iconSlots = {
+  booleanCellTrueIcon: _icons.GridCheckIcon,
+  booleanCellFalseIcon: _icons.GridCloseIcon,
+  columnMenuIcon: _icons.GridTripleDotsVerticalIcon,
+  openFilterButtonIcon: _icons.GridFilterListIcon,
+  filterPanelDeleteIcon: _icons.GridCloseIcon,
+  columnFilteredIcon: _icons.GridFilterAltIcon,
+  columnSelectorIcon: _icons.GridColumnIcon,
+  columnSortedAscendingIcon: _icons.GridArrowUpwardIcon,
+  columnSortedDescendingIcon: _icons.GridArrowDownwardIcon,
+  columnResizeIcon: _icons.GridSeparatorIcon,
+  densityCompactIcon: _icons.GridViewHeadlineIcon,
+  densityStandardIcon: _icons.GridTableRowsIcon,
+  densityComfortableIcon: _icons.GridViewStreamIcon,
+  exportIcon: _icons.GridDownloadIcon,
+  moreActionsIcon: _icons.GridMoreVertIcon,
+  treeDataCollapseIcon: _icons.GridExpandMoreIcon,
+  treeDataExpandIcon: _icons.GridKeyboardArrowRight,
+  groupingCriteriaCollapseIcon: _icons.GridExpandMoreIcon,
+  groupingCriteriaExpandIcon: _icons.GridKeyboardArrowRight,
+  detailPanelExpandIcon: _icons.GridAddIcon,
+  detailPanelCollapseIcon: _icons.GridRemoveIcon,
+  rowReorderIcon: _icons.GridDragIcon,
+  quickFilterIcon: _icons.GridSearchIcon,
+  quickFilterClearIcon: _icons.GridClearIcon,
+  columnMenuHideIcon: _icons.GridVisibilityOffIcon,
+  columnMenuSortAscendingIcon: _icons.GridArrowUpwardIcon,
+  columnMenuSortDescendingIcon: _icons.GridArrowDownwardIcon,
+  columnMenuUnsortIcon: null,
+  columnMenuFilterIcon: _icons.GridFilterAltIcon,
+  columnMenuManageColumnsIcon: _icons.GridViewColumnIcon,
+  columnMenuClearIcon: _icons.GridClearIcon,
+  loadIcon: _icons.GridLoadIcon,
+  filterPanelAddIcon: _icons.GridAddIcon,
+  filterPanelRemoveAllIcon: _icons.GridDeleteForeverIcon,
+  columnReorderIcon: _icons.GridDragIcon,
+  menuItemCheckIcon: _icons.GridCheckIcon
+};
+const baseSlots = {
+  baseAutocomplete: BaseAutocomplete,
+  baseBadge: BaseBadge,
+  baseCheckbox: BaseCheckbox,
+  baseChip: BaseChip,
+  baseCircularProgress: BaseCircularProgress,
+  baseDivider: BaseDivider,
+  baseInput: BaseInput,
+  baseLinearProgress: BaseLinearProgress,
+  baseMenuList: BaseMenuList,
+  baseMenuItem: BaseMenuItem,
+  baseTextField: BaseTextField,
+  baseButton: BaseButton,
+  baseIconButton: BaseIconButton,
+  baseTooltip: BaseTooltip,
+  basePagination: BasePagination,
+  basePopper: BasePopper,
+  baseSelect: BaseSelect,
+  baseSelectOption: BaseSelectOption,
+  baseSkeleton: BaseSkeleton,
+  baseSwitch: BaseSwitch
+};
+const materialSlots = (0, _extends2.default)({}, baseSlots, iconSlots);
+var _default = exports.default = materialSlots;

package/material/variables.js

@@ -33,6 +33,7 @@ function transformTheme(t) {
   const radius = getRadius(t);
   const fontBody = t.vars?.font?.body2 ?? formatFont(t.typography.body2);
   const fontSmall = t.vars?.font?.caption ?? formatFont(t.typography.caption);
+  const fontLarge = t.vars?.font?.body1 ?? formatFont(t.typography.body1);
   const k = _cssVariables.vars.keys;
   return {
     [k.spacingUnit]: t.vars ? t.vars.spacing ?? t.spacing(1) : t.spacing(1),
@@ -44,7 +45,8 @@ function transformTheme(t) {
     [k.colors.foreground.muted]: (t.vars || t).palette.text.secondary,
     [k.colors.foreground.accent]: (t.vars || t).palette.primary.dark,
     [k.colors.foreground.disabled]: (t.vars || t).palette.text.disabled,
-    [k.colors.interactive.hover]: removeOpacity((t.vars || t).palette.action.hover),
+    [k.colors.foreground.error]: (t.vars || t).palette.error.dark,
+    [k.colors.interactive.hover]: (t.vars || t).palette.action.hover,
     [k.colors.interactive.hoverOpacity]: (t.vars || t).palette.action.hoverOpacity,
     [k.colors.interactive.focus]: removeOpacity((t.vars || t).palette.primary.main),
     [k.colors.interactive.focusOpacity]: (t.vars || t).palette.action.focusOpacity,
@@ -62,6 +64,7 @@ function transformTheme(t) {
     [k.typography.fontWeight.bold]: t.typography.fontWeightBold,
     [k.typography.font.body]: fontBody,
     [k.typography.font.small]: fontSmall,
+    [k.typography.font.large]: fontLarge,
     [k.transitions.easing.easeIn]: t.transitions.easing.easeIn,
     [k.transitions.easing.easeOut]: t.transitions.easing.easeOut,
     [k.transitions.easing.easeInOut]: t.transitions.easing.easeInOut,

package/models/api/gridApiCommon.d.ts

@@ -29,6 +29,7 @@ import type { GridInitialStateCommunity, GridStateCommunity } from '../gridState
 import type { GridHeaderFilteringApi, GridHeaderFilteringPrivateApi } from './gridHeaderFilteringApi';
 import type { DataGridProcessedProps } from '../props/DataGridProps';
 import type { GridColumnResizeApi } from '../../hooks/features/columnResize';
+import type { GridPivotingPrivateApiCommunity } from '../../hooks/features/pivoting/gridPivotingInterfaces';
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {}
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi, GridParamsPrivateApi {}
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi, GridParamsPrivateApi, GridPivotingPrivateApiCommunity {}
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {}