@lumx/react 3.20.1-alpha.10 → 3.20.1-alpha.11

package/_internal/d6b3a3c0.js

@@ -0,0 +1,317 @@
+import { _ as _extends, a as TOOLTIP_LONG_PRESS_DELAY, T as TOOLTIP_HOVER_DELAY, m as getRootClassName, n as forwardRef, l as classNames } from './d3321a86.js';
+import React__default, { useMemo, cloneElement, useState, useRef, useEffect } from 'react';
+import { I as IS_BROWSER, D as DOCUMENT, V as VISUALLY_HIDDEN } from './b3bfbe72.js';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { m as mergeRefs, u as useMergeRefs } from './f0d7d6ea.js';
+import { T as TooltipContextProvider } from './21aeb1c7.js';
+import { u as useId } from './3a1facc0.js';
+import { a as POPOVER_ZINDEX, P as Placement, u as usePopper } from './407735b4.js';
+import { u as useCallbackOnEscape } from './d66c4375.js';
+import { P as Portal } from './c43d098b.js';
+
+/**
+ * Make sure tooltip appear above popovers.
+ */
+const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;
+
+/**
+ * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
+ * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
+ * will be wrapped in a <span>.
+ */
+const useInjectTooltipRef = options => {
+  const {
+    children,
+    setAnchorElement,
+    isMounted,
+    id,
+    label,
+    ariaLinkMode
+  } = options;
+  // Only add link when mounted
+  const linkId = isMounted ? id : undefined;
+  return useMemo(() => {
+    if (!label) return children;
+
+    // Non-disabled element
+    if (/*#__PURE__*/React__default.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
+      const ref = mergeRefs(children.ref, setAnchorElement);
+      const props = {
+        ...children.props,
+        ref
+      };
+
+      // Do not add label/description if the tooltip label is already in aria-label
+      if (linkId && label !== props['aria-label']) {
+        if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';else props[ariaLinkMode] = '';
+        props[ariaLinkMode] += linkId;
+      }
+      return /*#__PURE__*/cloneElement(children, props);
+    }
+    const aria = linkId ? {
+      [ariaLinkMode]: linkId
+    } : undefined;
+    return /*#__PURE__*/React__default.createElement("div", _extends({
+      className: "lumx-tooltip-anchor-wrapper",
+      ref: setAnchorElement
+    }, aria), children);
+  }, [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 {
+    return element?.matches?.(':focus-visible, [data-focus-visible-added]');
+  } catch (_ignored) {
+    // Can fail on non browser env
+    return true;
+  }
+};
+
+/**
+ * Hook controlling tooltip visibility using mouse hover the anchor and delay.
+ *
+ * @param  delay         Delay in millisecond to display the tooltip.
+ * @param  anchorElement Tooltip anchor element.
+ * @return whether or not to show the tooltip.
+ */
+function useTooltipOpen(delay, anchorElement) {
+  const [isOpen, setIsOpen] = useState(false);
+  const onPopperMount = useRef(null);
+
+  // Global close on escape
+  const [closeCallback, setCloseCallback] = useState(undefined);
+  useCallbackOnEscape(isOpen ? closeCallback : 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);
+    }
+    return () => {
+      // Clear pending timers.
+      if (timer) clearTimeout(timer);
+
+      // Detach events.
+      for (const [node, eventType, eventHandler] of events) {
+        node.removeEventListener(eventType, eventHandler);
+      }
+    };
+  }, [anchorElement, delay]);
+  return {
+    isOpen,
+    onPopperMount: onPopperMount.current
+  };
+}
+
+/** Position of the tooltip relative to the anchor element. */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Tooltip';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  placement: Placement.BOTTOM,
+  closeMode: 'unmount',
+  ariaLinkMode: 'aria-describedby',
+  zIndex: TOOLTIP_ZINDEX
+};
+
+/**
+ * Arrow size (in pixel).
+ */
+const ARROW_SIZE = 8;
+
+/**
+ * Tooltip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Tooltip = forwardRef((props, ref) => {
+  const {
+    label,
+    children,
+    className,
+    delay,
+    placement = DEFAULT_PROPS.placement,
+    forceOpen,
+    closeMode = DEFAULT_PROPS.closeMode,
+    ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,
+    zIndex = DEFAULT_PROPS.zIndex,
+    ...forwardedProps
+  } = props;
+  // Disable in SSR.
+  if (!DOCUMENT) {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  }
+  const id = useId();
+  const [popperElement, setPopperElement] = useState(null);
+  const [anchorElement, setAnchorElement] = useState(null);
+  const {
+    styles,
+    attributes,
+    update
+  } = usePopper(anchorElement, popperElement, {
+    placement,
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [0, ARROW_SIZE]
+      }
+    }]
+  });
+  const position = attributes?.popper?.['data-popper-placement'] ?? placement;
+  const {
+    isOpen: isActivated,
+    onPopperMount
+  } = useTooltipOpen(delay, anchorElement);
+  const isOpen = (isActivated || forceOpen) && !!label;
+  const isMounted = !!label && (isOpen || closeMode === 'hide');
+  const isHidden = !isOpen && closeMode === 'hide';
+  const wrappedChildren = useInjectTooltipRef({
+    children,
+    setAnchorElement,
+    isMounted,
+    id,
+    label,
+    ariaLinkMode: ariaLinkMode
+  });
+
+  // Update on open
+  React__default.useEffect(() => {
+    if (isOpen || popperElement) update?.();
+  }, [isOpen, update, popperElement]);
+  const labelLines = label ? label.split('\n') : [];
+  const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TooltipContextProvider, null, wrappedChildren), isMounted && /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: tooltipRef
+  }, forwardedProps, {
+    id: id,
+    role: "tooltip",
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      position,
+      isInitializing: !styles.popper?.transform
+    }), isHidden && VISUALLY_HIDDEN),
+    style: {
+      ...(isHidden ? undefined : styles.popper),
+      zIndex
+    }
+  }, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__arrow`
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__inner`
+  }, labelLines.map(line => /*#__PURE__*/React__default.createElement("p", {
+    key: line
+  }, line))))));
+});
+Tooltip.displayName = COMPONENT_NAME;
+Tooltip.className = CLASSNAME;
+Tooltip.defaultProps = DEFAULT_PROPS;
+
+export { Tooltip };
+//# sourceMappingURL=d6b3a3c0.js.map

