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
Show file tree
Hide file tree
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
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion packages/components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
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
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
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?.();
Expand Down
7 changes: 7 additions & 0 deletions packages/components/src/placeholder/test/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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( [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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'
Expand Down
4 changes: 4 additions & 0 deletions packages/compose/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
9 changes: 1 addition & 8 deletions packages/compose/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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_

Expand Down
1 change: 0 additions & 1 deletion packages/compose/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
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
Expand Up @@ -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
Expand Down
Loading