@lumx/react 4.4.1-alpha.0 → 4.4.1-alpha.2

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, 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';
@@ -553,149 +553,6 @@ AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
 AutocompleteMultiple.className = CLASSNAME$1h;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
 
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1h = 'Avatar';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1g = 'lumx-avatar';
-const {
-  block: block$13,
-  element: element$N
-} = classNames.bem(CLASSNAME$1g);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$17 = {
-  size: Size$1.m
-};
-
-/**
- * Avatar component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Avatar = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
-  const {
-    actions,
-    alt,
-    badge,
-    className,
-    image,
-    linkProps,
-    linkAs,
-    onClick,
-    onKeyPress,
-    size = DEFAULT_PROPS$17.size,
-    theme = defaultTheme,
-    thumbnailProps,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$13({
-      [`size-${size}`]: Boolean(size),
-      [`theme-${theme}`]: Boolean(theme)
-    })),
-    children: [/*#__PURE__*/jsx(Thumbnail, {
-      linkProps: linkProps,
-      linkAs: linkAs,
-      className: element$N('thumbnail'),
-      onClick: onClick,
-      onKeyPress: onKeyPress,
-      ...thumbnailProps,
-      aspectRatio: AspectRatio$1.square,
-      size: size,
-      image: image,
-      alt: alt,
-      theme: theme
-    }), actions && /*#__PURE__*/jsx("div", {
-      className: element$N('actions'),
-      children: actions
-    }), badge && /*#__PURE__*/jsx("div", {
-      className: element$N('badge'),
-      children: badge
-    })]
-  });
-});
-Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$17;
-
-/**
- * Alignments.
- */
-const Theme = {
-  light: 'light',
-  dark: 'dark'
-};
-const Size = {
-  xxs: 'xxs',
-  xs: 'xs',
-  s: 's',
-  m: 'm',
-  xl: 'xl',
-  xxl: 'xxl'};
-const Orientation = {
-  horizontal: 'horizontal'};
-const Emphasis = {
-  low: 'low',
-  high: 'high'
-};
-/**
- * List of typographies that can't be customized.
- */
-const TypographyInterface = {
-  overline: 'overline',
-  caption: 'caption',
-  body1: 'body1',
-  body2: 'body2',
-  subtitle1: 'subtitle1',
-  subtitle2: 'subtitle2',
-  title: 'title',
-  headline: 'headline',
-  display1: 'display1'
-};
-/**
- * List of all typographies.
- */
-const Typography = {
-  ...TypographyInterface};
-/**
- * All available aspect ratios.
- */
-const AspectRatio = {
-  /** Intrinsic content ratio. */
-  original: 'original'};
-/**
- * Semantic info about the purpose of the component
- */
-const Kind = {
-  info: 'info',
-  success: 'success',
-  warning: 'warning',
-  error: 'error'
-};
-/**
- * See SCSS variable $lumx-color-palette
- */
-const ColorPalette = {
-  primary: 'primary',
-  blue: 'blue',
-  dark: 'dark',
-  green: 'green',
-  yellow: 'yellow',
-  red: 'red',
-  light: 'light'};
-
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -819,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 }
@@ -856,7 +719,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$13(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -891,11 +754,11 @@ function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$N(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$13(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$13(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -904,15 +767,15 @@ function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$12(baseName, modifiersOrAdditionalClasses);
+      return block$13(baseName, modifiersOrAdditionalClasses);
     }
-    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$13(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$M(baseName, elem, modifiersOrAdditionalClasses);
+      return element$N(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$N(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -921,6 +784,207 @@ 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.
+ */
+const Theme = {
+  light: 'light',
+  dark: 'dark'
+};
+const Size = {
+  xxs: 'xxs',
+  xs: 'xs',
+  s: 's',
+  m: 'm',
+  xl: 'xl',
+  xxl: 'xxl'};
+const Orientation = {
+  horizontal: 'horizontal'};
+const Emphasis = {
+  low: 'low',
+  high: 'high'
+};
+/**
+ * List of typographies that can't be customized.
+ */
+const TypographyInterface = {
+  overline: 'overline',
+  caption: 'caption',
+  body1: 'body1',
+  body2: 'body2',
+  subtitle1: 'subtitle1',
+  subtitle2: 'subtitle2',
+  title: 'title',
+  headline: 'headline',
+  display1: 'display1'
+};
+/**
+ * List of all typographies.
+ */
+const Typography = {
+  ...TypographyInterface};
+/**
+ * All available aspect ratios.
+ */
+const AspectRatio = {
+  /** Intrinsic content ratio. */
+  original: 'original'};
+/**
+ * Semantic info about the purpose of the component
+ */
+const Kind = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'error'
+};
+/**
+ * See SCSS variable $lumx-color-palette
+ */
+const ColorPalette = {
+  primary: 'primary',
+  blue: 'blue',
+  dark: 'dark',
+  green: 'green',
+  yellow: 'yellow',
+  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.
+ */
+const COMPONENT_NAME$1h = 'Avatar';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$1g = 'lumx-avatar';
+const {
+  block: block$12,
+  element: element$M
+} = bem(CLASSNAME$1g);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$17 = {
+  size: Size.m
+};
+
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Avatar$1 = props => {
+  const {
+    actions,
+    badge,
+    className,
+    image,
+    size = DEFAULT_PROPS$17.size,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$12({
+      [`size-${size}`]: Boolean(size),
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    children: [image, actions && /*#__PURE__*/jsx("div", {
+      className: element$M('actions'),
+      children: actions
+    }), badge && /*#__PURE__*/jsx("div", {
+      className: element$M('badge'),
+      children: badge
+    })]
+  });
+};
+
+/**
+ * Avatar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Avatar = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    actions,
+    alt,
+    badge,
+    className,
+    image,
+    linkProps,
+    linkAs,
+    onClick,
+    onKeyPress,
+    size = DEFAULT_PROPS$17.size,
+    theme = defaultTheme,
+    thumbnailProps,
+    ...forwardedProps
+  } = props;
+  return Avatar$1({
+    ...forwardedProps,
+    className,
+    theme,
+    ref,
+    actions,
+    badge,
+    size,
+    image: /*#__PURE__*/jsx(Thumbnail, {
+      linkProps: linkProps,
+      linkAs: linkAs,
+      className: element$M('thumbnail'),
+      onClick: onClick,
+      onKeyPress: onKeyPress,
+      ...thumbnailProps,
+      aspectRatio: AspectRatio$1.square,
+      size: size,
+      image: image,
+      alt: alt,
+      theme: theme
+    })
+  });
+});
+Avatar.displayName = COMPONENT_NAME$1h;
+Avatar.className = CLASSNAME$1g;
+Avatar.defaultProps = DEFAULT_PROPS$17;
+
 /**
  * Component display name.
  */
@@ -2955,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).
@@ -6352,7 +6401,7 @@ function usePopoverStyle({
     }
 
     // Arrow middleware
-    if (hasArrow) {
+    if (hasArrow && arrowElement) {
       mw.push(arrow({
         element: arrowElement,
         padding: ARROW_SIZE$1 / 2
@@ -6395,10 +6444,6 @@ function usePopoverStyle({
       zIndex
     };
   }, [style, floatingStyles, zIndex]);
-
-  // Stable setter wrapping useState setter (already stable but typed for consistency)
-  const setPopperElementCallback = useCallback(el => setPopperElement(el), []);
-  const setArrowElementCallback = useCallback(el => setArrowElement(el), []);
   return {
     styles: {
       arrow: arrowStyles,
@@ -6406,8 +6451,8 @@ function usePopoverStyle({
     },
     isPositioned,
     position: position,
-    setArrowElement: setArrowElementCallback,
-    setPopperElement: setPopperElementCallback,
+    setArrowElement,
+    setPopperElement,
     popperElement
   };
 }
@@ -6508,7 +6553,6 @@ const _InnerPopover = forwardRef((props, ref) => {
         [`theme-${theme}`]: Boolean(theme),
         [`elevation-${adjustedElevation}`]: Boolean(adjustedElevation),
         [`position-${position}`]: Boolean(position)
-        //'is-initializing': !isPositioned,
       })),
       style: styles.popover,
       "data-popper-placement": position,
@@ -6779,7 +6823,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);
     }
@@ -6791,7 +6835,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
     const {
       current: wrapper
     } = wrapperRef;
-    if (!IS_BROWSER || !wrapper) {
+    if (!IS_BROWSER$1 || !wrapper) {
       return undefined;
     }
     const onTransitionEnd = () => {
@@ -14801,10 +14845,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.
@@ -14852,9 +14976,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 {
@@ -14865,6 +14986,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.
  *
@@ -14875,110 +15130,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 {
@@ -14988,35 +15156,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.
  *
@@ -15048,9 +15187,7 @@ const Tooltip = forwardRef((props, ref) => {
   const [anchorElement, setAnchorElement] = useState(null);
   const {
     floatingStyles,
-    placement: resolvedPlacement,
-    isPositioned,
-    update
+    placement: resolvedPlacement
   } = useFloating({
     placement: placement,
     whileElementsMounted: autoUpdate,
@@ -15076,40 +15213,21 @@ const Tooltip = forwardRef((props, ref) => {
     label,
     ariaLinkMode: ariaLinkMode
   });
-
-  // Update on open
-  // React.useEffect(() => {
-  //    if (isOpen || popperElement) update?.();
-  // }, [isOpen, update, popperElement]);
-
-  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)
-          //'is-initializing': !isPositioned,
-        }), 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
       })
     })]
   });