package/_internal/d6b3a3c0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"d6b3a3c0.js","sources":["../../src/components/tooltip/constants.ts","../../src/components/tooltip/useInjectTooltipRef.tsx","../../src/utils/browser/isHoverNotSupported.ts","../../src/utils/browser/isFocusVisible.ts","../../src/components/tooltip/useTooltipOpen.tsx","../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import { POPOVER_ZINDEX } from '../popover/constants';\n\nexport const ARIA_LINK_MODES = ['aria-describedby', 'aria-labelledby'] as const;\n\n/**\n * Make sure tooltip appear above popovers.\n */\nexport const TOOLTIP_ZINDEX = POPOVER_ZINDEX + 1;\n","import React, { cloneElement, ReactNode, useMemo } from 'react';\n\nimport { mergeRefs } from '@lumx/react/utils/react/mergeRefs';\n\ninterface Options {\n    /** Original tooltip anchor */\n    children: ReactNode;\n    /** Set tooltip anchor element */\n    setAnchorElement: (e: HTMLDivElement) => void;\n    /** Whether the tooltip is open or not */\n    isMounted: boolean | undefined;\n    /** Tooltip id */\n    id: string;\n    /** Tooltip label*/\n    label?: string | null | false;\n    /** Choose how the tooltip text should link to the anchor */\n    ariaLinkMode: 'aria-describedby' | 'aria-labelledby';\n}\n\n/**\n * Add ref and ARIA attribute(s) in tooltip children or wrapped children.\n * Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)\n * will be wrapped in a <span>.\n */\nexport const useInjectTooltipRef = (options: Options): ReactNode => {\n    const { children, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;\n    // Only add link when mounted\n    const linkId = isMounted ? id : undefined;\n\n    return useMemo(() => {\n        if (!label) return children;\n\n        // Non-disabled element\n        if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {\n            const ref = mergeRefs((children as any).ref, setAnchorElement);\n            const props = { ...children.props, ref };\n\n            // Do not add label/description if the tooltip label is already in aria-label\n            if (linkId && label !== props['aria-label']) {\n                if (props[ariaLinkMode]) props[ariaLinkMode] += ' ';\n                else props[ariaLinkMode] = '';\n                props[ariaLinkMode] += linkId;\n            }\n\n            return cloneElement(children, props);\n        }\n\n        const aria = linkId ? { [ariaLinkMode]: linkId } : undefined;\n        return (\n            <div className=\"lumx-tooltip-anchor-wrapper\" ref={setAnchorElement} {...aria}>\n                {children}\n            </div>\n        );\n    }, [label, children, setAnchorElement, linkId, ariaLinkMode]);\n};\n","/** Return true if the browser does not support pointer hover */\nexport const isHoverNotSupported = (): boolean => !!window.matchMedia?.('(hover: none)').matches;\n","/** Check if the focus is visible on the given element */\nexport const isFocusVisible = (element?: HTMLElement) => {\n    try {\n        return element?.matches?.(':focus-visible, [data-focus-visible-added]');\n    } catch (_ignored) {\n        // Can fail on non browser env\n        return true;\n    }\n};\n","import { MutableRefObject, useEffect, useRef, useState } from 'react';\nimport { isHoverNotSupported } from '@lumx/react/utils/browser/isHoverNotSupported';\nimport { IS_BROWSER, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from '@lumx/react/constants';\nimport { useCallbackOnEscape } from '@lumx/react/hooks/useCallbackOnEscape';\nimport { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';\n\n/**\n * Hook controlling tooltip visibility using mouse hover the anchor and delay.\n *\n * @param  delay         Delay in millisecond to display the tooltip.\n * @param  anchorElement Tooltip anchor element.\n * @return whether or not to show the tooltip.\n */\nexport function useTooltipOpen(delay: number | undefined, anchorElement: HTMLElement | null) {\n    const [isOpen, setIsOpen] = useState(false);\n\n    const onPopperMount = useRef<any>(null) as MutableRefObject<(elem: HTMLElement | null) => void>;\n\n    // Global close on escape\n    const [closeCallback, setCloseCallback] = useState<undefined | (() => void)>(undefined);\n    useCallbackOnEscape(isOpen ? closeCallback : undefined);\n\n    useEffect(() => {\n        if (!anchorElement) {\n            return undefined;\n        }\n        let timer: number | undefined;\n        let openStartTime: number | undefined;\n        let shouldOpen: boolean | undefined;\n\n        // Run timer to defer updating the isOpen state.\n        const deferUpdate = (duration: number) => {\n            if (timer) clearTimeout(timer);\n            const update = () => {\n                setIsOpen(!!shouldOpen);\n            };\n            // Skip timeout in fake browsers\n            if (!IS_BROWSER) update();\n            else timer = setTimeout(update, duration) as any;\n        };\n\n        const hoverNotSupported = isHoverNotSupported();\n        const hasTouch = 'ontouchstart' in window;\n\n        // Adapt open/close delay\n        const openDelay = delay || (hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.open : TOOLTIP_HOVER_DELAY.open);\n        const closeDelay = hoverNotSupported ? TOOLTIP_LONG_PRESS_DELAY.close : TOOLTIP_HOVER_DELAY.close;\n\n        // Open (or/and cancel closing) of tooltip.\n        const open = () => {\n            if (shouldOpen && !timer) return;\n            shouldOpen = true;\n            openStartTime = Date.now();\n            deferUpdate(openDelay);\n        };\n\n        // Close or cancel opening of tooltip\n        const getClose = (overrideDelay = closeDelay) => {\n            if (!shouldOpen && !timer) return;\n            shouldOpen = false;\n            deferUpdate(overrideDelay);\n        };\n        const close = () => getClose(closeDelay);\n        const closeImmediately = () => getClose(0);\n        setCloseCallback(() => closeImmediately);\n\n        // Adapt event to browsers with or without `hover` support.\n        const events: Array<[Node, Event['type'], any]> = [];\n        if (hoverNotSupported) {\n            /**\n             * Handle touchend event\n             * If end comes before the open delay => cancel tooltip (close immediate).\n             * Else if end comes after the open delay => tooltip takes priority, the anchor's default touch end event is prevented.\n             */\n            const longPressEnd = (evt: Event) => {\n                if (!openStartTime) return;\n                if (Date.now() - openStartTime >= openDelay) {\n                    // Tooltip take priority, event prevented.\n                    evt.stopPropagation();\n                    evt.preventDefault();\n                    anchorElement.focus();\n                    // Close with delay.\n                    close();\n                } else {\n                    // Close immediately.\n                    closeImmediately();\n                }\n            };\n\n            events.push(\n                [anchorElement, hasTouch ? 'touchstart' : 'mousedown', open],\n                [anchorElement, hasTouch ? 'touchend' : 'mouseup', longPressEnd],\n            );\n        } else {\n            events.push(\n                [anchorElement, 'mouseenter', open],\n                [anchorElement, 'mouseleave', close],\n                [anchorElement, 'mouseup', closeImmediately],\n            );\n\n            onPopperMount.current = (popperElement: HTMLElement | null) => {\n                if (!popperElement) return;\n                // Popper element hover\n                popperElement.addEventListener('mouseenter', open);\n                popperElement.addEventListener('mouseleave', close);\n                // Add to event list to remove on unmount\n                events.push([popperElement, 'mouseenter', open], [popperElement, 'mouseleave', close]);\n            };\n        }\n\n        // Events always applied no matter the browser:.\n        events.push(\n            // Open on focus (only if focus is visible).\n            [\n                anchorElement,\n                'focusin',\n                (e: Event) => {\n                    // Skip if focus is not visible\n                    if (!isFocusVisible(e.target as HTMLElement)) return;\n                    open();\n                },\n            ],\n            // Close on lost focus.\n            [anchorElement, 'focusout', closeImmediately],\n        );\n\n        // Attach events\n        for (const [node, eventType, eventHandler] of events) {\n            node.addEventListener(eventType, eventHandler);\n        }\n        return () => {\n            // Clear pending timers.\n            if (timer) clearTimeout(timer);\n\n            // Detach events.\n            for (const [node, eventType, eventHandler] of events) {\n                node.removeEventListener(eventType, eventHandler);\n            }\n        };\n    }, [anchorElement, delay]);\n\n    return { isOpen, onPopperMount: onPopperMount.current };\n}\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport React, { ReactNode, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { DOCUMENT, VISUALLY_HIDDEN } from '@lumx/react/constants';\nimport { GenericProps, HasCloseMode } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';\nimport { Placement } from '@lumx/react/components/popover';\nimport { TooltipContextProvider } from '@lumx/react/components/tooltip/context';\nimport { useId } from '@lumx/react/hooks/useId';\nimport { usePopper } from '@lumx/react/hooks/usePopper';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { ARIA_LINK_MODES, TOOLTIP_ZINDEX } from '@lumx/react/components/tooltip/constants';\nimport { Portal } from '@lumx/react/utils';\nimport { useInjectTooltipRef } from './useInjectTooltipRef';\nimport { useTooltipOpen } from './useTooltipOpen';\n\n/** Position of the tooltip relative to the anchor element. */\nexport type TooltipPlacement = Extract<Placement, 'top' | 'right' | 'bottom' | 'left'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface TooltipProps extends GenericProps, HasCloseMode {\n    /** Anchor (element on which we activate the tooltip). */\n    children: ReactNode;\n    /** Delay (in ms) before closing the tooltip. */\n    delay?: number;\n    /** Whether the tooltip is displayed even without the mouse hovering the anchor. */\n    forceOpen?: boolean;\n    /** Label text. */\n    label?: string | null | false;\n    /** Placement of the tooltip relative to the anchor. */\n    placement?: TooltipPlacement;\n    /** Choose how the tooltip text should link to the anchor */\n    ariaLinkMode?: (typeof ARIA_LINK_MODES)[number];\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Tooltip';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<TooltipProps> = {\n    placement: Placement.BOTTOM,\n    closeMode: 'unmount',\n    ariaLinkMode: 'aria-describedby',\n    zIndex: TOOLTIP_ZINDEX,\n};\n\n/**\n * Arrow size (in pixel).\n */\nconst ARROW_SIZE = 8;\n\n/**\n * Tooltip component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Tooltip = forwardRef<TooltipProps, HTMLDivElement>((props, ref) => {\n    const {\n        label,\n        children,\n        className,\n        delay,\n        placement = DEFAULT_PROPS.placement,\n        forceOpen,\n        closeMode = DEFAULT_PROPS.closeMode,\n        ariaLinkMode = DEFAULT_PROPS.ariaLinkMode,\n        zIndex = DEFAULT_PROPS.zIndex,\n        ...forwardedProps\n    } = props;\n    // Disable in SSR.\n    if (!DOCUMENT) {\n        return <>{children}</>;\n    }\n\n    const id = useId();\n\n    const [popperElement, setPopperElement] = useState<null | HTMLElement>(null);\n    const [anchorElement, setAnchorElement] = useState<null | HTMLElement>(null);\n    const { styles, attributes, update } = usePopper(anchorElement, popperElement, {\n        placement,\n        modifiers: [\n            {\n                name: 'offset',\n                options: { offset: [0, ARROW_SIZE] },\n            },\n        ],\n    });\n\n    const position = attributes?.popper?.['data-popper-placement'] ?? placement;\n    const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);\n    const isOpen = (isActivated || forceOpen) && !!label;\n    const isMounted = !!label && (isOpen || closeMode === 'hide');\n    const isHidden = !isOpen && closeMode === 'hide';\n    const wrappedChildren = useInjectTooltipRef({\n        children,\n        setAnchorElement,\n        isMounted,\n        id,\n        label,\n        ariaLinkMode: ariaLinkMode as any,\n    });\n\n    // Update on open\n    React.useEffect(() => {\n        if (isOpen || popperElement) update?.();\n    }, [isOpen, update, popperElement]);\n\n    const labelLines = label ? label.split('\\n') : [];\n\n    const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);\n\n    return (\n        <>\n            <TooltipContextProvider>{wrappedChildren}</TooltipContextProvider>\n            {isMounted && (\n                <Portal>\n                    <div\n                        ref={tooltipRef}\n                        {...forwardedProps}\n                        id={id}\n                        role=\"tooltip\"\n                        className={classNames(\n                            className,\n                            handleBasicClasses({\n                                prefix: CLASSNAME,\n                                position,\n                                isInitializing: !styles.popper?.transform,\n                            }),\n                            isHidden && VISUALLY_HIDDEN,\n                        )}\n                        style={{ ...(isHidden ? undefined : styles.popper), zIndex }}\n                        {...attributes.popper}\n                    >\n                        <div className={`${CLASSNAME}__arrow`} />\n                        <div className={`${CLASSNAME}__inner`}>\n                            {labelLines.map((line) => (\n                                <p key={line}>{line}</p>\n                            ))}\n                        </div>\n                    </div>\n                </Portal>\n            )}\n        </>\n    );\n});\nTooltip.displayName = COMPONENT_NAME;\nTooltip.className = CLASSNAME;\nTooltip.defaultProps = DEFAULT_PROPS;\n"],"names":["TOOLTIP_ZINDEX","POPOVER_ZINDEX","useInjectTooltipRef","options","children","setAnchorElement","isMounted","id","label","ariaLinkMode","linkId","undefined","useMemo","React","isValidElement","props","disabled","isDisabled","ref","mergeRefs","cloneElement","aria","createElement","_extends","className","isHoverNotSupported","window","matchMedia","matches","isFocusVisible","element","_ignored","useTooltipOpen","delay","anchorElement","isOpen","setIsOpen","useState","onPopperMount","useRef","closeCallback","setCloseCallback","useCallbackOnEscape","useEffect","timer","openStartTime","shouldOpen","deferUpdate","duration","clearTimeout","update","IS_BROWSER","setTimeout","hoverNotSupported","hasTouch","openDelay","TOOLTIP_LONG_PRESS_DELAY","open","TOOLTIP_HOVER_DELAY","closeDelay","close","Date","now","getClose","overrideDelay","closeImmediately","events","longPressEnd","evt","stopPropagation","preventDefault","focus","push","current","popperElement","addEventListener","e","target","node","eventType","eventHandler","removeEventListener","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","placement","Placement","BOTTOM","closeMode","zIndex","ARROW_SIZE","Tooltip","forwardRef","forceOpen","forwardedProps","DOCUMENT","Fragment","useId","setPopperElement","styles","attributes","usePopper","modifiers","name","offset","position","popper","isActivated","isHidden","wrappedChildren","labelLines","split","tooltipRef","useMergeRefs","TooltipContextProvider","Portal","role","classNames","handleBasicClasses","prefix","isInitializing","transform","VISUALLY_HIDDEN","style","map","line","key","displayName","defaultProps"],"mappings":"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"}

