@lumx/react 3.10.1-alpha.3 → 3.10.1-alpha.4

package/index.js

@@ -1,13 +1,11 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useRef, Children, isValidElement, cloneElement, useLayoutEffect, useCallback, Fragment, createContext, useContext, useReducer } from 'react';
-import kebabCase from 'lodash/kebabCase';
 import isBoolean from 'lodash/isBoolean';
 import isEmpty from 'lodash/isEmpty';
+import kebabCase from 'lodash/kebabCase';
 import ReactDOM, { createPortal } from 'react-dom';
 import get from 'lodash/get';
 import { C as ClickAwayProvider, i as isEmpty$1 } from './_internal/index.js';
-import memoize from 'lodash/memoize';
-import throttle from 'lodash/throttle';
 
 function ownKeys(e, r) {
   var t = Object.keys(e);
@@ -319,57 +317,6 @@ var classNames = classnames.exports;
 
 const mdiAlert='M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2z';const mdiAlertCircle='M13 13h-2V7h2m0 10h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiArrowDown='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z';const mdiArrowUp='M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z';const mdiCheck='M21 7 9 19l-5.5-5.5 1.41-1.41L9 16.17 19.59 5.59z';const mdiCheckCircle='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8z';const mdiChevronDown='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z';const mdiChevronLeft='M15.41 16.58 10.83 12l4.58-4.59L14 6l-6 6 6 6z';const mdiChevronRight='M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z';const mdiChevronUp='M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z';const mdiClose='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z';const mdiCloseCircle='M12 2a10 10 0 1 1 0 20 10 10 0 1 1 0-20m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z';const mdiDragVertical='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z';const mdiImageBroken='M19 3a2 2 0 0 1 2 2v6h-2v2h-2v2h-2v2h-2v2h-2v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 12v4a2 2 0 0 1-2 2h-4v-2h2v-2h2v-2zm-2-6.5a.5.5 0 0 0-.5-.5h-13a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .5.5H11v-1h2v-2h2v-2h2V9h2z';const mdiInformation='M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiMagnifyMinusOutline='M15.5 14h-.79l-.28-.27A6.5 6.5 0 0 0 16 9.5 6.5 6.5 0 0 0 9.5 3 6.5 6.5 0 0 0 3 9.5 6.5 6.5 0 0 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.5-1.5zm-6 0C7 14 5 12 5 9.5S7 5 9.5 5 14 7 14 9.5 12 14 9.5 14M7 9h5v1H7z';const mdiMagnifyPlusOutline='m15.5 14 5 5-1.5 1.5-5-5v-.79l-.27-.28A6.5 6.5 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3 6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.57 4.23l.28.27zm-6 0C12 14 14 12 14 9.5S12 5 9.5 5 5 7 5 9.5 7 14 9.5 14m2.5-4h-2v2H9v-2H7V9h2V7h1v2h2z';const mdiMenuDown='m7 10 5 5 5-5z';const mdiMinus='M19 13H5v-2h14z';const mdiPauseCircleOutline='M13 16V8h2v8zm-4 0V8h2v8zm3-14a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8 8 8 0 0 0 8 8 8 8 0 0 0 8-8 8 8 0 0 0-8-8';const mdiPlayCircleOutline='M12 20a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m-2 14.5 6-4.5-6-4.5z';const mdiRadioboxBlank='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2';const mdiRadioboxMarked='M12 20a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 5a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-5 5 5 0 0 0-5-5';
 
-/**
- * The prefix to use for the CSS classes.
- */
-const CSS_PREFIX = 'lumx';
-
-/**
- * Animation duration constants. Take into consideration that if you change one of these variables,
- * you need to update their scss counterpart as well
- */
-const DIALOG_TRANSITION_DURATION = 400;
-const EXPANSION_PANEL_TRANSITION_DURATION = 400;
-const NOTIFICATION_TRANSITION_DURATION = 200;
-
-/**
- * Delay on hover after which we open or close the tooltip.
- * Only applies to devices supporting pointer hover.
- */
-const TOOLTIP_HOVER_DELAY = {
-  open: 500,
-  close: 500
-};
-
-/**
- * Delay on long press after which we open or close the tooltip.
- * Only applies to devices not supporting pointer hover.
- */
-const TOOLTIP_LONG_PRESS_DELAY = {
-  open: 250,
-  close: 3000
-};
-
-/**
- * Optional global `window` instance (not defined when running SSR).
- */
-const WINDOW = typeof window !== 'undefined' ? window : undefined;
-
-/**
- * Optional global `document` instance (not defined when running SSR).
- */
-const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
-
-/**
- * Check if we are running in a true browser
- */
-const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
-
-/**
- * Visually hidden a11y utility class name
- */
-const VISUALLY_HIDDEN = 'visually-hidden';
-
 const _excluded$1t = ["prefix"];
 
 /**
@@ -567,6 +514,37 @@ function onButtonPressed(handler) {
   };
 }
 
+/**
+ * The prefix to use for the CSS classes.
+ */
+const CSS_PREFIX = 'lumx';
+
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+const DIALOG_TRANSITION_DURATION = 400;
+const EXPANSION_PANEL_TRANSITION_DURATION = 400;
+const NOTIFICATION_TRANSITION_DURATION = 200;
+
+/**
+ * Delay on hover after which we open or close the tooltip.
+ * Only applies to devices supporting pointer hover.
+ */
+const TOOLTIP_HOVER_DELAY = {
+  open: 500,
+  close: 500
+};
+
+/**
+ * Delay on long press after which we open or close the tooltip.
+ * Only applies to devices not supporting pointer hover.
+ */
+const TOOLTIP_LONG_PRESS_DELAY = {
+  open: 250,
+  close: 3000
+};
+
 // See https://regex101.com/r/YjS1uI/3
 const LAST_PART_CLASSNAME = /^(.*)-(.+)$/gi;
 
@@ -588,6 +566,14 @@ function getRootClassName(componentName, subComponent) {
   return formattedClassName;
 }
 
+/**
+ * Returns the classname associated to the given typography.
+ * For example, for `Typography.title` it returns `lumx-typography-title`
+ */
+const getTypographyClassName = typography => {
+  return `lumx-typography-${typography}`;
+};
+
 /**
  * Returns the classname associated to the given color and variant.
  * For example, for 'dark' and 'L2' it returns `lumx-color-font-dark-l2`
@@ -597,14 +583,6 @@ const getFontColorClassName = function (color) {
   return `lumx-color-font-${color}-${colorVariant}`;
 };
 
-/**
- * Returns the classname associated to the given typography.
- * For example, for `Typography.title` it returns `lumx-typography-title`
- */
-const getTypographyClassName = typography => {
-  return `lumx-typography-${typography}`;
-};
-
 let i = 0;
 
 /**
@@ -2069,6 +2047,26 @@ const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
 
+/**
+ * Optional global `window` instance (not defined when running SSR).
+ */
+const WINDOW = typeof window !== 'undefined' ? window : undefined;
+
+/**
+ * Optional global `document` instance (not defined when running SSR).
+ */
+const DOCUMENT = typeof document !== 'undefined' ? document : undefined;
+
+/**
+ * Check if we are running in a true browser
+ */
+const IS_BROWSER = typeof navigator !== 'undefined' && !navigator.userAgent.includes('jsdom');
+
+/**
+ * Visually hidden a11y utility class name
+ */
+const VISUALLY_HIDDEN = 'visually-hidden';
+
 /** Pull an element from an array (inverse of array.push) */
 const pull = (array, element) => {
   const index = array.indexOf(element);
@@ -4436,6 +4434,21 @@ const useStubPopper = (_a, _p, _ref) => {
 /** Switch hook implementation between environment */
 const usePopper = IS_BROWSER ? usePopper$1 : useStubPopper;
 
+/** Memoize a function based on the serialization of its args */
+function memoize(fn) {
+  const cache = new Map();
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    const serializedArgs = JSON.stringify(args);
+    if (cache.has(serializedArgs)) return cache.get(serializedArgs);
+    const value = fn(...args);
+    cache.set(serializedArgs, value);
+    return value;
+  };
+}
+
 /**
  * Different possible placements for the popover.
  */
@@ -6807,13 +6820,11 @@ const useDisableBodyScroll = modalElement => {
   }, [modalElement]);
 };
 
