Merge branch 'master' into migrate-modal2-to-rtl

src/Dropdown.js

@@ -98,7 +98,7 @@ class Dropdown extends React.Component {
     const menu = this.getMenu();
     const toggle = this.getToggle();
 
-    const targetIsToggle = e.target === toggle;
+    const targetIsToggle = toggle.contains(e.target);
     const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
 
     let clickIsInInput = false;

src/Fade.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Transition } from 'react-transition-group';
@@ -42,22 +42,24 @@ const defaultProps = {
 };
 
 function Fade(props) {
+  const ref = useRef(null);
+
   const {
     tag: Tag,
     baseClass,
     baseClassActive,
     className,
     cssModule,
     children,
-    innerRef,
+    innerRef = ref,
     ...otherProps
   } = props;
 
   const transitionProps = pick(otherProps, TransitionPropTypeKeys);
   const childProps = omit(otherProps, TransitionPropTypeKeys);
 
   return (
-    <Transition {...transitionProps}>
+    <Transition nodeRef={innerRef} {...transitionProps}>
       {(status) => {
         const isActive = status === 'entered';
         const classes = mapToCssModules(

src/Modal.js

@@ -373,8 +373,8 @@ class Modal extends React.Component {
     if (Modal.openCount < 1) {
       Modal.originalBodyOverflow = window.getComputedStyle(
         document.body,
-        ).overflow;
-    };
+      ).overflow;
+    }
     conditionallyUpdateScrollbar();
 
     if (Modal.openCount === 0) {

src/Navbar.js

@@ -19,7 +19,6 @@ const propTypes = {
   expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   /** Make the navbar fixed at the top */
   fixed: PropTypes.string,
-  full: PropTypes.bool,
   /** Add `.navbar-light` class */
   light: PropTypes.bool,
   role: PropTypes.string,

src/Offcanvas.js

@@ -425,6 +425,9 @@ class Offcanvas extends React.Component {
               classNames('offcanvas-backdrop', 'show', backdropClassName),
               cssModule,
             )}
+            ref={(c) => {
+              this._backdrop = c;
+            }}
             onClick={this.handleBackdropClick}
             onMouseDown={this.handleBackdropMouseDown}
           />

src/Placeholder.js

@@ -38,7 +38,7 @@ function Placeholder(props) {
     ...attributes
   } = props;
 
-  let { attributes: modifiedAttributes, colClasses } = getColumnClasses(
+  let { modifiedAttributes, colClasses } = getColumnClasses(
     attributes,
     cssModule,
     widths,

src/__tests__/Alert.spec.js

@@ -8,6 +8,7 @@ import { Alert } from '..';
 describe('Alert', () => {
   beforeEach(() => {
     jest.resetModules();
+    jest.useFakeTimers();
   });
 
   it('should render children', () => {
@@ -104,36 +105,15 @@ describe('Alert', () => {
   });
 
   it('should have default transitionTimeouts', () => {
-    jest.doMock('react-transition-group', () => ({
-      Transition: jest.fn(() => null),
-    }));
-    // eslint-disable-next-line global-require
-    const { Transition } = require('react-transition-group');
-    // eslint-disable-next-line global-require
-    const { Alert } = require('..');
+    render(<Alert>Hello</Alert>);
 
-    render(<Alert>Yo!</Alert>);
+    expect(screen.getByText(/hello/i)).not.toHaveClass('show');
 
-    expect(Transition).toHaveBeenCalledWith(
-      expect.objectContaining({
-        timeout: 150,
-        appear: true,
-        enter: true,
-        exit: true,
-      }),
-      {},
-    );
+    jest.advanceTimersByTime(150);
+    expect(screen.getByText(/hello/i)).toHaveClass('show');
   });
 
   it('should have support configurable transitionTimeouts', () => {
-    jest.doMock('react-transition-group', () => ({
-      Transition: jest.fn(() => null),
-    }));
-    // eslint-disable-next-line global-require
-    const { Transition } = require('react-transition-group');
-    // eslint-disable-next-line global-require
-    const { Alert } = require('..');
-
     render(
       <Alert
         transition={{
@@ -143,18 +123,20 @@ describe('Alert', () => {
           exit: false,
         }}
       >
-        Yo!
+        Hello
       </Alert>,
     );
 
-    expect(Transition).toHaveBeenCalledWith(
-      expect.objectContaining({
-        timeout: 0,
-        appear: false,
-        enter: false,
-        exit: false,
-      }),
-      {},
+    expect(screen.getByText(/hello/i)).toHaveClass('show');
+  });
+
+  it('works with strict mode', () => {
+    const spy = jest.spyOn(console, 'error');
+    render(
+      <React.StrictMode>
+        <Alert>Hello</Alert>
+      </React.StrictMode>,
     );
+    expect(spy).not.toHaveBeenCalled();
   });
 });

src/__tests__/Dropdown.spec.js

@@ -88,6 +88,38 @@ describe('Dropdown', () => {
     expect(toggle).not.toHaveBeenCalled();
   });
 
+  it('should call toggle when DropdownToggle is clicked ', () => {
+    const toggle = jest.fn();
+    render(
+      <Dropdown isOpen toggle={toggle}>
+        <DropdownToggle>Toggle</DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    user.click(screen.getByText(/toggle/i));
+    expect(toggle).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call toggle when DropdownToggle with non string children is clicked ', () => {
+    const toggle = jest.fn();
+    render(
+      <Dropdown isOpen toggle={toggle}>
+        <DropdownToggle>
+          <div>Toggle</div>
+        </DropdownToggle>
+        <DropdownMenu>
+          <DropdownItem>Test</DropdownItem>
+        </DropdownMenu>
+      </Dropdown>,
+    );
+
+    user.click(screen.getByText(/toggle/i));
+    expect(toggle).toHaveBeenCalledTimes(1);
+  });
+
   describe('handleProps', () => {
     it('should not pass custom props to html attrs', () => {
       const toggle = jest.fn();
@@ -213,6 +245,25 @@ describe('Dropdown', () => {
       expect(toggle).toHaveBeenCalled();
     });
 
+    it('should call toggle on container click', () => {
+      const toggle = jest.fn();
+
+      render(
+        <Dropdown isOpen toggle={toggle} data-testid="dropdown">
+          <DropdownToggle>
+            <div>Toggle</div>
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem>Test</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>,
+      );
+
+      user.click(screen.getByTestId('dropdown'));
+
+      expect(toggle).toHaveBeenCalled();
+    });
+
     it('should not call toggle on inner container click', () => {
       const toggle = jest.fn();
       render(

src/__tests__/Modal.spec.js

@@ -1105,4 +1105,14 @@ describe('Modal', () => {
     user.tab();
     expect(screen.getByText(/click 1/i)).toHaveFocus();
   });
+
+  it('works with strict mode', () => {
+    const spy = jest.spyOn(console, 'error');
+    render(
+      <React.StrictMode>
+        <Modal isOpen>Hello</Modal>
+      </React.StrictMode>,
+    );
+    expect(spy).not.toHaveBeenCalled();
+  });
 });