cozy-ui 140.6.0 → 141.0.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [141.0.0](https://github.com/cozy/cozy-ui/compare/v140.6.0...v141.0.0) (2026-07-30)
+
+
+* fix(breakpoints)!: target the requesting iframe ([b222ae2](https://github.com/cozy/cozy-ui/commit/b222ae2)), closes [#2949](https://github.com/cozy/cozy-ui/issues/2949)
+
+
+### BREAKING CHANGES
+
+* replace the old hook usage with:
+
+const { iframeWindow } = useIframeConnection({ parentBasedIframe })
+useIframeToSendWidth({ iframeWindow })
+
 # [140.6.0](https://github.com/cozy/cozy-ui/compare/v140.5.2...v140.6.0) (2026-07-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "140.6.0",
+  "version": "141.0.0",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/providers/Breakpoints/index.jsx

@@ -13,8 +13,8 @@ export const BreakpointsProvider = ({ parentBasedIframe, children }) => {
   const [breakpoints, setBreakpoints] = useState(
     getBreakpointsStatus(breakpointDefs)
   )
-  const { hasIframe } = useIframeConnection({ parentBasedIframe })
-  useIframeToSendWidth({ hasIframe })
+  const { iframeWindow } = useIframeConnection({ parentBasedIframe })
+  useIframeToSendWidth({ iframeWindow })
   const { parentBreakpoints } = useParentBreakpoints({ parentBasedIframe })
 
   useEffect(() => {

package/react/providers/Breakpoints/index.spec.jsx

@@ -0,0 +1,27 @@
+import { act, render } from '@testing-library/react'
+import React from 'react'
+
+import { BreakpointsProvider } from './index'
+
+it('sends parent breakpoints to the requesting iframe', () => {
+  const iframeWindow = { postMessage: jest.fn() }
+  const message = new MessageEvent('message', {
+    data: 'UI-breakpoints-needParentBreakpoints'
+  })
+  Object.defineProperty(message, 'source', { value: iframeWindow })
+
+  render(
+    <BreakpointsProvider>
+      <div />
+    </BreakpointsProvider>
+  )
+
+  act(() => {
+    window.dispatchEvent(message)
+  })
+
+  expect(iframeWindow.postMessage).toHaveBeenCalledWith(
+    `UI-breakpoints-value:${window.innerWidth}`,
+    '*'
+  )
+})

package/react/providers/Breakpoints/useIframeConnection.jsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { isInsideIframe } from '../../helpers/breakpoints'
 
 export const useIframeConnection = ({ parentBasedIframe }) => {
-  const [hasIframe, setHasIframe] = useState(false)
+  const [iframeWindow, setIframeWindow] = useState(null)
 
   const isIframe = parentBasedIframe && isInsideIframe()
 
@@ -11,7 +11,7 @@ export const useIframeConnection = ({ parentBasedIframe }) => {
   useEffect(() => {
     const handleMessage = ev => {
       if (ev.data === 'UI-breakpoints-needParentBreakpoints') {
-        setHasIframe(true)
+        setIframeWindow(ev.source)
       }
     }
 
@@ -27,5 +27,5 @@ export const useIframeConnection = ({ parentBasedIframe }) => {
     }
   }, [isIframe])
 
-  return { hasIframe }
+  return { iframeWindow }
 }

package/react/providers/Breakpoints/useIframeToSendWidth.jsx

@@ -1,27 +1,19 @@
 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}`, '*')
+const sendWidthToIframe = iframeWindow =>
+  iframeWindow?.postMessage(`UI-breakpoints-value:${window.innerWidth}`, '*')
 
-export const useIframeToSendWidth = ({ hasIframe }) => {
+export const useIframeToSendWidth = ({ iframeWindow }) => {
   // parent window send its innerWidth
   useEffect(() => {
-    if (hasIframe) {
-      sendWidthToIframe()
-    }
-  }, [hasIframe])
+    sendWidthToIframe(iframeWindow)
+  }, [iframeWindow])
 
   // parent window send its innerWidth on resize
   useEffect(() => {
     const handleResize = throttle(() => {
-      if (hasIframe) {
-        sendWidthToIframe()
-      }
+      sendWidthToIframe(iframeWindow)
     }, 100)
 
     window.addEventListener('resize', handleResize)
@@ -29,5 +21,5 @@ export const useIframeToSendWidth = ({ hasIframe }) => {
     return () => {
       window.removeEventListener('resize', handleResize)
     }
-  }, [hasIframe])
+  }, [iframeWindow])
 }

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

@@ -19,10 +19,10 @@ export var BreakpointsProvider = function BreakpointsProvider(_ref) {
   var _useIframeConnection = useIframeConnection({
     parentBasedIframe: parentBasedIframe
   }),
-      hasIframe = _useIframeConnection.hasIframe;
+      iframeWindow = _useIframeConnection.iframeWindow;
 
   useIframeToSendWidth({
-    hasIframe: hasIframe
+    iframeWindow: iframeWindow
   });
 
   var _useParentBreakpoints = useParentBreakpoints({

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

@@ -0,0 +1 @@
+export {};

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

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

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

@@ -4,17 +4,17 @@ import { isInsideIframe } from "cozy-ui/transpiled/react/helpers/breakpoints";
 export var useIframeConnection = function useIframeConnection(_ref) {
   var parentBasedIframe = _ref.parentBasedIframe;
 
-  var _useState = useState(false),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
-      hasIframe = _useState2[0],
-      setHasIframe = _useState2[1];
+      iframeWindow = _useState2[0],
+      setIframeWindow = _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);
+        setIframeWindow(ev.source);
       }
     };
 
@@ -30,6 +30,6 @@ export var useIframeConnection = function useIframeConnection(_ref) {
     }
   }, [isIframe]);
   return {
-    hasIframe: hasIframe
+    iframeWindow: iframeWindow
   };
 };

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

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

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

@@ -1,32 +1,24 @@
 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), '*');
+var sendWidthToIframe = function sendWidthToIframe(iframeWindow) {
+  return iframeWindow === null || iframeWindow === void 0 ? void 0 : iframeWindow.postMessage("UI-breakpoints-value:".concat(window.innerWidth), '*');
 };
 
 export var useIframeToSendWidth = function useIframeToSendWidth(_ref) {
-  var hasIframe = _ref.hasIframe;
+  var iframeWindow = _ref.iframeWindow;
   // parent window send its innerWidth
   useEffect(function () {
-    if (hasIframe) {
-      sendWidthToIframe();
-    }
-  }, [hasIframe]); // parent window send its innerWidth on resize
+    sendWidthToIframe(iframeWindow);
+  }, [iframeWindow]); // parent window send its innerWidth on resize
 
   useEffect(function () {
     var handleResize = throttle(function () {
-      if (hasIframe) {
-        sendWidthToIframe();
-      }
+      sendWidthToIframe(iframeWindow);
     }, 100);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
     };
-  }, [hasIframe]);
+  }, [iframeWindow]);
 };