Skip to content

Commit 50a3714

Browse files
jquensejquense
authored
chore: update react overlays (react-bootstrap#4661)
BREAKING CHANGE: custom Dropdown Menu's and Toggles can no longer be class components unless they are wrapped in forwardRef()
1 parent ec012d0 commit 50a3714

23 files changed

+293
-311
lines changed

‎karma.conf.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,12 @@ module.exports = config => {
2929
},
3030
],
3131
},
32+
resolve: {
33+
symlinks: false,
34+
},
3235
plugins: [
3336
new DefinePlugin({
37+
__DEV__: true,
3438
'process.env.NODE_ENV': JSON.stringify('test'),
3539
}),
3640
],

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,8 +73,8 @@
7373
"@babel/cli": "^7.5.0",
7474
"@babel/core": "^7.5.4",
7575
"@babel/register": "^7.4.4",
76-
"@react-bootstrap/babel-preset": "^1.1.3",
77-
"@react-bootstrap/eslint-config": "^1.2.0",
76+
"@react-bootstrap/babel-preset": "^1.2.0",
77+
"@react-bootstrap/eslint-config": "^1.3.1",
7878
"babel-eslint": "^10.0.2",
7979
"babel-loader": "^8.0.6",
8080
"babel-plugin-istanbul": "^5.1.4",
@@ -100,7 +100,7 @@
100100
"execa": "^3.1.0",
101101
"fs-extra": "^8.1.0",
102102
"husky": "^3.0.0",
103-
"karma": "^4.2.0",
103+
"karma": "^4.4.1",
104104
"karma-chrome-launcher": "^3.0.0",
105105
"karma-cli": "^2.0.0",
106106
"karma-coverage": "^2.0.1",
@@ -112,7 +112,7 @@
112112
"karma-webpack": "^4.0.2",
113113
"lint-staged": "^9.2.0",
114114
"lodash": "^4.17.14",
115-
"mocha": "^6.1.4",
115+
"mocha": "^6.2.2",
116116
"prettier": "^1.18.2",
117117
"react": "^16.8.6",
118118
"react-dom": "^16.8.6",
@@ -128,13 +128,13 @@
128128
"@restart/hooks": "^0.3.11",
129129
"@types/react": "^16.8.23",
130130
"classnames": "^2.2.6",
131-
"dom-helpers": "^3.4.0",
131+
"dom-helpers": "^5.1.2",
132132
"invariant": "^2.2.4",
133133
"keycode": "^2.2.0",
134-
"popper.js": "^1.14.7",
134+
"popper.js": "^1.16.0",
135135
"prop-types": "^15.7.2",
136136
"prop-types-extra": "^1.1.0",
137-
"react-overlays": "^1.2.0",
137+
"react-overlays": "^2.1.0",
138138
"react-transition-group": "^4.0.0",
139139
"uncontrollable": "^7.0.0",
140140
"warning": "^4.0.3"

‎src/AbstractNav.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import qsa from 'dom-helpers/query/querySelectorAll';
1+
import qsa from 'dom-helpers/querySelectorAll';
22
import PropTypes from 'prop-types';
33
import React, { useContext, useEffect, useRef } from 'react';
44
import useForceUpdate from '@restart/hooks/useForceUpdate';

‎src/BootstrapModalManager.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import qsa from 'dom-helpers/query/querySelectorAll';
2-
import css from 'dom-helpers/style';
3-
import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
1+
import css from 'dom-helpers/css';
2+
import qsa from 'dom-helpers/querySelectorAll';
3+
import getScrollbarSize from 'dom-helpers/scrollbarSize';
44
import ModalManager from 'react-overlays/ModalManager';
55

