diff --git a/__mocks__/@juggle/resize-observer.ts b/__mocks__/@juggle/resize-observer.ts index 620bfd6992..50199d144b 100644 --- a/__mocks__/@juggle/resize-observer.ts +++ b/__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; + readonly contentBoxSize: ReadonlyArray; + readonly devicePixelContentBoxSize: ReadonlyArray; + 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 }; diff --git a/build-tools/jest/setup.js b/build-tools/jest/setup.js index 19a1ca30b5..0056854f65 100644 --- a/build-tools/jest/setup.js +++ b/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() {} + }; } diff --git a/package-lock.json b/package-lock.json index 9c7bf020b9..f757bd382a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,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", diff --git a/package.json b/package.json index cbff2ebddf..5b18fa5302 100644 --- a/package.json +++ b/package.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", diff --git a/src/table/sticky-scrollbar/use-sticky-scrollbar.ts b/src/table/sticky-scrollbar/use-sticky-scrollbar.ts index b61e8164d9..b2d819aa4a 100644 --- a/src/table/sticky-scrollbar/use-sticky-scrollbar.ts +++ b/src/table/sticky-scrollbar/use-sticky-scrollbar.ts @@ -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(