package/_internal/dd0a245d.js

@@ -0,0 +1,142 @@
+import { m as getRootClassName, O as Orientation, c as Size, n as forwardRef, b as Theme, l as classNames, j as ColorPalette, _ as _extends } from './d3321a86.js';
+import React__default from 'react';
+import isEmpty from 'lodash/isEmpty';
+import set from 'lodash/set';
+import { h as handleBasicClasses } from './4ceaf17c.js';
+import { u as useTheme } from './3181f000.js';
+import { Avatar } from './bc4cb4c0.js';
+import { Link } from './1921f348.js';
+
+/**
+ * User block sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'UserBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  orientation: Orientation.horizontal,
+  size: Size.m
+};
+
+/**
+ * UserBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const UserBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    avatarProps,
+    className,
+    fields,
+    linkProps,
+    linkAs,
+    multipleActions,
+    name,
+    nameProps,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    orientation = DEFAULT_PROPS.orientation,
+    simpleAction,
+    size = DEFAULT_PROPS.size,
+    theme = defaultTheme,
+    children,
+    additionalFields,
+    after,
+    ...forwardedProps
+  } = props;
+  let componentSize = size;
+
+  // Special case - When using vertical orientation force the size to be Sizes.l.
+  if (orientation === Orientation.vertical) {
+    componentSize = Size.l;
+  }
+  const shouldDisplayActions = orientation === Orientation.vertical;
+  const isLink = Boolean(linkProps?.href || linkAs);
+  const isClickable = !!onClick || isLink;
+  const nameBlock = React__default.useMemo(() => {
+    if (isEmpty(name)) {
+      return null;
+    }
+    let NameComponent = 'span';
+    const nProps = {
+      ...nameProps,
+      className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className)
+    };
+    if (isClickable) {
+      NameComponent = Link;
+      Object.assign(nProps, {
+        ...linkProps,
+        onClick,
+        linkAs,
+        color: ColorPalette.dark
+      });
+    }
+    // Disable avatar focus since the name block is the same link / same button.
+    if (avatarProps) {
+      set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);
+    }
+    return /*#__PURE__*/React__default.createElement(NameComponent, nProps, name);
+  }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);
+  const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;
+  const fieldsBlock = fields && shouldDisplayFields && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__fields`
+  }, fields.map((field, idx) => /*#__PURE__*/React__default.createElement("span", {
+    key: idx,
+    className: `${CLASSNAME}__field`
+  }, field)));
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      orientation,
+      size: componentSize,
+      theme,
+      isClickable
+    })),
+    onMouseLeave: onMouseLeave,
+    onMouseEnter: onMouseEnter
+  }), avatarProps && /*#__PURE__*/React__default.createElement(Avatar, _extends({
+    linkAs: linkAs,
+    linkProps: linkProps,
+    alt: ""
+  }, avatarProps, {
+    className: classNames(`${CLASSNAME}__avatar`, avatarProps.className),
+    size: componentSize,
+    onClick: onClick,
+    theme: theme
+  })), (fields || name || children || additionalFields) && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__wrapper`
+  }, children || nameBlock, fieldsBlock, shouldDisplayFields ? additionalFields : null), shouldDisplayActions && simpleAction && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__action`
+  }, simpleAction), shouldDisplayActions && multipleActions && /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__actions`
+  }, multipleActions), after ? /*#__PURE__*/React__default.createElement("div", {
+    className: `${CLASSNAME}__after`
+  }, after) : null);
+});
+UserBlock.displayName = COMPONENT_NAME;
+UserBlock.className = CLASSNAME;
+UserBlock.defaultProps = DEFAULT_PROPS;
+
+export { UserBlock };
+//# sourceMappingURL=dd0a245d.js.map