-const userHasReducedMotion = () => {
-  try {
-    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  } catch (e) {
-    return false;
-  }
-};
+/** Check if user prefers reduced motion */
+function isReducedMotion() {
+  var _WINDOW$matchMedia;
+  return WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$matchMedia = WINDOW.matchMedia) === null || _WINDOW$matchMedia === void 0 ? void 0 : _WINDOW$matchMedia.call(WINDOW, '(prefers-reduced-motion: reduce)').matches;
+}
 
 /**
  * Returns true if the component is visible tracking the opacity transition.
@@ -6839,7 +6850,7 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
 
     // Transition event is not supported or the user prefers reduced motion.
     // => Skip and set visibility to false directly.
-    if (!element || !window.TransitionEvent || userHasReducedMotion()) {
+    if (!element || !window.TransitionEvent || isReducedMotion()) {
       setVisible(false);
       return undefined;
     }
@@ -8140,11 +8151,20 @@ const CLASSNAME$O = getRootClassName(COMPONENT_NAME$O);
  */
 function useSizeOnWindowResize(elementRef) {
   const [size, setSize] = React__default.useState(null);
-  const updateSize = React__default.useMemo(() => throttle(() => {
-    var _elementRef$current;
-    const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
-    if (newSize) setSize(newSize);
-  }, 10), [elementRef]);
+  const updateSize = React__default.useMemo(() => {
+    let prevTimeout;
+    function update() {
+      var _elementRef$current;
+      const newSize = (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.getBoundingClientRect();
+      if (newSize) setSize(newSize);
+      prevTimeout = undefined;
+    }
+    return () => {
+      if (!prevTimeout) {
+        prevTimeout = setTimeout(update, 10);
+      }
+    };
+  }, [elementRef]);
   React__default.useEffect(() => {
     updateSize();
     window.addEventListener('resize', updateSize);
@@ -8173,12 +8193,6 @@ function useImageSize(imgRef, getInitialSize) {
   return imageSize;
 }
 
-/** Check if user prefers reduced motion */
-function getPrefersReducedMotion() {
-  var _WINDOW$matchMedia;
-  return WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$matchMedia = WINDOW.matchMedia) === null || _WINDOW$matchMedia === void 0 ? void 0 : _WINDOW$matchMedia.call(WINDOW, '(prefers-reduced-motion: reduce)').matches;
-}
-
 /** Minimal recursive deep equal of JS values */
 function isEqual(obj1, obj2) {
   if (obj1 === obj2) return true;
@@ -8464,7 +8478,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
         maxWidth: scrollAreaSize === null || scrollAreaSize === void 0 ? void 0 : scrollAreaSize.width
       }), {}, {
         // Only animate when scale is set, and we are not pointer zooming and the user does not prefer reduced motion
-        transition: scale && !isPointerZooming && !getPrefersReducedMotion() ? 'all 250ms' : undefined
+        transition: scale && !isPointerZooming && !isReducedMotion() ? 'all 250ms' : undefined
       })
     }),
     loadingPlaceholderImageRef: loadingPlaceholderImageRef
