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

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");
@@ -52,18 +53,32 @@ 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 _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"],
+  _excluded14 = ["inert", "iconStart", "iconEnd", "children"],
+  _excluded15 = ["slotProps", "material"],
+  _excluded16 = ["id", "multiple", "freeSolo", "options", "getOptionLabel", "isOptionEqualToValue", "value", "onChange", "label", "placeholder", "slotProps", "material"],
+  _excluded17 = ["key"],
+  _excluded18 = ["inputProps", "InputProps", "InputLabelProps"],
+  _excluded19 = ["slotProps", "material"],
+  _excluded20 = ["ref", "open", "children", "className", "clickAwayTouchEvent", "clickAwayMouseEvent", "flip", "focusTrap", "onExited", "onClickAway", "onDidShow", "onDidHide", "id", "target", "transition", "placement", "material"],
+  _excluded21 = ["native"];
+/* eslint-disable material-ui/disallow-react-api-in-server-components */
+
 const InputAdornment = (0, _styles.styled)(_InputAdornment.default)({
   [`&.${_InputAdornment.inputAdornmentClasses.positionEnd} .${_IconButton.iconButtonClasses.sizeSmall}`]: {
     marginRight: '-7px'
@@ -107,6 +122,7 @@ const BaseSelect = (0, _forwardRef.forwardRef)(function BaseSelect(props, ref) {
       id,
       label,
       labelId,
+      material,
       disabled,
       slotProps,
       onChange,
@@ -151,7 +167,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 +189,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 +221,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 +260,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 +269,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,10 +277,88 @@ 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 BaseIconButton = (0, _forwardRef.forwardRef)(function BaseIconButton(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded9);
+  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, _excluded10);
+  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, _excluded11);
+  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
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded12);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Switch.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
+const BaseMenuList = (0, _forwardRef.forwardRef)(function BaseMenuList(props, ref) {
+  const {
+      material
+    } = props,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded13);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuList.default, (0, _extends2.default)({}, rest, material, {
+    ref: ref
+  }));
+});
 function BaseMenuItem(props) {
   const {
       inert,
@@ -326,7 +366,7 @@ function BaseMenuItem(props) {
       iconEnd,
       children
     } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded4);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded14);
   if (inert) {
     other.disableRipple = true;
   }
@@ -342,12 +382,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, _excluded15);
   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 +409,10 @@ function BaseAutocomplete(props) {
       onChange,
       label,
       placeholder,
-      slotProps
+      slotProps,
+      material
     } = props,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded6);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded16);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Autocomplete.default, (0, _extends2.default)({
     id: id,
     multiple: multiple,
@@ -387,7 +429,7 @@ function BaseAutocomplete(props) {
         {
           key
         } = _getTagProps,
-        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded7);
+        tagProps = (0, _objectWithoutPropertiesLoose2.default)(_getTagProps, _excluded17);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
         variant: "outlined",
         size: "small",
@@ -400,42 +442,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, _excluded18);
+      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, _excluded19);
   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 +502,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, _excluded20);
   const modifiers = React.useMemo(() => {
     const result = [];
     if (flip) {
@@ -483,40 +543,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 +608,71 @@ function BaseSelectOption(_ref) {
   let {
       native
     } = _ref,
-    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded10);
+    props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded21);
   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,
+  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: BaseBadge,
+  baseCheckbox: BaseCheckbox,
+  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),
@@ -62,6 +63,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/colDef/gridColDef.d.ts

@@ -299,7 +299,7 @@ export type GridColDef<R extends GridValidRowModel = any, V = any, F = V> = Grid
  * @demos
  *   - [List view](/x/react-data-grid/list-view/)
  */
-export type GridListColDef<R extends GridValidRowModel = any, V = any, F = V> = Pick<GridBaseColDef<R, V, F>, 'field' | 'renderCell' | 'align' | 'cellClassName' | 'display'>;
+export type GridListViewColDef<R extends GridValidRowModel = any, V = any, F = V> = Pick<GridBaseColDef<R, V, F>, 'field' | 'renderCell' | 'align' | 'cellClassName' | 'display'>;
 export type GridColTypeDef<V = any, F = V> = Omit<GridBaseColDef<any, V, F>, 'field'>;
 export type GridStateColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> & {
   computedWidth: number;

package/models/colDef/index.d.ts

@@ -1,3 +1,3 @@
-export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn } from './gridColDef';
+export type { GridAlignment, ValueOptions, GridKeyValue, GridColDef, GridListViewColDef, GridColTypeDef, GridColumnsMeta, GridSingleSelectColDef, GridActionsColDef, GetApplyQuickFilterFn, GridValueGetter, GridValueFormatter, GridValueSetter, GridValueParser, GridColSpanFn } from './gridColDef';
 export * from "./gridColType.js";
 export * from "./gridColumnTypesRecord.js";