[core] Remove dom-helpers dependency

mui · Mar 14, 2019 · 8380212 · 8380212
1 parent bdb4baa
commit 8380212
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 45 deletions.
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -45,7 +45,6 @@
     "csstype": "^2.5.2",
     "debounce": "^1.1.0",
     "deepmerge": "^3.0.0",
-    "dom-helpers": "^3.2.1",
     "hoist-non-react-statics": "^3.2.1",
     "is-plain-object": "^2.0.4",
     "normalize-scroll-left": "^0.1.2",

diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js
@@ -3,9 +3,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import withStyles from '../styles/withStyles';
 import withForwardedRef from '../utils/withForwardedRef';
+import getScrollbarSize from '../utils/getScrollbarSize';
 import Popover from '../Popover';
 import MenuList from '../MenuList';
 
@@ -74,9 +74,9 @@ class Menu extends React.Component {
     // Let's ignore that piece of logic if users are already overriding the width
     // of the menu.
     if (menuList && element.clientHeight < menuList.clientHeight && !menuList.style.width) {
-      const size = `${getScrollbarSize(true)}px`;
-      menuList.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = size;
-      menuList.style.width = `calc(100% + ${size})`;
+      const scrollbarSize = `${getScrollbarSize()}px`;
+      menuList.style[theme.direction === 'rtl' ? 'paddingLeft' : 'paddingRight'] = scrollbarSize;
+      menuList.style.width = `calc(100% + ${scrollbarSize})`;
     }
 
     if (this.props.onEntering) {

diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js
@@ -13,9 +13,9 @@ import TrapFocus from './TrapFocus';
 import Backdrop from '../Backdrop';
 import { ariaHidden } from './manageAriaHidden';
 
-function getContainer(container, defaultContainer) {
+function getContainer(container) {
   container = typeof container === 'function' ? container() : container;
-  return ReactDOM.findDOMNode(container) || defaultContainer;
+  return ReactDOM.findDOMNode(container);
 }
 
 function getHasTransition(props) {
@@ -97,8 +97,7 @@ class Modal extends React.Component {
   }
 
   handleOpen = () => {
-    const doc = this.getDoc();
-    const container = getContainer(this.props.container, doc.body);
+    const container = getContainer(this.props.container) || this.getDoc().body;
 
     this.props.manager.add(this, container);
     if (this.modalRef) {

diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js
@@ -552,11 +552,11 @@ describe('<Modal />', () => {
       };
 
       const wrapper = mount(<TestCase open={false} />);
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.querySelectorAll('[data-mui-test="Modal"').length, 0);
       wrapper.setProps({ open: true });
-      assert.strictEqual(document.body.style.overflow, 'hidden');
+      assert.strictEqual(document.querySelectorAll('[data-mui-test="Modal"').length, 2);
       wrapper.setProps({ open: false });
-      assert.strictEqual(document.body.style.overflow, '');
+      assert.strictEqual(document.querySelectorAll('[data-mui-test="Modal"').length, 0);
     });
 
     it('should open and close with Transitions', done => {

diff --git a/packages/material-ui/src/Modal/ModalManager.js b/packages/material-ui/src/Modal/ModalManager.js
@@ -1,6 +1,6 @@
-import css from 'dom-helpers/style';
-import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
+import getScrollbarSize from '../utils/getScrollbarSize';
 import ownerDocument from '../utils/ownerDocument';
+import ownerWindow from '../utils/ownerWindow';
 import isOverflowing from './isOverflowing';
 import { ariaHidden, ariaHiddenSiblings } from './manageAriaHidden';
 
@@ -17,7 +17,8 @@ function findIndexOf(data, callback) {
 }
 
 function getPaddingRight(node) {
-  return parseInt(css(node, 'paddingRight') || 0, 10);
+  const win = ownerWindow(node);
+  return parseInt(win.getComputedStyle(node)['padding-right'], 10) || 0;
 }
 
 function setContainerStyle(data) {
@@ -27,12 +28,11 @@ function setContainerStyle(data) {
     paddingRight: data.container.style.paddingRight,
   };
 
-  const style = {
-    overflow: 'hidden',
-  };
-
   if (data.overflowing) {
-    const scrollbarSize = getScrollbarSize(true);
+    const style = {
+      overflow: 'hidden',
+    };
+    const scrollbarSize = getScrollbarSize();
 
     // Use computed style, here to get the real padding to add our scrollbar width.
     style.paddingRight = `${getPaddingRight(data.container) + scrollbarSize}px`;
@@ -44,11 +44,11 @@ function setContainerStyle(data) {
       data.prevPaddings.push(paddingRight);
       fixedNodes[i].style.paddingRight = `${paddingRight + scrollbarSize}px`;
     }
-  }
 
-  Object.keys(style).forEach(key => {
-    data.container.style[key] = style[key];
-  });
+    Object.keys(style).forEach(key => {
+      data.container.style[key] = style[key];
+    });
+  }
 }
 
 function removeContainerStyle(data) {

diff --git a/packages/material-ui/src/Modal/ModalManager.test.js b/packages/material-ui/src/Modal/ModalManager.test.js
@@ -1,5 +1,5 @@
 import { assert } from 'chai';
-import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
+import getScrollbarSize from '../utils/getScrollbarSize';
 import ModalManager from './ModalManager';
 
 describe('ModalManager', () => {
@@ -9,6 +9,15 @@ describe('ModalManager', () => {
   before(() => {
     modalManager = new ModalManager();
     container1 = document.createElement('div');
+    container1.style.padding = '20px';
+    Object.defineProperty(container1, 'scrollHeight', {
+      value: 100,
+      writable: false,
+    });
+    Object.defineProperty(container1, 'clientHeight', {
+      value: 90,
+      writable: false,
+    });
     document.body.appendChild(container1);
   });
 
@@ -113,15 +122,22 @@ describe('ModalManager', () => {
     it('should handle the scroll', () => {
       const modal = {};
       const paddingRightBefore = container1.style.paddingRight;
+      const paddingFixedRightBefore = fixedNode.style.paddingRight;
       modalManager.add(modal, container1);
       modalManager.mount(modal);
       assert.strictEqual(container1.style.overflow, 'hidden');
-      assert.strictEqual(container1.style.paddingRight, `${getScrollbarSize()}px`);
-      assert.strictEqual(fixedNode.style.paddingRight, `${14 + getScrollbarSize()}px`);
+      assert.strictEqual(
+        container1.style.paddingRight,
+        `${parseInt(paddingRightBefore, 10) + getScrollbarSize()}px`,
+      );
+      assert.strictEqual(
+        fixedNode.style.paddingRight,
+        `${parseInt(paddingFixedRightBefore, 10) + getScrollbarSize()}px`,
+      );
       modalManager.remove(modal);
       assert.strictEqual(container1.style.overflow, '');
       assert.strictEqual(container1.style.paddingRight, paddingRightBefore);
-      assert.strictEqual(fixedNode.style.paddingRight, '14px');
+      assert.strictEqual(fixedNode.style.paddingRight, paddingFixedRightBefore);
     });
   });
 

diff --git a/packages/material-ui/src/Modal/isOverflowing.js b/packages/material-ui/src/Modal/isOverflowing.js
@@ -1,25 +1,18 @@
-import isWindow from 'dom-helpers/query/isWindow';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 
 export function isBody(node) {
   return node && node.tagName.toLowerCase() === 'body';
 }
 
-// Do we have a vertical scroll bar?
+// Do we have a vertical scrollbar?
 export default function isOverflowing(container) {
   const doc = ownerDocument(container);
   const win = ownerWindow(doc);
 
-  /* istanbul ignore next */
-  if (!isWindow(doc) && !isBody(container)) {
-    return container.scrollHeight > container.clientHeight;
+  if (doc.body === container) {
+    return win.innerWidth > doc.documentElement.clientWidth;
   }
 
-  // Takes in account potential non zero margin on the body.
-  const style = win.getComputedStyle(doc.body);
-  const marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
-  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
-
-  return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
+  return container.scrollHeight > container.clientHeight;
 }
diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
-import css from 'dom-helpers/style';
 import {
   createShallow,
   createMount,
@@ -315,6 +314,12 @@ describe('<Popover />', () => {
           anchorEl = window.document.createElement('div');
         }
 
+        const css = (element, styles) => {
+          Object.keys(styles).forEach(key => {
+            element.style[key] = styles[key];
+          });
+        };
+
         css(anchorEl, {
           width: '50px',
           height: '50px',

diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -4,13 +4,11 @@ import EventListener from 'react-event-listener';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 
 const styles = {
-  width: 90,
-  height: 90,
+  width: 99,
+  height: 99,
   position: 'absolute',
-  top: -9000,
+  top: -9999,
   overflow: 'scroll',
-  // Support IE 11
-  msOverflowStyle: 'scrollbar',
 };
 
 /**

diff --git a/packages/material-ui/src/utils/getScrollbarSize.js b/packages/material-ui/src/utils/getScrollbarSize.js
@@ -0,0 +1,17 @@
+// A change of the browser zoom change the scrollbar size.
+function getScrollbarSize() {
+  const scrollDiv = document.createElement('div');
+  scrollDiv.style.width = '99px';
+  scrollDiv.style.height = '99px';
+  scrollDiv.style.position = 'absolute';
+  scrollDiv.style.top = '-9999px';
+  scrollDiv.style.overflow = 'scroll';
+
+  document.body.appendChild(scrollDiv);
+  const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+
+  return scrollbarSize;
+}
+
+export default getScrollbarSize;