66
const Selector = {

‎src/Carousel.js

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import classNames from 'classnames';
2-
import styles from 'dom-helpers/style';
3-
import transition from 'dom-helpers/transition';
4-
import React, { cloneElement } from 'react';
2+
import styles from 'dom-helpers/css';
3+
import transitionEnd from 'dom-helpers/transitionEnd';
54
import PropTypes from 'prop-types';
5+
import React, { cloneElement } from 'react';
66
import { uncontrollable } from 'uncontrollable';
7-
87
import CarouselCaption from './CarouselCaption';
98
import CarouselItem from './CarouselItem';
9+
import { forEach, map } from './ElementChildren';
1010
import SafeAnchor from './SafeAnchor';
11-
import { map, forEach } from './ElementChildren';
12-
import triggerBrowserReflow from './triggerBrowserReflow';
1311
import { createBootstrapComponent } from './ThemeProvider';
12+
import triggerBrowserReflow from './triggerBrowserReflow';
1413

1514
const countChildren = c =>
1615
React.Children.toArray(c).filter(React.isValidElement).length;
@@ -211,7 +210,7 @@ class Carousel extends React.Component {
211210
currentClasses: classNames(orderClassName, directionalClassName),
212211
},
213212
() =>
214-
transition.end(nextElement, () => {
213+
transitionEnd(nextElement, () => {
215214
this.safeSetState(
216215
{ prevClasses: '', currentClasses: 'active' },
217216
this.handleSlideEnd,

‎src/Collapse.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import classNames from 'classnames';
2-
import css from 'dom-helpers/style';
3-
import onEnd from 'dom-helpers/transition/end';
2+
import css from 'dom-helpers/css';
3+
import transitionEnd from 'dom-helpers/transitionEnd';
44
import PropTypes from 'prop-types';
55
import React from 'react';
66
import Transition, {
@@ -197,7 +197,7 @@ class Collapse extends React.Component {
197197

198198
return (
199199
<Transition
200-
addEndListener={onEnd}
200+
addEndListener={transitionEnd}
201201
{...props}
202202
aria-expanded={props.role ? props.in : null}
203203
onEnter={handleEnter}

‎src/Dropdown.js

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import classNames from 'classnames';
2-
import React, { useContext } from 'react';
32
import PropTypes from 'prop-types';
3+
import React, { useContext } from 'react';
44
import BaseDropdown from 'react-overlays/Dropdown';
55
import { useUncontrolled } from 'uncontrollable';
66
import useEventCallback from '@restart/hooks/useEventCallback';
7-
8-
import { useBootstrapPrefix } from './ThemeProvider';
7+
import DropdownItem from './DropdownItem';
98
import DropdownMenu from './DropdownMenu';
109
import DropdownToggle from './DropdownToggle';
11-
import DropdownItem from './DropdownItem';
1210
import SelectableContext from './SelectableContext';
11+
import { useBootstrapPrefix } from './ThemeProvider';
1312
import createWithBsPrefix from './createWithBsPrefix';
1413

1514
const propTypes = {
@@ -120,7 +119,7 @@ const Dropdown = React.forwardRef((uncontrolledProps, ref) => {
120119

121120
return (
122121
<SelectableContext.Provider value={handleSelect}>
123-
<BaseDropdown.ControlledComponent
122+
<BaseDropdown
124123
drop={drop}
125124
show={show}
126125
alignEnd={alignRight}
@@ -143,7 +142,7 @@ const Dropdown = React.forwardRef((uncontrolledProps, ref) => {
143142
)}
144143
/>
145144
)}
146-
</BaseDropdown.ControlledComponent>
145+
</BaseDropdown>
147146
</SelectableContext.Provider>
148147
);
149148
});

‎src/DropdownMenu.js

Lines changed: 50 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,11 @@
11
import classNames from 'classnames';
2-
import { findDOMNode } from 'react-dom';
3-
import React, { useContext } from 'react';
42
import PropTypes from 'prop-types';
5-
6-
import BaseDropdownMenu from 'react-overlays/DropdownMenu';
3+
import React, { useContext } from 'react';
4+
import { useDropdownMenu } from 'react-overlays/DropdownMenu';
5+
import useMergedRefs from '@restart/hooks/useMergedRefs';
76
import NavbarContext from './NavbarContext';
8-
97
import { useBootstrapPrefix } from './ThemeProvider';
10-
11-
const wrapRef = props => {
12-
const { ref } = props;
13-
props.ref = ref.__wrapped || (ref.__wrapped = r => ref(findDOMNode(r)));
14-
return props;
15-
};
8+
import useWrappedRefWithWarning from './useWrappedRefWithWarning';
169

1710
const propTypes = {
1811
/**
@@ -78,47 +71,54 @@ const DropdownMenu = React.forwardRef(
7871
) => {
7972
const isNavbar = useContext(NavbarContext);
8073
const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-menu');
74+
const {
75+
hasShown,
76+
placement,
77+
show,
78+
alignEnd,
79+
close,
80+
props: menuProps,
81+
} = useDropdownMenu({
82+
flip,
83+
popperConfig,
84+
rootCloseEvent,
85+
show: showProps,
86+
alignEnd: alignRight,
87+
usePopper: !isNavbar,
88+
});
89+
90+
menuProps.ref = useMergedRefs(
91+
menuProps.ref,
92+
useWrappedRefWithWarning(ref, 'DropdownMenu'),
93+
);
8194

95+
if (!hasShown) return null;
96+
97+
// For custom components provide additional, non-DOM, props;
98+
if (typeof Component !== 'string') {
99+
menuProps.show = show;
100+
menuProps.close = close;
101+
menuProps.alignRight = alignEnd;
102+
}
103+
let style = props.style;
104+
if (placement) {
105+
// we don't need the default popper style,
106+
// menus are display: none when not shown.
107+
style = { ...style, ...menuProps.style };
108+
props['x-placement'] = placement;
109+
}
82110
return (
83-
<BaseDropdownMenu
84-
ref={ref} // FIXME: the ref situation is out of hand here
85-
flip={flip}
86-
show={showProps}
87-
alignEnd={alignRight}
88-
usePopper={!isNavbar}
89-
popperConfig={popperConfig}
90-
rootCloseEvent={rootCloseEvent}
91-
>
92-
{({ placement, show, alignEnd, close, props: menuProps }) => {
93-
wrapRef(menuProps);
94-
// For custom components provide additional, non-DOM, props;
95-
if (typeof Component !== 'string') {
96-
menuProps.show = show;
97-
menuProps.close = close;
98-
menuProps.alignRight = alignEnd;
99-
}
100-
let style = props.style;
101-
if (placement) {
102-
// we don't need the default popper style,
103-
// menus are display: none when not shown.
104-
style = { ...style, ...menuProps.style };
105-
props['x-placement'] = placement;
106-
}
107-
return (
108-
<Component
109-
{...props}
110-
{...menuProps}
111-
style={style}
112-
className={classNames(
113-
className,
114-
prefix,
115-
show && 'show',
116-
alignEnd && `${prefix}-right`,
117-
)}
118-
/>
119-
);
120-
}}
121-
</BaseDropdownMenu>
111+
<Component
112+
{...props}
113+
{...menuProps}
114+
style={style}
115+
className={classNames(
116+
className,
117+
prefix,
118+
show && 'show',
119+
alignEnd && `${prefix}-right`,
120+
)}
121+
/>
122122
);
123123
},
124124
);

0 commit comments

Comments
 (0)