@transferwise/components 45.28.1 → 46.0.0

package/build/index.js

@@ -1881,43 +1881,36 @@ const useHasIntersected = ({
   return [hasIntersected];
 };
 
+function useMedia(query) {
+  return shim.useSyncExternalStore(onStoreChange => {
+    const mediaQueryList = window.matchMedia(query);
+    mediaQueryList.addEventListener('change', onStoreChange);
+    return () => {
+      mediaQueryList.removeEventListener('change', onStoreChange);
+    };
+  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
+}
+
+function useScreenSize(size) {
+  return useMedia(`(min-width: ${size}px)`);
+}
+
+/**
+ * @deprecated Prefer `useScreenSize` instead.
+ */
 const useLayout = () => {
-  const windowReference = typeof window === 'undefined' ? undefined : window;
-  const [breakpoint, setBreakpoint] = React.useState();
-  const [clientWidth] = useClientWidth({
-    ref: windowReference
-  });
-  React.useEffect(() => {
-    if (!clientWidth) {
-      return;
-    }
-    if (clientWidth <= exports.Breakpoint.EXTRA_SMALL) {
-      setBreakpoint(exports.Breakpoint.EXTRA_SMALL);
-      return;
-    }
-    if (exports.Breakpoint.EXTRA_SMALL < clientWidth && clientWidth <= exports.Breakpoint.SMALL) {
-      setBreakpoint(exports.Breakpoint.SMALL);
-      return;
-    }
-    if (exports.Breakpoint.SMALL < clientWidth && clientWidth <= exports.Breakpoint.MEDIUM) {
-      setBreakpoint(exports.Breakpoint.MEDIUM);
-      return;
-    }
-    if (exports.Breakpoint.MEDIUM < clientWidth && clientWidth <= exports.Breakpoint.LARGE) {
-      setBreakpoint(exports.Breakpoint.LARGE);
-      return;
-    }
-    if (exports.Breakpoint.LARGE < clientWidth) {
-      setBreakpoint(exports.Breakpoint.EXTRA_LARGE);
-    }
-  }, [clientWidth]);
+  const screenXs = useScreenSize(exports.Breakpoint.EXTRA_SMALL);
+  const screenSm = useScreenSize(exports.Breakpoint.SMALL);
+  const screenMd = useScreenSize(exports.Breakpoint.MEDIUM);
+  const screenLg = useScreenSize(exports.Breakpoint.LARGE);
+  const screenXl = useScreenSize(exports.Breakpoint.EXTRA_LARGE);
   return {
-    isMobile: !!breakpoint && [exports.Breakpoint.EXTRA_SMALL, exports.Breakpoint.SMALL].includes(breakpoint),
-    isExtraSmall: breakpoint === exports.Breakpoint.EXTRA_SMALL,
-    isSmall: breakpoint === exports.Breakpoint.SMALL,
-    isMedium: breakpoint === exports.Breakpoint.MEDIUM,
-    isLarge: breakpoint === exports.Breakpoint.LARGE,
-    isExtraLarge: breakpoint === exports.Breakpoint.EXTRA_LARGE
+    isMobile: screenSm != null ? !screenSm : undefined,
+    isExtraSmall: screenXs,
+    isSmall: screenSm,
+    isMedium: screenMd,
+    isLarge: screenLg,
+    isExtraLarge: screenXl
   };
 };
 
@@ -2042,16 +2035,6 @@ Drawer.defaultProps = {
 };
 var Drawer$1 = Drawer;
 
-function useMedia(query) {
-  return shim.useSyncExternalStore(onStoreChange => {
-    const mediaQueryList = window.matchMedia(query);
-    mediaQueryList.addEventListener('change', onStoreChange);
-    return () => {
-      mediaQueryList.removeEventListener('change', onStoreChange);
-    };
-  }, () => typeof window !== 'undefined' ? window.matchMedia(query).matches : undefined, () => undefined);
-}
-
 const INITIAL_Y_POSITION = 0;
 const CONTENT_SCROLL_THRESHOLD = 1;
 const MOVE_OFFSET_THRESHOLD = 50;
@@ -6060,14 +6043,13 @@ const Modal = ({
 }) => {
   const checkSpecialClasses = classToCheck => className?.split(' ').includes(classToCheck);
   const {
-    isMobile,
-    isMedium: isTablet
+    isMedium
   } = useLayout();
   // These should be replaced with props in breaking change.
   const isCompact = checkSpecialClasses('compact');
   const noDivider = checkSpecialClasses('no-divider');
   const contentReference = React.useRef(null);
-  return isMobile || isTablet ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
+  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer$1, {
     open: open,
     headerTitle: title,
     footerContent: footer,
@@ -6501,10 +6483,6 @@ const SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput({
   });
 });
 
-function useScreenSize(size) {
-  return useMedia(`(min-width: ${size}px)`);
-}
-
 const PolymorphicWithOverrides = /*#__PURE__*/React.forwardRef(function PolymorphicWithOverrides({
   __overrides: {
     as: Element,
@@ -15762,5 +15740,6 @@ exports.isServerSide = isServerSide;
 exports.translations = translations;
 exports.useDirection = useDirection;
 exports.useLayout = useLayout;
+exports.useScreenSize = useScreenSize;
 exports.useSnackbar = useSnackbar;
 //# sourceMappingURL=index.js.map