@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/modern/Typography/Typography.js

@@ -1,18 +1,15 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["align", "className", "component", "gutterBottom", "noWrap", "paragraph", "variant", "variantMapping"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { extendSxProp } from '@mui/system/styleFunctionSx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getTypographyUtilityClass } from './typographyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTypography');
 const useUtilityClasses = ownerState => {
   const {
     align,
@@ -37,23 +34,62 @@ export const TypographyRoot = styled('span', {
     return [styles.root, ownerState.variant && styles[ownerState.variant], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.noWrap && styles.noWrap, ownerState.gutterBottom && styles.gutterBottom, ownerState.paragraph && styles.paragraph];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  margin: 0
-}, ownerState.variant === 'inherit' && {
-  // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-  font: 'inherit'
-}, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
-  textAlign: ownerState.align
-}, ownerState.noWrap && {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-}, ownerState.gutterBottom && {
-  marginBottom: '0.35em'
-}, ownerState.paragraph && {
-  marginBottom: 16
+  theme
+}) => ({
+  margin: 0,
+  variants: [{
+    props: {
+      variant: 'inherit'
+    },
+    style: {
+      // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
+      font: 'inherit',
+      lineHeight: 'inherit',
+      letterSpacing: 'inherit'
+    }
+  }, ...Object.entries(theme.typography).filter(([variant, value]) => variant !== 'inherit' && value && typeof value === 'object').map(([variant, value]) => ({
+    props: {
+      variant
+    },
+    style: value
+  })), ...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.align !== 'inherit',
+    style: {
+      textAlign: 'var(--Typography-textAlign)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.noWrap,
+    style: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.gutterBottom,
+    style: {
+      marginBottom: '0.35em'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.paragraph,
+    style: {
+      marginBottom: 16
+    }
+  }]
 }));
 const defaultVariantMapping = {
   h1: 'h1',
@@ -69,38 +105,46 @@ const defaultVariantMapping = {
   inherit: 'p'
 };
 
-// TODO v6: deprecate these color values in v5.x and remove the transformation in v6
+// TODO v7: remove this transformation and `extendSxProp`
 const colorTransformations = {
-  primary: 'primary.main',
   textPrimary: 'text.primary',
-  secondary: 'secondary.main',
   textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
+  // For the main palette, the color will be applied by the `...Object.entries(theme.palette)` clause in the TypographyRoot's styles
+  primary: null,
+  secondary: null,
+  error: null,
+  info: null,
+  success: null,
+  warning: null
 };
 const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, ref) {
-  const themeProps = useThemeProps({
+  const {
+    color,
+    ...themeProps
+  } = useThemeProps({
     props: inProps,
     name: 'MuiTypography'
   });
-  const color = transformDeprecatedColors(themeProps.color);
-  const props = extendSxProp(_extends({}, themeProps, {
-    color
-  }));
+  const textColor = colorTransformations[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, _excluded);
-  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,
@@ -110,15 +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,
     ownerState: ownerState,
-    className: clsx(classes.root, className)
-  }, other));
+    style: {
+      ...(align !== 'inherit' && {
+        '--Typography-textAlign': align
+      }),
+      ...other.style
+    }
+  });
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -165,6 +216,10 @@ process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes
    * @default false
    */
   paragraph: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/modern/Zoom/Zoom.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 = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
@@ -32,23 +29,23 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      addEndListener,
-      appear = true,
-      children,
-      easing,
-      in: inProp,
-      onEnter,
-      onEntered,
-      onEntering,
-      onExit,
-      onExited,
-      onExiting,
-      style,
-      timeout = defaultTimeout,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Transition
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    addEndListener,
+    appear = true,
+    children,
+    easing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = defaultTimeout,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, children.ref, ref);
   const normalizedTransitionCallback = callback => maybeIsAppearing => {
@@ -103,7 +100,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(TransitionComponent, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -114,18 +111,22 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
-    timeout: timeout
-  }, other, {
+    timeout: timeout,
+    ...other,
     children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
-        style: _extends({
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: {
           transform: 'scale(0)',
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles[state], style, children.props.style),
-        ref: handleRef
-      }, childProps));
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...styles[state],
+          ...style,
+          ...children.props.style
+        },
+        ref: handleRef,
+        ...childProps
+      });
     }
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Zoom.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.0
+ * @mui/material v6.0.0-alpha.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/internal/SwitchBase.js

@@ -1,15 +1,13 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["autoFocus", "checked", "checkedIcon", "className", "defaultChecked", "disabled", "disableFocusRipple", "edge", "icon", "id", "inputProps", "inputRef", "name", "onBlur", "onChange", "onFocus", "readOnly", "required", "tabIndex", "type", "value"];
 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 capitalize from '../utils/capitalize';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
 import useControlled from '../utils/useControlled';
 import useFormControl from '../FormControl/useFormControl';
 import ButtonBase from '../ButtonBase';
