cozy-ui 124.2.0 → 125.1.0

package/transpiled/react/AppTitle/index.js

@@ -24,10 +24,10 @@ import NotesIcon from "cozy-ui/transpiled/react/Icons/Notes";
 import NotesTextIcon from "cozy-ui/transpiled/react/Icons/NotesText";
 import PassIcon from "cozy-ui/transpiled/react/Icons/Pass";
 import PassTextIcon from "cozy-ui/transpiled/react/Icons/PassText";
-import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
-import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import PhotosIcon from "cozy-ui/transpiled/react/Icons/Photos";
 import PhotosTextIcon from "cozy-ui/transpiled/react/Icons/PhotosText";
+import StoreIcon from "cozy-ui/transpiled/react/Icons/Store";
+import StoreTextIcon from "cozy-ui/transpiled/react/Icons/StoreText";
 import TwakeTextIcon from "cozy-ui/transpiled/react/Icons/TwakeText";
 import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
 import WorkplaceTextIcon from "cozy-ui/transpiled/react/Icons/WorkplaceText";

package/transpiled/react/CozyDialogs/useCozyDialog.js

@@ -24,7 +24,7 @@ var useStyles = makeStyles({
 });
 
 var useCozyDialog = function useCozyDialog(props) {
-  var _componentsProps$dial, _componentsProps$dial2, _componentsProps$dial3;
+  var _otherProps$BackdropP, _componentsProps$dial, _componentsProps$dial2, _componentsProps$dial3;
 
   var size = props.size,
       actions = props.actions,
@@ -70,6 +70,11 @@ var useCozyDialog = function useCozyDialog(props) {
       paper: "".concat(paperClassName, " ").concat(styles.paper, " ").concat(otherProps.classes ? otherProps.classes.paper : ''),
       scrollPaper: scrollPaperClassName
     }),
+    BackdropProps: _objectSpread({
+      style: _objectSpread({
+        transitionDelay: 50
+      }, otherProps === null || otherProps === void 0 ? void 0 : (_otherProps$BackdropP = otherProps.BackdropProps) === null || _otherProps$BackdropP === void 0 ? void 0 : _otherProps$BackdropP.style)
+    }, otherProps.BackdropProps),
     TransitionProps: _objectSpread({
       fullScreen: fullScreen
     }, otherProps.TransitionProps)

package/transpiled/react/Layout/Layout.d.ts

@@ -1,32 +1,6 @@
-export function Layout({ children, className, monoColumn, withTopBar, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    monoColumn: any;
-    withTopBar: any;
-}): JSX.Element;
-export namespace Layout {
-    namespace propTypes {
-        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        const className: PropTypes.Requireable<string>;
-        const withTopBar: PropTypes.Requireable<boolean>;
-        const monoColumn: PropTypes.Requireable<boolean>;
-    }
-    namespace defaultProps {
-        const withTopBar_1: boolean;
-        export { withTopBar_1 as withTopBar };
-        const monoColumn_1: boolean;
-        export { monoColumn_1 as monoColumn };
-    }
-}
-export function Main({ children, ...rest }: {
-    [x: string]: any;
-    children: any;
-}): JSX.Element;
-export class Content extends React.Component<any, any, any> {
-    constructor(props: Readonly<any>);
-    constructor(props: any, context?: any);
-    render(): JSX.Element;
-}
-import PropTypes from "prop-types";
+export const LayoutContext: React.Context<any>;
+export function useLayout(): any;
+export const Layout: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const Main: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export const Content: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from "react";

package/transpiled/react/Layout/Layout.js

@@ -1,71 +1,99 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "monoColumn", "withTopBar"],
-    _excluded2 = ["children"],
-    _excluded3 = ["children"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
+    _excluded2 = ["className", "children"],
+    _excluded3 = ["className", "children"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { createContext, forwardRef, useContext, useMemo } from 'react';
 var styles = {
   "o-layout": "styles__o-layout___3TSz9",
+  "o-layout-topbar": "styles__o-layout-topbar___2SHWi",
   "o-layout-2panes": "styles__o-layout-2panes___1CDQw",
-  "o-layout--withTopBar": "styles__o-layout--withTopBar___36qd5",
-  "o-layout-2panes--withTopBar": "styles__o-layout-2panes--withTopBar___Ub1z2"
+  "o-layout-main": "styles__o-layout-main___3mPxz",
+  "o-layout-main-monocolumn": "styles__o-layout-main-monocolumn___2a7vz",
+  "o-layout-main-monocolumn--topbar": "styles__o-layout-main-monocolumn--topbar___9_4Xd",
+  "o-layout-main-2panes": "styles__o-layout-main-2panes___3ickD",
+  "o-layout-main-2panes--topbar": "styles__o-layout-main-2panes--topbar___cGi-H",
+  "o-layout-content": "styles__o-layout-content___3D5gN",
+  "o-layout-content-monocolumn": "styles__o-layout-content-monocolumn___1rpxp",
+  "o-layout-content-2panes": "styles__o-layout-content-2panes___2Hotr"
 };
-export var Layout = function Layout(_ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      monoColumn = _ref.monoColumn,
-      withTopBar = _ref.withTopBar,
-      rest = _objectWithoutProperties(_ref, _excluded);
+export var LayoutContext = /*#__PURE__*/createContext();
+export var useLayout = function useLayout() {
+  var context = useContext(LayoutContext);
 
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(monoColumn ? styles['o-layout'] : styles['o-layout-2panes'], className, _defineProperty({}, styles["o-layout".concat(monoColumn ? '' : '-2panes', "--withTopBar")], withTopBar))
-  }, rest), children);
-};
-export var Main = function Main(_ref2) {
-  var children = _ref2.children,
-      rest = _objectWithoutProperties(_ref2, _excluded2);
+  if (!context) {
+    throw new Error('useLayout must be used within a LayoutContext');
+  }
 
-  return /*#__PURE__*/React.createElement("main", rest, children);
+  return context;
 };
