@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/modern/Popper/Popper.js

@@ -1,15 +1,13 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
-import { Popper as BasePopper } from '@mui/base/Popper';
-import useTheme from '@mui/system/useThemeWithoutDefault';
+import { useRtl } from '@mui/system/RtlProvider';
 import refType from '@mui/utils/refType';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { styled, useThemeProps } from '../styles';
+import BasePopper from "./BasePopper.js";
+import { styled } from "../zero-styled/index.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
@@ -30,31 +28,31 @@ const PopperRoot = styled(BasePopper, {
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
-  const theme = useTheme();
-  const props = useThemeProps({
+  const isRtl = useRtl();
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiPopper'
   });
   const {
-      anchorEl,
-      component,
-      components,
-      componentsProps,
-      container,
-      disablePortal,
-      keepMounted,
-      modifiers,
-      open,
-      placement,
-      popperOptions,
-      popperRef,
-      transition,
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchorEl,
+    component,
+    components,
+    componentsProps,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition,
+    slots,
+    slotProps,
+    ...other
+  } = props;
   const RootComponent = slots?.root ?? components?.Root;
-  const otherProps = _extends({
+  const otherProps = {
     anchorEl,
     container,
     disablePortal,
@@ -64,18 +62,19 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     placement,
     popperOptions,
     popperRef,
-    transition
-  }, other);
-  return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    transition,
+    ...other
+  };
+  return /*#__PURE__*/_jsx(PopperRoot, {
     as: component,
-    direction: theme?.direction,
+    direction: isRtl ? 'rtl' : 'ltr',
     slots: {
       root: RootComponent
     },
-    slotProps: slotProps ?? componentsProps
-  }, otherProps, {
+    slotProps: slotProps ?? componentsProps,
+    ...otherProps,
     ref: ref
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -101,6 +100,8 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside the Popper.
    * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   components: PropTypes.shape({
@@ -108,6 +109,8 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
   }),
   /**
    * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    * @default {}
    */
   componentsProps: PropTypes.shape({

package/modern/Popper/index.js

@@ -1,3 +1,4 @@
 'use client';
 
-export { default } from './Popper';
+export { default } from "./Popper.js";
+export * from "./popperClasses.js";

package/modern/Popper/popperClasses.js

@@ -0,0 +1,7 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+export function getPopperUtilityClass(slot) {
+  return generateUtilityClass('MuiPopper', slot);
+}
+const popperClasses = generateUtilityClasses('MuiPopper', ['root']);
+export default popperClasses;

package/modern/Portal/Portal.js

@@ -0,0 +1,91 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { exactProp, HTMLElementType, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useForkRef as useForkRef, unstable_setRef as setRef, unstable_getReactNodeRef as getReactNodeRef } from '@mui/utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+function getContainer(container) {
+  return typeof container === 'function' ? container() : container;
+}
+
+/**
+ * Portals provide a first-class way to render children into a DOM node
+ * that exists outside the DOM hierarchy of the parent component.
+ *
+ * Demos:
+ *
+ * - [Portal](https://mui.com/material-ui/react-portal/)
+ *
+ * API:
+ *
+ * - [Portal API](https://mui.com/material-ui/api/portal/)
+ */
+const Portal = /*#__PURE__*/React.forwardRef(function Portal(props, forwardedRef) {
+  const {
+    children,
+    container,
+    disablePortal = false
+  } = props;
+  const [mountNode, setMountNode] = React.useState(null);
+  const handleRef = useForkRef(getReactNodeRef(children), forwardedRef);
+  useEnhancedEffect(() => {
+    if (!disablePortal) {
+      setMountNode(getContainer(container) || document.body);
+    }
+  }, [container, disablePortal]);
+  useEnhancedEffect(() => {
+    if (mountNode && !disablePortal) {
+      setRef(forwardedRef, mountNode);
+      return () => {
+        setRef(forwardedRef, null);
+      };
+    }
+    return undefined;
+  }, [forwardedRef, mountNode, disablePortal]);
+  if (disablePortal) {
+    if ( /*#__PURE__*/React.isValidElement(children)) {
+      const newProps = {
+        ref: handleRef
+      };
+      return /*#__PURE__*/React.cloneElement(children, newProps);
+    }
+    return /*#__PURE__*/_jsx(React.Fragment, {
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: mountNode ? /*#__PURE__*/ReactDOM.createPortal(children, mountNode) : mountNode
+  });
+});
+process.env.NODE_ENV !== "production" ? Portal.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The children to render into the `container`.
+   */
+  children: PropTypes.node,
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
+   * @default false
+   */
+  disablePortal: PropTypes.bool
+} : void 0;
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  Portal['propTypes' + ''] = exactProp(Portal.propTypes);
+}
+export default Portal;

package/modern/Portal/Portal.types.js

@@ -0,0 +1 @@
+export {};

package/modern/Portal/index.js

@@ -1 +1 @@
-export { Portal as default } from '@mui/base/Portal';
+export { default } from "./Portal.js";

package/modern/Radio/Radio.js

@@ -1,24 +1,22 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import SwitchBase from '../internal/SwitchBase';
-import RadioButtonIcon from './RadioButtonIcon';
-import capitalize from '../utils/capitalize';
-import createChainedFunction from '../utils/createChainedFunction';
-import useRadioGroup from '../RadioGroup/useRadioGroup';
-import radioClasses, { getRadioUtilityClass } from './radioClasses';
-import { rootShouldForwardProp } from '../styles/styled';
-import { styled, createUseThemeProps } from '../zero-styled';
+import SwitchBase from "../internal/SwitchBase.js";
+import RadioButtonIcon from "./RadioButtonIcon.js";
+import capitalize from "../utils/capitalize.js";
+import createChainedFunction from "../utils/createChainedFunction.js";
+import useRadioGroup from "../RadioGroup/useRadioGroup.js";
+import radioClasses, { getRadioUtilityClass } from "./radioClasses.js";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiRadio');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -28,7 +26,10 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
   };
-  return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
+  return {
+    ...classes,
+    ...composeClasses(slots, getRadioUtilityClass, classes)
+  };
 };
 const RadioRoot = styled(SwitchBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -40,7 +41,7 @@ const RadioRoot = styled(SwitchBase, {
     } = props;
     return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], styles[`color${capitalize(ownerState.color)}`]];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   color: (theme.vars || theme).palette.text.secondary,
@@ -57,7 +58,7 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color,
       disableRipple: false
@@ -67,7 +68,7 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -90,7 +91,7 @@ const RadioRoot = styled(SwitchBase, {
       }
     }
   }]
