@mui/material 5.2.0 → 5.2.1

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.2.0
+/** @license MUI v5.2.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -4998,7 +4998,7 @@
   const useEnhancedEffect = typeof window !== 'undefined' ? React__namespace.useLayoutEffect : React__namespace.useEffect;
   var useEnhancedEffect$1 = useEnhancedEffect;
 
-  function useRandomId(idOverride) {
+  function useId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
@@ -5011,24 +5011,6 @@
     }, [defaultId]);
     return id;
   }
-  /**
-   *
-   * @example <div id={useId()} />
-   * @param idOverride
-   * @returns {string}
-   */
-
-
-  function useReactId(idOverride) {
-    // TODO: Remove `React as any` once `useId` is part of stable types.
-    if (React__namespace.useId !== undefined) {
-      const reactId = React__namespace.useId();
-      return idOverride != null ? idOverride : reactId;
-    } // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
-
-
-    return useRandomId(idOverride);
-  }
 
   function unsupportedProp(props, propName, componentName, location, propFullName) {
 
@@ -6363,6 +6345,15 @@
     });
   }
 
+  function sx(styles) {
+    return ({
+      theme
+    }) => styleFunctionSx({
+      sx: styles,
+      theme
+    });
+  }
+
   function toVal(mix) {
   	var k, y, str='';
 
@@ -7476,7 +7467,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       selectOnFocus = !props.freeSolo,
       value: valueProp
     } = props;
-    const id = useReactId(idProp);
+    const id = useId(idProp);
     let getOptionLabel = getOptionLabelProp;
 
     getOptionLabel = option => {
@@ -14798,7 +14789,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
       name: 'Tabs',
       state: 'value'
     });
