Beta prep (react-bootstrap#3267)

* WIP

* finish up

* address feedback

Author: jquense

.eslintrc

@@ -62,9 +62,6 @@
           "children",
           "className",
           "style",
-          "bsStyle",
-          "bsClass",
-          "bsSize"
         ]
       }
     ],

package.json

@@ -67,7 +67,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@monastic.panic/enzyme-adapter-react-16": "^1.2.4",
     "@storybook/react": "^3.4.8",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
@@ -77,11 +76,12 @@
     "babel-plugin-istanbul": "^5.0.1",
     "chai": "^4.1.2",
     "chalk": "^2.3.2",
-    "codecov": "^3.0.4",
+    "codecov": "^3.1.0",
     "colors": "^1.3.2",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.5.0",
+    "enzyme": "^3.6.0",
+    "enzyme-adapter-react-16": "^1.5.0",
     "eslint": "^5.5.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.0.1",
@@ -103,16 +103,16 @@
     "karma-mocha-reporter": "^2.0.4",
     "karma-sinon-chai": "^2.0.2",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^3.0.2",
+    "karma-webpack": "^3.0.4",
     "lint-staged": "^7.2.0",
     "lodash": "^4.17.10",
     "mocha": "^5.2.0",
     "prettier": "~1.13.7",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-test-renderer": "^16.4.1",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
+    "react-test-renderer": "^16.5.0",
     "release-script": "^1.0.2",
-    "sinon": "^6.1.5",
+    "sinon": "^6.2.0",
     "sinon-chai": "^3.2.0",
     "webpack": "^4.17.2"
   },
@@ -127,7 +127,7 @@
     "prop-types": "^15.6.2",
     "prop-types-extra": "^1.1.0",
     "react-context-toolbox": "^1.2.1",
-    "react-overlays": "^1.0.0-beta.16",
+    "react-overlays": "^1.0.0-beta.17",
     "react-prop-types": "^0.4.0",
     "react-transition-group": "^2.4.0",
     "uncontrollable": "^6.0.0",

src/Button.js

@@ -75,6 +75,7 @@ class Button extends React.Component {
       block,
       type,
       as,
+      innerRef,
       ...props
     } = this.props;
 
@@ -92,14 +93,20 @@ class Button extends React.Component {
         <SafeAnchor
           {...props}
           as={as}
+          innerRef={innerRef}
           className={classNames(classes, props.disabled && 'disabled')}
         />
       );
     }
 
     const Component = as || 'button';
+    if (innerRef) props.ref = innerRef;
+
     return <Component {...props} type={type} className={classes} />;
   }
 }
 
-export default createBootstrapComponent(Button, 'btn');
+export default createBootstrapComponent(Button, {
+  prefix: 'btn',
+  forwardRefAs: 'innerRef',
+});

src/DropdownMenu.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { findDOMNode } from 'react-dom';
 import React from 'react';
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
@@ -7,6 +8,12 @@ import NavbarContext from './NavbarContext';
 
 import { createBootstrapComponent } from './ThemeProvider';
 