-}));
+})));
 function areEqualValues(a, b) {
   if (typeof b === 'object' && b !== null) {
     return a === b;
@@ -104,25 +105,28 @@ const defaultCheckedIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {
 });
 const defaultIcon = /*#__PURE__*/_jsx(RadioButtonIcon, {});
 const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiRadio'
   });
   const {
-      checked: checkedProp,
-      checkedIcon = defaultCheckedIcon,
-      color = 'primary',
-      icon = defaultIcon,
-      name: nameProp,
-      onChange: onChangeProp,
-      size = 'medium',
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    checked: checkedProp,
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon = defaultIcon,
+    name: nameProp,
+    onChange: onChangeProp,
+    size = 'medium',
+    className,
+    disableRipple = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    disableRipple,
     color,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
@@ -136,7 +140,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  return /*#__PURE__*/_jsx(RadioRoot, _extends({
+  return /*#__PURE__*/_jsx(RadioRoot, {
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
       fontSize: defaultIcon.props.fontSize ?? size
@@ -150,8 +154,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checked: checked,
     onChange: onChange,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Radio/RadioButtonIcon.js

@@ -1,12 +1,12 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
-import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import { rootShouldForwardProp } from '../styles/styled';
-import { styled } from '../zero-styled';
+import RadioButtonUncheckedIcon from "../internal/svg-icons/RadioButtonUnchecked.js";
+import RadioButtonCheckedIcon from "../internal/svg-icons/RadioButtonChecked.js";
+import rootShouldForwardProp from "../styles/rootShouldForwardProp.js";
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
@@ -18,7 +18,7 @@ const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   // Scale applied to prevent dot misalignment in Safari
   transform: 'scale(1)'
 });
-const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
+const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(memoTheme(({
   theme
 }) => ({
   left: 0,
@@ -40,7 +40,7 @@ const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
       })
     }
   }]
-}));
+})));
 
 /**
  * @ignore - internal component.
@@ -51,9 +51,10 @@ function RadioButtonIcon(props) {
     classes = {},
     fontSize
   } = props;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     checked
-  });
+  };
   return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
     className: classes.root,
     ownerState: ownerState,

package/modern/Radio/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Radio';
-export { default as radioClasses } from './radioClasses';
-export * from './radioClasses';
+export { default } from "./Radio.js";
+export { default as radioClasses } from "./radioClasses.js";
+export * from "./radioClasses.js";

package/modern/RadioGroup/RadioGroup.js

@@ -1,18 +1,15 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import FormGroup from '../FormGroup';
-import { getRadioGroupUtilityClass } from './radioGroupClasses';
-import useForkRef from '../utils/useForkRef';
-import useControlled from '../utils/useControlled';
-import RadioGroupContext from './RadioGroupContext';
-import useId from '../utils/useId';
+import FormGroup from "../FormGroup/index.js";
+import { getRadioGroupUtilityClass } from "./radioGroupClasses.js";
+import useForkRef from "../utils/useForkRef.js";
+import useControlled from "../utils/useControlled.js";
+import RadioGroupContext from "./RadioGroupContext.js";
+import useId from "../utils/useId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = props => {
   const {
@@ -27,17 +24,17 @@ const useUtilityClasses = props => {
 };
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
-      // private
-      // eslint-disable-next-line react/prop-types
-      actions,
-      children,
-      className,
-      defaultValue,
-      name: nameProp,
-      onChange,
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions,
+    children,
+    className,
+    defaultValue,
+    name: nameProp,
+    onChange,
+    value: valueProp,
+    ...other
+  } = props;
   const rootRef = React.useRef(null);
   const classes = useUtilityClasses(props);
   const [value, setValueState] = useControlled({
@@ -70,13 +67,13 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
   }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(FormGroup, _extends({
+    children: /*#__PURE__*/_jsx(FormGroup, {
       role: "radiogroup",
       ref: handleRef,
-      className: clsx(classes.root, className)
-    }, other, {
+      className: clsx(classes.root, className),
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes */ = {

package/modern/RadioGroup/index.js

@@ -1,6 +1,6 @@
 'use client';
 
-export { default } from './RadioGroup';
-export { default as useRadioGroup } from './useRadioGroup';
-export { default as radioGroupClasses } from './radioGroupClasses';
-export * from './radioGroupClasses';
+export { default } from "./RadioGroup.js";
+export { default as useRadioGroup } from "./useRadioGroup.js";
+export { default as radioGroupClasses } from "./radioGroupClasses.js";
+export * from "./radioGroupClasses.js";

package/modern/RadioGroup/useRadioGroup.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import RadioGroupContext from './RadioGroupContext';
+import RadioGroupContext from "./RadioGroupContext.js";
 export default function useRadioGroup() {
   return React.useContext(RadioGroupContext);
 }