From b67e76c0b937d8e6a3398b1b8272a589f9673a4a Mon Sep 17 00:00:00 2001 From: Rogin Farrer Date: Sun, 12 Apr 2020 14:34:56 -0400 Subject: [PATCH] =?UTF-8?q?Fix=20the=20padding=20bug=20=F0=9F=8E=89=20(#44?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * It works! * idk * fix the stories * fix padding warning * try new node modules workflow * fix a few more things --- .github/workflows/test.yml | 52 ++++++++-------- package.json | 2 +- src/__tests__/hooks.test.tsx | 69 +++++++++++---------- src/__tests__/index.test.tsx | 61 +++++++----------- src/hooks.ts | 28 ++++++++- src/index.ts | 116 +++++++++++++++++------------------ src/types.ts | 2 +- src/utils.ts | 30 --------- stories/basic.stories.tsx | 2 + yarn.lock | 91 +++++++++++++++++---------- 10 files changed, 233 insertions(+), 220 deletions(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 3722eef..8309bf5 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -2,30 +2,32 @@ name: CI on: [push] jobs: - job1: - name: Test - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v1 - - uses: borales/actions-yarn@v2.0.0 - with: - # will run `yarn install` command - cmd: install - - uses: borales/actions-yarn@v2.0.0 - with: - # will run `yarn test` command - cmd: test - job2: - name: Lint - needs: job1 + build: runs-on: ubuntu-latest + steps: - - uses: actions/checkout@v1 - - uses: borales/actions-yarn@v2.0.0 - with: - # will run `yarn install` command - cmd: install - - uses: borales/actions-yarn@v2.0.0 - with: - # will run `yarn test` command - cmd: lint + - uses: actions/checkout@v2 + + - name: Cache node modules + uses: actions/cache@v1 + env: + cache-name: cache-node-modules + with: + path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS + key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }} + restore-keys: | + ${{ runner.os }}-build-${{ env.cache-name }}- + ${{ runner.os }}-build- + ${{ runner.os }}- + + - name: Install Dependencies + run: yarn install + + - name: Build + run: yarn build + + - name: Test + run: yarn test + + - name: Lint + run: yarn lint diff --git a/package.json b/package.json index a5bc600..e420516 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@storybook/addons": "^5.3.12", "@storybook/react": "^5.3.12", "@testing-library/jest-dom": "^5.3.0", - "@testing-library/react": "^9.4.0", + "@testing-library/react": "^10.0.2", "@testing-library/react-hooks": "^3.2.1", "@types/jest": "^25.1.2", "@types/raf": "^3.4.0", diff --git a/src/__tests__/hooks.test.tsx b/src/__tests__/hooks.test.tsx index a4f3cc4..3c1ee3f 100644 --- a/src/__tests__/hooks.test.tsx +++ b/src/__tests__/hooks.test.tsx @@ -1,61 +1,67 @@ import React from 'react'; -import { renderHook, act } from '@testing-library/react-hooks'; -import { render } from '@testing-library/react'; +import { render, act } from '@testing-library/react'; import { useEffectAfterMount, useControlledState } from '../hooks'; describe('useEffectAfterMount', () => { it('does not run callback on first render', () => { - const cb = jest.fn(); - // Provide a dependency that changes, so it re-renders let x = 0; - const { rerender } = renderHook(() => { + const cb = jest.fn(); + + function UseEffectAfterMount() { x++; - return useEffectAfterMount(cb, [x]); - }); + useEffectAfterMount(cb, [x]); + return null; + } + + const { rerender } = render(); expect(cb).not.toHaveBeenCalled(); - rerender(); + rerender(); expect(cb).toHaveBeenCalled(); }); }); describe('useControlledState', () => { - it('should match default snapshot', () => { - const { - result: { current }, - } = renderHook(() => useControlledState({})); - - expect(current).toMatchInlineSnapshot(` - Array [ - false, - [Function], - ] - `); + let hookReturn: [boolean, () => void]; + + function UseControlledState({ + defaultOpen, + isOpen, + }: { + defaultOpen?: boolean; + isOpen?: boolean; + }) { + const result = useControlledState({ defaultOpen, isOpen }); + + hookReturn = result; + + return null; + } + + it('returns a boolean and a function', () => { + render(); + + expect(hookReturn[0]).toBe(false); + expect(typeof hookReturn[1]).toBe('function'); }); it('returns the defaultValue value', () => { - const { result } = renderHook(() => - useControlledState({ defaultOpen: true }) - ); - - const [value] = result.current; + render(); - expect(value).toBe(true); + expect(hookReturn[0]).toBe(true); }); it('setter toggles the value', () => { - const { result } = renderHook(() => - useControlledState({ defaultOpen: true }) - ); + render(); - expect(result.current[0]).toBe(true); + expect(hookReturn[0]).toBe(true); act(() => { - result.current[1](); + hookReturn[1](); }); - expect(result.current[0]).toBe(false); + expect(hookReturn[0]).toBe(false); }); describe('dev feedback', () => { @@ -64,7 +70,6 @@ describe('useControlledState', () => { const originalWarn = console.warn; let consoleOutput: string[] = []; const mockWarn = (output: any) => consoleOutput.push(output); - console.warn = jest.fn(mockWarn); beforeEach(() => (console.warn = mockWarn)); afterEach(() => { diff --git a/src/__tests__/index.test.tsx b/src/__tests__/index.test.tsx index 9faeb96..5bf11c1 100644 --- a/src/__tests__/index.test.tsx +++ b/src/__tests__/index.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; -import { renderHook, act } from '@testing-library/react-hooks'; +import { renderHook } from '@testing-library/react-hooks'; import { mocked } from 'ts-jest/utils'; import useCollapse from '../'; import { getElementHeight } from '../utils'; @@ -42,27 +42,12 @@ test('does not throw', () => { test('returns expected constants', () => { const { result } = renderHook(useCollapse); - const { - isOpen, - getToggleProps, - getCollapseProps, - toggleOpen, - } = result.current; - - expect(typeof isOpen).toBe('boolean'); - expect(typeof toggleOpen).toBe('function'); - expect(typeof getToggleProps()).toBe('object'); - expect(typeof getCollapseProps()).toBe('object'); -}); -test('toggleOpen toggles isOpen', () => { - const { result } = renderHook(useCollapse); - const { toggleOpen } = result.current; - act(() => { - toggleOpen(); - }); - const { isOpen } = result.current; - expect(isOpen).toBe(true); + expect(result.current.isOpen).toStrictEqual(false); + expect(result.current.mountChildren).toStrictEqual(false); + expect(typeof result.current.toggleOpen).toBe('function'); + expect(typeof result.current.getToggleProps()).toBe('object'); + expect(typeof result.current.getCollapseProps()).toBe('object'); }); test('Toggle has expected props when closed (default)', () => { @@ -178,23 +163,23 @@ describe('mountChildren', () => { }); test('warns if using padding on collapse', () => { - // Even though the error is caught, it still gets printed to the console - // so we mock that out to avoid the wall of red text. - jest.spyOn(console, 'error'); - // @ts-ignore - console.error.mockImplementation(() => {}); - - expect(() => - render( - - ) - ).toThrowErrorMatchingInlineSnapshot( - `"Padding applied to the collapse element in react-collapsed will cause the animation to break, and never end. To fix, apply equivalent padding to the direct descendent of the collapse element."` + // Mocking console.warn so it does not log to the console, + // but we can still intercept the message + const originalWarn = console.warn; + let consoleOutput: string = ''; + const mockWarn = (output: any) => (consoleOutput = output); + console.warn = jest.fn(mockWarn); + + render( + + ); + + expect(consoleOutput).toMatchInlineSnapshot( + `"Warning: react-collapsed: Padding applied to the collapse element will cause the animation to break and not perform as expected. To fix, apply equivalent padding to the direct descendent of the collapse element."` ); - // @ts-ignore - console.error.mockRestore(); + console.warn = originalWarn; }); diff --git a/src/hooks.ts b/src/hooks.ts index 72118a7..36df789 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -1,4 +1,4 @@ -import { useState, useRef, useEffect, useCallback } from 'react'; +import { RefObject, useState, useRef, useEffect, useCallback } from 'react'; import warning from 'tiny-warning'; export function useControlledState({ @@ -60,3 +60,29 @@ export function useUniqueId(): number { useEffect(() => setId(genId()), []); return id; } + +export function usePaddingWarning(element: RefObject): void { + // @ts-ignore + let warn = (el?: RefObject): void => {}; + + if (__DEV__) { + warn = el => { + if (!el?.current) { + return; + } + const { paddingTop, paddingBottom } = window.getComputedStyle(el.current); + const hasPadding = + (paddingTop && paddingTop !== '0px') || + (paddingBottom && paddingBottom !== '0px'); + + warning( + !hasPadding, + 'react-collapsed: Padding applied to the collapse element will cause the animation to break and not perform as expected. To fix, apply equivalent padding to the direct descendent of the collapse element.' + ); + }; + } + + useEffect(() => { + warn(element); + }, [element]); +} diff --git a/src/index.ts b/src/index.ts index 8b5f23b..340523c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,10 +4,13 @@ import { callAll, getElementHeight, getAutoHeightDuration, - warnPadding, - rAF, } from './utils'; -import { useUniqueId, useEffectAfterMount, useControlledState } from './hooks'; +import { + usePaddingWarning, + useUniqueId, + useEffectAfterMount, + useControlledState, +} from './hooks'; import { CollapseConfig, CollapseAPI, @@ -16,59 +19,47 @@ import { GetTogglePropsAPI, GetTogglePropsShape, } from './types'; +import raf from 'raf'; const easeInOut = 'cubic-bezier(0.4, 0, 0.2, 1)'; -export default function useCollapse( - initialConfig: CollapseConfig = {} -): CollapseAPI { - const { - duration = null, - easing = easeInOut, - collapseStyles = {}, - expandStyles = {}, - } = initialConfig; +export default function useCollapse({ + duration, + easing = easeInOut, + collapseStyles = {}, + expandStyles = {}, + ...initialConfig +}: CollapseConfig = {}): CollapseAPI { + const [isOpen, toggleOpen] = useControlledState(initialConfig); const uniqueId = useUniqueId(); const el = useRef(null); - const request = useRef(0); + usePaddingWarning(el); const collapsedHeight = `${initialConfig.collapsedHeight || 0}px`; const collapsedStyles = { display: collapsedHeight === '0px' ? 'none' : 'block', height: collapsedHeight, overflow: 'hidden', }; - const [isOpen, toggleOpen] = useControlledState(initialConfig); const [styles, setStyles] = useState( isOpen ? {} : collapsedStyles ); - const [mountChildren, setMountChildren] = useState(isOpen); + const [mountChildren, setMountChildren] = useState(isOpen); const mergeStyles = (newStyles: {}): void => { setStyles(oldStyles => ({ ...oldStyles, ...newStyles })); }; - warnPadding(el); - function getTransitionStyles( - height: number | string, - state: 'expand' | 'collapse' + height: number | string ): { transition: string } { const _duration = duration || getAutoHeightDuration(height); - let _easing = easing; - if (typeof easing !== 'string') { - if (easing.expand && state === 'expand') { - _easing = easing.expand; - } else if (easing.collapse && state === 'collapse') { - _easing = easing.collapse; - } - } return { - transition: `height ${_duration}ms ${_easing}`, + transition: `height ${_duration}ms ${easing}`, }; } useEffectAfterMount(() => { if (isOpen) { - request.current = rAF(() => { + raf(() => { setMountChildren(true); mergeStyles({ ...expandStyles, @@ -76,52 +67,60 @@ export default function useCollapse( display: 'block', overflow: 'hidden', }); - const height = getElementHeight(el); - mergeStyles({ - ...getTransitionStyles(height, 'expand'), - height, + raf(() => { + const height = getElementHeight(el); + mergeStyles({ + ...getTransitionStyles(height), + height, + }); }); }); } else { - request.current = rAF(() => { + raf(() => { const height = getElementHeight(el); mergeStyles({ ...collapseStyles, - ...getTransitionStyles(height, 'collapse'), + ...getTransitionStyles(height), willChange: 'height', height, }); - mergeStyles({ - height: collapsedHeight, - overflow: 'hidden', + raf(() => { + mergeStyles({ + height: collapsedHeight, + overflow: 'hidden', + }); }); }); } - return () => { - rAF.cancel(request.current); - }; }, [isOpen]); const handleTransitionEnd = (e: TransitionEvent): void => { // Sometimes onTransitionEnd is triggered by another transition, // such as a nested collapse panel transitioning. But we only // want to handle this if this component's element is transitioning - if (e.target !== el.current) { + if (e.target !== el.current || e.propertyName !== 'height') { return; } - // The height comparisons below are a final check before completing the transition - // Sometimes this callback is run even though we've already begun transitioning the other direction - // The conditions give us the opportunity to bail out, which will prevent the collapsed content from flashing on the screen + // The height comparisons below are a final check before + // completing the transition + // Sometimes this callback is run even though we've already begun + // transitioning the other direction + // The conditions give us the opportunity to bail out, + // which will prevent the collapsed content from flashing on the screen if (isOpen) { const height = getElementHeight(el); - // If the height at the end of the transition matches the height we're animating to, + + // If the height at the end of the transition + // matches the height we're animating to, if (height === styles.height) { setStyles({}); } else { - // If the heights don't match, this could be due the height of the content changing mid-transition + // If the heights don't match, this could be due the height + // of the content changing mid-transition mergeStyles({ height }); } + // If the height we should be animating to matches the collapsed height, // it's safe to apply the collapsed overrides } else if (styles.height === collapsedHeight) { @@ -130,8 +129,11 @@ export default function useCollapse( } }; - function getToggleProps(props: GetTogglePropsShape = {}): GetTogglePropsAPI { - const { disabled = false, onClick = noop, ...rest } = props; + function getToggleProps({ + disabled = false, + onClick = noop, + ...rest + }: GetTogglePropsShape = {}): GetTogglePropsAPI { return { type: 'button', role: 'button', @@ -145,15 +147,12 @@ export default function useCollapse( }; } - function getCollapseProps( - props: GetCollapsePropsShape = {} - ): GetCollapsePropsAPI { - const { - style = {}, - onTransitionEnd = noop, - refKey = 'ref', - ...rest - } = props; + function getCollapseProps({ + style = {}, + onTransitionEnd = noop, + refKey = 'ref', + ...rest + }: GetCollapsePropsShape = {}): GetCollapsePropsAPI { return { id: `react-collapsed-panel-${uniqueId}`, 'aria-hidden': !isOpen, @@ -161,6 +160,7 @@ export default function useCollapse( [refKey]: el, onTransitionEnd: callAll(handleTransitionEnd, onTransitionEnd), style: { + boxSizing: 'border-box', // additional styles passed, e.g. getCollapseProps({style: {}}) ...style, // style overrides from state diff --git a/src/types.ts b/src/types.ts index 1dc55d8..64535d9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,7 +14,7 @@ export interface CollapseConfig { expandStyles?: {}; collapseStyles?: {}; easing?: string | { expand?: string; collapse?: string }; - duration?: number | string; + duration?: number; } export interface GetTogglePropsAPI { diff --git a/src/utils.ts b/src/utils.ts index 028b492..2020fd0 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,6 +1,5 @@ import { RefObject } from 'react'; import warning from 'tiny-warning'; -import raf from 'raf'; type AnyFunction = (...args: any[]) => unknown; @@ -46,32 +45,3 @@ export function getAutoHeightDuration(height: number | string): number { // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10 return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10); } - -type WarnElement = RefObject | { current?: HTMLElement }; -// @ts-ignore -let warnPadding = (element: WarnElement): void => {}; -if (__DEV__) { - warnPadding = (element: WarnElement): void => { - if (!element.current) { - return; - } - const { paddingTop, paddingBottom } = window.getComputedStyle( - element.current - ); - if ( - (paddingTop && paddingTop !== '0px') || - (paddingBottom && paddingBottom !== '0px') - ) { - throw new Error( - 'Padding applied to the collapse element in react-collapsed will cause the animation to break, and never end. To fix, apply equivalent padding to the direct descendent of the collapse element.' - ); - } - }; -} - -export { warnPadding }; - -export function rAF(cb: () => void) { - return raf(() => raf(cb)); -} -rAF.cancel = raf.cancel; diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx index 530d5fc..8be1ac6 100644 --- a/stories/basic.stories.tsx +++ b/stories/basic.stories.tsx @@ -6,12 +6,14 @@ import { withA11y } from '@storybook/addon-a11y'; export const Uncontrolled = () => { const { getCollapseProps, getToggleProps, isOpen } = useCollapse({ defaultOpen: true, + duration: 1000, }); return (
{isOpen ? 'Close' : 'Open'} {excerpt} +

adding something here

); }; diff --git a/yarn.lock b/yarn.lock index 8163088..5a9e673 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1313,7 +1313,15 @@ pirates "^4.0.0" source-map-support "^0.5.16" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6": +"@babel/runtime-corejs3@^7.7.4": + version "7.9.2" + resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz#26fe4aa77e9f1ecef9b776559bbb8e84d34284b7" + integrity sha512-HHxmgxbIzOfFlZ+tdeRKtaxWOMUoCG5Mu3wKeUmOxjYrwb3AAHgnmtCUbPPK11/raIWLIBK250t8E2BPO0p7jA== + dependencies: + core-js-pure "^3.0.0" + regenerator-runtime "^0.13.4" + +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6": version "7.8.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308" integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ== @@ -2049,11 +2057,6 @@ dependencies: any-observable "^0.3.0" -"@sheerun/mutationobserver-shim@^0.3.2": - version "0.3.2" - resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b" - integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q== - "@sindresorhus/is@^0.14.0": version "0.14.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea" @@ -2776,17 +2779,16 @@ dependencies: defer-to-connect "^1.0.1" -"@testing-library/dom@^6.11.0": - version "6.12.2" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-6.12.2.tgz#5d549acf43f2e0c23b2abfd4e36d65594c3b2741" - integrity sha512-KCnvHra5fV+wDxg3wJObGvZFxq7v1DJt829GNFLuRDjKxVNc/B5AdsylNF5PMHFbWMXDsHwM26d2NZcZO9KjbQ== +"@testing-library/dom@^7.1.0": + version "7.2.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.2.1.tgz#bb3b31d669bbe0c4939dadd95d69caa3c1d0b372" + integrity sha512-xIGoHlQ2ZiEL1dJIFKNmLDypzYF+4OJTTASRctl/aoIDaS5y/pRVHRigoqvPUV11mdJoR71IIgi/6UviMgyz4g== dependencies: - "@babel/runtime" "^7.6.2" - "@sheerun/mutationobserver-shim" "^0.3.2" - "@types/testing-library__dom" "^6.0.0" - aria-query "3.0.0" - pretty-format "^24.9.0" - wait-for-expect "^3.0.0" + "@babel/runtime" "^7.9.2" + "@types/testing-library__dom" "^7.0.0" + aria-query "^4.0.2" + dom-accessibility-api "^0.4.2" + pretty-format "^25.1.0" "@testing-library/jest-dom@^5.3.0": version "5.3.0" @@ -2811,14 +2813,14 @@ "@babel/runtime" "^7.5.4" "@types/testing-library__react-hooks" "^3.0.0" -"@testing-library/react@^9.4.0": - version "9.4.0" - resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.4.0.tgz#b021ac8cb987c8dc54c6841875f745bf9b2e88e5" - integrity sha512-XdhDWkI4GktUPsz0AYyeQ8M9qS/JFie06kcSnUVcpgOwFjAu9vhwR83qBl+lw9yZWkbECjL8Hd+n5hH6C0oWqg== +"@testing-library/react@^10.0.2": + version "10.0.2" + resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-10.0.2.tgz#8eca7aa52d810cf7150048a2829fdc487162006d" + integrity sha512-YT6Mw0oJz7R6vlEkmo1FlUD+K15FeXApOB5Ffm9zooFVnrwkt00w18dUJFMOh1yRp9wTdVRonbor7o4PIpFCmA== dependencies: - "@babel/runtime" "^7.7.6" - "@testing-library/dom" "^6.11.0" - "@types/testing-library__react" "^9.1.2" + "@babel/runtime" "^7.9.2" + "@testing-library/dom" "^7.1.0" + "@types/testing-library__react" "^10.0.0" "@types/babel-types@*", "@types/babel-types@^7.0.0": version "7.0.7" @@ -3104,13 +3106,20 @@ "@types/react-native" "*" csstype "^2.2.0" -"@types/testing-library__dom@*", "@types/testing-library__dom@^6.0.0": +"@types/testing-library__dom@*": version "6.12.0" resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-6.12.0.tgz#7d3b9e1ea7c1bda249b08d3b2dee8bb08a57976b" integrity sha512-PQ/gzABzc53T68RldZ/sJHKCihtP9ofU8XIgOk+H7tlfoCRdg9mqICio5Fo8j3Z8wo+pOfuDsuPprWsn3YtVmA== dependencies: pretty-format "^24.3.0" +"@types/testing-library__dom@^7.0.0": + version "7.0.1" + resolved "https://registry.yarnpkg.com/@types/testing-library__dom/-/testing-library__dom-7.0.1.tgz#426bef0aa306a603fe071859d4b485941b28aca6" + integrity sha512-WokGRksRJb3Dla6h02/0/NNHTkjsj4S8aJZiwMj/5/UL8VZ1iCe3H8SHzfpmBeH8Vp4SPRT8iC2o9kYULFhDIw== + dependencies: + pretty-format "^25.1.0" + "@types/testing-library__jest-dom@^5.0.2": version "5.0.3" resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.0.3.tgz#8efef348eeedc62e7de21acbe455a779936417c4" @@ -3126,13 +3135,14 @@ "@types/react" "*" "@types/react-test-renderer" "*" -"@types/testing-library__react@^9.1.2": - version "9.1.2" - resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-9.1.2.tgz#e33af9124c60a010fc03a34eff8f8a34a75c4351" - integrity sha512-CYaMqrswQ+cJACy268jsLAw355DZtPZGt3Jwmmotlcu8O/tkoXBI6AeZ84oZBJsIsesozPKzWzmv/0TIU+1E9Q== +"@types/testing-library__react@^10.0.0": + version "10.0.1" + resolved "https://registry.yarnpkg.com/@types/testing-library__react/-/testing-library__react-10.0.1.tgz#92bb4a02394bf44428e35f1da2970ed77f803593" + integrity sha512-RbDwmActAckbujLZeVO/daSfdL1pnjVqas25UueOkAY5r7vriavWf0Zqg7ghXMHa8ycD/kLkv8QOj31LmSYwww== dependencies: "@types/react-dom" "*" "@types/testing-library__dom" "*" + pretty-format "^25.1.0" "@types/unist@^2.0.0", "@types/unist@^2.0.2": version "2.0.3" @@ -3808,7 +3818,7 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" -aria-query@3.0.0, aria-query@^3.0.0: +aria-query@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc" integrity sha1-ZbP8wcoRVajJrmTW7uKX8V1RM8w= @@ -3816,6 +3826,14 @@ aria-query@3.0.0, aria-query@^3.0.0: ast-types-flow "0.0.7" commander "^2.11.0" +aria-query@^4.0.2: + version "4.0.2" + resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.0.2.tgz#250687b4ccde1ab86d127da0432ae3552fc7b145" + integrity sha512-S1G1V790fTaigUSM/Gd0NngzEfiMy9uTUfMyHhKhVyy4cH5O/eTuR01ydhGL0z4Za1PXFTRGH3qL8VhUQuEO5w== + dependencies: + "@babel/runtime" "^7.7.4" + "@babel/runtime-corejs3" "^7.7.4" + arr-diff@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf" @@ -5775,6 +5793,11 @@ core-js-compat@^3.6.2: browserslist "^4.8.3" semver "7.0.0" +core-js-pure@^3.0.0: + version "3.6.5" + resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813" + integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA== + core-js-pure@^3.0.1: version "3.6.4" resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.4.tgz#4bf1ba866e25814f149d4e9aaa08c36173506e3a" @@ -6429,6 +6452,11 @@ doctypes@^1.1.0: resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9" integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk= +dom-accessibility-api@^0.4.2: + version "0.4.3" + resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.4.3.tgz#93ca9002eb222fd5a343b6e5e6b9cf5929411c4c" + integrity sha512-JZ8iPuEHDQzq6q0k7PKMGbrIdsgBB7TRrtVOUm4nSMCExlg5qQG4KXWTH2k90yggjM4tTumRGwTKJSldMzKyLA== + dom-converter@^0.2: version "0.2.0" resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768" @@ -16897,11 +16925,6 @@ w3c-xmlserializer@^1.1.2: webidl-conversions "^4.0.2" xml-name-validator "^3.0.0" -wait-for-expect@^3.0.0: - version "3.0.2" - resolved "https://registry.yarnpkg.com/wait-for-expect/-/wait-for-expect-3.0.2.tgz#d2f14b2f7b778c9b82144109c8fa89ceaadaa463" - integrity sha512-cfS1+DZxuav1aBYbaO/kE06EOS8yRw7qOFoD3XtjTkYvCvh3zUvNST8DXK/nPaeqIzIv3P3kL3lRJn8iwOiSag== - walker@^1.0.7, walker@~1.0.5: version "1.0.7" resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"