@frontify/fondue 12.0.0-beta.287 → 12.0.0-beta.288

package/dist/components/Tooltip/Tooltip.es.js

@@ -81,10 +81,10 @@ const Le = {
   var $;
   const [L, ee] = b(
     null
-  ), [s, d] = b(!1), O = W(null), n = U || P, { linkProps: te } = pe({ isDisabled: n }, O), re = be(
+  ), [a, d] = b(!1), O = W(null), n = U || P, { linkProps: te } = pe({ isDisabled: n }, O), re = be(
     () => c || o || i || g,
     [c, o, i, g]
-  ), oe = Le[`${y}-${B}`], [p, se] = b(null), [v, ae] = b(null), [ne, le] = b(null), F = ve(), w = Se(L, p, {
+  ), oe = Le[`${y}-${B}`], [p, ae] = b(null), [v, se] = b(null), [ne, le] = b(null), F = ve(), w = Se(L, p, {
     placement: oe,
     strategy: "fixed",
     modifiers: [
@@ -96,7 +96,7 @@ const Le = {
       },
       {
         name: "eventListeners",
-        options: { scroll: s, resize: s }
+        options: { scroll: a, resize: a }
       },
       {
         name: "offset",
@@ -118,20 +118,20 @@ const Le = {
     }
     d(!0);
   }, [x]), we = E(
-    (a) => {
+    (s) => {
       var m;
-      const u = (m = a.composedPath) == null ? void 0 : m.call(a);
+      const u = (m = s.composedPath) == null ? void 0 : m.call(s);
       u && [L, v, p].some((D) => D && u.includes(D)) && I();
     },
     [I, p, v, L]
   ), me = E(
-    (a) => {
-      const { relatedTarget: u } = a;
+    (s) => {
+      const { relatedTarget: u } = s;
       (!u || ![p, v].some((m) => m == null ? void 0 : m.contains(u))) && d(!1);
     },
     [p, v]
   ), _ = n ? {} : {
-    onMouseOver: (a) => we(a.nativeEvent),
+    onMouseOver: (s) => we(s.nativeEvent),
     onMouseLeave: fe,
     onFocus: () => d(!0),
     onBlur: me
@@ -140,27 +140,27 @@ const Le = {
     l.current && clearTimeout(l.current), d(n ? !1 : M);
   }, [M, n]);
   const h = E(
-    (a) => {
-      s && a.key === "Escape" && d(!1);
+    (s) => {
+      a && s.key === "Escape" && d(!1);
     },
-    [s]
+    [a]
   );
   return Ee(() => {
-    typeof w.update == "function" && s && w.update();
-  }, [s]), Y(() => (s ? window.addEventListener("keydown", h) : window.removeEventListener("keydown", h), () => {
+    typeof w.update == "function" && a && w.update();
+  }, [a]), Y(() => (a ? window.addEventListener("keydown", h) : window.removeEventListener("keydown", h), () => {
     window.removeEventListener("keydown", h);
-  }), [h, s]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ..._, ref: ae }, R && C(R, {
+  }), [h, a]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { ..._, ref: se }, R && C(R, {
     ref: ee,
-    "aria-describedby": F,
+    "aria-labelledby": F,
     "aria-disabled": n
   })), /* @__PURE__ */ t.createElement(Te, { enablePortal: A }, /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: se,
+      ref: ae,
       "aria-hidden": n,
       className: f([
         "tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]",
-        !s && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
+        !a && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden"
       ]),
       "data-test-id": N,
       role: "tooltip",

package/dist/components/Tooltip/Tooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FocusEvent,\n    HTMLAttributes,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Portal } from '@components/Portal';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = {\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactNode;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n    enablePortal?: boolean;\n    'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n    small: 'tw-pt-2',\n    large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-2',\n    large: 'tw-pb-3',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n    }\n};\n\nconst TooltipWrapper = ({\n    enablePortal = false,\n    children,\n}: {\n    enablePortal?: boolean;\n    children?: ReactNode | ReactNode[];\n}) => {\n    if (enablePortal) {\n        return (<Portal>{children}</Portal>) as JSX.Element;\n    }\n\n    return children as JSX.Element;\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    enablePortal = false,\n    hidden = false,\n    'data-test-id': dataTestId = 'tooltip',\n}: TooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || buttons || heading || headingIcon,\n        [linkUrl, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'eventListeners',\n                options: { scroll: isOpen, resize: isOpen },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event: MouseEvent) => {\n            const hoveredElement = event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-describedby': id,\n                        'aria-disabled': shouldPreventTooltipOpening,\n                    })}\n            </div>\n            <TooltipWrapper enablePortal={enablePortal}>\n                <div\n                    ref={setTooltipContainerRef}\n                    aria-hidden={shouldPreventTooltipOpening}\n                    className={merge([\n                        'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n                        !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                    ])}\n                    data-test-id={dataTestId}\n                    role=\"tooltip\"\n                    id={id}\n                    style={popperInstance.styles.popper}\n                    {...popperInstance.attributes.popper}\n                    {...openingEvents}\n                >\n                    {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                    <div\n                        className={merge([\n                            'tw-px-3 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n                            hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n                            linkUrl ? paddingsBottom.large : paddingsBottom.small,\n                        ])}\n                    >\n                        {heading && (\n                            <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                                {headingIcon && (\n                                    <span className=\"tw-mr-1.5\">\n                                        {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                    </span>\n                                )}\n                                {heading}\n                            </h4>\n                        )}\n                        <div className=\"tw-flex\">\n                            {tooltipIcon && (\n                                <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                    {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                                </span>\n                            )}\n                            <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                        </div>\n                        {linkUrl && (\n                            <a\n                                {...linkProps}\n                                data-test-id={`${dataTestId}-link`}\n                                ref={linkRef}\n                                href={linkUrl}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className={merge([\n                                    'tw-text-xs tw-text-black-40 tw-underline tw-mt-1',\n                                    FOCUS_VISIBLE_STYLE,\n                                ])}\n                            >\n                                {linkLabel ?? 'Click here to learn more.'}\n                            </a>\n                        )}\n                        {buttons && (\n                            <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                                {buttons.length > 0 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                )}\n                                {buttons.length === 2 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\n                                )}\n                            </div>\n                        )}\n                    </div>\n                    {/**\n                     * This container is needed for the arrow element to not be styled by popperJS\n                     * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                     * */}\n                    <div aria-hidden=\"true\">\n                        <div\n                            data-test-id=\"popover-arrow\"\n                            data-popper-arrow={withArrow}\n                            ref={setArrowElement}\n                            style={popperInstance.styles.arrow}\n                            className={merge([\n                                withArrow &&\n                                    'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                                withArrow && arrowStyling,\n                            ])}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </TooltipWrapper>\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","React","Portal","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { useLink } from '@react-aria/link';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, {\n    FocusEvent,\n    HTMLAttributes,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { Placement } from '@popperjs/core';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { Portal } from '@components/Portal';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = {\n    triggerElement?: ReactElement;\n    content: ReactNode;\n    tooltipIcon?: ReactElement;\n    heading?: ReactNode;\n    headingIcon?: ReactElement;\n    linkUrl?: string;\n    linkLabel?: string;\n    brightHeader?: BrightHeaderStyle;\n    buttons?: [TooltipButton, TooltipButton] | [TooltipButton];\n    children?: ReactNode;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */\n    hidden?: boolean;\n    enablePortal?: boolean;\n    'data-test-id'?: string;\n};\n\nconst paddingsTop = {\n    small: 'tw-pt-2',\n    large: 'tw-pt-3',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-2',\n    large: 'tw-pb-3',\n};\n\nexport enum TooltipPosition {\n    Top = 'Top',\n    Right = 'Right',\n    Bottom = 'Bottom',\n    Left = 'Left',\n}\n\nexport enum TooltipAlignment {\n    Start = 'Start',\n    Middle = 'Middle',\n    End = 'End',\n}\n\nconst placementMap: Record<`${TooltipPosition}-${TooltipAlignment}`, Placement> = {\n    ['Top-Start']: 'top-start',\n    ['Top-End']: 'top-end',\n    ['Bottom-Start']: 'bottom-start',\n    ['Bottom-End']: 'bottom-end',\n    ['Left-Start']: 'left-start',\n    ['Left-End']: 'left-end',\n    ['Right-Start']: 'right-start',\n    ['Right-End']: 'right-end',\n    ['Top-Middle']: 'top',\n    ['Right-Middle']: 'right',\n    ['Bottom-Middle']: 'bottom',\n    ['Left-Middle']: 'left',\n};\n\nconst getArrowClasses = (currentPlacement: string, brightHeader: BrightHeaderStyle | undefined, alignment: string) => {\n    switch (true) {\n        case currentPlacement.toString().includes(TooltipPosition.Top.toLowerCase()):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-dark before:tw-bg-base';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Bottom.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]',\n                brightHeader ? brightHeaderArrowBackgroundColors[brightHeader] : 'before:tw-dark before:tw-bg-base',\n            ]);\n        case currentPlacement.toString().includes(TooltipPosition.Left.toLowerCase()):\n            return merge([\n                'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]',\n                brightHeader &&\n                alignment === TooltipAlignment.Start &&\n                currentPlacement.toString().includes(TooltipAlignment.Start.toLowerCase())\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-dark before:tw-bg-base',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-dark before:tw-bg-base';\n    }\n};\n\nconst TooltipWrapper = ({\n    enablePortal = false,\n    children,\n}: {\n    enablePortal?: boolean;\n    children?: ReactNode | ReactNode[];\n}) => {\n    if (enablePortal) {\n        return (<Portal>{children}</Portal>) as JSX.Element;\n    }\n\n    return children as JSX.Element;\n};\n\nexport const Tooltip = ({\n    content,\n    tooltipIcon,\n    heading,\n    headingIcon,\n    linkUrl,\n    linkLabel,\n    brightHeader,\n    buttons,\n    children,\n    position = TooltipPosition.Bottom,\n    alignment = TooltipAlignment.Middle,\n    withArrow,\n    flip = true,\n    triggerElement,\n    hoverDelay = 200,\n    enterDelay = 0,\n    open = false,\n    disabled = false,\n    enablePortal = false,\n    hidden = false,\n    'data-test-id': dataTestId = 'tooltip',\n}: TooltipProps) => {\n    const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(\n        null,\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n\n    const shouldPreventTooltipOpening = hidden || disabled;\n    const { linkProps } = useLink({ isDisabled: shouldPreventTooltipOpening }, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || buttons || heading || headingIcon,\n        [linkUrl, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const [tooltipContainerRef, setTooltipContainerRef] = useState<HTMLDivElement | null>(null);\n    const [triggerElementContainerRef, setTriggerElementContainerRef] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const id = useMemoizedId();\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerElementRef, tooltipContainerRef, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'eventListeners',\n                options: { scroll: isOpen, resize: isOpen },\n            },\n            {\n                name: 'offset',\n                options: {\n                    offset: [0, tooltipOffset],\n                },\n            },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n    });\n\n    const currentPlacement = popperInstance.state?.placement ?? position;\n    const arrowStyling = getArrowClasses(currentPlacement, brightHeader, alignment);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setIsOpen(true), enterDelay);\n            return;\n        }\n\n        setIsOpen(true);\n    }, [enterDelay]);\n\n    const checkIfHovered = useCallback(\n        (event: MouseEvent) => {\n            const hoveredElement = event.composedPath?.();\n            const hoverSources = [triggerElementRef, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => el && hoveredElement.includes(el))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [handleShowTooltipOnHover, tooltipContainerRef, triggerElementContainerRef, triggerElementRef],\n    );\n\n    const handleCloseIfFocusedOutside = useCallback(\n        (event: FocusEvent<HTMLElement>) => {\n            const { relatedTarget } = event;\n            const elements = [tooltipContainerRef, triggerElementContainerRef];\n\n            if (!relatedTarget || !elements.some((element) => element?.contains(relatedTarget))) {\n                setIsOpen(false);\n            }\n        },\n        [tooltipContainerRef, triggerElementContainerRef],\n    );\n\n    const openingEvents: HTMLAttributes<HTMLElement> = shouldPreventTooltipOpening\n        ? {}\n        : {\n              onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n              onMouseLeave: handleHideTooltipOnHover,\n              onFocus: () => setIsOpen(true),\n              onBlur: handleCloseIfFocusedOutside,\n          };\n\n    useEffect(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(shouldPreventTooltipOpening ? false : open);\n    }, [open, shouldPreventTooltipOpening]);\n\n    const listenForEsc = useCallback(\n        (event: KeyboardEvent) => {\n            if (isOpen && event.key === 'Escape') {\n                setIsOpen(false);\n            }\n        },\n        [isOpen],\n    );\n\n    useLayoutEffect(() => {\n        if (typeof popperInstance.update === 'function' && isOpen) {\n            popperInstance.update();\n        }\n\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isOpen) {\n            window.addEventListener('keydown', listenForEsc);\n        } else {\n            window.removeEventListener('keydown', listenForEsc);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', listenForEsc);\n        };\n    }, [listenForEsc, isOpen]);\n\n    return (\n        <>\n            <div {...openingEvents} ref={setTriggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: setTriggerElementRef,\n                        'aria-labelledby': id,\n                        'aria-disabled': shouldPreventTooltipOpening,\n                    })}\n            </div>\n            <TooltipWrapper enablePortal={enablePortal}>\n                <div\n                    ref={setTooltipContainerRef}\n                    aria-hidden={shouldPreventTooltipOpening}\n                    className={merge([\n                        'tw-popper-container tw-inline-block tw-max-w-[200px] tw-dark tw-bg-base tw-rounded-md tw-shadow-mid tw-text-text tw-z-[120000]',\n                        !isOpen && 'tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden',\n                    ])}\n                    data-test-id={dataTestId}\n                    role=\"tooltip\"\n                    id={id}\n                    style={popperInstance.styles.popper}\n                    {...popperInstance.attributes.popper}\n                    {...openingEvents}\n                >\n                    {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                    <div\n                        className={merge([\n                            'tw-px-3 tw-dark tw-bg-base tw-rounded-md tw-relative tw-z-[120000]',\n                            hasLargePaddingTop ? paddingsTop.large : paddingsTop.small,\n                            linkUrl ? paddingsBottom.large : paddingsBottom.small,\n                        ])}\n                    >\n                        {heading && (\n                            <h4 className=\"tw-flex tw-text-m tw-font-bold tw-mb-1\">\n                                {headingIcon && (\n                                    <span className=\"tw-mr-1.5\">\n                                        {cloneElement(headingIcon, { size: IconSize.Size20 })}\n                                    </span>\n                                )}\n                                {heading}\n                            </h4>\n                        )}\n                        <div className=\"tw-flex\">\n                            {tooltipIcon && (\n                                <span className=\"tw-shrink-0 tw-mr-1 tw-leading-4\">\n                                    {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                                </span>\n                            )}\n                            <span className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</span>\n                        </div>\n                        {linkUrl && (\n                            <a\n                                {...linkProps}\n                                data-test-id={`${dataTestId}-link`}\n                                ref={linkRef}\n                                href={linkUrl}\n                                target=\"_blank\"\n                                rel=\"noopener noreferrer\"\n                                className={merge([\n                                    'tw-text-xs tw-text-black-40 tw-underline tw-mt-1',\n                                    FOCUS_VISIBLE_STYLE,\n                                ])}\n                            >\n                                {linkLabel ?? 'Click here to learn more.'}\n                            </a>\n                        )}\n                        {buttons && (\n                            <div className=\"tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4\">\n                                {buttons.length > 0 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Strong}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[0].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[0].label}\n                                    </Button>\n                                )}\n                                {buttons.length === 2 && (\n                                    <Button\n                                        style={ButtonStyle.Default}\n                                        emphasis={ButtonEmphasis.Default}\n                                        size={ButtonSize.Small}\n                                        onClick={buttons[1].action}\n                                        disabled={shouldPreventTooltipOpening}\n                                    >\n                                        {buttons[1].label}\n                                    </Button>\n                                )}\n                            </div>\n                        )}\n                    </div>\n                    {/**\n                     * This container is needed for the arrow element to not be styled by popperJS\n                     * selectors for its immediate children .tw-popper-container > .tw-popper-arrow\n                     * */}\n                    <div aria-hidden=\"true\">\n                        <div\n                            data-test-id=\"popover-arrow\"\n                            data-popper-arrow={withArrow}\n                            ref={setArrowElement}\n                            style={popperInstance.styles.arrow}\n                            className={merge([\n                                withArrow &&\n                                    'tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border before:tw-border-line',\n                                withArrow && arrowStyling,\n                            ])}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </TooltipWrapper>\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["paddingsTop","paddingsBottom","TooltipPosition","TooltipAlignment","placementMap","getArrowClasses","currentPlacement","brightHeader","alignment","merge","brightHeaderArrowBackgroundColors","TooltipWrapper","enablePortal","children","React","Portal","Tooltip","content","tooltipIcon","heading","headingIcon","linkUrl","linkLabel","buttons","position","withArrow","flip","triggerElement","hoverDelay","enterDelay","open","disabled","hidden","dataTestId","triggerElementRef","setTriggerElementRef","useState","isOpen","setIsOpen","linkRef","useRef","shouldPreventTooltipOpening","linkProps","useLink","hasLargePaddingTop","useMemo","placement","tooltipContainerRef","setTooltipContainerRef","triggerElementContainerRef","setTriggerElementContainerRef","arrowElement","setArrowElement","id","useMemoizedId","popperInstance","usePopper","_a","arrowStyling","timeoutRef","handleHideTooltipOnHover","useCallback","handleShowTooltipOnHover","checkIfHovered","event","hoveredElement","el","handleCloseIfFocusedOutside","relatedTarget","element","openingEvents","useEffect","listenForEsc","useLayoutEffect","cloneElement","BrightHeader","IconSize","FOCUS_VISIBLE_STYLE","Button","ButtonStyle","ButtonEmphasis","ButtonSize"],"mappings":"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"}