-    const idPrefix = useReactId();
+    const idPrefix = useId();
     const onSelected = React__namespace.useCallback((e, newValue) => {
       setValue(newValue);
 
@@ -27741,7 +27732,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const ariaLabelledby = useReactId(ariaLabelledbyProp);
+    const ariaLabelledby = useId(ariaLabelledbyProp);
     const dialogContextValue = React__namespace.useMemo(() => {
       return {
         titleId: ariaLabelledby
@@ -32397,8 +32388,32 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
    * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
    */
 
-  function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
+  function useMediaQuery(queryInput, options = {}) {
+    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
+    // All the browsers MUI support have this built-in.
+    // This defensive check is here for simplicity.
+    // Most of the time, the match media logic isn't central to people tests.
+
     const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+    const {
+      defaultMatches = false,
+      matchMedia = supportMatchMedia ? window.matchMedia : null,
+      noSsr = false,
+      ssrMatchMedia = null
+    } = getThemeProps({
+      name: 'MuiUseMediaQuery',
+      props: options,
+      theme
+    });
+
+    {
+      if (typeof queryInput === 'function' && theme === null) {
+        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
+      }
+    }
+
+    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
+    query = query.replace(/^@media( ?)/m, '');
     const [match, setMatch] = React__namespace.useState(() => {
       if (noSsr && supportMatchMedia) {
         return matchMedia(query).matches;
@@ -32430,76 +32445,13 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         }
       };
 
-      updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-
+      updateMatch();
       queryList.addListener(updateMatch);
       return () => {
         active = false;
         queryList.removeListener(updateMatch);
       };
     }, [query, matchMedia, supportMatchMedia]);
-    return match;
-  }
-
-  function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
-    const getDefaultSnapshot = React__namespace.useCallback(() => defaultMatches, [defaultMatches]);
-    const getServerSnapshot = React__namespace.useMemo(() => {
-      if (ssrMatchMedia !== null) {
-        const {
-          matches
-        } = ssrMatchMedia(query);
-        return () => matches;
-      }
-
-      return getDefaultSnapshot;
-    }, [getDefaultSnapshot, query, ssrMatchMedia]);
-    const [getSnapshot, subscribe] = React__namespace.useMemo(() => {
-      if (matchMedia === null) {
-        return [getDefaultSnapshot, () => () => {}];
-      }
-
-      const mediaQueryList = matchMedia(query);
-      return [() => mediaQueryList.matches, notify => {
-        // TODO: Use `addEventListener` once support for Safari < 14 is dropped
-        mediaQueryList.addListener(notify);
-        return () => {
-          mediaQueryList.removeListener(notify);
-        };
-      }];
-    }, [getDefaultSnapshot, matchMedia, query]);
-    const match = React__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-    return match;
-  }
-
-  function useMediaQuery(queryInput, options = {}) {
-    const theme = useTheme$2(); // Wait for jsdom to support the match media feature.
-    // All the browsers MUI support have this built-in.
-    // This defensive check is here for simplicity.
-    // Most of the time, the match media logic isn't central to people tests.
-
-    const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
-    const {
-      defaultMatches = false,
-      matchMedia = supportMatchMedia ? window.matchMedia : null,
-      ssrMatchMedia = null,
-      noSsr
-    } = getThemeProps({
-      name: 'MuiUseMediaQuery',
-      props: options,
-      theme
-    });
-
-    {
-      if (typeof queryInput === 'function' && theme === null) {
-        console.error(['MUI: The `query` argument provided is invalid.', 'You are providing a function without a theme in the context.', 'One of the parent elements needs to use a ThemeProvider.'].join('\n'));
-      }
-    }
-
-    let query = typeof queryInput === 'function' ? queryInput(theme) : queryInput;
-    query = query.replace(/^@media( ?)/m, ''); // TODO: Drop `useMediaQueryOld` and use  `use-sync-external-store` shim in `useMediaQueryNew` once the package is stable
-
-    const useMediaQueryImplementation = React__namespace.useSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
-    const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
     {
       // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -39938,7 +39890,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     };
 
-    const name = useReactId(nameProp);
+    const name = useId(nameProp);
     return /*#__PURE__*/jsxRuntime_1(RadioGroupContext$1.Provider, {
       value: {
         name,
@@ -40196,7 +40148,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const isHovered = itemValue <= hover;
     const isFocused = itemValue <= focus;
     const isChecked = itemValue === ratingValueRounded;
-    const id = useReactId();
+    const id = useId();
 
     const container = /*#__PURE__*/jsxRuntime_1(RatingIcon, {
       as: IconContainerComponent,
@@ -40310,7 +40262,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded2$3);
 
-    const name = useReactId(nameProp);
+    const name = useId(nameProp);
     const [valueDerived, setValueState] = useControlled({
       controlled: valueProp,
       default: defaultValue,
@@ -41201,7 +41153,11 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
 
     if (computeDisplay) {
-      display = multiple ? displayMultiple.join(', ') : displaySingle;
+      if (multiple) {
+        display = displayMultiple.reduce((prev, curr) => [prev, ', ', curr]);
+      } else {
+        display = displaySingle;
+      }
     } // Avoid performing a layout computation in the render method.
 
 
@@ -44199,7 +44155,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }, [title, childNode, isControlled]);
     }
 
-    const id = useReactId(idProp);
+    const id = useId(idProp);
     const prevUserSelect = React__namespace.useRef();
     const stopTouchInteraction = React__namespace.useCallback(() => {
       if (prevUserSelect.current !== undefined) {
@@ -48989,8 +48945,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       colSpan = colSpanProp || 1000; // col-span over everything
     }
 
-    const selectId = useReactId(SelectProps.id);
-    const labelId = useReactId(SelectProps.labelId);
+    const selectId = useId(SelectProps.id);
+    const labelId = useId(SelectProps.labelId);
 
     const getLabelDisplayedRowsTo = () => {
       if (count === -1) {
@@ -51797,6 +51753,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.easing = easing;
   exports.emphasize = emphasize;
   exports.experimentalStyled = styled$1;
+  exports.experimental_sx = sx;
   exports.extractEventHandlers = extractEventHandlers;
   exports.fabClasses = fabClasses$1;
   exports.filledInputClasses = filledInputClasses$1;
@@ -52030,7 +51987,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   exports.unstable_getUnit = getUnit;
   exports.unstable_toUnitless = toUnitless;
   exports.unstable_useEnhancedEffect = useEnhancedEffect$1;
-  exports.unstable_useId = useReactId;
+  exports.unstable_useId = useId;
   exports.unsupportedProp = unsupportedProp;
   exports.useAutocomplete = useAutocomplete;
   exports.useButton = useButton;