+const wrapRef = props => {
+  const { ref } = props;
+  props.ref = ref.__wrapped || (ref.__wrapped = r => ref(findDOMNode(r)));
+  return props;
+};
+
 class DropdownMenu extends React.Component {
   static propTypes = {
     /**
@@ -57,8 +64,6 @@ class DropdownMenu extends React.Component {
       ...props
     } = this.props;
 
-    // For custom components provide additional, non-DOM, props;
-
     return (
       <NavbarContext>
         {isNavbar => (
@@ -69,6 +74,8 @@ class DropdownMenu extends React.Component {
             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;

src/DropdownToggle.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { findDOMNode } from 'react-dom';
 import PropTypes from 'prop-types';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
 import elementType from 'prop-types-extra/lib/elementType';
@@ -8,6 +9,12 @@ import React from 'react';
 import Button from './Button';
 import { createBootstrapComponent } from './ThemeProvider';
 
+const wrapRef = props => {
+  const { ref } = props;
+  props.ref = ref.__wrapped || (ref.__wrapped = r => ref(findDOMNode(r)));
+  return props;
+};
+
 class DropdownToggle extends React.Component {
   static propTypes = {
     /**
@@ -49,7 +56,7 @@ class DropdownToggle extends React.Component {
       ...props
     } = this.props;
 
-    // This intentionally forwards bsSize and bsStyle (if set) to the
+    // This intentionally forwards size and variant (if set) to the
     // underlying component, to allow it to render size and style variants.
     return (
       <BaseDropdownToggle>
@@ -62,7 +69,7 @@ class DropdownToggle extends React.Component {
               bsPrefix,
               split && `${bsPrefix}-split`,
             )}
-            {...toggleProps}
+            {...wrapRef(toggleProps)}
             {...props}
           >
             {children}

src/SafeAnchor.js

@@ -65,7 +65,13 @@ class SafeAnchor extends React.Component {
   }
 
   render() {
-    const { as: Component, disabled, onKeyDown, ...props } = this.props;
+    const {
+      as: Component,
+      disabled,
+      onKeyDown,
+      innerRef,
+      ...props
+    } = this.props;
 
     if (isTrivialHref(props.href)) {
       props.role = props.role || 'button';
@@ -78,7 +84,7 @@ class SafeAnchor extends React.Component {
       props.tabIndex = -1;
       props['aria-disabled'] = true;
     }
-
+    if (innerRef) props.ref = innerRef;
     return (
       <Component
         {...props}

src/ToggleButton.js

@@ -4,6 +4,8 @@ import React from 'react';
 
 import Button from './Button';
 
+const noop = () => {};
+
 const propTypes = {
   /**
    * The `<input>` element `type`
@@ -17,7 +19,7 @@ const propTypes = {
   name: PropTypes.string,
 
   /**
-   * The checked state of the input, managed by `<ToggleButtonGroup>`` automatically
+   * The checked state of the input, managed by `<ToggleButtonGroup>` automatically
    */
   checked: PropTypes.bool,
 
@@ -36,6 +38,15 @@ const propTypes = {
    * `ToggleButtonGroup`.
    */
   value: PropTypes.any.isRequired,
+
+  /**
+   * A ref attached to the `<input>` element
+   * @type {ReactRef}
+   */
+  inputRef: PropTypes.any,
+
+  /** @ignore */
+  innerRef: PropTypes.any,
 };
 
 class ToggleButton extends React.Component {
@@ -58,15 +69,22 @@ class ToggleButton extends React.Component {
       type,
       onChange,
       value,
+      disabled,
+      inputRef,
+      innerRef,
       ...props
     } = this.props;
     const { focused } = this.state;
-    const disabled = props.disabled;
 
     return (
       <Button
         {...props}
-        className={classNames(className, focused && 'focus')}
+        ref={innerRef}
+        className={classNames(
+          className,
+          focused && 'focus',
+          disabled && 'disabled',
+        )}
         type={null}
         active={!!checked}
         as="label"
@@ -75,12 +93,13 @@ class ToggleButton extends React.Component {
           name={name}
           type={type}
           value={value}
+          ref={inputRef}
           autoComplete="off"
           checked={!!checked}
           disabled={!!disabled}
           onFocus={this.handleFocus}
           onBlur={this.handleBlur}
-          onChange={onChange}
+          onChange={onChange || noop}
         />
 
         {children}
@@ -91,4 +110,6 @@ class ToggleButton extends React.Component {
 
 ToggleButton.propTypes = propTypes;
 
-export default ToggleButton;
+export default React.forwardRef((props, ref) => (
+  <ToggleButton innerRef={ref} {...props} />
+));

test/AlertSpec.js

@@ -50,7 +50,7 @@ describe('<Alert>', () => {
           <Alert.Heading>Well done</Alert.Heading>
           Message
         </Alert>,
-      ).assertSingle('.alert-heading');
+      ).assertSingle('div.alert-heading');
     });
 
     it('Should have div styled as an h4 by default', () => {

test/ButtonSpec.js

@@ -26,6 +26,27 @@ describe('<Button>', () => {
       .should.equal('submit');
   });
 
+  it('should forward refs to the button', () => {
+    const ref = React.createRef();
+    mount(
+      <div>
+        <Button ref={ref}>Yo</Button>
+      </div>,
+    );
+
+    ref.current.tagName.should.equal('BUTTON');
+
+    mount(
+      <div>
+        <Button ref={ref} href="a">
+          Yo
+        </Button>
+      </div>,
+    );
+
+    ref.current.tagName.should.equal('A');
+  });
+
   it('Should output an anchor if called with a href', () => {
     let href = '/url';
 

test/DropdownSpec.js

@@ -52,7 +52,7 @@ describe('<Dropdown>', () => {
 
   it('forwards alignRight to menu', () => {
     mount(<Dropdown alignRight>{dropdownChildren}</Dropdown>).assertSingle(
-      'DropdownMenu[alignEnd=true]',
+      'ReactOverlaysDropdownMenu[alignEnd=true]',
     );
   });
 

test/ModalSpec.js

@@ -12,13 +12,14 @@ describe('<Modal>', () => {
 
   it('Should render the modal content', () => {
     const noOp = () => {};
-    const instance = mount(
+    mount(
       <Modal show onHide={noOp} animation={false}>
         <strong>Message</strong>
       </Modal>,
-    ).instance();
-
-    assert.ok(instance._modal.dialog.querySelector('strong'));
+    )
+      .find('strong')
+      .text()
+      .should.equal('Message');
   });
 
   it('Should close the modal when the modal dialog is clicked', done => {

test/OverlayTriggerSpec.js

@@ -50,7 +50,7 @@ describe('<OverlayTrigger>', () => {
 
     wrapper.find('button').simulate('click');
 
-    wrapper.assertSingle('.test');
+    wrapper.assertSingle('div.test');
   });
 
   it('Should not set aria-describedby if the state is not show', () => {
@@ -122,7 +122,7 @@ describe('<OverlayTrigger>', () => {
     );
     wrapper.find('button').simulate('click');
 
-    wrapper.assertSingle('.test-overlay');
+    wrapper.assertSingle('div.test-overlay');
   });
 
   it('Should pass transition callbacks to Transition', done => {