fix(breakpoints)!: target the requesting iframe

[doubleface]

Summary

• Send parent breakpoint widths to the iframe that requested them instead of relying on a fixed frame index.

• Breaking change: replace the old hook usage with:

  const { iframeWindow } = useIframeConnection({ parentBasedIframe })
  useIframeToSendWidth({ iframeWindow })

• Closes BreakpointsProvider crashes when a parent-based iframe is the only iframe #2949.

[bundlemon]

BundleMon

Unchanged files (3)

Status	Path	Size	Limits
✅	dist/cozy-ui.min.css	17.73KB	-
✅	transpiled/react/stylesheet.css	11.23KB	-
✅	dist/cozy-ui.utils.min.css	11.21KB	-

No change in files bundle size

Groups updated (1)

Status	Path	Size	Limits
✅	transpiled/react/**	393.34KB (+32B +0.01%)	-

Final result: ✅

View report in BundleMon website ➡️

---

Current branch size history | Target branch size history

[JF-Cozy]

this all thing doesn't seams to be a good idea anymore #2806 (comment) did you speak with @zatteo about iframe messaging?

[zatteo]

this all thing doesn't seams to be a good idea anymore #2806 (comment) did you speak with @zatteo about iframe messaging?

I add the topic of "resizing of iframe related to useBreakpoints" in the topic related to File Picker. We may need a more general approach but we need to think to what extend our other Flutter/Calendar apps are concerned. But if it solve an issue right now, let's merge this kind of fix (taking into account the BC).

[JF-Cozy]

@doubleface for the BC I prefere something really specific to avoid any thought. Could you please add this in the BC message?

So you must use const { iframeWindow } = useIframeConnection({ parentBasedIframe })and useIframeToSendWidth({ iframeWindow })

[doubleface]

@doubleface for the BC I prefere something really specific to avoid any thought. Could you please add this in the BC message?

So you must use const { iframeWindow } = useIframeConnection({ parentBasedIframe })and useIframeToSendWidth({ iframeWindow })

Done

[cozy-bot]

🎉 This PR is included in version 141.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