@mui/material 5.4.1 → 5.4.2

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.1
+/** @license MUI v5.4.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -6281,17 +6281,6 @@
     return acc;
   }, {});
 
-  function getThemeValue(prop, value, theme) {
-    const inputProps = {
-      [prop]: value,
-      theme
-    };
-    const styleFunction = propToStyleFunction[prop];
-    return styleFunction ? styleFunction(inputProps) : {
-      [prop]: value
-    };
-  }
-
   function objectsHaveSameKeys(...objects) {
     const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
     const union = new Set(allKeys);
@@ -6300,72 +6289,100 @@
 
   function callIfFn(maybeFn, arg) {
     return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
-  }
+  } // eslint-disable-next-line @typescript-eslint/naming-convention
 
-  function styleFunctionSx(props) {
-    const {
-      sx,
-      theme = {}
-    } = props || {};
 
-    if (!sx) {
-      return null; // emotion & styled-components will neglect null
-    }
-    /*
-     * Receive `sxInput` as object or callback
-     * and then recursively check keys & values to create media query object styles.
-     * (the result will be used in `styled`)
-     */
+  function unstable_createStyleFunctionSx(styleFunctionMapping$1 = styleFunctionMapping) {
+    const propToStyleFunction = Object.keys(styleFunctionMapping$1).reduce((acc, styleFnName) => {
+      styleFunctionMapping$1[styleFnName].filterProps.forEach(propName => {
+        acc[propName] = styleFunctionMapping$1[styleFnName];
+      });
+      return acc;
+    }, {});
 
+    function getThemeValue(prop, value, theme) {
+      const inputProps = {
+        [prop]: value,
+        theme
+      };
+      const styleFunction = propToStyleFunction[prop];
+      return styleFunction ? styleFunction(inputProps) : {
+        [prop]: value
+      };
+    }
 
-    function traverse(sxInput) {
-      let sxObject = sxInput;
+    function styleFunctionSx(props) {
+      const {
+        sx,
+        theme = {}
+      } = props || {};
 
-      if (typeof sxInput === 'function') {
-        sxObject = sxInput(theme);
-      } else if (typeof sxInput !== 'object') {
-        // value
-        return sxInput;
+      if (!sx) {
+        return null; // emotion & styled-components will neglect null
       }
+      /*
+       * Receive `sxInput` as object or callback
+       * and then recursively check keys & values to create media query object styles.
+       * (the result will be used in `styled`)
+       */
 
-      const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
-      const breakpointsKeys = Object.keys(emptyBreakpoints);
-      let css = emptyBreakpoints;
-      Object.keys(sxObject).forEach(styleKey => {
-        const value = callIfFn(sxObject[styleKey], theme);
 
-        if (value !== null && value !== undefined) {
-          if (typeof value === 'object') {
-            if (propToStyleFunction[styleKey]) {
-              css = merge(css, getThemeValue(styleKey, value, theme));
-            } else {
-              const breakpointsValues = handleBreakpoints({
-                theme
-              }, value, x => ({
-                [styleKey]: x
-              }));
-
-              if (objectsHaveSameKeys(breakpointsValues, value)) {
-                css[styleKey] = styleFunctionSx({
-                  sx: value,
-                  theme
-                });
+      function traverse(sxInput) {
+        let sxObject = sxInput;
+
+        if (typeof sxInput === 'function') {
+          sxObject = sxInput(theme);
+        } else if (typeof sxInput !== 'object') {
+          // value
+          return sxInput;
+        }
+
+        if (!sxObject) {
+          return null;
+        }
+
+        const emptyBreakpoints = createEmptyBreakpointObject(theme.breakpoints);
+        const breakpointsKeys = Object.keys(emptyBreakpoints);
+        let css = emptyBreakpoints;
+        Object.keys(sxObject).forEach(styleKey => {
+          const value = callIfFn(sxObject[styleKey], theme);
+
+          if (value !== null && value !== undefined) {
+            if (typeof value === 'object') {
+              if (propToStyleFunction[styleKey]) {
+                css = merge(css, getThemeValue(styleKey, value, theme));
               } else {
-                css = merge(css, breakpointsValues);
+                const breakpointsValues = handleBreakpoints({
+                  theme
+                }, value, x => ({
+                  [styleKey]: x
+                }));
+
+                if (objectsHaveSameKeys(breakpointsValues, value)) {
+                  css[styleKey] = styleFunctionSx({
+                    sx: value,
+                    theme
+                  });
+                } else {
+                  css = merge(css, breakpointsValues);
+                }
               }
+            } else {
+              css = merge(css, getThemeValue(styleKey, value, theme));
             }
-          } else {
-            css = merge(css, getThemeValue(styleKey, value, theme));
           }
-        }
-      });
-      return removeUnusedBreakpoints(breakpointsKeys, css);
+        });
+        return removeUnusedBreakpoints(breakpointsKeys, css);
+      }
+
+      return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
     }
 
-    return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
+    return styleFunctionSx;
   }
-
+  const styleFunctionSx = unstable_createStyleFunctionSx();
   styleFunctionSx.filterProps = ['sx'];
+  var defaultStyleFunctionSx = styleFunctionSx;
 
   const _excluded$2k = ["sx"];
 
@@ -6420,7 +6437,7 @@
   function sx(styles) {
     return ({
       theme
-    }) => styleFunctionSx({
+    }) => defaultStyleFunctionSx({
       sx: styles,
       theme
     });
@@ -6469,6 +6486,21 @@
 
   const _excluded$2j = ["values", "unit", "step"];
 
+  const sortBreakpointsValues = values => {
+    const breakpointsAsArray = Object.keys(values).map(key => ({
+      key,
+      val: values[key]
+    })) || []; // Sort in ascending order
+
+    breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+    return breakpointsAsArray.reduce((acc, obj) => {
+      return _extends({}, acc, {
+        [obj.key]: obj.val
+      });
+    }, {});
+  }; // Keep in mind that @media is inclusive by the CSS specification.
+
+
   function createBreakpoints(breakpoints) {
     const {
       // The breakpoint **start** at this value.
@@ -6490,7 +6522,8 @@
     } = breakpoints,
           other = _objectWithoutPropertiesLoose(breakpoints, _excluded$2j);
 
-    const keys = Object.keys(values);
+    const sortedValues = sortBreakpointsValues(values);
+    const keys = Object.keys(sortedValues);
 
     function up(key) {
       const value = typeof values[key] === 'number' ? values[key] : key;
@@ -6532,7 +6565,7 @@
 
     return _extends({
       keys,
-      values,
+      values: sortedValues,
       up,
       down,
       between,
@@ -6715,7 +6748,8 @@
     const {
       defaultTheme,
       defaultClassName = 'MuiBox-root',
-      generateClassName
+      generateClassName,
+      styleFunctionSx = defaultStyleFunctionSx
     } = options;
     const BoxRoot = styled$2('div')(styleFunctionSx);
     const Box = /*#__PURE__*/React__namespace.forwardRef(function Box(inProps, ref) {
@@ -6847,7 +6881,8 @@
     }
 
     return variantsStyles;
-  };
+  }; // Update /system/styled/#api in case if this changes
+
 
   function shouldForwardProp(prop) {
     return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
@@ -6862,7 +6897,8 @@
     const {
       defaultTheme = systemDefaultTheme,
       rootShouldForwardProp = shouldForwardProp,
-      slotShouldForwardProp = shouldForwardProp
+      slotShouldForwardProp = shouldForwardProp,
+      styleFunctionSx = defaultStyleFunctionSx
     } = input;
     return (tag, inputOptions = {}) => {
       const {
@@ -12739,7 +12775,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       otherHandlers == null ? void 0 : (_otherHandlers$onFocu = otherHandlers.onFocus) == null ? void 0 : _otherHandlers$onFocu.call(otherHandlers, event);
     };
 
-    const createHandleHidenInputBlur = otherHandlers => event => {
+    const createHandleHiddenInputBlur = otherHandlers => event => {
       var _otherHandlers$onBlur;
 
       handleBlurVisible(event);
@@ -13130,7 +13166,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       const ownEventHandlers = {
         onChange: createHandleHiddenInputChange(otherHandlers || {}),
         onFocus: createHandleHiddenInputFocus(otherHandlers || {}),
-        onBlur: createHandleHidenInputBlur(otherHandlers || {})
+        onBlur: createHandleHiddenInputBlur(otherHandlers || {})
       };
 
       const mergedEventHandlers = _extends({}, otherHandlers, ownEventHandlers);
@@ -39638,7 +39674,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   } ;
   var SelectInput$1 = SelectInput;
 
-  var _Input, _FilledInput;
+  var _StyledInput, _StyledFilledInput;
 
   const _excluded$D = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
 
@@ -39649,6 +39685,15 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     return classes;
   };
 
+  const styledRootConfig = {
+    name: 'MuiSelect',
+    overridesResolver: (props, styles) => styles.root,
+    shouldForwardProp: prop => rootShouldForwardProp(prop) && prop !== 'variant',
+    slot: 'Root'
+  };
+  const StyledInput = styled$1(Input$1, styledRootConfig)('');
+  const StyledOutlinedInput = styled$1(OutlinedInput$1, styledRootConfig)('');
+  const StyledFilledInput = styled$1(FilledInput$1, styledRootConfig)('');
   const Select = /*#__PURE__*/React__namespace.forwardRef(function Select(inProps, ref) {
     const props = useThemeProps({
       name: 'MuiSelect',
@@ -39676,7 +39721,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       open,
       renderValue,
       SelectDisplayProps,
-      variant: variantProps = 'outlined'
+      variant: variantProp = 'outlined'
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$D);
 
@@ -39687,16 +39732,17 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       muiFormControl,
       states: ['variant']
     });
-    const variant = fcs.variant || variantProps;
+    const variant = fcs.variant || variantProp;
     const InputComponent = input || {
-      standard: _Input || (_Input = /*#__PURE__*/jsxRuntime_1(Input$1, {})),
-      outlined: /*#__PURE__*/jsxRuntime_1(OutlinedInput$1, {
+      standard: _StyledInput || (_StyledInput = /*#__PURE__*/jsxRuntime_1(StyledInput, {})),
+      outlined: /*#__PURE__*/jsxRuntime_1(StyledOutlinedInput, {
         label: label
       }),
-      filled: _FilledInput || (_FilledInput = /*#__PURE__*/jsxRuntime_1(FilledInput$1, {}))
+      filled: _StyledFilledInput || (_StyledFilledInput = /*#__PURE__*/jsxRuntime_1(StyledFilledInput, {}))
     }[variant];
 
     const ownerState = _extends({}, props, {
+      variant,
       classes: classesProp
     });
 
@@ -39735,7 +39781,8 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       notched: true
     } : {}, {
       ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className)
+      className: clsx(InputComponent.props.className, className),
+      variant
     }, other));
   });
   Select.propTypes
@@ -49535,12 +49582,18 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
     fullWidth: PropTypes.bool,
 
     /**
-     * @ignore
+     * Callback fired when the state changes.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
      */
     onChange: PropTypes.func,
 
     /**
-     * @ignore
+     * Callback fired when the button is clicked.
+     *
+     * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
+     * @param {any} value of the selected button.
      */
     onClick: PropTypes.func,
 
@@ -49972,6 +50025,7 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   exports.Paper = Paper$1;
   exports.Popover = Popover$1;
   exports.Popper = Popper$1;
+  exports.Portal = Portal$1;
   exports.Radio = Radio$1;
   exports.RadioGroup = RadioGroup$1;
   exports.Rating = Rating$1;