cozy-ui 125.0.0 → 125.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [125.1.0](https://github.com/cozy/cozy-ui/compare/v125.0.0...v125.1.0) (2025-06-11)
+
+
+### Bug Fixes
+
+* **Dialog:** Width wasn't correct for small screens ([0951f70](https://github.com/cozy/cozy-ui/commit/0951f70))
+
+
+### Features
+
+* **BreakpointsProvider:** Add `parentBasedIframe` prop ([4a49946](https://github.com/cozy/cozy-ui/commit/4a49946))
+
 # [125.0.0](https://github.com/cozy/cozy-ui/compare/v124.2.0...v125.0.0) (2025-06-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "125.0.0",
+  "version": "125.1.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -586,8 +586,8 @@ export const makeLightNormalOverrides = theme => ({
   },
   MuiDialog: {
     paper: {
+      width: '100%',
       '&.small': {
-        width: '480px',
         maxWidth: '480px',
         [theme.breakpoints.down('md')]: {
           margin: '16px',
@@ -602,19 +602,12 @@ export const makeLightNormalOverrides = theme => ({
         }
       },
       '&.medium': {
-        [theme.breakpoints.up('md')]: {
-          width: '544px',
-          maxWidth: '544px'
-        }
+        maxWidth: '544px'
       },
       '&.large': {
-        [theme.breakpoints.up('md')]: {
-          width: '800px',
-          maxWidth: '800px'
-        }
+        maxWidth: '800px'
       },
       '&.full': {
-        width: '100%',
         maxWidth: '100%'
       }
     },
@@ -624,6 +617,15 @@ export const makeLightNormalOverrides = theme => ({
       }
     },
     paperFullScreen: {
+      '&.small': {
+        maxWidth: '100%'
+      },
+      '&.medium': {
+        maxWidth: '100%'
+      },
+      '&.large': {
+        maxWidth: '100%'
+      },
       '& .cozyDialogActions': {
         paddingBottom: `calc(env(safe-area-inset-bottom) + ${getFlagshipCssVar(
           'bottom'

package/react/helpers/breakpoints.js

@@ -16,12 +16,20 @@ const breakpoints = {
   isMobile: [0, small]
 }
 
-export const getBreakpointsStatus = breakpoints => {
-  const width = window.innerWidth
+export const getBreakpointsStatus = (breakpoints, innerWidth) => {
+  const width = innerWidth || window.innerWidth
   return mapValues(
     breakpoints,
     ([min, max]) => width >= min && (max === undefined || width <= max)
   )
 }
 
+export const isInsideIframe = () => {
+  try {
+    return window.self !== window.top
+  } catch (e) {
+    return true
+  }
+}
+
 export default breakpoints

package/react/providers/Breakpoints/Readme.md

@@ -15,6 +15,8 @@ completely change the content, the layout, or prune away complete
 subtrees (useful on mobile where space is at a premium). Here for
 example, the square contents changes on desktop or mobile.
 
+By default, using `useBreakpoints` inside an iframe will refere to the iframe inner width. If you use `parentBasedIframe=true` on the provider wrapping the iframe, the breakpoints returned inside the iframe will refere to the parent window inner width instead.
+
 ```jsx
 import useBreakpoints, { BreakpointsProvider } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 

package/react/providers/Breakpoints/index.jsx

@@ -1,20 +1,25 @@
 import throttle from 'lodash/throttle'
+import PropTypes from 'prop-types'
 import React, { createContext, useContext, useState, useEffect } from 'react'
 
-import breakpointDefs, {
-  getBreakpointsStatus as _getBreakpointsStatus
-} from '../../helpers/breakpoints'
-
-const getBreakpointsStatus = () => _getBreakpointsStatus(breakpointDefs)
+import { useIframeConnection } from './useIframeConnection'
+import { useIframeToSendWidth } from './useIframeToSendWidth'
+import { useParentBreakpoints } from './useParentBreakpoints'
+import breakpointDefs, { getBreakpointsStatus } from '../../helpers/breakpoints'
 
 const BreakpointsCtx = createContext(null)
 
-export const BreakpointsProvider = ({ children }) => {
-  const [breakpoints, setBreakpoints] = useState(getBreakpointsStatus())
+export const BreakpointsProvider = ({ parentBasedIframe, children }) => {
+  const [breakpoints, setBreakpoints] = useState(
+    getBreakpointsStatus(breakpointDefs)
+  )
+  const { hasIframe } = useIframeConnection({ parentBasedIframe })
+  useIframeToSendWidth({ hasIframe })
+  const { parentBreakpoints } = useParentBreakpoints({ parentBasedIframe })
 
   useEffect(() => {
     const handleResize = throttle(() => {
-      setBreakpoints(getBreakpointsStatus())
+      setBreakpoints(getBreakpointsStatus(breakpointDefs))
     }, 100)
 
     window.addEventListener('resize', handleResize)
@@ -25,12 +30,21 @@ export const BreakpointsProvider = ({ children }) => {
   }, [])
 
   return (
-    <BreakpointsCtx.Provider value={breakpoints}>
+    <BreakpointsCtx.Provider value={parentBreakpoints || breakpoints}>
       {children}
     </BreakpointsCtx.Provider>
   )
 }
 
+BreakpointsProvider.defaultProps = {
+  parentBasedIframe: false
+}
+
+BreakpointsProvider.propTypes = {
+  /** Iframes breakpoints are based on parent window inner width instead of iframe inner width  */
+  parentBasedIframe: PropTypes.bool
+}
+
 export const useBreakpoints = () => {
   const v = useContext(BreakpointsCtx)
   if (v === null) {

package/react/providers/Breakpoints/useIframeConnection.jsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+import { isInsideIframe } from '../../helpers/breakpoints'
+
+export const useIframeConnection = ({ parentBasedIframe }) => {
+  const [hasIframe, setHasIframe] = useState(false)
+
+  const isIframe = parentBasedIframe && isInsideIframe()
+
+  // parent window receives from iframe to give breakpoints
+  useEffect(() => {
+    const handleMessage = ev => {
+      if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
+        setHasIframe(true)
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => window.removeEventListener('message', handleMessage)
+  }, [])
+
+  // iframe send to parent window ask for its breakpoints
+  useEffect(() => {
+    if (isIframe) {
+      window.parent.postMessage('UI-breakpoints-needParentBreakpoints', '*')
+    }
+  }, [isIframe])
+
+  return { hasIframe }
+}

package/react/providers/Breakpoints/useIframeToSendWidth.jsx

@@ -0,0 +1,33 @@
+import throttle from 'lodash/throttle'
+import { useEffect } from 'react'
+
+/**
+ * To send window innerWidth to first iframe
+ * @returns
+ */
+const sendWidthToIframe = () =>
+  window.frames[1].postMessage(`UI-breakpoints-value:${window.innerWidth}`, '*')
+
+export const useIframeToSendWidth = ({ hasIframe }) => {
+  // parent window send its innerWidth
+  useEffect(() => {
+    if (hasIframe) {
+      sendWidthToIframe()
+    }
+  }, [hasIframe])
+
+  // parent window send its innerWidth on resize
+  useEffect(() => {
+    const handleResize = throttle(() => {
+      if (hasIframe) {
+        sendWidthToIframe()
+      }
+    }, 100)
+
+    window.addEventListener('resize', handleResize)
+
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [hasIframe])
+}

package/react/providers/Breakpoints/useParentBreakpoints.jsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react'
+
+import breakpointDefs, {
+  getBreakpointsStatus,
+  isInsideIframe
+} from '../../helpers/breakpoints'
+
+export const useParentBreakpoints = ({ parentBasedIframe }) => {
+  const [parentBreakpoints, setParentBreakpoints] = useState()
+
+  const isIframe = parentBasedIframe && isInsideIframe()
+
+  // iframe receives breakpoints from parent window
+  useEffect(() => {
+    const handleMessage = ev => {
+      if (!isIframe) return
+
+      if (
+        typeof ev.data === 'string' &&
+        ev.data.includes?.('UI-breakpoints-value:')
+      ) {
+        const parentInnerWidth = ev.data.split(':')[1]
+
+        setParentBreakpoints(
+          getBreakpointsStatus(breakpointDefs, parentInnerWidth)
+        )
+      }
+    }
+
+    window.addEventListener('message', handleMessage)
+
+    return () => window.removeEventListener('message', handleMessage)
+  }, [isIframe])
+
+  return { parentBreakpoints }
+}

package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeDarkInvertedOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeDarkInvertedOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeDarkInvertedOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeDarkNormalOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeDarkNormalOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeDarkNormalOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeLightInvertedOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeLightInvertedOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeLightInvertedOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts

@@ -656,6 +656,7 @@ export function makeLightNormalOverrides(theme: any): {
     };
     MuiDialog: {
         paper: {
+            width: string;
             '&.small': {
                 [x: number]: {
                     margin: string;
@@ -668,23 +669,15 @@ export function makeLightNormalOverrides(theme: any): {
                         marginRight: string;
                     };
                 };
-                width: string;
                 maxWidth: string;
             };
             '&.medium': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.large': {
-                [x: number]: {
-                    width: string;
-                    maxWidth: string;
-                };
+                maxWidth: string;
             };
             '&.full': {
-                width: string;
                 maxWidth: string;
             };
         };
@@ -694,6 +687,15 @@ export function makeLightNormalOverrides(theme: any): {
             };
         };
         paperFullScreen: {
+            '&.small': {
+                maxWidth: string;
+            };
+            '&.medium': {
+                maxWidth: string;
+            };
+            '&.large': {
+                maxWidth: string;
+            };
             '& .cozyDialogActions': {
                 paddingBottom: string;
             };

package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -561,8 +561,8 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
     },
     MuiDialog: {
       paper: {
+        width: '100%',
         '&.small': _defineProperty({
-          width: '480px',
           maxWidth: '480px'
         }, theme.breakpoints.down('md'), {
           margin: '16px',
@@ -575,16 +575,13 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
             marginRight: '-8px'
           }
         }),
-        '&.medium': _defineProperty({}, theme.breakpoints.up('md'), {
-          width: '544px',
+        '&.medium': {
           maxWidth: '544px'
-        }),
-        '&.large': _defineProperty({}, theme.breakpoints.up('md'), {
-          width: '800px',
+        },
+        '&.large': {
           maxWidth: '800px'
-        }),
+        },
         '&.full': {
-          width: '100%',
           maxWidth: '100%'
         }
       },
@@ -594,6 +591,15 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
         }
       },
       paperFullScreen: {
+        '&.small': {
+          maxWidth: '100%'
+        },
+        '&.medium': {
+          maxWidth: '100%'
+        },
+        '&.large': {
+          maxWidth: '100%'
+        },
         '& .cozyDialogActions': {
           paddingBottom: "calc(env(safe-area-inset-bottom) + ".concat(getFlagshipCssVar('bottom'), ")")
         },

package/transpiled/react/helpers/breakpoints.d.ts

@@ -1,6 +1,7 @@
-export function getBreakpointsStatus(breakpoints: any): {
+export function getBreakpointsStatus(breakpoints: any, innerWidth: any): {
     [x: string]: boolean;
 };
+export function isInsideIframe(): boolean;
 export default breakpoints;
 declare namespace breakpoints {
     const isExtraLarge: number[];

package/transpiled/react/helpers/breakpoints.js

@@ -14,8 +14,8 @@ var breakpoints = {
   isTablet: [small + 1, medium],
   isMobile: [0, small]
 };
-export var getBreakpointsStatus = function getBreakpointsStatus(breakpoints) {
-  var width = window.innerWidth;
+export var getBreakpointsStatus = function getBreakpointsStatus(breakpoints, innerWidth) {
+  var width = innerWidth || window.innerWidth;
   return mapValues(breakpoints, function (_ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         min = _ref2[0],
@@ -24,4 +24,11 @@ export var getBreakpointsStatus = function getBreakpointsStatus(breakpoints) {
     return width >= min && (max === undefined || width <= max);
   });
 };
+export var isInsideIframe = function isInsideIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (e) {
+    return true;
+  }
+};
 export default breakpoints;

package/transpiled/react/providers/Breakpoints/index.d.ts

@@ -1,5 +1,16 @@
-export function BreakpointsProvider({ children }: {
+export function BreakpointsProvider({ parentBasedIframe, children }: {
+    parentBasedIframe: any;
     children: any;
 }): JSX.Element;
+export namespace BreakpointsProvider {
+    namespace defaultProps {
+        const parentBasedIframe: boolean;
+    }
+    namespace propTypes {
+        const parentBasedIframe_1: PropTypes.Requireable<boolean>;
+        export { parentBasedIframe_1 as parentBasedIframe };
+    }
+}
 export function useBreakpoints(): never;
 export default useBreakpoints;
+import PropTypes from "prop-types";

package/transpiled/react/providers/Breakpoints/index.js

@@ -1,24 +1,38 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import throttle from 'lodash/throttle';
+import PropTypes from 'prop-types';
 import React, { createContext, useContext, useState, useEffect } from 'react';
-import breakpointDefs, { getBreakpointsStatus as _getBreakpointsStatus } from "cozy-ui/transpiled/react/helpers/breakpoints";
-
-var getBreakpointsStatus = function getBreakpointsStatus() {
-  return _getBreakpointsStatus(breakpointDefs);
-};
-
+import { useIframeConnection } from "cozy-ui/transpiled/react/providers/Breakpoints/useIframeConnection";
+import { useIframeToSendWidth } from "cozy-ui/transpiled/react/providers/Breakpoints/useIframeToSendWidth";
+import { useParentBreakpoints } from "cozy-ui/transpiled/react/providers/Breakpoints/useParentBreakpoints";
+import breakpointDefs, { getBreakpointsStatus } from "cozy-ui/transpiled/react/helpers/breakpoints";
 var BreakpointsCtx = /*#__PURE__*/createContext(null);
 export var BreakpointsProvider = function BreakpointsProvider(_ref) {
-  var children = _ref.children;
+  var parentBasedIframe = _ref.parentBasedIframe,
+      children = _ref.children;
 
-  var _useState = useState(getBreakpointsStatus()),
+  var _useState = useState(getBreakpointsStatus(breakpointDefs)),
       _useState2 = _slicedToArray(_useState, 2),
       breakpoints = _useState2[0],
       setBreakpoints = _useState2[1];
 
+  var _useIframeConnection = useIframeConnection({
+    parentBasedIframe: parentBasedIframe
+  }),
+      hasIframe = _useIframeConnection.hasIframe;
+
+  useIframeToSendWidth({
+    hasIframe: hasIframe
+  });
+
+  var _useParentBreakpoints = useParentBreakpoints({
+    parentBasedIframe: parentBasedIframe
+  }),
+      parentBreakpoints = _useParentBreakpoints.parentBreakpoints;
+
   useEffect(function () {
     var handleResize = throttle(function () {
-      setBreakpoints(getBreakpointsStatus());
+      setBreakpoints(getBreakpointsStatus(breakpointDefs));
     }, 100);
     window.addEventListener('resize', handleResize);
     return function () {
@@ -26,9 +40,16 @@ export var BreakpointsProvider = function BreakpointsProvider(_ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement(BreakpointsCtx.Provider, {
-    value: breakpoints
+    value: parentBreakpoints || breakpoints
   }, children);
 };
+BreakpointsProvider.defaultProps = {
+  parentBasedIframe: false
+};
+BreakpointsProvider.propTypes = {
+  /** Iframes breakpoints are based on parent window inner width instead of iframe inner width  */
+  parentBasedIframe: PropTypes.bool
+};
 export var useBreakpoints = function useBreakpoints() {
   var v = useContext(BreakpointsCtx);
 

package/transpiled/react/providers/Breakpoints/useIframeConnection.d.ts

@@ -0,0 +1,5 @@
+export function useIframeConnection({ parentBasedIframe }: {
+    parentBasedIframe: any;
+}): {
+    hasIframe: boolean;
+};

package/transpiled/react/providers/Breakpoints/useIframeConnection.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+import { isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
+export var useIframeConnection = function useIframeConnection(_ref) {
+  var parentBasedIframe = _ref.parentBasedIframe;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      hasIframe = _useState2[0],
+      setHasIframe = _useState2[1];
+
+  var isIframe = parentBasedIframe && isInsideIframe(); // parent window receives from iframe to give breakpoints
+
+  useEffect(function () {
+    var handleMessage = function handleMessage(ev) {
+      if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
+        setHasIframe(true);
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return function () {
+      return window.removeEventListener('message', handleMessage);
+    };
+  }, []); // iframe send to parent window ask for its breakpoints
+
+  useEffect(function () {
+    if (isIframe) {
+      window.parent.postMessage('UI-breakpoints-needParentBreakpoints', '*');
+    }
+  }, [isIframe]);
+  return {
+    hasIframe: hasIframe
+  };
+};

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.d.ts

@@ -0,0 +1,3 @@
+export function useIframeToSendWidth({ hasIframe }: {
+    hasIframe: any;
+}): void;

package/transpiled/react/providers/Breakpoints/useIframeToSendWidth.js

@@ -0,0 +1,32 @@
+import throttle from 'lodash/throttle';
+import { useEffect } from 'react';
+/**
+ * To send window innerWidth to first iframe
+ * @returns
+ */
+
+var sendWidthToIframe = function sendWidthToIframe() {
+  return window.frames[1].postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
+};
+
+export var useIframeToSendWidth = function useIframeToSendWidth(_ref) {
+  var hasIframe = _ref.hasIframe;
+  // parent window send its innerWidth
+  useEffect(function () {
+    if (hasIframe) {
+      sendWidthToIframe();
+    }
+  }, [hasIframe]); // parent window send its innerWidth on resize
+
+  useEffect(function () {
+    var handleResize = throttle(function () {
+      if (hasIframe) {
+        sendWidthToIframe();
+      }
+    }, 100);
+    window.addEventListener('resize', handleResize);
+    return function () {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [hasIframe]);
+};

package/transpiled/react/providers/Breakpoints/useParentBreakpoints.d.ts

@@ -0,0 +1,5 @@
+export function useParentBreakpoints({ parentBasedIframe }: {
+    parentBasedIframe: any;
+}): {
+    parentBreakpoints: undefined;
+};

package/transpiled/react/providers/Breakpoints/useParentBreakpoints.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+import breakpointDefs, { getBreakpointsStatus, isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
+export var useParentBreakpoints = function useParentBreakpoints(_ref) {
+  var parentBasedIframe = _ref.parentBasedIframe;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      parentBreakpoints = _useState2[0],
+      setParentBreakpoints = _useState2[1];
+
+  var isIframe = parentBasedIframe && isInsideIframe(); // iframe receives breakpoints from parent window
+
+  useEffect(function () {
+    var handleMessage = function handleMessage(ev) {
+      var _ev$data$includes, _ev$data;
+
+      if (!isIframe) return;
+
+      if (typeof ev.data === 'string' && (_ev$data$includes = (_ev$data = ev.data).includes) !== null && _ev$data$includes !== void 0 && _ev$data$includes.call(_ev$data, 'UI-breakpoints-value:')) {
+        var parentInnerWidth = ev.data.split(':')[1];
+        setParentBreakpoints(getBreakpointsStatus(breakpointDefs, parentInnerWidth));
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return function () {
+      return window.removeEventListener('message', handleMessage);
+    };
+  }, [isIframe]);
+  return {
+    parentBreakpoints: parentBreakpoints
+  };
+};