Skip to content

Upgrade react-transition-group for strictmode #1985

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.

Sign up for GitHub

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

Closed
dannify wants to merge 19 commits into from
Closed

Upgrade react-transition-group for strictmode #1985

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
9d68bf5
Update react-transition-group
mischnic Sep 29, 2020
a9b6874
Pass nodeRef into Transition
mischnic Sep 29, 2020
577d2c5
WIP
mischnic Sep 29, 2020
fd558ad
Merge branch 'main' into rtg-findDOMNode
dannify Oct 13, 2020
de418cb
Merge branch 'main' into rtg-findDOMNode
snowystinger Nov 6, 2020
aae65b1
Removed too many deps
snowystinger Nov 6, 2020
4048775
and merged a bad number
snowystinger Nov 6, 2020
9c7216a
fix docs build
snowystinger Nov 6, 2020
ec81f5c
Merge branch 'main' into rtg-findDOMNode-try2
snowystinger Nov 6, 2020
a115f31
Remove a few ignores and explain the last remaining one
snowystinger Nov 17, 2020
18ca0f2
Merge branch 'main' into rtg-findDOMNode-try2
snowystinger Dec 23, 2020
4b6d119
merge conflicts
dannify Jun 4, 2021
53f15fe
remove tooltip change for now
Jun 4, 2021
67f06ce
add strictmode to stories for testing
dannify Jun 5, 2021
1447216
I am a linter
dannify Jun 5, 2021
1e5b7b7
Merge branch 'main' into strictmode
dannify Jul 19, 2021
76138ea
fix tooltip refs
dannify Aug 11, 2021
8aee473
yarn lock updates
Aug 12, 2021
a6486ef
revert change
Aug 12, 2021
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
4 changes: 3 additions & 1 deletion .storybook/preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ export const parameters = {
export const decorators = [
story => (
<VerticalCenter style={{alignItems: 'center', minHeight: '100vh', boxSizing: 'border-box', display: 'flex', justifyContent: 'center'}}>
{story()}
<React.StrictMode>
{story()}
</React.StrictMode>
</VerticalCenter>
),
withProviderSwitcher
Expand Down
3 changes: 2 additions & 1 deletion packages/@react-spectrum/overlays/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@
"@react-stately/overlays": "^3.1.2",
"@react-types/overlays": "^3.5.0",
"@react-types/shared": "^3.7.0",
"react-transition-group": "^2.2.0"
"react-transition-group": "^4.4.1"

},
"devDependencies": {
"@adobe/spectrum-css-temp": "3.0.0-alpha.1"
Expand Down
8 changes: 4 additions & 4 deletions packages/@react-spectrum/overlays/src/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {ModalProps} from '@react-types/overlays';
import modalStyles from '@adobe/spectrum-css-temp/components/modal/vars.css';
import {Overlay} from './Overlay';
import overrideStyles from './overlays.css';
import React, {forwardRef, HTMLAttributes, ReactNode, RefObject} from 'react';
import React, {forwardRef, HTMLAttributes, ReactNode, RefObject, useRef} from 'react';
import {Underlay} from './Underlay';
import {useModal, useOverlay, usePreventScroll} from '@react-aria/overlays';

Expand All @@ -33,12 +33,12 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
let {children, onClose, type, ...otherProps} = props;
let domRef = useDOMRef(ref);
let {styleProps} = useStyleProps(props);

let {overlayProps, underlayProps} = useOverlay(props, domRef);
let underlayRef = useRef(null);

return (
<Overlay {...otherProps}>
<Underlay {...underlayProps} />
<Overlay {...otherProps} nodeRef={underlayRef}>
<Underlay {...underlayProps} ref={underlayRef} />
<ModalWrapper
{...styleProps}
onClose={onClose}
Expand Down
5 changes: 3 additions & 2 deletions packages/@react-spectrum/overlays/src/Overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import React, {useCallback, useState} from 'react';
import ReactDOM from 'react-dom';

function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited} = props;
let {children, isOpen, container, onEnter, onEntering, onEntered, onExit, onExiting, onExited, nodeRef} = props;
let [exited, setExited] = useState(!isOpen);

let handleEntered = useCallback(() => {
Expand Down Expand Up @@ -52,7 +52,8 @@ function Overlay(props: OverlayProps, ref: DOMRef<HTMLDivElement>) {
onExited={handleExited}
onEnter={onEnter}
onEntering={onEntering}
onEntered={handleEntered}>
onEntered={handleEntered}
nodeRef={nodeRef}>
{children}
</OpenTransition>
</Provider>
Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/overlays/src/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
let {styleProps} = useStyleProps(props);

return (
<Overlay {...otherProps}>
<Overlay {...otherProps} nodeRef={domRef}>
<PopoverWrapper
{...styleProps}
ref={domRef}
Expand Down
6 changes: 3 additions & 3 deletions packages/@react-spectrum/overlays/src/Tray.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,12 @@ function Tray(props: TrayProps, ref: DOMRef<HTMLDivElement>) {
let {children, onClose, isFixedHeight, isNonModal, ...otherProps} = props;
let domRef = useDOMRef(ref);
let {styleProps} = useStyleProps(props);

let {overlayProps, underlayProps} = useOverlay({...props, isDismissable: true}, domRef);
let underlayRef = useRef(null);

return (
<Overlay {...otherProps}>
<Underlay {...underlayProps} />
<Overlay {...otherProps} nodeRef={underlayRef}>
<Underlay {...underlayProps} ref={underlayRef} />
<TrayWrapper
{...styleProps}
onClose={onClose}
Expand Down
9 changes: 6 additions & 3 deletions packages/@react-spectrum/overlays/src/Underlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,18 @@
*/

import {classNames} from '@react-spectrum/utils';
import React from 'react';
import React, {Ref} from 'react';
import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';

interface UnderlayProps {
isOpen?: boolean
}

export function Underlay({isOpen}: UnderlayProps) {
function Underlay({isOpen}: UnderlayProps, ref: Ref<HTMLDivElement>) {
return (
<div className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen})} />
<div ref={ref} className={classNames(underlayStyles, 'spectrum-Underlay', {'is-open': isOpen})} />
);
}

const _Underlay = React.forwardRef(Underlay);
export {_Underlay as Underlay};
2 changes: 1 addition & 1 deletion packages/@react-spectrum/tooltip/src/TooltipTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function TooltipTrigger(props: SpectrumTooltipTriggerProps) {
arrowProps,
...tooltipProps
}}>
<Overlay isOpen={state.isOpen}>
<Overlay isOpen={state.isOpen} nodeRef={overlayRef}>
{tooltip}
</Overlay>
</TooltipContext.Provider>
Expand Down
11 changes: 6 additions & 5 deletions packages/@react-types/overlays/src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

import {HTMLAttributes, ReactElement, ReactNode} from 'react';
import {HTMLAttributes, MutableRefObject, ReactElement, ReactNode} from 'react';
import {StyleProps} from '@react-types/shared';

export type Placement = 'bottom' | 'bottom left' | 'bottom right' | 'bottom start' | 'bottom end' |
Expand Down Expand Up @@ -71,18 +71,19 @@ export interface OverlayProps {
onEntered?: () => void,
onExit?: () => void,
onExiting?: () => void,
onExited?: () => void
onExited?: () => void,
nodeRef: MutableRefObject<HTMLElement>
}

export interface ModalProps extends StyleProps, OverlayProps {
export interface ModalProps extends StyleProps, Omit<OverlayProps, 'nodeRef'> {
children: ReactElement,
isOpen?: boolean,
onClose?: () => void,
type?: 'modal' | 'fullscreen' | 'fullscreenTakeover',
isDismissable?: boolean
}

export interface PopoverProps extends StyleProps, OverlayProps {
export interface PopoverProps extends StyleProps, Omit<OverlayProps, 'nodeRef'> {
children: ReactNode,
placement?: PlacementAxis,
arrowProps?: HTMLAttributes<HTMLElement>,
Expand All @@ -94,7 +95,7 @@ export interface PopoverProps extends StyleProps, OverlayProps {
isDismissable?: boolean
}

export interface TrayProps extends StyleProps, OverlayProps {
export interface TrayProps extends StyleProps, Omit<OverlayProps, 'nodeRef'> {
children: ReactElement,
isOpen?: boolean,
onClose?: () => void,
Expand Down
32 changes: 25 additions & 7 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1878,7 +1878,7 @@
core-js-pure "^3.0.0"
regenerator-runtime "^0.13.4"

"@babel/runtime@7.12.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"@babel/runtime@7.12.5", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
version "7.12.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
Expand Down Expand Up @@ -9034,9 +9034,9 @@ csstype@^2.5.7:
integrity sha512-xz39Sb4+OaTsULgUERcCk+TJj8ylkL4aSVDQiX/ksxbELSqwkgt4d4RD7fovIdgJGSuNYqwZEiVjYY5l0ask+Q==

csstype@^3.0.2:
version "3.0.3"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
integrity sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==
version "3.0.8"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==

currently-unhandled@^0.4.1:
version "0.4.1"
Expand Down Expand Up @@ -9513,6 +9513,14 @@ dom-helpers@^3.2.1, dom-helpers@^3.3.1, dom-helpers@^3.4.0:
dependencies:
"@babel/runtime" "^7.1.2"

dom-helpers@^5.0.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"

dom-serializer@0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
Expand Down Expand Up @@ -19251,6 +19259,16 @@ react-transition-group@^2.2.0, react-transition-group@^2.2.1:
prop-types "^15.6.2"
react-lifecycles-compat "^3.0.4"

react-transition-group@^4.4.1:
Copy link
Copy Markdown
Member Author

@dannify dannify Aug 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems to have been added instead of upgraded which doesn't seem right.

version "4.4.2"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"

react@^16.7.0, "react@^16.8.0 || ^17.0.0-rc.1":
version "16.13.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
Expand Down Expand Up @@ -19547,9 +19565,9 @@ regenerator-runtime@^0.11.0:
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==

regenerator-runtime@^0.13.4:
version "0.13.5"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
integrity sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==
version "0.13.9"
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==

regenerator-runtime@^0.13.7:
version "0.13.7"
Expand Down