Skip to content

Commit

Permalink
chore: update react overlays (#4661)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: custom Dropdown Menu's and Toggles can no longer be class components unless they are wrapped in forwardRef()
  • Loading branch information
jquense authored Oct 28, 2019
1 parent ec012d0 commit 50a3714
Show file tree
Hide file tree
Showing 23 changed files with 293 additions and 311 deletions.
4 changes: 4 additions & 0 deletions karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,12 @@ module.exports = config => {
},
],
},
resolve: {
symlinks: false,
},
plugins: [
new DefinePlugin({
__DEV__: true,
'process.env.NODE_ENV': JSON.stringify('test'),
}),
],
Expand Down
14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@
"@babel/cli": "^7.5.0",
"@babel/core": "^7.5.4",
"@babel/register": "^7.4.4",
"@react-bootstrap/babel-preset": "^1.1.3",
"@react-bootstrap/eslint-config": "^1.2.0",
"@react-bootstrap/babel-preset": "^1.2.0",
"@react-bootstrap/eslint-config": "^1.3.1",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.6",
"babel-plugin-istanbul": "^5.1.4",
Expand All @@ -100,7 +100,7 @@
"execa": "^3.1.0",
"fs-extra": "^8.1.0",
"husky": "^3.0.0",
"karma": "^4.2.0",
"karma": "^4.4.1",
"karma-chrome-launcher": "^3.0.0",
"karma-cli": "^2.0.0",
"karma-coverage": "^2.0.1",
Expand All @@ -112,7 +112,7 @@
"karma-webpack": "^4.0.2",
"lint-staged": "^9.2.0",
"lodash": "^4.17.14",
"mocha": "^6.1.4",
"mocha": "^6.2.2",
"prettier": "^1.18.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
Expand All @@ -128,13 +128,13 @@
"@restart/hooks": "^0.3.11",
"@types/react": "^16.8.23",
"classnames": "^2.2.6",
"dom-helpers": "^3.4.0",
"dom-helpers": "^5.1.2",
"invariant": "^2.2.4",
"keycode": "^2.2.0",
"popper.js": "^1.14.7",
"popper.js": "^1.16.0",
"prop-types": "^15.7.2",
"prop-types-extra": "^1.1.0",
"react-overlays": "^1.2.0",
"react-overlays": "^2.1.0",

This comment has been minimized.

Copy link
@sergioadimedia

sergioadimedia Jan 10, 2020

Since the version of "react-overlays" was changed to 2.1.0, target is no longer correctly selected when using react components.

For example and simplifying (using react-bootstrap-typeahead):

At the constructor of the class I do:
this.typeaheadRef = React.createRef();

Then at the render method:

<Typeahead ref={this.typeaheadRef} />

<Overlay target={this.typeaheadRef.current} />

This used to work with previous versions of react-bootstrap.

"react-transition-group": "^4.0.0",
"uncontrollable": "^7.0.0",
"warning": "^4.0.3"
Expand Down
2 changes: 1 addition & 1 deletion src/AbstractNav.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import qsa from 'dom-helpers/query/querySelectorAll';
import qsa from 'dom-helpers/querySelectorAll';
import PropTypes from 'prop-types';
import React, { useContext, useEffect, useRef } from 'react';
import useForceUpdate from '@restart/hooks/useForceUpdate';
Expand Down
6 changes: 3 additions & 3 deletions src/BootstrapModalManager.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import qsa from 'dom-helpers/query/querySelectorAll';
import css from 'dom-helpers/style';
import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
import css from 'dom-helpers/css';
import qsa from 'dom-helpers/querySelectorAll';
import getScrollbarSize from 'dom-helpers/scrollbarSize';
import ModalManager from 'react-overlays/ModalManager';

