From bfe25c413004ed9d40a8fad17fcbb024c10d2b69 Mon Sep 17 00:00:00 2001 From: jkillian Date: Thu, 22 Jun 2023 14:10:07 -0400 Subject: [PATCH 1/2] remove use of @juggle/resize-observer in favor of native API --- packages/core/package.json | 1 - .../core/src/components/overflow-list/overflow-list.md | 4 ++-- .../core/src/components/resize-sensor/resize-sensor.md | 2 +- .../core/src/components/resize-sensor/resizeSensor.tsx | 10 +++++++--- yarn.lock | 5 ----- 5 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 392486a0af..b53151e5af 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -45,7 +45,6 @@ "dependencies": { "@blueprintjs/colors": "^4.1.22", "@blueprintjs/icons": "^4.15.0", - "@juggle/resize-observer": "^3.4.0", "@popperjs/core": "^2.11.7", "classnames": "^2.3.1", "normalize.css": "^8.0.1", diff --git a/packages/core/src/components/overflow-list/overflow-list.md b/packages/core/src/components/overflow-list/overflow-list.md index 57fb5e4fc2..093d4060a6 100644 --- a/packages/core/src/components/overflow-list/overflow-list.md +++ b/packages/core/src/components/overflow-list/overflow-list.md @@ -9,11 +9,11 @@ The `items` prop accepts an array of generic objects. The required The required `overflowRenderer` callback prop receives all overflowed items and renders the overflow indicator. -This component uses a polyfill for the [proposed `ResizeObserver` API][resizeobserver] +This component uses [the `ResizeObserver` API][resizeobserver] to efficiently detect when its dimensions change. Use the `observeParents` prop to watch for resizing further up in the DOM tree. -[resizeobserver]: https://developers.google.com/web/updates/2016/10/resizeobserver +[resizeobserver]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver @reactExample OverflowListExample diff --git a/packages/core/src/components/resize-sensor/resize-sensor.md b/packages/core/src/components/resize-sensor/resize-sensor.md index 2510a83f0a..04a5951620 100644 --- a/packages/core/src/components/resize-sensor/resize-sensor.md +++ b/packages/core/src/components/resize-sensor/resize-sensor.md @@ -3,7 +3,7 @@ ResizeSensor observes the DOM and provides a callback for `"resize"` events on a single child element. It is a thin wrapper around [`ResizeObserver`][resizeobserver] to provide React bindings. -[resizeobserver]: https://developers.google.com/web/updates/2016/10/resizeobserver +[resizeobserver]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
DOM ref required
diff --git a/packages/core/src/components/resize-sensor/resizeSensor.tsx b/packages/core/src/components/resize-sensor/resizeSensor.tsx index ffc273ce5b..7e39edc66f 100644 --- a/packages/core/src/components/resize-sensor/resizeSensor.tsx +++ b/packages/core/src/components/resize-sensor/resizeSensor.tsx @@ -14,7 +14,6 @@ * limitations under the License. */ -import { ResizeObserver, ResizeObserverEntry } from "@juggle/resize-observer"; import React, { cloneElement, createRef } from "react"; import { AbstractPureComponent, DISPLAYNAME_PREFIX } from "../../common"; @@ -72,7 +71,8 @@ export class ResizeSensor extends AbstractPureComponent { private prevElement: HTMLElement | undefined = undefined; - private observer = new ResizeObserver(entries => this.props.onResize?.(entries)); + private observer = + globalThis.ResizeObserver != null ? new ResizeObserver(entries => this.props.onResize?.(entries)) : undefined; public render() { const onlyChild = React.Children.only(this.props.children); @@ -94,7 +94,7 @@ export class ResizeSensor extends AbstractPureComponent { } public componentWillUnmount() { - this.observer.disconnect(); + this.observer?.disconnect(); } /** @@ -103,6 +103,10 @@ export class ResizeSensor extends AbstractPureComponent { * re-observe. */ private observeElement(force = false) { + if (this.observer == null) { + return; + } + if (!(this.targetRef.current instanceof Element)) { // stop everything if not defined this.observer.disconnect(); diff --git a/yarn.lock b/yarn.lock index 7193c47598..a28f21e7e9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -693,11 +693,6 @@ "@jridgewell/resolve-uri" "3.1.0" "@jridgewell/sourcemap-codec" "1.4.14" -"@juggle/resize-observer@^3.4.0": - version "3.4.0" - resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60" - integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA== - "@leichtgewicht/ip-codec@^2.0.1": version "2.0.4" resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b" From 6cfc34586ebd5212d448c891b7dd323cf2c7b65b Mon Sep 17 00:00:00 2001 From: Adi Dahiya Date: Thu, 22 Jun 2023 15:34:02 -0400 Subject: [PATCH 2/2] fix backwards-compatible type export --- packages/core/src/components/resize-sensor/resizeSensor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/resize-sensor/resizeSensor.tsx b/packages/core/src/components/resize-sensor/resizeSensor.tsx index 0d68a7c90e..01b6d1d3f6 100644 --- a/packages/core/src/components/resize-sensor/resizeSensor.tsx +++ b/packages/core/src/components/resize-sensor/resizeSensor.tsx @@ -19,7 +19,7 @@ import * as React from "react"; import { AbstractPureComponent, DISPLAYNAME_PREFIX } from "../../common"; // backwards-compatible with @blueprintjs/core v4.x -export { ResizeObserverEntry as ResizeEntry }; +export type ResizeEntry = ResizeObserverEntry; /** `ResizeSensor` requires a single DOM element child and will error otherwise. */ export interface ResizeSensorProps {