Upgrade dom-helpers (#446)

* Upgrade dom-helpers

Ref react-bootstrap/dom-helpers@87e2fe4

* Fix canUseDOM import

* Upgrade react-transition-group

* more

package.json

@@ -58,7 +58,7 @@
   "dependencies": {
     "@babel/runtime": "^7.4.5",
     "@restart/hooks": "^0.3.12",
-    "dom-helpers": "^3.4.0",
+    "dom-helpers": "^5.1.0",
     "popper.js": "^1.15.0",
     "prop-types": "^15.7.2",
     "uncontrollable": "^7.0.0",
@@ -114,7 +114,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-live": "^2.1.2",
-    "react-transition-group": "^4.2.2",
+    "react-transition-group": "^4.3.0",
     "rimraf": "^3.0.0",
     "simulant": "^0.2.2",
     "sinon": "^7.3.2",

src/Dropdown.js

@@ -1,5 +1,5 @@
-import matches from 'dom-helpers/query/matches';
-import qsa from 'dom-helpers/query/querySelectorAll';
+import matches from 'dom-helpers/matches';
+import qsa from 'dom-helpers/querySelectorAll';
 import React, { useCallback, useRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useUncontrolled } from 'uncontrollable';

src/Modal.js

@@ -1,9 +1,9 @@
 /* eslint-disable react/prop-types */
 
 import activeElement from 'dom-helpers/activeElement';
-import contains from 'dom-helpers/query/contains';
-import canUseDom from 'dom-helpers/util/inDOM';
-import listen from 'dom-helpers/events/listen';
+import contains from 'dom-helpers/contains';
+import canUseDOM from 'dom-helpers/canUseDOM';
+import listen from 'dom-helpers/listen';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -260,7 +260,7 @@ class Modal extends React.Component {
   }
 
   getSnapshotBeforeUpdate(prevProps) {
-    if (canUseDom && !prevProps.show && this.props.show) {
+    if (canUseDOM && !prevProps.show && this.props.show) {
       this.lastFocus = activeElement();
     }
     return null;

src/ModalManager.js

@@ -1,6 +1,7 @@
-import classes from 'dom-helpers/class';
-import css from 'dom-helpers/style';
-import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
+import addClass from 'dom-helpers/addClass';
+import removeClass from 'dom-helpers/removeClass';
+import css from 'dom-helpers/css';
+import getScrollbarSize from 'dom-helpers/scrollbarSize';
 
 import isOverflowing from './utils/isOverflowing';
 import {
@@ -109,7 +110,7 @@ class ModalManager {
       this.setContainerStyle(data, container);
     }
 
-    data.classes.forEach(classes.addClass.bind(null, container));
+    data.classes.forEach(addClass.bind(null, container));
 
     this.containers.push(container);
     this.data.push(data);
@@ -135,7 +136,7 @@ class ModalManager {
     // if that was the last modal in a container,
     // clean up the container
     if (data.modals.length === 0) {
-      data.classes.forEach(classes.removeClass.bind(null, container));
+      data.classes.forEach(removeClass.bind(null, container));
 
       if (this.handleContainerOverflow) {
         this.removeContainerStyle(data, container);

src/useRootClose.js

@@ -1,5 +1,5 @@
-import contains from 'dom-helpers/query/contains';
-import listen from 'dom-helpers/events/listen';
+import contains from 'dom-helpers/contains';
+import listen from 'dom-helpers/listen';
 import { useCallback, useEffect, useRef } from 'react';
 
 import useEventCallback from '@restart/hooks/useEventCallback';

src/utils/isOverflowing.js

@@ -1,4 +1,4 @@
-import isWindow from 'dom-helpers/query/isWindow';
+import isWindow from 'dom-helpers/isWindow';
 import ownerDocument from 'dom-helpers/ownerDocument';
 
 function isBody(node) {

test/ModalManagerSpec.js

@@ -1,5 +1,5 @@
-import css from 'dom-helpers/style';
-import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
+import css from 'dom-helpers/css';
+import getScrollbarSize from 'dom-helpers/scrollbarSize';
 
 import ModalContainer from '../src/Modal';
 import ModalManager from '../src/ModalManager';

www/src/components/Playground.js

@@ -12,7 +12,7 @@ import * as Babel from '@babel/standalone';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import * as ReactOverlays from 'react-overlays';
 
-import getOffset from 'dom-helpers/query/offset';
+import getOffset from 'dom-helpers/offset';
 
 import { css as emotionCss } from '@emotion/core';
 import emotionStyled from '@emotion/styled';