const Selector = {
Expand Down
13 changes: 6 additions & 7 deletions src/Carousel.js
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import classNames from 'classnames';
import styles from 'dom-helpers/style';
import transition from 'dom-helpers/transition';
import React, { cloneElement } from 'react';
import styles from 'dom-helpers/css';
import transitionEnd from 'dom-helpers/transitionEnd';
import PropTypes from 'prop-types';
import React, { cloneElement } from 'react';
import { uncontrollable } from 'uncontrollable';

import CarouselCaption from './CarouselCaption';
import CarouselItem from './CarouselItem';
import { forEach, map } from './ElementChildren';
import SafeAnchor from './SafeAnchor';
import { map, forEach } from './ElementChildren';
import triggerBrowserReflow from './triggerBrowserReflow';
import { createBootstrapComponent } from './ThemeProvider';
import triggerBrowserReflow from './triggerBrowserReflow';

const countChildren = c =>
React.Children.toArray(c).filter(React.isValidElement).length;
Expand Down Expand Up @@ -211,7 +210,7 @@ class Carousel extends React.Component {
currentClasses: classNames(orderClassName, directionalClassName),
},
() =>
transition.end(nextElement, () => {
transitionEnd(nextElement, () => {
this.safeSetState(
{ prevClasses: '', currentClasses: 'active' },
this.handleSlideEnd,
Expand Down
6 changes: 3 additions & 3 deletions src/Collapse.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import css from 'dom-helpers/style';
import onEnd from 'dom-helpers/transition/end';
import css from 'dom-helpers/css';
import transitionEnd from 'dom-helpers/transitionEnd';
import PropTypes from 'prop-types';
import React from 'react';
import Transition, {
Expand Down Expand Up @@ -197,7 +197,7 @@ class Collapse extends React.Component {

return (
<Transition
addEndListener={onEnd}
addEndListener={transitionEnd}
{...props}
aria-expanded={props.role ? props.in : null}
onEnter={handleEnter}
Expand Down
11 changes: 5 additions & 6 deletions src/Dropdown.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import classNames from 'classnames';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import React, { useContext } from 'react';
import BaseDropdown from 'react-overlays/Dropdown';
import { useUncontrolled } from 'uncontrollable';
import useEventCallback from '@restart/hooks/useEventCallback';

import { useBootstrapPrefix } from './ThemeProvider';
import DropdownItem from './DropdownItem';
import DropdownMenu from './DropdownMenu';
import DropdownToggle from './DropdownToggle';
import DropdownItem from './DropdownItem';
import SelectableContext from './SelectableContext';
import { useBootstrapPrefix } from './ThemeProvider';
import createWithBsPrefix from './createWithBsPrefix';

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

return (
<SelectableContext.Provider value={handleSelect}>
<BaseDropdown.ControlledComponent
<BaseDropdown
drop={drop}
show={show}
alignEnd={alignRight}
Expand All @@ -143,7 +142,7 @@ const Dropdown = React.forwardRef((uncontrolledProps, ref) => {
)}
/>
)}
</BaseDropdown.ControlledComponent>
</BaseDropdown>
</SelectableContext.Provider>
);
});
Expand Down
100 changes: 50 additions & 50 deletions src/DropdownMenu.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,11 @@
import classNames from 'classnames';
import { findDOMNode } from 'react-dom';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';

import BaseDropdownMenu from 'react-overlays/DropdownMenu';
import React, { useContext } from 'react';
import { useDropdownMenu } from 'react-overlays/DropdownMenu';
import useMergedRefs from '@restart/hooks/useMergedRefs';
import NavbarContext from './NavbarContext';

import { useBootstrapPrefix } from './ThemeProvider';

const wrapRef = props => {
const { ref } = props;
props.ref = ref.__wrapped || (ref.__wrapped = r => ref(findDOMNode(r)));
return props;
};
import useWrappedRefWithWarning from './useWrappedRefWithWarning';

const propTypes = {
/**
Expand Down Expand Up @@ -78,47 +71,54 @@ const DropdownMenu = React.forwardRef(
) => {
const isNavbar = useContext(NavbarContext);
const prefix = useBootstrapPrefix(bsPrefix, 'dropdown-menu');
const {
hasShown,
placement,
show,
alignEnd,
close,
props: menuProps,
} = useDropdownMenu({
flip,
popperConfig,
rootCloseEvent,
show: showProps,
alignEnd: alignRight,
usePopper: !isNavbar,
});

menuProps.ref = useMergedRefs(
menuProps.ref,
useWrappedRefWithWarning(ref, 'DropdownMenu'),
);

if (!hasShown) return null;

// For custom components provide additional, non-DOM, props;
if (typeof Component !== 'string') {
menuProps.show = show;
menuProps.close = close;
menuProps.alignRight = alignEnd;
}
let style = props.style;
if (placement) {
// we don't need the default popper style,
// menus are display: none when not shown.
style = { ...style, ...menuProps.style };
props['x-placement'] = placement;
}
return (
<BaseDropdownMenu
ref={ref} // FIXME: the ref situation is out of hand here
flip={flip}
show={showProps}
alignEnd={alignRight}
usePopper={!isNavbar}
popperConfig={popperConfig}
rootCloseEvent={rootCloseEvent}
>
{({ placement, show, alignEnd, close, props: menuProps }) => {
wrapRef(menuProps);
// For custom components provide additional, non-DOM, props;
if (typeof Component !== 'string') {
menuProps.show = show;
menuProps.close = close;
menuProps.alignRight = alignEnd;
}
let style = props.style;
if (placement) {
// we don't need the default popper style,
// menus are display: none when not shown.
style = { ...style, ...menuProps.style };
props['x-placement'] = placement;
}
return (
<Component
{...props}
{...menuProps}
style={style}
className={classNames(
className,
prefix,
show && 'show',
alignEnd && `${prefix}-right`,
)}
/>
);
}}
</BaseDropdownMenu>
<Component
{...props}
{...menuProps}
style={style}
className={classNames(
className,
prefix,
show && 'show',
alignEnd && `${prefix}-right`,
)}
/>
);
},
);
Expand Down
Loading

0 comments on commit 50a3714

Please sign in to comment.