@lumx/react 2.1.0-alpha.12 → 2.1.0-alpha.15

package/esm/_internal/renderLink.js

@@ -1,4 +1,4 @@
-import { a as _objectWithoutProperties } from './getRootClassName.js';
+import { b as _objectWithoutProperties } from './_rollupPluginBabelHelpers.js';
 import React from 'react';
 
 /**

package/esm/_internal/select.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';

package/esm/_internal/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"select.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/side-navigation.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';

package/esm/_internal/side-navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"side-navigation.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/skeleton.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';

package/esm/_internal/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"skeleton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/esm/_internal/slider.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/slideshow.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';

package/esm/_internal/slideshow.js.map

@@ -1 +1 @@
-{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"slideshow.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/switch.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/table.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/table.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}
+{"version":3,"file":"table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/tabs.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/text-field.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import '../index2.js';
 import 'lodash/isBoolean';

package/esm/_internal/text-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"text-field.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/esm/_internal/thumbnail.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/_internal/toolbar.js

@@ -1,5 +1,6 @@
-import './getRootClassName.js';
+import './_rollupPluginBabelHelpers.js';
 import 'react';
+import './getRootClassName.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';

package/esm/_internal/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"toolbar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/esm/_internal/tooltip.js

@@ -1,5 +1,6 @@
-import './getRootClassName.js';
+import './_rollupPluginBabelHelpers.js';
 import 'react';
+import './getRootClassName.js';
 import '../index2.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/_internal/types.js

@@ -1,5 +1,5 @@
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import { AspectRatio } from './components.js';
-import { c as _objectSpread2 } from './getRootClassName.js';
 
 /**
  * All available aspect ratios.

package/esm/_internal/uploader.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';

package/esm/_internal/uploader.js.map

@@ -1 +1 @@
-{"version":3,"file":"uploader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"uploader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/esm/_internal/useDelayedVisibility.js

@@ -1,4 +1,4 @@
-import { f as _slicedToArray } from './getRootClassName.js';
+import { d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
 import { useState, useEffect, useRef } from 'react';
 
 /**

package/esm/_internal/useDisableBodyScroll.js

@@ -190,6 +190,12 @@ var enableBodyScroll = function enableBodyScroll(targetElement) {
   }
 };
 
+/**
+ * Disables the scroll on the body to make it only usable in the current modal element.
+ * When the modal element is not provided anymore, the scroll is restored.
+ *
+ * @param modalElement The modal element.
+ */
 var useDisableBodyScroll = function useDisableBodyScroll(modalElement) {
   useEffect(function () {
     if (!modalElement) {
@@ -203,7 +209,9 @@ var useDisableBodyScroll = function useDisableBodyScroll(modalElement) {
     return function () {
       enableBodyScroll(modalElement); // Restore the previous overflow style.
 
-      document.documentElement.style.overflow = previousDocumentOverflow;
+      requestAnimationFrame(function () {
+        document.documentElement.style.overflow = previousDocumentOverflow;
+      });
     };
   }, [modalElement]);
 };

package/esm/_internal/useDisableBodyScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDisableBodyScroll.js","sources":["../../../../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js","../../../src/hooks/useDisableBodyScroll.ts"],"sourcesContent":["function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\n// Older browsers don't support event options, feature detect it.\n\n// Adopted and modified solution from Bohdan Didukh (2017)\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n\nvar hasPassiveEvents = false;\nif (typeof window !== 'undefined') {\n  var passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true;\n      return undefined;\n    }\n  };\n  window.addEventListener('testPassive', null, passiveTestOptions);\n  window.removeEventListener('testPassive', null, passiveTestOptions);\n}\n\nvar isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);\n\n\nvar locks = [];\nvar documentListenerAdded = false;\nvar initialClientY = -1;\nvar previousBodyOverflowSetting = void 0;\nvar previousBodyPaddingRight = void 0;\n\n// returns true if `el` should be allowed to receive touchmove events.\nvar allowTouchMove = function allowTouchMove(el) {\n  return locks.some(function (lock) {\n    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n      return true;\n    }\n\n    return false;\n  });\n};\n\nvar preventDefault = function preventDefault(rawEvent) {\n  var e = rawEvent || window.event;\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true;\n  }\n\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true;\n\n  if (e.preventDefault) e.preventDefault();\n\n  return false;\n};\n\nvar setOverflowHidden = function setOverflowHidden(options) {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\n    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\n\n    if (_reserveScrollBarGap && scrollBarGap > 0) {\n      previousBodyPaddingRight = document.body.style.paddingRight;\n      document.body.style.paddingRight = scrollBarGap + 'px';\n    }\n  }\n\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n};\n\nvar restoreOverflowSetting = function restoreOverflowSetting() {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight;\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined;\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting;\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined;\n  }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nvar isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {\n  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;\n};\n\nvar handleScroll = function handleScroll(event, targetElement) {\n  var clientY = event.targetTouches[0].clientY - initialClientY;\n\n  if (allowTouchMove(event.target)) {\n    return false;\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event);\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event);\n  }\n\n  event.stopPropagation();\n  return true;\n};\n\nexport var disableBodyScroll = function disableBodyScroll(targetElement, options) {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');\n    return;\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(function (lock) {\n    return lock.targetElement === targetElement;\n  })) {\n    return;\n  }\n\n  var lock = {\n    targetElement: targetElement,\n    options: options || {}\n  };\n\n  locks = [].concat(_toConsumableArray(locks), [lock]);\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY;\n      }\n    };\n    targetElement.ontouchmove = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement);\n      }\n    };\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = true;\n    }\n  } else {\n    setOverflowHidden(options);\n  }\n};\n\nexport var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {\n  if (isIosDevice) {\n    // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n    locks.forEach(function (lock) {\n      lock.targetElement.ontouchstart = null;\n      lock.targetElement.ontouchmove = null;\n    });\n\n    if (documentListenerAdded) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n\n    // Reset initial clientY.\n    initialClientY = -1;\n  } else {\n    restoreOverflowSetting();\n  }\n\n  locks = [];\n};\n\nexport var enableBodyScroll = function enableBodyScroll(targetElement) {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');\n    return;\n  }\n\n  locks = locks.filter(function (lock) {\n    return lock.targetElement !== targetElement;\n  });\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null;\n    targetElement.ontouchmove = null;\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n  } else if (!locks.length) {\n    restoreOverflowSetting();\n  }\n};\n\n","import { useEffect } from 'react';\nimport { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';\nimport { Falsy } from '@lumx/react/utils';\n\nexport const useDisableBodyScroll = (modalElement: Element | Falsy): void => {\n    useEffect(() => {\n        if (!modalElement) {\n            return undefined;\n        }\n        // Fixing the document overflow style to prevent a bug that scrolls the window to the top.\n        const previousDocumentOverflow = document.documentElement.style.overflow;\n        document.documentElement.style.overflow = 'visible';\n        disableBodyScroll(modalElement);\n        return () => {\n            enableBodyScroll(modalElement);\n            // Restore the previous overflow style.\n            document.documentElement.style.overflow = previousDocumentOverflow;\n        };\n    }, [modalElement]);\n};\n"],"names":["useDisableBodyScroll","modalElement","useEffect","undefined","previousDocumentOverflow","document","documentElement","style","overflow","disableBodyScroll","enableBodyScroll"],"mappings":"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"}
+{"version":3,"file":"useDisableBodyScroll.js","sources":["../../../../../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js","../../../src/hooks/useDisableBodyScroll.ts"],"sourcesContent":["function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\n// Older browsers don't support event options, feature detect it.\n\n// Adopted and modified solution from Bohdan Didukh (2017)\n// https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi\n\nvar hasPassiveEvents = false;\nif (typeof window !== 'undefined') {\n  var passiveTestOptions = {\n    get passive() {\n      hasPassiveEvents = true;\n      return undefined;\n    }\n  };\n  window.addEventListener('testPassive', null, passiveTestOptions);\n  window.removeEventListener('testPassive', null, passiveTestOptions);\n}\n\nvar isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1);\n\n\nvar locks = [];\nvar documentListenerAdded = false;\nvar initialClientY = -1;\nvar previousBodyOverflowSetting = void 0;\nvar previousBodyPaddingRight = void 0;\n\n// returns true if `el` should be allowed to receive touchmove events.\nvar allowTouchMove = function allowTouchMove(el) {\n  return locks.some(function (lock) {\n    if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) {\n      return true;\n    }\n\n    return false;\n  });\n};\n\nvar preventDefault = function preventDefault(rawEvent) {\n  var e = rawEvent || window.event;\n\n  // For the case whereby consumers adds a touchmove event listener to document.\n  // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false })\n  // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then\n  // the touchmove event on document will break.\n  if (allowTouchMove(e.target)) {\n    return true;\n  }\n\n  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).\n  if (e.touches.length > 1) return true;\n\n  if (e.preventDefault) e.preventDefault();\n\n  return false;\n};\n\nvar setOverflowHidden = function setOverflowHidden(options) {\n  // If previousBodyPaddingRight is already set, don't set it again.\n  if (previousBodyPaddingRight === undefined) {\n    var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true;\n    var scrollBarGap = window.innerWidth - document.documentElement.clientWidth;\n\n    if (_reserveScrollBarGap && scrollBarGap > 0) {\n      previousBodyPaddingRight = document.body.style.paddingRight;\n      document.body.style.paddingRight = scrollBarGap + 'px';\n    }\n  }\n\n  // If previousBodyOverflowSetting is already set, don't set it again.\n  if (previousBodyOverflowSetting === undefined) {\n    previousBodyOverflowSetting = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n  }\n};\n\nvar restoreOverflowSetting = function restoreOverflowSetting() {\n  if (previousBodyPaddingRight !== undefined) {\n    document.body.style.paddingRight = previousBodyPaddingRight;\n\n    // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it\n    // can be set again.\n    previousBodyPaddingRight = undefined;\n  }\n\n  if (previousBodyOverflowSetting !== undefined) {\n    document.body.style.overflow = previousBodyOverflowSetting;\n\n    // Restore previousBodyOverflowSetting to undefined\n    // so setOverflowHidden knows it can be set again.\n    previousBodyOverflowSetting = undefined;\n  }\n};\n\n// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions\nvar isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) {\n  return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false;\n};\n\nvar handleScroll = function handleScroll(event, targetElement) {\n  var clientY = event.targetTouches[0].clientY - initialClientY;\n\n  if (allowTouchMove(event.target)) {\n    return false;\n  }\n\n  if (targetElement && targetElement.scrollTop === 0 && clientY > 0) {\n    // element is at the top of its scroll.\n    return preventDefault(event);\n  }\n\n  if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) {\n    // element is at the bottom of its scroll.\n    return preventDefault(event);\n  }\n\n  event.stopPropagation();\n  return true;\n};\n\nexport var disableBodyScroll = function disableBodyScroll(targetElement, options) {\n  // targetElement must be provided\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.');\n    return;\n  }\n\n  // disableBodyScroll must not have been called on this targetElement before\n  if (locks.some(function (lock) {\n    return lock.targetElement === targetElement;\n  })) {\n    return;\n  }\n\n  var lock = {\n    targetElement: targetElement,\n    options: options || {}\n  };\n\n  locks = [].concat(_toConsumableArray(locks), [lock]);\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        initialClientY = event.targetTouches[0].clientY;\n      }\n    };\n    targetElement.ontouchmove = function (event) {\n      if (event.targetTouches.length === 1) {\n        // detect single touch.\n        handleScroll(event, targetElement);\n      }\n    };\n\n    if (!documentListenerAdded) {\n      document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = true;\n    }\n  } else {\n    setOverflowHidden(options);\n  }\n};\n\nexport var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() {\n  if (isIosDevice) {\n    // Clear all locks ontouchstart/ontouchmove handlers, and the references.\n    locks.forEach(function (lock) {\n      lock.targetElement.ontouchstart = null;\n      lock.targetElement.ontouchmove = null;\n    });\n\n    if (documentListenerAdded) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n\n    // Reset initial clientY.\n    initialClientY = -1;\n  } else {\n    restoreOverflowSetting();\n  }\n\n  locks = [];\n};\n\nexport var enableBodyScroll = function enableBodyScroll(targetElement) {\n  if (!targetElement) {\n    // eslint-disable-next-line no-console\n    console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.');\n    return;\n  }\n\n  locks = locks.filter(function (lock) {\n    return lock.targetElement !== targetElement;\n  });\n\n  if (isIosDevice) {\n    targetElement.ontouchstart = null;\n    targetElement.ontouchmove = null;\n\n    if (documentListenerAdded && locks.length === 0) {\n      document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined);\n      documentListenerAdded = false;\n    }\n  } else if (!locks.length) {\n    restoreOverflowSetting();\n  }\n};\n\n","import { useEffect } from 'react';\nimport { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';\nimport { Falsy } from '@lumx/react/utils';\n\n/**\n * Disables the scroll on the body to make it only usable in the current modal element.\n * When the modal element is not provided anymore, the scroll is restored.\n *\n * @param modalElement The modal element.\n */\nexport const useDisableBodyScroll = (modalElement: Element | Falsy): void => {\n    useEffect(() => {\n        if (!modalElement) {\n            return undefined;\n        }\n        // Fixing the document overflow style to prevent a bug that scrolls the window to the top.\n        const previousDocumentOverflow = document.documentElement.style.overflow;\n        document.documentElement.style.overflow = 'visible';\n        disableBodyScroll(modalElement);\n        return () => {\n            enableBodyScroll(modalElement);\n            // Restore the previous overflow style.\n            requestAnimationFrame(() => {\n                document.documentElement.style.overflow = previousDocumentOverflow;\n            });\n        };\n    }, [modalElement]);\n};\n"],"names":["useDisableBodyScroll","modalElement","useEffect","undefined","previousDocumentOverflow","document","documentElement","style","overflow","disableBodyScroll","enableBodyScroll","requestAnimationFrame"],"mappings":"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"}

package/esm/_internal/useRovingTabIndex.js

@@ -1,4 +1,4 @@
-import { i as _toConsumableArray, c as _objectSpread2, _ as _defineProperty, f as _slicedToArray } from './getRootClassName.js';
+import { e as _toConsumableArray, _ as _objectSpread2, a as _defineProperty, d as _slicedToArray } from './_rollupPluginBabelHelpers.js';
 import { createContext, useContext, useMemo, useEffect, useCallback } from 'react';
 import { u as uid } from '../index2.js';
 

package/esm/_internal/user-block.js

@@ -1,6 +1,7 @@
+import './_rollupPluginBabelHelpers.js';
 import './components.js';
-import './getRootClassName.js';
 import 'react';
+import './getRootClassName.js';
 import './mdi.js';
 import 'lodash/isBoolean';
 import 'lodash/isEmpty';

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -1,6 +1,7 @@
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography } from './_internal/components.js';
-import './_internal/getRootClassName.js';
+import './_internal/_rollupPluginBabelHelpers.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyInterface, TypographyTitleCustom } from './_internal/components.js';
 import 'react';
+import './_internal/getRootClassName.js';
 import './_internal/mdi.js';
 import './index2.js';
 import 'lodash/isBoolean';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.0-alpha.12",
-        "@lumx/icons": "^2.1.0-alpha.12",
+        "@lumx/core": "^2.1.0-alpha.15",
+        "@lumx/icons": "^2.1.0-alpha.15",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -123,9 +123,9 @@
         "storybook": "start-storybook -s ../site-demo/static/ -p 9000"
     },
     "sideEffects": false,
