@lumx/react 4.4.1-alpha.1 → 4.4.1-alpha.3

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, Theme as Theme$1, AspectRatio as AspectRatio$1, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, ColorVariant, VISUALLY_HIDDEN, Theme as Theme$1, AspectRatio as AspectRatio$1, DOCUMENT, WINDOW, DIALOG_TRANSITION_DURATION, IS_BROWSER as IS_BROWSER$1, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -16,7 +16,7 @@ import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
 import partition from 'lodash/partition.js';
 import reduce from 'lodash/reduce.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/BfgxEBp6.js';
 import isEmpty from 'lodash/isEmpty.js';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
@@ -676,6 +676,12 @@ function typography(typo) {
   return `lumx-typography-${typo}`;
 }
 
+/**
+ * Visually hidden class name.
+ * Used to hide elements from view but keep them readable from screen readers
+ */
+const visuallyHidden = () => VISUALLY_HIDDEN;
+
 /**
  * Modifier
  * @example { 'is-disabled': true, 'is-selected': false }
@@ -778,6 +784,29 @@ function bem(baseName) {
   };
 }
 
+/**
+ * Animation duration constants. Take into consideration that if you change one of these variables,
+ * you need to update their scss counterpart as well
+ */
+
+/**
+ * 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
+};
+
 /**
  * Alignments.
  */
@@ -844,6 +873,11 @@ const ColorPalette = {
   red: 'red',
   light: 'light'};
 
+/**
+ * Check if we are running in a true browser (not SSR and not jsdom test environment).
+ */
+const IS_BROWSER = typeof window !== 'undefined' && !window.navigator.userAgent.includes('jsdom');
+
 /**
  * Component display name.
  */
@@ -2985,21 +3019,6 @@ const DatePickerField = forwardRef((props, ref) => {
 });
 DatePickerField.displayName = COMPONENT_NAME$11;
 
-/**
- * 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');
-
 /**
  * Keep track of listeners, only the last registered listener gets activated at any point (previously registered
  * listener are disabled).
@@ -6398,12 +6417,16 @@ function usePopoverStyle({
     middlewareData
   } = useFloating({
     placement: floatingPlacement,
-    whileElementsMounted: autoUpdate,
-    middleware,
-    elements: {
-      reference: anchorElement,
-      floating: popperElement
-    }
+    // Disable autoUpdate and element refs in non-browser environments (e.g. jsdom) to avoid
+    // flushSync act() warnings from @floating-ui/react-dom (positioning is not meaningful in jsdom anyway).
+    ...(IS_BROWSER$1 ? {
+      whileElementsMounted: autoUpdate,
+      elements: {
+        reference: anchorElement,
+        floating: popperElement
+      }
+    } : {}),
+    middleware
   });
   const position = resolvedPlacement ?? placement;
 
@@ -6804,7 +6827,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   React__default.useEffect(() => {
     if (isOpen || closeMode === 'hide') {
       setChildrenVisible(true);
-    } else if (!IS_BROWSER) {
+    } else if (!IS_BROWSER$1) {
       // Outside a browser we can't wait for the transition
       setChildrenVisible(false);
     }
@@ -6816,7 +6839,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
     const {
       current: wrapper
     } = wrapperRef;
-    if (!IS_BROWSER || !wrapper) {
+    if (!IS_BROWSER$1 || !wrapper) {
       return undefined;
     }
     const onTransitionEnd = () => {
@@ -14826,10 +14849,90 @@ Toolbar.displayName = TOOLBAR_NAME;
 Toolbar.className = CLASSNAME$3;
 Toolbar.defaultProps = DEFAULT_PROPS$3;
 
+/**
+ * Arrow size (in pixel).
+ */
+const ARROW_SIZE = 8;
+
 /**
  * Make sure tooltip appear above popovers.
+ * Hardcoded as POPOVER_ZINDEX (9999) + 1.
+ */
+const TOOLTIP_ZINDEX = 10000;
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$2 = {
+  placement: 'bottom',
+  closeMode: 'unmount',
+  ariaLinkMode: 'aria-describedby',
+  zIndex: TOOLTIP_ZINDEX
+};
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$2 = 'Tooltip';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$2 = 'lumx-tooltip';
+const {
+  block: block$2,
+  element: element$2
+} = bem(CLASSNAME$2);
+
+/**
+ * Props for the TooltipPopup rendering component.
  */
