feat: Hooks and API simplifications (#288)

BREAKING CHANGE: removes RootCloseWrapper for useRootClose

Author: jquense

.eslintrc

@@ -1,43 +1,8 @@
 {
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "prettier",
-    "prettier/react"
-  ],
-  "env": {
-    "es6": true,
-    "browser": true,
-    "node": true
-  },
-  "parser": "babel-eslint",
-  "plugins": ["react"],
+  "extends": ["@react-bootstrap"],
+  "plugins": ["prettier"],
   "rules": {
-    "comma-spacing": "error",
-    "comma-style": ["error", "last"],
-    "no-var": "error",
-    "one-var": ["error", { "initialized": "never" }],
-    "quotes": ["error", "single", "avoid-escape"],
-    "space-infix-ops": "error",
-    "strict": ["error", "never"],
-    "react/no-find-dom-node": "off",
-    "react/jsx-boolean-value": ["error", "never"],
-    "react/jsx-wrap-multilines": "error",
-    "react/prop-types": [
-      "error",
-      {
-        "ignore": ["children", "className"]
-      }
-    ],
-    "react/self-closing-comp": "error",
-    "no-unused-vars": [
-      "error",
-      {
-        "vars": "all",
-        "args": "after-used",
-        "varsIgnorePattern": "^_",
-        "argsIgnorePattern": "^_"
-      }
-    ]
+    "prettier/prettier": "error",
+    "jsx-a11y/no-autofocus": "off"
   }
 }

karma.conf.js

@@ -1,7 +1,7 @@
-const { rules, plugins } = require('webpack-atoms')
+const { rules, plugins } = require('webpack-atoms');
 
 module.exports = config => {
-  const { env } = process
+  const { env } = process;
 
   config.set({
     frameworks: ['mocha', 'sinon-chai'],
@@ -49,5 +49,5 @@ module.exports = config => {
     },
 
     browsers: env.BROWSER ? env.BROWSER.split(',') : ['Chrome'],
-  })
-}
+  });
+};

package.json

@@ -51,38 +51,44 @@
     "conventionalCommits": true
   },
   "dependencies": {
+    "@restart/hooks": "^0.2.12",
     "classnames": "^2.2.6",
     "dom-helpers": "^3.4.0",
-    "prop-types": "^15.6.2",
+    "prop-types": "^15.7.2",
     "prop-types-extra": "^1.1.0",
-    "react-context-toolbox": "^2.0.2",
-    "react-popper": "^1.3.2",
-    "uncontrollable": "^6.0.0",
-    "warning": "^4.0.2"
+    "react-popper": "^1.3.3",
+    "uncontrollable": "^6.1.0",
+    "warning": "^4.0.3"
   },
   "peerDependencies": {
     "react": ">=16.3.0",
     "react-dom": ">=16.3.0"
   },
   "devDependencies": {
-    "@4c/rollout": "^1.2.0",
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.3.0",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
+    "@4c/rollout": "^1.3.5",
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.4",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.4.4",
     "@babel/preset-react": "^7.0.0",
+    "@emotion/core": "^10.0.9",
+    "@react-bootstrap/eslint-config": "^1.2.0",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-add-module-exports": "^1.0.0",
-    "babel-plugin-istanbul": "^5.1.0",
+    "babel-plugin-add-module-exports": "^1.0.2",
+    "babel-plugin-istanbul": "^5.1.4",
     "chai": "^4.2.0",
     "codecov": "^3.2.0",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "eslint": "^5.13.0",
-    "eslint-config-prettier": "^4.0.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.13.0",
+    "eslint": "^5.16.0",
+    "eslint-config-prettier": "^4.2.0",
+    "eslint-plugin-import": "^2.17.2",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-mocha": "^5.3.0",
-    "eslint-plugin-react": "^7.12.4",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.13.0",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "gh-pages": "^2.0.1",
     "husky": "^1.3.1",
     "jquery": "^3.3.1",
@@ -98,9 +104,8 @@
     "lodash": "^4.17.11",
     "mocha": "^5.2.0",
     "prettier": "^1.16.4",
-    "react": "^16.8.2",
-    "react-bootstrap": "^0.32.4",
-    "react-dom": "^16.8.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-live": "^1.12.0",
     "react-transition-group": "^2.5.3",
     "rimraf": "^2.6.3",

src/Dropdown.js

@@ -104,8 +104,8 @@ class Dropdown extends React.Component {
     };
   }
 
-  constructor(props, context) {
-    super(props, context);
+  constructor(...args) {
+    super(...args);
 
     this._focusInDropdown = false;
 
@@ -159,36 +159,6 @@ class Dropdown extends React.Component {
     return items[index];
   }
 
-  hasMenuRole() {
-    return this.menu && matches(this.menu, '[role=menu]');
-  }
-
-  focus() {
-    const { toggleNode } = this.state.context;
-    if (toggleNode && toggleNode.focus) {
-      toggleNode.focus();
-    }
-  }
-
-  maybeFocusFirst() {
-    const type = this._lastSourceEvent;
-    let { focusFirstItemOnShow } = this.props;
-    if (focusFirstItemOnShow == null) {
-      focusFirstItemOnShow = this.hasMenuRole() ? 'keyboard' : false;
-    }
-
-    if (
-      focusFirstItemOnShow === false ||
-      (focusFirstItemOnShow === 'keyboard' && !/^key.+$/.test(type))
-    ) {
-      return;
-    }
-
-    const { itemSelector } = this.props;
-    let first = qsa(this.menu, itemSelector)[0];
-    if (first && first.focus) first.focus();
-  }
-
   handleClick = event => {
     this.toggleOpen(event);
   };
@@ -234,6 +204,36 @@ class Dropdown extends React.Component {
     }
   };
 
+  hasMenuRole() {
+    return this.menu && matches(this.menu, '[role=menu]');
+  }
+
+  focus() {
+    const { toggleNode } = this.state.context;
+    if (toggleNode && toggleNode.focus) {
+      toggleNode.focus();
+    }
+  }
+
+  maybeFocusFirst() {
+    const type = this._lastSourceEvent;
+    let { focusFirstItemOnShow } = this.props;
+    if (focusFirstItemOnShow == null) {
+      focusFirstItemOnShow = this.hasMenuRole() ? 'keyboard' : false;
+    }
+
+    if (
+      focusFirstItemOnShow === false ||
+      (focusFirstItemOnShow === 'keyboard' && !/^key.+$/.test(type))
+    ) {
+      return;
+    }
+
+    const { itemSelector } = this.props;
+    let first = qsa(this.menu, itemSelector)[0];
+    if (first && first.focus) first.focus();
+  }
+
   toggleOpen(event) {
     let show = !this.props.show;
 

src/DropdownContext.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 const DropdownContext = React.createContext({
   menuRef() {},
@@ -8,6 +8,6 @@ const DropdownContext = React.createContext({
   alignEnd: null,
   show: null,
   drop: null,
-})
+});
 
-export default DropdownContext
+export default DropdownContext;