@frontify/fondue 12.0.0-beta.380 → 12.0.0-beta.381

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

@@ -1,12 +1,12 @@
-import { jsxs as T, Fragment as H, jsx as s } from "react/jsx-runtime";
-import { useState as i, useRef as Z, useEffect as E, useCallback as O } from "react";
+import { jsxs as O, Fragment as H, jsx as s } from "react/jsx-runtime";
+import { useState as l, useRef as Z, useEffect as R, useCallback as y } from "react";
 import { usePopper as q } from "react-popper";
-import { merge as R } from "../../utilities/merge.es.js";
+import { merge as N } from "../../utilities/merge.es.js";
 import { useToggleOverlay as G } from "../../hooks/useToggleOverlay.es.js";
 import { Z_INDEX_TOOLTIP as J } from "../../utilities/dialogs/constants.es.js";
 import { EnablePortalWrapper as K } from "../../utilities/dialogs/EnablePortalWrapper.es.js";
 import { useMemoizedId as Q } from "../../hooks/useMemoizedId.es.js";
-const Y = 12, y = 7, D = (e) => {
+const Y = 12, _ = 7, D = (e) => {
   switch (!0) {
     case e.includes("top"):
       return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px]";
@@ -26,100 +26,100 @@ const Y = 12, y = 7, D = (e) => {
 }, te = (e, t) => {
   switch (!0) {
     case e.includes("end"):
-      return [t[0] + y, t[1]];
+      return [t[0] + _, t[1]];
     case e.includes("start"):
-      return [t[0] - y, t[1]];
+      return [t[0] - _, t[1]];
     default:
       return t;
   }
 }, re = ({
   id: e,
   children: t,
-  offset: l = [0, 8],
-  flip: N = !0,
-  content: _,
-  placement: b = "bottom",
-  withArrow: w = !0,
-  size: A = "spacious",
-  openOnMount: F = !1,
-  maxWidth: v = 200,
-  maxHeight: L = "auto",
-  enablePortal: S = !0,
-  enterDelay: a = 0,
-  leaveDelay: c = 200,
-  disabled: f = !1,
-  zIndex: C = J,
-  "data-test-id": u = "fondue-tooltip",
-  "aria-label": M = "fondue-tooltip-trigger"
+  offset: a = [0, 8],
+  flip: A = !0,
+  content: F,
+  placement: c = "bottom",
+  withArrow: f = !0,
+  size: v = "spacious",
+  openOnMount: L = !1,
+  maxWidth: S = 200,
+  maxHeight: C = "auto",
+  enablePortal: M = !0,
+  enterDelay: u = 0,
+  leaveDelay: m = 200,
+  disabled: h = !1,
+  zIndex: j = J,
+  "data-test-id": p = "fondue-tooltip",
+  "aria-label": k = "fondue-tooltip-trigger"
 }) => {
-  const m = Q(e), [n, o] = G(F), [j, k] = i(null), [B, I] = i(null), [P, U] = i(null), [V, W] = i(l), { styles: h, attributes: X, state: p } = q(j, B, {
-    placement: b,
+  const g = Q(e), [n, o] = G(L), [B, I] = l(null), [P, U] = l(null), [V, W] = l(null), [i, X] = l(a), { styles: x, attributes: $, state: d } = q(B, P, {
+    placement: c,
     modifiers: [
-      { name: "arrow", options: { element: P, padding: Y } },
-      { name: "offset", options: { offset: V } },
-      { name: "flip", enabled: N }
+      { name: "arrow", options: { element: V, padding: Y } },
+      { name: "offset", options: { offset: i } },
+      { name: "flip", enabled: A }
     ]
-  }), d = (p == null ? void 0 : p.placement) ?? b, $ = D(d), r = Z(null);
-  E(() => {
-    const z = te(d, l);
-    W(z);
-  }, [d, l]);
-  const g = O(() => {
-    r.current && clearTimeout(r.current), r.current = setTimeout(() => o(!1), c);
-  }, [c, o]), x = O(() => {
-    if (r.current && clearTimeout(r.current), a) {
-      r.current = setTimeout(() => o(!0), a);
+  }), b = (d == null ? void 0 : d.placement) ?? c, z = D(b), r = Z(null);
+  R(() => {
+    const w = te(b, a);
+    (w[0] !== i[0] || w[1] !== i[1]) && X(w);
+  }, [a, i, b]);
+  const T = y(() => {
+    r.current && clearTimeout(r.current), r.current = setTimeout(() => o(!1), m);
+  }, [m, o]), E = y(() => {
+    if (r.current && clearTimeout(r.current), u) {
+      r.current = setTimeout(() => o(!0), u);
       return;
     }
     o(!0);
-  }, [a, o]);
-  return E(() => {
+  }, [u, o]);
+  return R(() => {
     r.current && !n && clearTimeout(r.current);
-  }, [n]), /* @__PURE__ */ T(H, { children: [
+  }, [n]), /* @__PURE__ */ O(H, { children: [
     /* @__PURE__ */ s(
       "button",
       {
-        ref: k,
-        onMouseEnter: x,
-        onFocus: x,
-        onMouseLeave: g,
-        onBlur: g,
-        "aria-label": M,
-        "aria-disabled": f,
-        "aria-describedby": m,
-        disabled: f,
+        ref: I,
+        onMouseEnter: E,
+        onFocus: E,
+        onMouseLeave: T,
+        onBlur: T,
+        "aria-label": k,
+        "aria-disabled": h,
+        "aria-describedby": g,
+        disabled: h,
         className: "disabled:tw-text-text-disabled",
-        "data-test-id": `${u}-button`,
+        "data-test-id": `${p}-button`,
         children: t
       }
     ),
-    n && /* @__PURE__ */ s(K, { enablePortal: S, children: /* @__PURE__ */ T(
+    n && /* @__PURE__ */ s(K, { enablePortal: M, children: /* @__PURE__ */ O(
       "div",
       {
-        "data-test-id": u,
+        "data-test-id": p,
         role: "tooltip",
-        id: m,
+        id: g,
         "aria-hidden": !n,
-        ref: I,
-        className: R([
+        ref: U,
+        className: N([
           "tw-popper-container tw-inline-block tw-bg-box-neutral-mighty tw-rounded-md tw-shadow tw-text-heading-medium tw-text-box-neutral-mighty-inverse tw-border tw-border-line-mighty",
-          A === "spacious" ? "tw-pt-2 tw-px-3 tw-pb-2.5" : "tw-pt-1 tw-px-2 tw-pb-1.5"
+          v === "spacious" ? "tw-pt-2 tw-px-3 tw-pb-2.5" : "tw-pt-1 tw-px-2 tw-pb-1.5"
         ]),
-        style: { ...h.popper, maxWidth: v, maxHeight: L, zIndex: C },
-        ...X.popper,
+        style: { ...x.popper, maxWidth: S, maxHeight: C, zIndex: j },
+        ...$.popper,
         children: [
-          /* @__PURE__ */ s("p", { className: "tw-whitespace-pre-line", children: ee(_) }),
-          w && /* @__PURE__ */ s(
+          /* @__PURE__ */ s("p", { className: "tw-whitespace-pre-line", children: ee(F) }),
+          f && /* @__PURE__ */ s(
             "div",
             {
-              "data-test-id": `${u}-arrow`,
-              "data-popper-arrow": w,
+              "data-test-id": `${p}-arrow`,
+              "data-popper-arrow": f,
               "aria-hidden": "true",
-              ref: U,
-              style: h.arrow,
-              className: R([
+              ref: W,
+              style: x.arrow,
+              className: N([
                 "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-mighty before:tw-bg-box-neutral-mighty",
-                $
+                z
               ])
             }
           )

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 { ReactElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopperPlacement } from '@components/Popper';\nimport { usePopper } from 'react-popper';\nimport { merge } from '@utilities/merge';\nimport { useToggleOverlay } from '@hooks/useToggleOverlay';\nimport { Z_INDEX_TOOLTIP } from '@utilities/dialogs/constants';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nconst ARROW_DISTANCE_FROM_CORNER_VALUE = 12;\nconst TOOLTIP_EXTRA_OFFSET_VALUE = 7; // As the arrow is set 12px away from tooltip corner, extra offset should be added to still point to Trigger.\n\nexport type TooltipProps = {\n    id?: string;\n    children?: ReactElement;\n    openOnMount?: boolean;\n    placement?: PopperPlacement;\n    offset?: [number, number];\n    flip?: boolean;\n    enablePortal?: boolean;\n    content: string;\n    withArrow?: boolean;\n    size?: 'spacious' | 'compact';\n    maxWidth?: string | number;\n    maxHeight?: string | number;\n    enterDelay?: number;\n    leaveDelay?: number;\n    'data-test-id'?: string;\n    zIndex?: number;\n    disabled?: boolean;\n    'aria-label'?: string;\n};\n\nconst getArrowClasses = (currentPlacement: string) => {\n    switch (true) {\n        case currentPlacement.includes('top'):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px]';\n        case currentPlacement.includes('right'):\n            return 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]';\n        case currentPlacement.includes('bottom'):\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]';\n        case currentPlacement.includes('left'):\n            return 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]';\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]';\n    }\n};\n\nconst formatTooltipText = (text: string) => {\n    const lineBreakRegex = /<br\\s*\\/?>/;\n    return text.split(lineBreakRegex).join('\\n');\n};\n\nconst getNewOffsetBasedOnArrowPosition = (currentPlacement: string, offset: [number, number]): [number, number] => {\n    switch (true) {\n        case currentPlacement.includes('end'):\n            return [offset[0] + TOOLTIP_EXTRA_OFFSET_VALUE, offset[1]];\n        case currentPlacement.includes('start'):\n            return [offset[0] - TOOLTIP_EXTRA_OFFSET_VALUE, offset[1]];\n        default:\n            return offset;\n    }\n};\n\nexport const Tooltip = ({\n    id: customId,\n    children,\n    offset = [0, 8],\n    flip = true,\n    content,\n    placement = 'bottom',\n    withArrow = true,\n    size = 'spacious',\n    openOnMount = false,\n    maxWidth = 200,\n    maxHeight = 'auto',\n    enablePortal = true,\n    enterDelay = 0,\n    leaveDelay = 200,\n    disabled = false,\n    zIndex = Z_INDEX_TOOLTIP,\n    'data-test-id': dataTestId = 'fondue-tooltip',\n    'aria-label': ariaLabel = 'fondue-tooltip-trigger',\n}: TooltipProps) => {\n    const id = useMemoizedId(customId);\n    const [open, setOpen] = useToggleOverlay(openOnMount);\n    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const [tooltipOffset, setTooltipOffset] = useState<[number, number]>(offset);\n\n    const { styles, attributes, state } = usePopper(referenceElement, popperElement, {\n        placement,\n        modifiers: [\n            { name: 'arrow', options: { element: arrowElement, padding: ARROW_DISTANCE_FROM_CORNER_VALUE } },\n            { name: 'offset', options: { offset: tooltipOffset } },\n            { name: 'flip', enabled: flip },\n        ],\n    });\n\n    const currentPlacement = state?.placement ?? placement;\n    const arrowStyling = getArrowClasses(currentPlacement);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        const newOffset = getNewOffsetBasedOnArrowPosition(currentPlacement, offset);\n        setTooltipOffset(newOffset);\n    }, [currentPlacement, offset]);\n\n    const handleHideTooltip = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setOpen(false), leaveDelay);\n    }, [leaveDelay, setOpen]);\n\n    const handleShowTooltip = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setOpen(true), enterDelay);\n            return;\n        }\n\n        setOpen(true);\n    }, [enterDelay, setOpen]);\n\n    useEffect(() => {\n        if (timeoutRef.current && !open) {\n            clearTimeout(timeoutRef.current);\n        }\n    }, [open]);\n\n    return (\n        <>\n            <button\n                ref={setReferenceElement}\n                onMouseEnter={handleShowTooltip}\n                onFocus={handleShowTooltip}\n                onMouseLeave={handleHideTooltip}\n                onBlur={handleHideTooltip}\n                aria-label={ariaLabel}\n                aria-disabled={disabled}\n                aria-describedby={id}\n                disabled={disabled}\n                className=\"disabled:tw-text-text-disabled\"\n                data-test-id={`${dataTestId}-button`}\n            >\n                {children}\n            </button>\n            {open && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        data-test-id={dataTestId}\n                        role=\"tooltip\"\n                        id={id}\n                        aria-hidden={!open}\n                        ref={setPopperElement}\n                        className={merge([\n                            'tw-popper-container tw-inline-block tw-bg-box-neutral-mighty tw-rounded-md tw-shadow tw-text-heading-medium tw-text-box-neutral-mighty-inverse tw-border tw-border-line-mighty',\n                            size === 'spacious' ? 'tw-pt-2 tw-px-3 tw-pb-2.5' : 'tw-pt-1 tw-px-2 tw-pb-1.5',\n                        ])}\n                        style={{ ...styles.popper, maxWidth, maxHeight, zIndex }}\n                        {...attributes.popper}\n                    >\n                        <p className=\"tw-whitespace-pre-line\">{formatTooltipText(content)}</p>\n                        {withArrow && (\n                            <div\n                                data-test-id={`${dataTestId}-arrow`}\n                                data-popper-arrow={withArrow}\n                                aria-hidden=\"true\"\n                                ref={setArrowElement}\n                                style={styles.arrow}\n                                className={merge([\n                                    '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-mighty before:tw-bg-box-neutral-mighty',\n                                    arrowStyling,\n                                ])}\n                            />\n                        )}\n                    </div>\n                </EnablePortalWrapper>\n            )}\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["ARROW_DISTANCE_FROM_CORNER_VALUE","TOOLTIP_EXTRA_OFFSET_VALUE","getArrowClasses","currentPlacement","formatTooltipText","text","lineBreakRegex","getNewOffsetBasedOnArrowPosition","offset","Tooltip","customId","children","flip","content","placement","withArrow","size","openOnMount","maxWidth","maxHeight","enablePortal","enterDelay","leaveDelay","disabled","zIndex","Z_INDEX_TOOLTIP","dataTestId","ariaLabel","id","useMemoizedId","open","setOpen","useToggleOverlay","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","arrowElement","setArrowElement","tooltipOffset","setTooltipOffset","styles","attributes","state","usePopper","arrowStyling","timeoutRef","useRef","useEffect","newOffset","handleHideTooltip","useCallback","handleShowTooltip","jsxs","Fragment","jsx","EnablePortalWrapper","merge"],"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 { ReactElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { PopperPlacement } from '@components/Popper';\nimport { usePopper } from 'react-popper';\nimport { merge } from '@utilities/merge';\nimport { useToggleOverlay } from '@hooks/useToggleOverlay';\nimport { Z_INDEX_TOOLTIP } from '@utilities/dialogs/constants';\nimport { EnablePortalWrapper } from '@utilities/dialogs/EnablePortalWrapper';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\n\nconst ARROW_DISTANCE_FROM_CORNER_VALUE = 12;\nconst TOOLTIP_EXTRA_OFFSET_VALUE = 7; // As the arrow is set 12px away from tooltip corner, extra offset should be added to still point to Trigger.\n\nexport type TooltipProps = {\n    id?: string;\n    children?: ReactElement;\n    openOnMount?: boolean;\n    placement?: PopperPlacement;\n    offset?: [number, number];\n    flip?: boolean;\n    enablePortal?: boolean;\n    content: string;\n    withArrow?: boolean;\n    size?: 'spacious' | 'compact';\n    maxWidth?: string | number;\n    maxHeight?: string | number;\n    enterDelay?: number;\n    leaveDelay?: number;\n    'data-test-id'?: string;\n    zIndex?: number;\n    disabled?: boolean;\n    'aria-label'?: string;\n};\n\nconst getArrowClasses = (currentPlacement: string) => {\n    switch (true) {\n        case currentPlacement.includes('top'):\n            return 'before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px]';\n        case currentPlacement.includes('right'):\n            return 'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]';\n        case currentPlacement.includes('bottom'):\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]';\n        case currentPlacement.includes('left'):\n            return 'before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]';\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]';\n    }\n};\n\nconst formatTooltipText = (text: string) => {\n    const lineBreakRegex = /<br\\s*\\/?>/;\n    return text.split(lineBreakRegex).join('\\n');\n};\n\nconst getNewOffsetBasedOnArrowPosition = (currentPlacement: string, offset: [number, number]): [number, number] => {\n    switch (true) {\n        case currentPlacement.includes('end'):\n            return [offset[0] + TOOLTIP_EXTRA_OFFSET_VALUE, offset[1]];\n        case currentPlacement.includes('start'):\n            return [offset[0] - TOOLTIP_EXTRA_OFFSET_VALUE, offset[1]];\n        default:\n            return offset;\n    }\n};\n\nexport const Tooltip = ({\n    id: customId,\n    children,\n    offset = [0, 8],\n    flip = true,\n    content,\n    placement = 'bottom',\n    withArrow = true,\n    size = 'spacious',\n    openOnMount = false,\n    maxWidth = 200,\n    maxHeight = 'auto',\n    enablePortal = true,\n    enterDelay = 0,\n    leaveDelay = 200,\n    disabled = false,\n    zIndex = Z_INDEX_TOOLTIP,\n    'data-test-id': dataTestId = 'fondue-tooltip',\n    'aria-label': ariaLabel = 'fondue-tooltip-trigger',\n}: TooltipProps) => {\n    const id = useMemoizedId(customId);\n    const [open, setOpen] = useToggleOverlay(openOnMount);\n    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n    const [tooltipOffset, setTooltipOffset] = useState<[number, number]>(offset);\n\n    const { styles, attributes, state } = usePopper(referenceElement, popperElement, {\n        placement,\n        modifiers: [\n            { name: 'arrow', options: { element: arrowElement, padding: ARROW_DISTANCE_FROM_CORNER_VALUE } },\n            { name: 'offset', options: { offset: tooltipOffset } },\n            { name: 'flip', enabled: flip },\n        ],\n    });\n\n    const currentPlacement = state?.placement ?? placement;\n    const arrowStyling = getArrowClasses(currentPlacement);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        const newOffset = getNewOffsetBasedOnArrowPosition(currentPlacement, offset);\n\n        if (newOffset[0] !== tooltipOffset[0] || newOffset[1] !== tooltipOffset[1]) {\n            setTooltipOffset(newOffset);\n        }\n    }, [offset, tooltipOffset, currentPlacement]);\n\n    const handleHideTooltip = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        timeoutRef.current = setTimeout(() => setOpen(false), leaveDelay);\n    }, [leaveDelay, setOpen]);\n\n    const handleShowTooltip = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n\n        if (enterDelay) {\n            timeoutRef.current = setTimeout(() => setOpen(true), enterDelay);\n            return;\n        }\n\n        setOpen(true);\n    }, [enterDelay, setOpen]);\n\n    useEffect(() => {\n        if (timeoutRef.current && !open) {\n            clearTimeout(timeoutRef.current);\n        }\n    }, [open]);\n\n    return (\n        <>\n            <button\n                ref={setReferenceElement}\n                onMouseEnter={handleShowTooltip}\n                onFocus={handleShowTooltip}\n                onMouseLeave={handleHideTooltip}\n                onBlur={handleHideTooltip}\n                aria-label={ariaLabel}\n                aria-disabled={disabled}\n                aria-describedby={id}\n                disabled={disabled}\n                className=\"disabled:tw-text-text-disabled\"\n                data-test-id={`${dataTestId}-button`}\n            >\n                {children}\n            </button>\n            {open && (\n                <EnablePortalWrapper enablePortal={enablePortal}>\n                    <div\n                        data-test-id={dataTestId}\n                        role=\"tooltip\"\n                        id={id}\n                        aria-hidden={!open}\n                        ref={setPopperElement}\n                        className={merge([\n                            'tw-popper-container tw-inline-block tw-bg-box-neutral-mighty tw-rounded-md tw-shadow tw-text-heading-medium tw-text-box-neutral-mighty-inverse tw-border tw-border-line-mighty',\n                            size === 'spacious' ? 'tw-pt-2 tw-px-3 tw-pb-2.5' : 'tw-pt-1 tw-px-2 tw-pb-1.5',\n                        ])}\n                        style={{ ...styles.popper, maxWidth, maxHeight, zIndex }}\n                        {...attributes.popper}\n                    >\n                        <p className=\"tw-whitespace-pre-line\">{formatTooltipText(content)}</p>\n                        {withArrow && (\n                            <div\n                                data-test-id={`${dataTestId}-arrow`}\n                                data-popper-arrow={withArrow}\n                                aria-hidden=\"true\"\n                                ref={setArrowElement}\n                                style={styles.arrow}\n                                className={merge([\n                                    '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-mighty before:tw-bg-box-neutral-mighty',\n                                    arrowStyling,\n                                ])}\n                            />\n                        )}\n                    </div>\n                </EnablePortalWrapper>\n            )}\n        </>\n    );\n};\nTooltip.displayName = 'FondueTooltip';\n"],"names":["ARROW_DISTANCE_FROM_CORNER_VALUE","TOOLTIP_EXTRA_OFFSET_VALUE","getArrowClasses","currentPlacement","formatTooltipText","text","lineBreakRegex","getNewOffsetBasedOnArrowPosition","offset","Tooltip","customId","children","flip","content","placement","withArrow","size","openOnMount","maxWidth","maxHeight","enablePortal","enterDelay","leaveDelay","disabled","zIndex","Z_INDEX_TOOLTIP","dataTestId","ariaLabel","id","useMemoizedId","open","setOpen","useToggleOverlay","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","arrowElement","setArrowElement","tooltipOffset","setTooltipOffset","styles","attributes","state","usePopper","arrowStyling","timeoutRef","useRef","useEffect","newOffset","handleHideTooltip","useCallback","handleShowTooltip","jsxs","Fragment","jsx","EnablePortalWrapper","merge"],"mappings":"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"}