-    "version": "2.1.0-alpha.12",
+    "version": "2.1.0-alpha.15",
     "resolutions": {
         "**/style-loader": "^1.0.0"
     },
-    "gitHead": "b26e06ad9aa9a4735822bed70dfa58caeae3bd6f"
+    "gitHead": "a202d8df8a28773fca6fbe6fadffc15f40125f2e"
 }

package/src/components/dialog/Dialog.tsx

@@ -18,6 +18,7 @@ import {
     partitionMulti,
 } from '@lumx/react/utils';
 import { ClickAwayProvider } from '@lumx/react/utils/ClickAwayProvider';
+import { mergeRefs } from '@lumx/react/utils/mergeRefs';
 
 import { useDelayedVisibility } from '@lumx/react/hooks/useDelayedVisibility';
 import { useDisableBodyScroll } from '@lumx/react/hooks/useDisableBodyScroll';
@@ -129,13 +130,18 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const wrapperRef = useRef<HTMLDivElement>(null);
-
+    /**
+     * Since the `contentRef` comes from the parent and is optional,
+     * we need to create a stable contentRef that will always be available.
+     */
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const localContentRef = useRef<HTMLDivElement>(null);
     // Handle focus trap.
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFocusTrap(wrapperRef.current, focusElement?.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useDisableBodyScroll(isOpen && wrapperRef.current);
+    useDisableBodyScroll(isOpen && localContentRef.current);
 
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [sentinelTop, setSentinelTop] = useState<Element | null>(null);
@@ -203,7 +209,7 @@ export const Dialog: Comp<DialogProps, HTMLDivElement> = forwardRef((props, ref)
                                   </header>
                               )}
 