-export var Content = /*#__PURE__*/function (_Component) {
-  _inherits(Content, _Component);
-
-  var _super = _createSuper(Content);
+var LayoutProvider = /*#__PURE__*/React.memo(function (_ref) {
+  var monoColumn = _ref.monoColumn,
+      withTopBar = _ref.withTopBar,
+      children = _ref.children;
+  var value = useMemo(function () {
+    return {
+      monoColumn: monoColumn,
+      withTopBar: withTopBar
+    };
+  }, [monoColumn, withTopBar]);
+  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+    value: value
+  }, children);
+});
+LayoutProvider.displayName = 'LayoutProvider';
+export var Layout = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      monoColumn = _ref2.monoColumn,
+      withTopBar = _ref2.withTopBar,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
-  function Content() {
-    _classCallCheck(this, Content);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement(LayoutProvider, {
+    monoColumn: monoColumn,
+    withTopBar: withTopBar
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    className: cx(className, styles['o-layout'], styles["o-layout-".concat(variant)], _defineProperty({}, styles["o-layout-topbar"], withTopBar))
+  }, props), children));
+});
+Layout.displayName = 'Layout';
+export var Main = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var className = _ref3.className,
+      children = _ref3.children,
+      props = _objectWithoutProperties(_ref3, _excluded2);
 
-    return _super.apply(this, arguments);
-  }
+  var _useLayout = useLayout(),
+      monoColumn = _useLayout.monoColumn,
+      withTopBar = _useLayout.withTopBar;
 
-  _createClass(Content, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          children = _this$props.children,
-          rest = _objectWithoutProperties(_this$props, _excluded3);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement("main", _extends({
+    ref: ref,
+    className: cx(className, styles['o-layout-main'], styles["o-layout-main-".concat(variant)], _defineProperty({}, styles["o-layout-main-".concat(variant, "--topbar")], withTopBar))
+  }, props), children);
+});
+Main.displayName = 'Main';
+export var Content = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var className = _ref4.className,
+      children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, _excluded3);
 
-      return /*#__PURE__*/React.createElement("div", _extends({
-        role: "main"
-      }, rest), children);
-    }
-  }]);
+  var _useLayout2 = useLayout(),
+      monoColumn = _useLayout2.monoColumn;
 
-  return Content;
-}(Component);
+  var variant = monoColumn ? 'monocolumn' : '2panes';
+  return /*#__PURE__*/React.createElement("div", _extends({
+    role: "main",
+    ref: ref,
+    className: cx(className, styles['o-layout-content'], styles["o-layout-content-".concat(variant)])
+  }, props), children);
+});
+Content.displayName = 'Content';
 Layout.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

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/Sidebar/index.js

@@ -7,8 +7,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 var styles = {
   "o-sidebar": "styles__o-sidebar___1295j",
-  "o-sidebar--border": "styles__o-sidebar--border___32tfw",
-  "o-sidebar--large": "styles__o-sidebar--large___1mT8H"
+  "o-sidebar--border": "styles__o-sidebar--border___32tfw"
 };
 import { useSetFlagshipUI } from "cozy-ui/transpiled/react/hooks/useSetFlagshipUi/useSetFlagshipUI";
 import { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
@@ -31,7 +30,7 @@ var Sidebar = function Sidebar(_ref) {
   }, 'cozy-ui/Sidebar');
   return /*#__PURE__*/React.createElement("aside", _extends({
     id: "sidebar",
-    className: cx(styles['o-sidebar'], [styles['o-sidebar--large']], className)
+    className: cx(styles['o-sidebar'], className)
   }, restProps), children);
 };
 

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;