chore: update react overlays (#4661)

BREAKING CHANGE: custom Dropdown Menu's and Toggles can no longer be class components unless they are wrapped in forwardRef()
react-bootstrap · Oct 28, 2019 · 50a3714 · sergioadimedia · Jan 10, 2020 · 50a3714
1 parent ec012d0
commit 50a3714
Show file tree

Hide file tree

Showing 23 changed files with 293 additions and 311 deletions.
diff --git a/karma.conf.js b/karma.conf.js
@@ -29,8 +29,12 @@ module.exports = config => {
           },
         ],
       },
+      resolve: {
+        symlinks: false,
+      },
       plugins: [
         new DefinePlugin({
+          __DEV__: true,
           'process.env.NODE_ENV': JSON.stringify('test'),
         }),
       ],

diff --git a/package.json b/package.json
@@ -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",
@@ -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",
@@ -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",
@@ -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",
     "react-transition-group": "^4.0.0",
     "uncontrollable": "^7.0.0",
     "warning": "^4.0.3"

diff --git a/src/AbstractNav.js b/src/AbstractNav.js
@@ -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';

diff --git a/src/BootstrapModalManager.js b/src/BootstrapModalManager.js
@@ -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 = {

diff --git a/src/Carousel.js b/src/Carousel.js
@@ -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;
@@ -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,

diff --git a/src/Collapse.js b/src/Collapse.js
@@ -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, {
@@ -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}

diff --git a/src/Dropdown.js b/src/Dropdown.js
@@ -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 = {
@@ -120,7 +119,7 @@ const Dropdown = React.forwardRef((uncontrolledProps, ref) => {
 
   return (
     <SelectableContext.Provider value={handleSelect}>
-      <BaseDropdown.ControlledComponent
+      <BaseDropdown
         drop={drop}
         show={show}
         alignEnd={alignRight}
@@ -143,7 +142,7 @@ const Dropdown = React.forwardRef((uncontrolledProps, ref) => {
             )}
           />
         )}
-      </BaseDropdown.ControlledComponent>
+      </BaseDropdown>
     </SelectableContext.Provider>
   );
 });

diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
@@ -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 = {
   /**
@@ -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`,
+        )}
+      />
     );
   },
 );