@mui/material 5.10.2 → 5.10.3

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/transitions/utils.js

@@ -1,5 +1,16 @@
-export const reflow = node => node.scrollTop;
-export function getTransitionProps(props, options) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTransitionProps = getTransitionProps;
+exports.reflow = void 0;
+
+const reflow = node => node.scrollTop;
+
+exports.reflow = reflow;
+
+function getTransitionProps(props, options) {
   var _style$transitionDura, _style$transitionTimi;
 
   const {

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.10.2
+/** @license MUI v5.10.3
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -423,7 +423,7 @@
     function(){ return (new Date()).getTime() };
 
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -436,7 +436,6 @@
 
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
 
@@ -465,7 +464,7 @@
 
   var _extends_1 = createCommonjsModule(function (module) {
   function _extends() {
-    module.exports = _extends = Object.assign || function (target) {
+    module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -676,11 +675,6 @@
     };
   };
 
-  var last = function last(arr) {
-    return arr.length ? arr[arr.length - 1] : null;
-  }; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244
-
-
   var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
     var previous = 0;
     var character = 0;
@@ -808,19 +802,64 @@
   var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason';
 
   var isIgnoringComment = function isIgnoringComment(element) {
-    return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
+    return element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1;
   };
 
   var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) {
     return function (element, index, children) {
-      if (element.type !== 'rule') return;
+      if (element.type !== 'rule' || cache.compat) return;
       var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g);
 
-      if (unsafePseudoClasses && cache.compat !== true) {
-        var prevElement = index > 0 ? children[index - 1] : null;
+      if (unsafePseudoClasses) {
+        var isNested = element.parent === children[0]; // in nested rules comments become children of the "auto-inserted" rule
+        //
+        // considering this input:
+        // .a {
+        //   .b /* comm */ {}
+        //   color: hotpink;
+        // }
+        // we get output corresponding to this:
+        // .a {
+        //   & {
+        //     /* comm */
+        //     color: hotpink;
+        //   }
+        //   .b {}
+        // }
+
+        var commentContainer = isNested ? children[0].children : // global rule at the root level
+        children;
+
+        for (var i = commentContainer.length - 1; i >= 0; i--) {
+          var node = commentContainer[i];
+
+          if (node.line < element.line) {
+            break;
+          } // it is quite weird but comments are *usually* put at `column: element.column - 1`
+          // so we seek *from the end* for the node that is earlier than the rule's `element` and check that
+          // this will also match inputs like this:
+          // .a {
+          //   /* comm */
+          //   .b {}
+          // }
+          //
+          // but that is fine
+          //
+          // it would be the easiest to change the placement of the comment to be the first child of the rule:
+          // .a {
+          //   .b { /* comm */ }
+          // }
+          // with such inputs we wouldn't have to search for the comment at all
+          // TODO: consider changing this comment placement in the next major version
+
+
+          if (node.column < element.column) {
+            if (isIgnoringComment(node)) {
+              return;
+            }
 
-        if (prevElement && isIgnoringComment(last(prevElement.children))) {
-          return;
+            break;
+          }
         }
 
         unsafePseudoClasses.forEach(function (unsafePseudoClass) {
@@ -7828,7 +7867,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
   }
 
-  function resolveValue(key, defaultValue) {
+  function initializeValue(key, defaultValue) {
     if (typeof window === 'undefined') {
       return undefined;
     }
@@ -7837,6 +7876,11 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     try {
       value = localStorage.getItem(key) || undefined;
+
+      if (!value) {
+        // the first time that user enters the site.
+        localStorage.setItem(key, defaultValue);
+      }
     } catch (e) {// Unsupported
     }
 
@@ -7855,23 +7899,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     } = options;
     const joinedColorSchemes = supportedColorSchemes.join(',');
     const [state, setState] = React__namespace.useState(() => {
-      const initialMode = resolveValue(modeStorageKey, defaultMode);
+      const initialMode = initializeValue(modeStorageKey, defaultMode);
+      const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+      const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
       return {
         mode: initialMode,
         systemMode: getSystemMode(initialMode),
-        lightColorScheme: resolveValue(`${colorSchemeStorageKey}-light`) || defaultLightColorScheme,
-        darkColorScheme: resolveValue(`${colorSchemeStorageKey}-dark`) || defaultDarkColorScheme
+        lightColorScheme,
+        darkColorScheme
       };
     });
     const colorScheme = getColorScheme(state);
     const setMode = React__namespace.useCallback(mode => {
       setState(currentState => {
-        const newMode = !mode ? defaultMode : mode;
-
         if (mode === currentState.mode) {
+          // do nothing if mode does not change
           return currentState;
         }
 
+        const newMode = !mode ? defaultMode : mode;
+
         try {
           localStorage.setItem(modeStorageKey, newMode);
         } catch (e) {// Unsupported
@@ -7884,20 +7931,26 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       });
     }, [modeStorageKey, defaultMode]);
     const setColorScheme = React__namespace.useCallback(value => {
-      if (!value || typeof value === 'string') {
+      if (!value) {
+        setState(currentState => {
+          try {
+            localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
+            localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+          } catch (e) {// Unsupported
+          }
+
+          return _extends({}, currentState, {
+            lightColorScheme: defaultLightColorScheme,
+            darkColorScheme: defaultDarkColorScheme
+          });
+        });
+      } else if (typeof value === 'string') {
         if (value && !joinedColorSchemes.includes(value)) {
           console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
         } else {
           setState(currentState => {
             const newState = _extends({}, currentState);
 
-            if (!value) {
-              // reset to default color scheme
-              newState.lightColorScheme = defaultLightColorScheme;
-              newState.darkColorScheme = defaultDarkColorScheme;
-              return newState;
-            }
-
             processState(currentState, mode => {
               try {
                 localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
@@ -7915,33 +7968,41 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
             return newState;
           });
         }
-      } else if (value.light && !joinedColorSchemes.includes(value.light) || value.dark && !joinedColorSchemes.includes(value.dark)) {
-        console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
       } else {
         setState(currentState => {
           const newState = _extends({}, currentState);
 
-          if (value.light || value.light === null) {
-            newState.lightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
-          }
+          const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
+          const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
 
-          if (value.dark || value.dark === null) {
-            newState.darkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
+          if (newLightColorScheme) {
+            if (!joinedColorSchemes.includes(newLightColorScheme)) {
+              console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+            } else {
+              newState.lightColorScheme = newLightColorScheme;
+
+              try {
+                localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
+              } catch (error) {// Unsupported
+              }
+            }
           }
 
-          return newState;
-        });
+          if (newDarkColorScheme) {
+            if (!joinedColorSchemes.includes(newDarkColorScheme)) {
+              console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
+            } else {
+              newState.darkColorScheme = newDarkColorScheme;
 
-        try {
-          if (value.light) {
-            localStorage.setItem(`${colorSchemeStorageKey}-light`, value.light);
+              try {
+                localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
+              } catch (error) {// Unsupported
+              }
+            }
           }
 
-          if (value.dark) {
-            localStorage.setItem(`${colorSchemeStorageKey}-dark`, value.dark);
-          }
-        } catch (e) {// Unsupported
-        }
+          return newState;
+        });
       }
     }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
     const handleMediaQuery = React__namespace.useCallback(e => {
@@ -7963,26 +8024,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       media.addListener(handler);
       handler(media);
       return () => media.removeListener(handler);
-    }, []); // Save mode, lightColorScheme & darkColorScheme to localStorage
-
-    React__namespace.useEffect(() => {
-      try {
-        if (state.mode) {
-          localStorage.setItem(modeStorageKey, state.mode);
-        }
-
-        processState(state, mode => {
-          if (mode === 'light') {
-            localStorage.setItem(`${colorSchemeStorageKey}-light`, state.lightColorScheme);
-          }
-
-          if (mode === 'dark') {
-            localStorage.setItem(`${colorSchemeStorageKey}-dark`, state.darkColorScheme);
-          }
-        });
-      } catch (e) {// Unsupported
-      }
-    }, [state, colorSchemeStorageKey, modeStorageKey]); // Handle when localStorage has changed
+    }, []); // Handle when localStorage has changed
 
     React__namespace.useEffect(() => {
       const handleStorage = event => {
@@ -17167,11 +17209,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   };
 
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -23014,7 +23055,11 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
       }
     },
     [`& .${outlinedInputClasses$1.root}.${inputBaseClasses$1.sizeSmall}`]: {
-      padding: 6,
+      // Don't specify paddingRight, as it overrides the default value set when there is only
+      // one of the popup or clear icon as the specificity is equal so the latter one wins
+      paddingTop: 6,
+      paddingBottom: 6,
+      paddingLeft: 6,
       [`& .${autocompleteClasses$1.input}`]: {
         padding: '2.5px 4px 2.5px 6px'
       }
@@ -42283,7 +42328,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)
+    }, !input && {
       variant
     }, other));
   });
@@ -49927,8 +49973,10 @@ See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
           id: labelId,
           children: labelRowsPerPage
         }), rowsPerPageOptions.length > 1 && /*#__PURE__*/jsxRuntime_1(TablePaginationSelect, _extends({
-          variant: "standard",
-          input: _InputBase || (_InputBase = /*#__PURE__*/jsxRuntime_1(InputBase$1, {})),
+          variant: "standard"
+        }, !SelectProps.variant && {
+          input: _InputBase || (_InputBase = /*#__PURE__*/jsxRuntime_1(InputBase$1, {}))
+        }, {
           value: rowsPerPage,
           onChange: onRowsPerPageChange,
           id: selectId,