package/_internal/dd0a245d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dd0a245d.js","sources":["../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport classNames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport set from 'lodash/set';\n\nimport { Avatar, ColorPalette, Link, Orientation, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 'xs' | 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps, HasTheme {\n    /** Props to pass to the avatar. */\n    avatarProps?: Omit<AvatarProps, 'alt'>;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** User name. */\n    name?: React.ReactNode;\n    /** Props to pass to the name block. */\n    nameProps?: GenericProps;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n    /** Display additional fields below the original name and fields */\n    additionalFields?: React.ReactNode;\n    /** Display an additional element after the entire component. (to the right if orientation is horizontal, at the bottom if orientation is vertical) */\n    after?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock = forwardRef<UserBlockProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        avatarProps,\n        className,\n        fields,\n        linkProps,\n        linkAs,\n        multipleActions,\n        name,\n        nameProps,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation = DEFAULT_PROPS.orientation,\n        simpleAction,\n        size = DEFAULT_PROPS.size,\n        theme = defaultTheme,\n        children,\n        additionalFields,\n        after,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        let NameComponent: any = 'span';\n        const nProps: any = {\n            ...nameProps,\n            className: classNames(`${CLASSNAME}__name`, linkProps?.className, nameProps?.className),\n        };\n        if (isClickable) {\n            NameComponent = Link;\n            Object.assign(nProps, {\n                ...linkProps,\n                onClick,\n                linkAs,\n                color: ColorPalette.dark,\n            });\n        }\n        // Disable avatar focus since the name block is the same link / same button.\n        if (avatarProps) {\n            set(avatarProps, ['thumbnailProps', 'tabIndex'], -1);\n        }\n        return <NameComponent {...nProps}>{name}</NameComponent>;\n    }, [avatarProps, isClickable, linkAs, linkProps, name, nameProps, onClick]);\n\n    const shouldDisplayFields = componentSize !== Size.s && componentSize !== Size.xs;\n\n    const fieldsBlock: ReactNode = fields && shouldDisplayFields && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((field: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {field}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    alt=\"\"\n                    {...(avatarProps as any)}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name || children || additionalFields) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {children || nameBlock}\n                    {fieldsBlock}\n                    {shouldDisplayFields ? additionalFields : null}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n            {after ? <div className={`${CLASSNAME}__after`}>{after}</div> : null}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","UserBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","avatarProps","className","fields","linkProps","linkAs","multipleActions","name","nameProps","onClick","onMouseEnter","onMouseLeave","simpleAction","theme","children","additionalFields","after","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","NameComponent","nProps","classNames","Link","Object","assign","color","ColorPalette","dark","set","createElement","shouldDisplayFields","s","xs","fieldsBlock","map","field","idx","key","_extends","handleBasicClasses","prefix","Avatar","alt","displayName","defaultProps"],"mappings":"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"}

package/_internal/de24f857.js

@@ -0,0 +1,4 @@
+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';
+
+export { mdiCheckCircle as m };
+//# sourceMappingURL=de24f857.js.map

package/_internal/de24f857.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"de24f857.js","sources":["../../../lumx-icons/dist/esm/check-circle.js"],"sourcesContent":["export 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';"],"names":["mdiCheckCircle"],"mappings":"AAAO,MAAMA,cAAc,GAAG;;;;"}

package/_internal/e2122a37.js

@@ -0,0 +1,3 @@
+export { P as Popover } from './72407886.js';
+export { P as Placement } from './407735b4.js';
+//# sourceMappingURL=e2122a37.js.map

package/_internal/e2122a37.js.map

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