@mui/material 5.3.1 → 5.4.0

package/useMediaQuery/useMediaQuery.d.ts

@@ -1,27 +1,31 @@
-/**
- * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryListEvent {
-    matches: boolean;
-}
-/**
- * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
- */
-export interface MuiMediaQueryList {
-    matches: boolean;
-    addListener: (listener: MuiMediaQueryListListener) => void;
-    removeListener: (listener: MuiMediaQueryListListener) => void;
-}
-/**
- * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
- */
-export declare type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
-export interface Options {
-    defaultMatches?: boolean;
-    matchMedia?: typeof window.matchMedia;
-    noSsr?: boolean;
-    ssrMatchMedia?: (query: string) => {
-        matches: boolean;
-    };
-}
-export default function useMediaQuery<Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: Options): boolean;
+/**
+ * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
+ */
+export interface MuiMediaQueryListEvent {
+    matches: boolean;
+}
+/**
+ * @deprecated Not used internally. Use `MediaQueryList` from lib.dom.d.ts instead.
+ */
+export interface MuiMediaQueryList {
+    matches: boolean;
+    addListener: (listener: MuiMediaQueryListListener) => void;
+    removeListener: (listener: MuiMediaQueryListListener) => void;
+}
+/**
+ * @deprecated Not used internally. Use `(event: MediaQueryListEvent) => void` instead.
+ */
+export declare type MuiMediaQueryListListener = (event: MuiMediaQueryListEvent) => void;
+export interface Options {
+    defaultMatches?: boolean;
+    matchMedia?: typeof window.matchMedia;
+    /**
+     * This option is kept for backwards compatibility and has no longer any effect.
+     * It's previous behavior is now handled automatically.
+     */
+    noSsr?: boolean;
+    ssrMatchMedia?: (query: string) => {
+        matches: boolean;
+    };
+}
+export default function useMediaQuery<Theme = unknown>(queryInput: string | ((theme: Theme) => string), options?: Options): boolean;

package/useMediaQuery/useMediaQuery.js

@@ -5,32 +5,8 @@ import useEnhancedEffect from '../utils/useEnhancedEffect';
  * @deprecated Not used internally. Use `MediaQueryListEvent` from lib.dom.d.ts instead.
  */
 
-export default function useMediaQuery(queryInput, options = {}) {
-  const theme = useTheme(); // 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.
-
+function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr) {
   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 (process.env.NODE_ENV !== 'production') {
-    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.useState(() => {
     if (noSsr && supportMatchMedia) {
       return matchMedia(query).matches;
@@ -62,13 +38,79 @@ export default function useMediaQuery(queryInput, options = {}) {
       }
     };
 
-    updateMatch();
+    updateMatch(); // TODO: Use `addEventListener` once support for Safari < 14 is dropped
+
     queryList.addListener(updateMatch);
     return () => {
       active = false;
       queryList.removeListener(updateMatch);
     };
   }, [query, matchMedia, supportMatchMedia]);
+  return match;
+} // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+
+
+const maybeReactUseSyncExternalStore = React['useSyncExternalStore' + ''];
+
+function useMediaQueryNew(query, defaultMatches, matchMedia, ssrMatchMedia) {
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia]);
+  const [getSnapshot, subscribe] = React.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 = maybeReactUseSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return match;
+}
+
+export default function useMediaQuery(queryInput, options = {}) {
+  const theme = useTheme(); // 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 (process.env.NODE_ENV !== 'production') {
+    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 = maybeReactUseSyncExternalStore !== undefined ? useMediaQueryNew : useMediaQueryOld;
+  const match = useMediaQueryImplementation(query, defaultMatches, matchMedia, ssrMatchMedia, noSsr);
 
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks

package/useTouchRipple/index.d.ts

@@ -1 +1 @@
-export { default } from './useTouchRipple';
+export { default } from './useTouchRipple';

package/useTouchRipple/useTouchRipple.d.ts

@@ -1,28 +1,28 @@
-import * as React from 'react';
-import { TouchRippleActions } from '../ButtonBase/TouchRipple';
-interface UseTouchRippleProps {
-    disabled: boolean;
-    disableFocusRipple?: boolean;
-    disableRipple?: boolean;
-    disableTouchRipple?: boolean;
-    focusVisible: boolean;
-    rippleRef: React.RefObject<TouchRippleActions>;
-}
-interface RippleEventHandlers {
-    onBlur: React.FocusEventHandler;
-    onContextMenu: React.MouseEventHandler;
-    onDragLeave: React.DragEventHandler;
-    onKeyDown: React.KeyboardEventHandler;
-    onKeyUp: React.KeyboardEventHandler;
-    onMouseDown: React.MouseEventHandler;
-    onMouseLeave: React.MouseEventHandler;
-    onMouseUp: React.MouseEventHandler;
-    onTouchEnd: React.TouchEventHandler;
-    onTouchMove: React.TouchEventHandler;
-    onTouchStart: React.TouchEventHandler;
-}
-declare const useTouchRipple: (props: UseTouchRippleProps) => {
-    enableTouchRipple: boolean;
-    getRippleHandlers: (otherEvents?: Partial<RippleEventHandlers>) => RippleEventHandlers;
-};
-export default useTouchRipple;
+import * as React from 'react';
+import { TouchRippleActions } from '../ButtonBase/TouchRipple';
+interface UseTouchRippleProps {
+    disabled: boolean;
+    disableFocusRipple?: boolean;
+    disableRipple?: boolean;
+    disableTouchRipple?: boolean;
+    focusVisible: boolean;
+    rippleRef: React.RefObject<TouchRippleActions>;
+}
+interface RippleEventHandlers {
+    onBlur: React.FocusEventHandler;
+    onContextMenu: React.MouseEventHandler;
+    onDragLeave: React.DragEventHandler;
+    onKeyDown: React.KeyboardEventHandler;
+    onKeyUp: React.KeyboardEventHandler;
+    onMouseDown: React.MouseEventHandler;
+    onMouseLeave: React.MouseEventHandler;
+    onMouseUp: React.MouseEventHandler;
+    onTouchEnd: React.TouchEventHandler;
+    onTouchMove: React.TouchEventHandler;
+    onTouchStart: React.TouchEventHandler;
+}
+declare const useTouchRipple: (props: UseTouchRippleProps) => {
+    enableTouchRipple: boolean;
+    getRippleHandlers: (otherEvents?: Partial<RippleEventHandlers>) => RippleEventHandlers;
+};
+export default useTouchRipple;

package/utils/getScrollbarSize.d.ts

@@ -1,2 +1,2 @@
-import { unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
-export default getScrollbarSize;
+import { unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
+export default getScrollbarSize;

package/utils/ownerDocument.d.ts

@@ -1,2 +1,2 @@
-import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
-export default ownerDocument;
+import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
+export default ownerDocument;

package/utils/ownerWindow.d.ts

@@ -1,2 +1,2 @@
-import { unstable_ownerWindow as ownerWindow } from '@mui/utils';
-export default ownerWindow;
+import { unstable_ownerWindow as ownerWindow } from '@mui/utils';
+export default ownerWindow;

package/utils/setRef.d.ts

@@ -1,2 +1,2 @@
-import { unstable_setRef as setRef } from '@mui/utils';
-export default setRef;
+import { unstable_setRef as setRef } from '@mui/utils';
+export default setRef;