@@ -8566,13 +8580,6 @@ const ImageSlideshow = _ref => {
   })));
   const getImgRef = React__default.useMemo(() => memoize((index, isActive) => {
     return mergeRefs(images === null || images === void 0 ? void 0 : images[index].imgRef, isActive ? activeImageRef : undefined);
-  },
-  // memoize based on both arguments
-  function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    return args.join();
   }), [images, activeImageRef]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Slides, {
     activeIndex: activeIndex,
@@ -8650,7 +8657,7 @@ async function startViewTransition(_ref) {
     viewTransitionName
   } = _ref;
   const start = (_document = document) === null || _document === void 0 ? void 0 : (_document$startViewTr = _document.startViewTransition) === null || _document$startViewTr === void 0 ? void 0 : _document$startViewTr.bind(document);
-  const prefersReducedMotion = getPrefersReducedMotion();
+  const prefersReducedMotion = isReducedMotion();
   const {
     flushSync
   } = ReactDOM;
@@ -14043,7 +14050,7 @@ const useInjectTooltipRef = options => {
 };
 
 /** Return true if the browser does not support pointer hover */
-const browserDoesNotSupportHover = () => {
+const isHoverNotSupported = () => {
   var _window$matchMedia, _window;
   return !!((_window$matchMedia = (_window = window).matchMedia) !== null && _window$matchMedia !== void 0 && _window$matchMedia.call(_window, '(hover: none)').matches);
 };
@@ -14090,7 +14097,7 @@ function useTooltipOpen(delay, anchorElement) {
       // Skip timeout in fake browsers
       if (!IS_BROWSER) update();else timer = setTimeout(update, duration);
     };
-    const hoverNotSupported = browserDoesNotSupportHover();
+    const hoverNotSupported = isHoverNotSupported();
     const hasTouch = ('ontouchstart' in window);
 
     // Adapt open/close delay