-const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
+
+/**
+ * Tooltip popup rendering component.
+ * Pure JSX template for the tooltip popup element (arrow + inner text + BEM classes).
+ *
+ * @param props Component props.
+ * @return JSX element.
+ */
+const TooltipPopup = props => {
+  const {
+    id,
+    label,
+    position,
+    isHidden,
+    style,
+    zIndex = TOOLTIP_ZINDEX,
+    className,
+    ref,
+    ...forwardedProps
+  } = props;
+  const labelLines = label ? label.split('\n') : [];
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    id: id,
+    role: "tooltip",
+    className: classnames(className, block$2({
+      [`position-${position}`]: Boolean(position)
+    }), isHidden && visuallyHidden()),
+    style: {
+      ...(isHidden ? undefined : style),
+      zIndex
+    },
+    "data-popper-placement": position,
+    children: [/*#__PURE__*/jsx("div", {
+      className: element$2('arrow')
+    }), /*#__PURE__*/jsx("div", {
+      className: element$2('inner'),
+      children: labelLines.map((line, index) => /*#__PURE__*/jsx("p", {
+        children: line
+      }, index))
+    })]
+  });
+};
+TooltipPopup.displayName = COMPONENT_NAME$2;
+TooltipPopup.className = CLASSNAME$2;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -14877,9 +14980,6 @@ const useInjectTooltipRef = options => {
   }, [label, children, setAnchorElement, linkId, ariaLinkMode]);
 };
 
