useBreakpointIndex: attach resize event listener to window instead of document

[ciampo]

Description

Fix a bug in the useBreakpointIndex component utility hook, where the resize event listener was previously attached to the document object.

This was resulting in the event listener function never being called, since the resize event only gets fired on the window object.

The fix is quite simple — change document to window.

How has this been tested?

One way to test this is to check the Flex component's Storybook example:

• in production, notice how resizing the window doesn't cause the second row of items to switch from row to column (and viceversa)
• When running Storybook on this PR branch, notice how the behaviour just described above is fixed

Screenshots

Before

flex-breakpoint-before.mp4

After

flex-breakpoint-after.mp4

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• N/A I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[sarayourfriend]

TIL! Thanks for the fix.

FWIW I still think this "feature" should be carefully evaluated, whether it's actually a good one to include now or something we can just add in the future.

Of course it's usages are already in non-experimental components (like Flex) so it might be too late to do so.

[ciampo]

TIL! Thanks for the fix.

FWIW I still think this "feature" should be carefully evaluated, whether it's actually a good one to include now or something we can just add in the future.

Of course it's usages are already in non-experimental components (like Flex) so it might be too late to do so.

I agree with you — I'm also not a fan of this pattern where an array of values are applied given a responsive configuration. It just feels a bit of an unnecessary construct around what could be easily implemented via CSS (or a separate utility from each component anyway).

It seems that the only components using this pattern are Flex (for the direction prop) and Grid (row and column props)