[core] Batch small changes

docs/pages/api-docs/data-grid.md

@@ -99,7 +99,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component style](https://github.com/mui-org/material-ui-x/blob/master/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts) for more detail.
+If that's not sufficient, you can check the [implementation of the component style](https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts) for more detail.
 
 ## Demos
 

docs/pages/api-docs/x-grid.md

@@ -104,7 +104,7 @@ You can override the style of the component thanks to one of these customization
 - With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
 - With a theme and an [`overrides` property](/customization/globals/#css).
 
-If that's not sufficient, you can check the [implementation of the component style](https://github.com/mui-org/material-ui-x/blob/master/packages/grid/x-grid-modules/src/components/styled-wrappers/GridRootStyles.ts) for more detail.
+If that's not sufficient, you can check the [implementation of the component style](https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts) for more detail.
 
 ## Demos
 

docs/src/pages/components/data-grid/getting-started/getting-started.md

@@ -118,7 +118,7 @@ Please take the component for a test run, no need to contact us.
 
 ### Invalid license
 
-If you have an enterprise grid running with an expired or missing license key the grid displays a watermark, and a warning is shown in the console.
+If you have an enterprise grid running with an expired or missing license key, the grid displays a watermark, and a warning is shown in the console (_Material-UI Unlicensed product_).
 
 <img src="/static/x/watermark.png" style="width: 658px; margin-bottom: 3rem" alt="">
 

docs/src/pages/components/data-grid/overview/overview.md

@@ -41,6 +41,9 @@ import { XGrid } from '@material-ui/x-grid';
 
 {{"demo": "pages/components/data-grid/overview/XGridDemo.js", "defaultCodeOpen": false, "disableAd": true, "bg": "inline"}}
 
+You can check the [feature comparison](/components/data-grid/getting-started/#feature-comparison) for more details.
+See [Pricing](https://material-ui.com/store/items/material-ui-x/) for details on purchasing licenses.
+
 ## Features
 
 - Built with and exclusively for React ⚛️

packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts

@@ -270,6 +270,9 @@ export const useStyles = makeStyles(
         '& *::-webkit-scrollbar-thumb:active': {
           backgroundColor: active,
         },
+        '& *::-webkit-scrollbar-thumb:hover': {
+          backgroundColor: active,
+        },
         '& *::-webkit-scrollbar-corner': {
           backgroundColor: track,
         },

packages/grid/_modules_/grid/lib/createDetectElementResize/index.js

@@ -8,106 +8,102 @@
  * 2) Defer initialization code via a top-level function wrapper (to support SSR).
  * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
  * 4) Add nonce for style element.
+ *
+ * TODO replace with https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ * once browser support allows it.
  **/
 export default function createDetectElementResize(nonce, hostWindow) {
-  // Check `document` and `window` in case of server-side rendering
-  var _window = hostWindow;
-
-  var attachEvent = typeof document !== 'undefined' && document.attachEvent;
-
-  if (!attachEvent) {
-    var requestFrame = function () {
-      var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
-        return _window.setTimeout(fn, 20);
-      };
-      return function (fn) {
-        return raf(fn);
-      };
-    }();
-
-    var cancelFrame = function () {
-      var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
-      return function (id) {
-        return cancel(id);
-      };
-    }();
-
-    var resetTriggers = function resetTriggers(element) {
-      var triggers = element.__resizeTriggers__,
-          expand = triggers.firstElementChild,
-          contract = triggers.lastElementChild,
-          expandChild = expand.firstElementChild;
-      contract.scrollLeft = contract.scrollWidth;
-      contract.scrollTop = contract.scrollHeight;
-      expandChild.style.width = expand.offsetWidth + 1 + 'px';
-      expandChild.style.height = expand.offsetHeight + 1 + 'px';
-      expand.scrollLeft = expand.scrollWidth;
-      expand.scrollTop = expand.scrollHeight;
-    };
+  var resetTriggers = function resetTriggers(element) {
+    var triggers = element.__resizeTriggers__,
+      expand = triggers.firstElementChild,
+      contract = triggers.lastElementChild,
+      expandChild = expand.firstElementChild;
+    contract.scrollLeft = contract.scrollWidth;
+    contract.scrollTop = contract.scrollHeight;
+    expandChild.style.width = expand.offsetWidth + 1 + 'px';
+    expandChild.style.height = expand.offsetHeight + 1 + 'px';
+    expand.scrollLeft = expand.scrollWidth;
+    expand.scrollTop = expand.scrollHeight;
+  };
 
-    var checkTriggers = function checkTriggers(element) {
-      return element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height;
-    };
+  var checkTriggers = function checkTriggers(element) {
+    return (
+      element.offsetWidth != element.__resizeLast__.width ||
+      element.offsetHeight != element.__resizeLast__.height
+    );
+  };
 
-    var scrollListener = function scrollListener(e) {
-      // Don't measure (which forces) reflow for scrolls that happen inside of children!
-      if (e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
-        return;
-      }
+  var scrollListener = function scrollListener(e) {
+    // Don't measure (which forces) reflow for scrolls that happen inside of children!
+    if (
+      e.target.className.indexOf('contract-trigger') < 0 &&
+      e.target.className.indexOf('expand-trigger') < 0
+    ) {
+      return;
+    }
 
-      var element = this;
-      resetTriggers(this);
-      if (this.__resizeRAF__) {
-        cancelFrame(this.__resizeRAF__);
+    var element = this;
+    resetTriggers(this);
+    if (this.__resizeRAF__) {
+      hostWindow.cancelAnimationFrame(this.__resizeRAF__);
+    }
+    this.__resizeRAF__ = hostWindow.requestAnimationFrame(function () {
+      if (checkTriggers(element)) {
+        element.__resizeLast__.width = element.offsetWidth;
+        element.__resizeLast__.height = element.offsetHeight;
+        element.__resizeListeners__.forEach(function (fn) {
+          fn.call(element, e);
+        });
       }
-      this.__resizeRAF__ = requestFrame(function () {
-        if (checkTriggers(element)) {
-          element.__resizeLast__.width = element.offsetWidth;
-          element.__resizeLast__.height = element.offsetHeight;
-          element.__resizeListeners__.forEach(function (fn) {
-            fn.call(element, e);
-          });
-        }
-      });
-    };
+    });
+  };
 
-    /* Detect CSS Animations support to detect element display/re-attach */
-    var animation = false,
-        keyframeprefix = '',
-        animationstartevent = 'animationstart',
-        domPrefixes = 'Webkit Moz O ms'.split(' '),
-        startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
-        pfx = '';
-    {
-      var elm = document.createElement('fakeelement');
-      if (elm.style.animationName !== undefined) {
-        animation = true;
-      }
+  /* Detect CSS Animations support to detect element display/re-attach */
+  var animation = false,
+    keyframeprefix = '',
+    animationstartevent = 'animationstart',
+    domPrefixes = 'Webkit Moz O ms'.split(' '),
+    startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
+    pfx = '';
+  {
+    var elm = document.createElement('fakeelement');
+    if (elm.style.animationName !== undefined) {
+      animation = true;
+    }
 
-      if (animation === false) {
-        for (var i = 0; i < domPrefixes.length; i++) {
-          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
-            pfx = domPrefixes[i];
-            keyframeprefix = '-' + pfx.toLowerCase() + '-';
-            animationstartevent = startEvents[i];
-            animation = true;
-            break;
-          }
+    if (animation === false) {
+      for (var i = 0; i < domPrefixes.length; i++) {
+        if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
+          pfx = domPrefixes[i];
+          keyframeprefix = '-' + pfx.toLowerCase() + '-';
+          animationstartevent = startEvents[i];
+          animation = true;
+          break;
         }
       }
     }
-
-    var animationName = 'resizeanim';
-    var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
-    var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
   }
 
+  var animationName = 'resizeanim';
+  var animationKeyframes =
+    '@' +
+    keyframeprefix +
+    'keyframes ' +
+    animationName +
+    ' { from { opacity: 0; } to { opacity: 0; } } ';
+  var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
+
   var createStyles = function createStyles(doc) {
     if (!doc.getElementById('detectElementResize')) {
       //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
-      var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
-          head = doc.head || doc.getElementsByTagName('head')[0],
-          style = doc.createElement('style');
+      var css =
+          (animationKeyframes ? animationKeyframes : '') +
+          '.Mui-resizeTriggers { ' +
+          (animationStyle ? animationStyle : '') +
+          'visibility: hidden; opacity: 0; } ' +
+          '.Mui-resizeTriggers, .Mui-resizeTriggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .Mui-resizeTriggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName('head')[0],
+        style = doc.createElement('style');
 
       style.id = 'detectElementResize';
       style.type = 'text/css';
@@ -127,60 +123,56 @@ export default function createDetectElementResize(nonce, hostWindow) {
   };
 
   var addResizeListener = function addResizeListener(element, fn) {
-    if (attachEvent) {
-      element.attachEvent('onresize', fn);
-    } else {
-      if (!element.__resizeTriggers__) {
-        var doc = element.ownerDocument;
-        var elementStyle = _window.getComputedStyle(element);
-        if (elementStyle && elementStyle.position == 'static') {
-          element.style.position = 'relative';
-        }
-        createStyles(doc);
-        element.__resizeLast__ = {};
-        element.__resizeListeners__ = [];
-        (element.__resizeTriggers__ = doc.createElement('div')).className = 'resize-triggers';
-        element.__resizeTriggers__.innerHTML = '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
-        element.appendChild(element.__resizeTriggers__);
-        resetTriggers(element);
-        element.addEventListener('scroll', scrollListener, true);
-
-        /* Listen for a css animation to detect element display/re-attach */
-        if (animationstartevent) {
-          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
-            if (e.animationName == animationName) {
-              resetTriggers(element);
-            }
-          };
-          element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-        }
+    if (!element.__resizeTriggers__) {
+      var doc = element.ownerDocument;
+      var elementStyle = hostWindow.getComputedStyle(element);
+      if (elementStyle && elementStyle.position == 'static') {
+        element.style.position = 'relative';
+      }
+      createStyles(doc);
+      element.__resizeLast__ = {};
+      element.__resizeListeners__ = [];
+      (element.__resizeTriggers__ = doc.createElement('div')).className = 'Mui-resizeTriggers';
+      element.__resizeTriggers__.innerHTML =
+        '<div class="expand-trigger"><div></div></div>' + '<div class="contract-trigger"></div>';
+      element.appendChild(element.__resizeTriggers__);
+      resetTriggers(element);
+      element.addEventListener('scroll', scrollListener, true);
+
+      /* Listen for a css animation to detect element display/re-attach */
+      if (animationstartevent) {
+        element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
+          if (e.animationName == animationName) {
+            resetTriggers(element);
+          }
+        };
+        element.__resizeTriggers__.addEventListener(
+          animationstartevent,
+          element.__resizeTriggers__.__animationListener__,
+        );
       }
-      element.__resizeListeners__.push(fn);
     }
+    element.__resizeListeners__.push(fn);
   };
 
   var removeResizeListener = function removeResizeListener(element, fn) {
-    if (attachEvent) {
-      element.detachEvent('onresize', fn);
-    } else {
-      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
-      if (!element.__resizeListeners__.length) {
-        element.removeEventListener('scroll', scrollListener, true);
-        if (element.__resizeTriggers__.__animationListener__) {
-          element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
-          element.__resizeTriggers__.__animationListener__ = null;
-        }
-        try {
-          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
-        } catch (e) {
-          // Preact compat; see developit/preact-compat/issues/228
-        }
+    element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+    if (!element.__resizeListeners__.length) {
+      element.removeEventListener('scroll', scrollListener, true);
+      if (element.__resizeTriggers__.__animationListener__) {
+        element.__resizeTriggers__.removeEventListener(
+          animationstartevent,
+          element.__resizeTriggers__.__animationListener__,
+        );
+        element.__resizeTriggers__.__animationListener__ = null;
+      }
+      try {
+        element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+      } catch (e) {
+        // Preact compat; see developit/preact-compat/issues/228
       }
     }
   };
 
-  return {
-    addResizeListener: addResizeListener,
-    removeResizeListener: removeResizeListener
-  };
+  return { addResizeListener, removeResizeListener };
 }