@@ -28,16 +26,43 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = styled(ButtonBase)(({
-  ownerState
-}) => _extends({
+const SwitchBaseRoot = styled(ButtonBase)({
   padding: 9,
-  borderRadius: '50%'
-}, ownerState.edge === 'start' && {
-  marginLeft: ownerState.size === 'small' ? -3 : -12
-}, ownerState.edge === 'end' && {
-  marginRight: ownerState.size === 'small' ? -3 : -12
-}));
+  borderRadius: '50%',
+  variants: [{
+    props: {
+      edge: 'start',
+      size: 'small'
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: ({
+      edge,
+      ownerState
+    }) => edge === 'start' && ownerState.size !== 'small',
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: 'end',
+      size: 'small'
+    },
+    style: {
+      marginRight: -3
+    }
+  }, {
+    props: ({
+      edge,
+      ownerState
+    }) => edge === 'end' && ownerState.size !== 'small',
+    style: {
+      marginRight: -12
+    }
+  }]
+});
 const SwitchBaseInput = styled('input', {
   shouldForwardProp: rootShouldForwardProp
 })({
@@ -58,29 +83,29 @@ const SwitchBaseInput = styled('input', {
  */
 const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref) {
   const {
-      autoFocus,
-      checked: checkedProp,
-      checkedIcon,
-      className,
-      defaultChecked,
-      disabled: disabledProp,
-      disableFocusRipple = false,
-      edge = false,
-      icon,
-      id,
-      inputProps,
-      inputRef,
-      name,
-      onBlur,
-      onChange,
-      onFocus,
-      readOnly,
-      required = false,
-      tabIndex,
-      type,
-      value
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    autoFocus,
+    checked: checkedProp,
+    checkedIcon,
+    className,
+    defaultChecked,
+    disabled: disabledProp,
+    disableFocusRipple = false,
+    edge = false,
+    icon,
+    id,
+    inputProps,
+    inputRef,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    readOnly,
+    required = false,
+    tabIndex,
+    type,
+    value,
+    ...other
+  } = props;
   const [checked, setCheckedState] = useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -123,14 +148,15 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     }
   }
   const hasLabelFor = type === 'checkbox' || type === 'radio';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     checked,
     disabled,
     disableFocusRipple,
     edge
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(SwitchBaseRoot, _extends({
+  return /*#__PURE__*/_jsxs(SwitchBaseRoot, {
     component: "span",
     className: clsx(classes.root, className),
     centerRipple: true,
@@ -141,9 +167,9 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
     onFocus: handleFocus,
     onBlur: handleBlur,
     ownerState: ownerState,
-    ref: ref
-  }, other, {
-    children: [/*#__PURE__*/_jsx(SwitchBaseInput, _extends({
+    ref: ref,
+    ...other,
+    children: [/*#__PURE__*/_jsx(SwitchBaseInput, {
       autoFocus: autoFocus,
       checked: checkedProp,
       defaultChecked: defaultChecked,
@@ -157,11 +183,13 @@ const SwitchBase = /*#__PURE__*/React.forwardRef(function SwitchBase(props, ref)
       required: required,
       ownerState: ownerState,
       tabIndex: tabIndex,
-      type: type
-    }, type === 'checkbox' && value === undefined ? {} : {
-      value
-    }, inputProps)), checked ? checkedIcon : icon]
-  }));
+      type: type,
+      ...(type === 'checkbox' && value === undefined ? {} : {
+        value
+      }),
+      ...inputProps
+    }), checked ? checkedIcon : icon]
+  });
 });
 
 // NB: If changed, please update Checkbox, Switch and Radio

package/modern/locale/index.js

@@ -991,7 +991,7 @@ export const enUS = {
       },
       labelRowsPerPage: 'Rows per page:',
       labelDisplayedRows: ({ from, to, count }) =>
-  `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
+  `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`, 
     }},
     MuiRating: { defaultProps: {
       getLabelText: value => `${value} Star${value !== 1 ? 's' : ''}`,
@@ -1864,7 +1864,7 @@ export const isIS = {
           from,
           to,
           count
-        }) => `${from}–${to} af ${count !== -1 ? count : `fleiri enn ${to}`}`
+        }) => `${from}–${to} af ${count !== -1 ? count : `fleiri en ${to}`}`
       }
     },
     MuiRating: {
@@ -3037,6 +3037,79 @@ export const plPL = {
     }
   }
 };
+export const psAF = {
+  components: {
+    MuiBreadcrumbs: {
+      defaultProps: {
+        expandText: 'لاره ښکاره کړه'
+      }
+    },
+    MuiTablePagination: {
+      defaultProps: {
+        getItemAriaLabel: type => {
+          if (type === 'first') {
+            return 'لومړۍ پاڼې ته لاړ شه';
+          }
+          if (type === 'last') {
+            return 'ورستۍ پاڼې ته لاړ شه';
+          }
+          if (type === 'next') {
+            return 'بلی پاڼې ته لاړ شه';
+          }
+          // if (type === 'previous') {
+          return 'مخکینۍ پاڼې ته لاړ شه';
+        },
+        labelRowsPerPage: 'په پاڼه کی د کرښو شمیر',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${count !== -1 ? count : `${to} زیات له`} ${to}- ${from} د`
+      }
+    },
+    MuiRating: {
+      defaultProps: {
+        getLabelText: value => `${value} ستوری`,
+        emptyLabelText: 'خالی'
+      }
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        clearText: 'پاک کول',
+        closeText: 'تړل',
+        loadingText: '... لوډ کیږی',
+        noOptionsText: 'بی پایلی',
+        openText: 'خلاصول'
+      }
+    },
+    MuiAlert: {
+      defaultProps: {
+        closeText: 'تړل'
+      }
+    },
+    MuiPagination: {
+      defaultProps: {
+        'aria-label': 'د پاڼو ترتیب',
+        getItemAriaLabel: (type, page, selected) => {
+          if (type === 'page') {
+            return `${selected ? '' : ' ته لاړ شه'}پاڼې ${page}`;
+          }
+          if (type === 'first') {
+            return 'لومړۍ پاڼی ته لاړ شه';
+          }
+          if (type === 'last') {
+            return 'وروستۍ پاڼې ته لاړه شه';
+          }
+          if (type === 'next') {
+            return 'بلې پاڼې ته لاړ شه';
+          }
+          // if (type === 'previous') {
+          return 'مخکنۍ پاڼې ته لاړ شه';
+        }
+      }
+    }
+  }
+};
 export const ptBR = {
   components: {
     MuiBreadcrumbs: {

package/modern/styles/CssVarsProvider.js

@@ -1,15 +1,13 @@
 'use client';
 
-// do not remove the following import (https://github.com/microsoft/TypeScript/issues/29808#issuecomment-1320713018)
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// @ts-ignore
-import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
 import styleFunctionSx from '@mui/system/styleFunctionSx';
-import experimental_extendTheme from './experimental_extendTheme';
+import extendTheme from './extendTheme';
 import createTypography from './createTypography';
 import THEME_ID from './identifier';
-const defaultTheme = experimental_extendTheme();
+import { jsx as _jsx } from "react/jsx-runtime";
+const defaultTheme = extendTheme();
 const {
   CssVarsProvider,
   useColorScheme,
@@ -25,9 +23,10 @@ const {
     dark: 'dark'
   },
   resolveTheme: theme => {
-    const newTheme = _extends({}, theme, {
+    const newTheme = {
+      ...theme,
       typography: createTypography(theme.palette, theme.typography)
-    });
+    };
     newTheme.unstable_sx = function sx(props) {
       return styleFunctionSx({
         sx: props,
@@ -37,4 +36,16 @@ const {
     return newTheme;
   }
 });
-export { useColorScheme, getInitColorSchemeScript, CssVarsProvider as Experimental_CssVarsProvider };
+let warnedOnce = false;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Experimental_CssVarsProvider(props) {
+  if (!warnedOnce) {
+    console.warn(['MUI: The Experimental_CssVarsProvider component has been stabilized.', '', "You should use `import { CssVarsProvider } from '@mui/material/styles'`"].join('\n'));
+    warnedOnce = true;
+  }
+  return /*#__PURE__*/_jsx(CssVarsProvider, {
+    ...props
+  });
+}
+export { useColorScheme, getInitColorSchemeScript, CssVarsProvider, Experimental_CssVarsProvider };

package/modern/styles/ThemeProvider.js

@@ -1,23 +1,20 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider as SystemThemeProvider } from '@mui/system';
 import THEME_ID from './identifier';
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThemeProvider(_ref) {
-  let {
-      theme: themeInput
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+export default function ThemeProvider({
+  theme: themeInput,
+  ...props
+}) {
   const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
+  return /*#__PURE__*/_jsx(SystemThemeProvider, {
+    ...props,
     themeId: scopedTheme ? THEME_ID : undefined,
     theme: scopedTheme || themeInput
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
   /**