perf: Remove ResizeObserver polyfill

All target browsers now support native ResizeObserver API, making the
polyfill unnecessary. This change reduces bundle size and simplifies the
codebase.

Changes:
- Remove @juggle/resize-observer dependency from package.json
- Replace polyfill imports with native ResizeObserver API
- Update useResizeObserver to use getBoundingClientRect() for initial sync measurement
- Add convertElementToEntry() helper since native ResizeObserverEntry cannot be constructed
- Remove __mocks__/@juggle/resize-observer.ts mock file
- Add comprehensive Jest mocks for ResizeObserver and getBoundingClientRect in test environment
- Extract ResizeObserver test mocks to separate reusable module

Author: TrevorBurnham

__mocks__/@juggle/resize-observer.ts

@@ -0,0 +1,66 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Mock ResizeObserver for Jest tests
+ *
+ * This module provides a mock implementation of the native ResizeObserver API
+ * for use in Jest test environments where ResizeObserver may not be available.
+ */
+
+const mockObserve = jest.fn();
+const mockUnobserve = jest.fn();
+const mockDisconnect = jest.fn();
+
+// Create the ResizeObserver mock constructor
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+  observe: mockObserve,
+  unobserve: mockUnobserve,
+  disconnect: mockDisconnect,
+}));
+
+// Mock the prototype methods for backward compatibility with tests that access prototype
+Object.defineProperty(global.ResizeObserver, 'prototype', {
+  value: {
+    observe: mockObserve,
+    unobserve: mockUnobserve,
+    disconnect: mockDisconnect,
+  },
+  writable: false,
+});
+
+/**
+ * Mock getBoundingClientRect to return dimensions based on CSS styles
+ *
+ * In JSDOM test environments, getBoundingClientRect() returns all zeros because
+ * JSDOM doesn't perform actual layout calculations. This mock extracts width/height
+ * from computed CSS styles to provide realistic dimensions for ResizeObserver tests.
+ *
+ * Only mock in browser environments (not SSR tests where Element is undefined).
+ */
+if (typeof Element !== 'undefined') {
+  Element.prototype.getBoundingClientRect = jest.fn(function () {
+    const style = window.getComputedStyle(this);
+    const width = parseFloat(style.width) || 0;
+    const height = parseFloat(style.height) || 0;
+
+    return {
+      width,
+      height,
+      top: 0,
+      left: 0,
+      bottom: height,
+      right: width,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+    };
+  });
+}
+
+// Export the mock functions for test access if needed
+module.exports = {
+  mockObserve,
+  mockUnobserve,
+  mockDisconnect,
+};

jest/resize-observer-mock.js

@@ -4,3 +4,6 @@
 require('@testing-library/jest-dom');
 const { cleanup } = require('@testing-library/react');
 afterEach(cleanup);
+
+// Import ResizeObserver and getBoundingClientRect mocks
+require('./resize-observer-mock');

jest/unit-setup.js

@@ -40,7 +40,6 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {

package-lock.json

@@ -4,7 +4,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import useContainerQuery from '../use-container-query';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ContainerQueryEntry } from '../interfaces';
 
 function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEntry) => string }) {

package.json

@@ -4,7 +4,6 @@
 import React, { useState, useRef } from 'react';
 import { render } from '@testing-library/react';
 import { useResizeObserver } from '../use-resize-observer';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { ContainerQueryEntry } from '../interfaces';
 
 function TestComponent({ mapFn = () => '' }: { mapFn?: (entry: ContainerQueryEntry) => string }) {

src/container-queries/__tests__/use-container-query.test.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { unstable_batchedUpdates } from 'react-dom';
-import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';
 import { useEffect, useLayoutEffect } from 'react';
 import { ContainerQueryEntry, ElementReference } from './interfaces';
 import { useStableCallback } from '../stable-callback';
@@ -42,7 +41,8 @@ export function useResizeObserver(elementRef: ElementReference, onObserve: (entr
     () => {
       const element = typeof elementRef === 'function' ? elementRef() : elementRef?.current;
       if (element) {
-        onObserve(convertResizeObserverEntry(new ResizeObserverEntry(element)));
+        const rect = element.getBoundingClientRect();
+        onObserve(convertElementToEntry(element, rect));
       }
     },
     // This effect is only needed for the first render to provide a synchronous update.
@@ -80,3 +80,19 @@ function convertResizeObserverEntry(entry: ResizeObserverEntry): ContainerQueryE
     borderBoxHeight: entry.borderBoxSize[0].blockSize,
   };
 }
+
+function convertElementToEntry(element: Element, rect: DOMRect): ContainerQueryEntry {
+  const computedStyle = window.getComputedStyle(element);
+  const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+  const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+  const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+  const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+
+  return {
+    target: element,
+    contentBoxWidth: rect.width - paddingLeft - paddingRight,
+    contentBoxHeight: rect.height - paddingTop - paddingBottom,
+    borderBoxWidth: rect.width,
+    borderBoxHeight: rect.height,
+  };
+}