@frontify/fondue 9.12.1 → 9.12.2

package/dist/components/MultiSelect/MultiSelect.es.js

@@ -1,14 +1,14 @@
-import { Checklist as T, ChecklistDirection as z } from "../Checklist/Checklist.es.js";
-import { Tag as g, TagType as a, TagSize as i } from "../Tag/Tag.es.js";
+import { Checklist as P, ChecklistDirection as T } from "../Checklist/Checklist.es.js";
+import { Tag as w, TagType as s, TagSize as i } from "../Tag/Tag.es.js";
 import { Trigger as C } from "../Trigger/Trigger.es.js";
 import { useButton as F } from "@react-aria/button";
-import { useFocusRing as P, FocusScope as k } from "@react-aria/focus";
+import { useFocusRing as k, FocusScope as z } from "@react-aria/focus";
 import { useOverlay as R } from "@react-aria/overlays";
 import { mergeProps as M } from "@react-aria/utils";
 import { merge as V } from "../../utilities/merge.es.js";
 import { AnimatePresence as A, motion as B } from "framer-motion";
 import t, { useState as W, useRef as h } from "react";
-import { getSizeClasses as j } from "./helpers.es.js";
+import { getPaddingClasses as j } from "./helpers.es.js";
 var L = /* @__PURE__ */ ((l) => (l.Default = "Default", l.Summarized = "Summarized", l))(L || {}), U = /* @__PURE__ */ ((l) => (l.Small = "Small", l.Medium = "Medium", l))(U || {});
 const I = ({
   items: l,
@@ -17,16 +17,16 @@ const I = ({
   ariaLabel: S = "Select list",
   disabled: b = !1,
   placeholder: u,
-  type: p = "Default",
+  type: f = "Default",
   size: m = "Medium"
 }) => {
-  const [o, c] = W(!1), f = h(null), d = h(null), { isFocusVisible: E, focusProps: v } = P(), x = l.map((e) => ({ ...e, label: e.value })), { overlayProps: N } = R({
+  const [o, c] = W(!1), d = h(null), p = h(null), { isFocusVisible: E, focusProps: v } = k(), x = l.map((e) => ({ ...e, label: e.value })), { overlayProps: N } = R({
     isOpen: o,
     onClose: () => c(!1),
     shouldCloseOnBlur: !0,
     isDismissable: !0,
     shouldCloseOnInteractOutside: (e) => e && e.tagName !== "BUTTON" && e.tagName !== "svg"
-  }, f), { buttonProps: w } = F({
+  }, d), { buttonProps: g } = F({
     onPress: () => {
       c(!0);
     },
@@ -34,32 +34,32 @@ const I = ({
       e.key === "Escape" && c(!1);
     },
     elementType: "div"
-  }, d), O = (e) => {
-    const s = new Set(r);
-    s.has(e) ? s.delete(e) : s.add(e), n(Array.from(s));
+  }, p), O = (e) => {
+    const a = new Set(r);
+    a.has(e) ? a.delete(e) : a.add(e), n(Array.from(a));
   }, D = [r.length, `option${r.length > 1 ? "s" : ""}`, "selected"].join(" ");
   return /* @__PURE__ */ t.createElement("div", {
     className: "tw-relative"
   }, /* @__PURE__ */ t.createElement(C, {
     disabled: b,
-    buttonProps: w,
+    buttonProps: g,
     isFocusVisible: E,
     isOpen: o
   }, /* @__PURE__ */ t.createElement("div", {
-    ...M(w, v),
-    ref: d,
+    ...M(g, v),
+    ref: p,
     className: V([
-      "tw-flex-1 tw-flex tw-flex-wrap tw-gap-1 tw-pl-[19px] tw-min-h-[34px] tw-outline-none tw-pr-7",
+      "tw-flex-1 tw-flex tw-flex-wrap tw-gap-1 tw-min-h-[34px] tw-outline-none",
       j(m, r.length > 0)
     ])
-  }, p === "Default" && r.map((e) => /* @__PURE__ */ t.createElement(g, {
+  }, f === "Default" && r.map((e) => /* @__PURE__ */ t.createElement(w, {
     key: e,
-    type: o ? a.SelectedWithFocus : a.Selected,
+    type: o ? s.SelectedWithFocus : s.Selected,
     label: e.toString(),
     size: m === "Small" ? i.Small : i.Medium,
     onClick: () => O(e)
-  })), p === "Summarized" && r.length > 0 && /* @__PURE__ */ t.createElement(g, {
-    type: o ? a.SelectedWithFocus : a.Selected,
+  })), f === "Summarized" && r.length > 0 && /* @__PURE__ */ t.createElement(w, {
+    type: o ? s.SelectedWithFocus : s.Selected,
     label: D,
     size: m === "Small" ? i.Small : i.Medium,
     onClick: () => n([])
@@ -72,17 +72,17 @@ const I = ({
     animate: { height: "auto" },
     exit: { height: 0 },
     transition: { ease: [0.04, 0.62, 0.23, 0.98] }
-  }, /* @__PURE__ */ t.createElement(k, {
+  }, /* @__PURE__ */ t.createElement(z, {
     restoreFocus: !0
   }, /* @__PURE__ */ t.createElement("div", {
     ...N,
-    ref: f,
+    ref: d,
     className: "tw-p-4"
-  }, /* @__PURE__ */ t.createElement(T, {
+  }, /* @__PURE__ */ t.createElement(P, {
     activeValues: r.map((e) => e.toString()),
     setActiveValues: n,
     checkboxes: x,
-    direction: z.Vertical,
+    direction: T.Vertical,
     ariaLabel: S
   }))))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag/Tag';\nimport { Trigger } from '@components/Trigger/Trigger';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, useRef, useState } from 'react';\nimport { getSizeClasses } from './helpers';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n}) => {\n    const [open, setOpen] = useState(false);\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const checkboxes = items.map((item) => ({ ...item, label: item.value }));\n\n    const { overlayProps } = useOverlay(\n        {\n            isOpen: open,\n            onClose: () => setOpen(false),\n            shouldCloseOnBlur: true,\n            isDismissable: true,\n            shouldCloseOnInteractOutside: (element) =>\n                element && element.tagName !== 'BUTTON' && element.tagName !== 'svg',\n        },\n        overlayRef,\n    );\n\n    const { buttonProps } = useButton(\n        {\n            onPress: () => {\n                setOpen(true);\n            },\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        triggerRef,\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const summarizedLabel = [activeItemKeys.length, `option${activeItemKeys.length > 1 ? 's' : ''}`, 'selected'].join(\n        ' ',\n    );\n\n    return (\n        <div className=\"tw-relative\">\n            <Trigger disabled={disabled} buttonProps={buttonProps} isFocusVisible={isFocusVisible} isOpen={open}>\n                <div\n                    {...mergeProps(buttonProps, focusProps)}\n                    ref={triggerRef}\n                    className={merge([\n                        'tw-flex-1 tw-flex tw-flex-wrap tw-gap-1 tw-pl-[19px] tw-min-h-[34px] tw-outline-none tw-pr-7',\n                        getSizeClasses(size, activeItemKeys.length > 0),\n                    ])}\n                >\n                    {type === MultiSelectType.Default &&\n                        activeItemKeys.map((key) => (\n                            <Tag\n                                key={key}\n                                type={open ? TagType.SelectedWithFocus : TagType.Selected}\n                                label={key.toString()}\n                                size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                onClick={() => toggleSelection(key)}\n                            />\n                        ))}\n\n                    {type === MultiSelectType.Summarized && activeItemKeys.length > 0 && (\n                        <Tag\n                            type={open ? TagType.SelectedWithFocus : TagType.Selected}\n                            label={summarizedLabel}\n                            size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                            onClick={() => onSelectionChange([])}\n                        />\n                    )}\n\n                    {activeItemKeys.length === 0 && placeholder && (\n                        <div className=\"tw-text-black-60 tw-text-s\">{placeholder}</div>\n                    )}\n                </div>\n            </Trigger>\n            <AnimatePresence>\n                {open && (\n                    <motion.div\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-10 tw-bg-base\"\n                        key=\"content\"\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98] }}\n                    >\n                        <FocusScope restoreFocus>\n                            <div {...overlayProps} ref={overlayRef} className=\"tw-p-4\">\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag/Tag';\nimport { Trigger } from '@components/Trigger/Trigger';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { useOverlay } from '@react-aria/overlays';\nimport { mergeProps } from '@react-aria/utils';\nimport { merge } from '@utilities/merge';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { FC, useRef, useState } from 'react';\nimport { getPaddingClasses } from './helpers';\n\nexport enum MultiSelectType {\n    Default = 'Default',\n    Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n    Small = 'Small',\n    Medium = 'Medium',\n}\n\nexport type MultiSelectItem = {\n    value: string;\n    ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n    items: MultiSelectItem[];\n    activeItemKeys: (string | number)[];\n    disabled?: boolean;\n    onSelectionChange: (keys: (string | number)[]) => void;\n    ariaLabel?: string;\n    placeholder?: string;\n    type?: MultiSelectType;\n    size?: MultiSelectSize;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n    items,\n    activeItemKeys,\n    onSelectionChange,\n    ariaLabel = 'Select list',\n    disabled = false,\n    placeholder,\n    type = MultiSelectType.Default,\n    size = MultiSelectSize.Medium,\n}) => {\n    const [open, setOpen] = useState(false);\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const triggerRef = useRef<HTMLDivElement | null>(null);\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const checkboxes = items.map((item) => ({ ...item, label: item.value }));\n\n    const { overlayProps } = useOverlay(\n        {\n            isOpen: open,\n            onClose: () => setOpen(false),\n            shouldCloseOnBlur: true,\n            isDismissable: true,\n            shouldCloseOnInteractOutside: (element) =>\n                element && element.tagName !== 'BUTTON' && element.tagName !== 'svg',\n        },\n        overlayRef,\n    );\n\n    const { buttonProps } = useButton(\n        {\n            onPress: () => {\n                setOpen(true);\n            },\n            onKeyDown: (e) => {\n                if (e.key === 'Escape') {\n                    setOpen(false);\n                }\n            },\n            elementType: 'div',\n        },\n        triggerRef,\n    );\n\n    const toggleSelection = (key: string | number) => {\n        const keySet = new Set(activeItemKeys);\n\n        if (keySet.has(key)) {\n            keySet.delete(key);\n        } else {\n            keySet.add(key);\n        }\n\n        onSelectionChange(Array.from(keySet));\n    };\n\n    const summarizedLabel = [activeItemKeys.length, `option${activeItemKeys.length > 1 ? 's' : ''}`, 'selected'].join(\n        ' ',\n    );\n\n    return (\n        <div className=\"tw-relative\">\n            <Trigger disabled={disabled} buttonProps={buttonProps} isFocusVisible={isFocusVisible} isOpen={open}>\n                <div\n                    {...mergeProps(buttonProps, focusProps)}\n                    ref={triggerRef}\n                    className={merge([\n                        'tw-flex-1 tw-flex tw-flex-wrap tw-gap-1 tw-min-h-[34px] tw-outline-none',\n                        getPaddingClasses(size, activeItemKeys.length > 0),\n                    ])}\n                >\n                    {type === MultiSelectType.Default &&\n                        activeItemKeys.map((key) => (\n                            <Tag\n                                key={key}\n                                type={open ? TagType.SelectedWithFocus : TagType.Selected}\n                                label={key.toString()}\n                                size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                                onClick={() => toggleSelection(key)}\n                            />\n                        ))}\n\n                    {type === MultiSelectType.Summarized && activeItemKeys.length > 0 && (\n                        <Tag\n                            type={open ? TagType.SelectedWithFocus : TagType.Selected}\n                            label={summarizedLabel}\n                            size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n                            onClick={() => onSelectionChange([])}\n                        />\n                    )}\n\n                    {activeItemKeys.length === 0 && placeholder && (\n                        <div className=\"tw-text-black-60 tw-text-s\">{placeholder}</div>\n                    )}\n                </div>\n            </Trigger>\n            <AnimatePresence>\n                {open && (\n                    <motion.div\n                        className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-10 tw-bg-base\"\n                        key=\"content\"\n                        initial={{ height: 0 }}\n                        animate={{ height: 'auto' }}\n                        exit={{ height: 0 }}\n                        transition={{ ease: [0.04, 0.62, 0.23, 0.98] }}\n                    >\n                        <FocusScope restoreFocus>\n                            <div {...overlayProps} ref={overlayRef} className=\"tw-p-4\">\n                                <Checklist\n                                    activeValues={activeItemKeys.map((key) => key.toString())}\n                                    setActiveValues={onSelectionChange}\n                                    checkboxes={checkboxes}\n                                    direction={ChecklistDirection.Vertical}\n                                    ariaLabel={ariaLabel}\n                                />\n                            </div>\n                        </FocusScope>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </div>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/MultiSelect/helpers.d.ts

@@ -1,2 +1,2 @@
 import { MultiSelectSize } from './MultiSelect';
-export declare const getSizeClasses: (size: MultiSelectSize, hasActiveKeys: boolean) => "tw-py-2" | "tw-py-1" | "tw-py-[11px]";
+export declare const getPaddingClasses: (size: MultiSelectSize, hasActiveKeys: boolean) => string | undefined;

package/dist/components/MultiSelect/helpers.es.js

@@ -1,6 +1,20 @@
-import { MultiSelectSize as r } from "./MultiSelect.es.js";
-const l = (e, t) => e === r.Small ? t ? "tw-py-1" : "tw-py-2" : "tw-py-[11px]";
+import { merge as s } from "../../utilities/merge.es.js";
+import { MultiSelectSize as e } from "./MultiSelect.es.js";
+const c = (p, r) => {
+  const t = ["tw-pr-9"];
+  switch (p) {
+    case e.Small:
+      t.push(`tw-pl-3 ${r ? "tw-py-1" : "tw-py-2"}`);
+      break;
+    case e.Medium:
+      t.push("tw-pl-[19px] tw-py-[11px]");
+      break;
+    default:
+      return;
+  }
+  return s(t);
+};
 export {
-  l as getSizeClasses
+  c as getPaddingClasses
 };
 //# sourceMappingURL=helpers.es.js.map

package/dist/components/MultiSelect/helpers.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.es.js","sources":["../../../src/components/MultiSelect/helpers.ts"],"sourcesContent":["import { MultiSelectSize } from './MultiSelect';\n\nexport const getSizeClasses = (size: MultiSelectSize, hasActiveKeys: boolean) => {\n    if (size === MultiSelectSize.Small) {\n        if (hasActiveKeys) {\n            return 'tw-py-1';\n        } else {\n            return 'tw-py-2';\n        }\n    }\n    return 'tw-py-[11px]';\n};\n"],"names":[],"mappings":";AAEa,MAAA,IAAiB,CAAC,GAAuB,MAC9C,MAAS,EAAgB,QACrB,IACO,YAEA,YAGR;"}
+{"version":3,"file":"helpers.es.js","sources":["../../../src/components/MultiSelect/helpers.ts"],"sourcesContent":["import { merge } from '@utilities/merge';\nimport { MultiSelectSize } from './MultiSelect';\n\nexport const getPaddingClasses = (size: MultiSelectSize, hasActiveKeys: boolean) => {\n    const classes = ['tw-pr-9'];\n    switch (size) {\n        case MultiSelectSize.Small:\n            classes.push(`tw-pl-3 ${hasActiveKeys ? 'tw-py-1' : 'tw-py-2'}`);\n            break;\n        case MultiSelectSize.Medium:\n            classes.push('tw-pl-[19px] tw-py-[11px]');\n            break;\n        default:\n            return;\n    }\n\n    return merge(classes);\n};\n"],"names":[],"mappings":";;AAGa,MAAA,IAAoB,CAAC,GAAuB,MAA2B;AAC1E,QAAA,IAAU,CAAC,SAAS;AAClB,UAAA;AAAA,SACC,EAAgB;AACjB,QAAQ,KAAK,WAAW,IAAgB,YAAY,WAAW;AAC/D;AAAA,SACC,EAAgB;AACjB,QAAQ,KAAK,2BAA2B;AACxC;AAAA;AAEA;AAAA;AAGR,SAAO,EAAM,CAAO;AACxB;"}

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

@@ -4,7 +4,7 @@ import { useLink as re } from "@react-aria/link";
 import { FOCUS_VISIBLE_STYLE as oe } from "../../utilities/focusStyle.es.js";
 import { merge as d } from "../../utilities/merge.es.js";
 import e, { useRef as f, useMemo as ae, useState as V, useCallback as E, cloneElement as x } from "react";
-import { BrightHeader as se, brightHeaderArrowBackgroundColors as B } from "./BrightHeader.es.js";
+import { BrightHeader as se, brightHeaderArrowBackgroundColors as k } from "./BrightHeader.es.js";
 import { usePopper as le } from "react-popper";
 import { createPortal as ce } from "react-dom";
 const Y = {
@@ -35,22 +35,22 @@ const de = {
     case t.toString().includes("Right".toLowerCase()):
       return d([
         "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]",
-        a && w === "Start" ? B[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        a && w === "Start" ? k[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
       ]);
     case t.toString().includes("Bottom".toLowerCase()):
       return d([
         "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
-        a ? B[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        a ? k[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
       ]);
     case t.toString().includes("Left".toLowerCase()):
       return d([
         "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]",
-        a && w === "Start" ? B[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        a && w === "Start" ? k[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
       ]);
     default:
       return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white";
   }
-}, Be = ({
+}, ke = ({
   content: t,
   tooltipIcon: a,
   heading: w,
@@ -60,7 +60,7 @@ const de = {
   brightHeader: m,
   buttons: r,
   children: q,
-  position: k = "Bottom",
+  position: B = "Bottom",
   alignment: g = "Middle",
   withArrow: b,
   flip: D = !0,
@@ -68,7 +68,7 @@ const de = {
   hoverDelay: G = 200
 }) => {
   var z, T;
-  const o = f(null), M = f(null), { linkProps: J } = re({}, M), K = ae(() => l || m || r || w || u, [l, m, r, w, u]), Q = de[`${k}-${g}`], s = f(null), p = f(null), [W, X] = V(null), Z = b ? 10 : 5, i = le(o == null ? void 0 : o.current, s.current, {
+  const o = f(null), M = f(null), { linkProps: J } = re({}, M), K = ae(() => l || m || r || w || u, [l, m, r, w, u]), Q = de[`${B}-${g}`], s = f(null), p = f(null), [W, X] = V(null), Z = b ? 10 : 5, i = le(o == null ? void 0 : o.current, s.current, {
     placement: Q,
     strategy: "fixed",
     modifiers: [
@@ -89,7 +89,7 @@ const de = {
         enabled: D
       }
     ]
-  }), R = (T = (z = i.state) == null ? void 0 : z.placement) != null ? T : k, A = me(R, m, g), [H, c] = V(!1), h = f(null), U = E(() => {
+  }), R = (T = (z = i.state) == null ? void 0 : z.placement) != null ? T : B, A = me(R, m, g), [H, c] = V(!1), h = f(null), U = E(() => {
     h.current && clearTimeout(h.current), c(!0);
   }, [o == null ? void 0 : o.current]), L = E(() => {
     h.current = setTimeout(() => c(!1), G);
@@ -135,7 +135,7 @@ const de = {
   }, a && /* @__PURE__ */ e.createElement("span", {
     className: "tw-shrink-0 tw-mr-1"
   }, x(a, { size: $.Size16 })), /* @__PURE__ */ e.createElement("p", {
-    className: "tw-text-s"
+    className: "tw-text-s tw-min-w-0 tw-break-words"
   }, t)), l && /* @__PURE__ */ e.createElement("a", {
     ...J,
     "data-test-id": "tooltip-link",
@@ -176,7 +176,7 @@ const de = {
   })), q)), document.body));
 };
 export {
-  Be as Tooltip,
+  ke as Tooltip,
   we as TooltipAlignment,
   ne as TooltipPosition
 };

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, ButtonSize, ButtonStyle } from '@components/Button/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    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\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?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\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-bg-black-100 before:dark:tw-bg-white';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\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\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\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-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n    }\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}: TooltipProps) => {\n    const triggerRefElement = useRef<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(null);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n    const { linkProps } = useLink({}, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const tooltipContainerRef = useRef<HTMLDivElement | null>(null);\n    const triggerElementContainerRef = useRef<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerRefElement?.current, tooltipContainerRef.current, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\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 [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(true);\n    }, [triggerRefElement?.current]);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [triggerRefElement?.current, tooltipContainerRef?.current]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerRefElement, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el?.current))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [triggerRefElement?.current, tooltipContainerRef?.current, triggerElementContainerRef?.current],\n    );\n\n    const hasInteractiveElements = !!(buttons?.length || linkUrl?.length);\n    const triggerProps: HTMLAttributes<HTMLElement> = {\n        onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n        onMouseLeave: handleHideTooltipOnHover,\n        onFocus: () => setIsOpen(true),\n        onBlur: () => (!hasInteractiveElements ? setIsOpen(false) : null),\n    };\n\n    return (\n        <>\n            <div {...triggerProps} ref={triggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: triggerRefElement,\n                    })}\n            </div>\n            {createPortal(\n                <div>\n                    {isOpen && (\n                        <div\n                            ref={tooltipContainerRef}\n                            className=\"tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]\"\n                            data-test-id=\"tooltip\"\n                            role=\"tooltip\"\n                            style={popperInstance.styles.popper}\n                            {...popperInstance.attributes.popper}\n                            onFocus={() => setIsOpen(true)}\n                            onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n                            onMouseLeave={handleHideTooltipOnHover}\n                        >\n                            {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                            <div\n                                className={merge([\n                                    'tw-px-4',\n                                    hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                                    linkUrl ? paddingsBottom.small : paddingsBottom.large,\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\">\n                                            {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                                        </span>\n                                    )}\n                                    <p className=\"tw-text-s\">{content}</p>\n                                </div>\n                                {linkUrl && (\n                                    <a\n                                        {...linkProps}\n                                        data-test-id=\"tooltip-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 dark:tw-text-black-80 tw-underline tw-mt-1',\n                                            FOCUS_VISIBLE_STYLE,\n                                        ])}\n                                        onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\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                                            <div\n                                                onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}\n                                            >\n                                                <Button\n                                                    style={ButtonStyle.Primary}\n                                                    size={ButtonSize.Small}\n                                                    inverted\n                                                    onClick={buttons[0].action}\n                                                >\n                                                    {buttons[0].label}\n                                                </Button>\n                                            </div>\n                                        )}\n                                        {buttons.length === 2 && (\n                                            <div onBlur={() => setIsOpen(false)}>\n                                                <Button\n                                                    style={ButtonStyle.Secondary}\n                                                    size={ButtonSize.Small}\n                                                    inverted\n                                                    onClick={buttons[1].action}\n                                                >\n                                                    {buttons[1].label}\n                                                </Button>\n                                            </div>\n                                        )}\n                                    </div>\n                                )}\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-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                    )}\n                </div>,\n                document.body,\n            )}\n        </>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAkDA,MAAM,IAAc;AAAA,EAChB,OAAO;AAAA,EACP,OAAO;AACX,GAEM,IAAiB;AAAA,EACnB,OAAO;AAAA,EACP,OAAO;AACX;AAEY,IAAA,uBAAA,MACF,GAAA,MAAA,OACE,EAAA,QAAA,SACC,EAAA,SAAA,UACF,EAAA,OAAA,QAJC,IAAA,MAAA,CAAA,CAAA,GAOA,uBAAA,MACA,GAAA,QAAA,SACC,EAAA,SAAA,UACH,EAAA,MAAA,OAHE,IAAA,MAAA,CAAA,CAAA;AAMZ,MAAM,KAA4E;AAAA,EAC9E,CAAC,cAAc;AAAA,EACf,CAAC,YAAY;AAAA,EACb,CAAC,iBAAiB;AAAA,EAClB,CAAC,eAAe;AAAA,EAChB,CAAC,eAAe;AAAA,EAChB,CAAC,aAAa;AAAA,EACd,CAAC,gBAAgB;AAAA,EACjB,CAAC,cAAc;AAAA,EACf,CAAC,eAAe;AAAA,EAChB,CAAC,iBAAiB;AAAA,EAClB,CAAC,kBAAkB;AAAA,EACnB,CAAC,gBAAgB;AACrB,GAEM,KAAkB,CAAC,GAA0B,GAA6C,MAAsB;AAC1G,UAAA;AAAA,SACC,EAAiB,SAAS,EAAE,SAAS,MAAoB,aAAa;AAChE,aAAA;AAAA,SACN,EAAiB,SAAS,EAAE,SAAS,QAAsB,aAAa;AACzE,aAAO,EAAM;AAAA,QACT;AAAA,QACA,KAAgB,MAAc,UACxB,EAAkC,KAClC;AAAA,MAAA,CACT;AAAA,SACA,EAAiB,SAAS,EAAE,SAAS,SAAuB,aAAa;AAC1E,aAAO,EAAM;AAAA,QACT;AAAA,QACA,IACM,EAAkC,KAClC;AAAA,MAAA,CACT;AAAA,SACA,EAAiB,SAAS,EAAE,SAAS,OAAqB,aAAa;AACxE,aAAO,EAAM;AAAA,QACT;AAAA,QACA,KAAgB,MAAc,UACxB,EAAkC,KAClC;AAAA,MAAA,CACT;AAAA;AAEM,aAAA;AAAA;AAEnB,GAEa,KAAU,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,eAAY;AAAA,EACZ;AAAA,EACA,UAAO;AAAA,EACP;AAAA,EACA,gBAAa;AAAA,MACG;;AACV,QAAA,IAAoB,EAAgE,IAAI,GACxF,IAAU,EAAiC,IAAI,GAC/C,EAAE,iBAAc,GAAQ,IAAI,CAAO,GACnC,IAAqB,GACvB,MAAM,KAAW,KAAgB,KAAW,KAAW,GACvD,CAAC,GAAS,GAAc,GAAS,GAAS,CAAW,CACzD,GAEM,IAAY,GAAa,GAAG,KAAY,MACxC,IAAsB,EAA8B,IAAI,GACxD,IAA6B,EAA8B,IAAI,GAC/D,CAAC,GAAc,KAAmB,EAAgC,IAAI,GAEtE,IAAgB,IAAY,KAAK,GACjC,IAAiB,GAAU,uBAAmB,SAAS,EAAoB,SAAS;AAAA,IACtF;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,SAAS;AAAA,QACb;AAAA,MACJ;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,GAAG,CAAa;AAAA,QAC7B;AAAA,MACJ;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,MACb;AAAA,IACJ;AAAA,EAAA,CACH,GAEK,IAAmB,YAAe,UAAf,kBAAsB,cAAtB,WAAmC,GACtD,IAAe,GAAgB,GAAkB,GAAc,CAAS,GACxE,CAAC,GAAQ,KAAa,EAAS,EAAK,GACpC,IAAa,EAA6C,IAAI,GAE9D,IAA2B,EAAY,MAAM;AAC/C,IAAI,EAAW,WACX,aAAa,EAAW,OAAO,GAEnC,EAAU,EAAI;AAAA,EAAA,GACf,CAAC,uBAAmB,OAAO,CAAC,GAEzB,IAA2B,EAAY,MAAM;AAC/C,MAAW,UAAU,WAAW,MAAM,EAAU,EAAK,GAAG,CAAU;AAAA,KACnE,CAAC,uBAAmB,SAAS,uBAAqB,OAAO,CAAC,GAEvD,IAAiB,EACnB,CAAC,MAAU;;AACP,UAAM,IAAiB,OAAM,SAAN,WAAc,OAAM,iBAAN;AAGjC,IAAA,KAAkB,AAFD,CAAC,GAAmB,GAA4B,CAAmB,EAErD,KAAK,CAAC,MAAO,EAAe,SAAS,uBAAI,OAAO,CAAC,KACvD;EAC7B,GAEJ,CAAC,uBAAmB,SAAS,uBAAqB,SAAS,uBAA4B,OAAO,CAClG,GAEM,KAAyB,CAAC,CAAE,yBAAS,WAAU,wBAAS,UACxD,KAA4C;AAAA,IAC9C,aAAa,CAAC,MAAU,EAAe,EAAM,WAAW;AAAA,IACxD,cAAc;AAAA,IACd,SAAS,MAAM,EAAU,EAAI;AAAA,IAC7B,QAAQ,MAAO,AAAC,KAA4C,OAAnB,EAAU,EAAK;AAAA,EAAI;AAGhE,2DAES,kBAAA,cAAA,OAAA;AAAA,IAAK,GAAG;AAAA,IAAc,KAAK;AAAA,EAAA,GACvB,KACG,EAAa,GAAgB;AAAA,IACzB,KAAK;AAAA,EACR,CAAA,CACT,GACC,GACI,kBAAA,cAAA,OAAA,MACI,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,KAAK;AAAA,IACL,WAAU;AAAA,IACV,gBAAa;AAAA,IACb,MAAK;AAAA,IACL,OAAO,EAAe,OAAO;AAAA,IAC5B,GAAG,EAAe,WAAW;AAAA,IAC9B,SAAS,MAAM,EAAU,EAAI;AAAA,IAC7B,aAAa,CAAC,MAAU,EAAe,EAAM,WAAW;AAAA,IACxD,cAAc;AAAA,EAAA,GAEb,KAAiB,kBAAA,cAAA,IAAA;AAAA,IAAa,aAAa;AAAA,EAAA,CAAc,GACzD,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAqB,EAAY,QAAQ,EAAY;AAAA,MACrD,IAAU,EAAe,QAAQ,EAAe;AAAA,IAAA,CACnD;AAAA,EAAA,GAEA,KACI,kBAAA,cAAA,MAAA;AAAA,IAAG,WAAU;AAAA,EAAA,GACT,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EACX,GAAA,EAAa,GAAa,EAAE,MAAM,EAAS,QAAQ,CACxD,GAEH,CACL,GAEH,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EACX,GAAA,EAAa,GAAa,EAAE,MAAM,EAAS,OAAQ,CAAA,CACxD,GAEH,kBAAA,cAAA,KAAA;AAAA,IAAE,WAAU;AAAA,EAAA,GAAa,CAAQ,CACtC,GACC,KACI,kBAAA,cAAA,KAAA;AAAA,IACI,GAAG;AAAA,IACJ,gBAAa;AAAA,IACb,KAAK;AAAA,IACL,MAAM;AAAA,IACN,QAAO;AAAA,IACP,KAAI;AAAA,IACJ,WAAW,EAAM;AAAA,MACb;AAAA,MACA;AAAA,IAAA,CACH;AAAA,IACD,QAAQ,MAAO,KAAW,EAAQ,SAAS,IAAI,OAAO,EAAU,EAAK;AAAA,EAAA,GAEpE,gBAAa,2BAClB,GAEH,KACI,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,EAAQ,SAAS,KACb,kBAAA,cAAA,OAAA;AAAA,IACG,QAAQ,MAAO,KAAW,EAAQ,SAAS,IAAI,EAAU,EAAK,IAAI;AAAA,EAAA,GAEjE,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO,EAAY;AAAA,IACnB,MAAM,EAAW;AAAA,IACjB,UAAQ;AAAA,IACR,SAAS,EAAQ,GAAG;AAAA,EAEnB,GAAA,EAAQ,GAAG,KAChB,CACJ,GAEH,EAAQ,WAAW,KACf,kBAAA,cAAA,OAAA;AAAA,IAAI,QAAQ,MAAM,EAAU,EAAK;AAAA,EAAA,GAC7B,kBAAA,cAAA,GAAA;AAAA,IACG,OAAO,EAAY;AAAA,IACnB,MAAM,EAAW;AAAA,IACjB,UAAQ;AAAA,IACR,SAAS,EAAQ,GAAG;AAAA,EAAA,GAEnB,EAAQ,GAAG,KAChB,CACJ,CAER,GAEH,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,qBAAmB;AAAA,IACnB,KAAK;AAAA,IACL,OAAO,EAAe,OAAO;AAAA,IAC7B,WAAW,EAAM;AAAA,MACb,KACI;AAAA,MACJ,KAAa;AAAA,IAAA,CAChB;AAAA,EAAA,CACL,CACJ,GACC,CACL,CAER,GACA,SAAS,IACb,CACJ;AAER;"}
+{"version":3,"file":"Tooltip.es.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonSize, ButtonStyle } from '@components/Button/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    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { BrightHeader, BrightHeaderStyle, brightHeaderArrowBackgroundColors } from './BrightHeader';\nimport { usePopper } from 'react-popper';\nimport { createPortal } from 'react-dom';\nimport { Placement } from '@popperjs/core';\n\nexport type TooltipButton = {\n    label: string;\n    action: () => void;\n};\n\nexport type TooltipProps = PropsWithChildren<{\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?: ReactChild;\n    position?: TooltipPosition;\n    alignment?: TooltipAlignment;\n    flip?: boolean;\n    withArrow?: boolean;\n    hoverDelay?: number;\n}>;\n\n/**\n * This is a temporary workaround because for some yet unknown reasons `tailwindcss` in clarify purges the `tw-pb-3.5` and `tw-pt-3.5` class.\n */\nconst paddingsTop = {\n    small: 'tw-pt-3.5',\n    large: 'tw-pt-4',\n};\n\nconst paddingsBottom = {\n    small: 'tw-pb-3.5',\n    large: 'tw-pb-4',\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-bg-black-100 before:dark:tw-bg-white';\n        case currentPlacement.toString().includes(TooltipPosition.Right.toLowerCase()):\n            return merge([\n                'before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\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\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\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-[-6px]',\n                brightHeader && alignment === TooltipAlignment.Start\n                    ? brightHeaderArrowBackgroundColors[brightHeader]\n                    : 'before:tw-bg-black-100 before:dark:tw-bg-white',\n            ]);\n        default:\n            return 'before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white';\n    }\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}: TooltipProps) => {\n    const triggerRefElement = useRef<HTMLElement | HTMLDivElement | HTMLButtonElement | null>(null);\n    const linkRef = useRef<HTMLAnchorElement | null>(null);\n    const { linkProps } = useLink({}, linkRef);\n    const hasLargePaddingTop = useMemo(\n        () => linkUrl || brightHeader || buttons || heading || headingIcon,\n        [linkUrl, brightHeader, buttons, heading, headingIcon],\n    );\n\n    const placement = placementMap[`${position}-${alignment}`];\n    const tooltipContainerRef = useRef<HTMLDivElement | null>(null);\n    const triggerElementContainerRef = useRef<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const tooltipOffset = withArrow ? 10 : 5;\n    const popperInstance = usePopper(triggerRefElement?.current, tooltipContainerRef.current, {\n        placement,\n        strategy: 'fixed',\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\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 [isOpen, setIsOpen] = useState(false);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    const handleShowTooltipOnHover = useCallback(() => {\n        if (timeoutRef.current) {\n            clearTimeout(timeoutRef.current);\n        }\n        setIsOpen(true);\n    }, [triggerRefElement?.current]);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [triggerRefElement?.current, tooltipContainerRef?.current]);\n\n    const checkIfHovered = useCallback(\n        (event) => {\n            const hoveredElement = event.path ?? event.composedPath?.();\n            const hoverSources = [triggerRefElement, triggerElementContainerRef, tooltipContainerRef];\n\n            if (hoveredElement && hoverSources.some((el) => hoveredElement.includes(el?.current))) {\n                handleShowTooltipOnHover();\n            }\n        },\n        [triggerRefElement?.current, tooltipContainerRef?.current, triggerElementContainerRef?.current],\n    );\n\n    const hasInteractiveElements = !!(buttons?.length || linkUrl?.length);\n    const triggerProps: HTMLAttributes<HTMLElement> = {\n        onMouseOver: (event) => checkIfHovered(event.nativeEvent),\n        onMouseLeave: handleHideTooltipOnHover,\n        onFocus: () => setIsOpen(true),\n        onBlur: () => (!hasInteractiveElements ? setIsOpen(false) : null),\n    };\n\n    return (\n        <>\n            <div {...triggerProps} ref={triggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: triggerRefElement,\n                    })}\n            </div>\n            {createPortal(\n                <div>\n                    {isOpen && (\n                        <div\n                            ref={tooltipContainerRef}\n                            className=\"tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-black-100 dark:tw-bg-white tw-rounded-md tw-shadow-mid tw-text-white dark:tw-text-black-100 tw-z-[120000]\"\n                            data-test-id=\"tooltip\"\n                            role=\"tooltip\"\n                            style={popperInstance.styles.popper}\n                            {...popperInstance.attributes.popper}\n                            onFocus={() => setIsOpen(true)}\n                            onMouseOver={(event) => checkIfHovered(event.nativeEvent)}\n                            onMouseLeave={handleHideTooltipOnHover}\n                        >\n                            {brightHeader && <BrightHeader headerStyle={brightHeader} />}\n                            <div\n                                className={merge([\n                                    'tw-px-4',\n                                    hasLargePaddingTop ? paddingsTop.small : paddingsTop.large,\n                                    linkUrl ? paddingsBottom.small : paddingsBottom.large,\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\">\n                                            {cloneElement(tooltipIcon, { size: IconSize.Size16 })}\n                                        </span>\n                                    )}\n                                    <p className=\"tw-text-s tw-min-w-0 tw-break-words\">{content}</p>\n                                </div>\n                                {linkUrl && (\n                                    <a\n                                        {...linkProps}\n                                        data-test-id=\"tooltip-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 dark:tw-text-black-80 tw-underline tw-mt-1',\n                                            FOCUS_VISIBLE_STYLE,\n                                        ])}\n                                        onBlur={() => (buttons && buttons.length > 0 ? null : setIsOpen(false))}\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                                            <div\n                                                onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}\n                                            >\n                                                <Button\n                                                    style={ButtonStyle.Primary}\n                                                    size={ButtonSize.Small}\n                                                    inverted\n                                                    onClick={buttons[0].action}\n                                                >\n                                                    {buttons[0].label}\n                                                </Button>\n                                            </div>\n                                        )}\n                                        {buttons.length === 2 && (\n                                            <div onBlur={() => setIsOpen(false)}>\n                                                <Button\n                                                    style={ButtonStyle.Secondary}\n                                                    size={ButtonSize.Small}\n                                                    inverted\n                                                    onClick={buttons[1].action}\n                                                >\n                                                    {buttons[1].label}\n                                                </Button>\n                                            </div>\n                                        )}\n                                    </div>\n                                )}\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-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                    )}\n                </div>,\n                document.body,\n            )}\n        </>\n    );\n};\n"],"names":[],"mappings":"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"}