@mui/material 6.0.0-alpha.7 → 6.0.0-alpha.9

package/ToggleButton/ToggleButton.js

@@ -1,10 +1,6 @@
 'use client';
 
 // @inheritedComponent ButtonBase
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value"],
-  _excluded2 = ["children", "className", "color", "disabled", "disableFocusRipple", "fullWidth", "onChange", "onClick", "selected", "size", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -45,7 +41,8 @@ const ToggleButtonRoot = styled(ButtonBase, {
   }
 })(({
   theme
-}) => _extends({}, theme.typography.button, {
+}) => ({
+  ...theme.typography.button,
   borderRadius: (theme.vars || theme).shape.borderRadius,
   padding: 11,
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
@@ -79,7 +76,7 @@ const ToggleButtonRoot = styled(ButtonBase, {
         }
       }
     }
-  }, ...Object.keys((theme.vars || theme).palette).filter(key => theme.vars ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel : theme.palette[key].main).map(color => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -123,40 +120,41 @@ const ToggleButtonRoot = styled(ButtonBase, {
 }));
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
-  const _React$useContext = React.useContext(ToggleButtonGroupContext),
-    {
-      value: contextValue
-    } = _React$useContext,
-    contextProps = _objectWithoutPropertiesLoose(_React$useContext, _excluded);
+  const {
+    value: contextValue,
+    ...contextProps
+  } = React.useContext(ToggleButtonGroupContext);
   const toggleButtonGroupButtonContextPositionClassName = React.useContext(ToggleButtonGroupButtonContext);
-  const resolvedProps = resolveProps(_extends({}, contextProps, {
+  const resolvedProps = resolveProps({
+    ...contextProps,
     selected: isValueSelected(inProps.value, contextValue)
-  }), inProps);
+  }, inProps);
   const props = useThemeProps({
     props: resolvedProps,
     name: 'MuiToggleButton'
   });
   const {
-      children,
-      className,
-      color = 'standard',
-      disabled = false,
-      disableFocusRipple = false,
-      fullWidth = false,
-      onChange,
-      onClick,
-      selected,
-      size = 'medium',
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'standard',
+    disabled = false,
+    disableFocusRipple = false,
+    fullWidth = false,
+    onChange,
+    onClick,
+    selected,
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     disabled,
     disableFocusRipple,
     fullWidth,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const handleChange = event => {
     if (onClick) {
@@ -170,7 +168,7 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     }
   };
   const positionClassName = toggleButtonGroupButtonContextPositionClassName || '';
-  return /*#__PURE__*/_jsx(ToggleButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(ToggleButtonRoot, {
     className: clsx(contextProps.className, classes.root, className, positionClassName),
     disabled: disabled,
     focusRipple: !disableFocusRipple,
@@ -179,10 +177,10 @@ const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps
     onChange: onChange,
     value: value,
     ownerState: ownerState,
-    "aria-pressed": selected
-  }, other, {
+    "aria-pressed": selected,
+    ...other,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ToggleButton.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -86,4 +86,4 @@ export interface ToggleButtonGroupProps
  *
  * - [ToggleButtonGroup API](https://mui.com/material-ui/api/toggle-button-group/)
  */
-export default function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;
+export default function ToggleButtonGroup(props: ToggleButtonGroupProps): React.JSX.Element;

package/ToggleButtonGroup/ToggleButtonGroup.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -123,24 +120,25 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     name: 'MuiToggleButtonGroup'
   });
   const {
-      children,
-      className,
-      color = 'standard',
-      disabled = false,
-      exclusive = false,
-      fullWidth = false,
-      onChange,
-      orientation = 'horizontal',
-      size = 'medium',
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'standard',
+    disabled = false,
+    exclusive = false,
+    fullWidth = false,
+    onChange,
+    orientation = 'horizontal',
+    size = 'medium',
+    value,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disabled,
     fullWidth,
     orientation,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const handleChange = React.useCallback((event, buttonValue) => {
     if (!onChange) {
@@ -187,12 +185,12 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
     }
     return classes.middleButton;
   };
-  return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, _extends({
+  return /*#__PURE__*/_jsx(ToggleButtonGroupRoot, {
     role: "group",
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(ToggleButtonGroupContext.Provider, {
       value: context,
       children: validChildren.map((child, index) => {
@@ -207,7 +205,7 @@ const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGro
         }, index);
       })
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ToggleButtonGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Toolbar/Toolbar.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -69,24 +66,26 @@ const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
     name: 'MuiToolbar'
   });
   const {
-      className,
-      component = 'div',
-      disableGutters = false,
-      variant = 'regular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    disableGutters = false,
+    variant = 'regular',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     disableGutters,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ToolbarRoot, _extends({
+  return /*#__PURE__*/_jsx(ToolbarRoot, {
     as: component,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Toolbar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Tooltip/Tooltip.d.ts

@@ -24,8 +24,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -39,8 +38,7 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -225,4 +223,4 @@ export interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDiv
  *
  * - [Tooltip API](https://mui.com/material-ui/api/tooltip/)
  */
-export default function Tooltip(props: TooltipProps): JSX.Element;
+export default function Tooltip(props: TooltipProps): React.JSX.Element;

package/Tooltip/Tooltip.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["arrow", "children", "classes", "components", "componentsProps", "describeChild", "disableFocusListener", "disableHoverListener", "disableInteractive", "disableTouchListener", "enterDelay", "enterNextDelay", "enterTouchDelay", "followCursor", "id", "leaveDelay", "leaveTouchDelay", "onClose", "onOpen", "open", "placement", "PopperComponent", "PopperProps", "slotProps", "slots", "title", "TransitionComponent", "TransitionProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -318,35 +315,36 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     name: 'MuiTooltip'
   });
   const {
-      arrow = false,
-      children: childrenProp,
-      components = {},
-      componentsProps = {},
-      describeChild = false,
-      disableFocusListener = false,
-      disableHoverListener = false,
-      disableInteractive: disableInteractiveProp = false,
-      disableTouchListener = false,
-      enterDelay = 100,
-      enterNextDelay = 0,
-      enterTouchDelay = 700,
-      followCursor = false,
-      id: idProp,
-      leaveDelay = 0,
-      leaveTouchDelay = 1500,
-      onClose,
-      onOpen,
-      open: openProp,
-      placement = 'bottom',
-      PopperComponent: PopperComponentProp,
-      PopperProps = {},
-      slotProps = {},
-      slots = {},
-      title,
-      TransitionComponent: TransitionComponentProp = Grow,
-      TransitionProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    arrow = false,
+    children: childrenProp,
+    classes: classesProp,
+    components = {},
+    componentsProps = {},
+    describeChild = false,
+    disableFocusListener = false,
+    disableHoverListener = false,
+    disableInteractive: disableInteractiveProp = false,
+    disableTouchListener = false,
+    enterDelay = 100,
+    enterNextDelay = 0,
+    enterTouchDelay = 700,
+    followCursor = false,
+    id: idProp,
+    leaveDelay = 0,
+    leaveTouchDelay = 1500,
+    onClose,
+    onOpen,
+    open: openProp,
+    placement = 'bottom',
+    PopperComponent: PopperComponentProp,
+    PopperProps = {},
+    slotProps = {},
+    slots = {},
+    title,
+    TransitionComponent: TransitionComponentProp = Grow,
+    TransitionProps,
+    ...other
+  } = props;
 
   // to prevent runtime errors, developers will need to provide a child as a React element anyway.
   const children = /*#__PURE__*/React.isValidElement(childrenProp) ? childrenProp : /*#__PURE__*/_jsx("span", {
@@ -553,13 +551,17 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     nameOrDescProps['aria-label'] = titleIsString ? title : null;
     nameOrDescProps['aria-labelledby'] = open && !titleIsString ? id : null;
   }
-  const childrenProps = _extends({}, nameOrDescProps, other, children.props, {
+  const childrenProps = {
+    ...nameOrDescProps,
+    ...other,
+    ...children.props,
     className: clsx(other.className, children.props.className),
     onTouchStart: detectTouchStart,
-    ref: handleRef
-  }, followCursor ? {
-    onMouseMove: handleMouseMove
-  } : {});
+    ref: handleRef,
+    ...(followCursor ? {
+      onMouseMove: handleMouseMove
+    } : {})
+  };
   if (process.env.NODE_ENV !== 'production') {
     childrenProps['data-mui-internal-clone-element'] = true;
 
@@ -608,35 +610,44 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
     if (PopperProps.popperOptions?.modifiers) {
       tooltipModifiers = tooltipModifiers.concat(PopperProps.popperOptions.modifiers);
     }
-    return _extends({}, PopperProps.popperOptions, {
+    return {
+      ...PopperProps.popperOptions,
       modifiers: tooltipModifiers
-    });
+    };
   }, [arrowRef, PopperProps]);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     isRtl,
     arrow,
     disableInteractive,
     placement,
     PopperComponentProp,
     touch: ignoreNonTouchEvents.current
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const PopperComponent = slots.popper ?? components.Popper ?? TooltipPopper;
   const TransitionComponent = slots.transition ?? components.Transition ?? TransitionComponentProp ?? Grow;
   const TooltipComponent = slots.tooltip ?? components.Tooltip ?? TooltipTooltip;
   const ArrowComponent = slots.arrow ?? components.Arrow ?? TooltipArrow;
-  const popperProps = appendOwnerState(PopperComponent, _extends({}, PopperProps, slotProps.popper ?? componentsProps.popper, {
+  const popperProps = appendOwnerState(PopperComponent, {
+    ...PopperProps,
+    ...(slotProps.popper ?? componentsProps.popper),
     className: clsx(classes.popper, PopperProps?.className, (slotProps.popper ?? componentsProps.popper)?.className)
-  }), ownerState);
-  const transitionProps = appendOwnerState(TransitionComponent, _extends({}, TransitionProps, slotProps.transition ?? componentsProps.transition), ownerState);
-  const tooltipProps = appendOwnerState(TooltipComponent, _extends({}, slotProps.tooltip ?? componentsProps.tooltip, {
+  }, ownerState);
+  const transitionProps = appendOwnerState(TransitionComponent, {
+    ...TransitionProps,
+    ...(slotProps.transition ?? componentsProps.transition)
+  }, ownerState);
+  const tooltipProps = appendOwnerState(TooltipComponent, {
+    ...(slotProps.tooltip ?? componentsProps.tooltip),
     className: clsx(classes.tooltip, (slotProps.tooltip ?? componentsProps.tooltip)?.className)
-  }), ownerState);
-  const tooltipArrowProps = appendOwnerState(ArrowComponent, _extends({}, slotProps.arrow ?? componentsProps.arrow, {
+  }, ownerState);
+  const tooltipArrowProps = appendOwnerState(ArrowComponent, {
+    ...(slotProps.arrow ?? componentsProps.arrow),
     className: clsx(classes.arrow, (slotProps.arrow ?? componentsProps.arrow)?.className)
-  }), ownerState);
+  }, ownerState);
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, _extends({
+    children: [/*#__PURE__*/React.cloneElement(children, childrenProps), /*#__PURE__*/_jsx(PopperComponent, {
       as: PopperComponentProp ?? Popper,
       placement: placement,
       anchorEl: followCursor ? {
@@ -652,21 +663,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
       popperRef: popperRef,
       open: childNode ? open : false,
       id: id,
-      transition: true
-    }, interactiveWrapperListeners, popperProps, {
+      transition: true,
+      ...interactiveWrapperListeners,
+      ...popperProps,
       popperOptions: popperOptions,
       children: ({
         TransitionProps: TransitionPropsInner
-      }) => /*#__PURE__*/_jsx(TransitionComponent, _extends({
-        timeout: theme.transitions.duration.shorter
-      }, TransitionPropsInner, transitionProps, {
-        children: /*#__PURE__*/_jsxs(TooltipComponent, _extends({}, tooltipProps, {
-          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, _extends({}, tooltipArrowProps, {
+      }) => /*#__PURE__*/_jsx(TransitionComponent, {
+        timeout: theme.transitions.duration.shorter,
+        ...TransitionPropsInner,
+        ...transitionProps,
+        children: /*#__PURE__*/_jsxs(TooltipComponent, {
+          ...tooltipProps,
+          children: [title, arrow ? /*#__PURE__*/_jsx(ArrowComponent, {
+            ...tooltipArrowProps,
             ref: setArrowRef
-          })) : null]
-        }))
-      }))
-    }))]
+          }) : null]
+        })
+      })
+    })]
   });
 });
 process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */ = {
@@ -694,8 +709,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */
@@ -709,8 +723,7 @@ process.env.NODE_ENV !== "production" ? Tooltip.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    *
    * @default {}
    */

package/Typography/Typography.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["color"],
-  _excluded2 = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -56,7 +52,7 @@ export const TypographyRoot = styled('span', {
       variant
     },
     style: value
-  })), ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -122,30 +118,33 @@ const colorTransformations = {
   warning: null
 };
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
-  const _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiTypography'
-    }),
-    {
-      color
-    } = _useThemeProps,
-    themeProps = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+  const {
+    color,
+    ...themeProps
+  } = useThemeProps({
+    props: inProps,
+    name: 'MuiTypography'
+  });
   const textColor = colorTransformations[color];
-  const props = extendSxProp(_extends({}, themeProps, textColor !== null && {
-    color: textColor || color
-  }));
+  const props = extendSxProp({
+    ...themeProps,
+    ...(textColor !== null && {
+      color: textColor || color
+    })
+  });
   const {
-      align = 'inherit',
-      className,
-      component,
-      gutterBottom = false,
-      noWrap = false,
-      paragraph = false,
-      variant = 'body1',
-      variantMapping = defaultVariantMapping
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
-  const ownerState = _extends({}, props, {
+    align = 'inherit',
+    className,
+    component,
+    gutterBottom = false,
+    noWrap = false,
+    paragraph = false,
+    variant = 'body1',
+    variantMapping = defaultVariantMapping,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     align,
     color,
     className,
@@ -155,19 +154,22 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
     paragraph,
     variant,
     variantMapping
-  });
+  };
   const Component = component || (paragraph ? 'p' : variantMapping[variant] || defaultVariantMapping[variant]) || 'span';
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(TypographyRoot, _extends({
+  return /*#__PURE__*/_jsx(TypographyRoot, {
     as: Component,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other, {
+    className: clsx(classes.root, className),
+    ...other,
     ownerState: ownerState,
-    style: _extends({}, align !== 'inherit' && {
-      '--Typography-textAlign': align
-    }, other.style)
-  }));
+    style: {
+      ...(align !== 'inherit' && {
+        '--Typography-textAlign': align
+      }),
+      ...other.style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/Zoom/Zoom.d.ts

@@ -47,4 +47,4 @@ export interface ZoomProps extends TransitionProps {
  * - [Zoom API](https://mui.com/material-ui/api/zoom/)
  * - inherits [Transition API](https://reactcommunity.org/react-transition-group/transition/#Transition-props)
  */
-export default function Zoom(props: ZoomProps): JSX.Element;
+export default function Zoom(props: ZoomProps): React.JSX.Element;