chore: Remove ResizeObserver polyfill (#3790)

Co-authored-by: Boris Serdiuk <[email protected]>

Author: 2 people

__mocks__/@juggle/resize-observer.ts

@@ -2,7 +2,6 @@
 /* eslint-disable header/header */
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer';
 
 const callbackField = Symbol();
 
@@ -37,5 +36,33 @@ class MockResizeObserver implements ResizeObserver {
   }
 }
 
-export { ResizeObserverEntry };
+class MockResizeObserverEntry implements ResizeObserverEntry {
+  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>;
+  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>;
+  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
+  readonly contentRect: DOMRectReadOnly;
+  readonly target: Element;
+
+  constructor(target: Element) {
+    this.target = target;
+    const size = { inlineSize: 0, blockSize: 0 };
+    this.borderBoxSize = [size];
+    this.contentBoxSize = [size];
+    this.devicePixelContentBoxSize = [size];
+    // Create a simple DOMRectReadOnly mock for JSDOM compatibility
+    this.contentRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      toJSON: () => ({}),
+    } as DOMRectReadOnly;
+  }
+}
+
 export { MockResizeObserver as ResizeObserver };
+export { MockResizeObserverEntry as ResizeObserverEntry };

build-tools/jest/setup.js

@@ -7,4 +7,14 @@ if (typeof window !== 'undefined') {
   require('@testing-library/jest-dom/extend-expect');
   const { cleanup } = require('@testing-library/react');
   afterEach(cleanup);
+
+  // Mock ResizeObserver for JSDOM environment
+  global.ResizeObserver = class ResizeObserver {
+    constructor(callback) {
+      this.callback = callback;
+    }
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
 }

package-lock.json

@@ -32,7 +32,6 @@
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
-    "@juggle/resize-observer": "^3.3.1",
     "ace-builds": "^1.34.0",
     "balanced-match": "^1.0.2",
     "clsx": "^1.1.0",

package.json

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { RefObject, useEffect, useState } from 'react';
-import { ResizeObserver } from '@juggle/resize-observer';
 
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 
@@ -85,7 +84,7 @@ export function useStickyScrollbar(
 
   // Update scrollbar position wrapper or table size change.
   useEffect(() => {
-    if (wrapperRef.current && tableRef.current) {
+    if (wrapperRef.current && tableRef.current && typeof ResizeObserver !== 'undefined') {
       const observer = new ResizeObserver(() => {
         if (scrollbarContentRef.current) {
           updatePosition(