From 38271571a291adae3408f4717d700d3213ed52fb Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 7 Nov 2020 20:25:59 +0100 Subject: [PATCH 1/6] [docs] Duplicate the information We have seen some people struggling to find these pages. It will be much better with a link in the header to the WIP pricing page. --- docs/src/pages/components/data-grid/overview/overview.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/src/pages/components/data-grid/overview/overview.md b/docs/src/pages/components/data-grid/overview/overview.md index e8f979f65cae0..a568f62758845 100644 --- a/docs/src/pages/components/data-grid/overview/overview.md +++ b/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 ⚛️ From b191919d29fdd1aa4fb58cc37b8706e8b5183f4c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 7 Nov 2020 20:33:06 +0100 Subject: [PATCH 2/6] [docs] Add plain string the watermark so it can be searched We had people struggling to find how to install the license key. I suspect it's also because the email goes into the junk. --- .../components/data-grid/getting-started/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/data-grid/getting-started/getting-started.md b/docs/src/pages/components/data-grid/getting-started/getting-started.md index c84237d268086..ed7c864e05de2 100644 --- a/docs/src/pages/components/data-grid/getting-started/getting-started.md +++ b/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_). From e8d296f9015a3e102d14d3a2f7ce8c549bd7aedc Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 7 Nov 2020 20:35:46 +0100 Subject: [PATCH 3/6] [DataGrid] Improve dark mode scrollbar Leverage the findings from https://github.com/mui-org/material-ui/pull/23407 --- .../grid/components/styled-wrappers/GridRootStyles.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts b/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts index 336d6e6598417..da560bd9f2576 100644 --- a/packages/grid/_modules_/grid/components/styled-wrappers/GridRootStyles.ts +++ b/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, }, From 7f08c99f566ab2c67b7cb7ec4b49d5a059565b16 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 7 Nov 2020 20:47:12 +0100 Subject: [PATCH 4/6] [AutoSizer] Avoid CSS leak The .resize-triggers CSS seemed too generic for my taste. I have prefixed it with Mui. --- .../lib/createDetectElementResize/index.js | 256 +++++++++--------- 1 file changed, 125 insertions(+), 131 deletions(-) diff --git a/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js b/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js index 202868b41fe65..560b174bde4a9 100644 --- a/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js +++ b/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js @@ -8,106 +8,104 @@ * 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 +125,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 = '
' + '
'; - 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 = + '
' + '
'; + 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 }; } From 63391b7f58344321e39c70dea9e1def871612e16 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 7 Nov 2020 20:52:33 +0100 Subject: [PATCH 5/6] [docs] Fix 404 link --- docs/pages/api-docs/data-grid.md | 2 +- docs/pages/api-docs/x-grid.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/api-docs/data-grid.md b/docs/pages/api-docs/data-grid.md index df99f894e58a3..0e5afe153bd76 100644 --- a/docs/pages/api-docs/data-grid.md +++ b/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 diff --git a/docs/pages/api-docs/x-grid.md b/docs/pages/api-docs/x-grid.md index 9291a6b81f290..6d690b22845eb 100644 --- a/docs/pages/api-docs/x-grid.md +++ b/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 From c902bbb1ae9f617439186b72bc5ff1d804d2d213 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 7 Nov 2020 22:11:45 +0100 Subject: [PATCH 6/6] yarn prettier --- .../grid/lib/createDetectElementResize/index.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js b/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js index 560b174bde4a9..c563906290c94 100644 --- a/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js +++ b/packages/grid/_modules_/grid/lib/createDetectElementResize/index.js @@ -63,9 +63,7 @@ export default function createDetectElementResize(nonce, hostWindow) { keyframeprefix = '', animationstartevent = 'animationstart', domPrefixes = 'Webkit Moz O ms'.split(' '), - startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split( - ' ', - ), + startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '), pfx = ''; { var elm = document.createElement('fakeelement'); @@ -99,11 +97,11 @@ export default function createDetectElementResize(nonce, hostWindow) { 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 : '') + - '.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%; }', + (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');