feat(fuselage-hooks): usePosition listening to components size changes (#782)

* wip: resize observer

* Listen to element size changes

* Add observer mock to tests

* fix one more test

Author: gabriellsh

packages/fuselage-hooks/src/usePosition.spec.ts

@@ -1,10 +1,14 @@
+import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
+
 import {
   getPositionStyle,
   getTargetBoundaries,
   getVariantBoundaries,
 } from './usePosition';
 // TODO: add tests targeting the hook itself
 
+withResizeObserverMock();
+
 const container = {
   bottom: 1000,
   height: 1000,

packages/fuselage-hooks/src/usePosition.ts

@@ -140,10 +140,18 @@ const useBoundingClientRect = (
     const parents = getScrollParents(element.current);
     const passive = { passive: true };
 
+    const observer = new ResizeObserver(() => {
+      if (!element.current) {
+        return;
+      }
+      callback();
+    });
+    observer.observe(element.current);
     window.addEventListener('resize', callback);
     parents.forEach((el) => el.addEventListener('scroll', callback, passive));
 
     return () => {
+      observer.disconnect();
       window.removeEventListener('resize', callback);
       parents.forEach((el) => el.removeEventListener('scroll', callback));
     };

packages/fuselage/src/components/Menu/Menu.spec.tsx

@@ -2,9 +2,12 @@ import { composeStories } from '@storybook/testing-react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
+import { withResizeObserverMock } from 'testing-utils/mocks/withResizeObserverMock';
 
 import * as stories from './Menu.stories';
 
+withResizeObserverMock();
+
 const { Simple } = composeStories(stories);
 
 describe('[Menu Component]', () => {