@razorpay/blade 10.18.1 → 10.18.2

package/build/components/index.development.web.js

@@ -1,6 +1,6 @@
 import _defineProperty$1 from '@babel/runtime/helpers/defineProperty';
 import * as React from 'react';
-import React__default, { useMemo, useCallback, useState, useEffect, useRef, useContext, createContext, Fragment as Fragment$1, useImperativeHandle, Children, cloneElement, forwardRef } from 'react';
+import React__default, { useMemo, useCallback, useState, useRef, useEffect, useContext, createContext, Fragment as Fragment$1, useImperativeHandle, Children, cloneElement, forwardRef } from 'react';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import styled, { ThemeProvider, css, keyframes } from 'styled-components';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
@@ -59,6 +59,20 @@ var getPlatformType = function getPlatformType() {
   return 'unknown';
 };
 
+var isBrowser$1 = getPlatformType() == 'browser';
+
+/**
+ * useIsomorphicLayoutEffect enables us to safely call `useLayoutEffect` on the browser
+ * (for SSR reasons)
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect in the browser.
+ *
+ * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+ */
+var useIsomorphicLayoutEffect = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
+
 var deviceType = {
   desktop: 'desktop',
   mobile: 'mobile'
@@ -113,7 +127,8 @@ var useBreakpoint = function useBreakpoint(_ref) {
       if ((event === null || event === void 0 ? void 0 : event.media) === mediaQuery) {
         return true;
       }
-      // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object
+
+      // this will run when the state is initialised for the first time and hence the event object will be empty because the event listener wouldn't have triggered
       if (window.matchMedia(mediaQuery).matches) {
         return true;
       }
@@ -121,18 +136,25 @@ var useBreakpoint = function useBreakpoint(_ref) {
     })) === null || _breakpointsTokenAndQ2 === void 0 ? void 0 : _breakpointsTokenAndQ2.token) !== null && _breakpointsTokenAndQ !== void 0 ? _breakpointsTokenAndQ : undefined;
     return matchedBreakpoint;
   }, [breakpointsTokenAndQueryCollection]);
-  var _useState = useState(function () {
+  var _useState = useState({
+      matchedBreakpoint: undefined,
+      matchedDeviceType: deviceType.desktop
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    breakpointAndDevice = _useState2[0],
+    setBreakpointAndDevice = _useState2[1];
+  useIsomorphicLayoutEffect(function () {
+    // set the breakpoint and devicetype for the first time because eventlisteners will only trigger after the screen is actually changed
+    setBreakpointAndDevice(function () {
       var matchedBreakpoint = getMatchedBreakpoint();
       var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
       return {
         matchedBreakpoint: matchedBreakpoint,
         matchedDeviceType: matchedDeviceType
       };
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    breakpointAndDevice = _useState2[0],
-    setBreakpointAndDevice = _useState2[1];
-  useEffect(function () {
+    });
+
+    // for react-native and SSR we don't need to register event listeners
     if (!supportsMatchMedia) {
       return undefined;
     }
@@ -173,8 +195,6 @@ var useBreakpoint = function useBreakpoint(_ref) {
       });
     };
   }, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]);
-
-  // @TODO: handle SSR scenarios
   return breakpointAndDevice;
 };
 
@@ -244,20 +264,6 @@ var useColorScheme = function useColorScheme() {
   };
 };
 
-var isBrowser$1 = getPlatformType() == 'browser';
-
-/**
- * useIsomorphicLayoutEffect enables us to safely call `useLayoutEffect` on the browser
- * (for SSR reasons)
- *
- * React currently throws a warning when using useLayoutEffect on the server.
- * To get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect in the browser.
- *
- * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
- */
-var useIsomorphicLayoutEffect = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
-
 /* eslint-disable consistent-return */
 function useInterval(callback, _ref) {
   var delay = _ref.delay,