-/** Return true if the browser does not support pointer hover */
-const isHoverNotSupported = () => !!window.matchMedia?.('(hover: none)').matches;
-
 /** Check if the focus is visible on the given element */
 const isFocusVisible = element => {
   try {
@@ -14890,6 +14990,140 @@ const isFocusVisible = element => {
   }
 };
 
+/** Return true if the browser does not support pointer hover */
+const isHoverNotSupported = () => !!window.matchMedia?.('(hover: none)').matches;
+
+/**
+ * Framework-agnostic open/close state machine for tooltip.
+ * Manages hover, touch, focus, timers, and escape key behavior.
+ */
+function createTooltipOpenManager(options) {
+  const {
+    delay,
+    onStateChange
+  } = options;
+  let timer;
+  let openStartTime;
+  let shouldOpen;
+  let anchorController;
+  let popperController;
+
+  // Run timer to defer updating the isOpen state.
+  const deferUpdate = duration => {
+    if (timer) clearTimeout(timer);
+    const update = () => {
+      onStateChange(!!shouldOpen);
+    };
+    // Skip timeout in fake browsers
+    if (!IS_BROWSER) update();else timer = setTimeout(update, duration);
+  };
+  const hoverNotSupported = isHoverNotSupported();
+  const hasTouch = typeof window !== 'undefined' && 'ontouchstart' in window;
+
+  // Adapt open/close delay
+  const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
+  const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
+
+  // Open (or/and cancel closing) of tooltip.
+  const open = () => {
+    if (shouldOpen && !timer) return;
+    shouldOpen = true;
+    openStartTime = Date.now();
+    deferUpdate(openDelay);
+  };
+
+  // Close or cancel opening of tooltip
+  const getClose = overrideDelay => {
+    if (!shouldOpen && !timer) return;
+    shouldOpen = false;
+    deferUpdate(overrideDelay);
+  };
+  const close = () => getClose(closeDelay);
+  const closeImmediately = () => getClose(0);
+  return {
+    attachAnchor(anchorElement) {
+      anchorController = new AbortController();
+      const {
+        signal
+      } = anchorController;
+      if (hoverNotSupported) {
+        /**
+         * Handle touchend event.
+         * If end comes before the open delay => cancel tooltip (close immediate).
+         * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
+         */
+        const longPressEnd = evt => {
+          if (!openStartTime) return;
+          if (Date.now() - openStartTime >= openDelay) {
+            // Tooltip take priority, event prevented.
+            evt.stopPropagation();
+            evt.preventDefault();
+            anchorElement.focus();
+            // Close with delay.
+            close();
+          } else {
+            // Close immediately.
+            closeImmediately();
+          }
+        };
+        anchorElement.addEventListener(hasTouch ? 'touchstart' : 'mousedown', open, {
+          signal
+        });
+        anchorElement.addEventListener(hasTouch ? 'touchend' : 'mouseup', longPressEnd, {
+          signal
+        });
+      } else {
+        anchorElement.addEventListener('mouseenter', open, {
+          signal
+        });
+        anchorElement.addEventListener('mouseleave', close, {
+          signal
+        });
+        anchorElement.addEventListener('mouseup', closeImmediately, {
+          signal
+        });
+      }
+
+      // Events always applied no matter the browser:
+      // Open on focus (only if focus is visible).
+      anchorElement.addEventListener('focusin', e => {
+        // Skip if focus is not visible
+        if (!isFocusVisible(e.target)) return;
+        open();
+      }, {
+        signal
+      });
+      // Close on lost focus.
+      anchorElement.addEventListener('focusout', closeImmediately, {
+        signal
+      });
+    },
+    attachPopper(popperElement) {
+      popperController?.abort();
+      if (!popperElement || hoverNotSupported) return;
+      popperController = new AbortController();
+      const {
+        signal
+      } = popperController;
+      // Popper element hover
+      popperElement.addEventListener('mouseenter', open, {
+        signal
+      });
+      popperElement.addEventListener('mouseleave', close, {
+        signal
+      });
+    },
+    close() {
+      closeImmediately();
+    },
+    destroy() {
+      if (timer) clearTimeout(timer);
+      anchorController?.abort();
+      popperController?.abort();
+    }
+  };
+}
+
 /**
  * Hook controlling tooltip visibility using mouse hover the anchor and delay.
  *
@@ -14900,110 +15134,23 @@ const isFocusVisible = element => {
 function useTooltipOpen(delay, anchorElement) {
   const [isOpen, setIsOpen] = useState(false);
   const onPopperMount = useRef(null);
+  const managerRef = useRef(null);
 
   // Global close on escape
-  const [closeCallback, setCloseCallback] = useState(undefined);
-  useCallbackOnEscape(isOpen ? closeCallback : undefined);
+  useCallbackOnEscape(isOpen ? () => managerRef.current?.close() : undefined);
   useEffect(() => {
     if (!anchorElement) {
       return undefined;
     }
-    let timer;
-    let openStartTime;
-    let shouldOpen;
-
-    // Run timer to defer updating the isOpen state.
-    const deferUpdate = duration => {
-      if (timer) clearTimeout(timer);
-      const update = () => {
-        setIsOpen(!!shouldOpen);
-      };
-      // Skip timeout in fake browsers
-      if (!IS_BROWSER) update();else timer = setTimeout(update, duration);
-    };
-    const hoverNotSupported = isHoverNotSupported();
-    const hasTouch = 'ontouchstart' in window;
-
-    // Adapt open/close delay
-    const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);
-    const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;
-
-    // Open (or/and cancel closing) of tooltip.
-    const open = () => {
-      if (shouldOpen && !timer) return;
-      shouldOpen = true;
-      openStartTime = Date.now();
-      deferUpdate(openDelay);
-    };
-
-    // Close or cancel opening of tooltip
-    const getClose = (overrideDelay = closeDelay) => {
-      if (!shouldOpen && !timer) return;
-      shouldOpen = false;
-      deferUpdate(overrideDelay);
-    };
-    const close = () => getClose(closeDelay);
-    const closeImmediately = () => getClose(0);
-    setCloseCallback(() => closeImmediately);
-
-    // Adapt event to browsers with or without `hover` support.
-    const events = [];
-    if (hoverNotSupported) {
-      /**
-       * Handle touchend event
-       * If end comes before the open delay => cancel tooltip (close immediate).
-       * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.
-       */
-      const longPressEnd = evt => {
-        if (!openStartTime) return;
-        if (Date.now() - openStartTime >= openDelay) {
-          // Tooltip take priority, event prevented.
-          evt.stopPropagation();
-          evt.preventDefault();
-          anchorElement.focus();
-          // Close with delay.
-          close();
-        } else {
-          // Close immediately.
-          closeImmediately();
-        }
-      };
-      events.push([anchorElement, hasTouch ? 'touchstart' : 'mousedown', open], [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd]);
-    } else {
-      events.push([anchorElement, 'mouseenter', open], [anchorElement, 'mouseleave', close], [anchorElement, 'mouseup', closeImmediately]);
-      onPopperMount.current = popperElement => {
-        if (!popperElement) return;
-        // Popper element hover
-        popperElement.addEventListener('mouseenter', open);
-        popperElement.addEventListener('mouseleave', close);
-        // Add to event list to remove on unmount
-        events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);
-      };
-    }
-
-    // Events always applied no matter the browser:.
-    events.push(
-    // Open on focus (only if focus is visible).
-    [anchorElement, 'focusin', e => {
-      // Skip if focus is not visible
-      if (!isFocusVisible(e.target)) return;
-      open();
-    }],
-    // Close on lost focus.
-    [anchorElement, 'focusout', closeImmediately]);
-
-    // Attach events
-    for (const [node, eventType, eventHandler] of events) {
-      node.addEventListener(eventType, eventHandler);
-    }
+    const manager = createTooltipOpenManager({
+      delay,
+      onStateChange: setIsOpen
+    });
+    managerRef.current = manager;
+    onPopperMount.current = el => manager.attachPopper(el);
+    manager.attachAnchor(anchorElement);
     return () => {
-      // Clear pending timers.
-      if (timer) clearTimeout(timer);
-
-      // Detach events.
-      for (const [node, eventType, eventHandler] of events) {
-        node.removeEventListener(eventType, eventHandler);
-      }
+      manager.destroy();
     };
   }, [anchorElement, delay]);
   return {
@@ -15013,35 +15160,6 @@ function useTooltipOpen(delay, anchorElement) {
 }
 
 /* eslint-disable react-hooks/rules-of-hooks */
-/**
- * Component display name.
- */
-const COMPONENT_NAME$2 = 'Tooltip';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$2 = 'lumx-tooltip';
-const {
-  block: block$2,
-  element: element$2
-} = classNames.bem(CLASSNAME$2);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$2 = {
-  placement: Placement.BOTTOM,
-  closeMode: 'unmount',
-  ariaLinkMode: 'aria-describedby',
-  zIndex: TOOLTIP_ZINDEX
-};
-
-/**
- * Arrow size (in pixel).
- */
-const ARROW_SIZE = 8;
-
 /**
  * Tooltip component.
  *
@@ -15076,12 +15194,16 @@ const Tooltip = forwardRef((props, ref) => {
     placement: resolvedPlacement
   } = useFloating({
     placement: placement,
-    whileElementsMounted: autoUpdate,
-    middleware: [offset(ARROW_SIZE)],
-    elements: {
-      reference: anchorElement,
-      floating: popperElement
-    }
+    // Disable autoUpdate and element refs in non-browser environments (e.g. jsdom) to avoid
+    // flushSync act() warnings from @floating-ui/react-dom (positioning is not meaningful in jsdom anyway).
+    ...(IS_BROWSER$1 ? {
+      whileElementsMounted: autoUpdate,
+      elements: {
+        reference: anchorElement,
+        floating: popperElement
+      }
+    } : {}),
+    middleware: [offset(ARROW_SIZE)]
   });
   const position = resolvedPlacement ?? placement;
   const {
@@ -15099,33 +15221,21 @@ const Tooltip = forwardRef((props, ref) => {
     label,
     ariaLinkMode: ariaLinkMode
   });
-  const labelLines = label ? label.split('\n') : [];
   const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(TooltipContextProvider, {
       children: wrappedChildren
     }), isMounted && /*#__PURE__*/jsx(Portal, {
-      children: /*#__PURE__*/jsxs("div", {
+      children: TooltipPopup({
         ref: tooltipRef,
         ...forwardedProps,
-        id: id,
-        role: "tooltip",
-        className: classNames.join(className, block$2({
-          [`position-${position}`]: Boolean(position)
-        }), isHidden && classNames.visuallyHidden()),
-        style: {
-          ...(isHidden ? undefined : floatingStyles),
-          zIndex
-        },
-        "data-popper-placement": position,
-        children: [/*#__PURE__*/jsx("div", {
-          className: element$2('arrow')
-        }), /*#__PURE__*/jsx("div", {
-          className: element$2('inner'),
-          children: labelLines.map(line => /*#__PURE__*/jsx("p", {
-            children: line
-          }, line))
-        })]
+        id,
+        label: label,
+        position: position,
+        isHidden,
+        style: isHidden ? undefined : floatingStyles,
+        zIndex,
+        className
       })
     })]
   });