chore: bump react-overlays to v5 (#5685)

* chore: bump react-overlays to v5

* fix tests

* Update src/DropdownMenu.tsx

Author: jquense

package.json

@@ -75,7 +75,7 @@
     "invariant": "^2.2.4",
     "prop-types": "^15.7.2",
     "prop-types-extra": "^1.1.0",
-    "react-overlays": "^4.1.1",
+    "react-overlays": "^5.0.0",
     "react-transition-group": "^4.4.1",
     "uncontrollable": "^7.0.0",
     "warning": "^4.0.3"
@@ -133,6 +133,7 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-test-renderer": "^16.14.0",
+    "simulant": "^0.2.2",
     "sinon": "^9.2.4",
     "sinon-chai": "^3.5.0",
     "typescript": "^4.1.5",

src/Dropdown.tsx

@@ -145,7 +145,11 @@ const Dropdown: Dropdown = (React.forwardRef((pProps: DropdownProps, ref) => {
 
   const handleToggle = useEventCallback(
     (nextShow, event, source = event.type) => {
-      if (event.currentTarget === document) source = 'rootClose';
+      if (
+        event.currentTarget === document &&
+        (source !== 'keydown' || event.key === 'Escape')
+      )
+        source = 'rootClose';
       if (onToggle) {
         onToggle(nextShow, event, { source });
       }
@@ -168,21 +172,18 @@ const Dropdown: Dropdown = (React.forwardRef((pProps: DropdownProps, ref) => {
         focusFirstItemOnShow={focusFirstItemOnShow}
         itemSelector={`.${prefix}-item:not(.disabled):not(:disabled)`}
       >
-        {({ props: dropdownProps }) => (
-          <Component
-            {...props}
-            {...dropdownProps}
-            ref={ref}
-            className={classNames(
-              className,
-              show && 'show',
-              (!drop || drop === 'down') && prefix,
-              drop === 'up' && 'dropup',
-              drop === 'right' && 'dropright',
-              drop === 'left' && 'dropleft',
-            )}
-          />
-        )}
+        <Component
+          {...props}
+          ref={ref}
+          className={classNames(
+            className,
+            show && 'show',
+            (!drop || drop === 'down') && prefix,
+            drop === 'up' && 'dropup',
+            drop === 'right' && 'dropright',
+            drop === 'left' && 'dropleft',
+          )}
+        />
       </BaseDropdown>
     </SelectableContext.Provider>
   );

src/DropdownMenu.tsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import {
   useDropdownMenu,
-  UseDropdownMenuValue,
   UseDropdownMenuOptions,
 } from 'react-overlays/DropdownMenu';
 import useMergedRefs from '@restart/hooks/useMergedRefs';
@@ -116,8 +115,6 @@ const defaultProps: Partial<DropdownMenuProps> = {
   flip: true,
 };
 
-// TODO: remove this hack
-type UseDropdownMenuValueHack = UseDropdownMenuValue & { placement: any };
 
 const DropdownMenu: DropdownMenu = React.forwardRef(
   (
@@ -168,14 +165,10 @@ const DropdownMenu: DropdownMenu = React.forwardRef(
       }
     }
 
-    const {
-      hasShown,
-      placement,
-      show,
-      alignEnd,
-      close,
-      props: menuProps,
-    } = useDropdownMenu({
+    const [
+      menuProps,
+      { hasShown, popper, show, alignEnd, toggle },
+    ] = useDropdownMenu({
       flip,
       rootCloseEvent,
       show: showProps,
@@ -185,7 +178,7 @@ const DropdownMenu: DropdownMenu = React.forwardRef(
         ...popperConfig,
         modifiers: marginModifiers.concat(popperConfig?.modifiers || []),
       },
-    }) as UseDropdownMenuValueHack;
+    });
 
     menuProps.ref = useMergedRefs(
       popperRef,
@@ -200,16 +193,16 @@ const DropdownMenu: DropdownMenu = React.forwardRef(
     // For custom components provide additional, non-DOM, props;
     if (typeof Component !== 'string') {
       (menuProps as any).show = show;
-      (menuProps as any).close = close;
+      (menuProps as any).close = () => toggle?.(false);
       (menuProps as any).alignRight = alignEnd;
     }
 
     let style = (props as any).style;
-    if (placement) {
+    if (popper?.placement) {
       // we don't need the default popper style,
       // menus are display: none when not shown.
       style = { ...(props as any).style, ...menuProps.style };
-      props['x-placement'] = placement;
+      props['x-placement'] = popper.placement;
     }
 
     return (

src/DropdownToggle.tsx

@@ -72,7 +72,7 @@ const DropdownToggle: DropdownToggle = React.forwardRef(
       (props as any).bsPrefix = childBsPrefix;
     }
 
-    const [toggleProps, { toggle }] = useDropdownToggle();
+    const [toggleProps] = useDropdownToggle();
 
     toggleProps.ref = useMergedRefs(
       toggleProps.ref,
@@ -83,7 +83,6 @@ const DropdownToggle: DropdownToggle = React.forwardRef(
     // underlying component, to allow it to render size and style variants.
     return (
       <Component
-        onClick={toggle}
         className={classNames(className, prefix, split && `${prefix}-split`)}
         {...toggleProps}
         {...props}

test/DropdownSpec.js

@@ -1,6 +1,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import simulant from 'simulant';
 import Dropdown from '../src/Dropdown';
 
 describe('<Dropdown>', () => {
@@ -247,14 +248,17 @@ describe('<Dropdown>', () => {
       const spy = sinon.spy();
       const wrapper = mount(
         <Dropdown onToggle={spy}>{dropdownChildren}</Dropdown>,
+        { attachTo: focusableContainer },
       );
 
-      wrapper.find('button').simulate('keyDown', { key: 'ArrowDown' });
+      simulant.fire(wrapper.find('button').getDOMNode(), 'keydown', {
+        key: 'ArrowDown',
+      });
 
       expect(spy).to.have.been.calledOnce;
       expect(spy.getCall(0).args.length).to.equal(3);
       expect(spy.getCall(0).args[0]).to.equal(true);
-      expect(spy.getCall(0).args[1]).to.be.an('object');
+      expect(spy.getCall(0).args[1]).to.be.an('event');
       assert.deepEqual(spy.getCall(0).args[2], { source: 'keydown' });
     });
   });

yarn.lock

@@ -7666,10 +7666,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-overlays@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-4.1.1.tgz#0060107cbe1c5171a744ccda3fbf0556d064bc5f"
-  integrity sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==
+react-overlays@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.0.0.tgz#b50351de194dda0706b40f9632d261c9f0011c4c"
+  integrity sha512-TKbqfAv23TFtCJ2lzISdx76p97G/DP8Rp4TOFdqM9n8GTruVYgE3jX7Zgb8+w7YJ18slTVcDTQ1/tFzdCqjVhA==
   dependencies:
     "@babel/runtime" "^7.12.1"
     "@popperjs/core" "^2.5.3"
@@ -8275,6 +8275,11 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
+simulant@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simulant/-/simulant-0.2.2.tgz#f1bce52712b6a7a0da38ddfdda7e83b20b1da01e"
+  integrity sha1-8bzlJxK2p6DaON392n6DsgsdoB4=
+
 sinon-chai@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.5.0.tgz#c9a78304b0e15befe57ef68e8a85a00553f5c60e"