-                              <div ref={contentRef} className={`${CLASSNAME}__content`}>
+                              <div ref={mergeRefs(contentRef, localContentRef)} className={`${CLASSNAME}__content`}>
                                   <div
                                       className={`${CLASSNAME}__sentinel ${CLASSNAME}__sentinel--top`}
                                       ref={setSentinelTop}

package/src/components/dropdown/Dropdown.tsx

@@ -149,6 +149,7 @@ export const Dropdown: Comp<DropdownProps, HTMLDivElement> = forwardRef((props,
             {...forwardedProps}
             anchorRef={anchorRef}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME }))}
+            elevation={0 as any}
             closeOnClickAway={closeOnClickAway}
             closeOnEscape={closeOnEscape}
             fitToAnchorWidth={fitToAnchorWidth}

package/src/components/dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`<Dropdown> Snapshots and structure should render correctly 1`] = `
   className="lumx-dropdown"
   closeOnClickAway={true}
   closeOnEscape={true}
-  elevation={3}
+  elevation={0}
   fitToAnchorWidth={true}
   fitWithinViewportHeight={true}
   focusElement={

package/src/components/index.ts

@@ -87,9 +87,9 @@ export const Emphasis = {
 export type Emphasis = ValueOf<typeof Emphasis>;
 
 /**
- * List of typographies.
+ * List of typographies that can't be customized.
  */
-export const Typography = {
+export const TypographyInterface = {
     overline: 'overline',
     caption: 'caption',
     body1: 'body1',
@@ -100,16 +100,59 @@ export const Typography = {
     headline: 'headline',
     display1: 'display1',
 } as const;
-export type Typography = ValueOf<typeof Typography>;
+export type TypographyInterface = ValueOf<typeof TypographyInterface>;
+
+/**
+ * List of title typographies that can be customized (via CSS variables).
+ */
+export const TypographyTitleCustom = {
+    title1: 'custom-title1',
+    title2: 'custom-title2',
+    title3: 'custom-title3',
+    title4: 'custom-title4',
+    title5: 'custom-title5',
+    title6: 'custom-title6',
+} as const;
+export type TypographyTitleCustom = ValueOf<typeof TypographyTitleCustom>;
+
+/**
+ * List of typographies that can be customized (via CSS variables).
+ */
+const TypographyCustom = {
+    ...TypographyTitleCustom,
+    intro: 'intro',
+    'body-large': 'body-large',
+    body: 'body',
+    quote: 'quote',
+    'publish-info': 'publish-info',
+    button: 'button',
+} as const;
+export type TypographyCustom = ValueOf<typeof TypographyCustom>;
+
+/**
+ * List of all typographies.
+ */
+export const Typography = {
+    ...TypographyInterface,
+    custom: TypographyCustom,
+} as const;
+export type Typography = TypographyInterface | TypographyCustom;
 
 /**
  * All available aspect ratios.
  */
 export const AspectRatio = {
+    /** Intrinsic content ratio. */
     original: 'original',
+    /** Ratio 16:9 */
+    wide: 'wide',
+    /** Ratio 3:2 */
     horizontal: 'horizontal',
+    /** Ratio 3:2 */
     vertical: 'vertical',
+    /** Ratio 1:1 */
     square: 'square',
+    /** Ratio constrained by the parent. */
     free: 'free',
 } as const;
 export type AspectRatio = ValueOf<typeof AspectRatio>;

package/src/components/link/Link.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { mdiChevronDown, mdiLink } from '@lumx/icons';
-import { ColorPalette, ColorVariant, Link, Typography } from '@lumx/react';
+import { ColorPalette, ColorVariant, Link, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import React, { Fragment } from 'react';
 
@@ -8,6 +8,8 @@ export default { title: 'LumX components/link/Link' };
 
 const onClick = () => console.log('clicked link');
 
+const linkTypographies = { ...TypographyInterface, ...TypographyTitleCustom };
+
 export const SimpleLink = () => (
     <>
         <Link
@@ -15,7 +17,7 @@ export const SimpleLink = () => (
             target={boolean('target: _blank', false, 'Link 1') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 1')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 1')}
-            typography={select('Typography', Typography, Typography.body2, 'Link 1')}
+            typography={select('Typography', linkTypographies, Typography.body2, 'Link 1')}
         >
             {text('Value', 'Here is a first link', 'Link 1')}
         </Link>
@@ -25,7 +27,7 @@ export const SimpleLink = () => (
             target={boolean('target: _blank', false, 'Link 2') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 2')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 2')}
-            typography={select('Typography', Typography, Typography.body1, 'Link 2')}
+            typography={select('Typography', linkTypographies, Typography.body1, 'Link 2')}
         >
             {text('Value', 'Here is a second link', 'Link 2')}
         </Link>
@@ -35,7 +37,7 @@ export const SimpleLink = () => (
             target={boolean('target: _blank', false, 'Link 3') ? '_blank' : ''}
             color={select('Color', ColorPalette, ColorPalette.blue, 'Link 3')}
             colorVariant={select('Color Variant', ColorVariant, ColorVariant.N, 'Link 3')}
-            typography={select('Typography', Typography, Typography.caption, 'Link 3')}
+            typography={select('Typography', linkTypographies, Typography.caption, 'Link 3')}
         >
             {text('Value', 'Here is a third link', 'Link 3')}
         </Link>
@@ -67,15 +69,16 @@ export const DisabledLink = () => (
 
 export const WithIcon = () => (
     <>
-        {Object.values(Typography).map((typography) => (
+        {Object.values(linkTypographies).map((typography) => (
             <Fragment key={typography}>
+                {typography}
                 <p>
-                    <Link rightIcon={mdiLink} href="https://www.google.com" typography={typography}>
+                    <Link rightIcon={mdiLink} href="https://www.google.com" typography={typography as any}>
                         With right icon
                     </Link>
                 </p>
                 <p>
-                    <Link leftIcon={mdiChevronDown} href="https://www.google.com" typography={typography}>
+                    <Link leftIcon={mdiChevronDown} href="https://www.google.com" typography={typography as any}>
                         With left icon
                     </Link>
                 </p>
@@ -84,7 +87,7 @@ export const WithIcon = () => (
                         leftIcon={mdiChevronDown}
                         rightIcon={mdiLink}
                         href="https://www.google.com"
-                        typography={typography}
+                        typography={typography as any}
                     >
                         With right and left icon
                     </Link>
@@ -93,3 +96,16 @@ export const WithIcon = () => (
         ))}
     </>
 );
+
+export const WithCustomizableTypography = () => (
+    <>
+        <style>{`
+        :root {
+            --lumx-typography-custom-title1-font-size: 5px;
+        }
+        `}</style>
+        <Link typography={Typography.custom.title1} href="https://google.com">
+            Link with customizable `body` typography
+        </Link>
+    </>
+);

package/src/components/link/Link.tsx

@@ -4,7 +4,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import classNames from 'classnames';
 
-import { Color, ColorVariant, Icon, Size, Typography } from '@lumx/react';
+import { Color, ColorVariant, Icon, Size, Typography, TypographyInterface, TypographyTitleCustom } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 import { renderLink } from '@lumx/react/utils/renderLink';
 
@@ -31,7 +31,7 @@ export interface LinkProps extends GenericProps {
     /** Link target. */
     target?: HTMLAnchorProps['target'];
     /** Typography variant. */
-    typography?: Typography;
+    typography?: TypographyInterface | TypographyTitleCustom;
 }
 
 /**
@@ -51,6 +51,12 @@ const getIconSize = (typography?: Typography) => {
 
         case Typography.headline:
         case Typography.title:
+        case Typography.custom.title1:
+        case Typography.custom.title2:
+        case Typography.custom.title3:
+        case Typography.custom.title4:
+        case Typography.custom.title5:
+        case Typography.custom.title6:
         case Typography.body2:
         case Typography.subtitle2:
             return Size.s;