Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update react-resize-aware with use-resize-observer #40509

Merged
merged 9 commits into from
May 10, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -211,6 +211,7 @@
"react-refresh": "0.10.0",
"react-test-renderer": "17.0.2",
"redux": "4.1.2",
"resize-observer-polyfill": "1.5.1",
"rimraf": "3.0.2",
"rtlcss": "2.6.2",
"sass": "1.35.2",
1 change: 0 additions & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
@@ -65,7 +65,6 @@
"re-resizable": "^6.4.0",
"react-colorful": "^5.3.1",
"react-dates": "^21.8.0",
"react-resize-aware": "^3.1.0",
"reakit": "^1.3.8",
"uuid": "^8.3.0"
},
17 changes: 7 additions & 10 deletions packages/components/src/flyout/test/__snapshots__/index.js.snap
Original file line number Diff line number Diff line change
@@ -93,12 +93,9 @@ exports[`props should render correctly 1`] = `
<div
class="emotion-3 emotion-2"
>
<iframe
<div
aria-hidden="true"
frameborder="0"
src="about:blank"
style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
tabindex="-1"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
/>
<div
class="components-card__body components-card-body emotion-5 emotion-2"
@@ -165,11 +162,11 @@ Snapshot Diff:
tabindex="-1"
>
<div
@@ -22,10 +22,17 @@
frameborder="0"
src="about:blank"
style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
tabindex="-1"
@@ -19,10 +19,17 @@
>
<div
aria-hidden="true"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
/>
+ <div
+ class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
12 changes: 5 additions & 7 deletions packages/components/src/flyout/utils.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
/**
* External dependencies
*/
import useResizeAware from 'react-resize-aware';

/**
* WordPress dependencies
*/
import { useIsomorphicLayoutEffect } from '@wordpress/compose';
import {
useIsomorphicLayoutEffect,
useResizeObserver,
} from '@wordpress/compose';

/**
*
* @param { { onResize?: () => any } } onResize
*/
export function useFlyoutResizeUpdater( { onResize } ) {
const [ resizeListener, sizes ] = useResizeAware();
const [ resizeListener, sizes ] = useResizeObserver();

useIsomorphicLayoutEffect( () => {
onResize?.();
7 changes: 7 additions & 0 deletions packages/components/src/placeholder/test/index.js
Original file line number Diff line number Diff line change
@@ -14,6 +14,13 @@ import { useResizeObserver } from '@wordpress/compose';
*/
import Placeholder from '../';

jest.mock( '@wordpress/compose', () => {
return {
...jest.requireActual( '@wordpress/compose' ),
useResizeObserver: jest.fn( () => [] ),
};
} );

describe( 'Placeholder', () => {
beforeEach( () => {
useResizeObserver.mockReturnValue( [
Original file line number Diff line number Diff line change
@@ -16,6 +16,10 @@ exports[`Popover should pass additional props to portaled element 1`] = `
<div
style="position: relative;"
>
<div
aria-hidden="true"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
/>
Hello
</div>
</div>
@@ -38,6 +42,10 @@ exports[`Popover should render content 1`] = `
<div
style="position: relative;"
>
<div
aria-hidden="true"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
/>
Hello
</div>
</div>
Original file line number Diff line number Diff line change
@@ -2,12 +2,12 @@
* External dependencies
*/
import { noop } from 'lodash';
import useResizeAware from 'react-resize-aware';

/**
* WordPress dependencies
*/
import { useEffect, useRef, useState } from '@wordpress/element';
import { useResizeObserver } from '@wordpress/compose';

const { clearTimeout, setTimeout } = window;

@@ -56,11 +56,10 @@ export function useResizeLabel( {
showPx = false,
}: UseResizeLabelArgs ): UseResizeLabelProps {
/*
* The width/height values derive from this special useResizeAware hook.
* This custom hook uses injects an iFrame into the element, allowing it
* to tap into the onResize (window) callback events.
* The width/height values derive from this special useResizeObserver hook.
* This custom hook uses the ResizeObserver API to listen for resize events.
*/
const [ resizeListener, sizes ] = useResizeAware();
const [ resizeListener, sizes ] = useResizeObserver();

/*
* Indicates if the x/y axis is preferred.
Original file line number Diff line number Diff line change
@@ -173,12 +173,9 @@ exports[`ToggleGroupControl should render correctly with icons 1`] = `
id="toggle-group-control-1"
role="radiogroup"
>
<iframe
<div
aria-hidden="true"
frameborder="0"
src="about:blank"
style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
tabindex="-1"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
/>
<div
class="emotion-8 emotion-9"
@@ -402,12 +399,9 @@ exports[`ToggleGroupControl should render correctly with text options 1`] = `
id="toggle-group-control-0"
role="radiogroup"
>
<iframe
<div
aria-hidden="true"
frameborder="0"
src="about:blank"
style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
tabindex="-1"
style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; pointer-events: none; opacity: 0; overflow: hidden; z-index: -1;"
/>
<div
class="emotion-8 emotion-9"
Original file line number Diff line number Diff line change
@@ -4,14 +4,18 @@
import type { ForwardedRef } from 'react';
// eslint-disable-next-line no-restricted-imports
import { RadioGroup, useRadioState } from 'reakit';
import useResizeAware from 'react-resize-aware';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useRef, useMemo } from '@wordpress/element';
import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
import {
useMergeRefs,
useInstanceId,
usePrevious,
useResizeObserver,
} from '@wordpress/compose';

/**
* Internal dependencies
@@ -49,7 +53,7 @@ function ToggleGroupControl(
} = useContextSystem( props, 'ToggleGroupControl' );
const cx = useCx();
const containerRef = useRef();
const [ resizeListener, sizes ] = useResizeAware();
const [ resizeListener, sizes ] = useResizeObserver();
const baseId = useInstanceId(
ToggleGroupControl,
'toggle-group-control'
4 changes: 4 additions & 0 deletions packages/compose/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -10,6 +10,10 @@

- Add `useDisabled` hook.

### Internal

- Update the implementation of useResizeObserver to rely on the ResizableObserver API.

## 5.6.0 (2022-05-04)

## 5.5.0 (2022-04-21)
9 changes: 1 addition & 8 deletions packages/compose/README.md
Original file line number Diff line number Diff line change
@@ -447,14 +447,7 @@ _Returns_
### useResizeObserver

Hook which allows to listen the resize event of any target element when it changes sizes.
_Note: `useResizeObserver` will report `null` until after first render_

Simply a re-export of `react-resize-aware` so refer to its documentation <https://github.com/FezVrasta/react-resize-aware>
for more details.

_Related_

- <https://github.com/FezVrasta/react-resize-aware>
\_Note: `useResizeObserver` will report `null` until after first render.

_Usage_

1 change: 0 additions & 1 deletion packages/compose/package.json
Original file line number Diff line number Diff line change
@@ -41,7 +41,6 @@
"clipboard": "^2.0.8",
"lodash": "^4.17.21",
"mousetrap": "^1.6.5",
"react-resize-aware": "^3.1.0",
"use-memo-one": "^1.1.1"
},
"peerDependencies": {
31 changes: 0 additions & 31 deletions packages/compose/src/hooks/use-resize-observer/index.js

This file was deleted.

Original file line number Diff line number Diff line change
@@ -10,8 +10,6 @@ import { useState, useCallback } from '@wordpress/element';
/**
* Hook which allows to listen the resize event of any target element when it changes sizes.
*
* @return {[JSX.Element, { width: number, height: number } | null]} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height`
*
* @example
*
* ```js
Loading