@frontify/fondue 12.0.0-beta.14 → 12.0.0-beta.16

package/dist/components/OverflowMenu/OverflowMenuItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenuItem.es.js","sources":["../../../src/components/OverflowMenu/OverflowMenuItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent, ReactElement } from 'react';\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { MenuItem } from '..';\nimport { getItemElementType } from '@utilities/elements';\n\nexport interface OverflowMenuItemProps {\n    id?: string;\n    label: string;\n    link?: string;\n    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n    decorator?: ReactElement<IconProps>;\n    disabled?: boolean;\n}\n\nexport const OverflowMenuItem = ({\n    id = 'overflow-menu-item',\n    label,\n    link,\n    onClick,\n    disabled = false,\n}: OverflowMenuItemProps) => {\n    const contentElementType = getItemElementType(link, onClick);\n\n    const menuItemElement = <MenuItem title={label} disabled={disabled} />;\n\n    return (\n        <li id={id} data-test-id=\"overflow-menu-item\">\n            {contentElementType === 'a' && <a href={link}>{menuItemElement}</a>}\n            {contentElementType === 'button' && (\n                <button onClick={onClick} type=\"button\" disabled={disabled}>\n                    {menuItemElement}\n                </button>\n            )}\n            {contentElementType === 'span' && <span>{menuItemElement}</span>}\n        </li>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBO,MAAM,KAAmB,CAAC;AAAA,EAC7B,QAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,MACc;AACnB,QAAA,IAAqB,EAAmB,GAAM,CAAO,GAErD,IAAmB,kBAAA,cAAA,GAAA;AAAA,IAAS,OAAO;AAAA,IAAO;AAAA,EAAA,CAAoB;AAEpE,SACK,kBAAA,cAAA,MAAA;AAAA,IAAG;AAAA,IAAQ,gBAAa;AAAA,EACpB,GAAA,MAAuB,OAAQ,kBAAA,cAAA,KAAA;AAAA,IAAE,MAAM;AAAA,EAAA,GAAO,CAAgB,GAC9D,MAAuB,YACnB,kBAAA,cAAA,UAAA;AAAA,IAAO;AAAA,IAAkB,MAAK;AAAA,IAAS;AAAA,EAAA,GACnC,CACL,GAEH,MAAuB,UAAW,kBAAA,cAAA,QAAA,MAAM,CAAgB,CAC7D;AAER;"}

package/dist/components/OverflowMenu/index.d.ts

@@ -0,0 +1 @@
+export * from './OverflowMenu';

package/dist/components/OverflowMenu/useOverflowMenuKeyboardNavigation.d.ts

@@ -0,0 +1 @@
+export declare const useOverflowMenuKeyboardNavigation: (isMenuOpened: boolean, menuContainerRef: HTMLElement | null, focusableElementsSelector?: string) => string;

package/dist/components/OverflowMenu/useOverflowMenuKeyboardNavigation.es.js

@@ -0,0 +1,29 @@
+import { useState as a, useCallback as k, useEffect as c } from "react";
+const E = (r, i, f = "li > button:not(:disabled)") => {
+  const [s, n] = a(0), [t, l] = a(), [d, u] = a(""), y = k((o) => {
+    if (!t || !["Tab", "ArrowDown", "ArrowUp", "Escape"].includes(o.key))
+      return;
+    const e = o.key === "Tab" && !o.shiftKey, b = o.key === "Tab" && o.shiftKey, h = o.key === "Escape", m = e || o.key === "ArrowDown", w = b || o.key === "ArrowUp";
+    if (b && s <= 0 || e && s >= t.length - 1 || h) {
+      u("CLOSE_MENU");
+      return;
+    }
+    m ? n(Math.min(s + 1, t.length - 1)) : w && n(Math.max(s - 1, 0)), o.preventDefault();
+  }, [t, s]);
+  return c(() => {
+    if (!r || !i)
+      return;
+    const o = i.querySelectorAll(f);
+    for (const e of o)
+      e.onkeydown = y;
+    t || l(o);
+  }, [r, i, t, y, f]), c(() => {
+    !t || t[s] && t[s].focus();
+  }, [s, t]), c(() => {
+    r || (l(void 0), u("")), n(0);
+  }, [r]), d;
+};
+export {
+  E as useOverflowMenuKeyboardNavigation
+};
+//# sourceMappingURL=useOverflowMenuKeyboardNavigation.es.js.map

package/dist/components/OverflowMenu/useOverflowMenuKeyboardNavigation.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowMenuKeyboardNavigation.es.js","sources":["../../../src/components/OverflowMenu/useOverflowMenuKeyboardNavigation.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\n\nexport const useOverflowMenuKeyboardNavigation = (\n    isMenuOpened: boolean,\n    menuContainerRef: HTMLElement | null,\n    focusableElementsSelector = 'li > button:not(:disabled)',\n) => {\n    const [currentItemIndex, setCurrentItemIndex] = useState(0);\n    const [itemsElements, setItemsElements] = useState<NodeList>();\n    const [menuKeyboardNavigationAction, setMenuKeyboardNavigationAction] = useState('');\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (!itemsElements || !['Tab', 'ArrowDown', 'ArrowUp', 'Escape'].includes(event.key)) {\n                return;\n            }\n\n            const isTab = event.key === 'Tab' && !event.shiftKey;\n            const isShiftTab = event.key === 'Tab' && event.shiftKey;\n            const isEsc = event.key === 'Escape';\n            const shouldMoveDown = isTab || event.key === 'ArrowDown';\n            const shouldMoveUp = isShiftTab || event.key === 'ArrowUp';\n\n            if (\n                (isShiftTab && currentItemIndex <= 0) ||\n                (isTab && currentItemIndex >= itemsElements.length - 1) ||\n                isEsc\n            ) {\n                setMenuKeyboardNavigationAction('CLOSE_MENU');\n                return;\n            }\n\n            if (shouldMoveDown) {\n                setCurrentItemIndex(Math.min(currentItemIndex + 1, itemsElements.length - 1));\n            } else if (shouldMoveUp) {\n                setCurrentItemIndex(Math.max(currentItemIndex - 1, 0));\n            }\n\n            event.preventDefault();\n        },\n        [itemsElements, currentItemIndex],\n    );\n\n    useEffect(() => {\n        if (!isMenuOpened || !menuContainerRef) {\n            return;\n        }\n\n        const focusableItems = menuContainerRef.querySelectorAll(focusableElementsSelector);\n\n        for (const item of focusableItems) {\n            (item as HTMLButtonElement | HTMLAnchorElement).onkeydown = handleKeyDown;\n        }\n\n        if (!itemsElements) {\n            setItemsElements(focusableItems);\n        }\n    }, [isMenuOpened, menuContainerRef, itemsElements, handleKeyDown, focusableElementsSelector]);\n\n    useEffect(() => {\n        if (!itemsElements) {\n            return;\n        }\n\n        if (itemsElements[currentItemIndex]) {\n            (itemsElements[currentItemIndex] as HTMLButtonElement).focus();\n        }\n    }, [currentItemIndex, itemsElements]);\n\n    useEffect(() => {\n        if (!isMenuOpened) {\n            setItemsElements(undefined);\n            setMenuKeyboardNavigationAction('');\n        }\n\n        setCurrentItemIndex(0);\n    }, [isMenuOpened]);\n\n    return menuKeyboardNavigationAction;\n};\n"],"names":[],"mappings":";AAEO,MAAM,IAAoC,CAC7C,GACA,GACA,IAA4B,iCAC3B;AACD,QAAM,CAAC,GAAkB,KAAuB,EAAS,CAAC,GACpD,CAAC,GAAe,KAAoB,EAAmB,GACvD,CAAC,GAA8B,KAAmC,EAAS,EAAE,GAE7E,IAAgB,EAClB,CAAC,MAAyB;AACtB,QAAI,CAAC,KAAiB,CAAC,CAAC,OAAO,aAAa,WAAW,QAAQ,EAAE,SAAS,EAAM,GAAG;AAC/E;AAGJ,UAAM,IAAQ,EAAM,QAAQ,SAAS,CAAC,EAAM,UACtC,IAAa,EAAM,QAAQ,SAAS,EAAM,UAC1C,IAAQ,EAAM,QAAQ,UACtB,IAAiB,KAAS,EAAM,QAAQ,aACxC,IAAe,KAAc,EAAM,QAAQ;AAG5C,QAAA,KAAc,KAAoB,KAClC,KAAS,KAAoB,EAAc,SAAS,KACrD,GACF;AACE,QAAgC,YAAY;AAC5C;AAAA,IACJ;AAEA,IAAI,IACA,EAAoB,KAAK,IAAI,IAAmB,GAAG,EAAc,SAAS,CAAC,CAAC,IACrE,KACP,EAAoB,KAAK,IAAI,IAAmB,GAAG,CAAC,CAAC,GAGzD,EAAM,eAAe;AAAA,EAAA,GAEzB,CAAC,GAAe,CAAgB,CACpC;AAEA,WAAU,MAAM;AACR,QAAA,CAAC,KAAgB,CAAC;AAClB;AAGE,UAAA,IAAiB,EAAiB,iBAAiB,CAAyB;AAElF,eAAW,KAAQ;AACd,QAA+C,YAAY;AAGhE,IAAK,KACD,EAAiB,CAAc;AAAA,EACnC,GACD,CAAC,GAAc,GAAkB,GAAe,GAAe,CAAyB,CAAC,GAE5F,EAAU,MAAM;AACZ,IAAI,CAAC,KAID,EAAc,MACb,EAAc,GAAwC;EAC3D,GACD,CAAC,GAAkB,CAAa,CAAC,GAEpC,EAAU,MAAM;AACZ,IAAK,KACD,GAAiB,MAAS,GAC1B,EAAgC,EAAE,IAGtC,EAAoB,CAAC;AAAA,EAAA,GACtB,CAAC,CAAY,CAAC,GAEV;AACX;"}

package/dist/components/RichTextEditor/Plugins/LinkPlugin/LinkMarkupElement/LinkMarkupElementNode.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/LinkPlugin/LinkMarkupElement/LinkMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { HTMLPropsAs, LinkRootProps, useElementProps } from '@udecode/plate';\nimport { getUrlFromLinkOrLegacyLink } from '../utils';\nimport { TLinkElement } from '../types';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\n\nconst useLink = (props: LinkRootProps): HTMLPropsAs<'a'> => {\n    const _props = useElementProps<TLinkElement, 'a'>({\n        ...props,\n        elementToAttributes: (element) => ({\n            href: getUrlFromLinkOrLegacyLink(element),\n            target: element.target || '_blank',\n        }),\n    });\n\n    return {\n        ..._props,\n        // quick fix: hovering <a> with href loses the editor focus\n        onMouseOver: (e: MouseEvent) => {\n            e.stopPropagation();\n        },\n    };\n};\n\nexport const LinkMarkupElementNode = (props: LinkRootProps) => {\n    const htmlProps = useLink(props);\n    const { designTokens } = useRichTextEditorContext();\n    const { attributes, children } = props;\n\n    return (\n        <a {...attributes} href={htmlProps.href} target={htmlProps.target} style={designTokens.link}>\n            {children}\n        </a>\n    );\n};\n"],"names":[],"mappings":";;;;AAQA,MAAM,IAAU,CAAC,MASN;AAAA,EACH,GATW,EAAmC;AAAA,IAC9C,GAAG;AAAA,IACH,qBAAqB,CAAC,MAAa;AAAA,MAC/B,MAAM,EAA2B,CAAO;AAAA,MACxC,QAAQ,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA,EAKG,aAAa,CAAC,MAAkB;AAC5B,MAAE,gBAAgB;AAAA,EACtB;AAAA,IAIK,IAAwB,CAAC,MAAyB;AACrD,QAAA,IAAY,EAAQ,CAAK,GACzB,EAAE,oBAAiB,KACnB,EAAE,eAAY,gBAAa;AAEjC,SACK,kBAAA,cAAA,KAAA;AAAA,IAAG,GAAG;AAAA,IAAY,MAAM,EAAU;AAAA,IAAM,QAAQ,EAAU;AAAA,IAAQ,OAAO,EAAa;AAAA,EAAA,GAClF,CACL;AAER;"}
+{"version":3,"file":"LinkMarkupElementNode.es.js","sources":["../../../../../../src/components/RichTextEditor/Plugins/LinkPlugin/LinkMarkupElement/LinkMarkupElementNode.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { MouseEvent } from 'react';\nimport { HTMLPropsAs, LinkRootProps, useElementProps } from '@udecode/plate';\nimport { getUrlFromLinkOrLegacyLink } from '../utils';\nimport { TLinkElement } from '../types';\nimport { useRichTextEditorContext } from '@components/RichTextEditor/context/RichTextEditorContext';\n\nconst useLink = (props: LinkRootProps): HTMLPropsAs<'a'> => {\n    const _props = useElementProps<TLinkElement, 'a'>({\n        ...props,\n        elementToAttributes: (element) => ({\n            href: getUrlFromLinkOrLegacyLink(element),\n            target: element.target || '_blank',\n        }),\n    });\n\n    return {\n        ..._props,\n        // quick fix: hovering <a> with href loses the editor focus\n        onMouseOver: (e: MouseEvent) => {\n            e.stopPropagation();\n        },\n    };\n};\n\nexport const LinkMarkupElementNode = (props: LinkRootProps) => {\n    const htmlProps = useLink(props);\n    const { designTokens } = useRichTextEditorContext();\n    const { attributes, children } = props;\n\n    return (\n        <a {...attributes} href={htmlProps.href} target={htmlProps.target} style={designTokens.link}>\n            {children}\n        </a>\n    );\n};\n"],"names":[],"mappings":";;;;AAQA,MAAM,IAAU,CAAC,MASN;AAAA,EACH,GATW,EAAmC;AAAA,IAC9C,GAAG;AAAA,IACH,qBAAqB,CAAC,MAAa;AAAA,MAC/B,MAAM,EAA2B,CAAO;AAAA,MACxC,QAAQ,EAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B,CACH;AAAA,EAKG,aAAa,CAAC,MAAkB;AAC5B,MAAE,gBAAgB;AAAA,EACtB;AAAA,IAIK,IAAwB,CAAC,MAAyB;AACrD,QAAA,IAAY,EAAQ,CAAK,GACzB,EAAE,oBAAiB,KACnB,EAAE,eAAY,gBAAa;AAEjC,SACK,kBAAA,cAAA,KAAA;AAAA,IAAG,GAAG;AAAA,IAAY,MAAM,EAAU;AAAA,IAAM,QAAQ,EAAU;AAAA,IAAQ,OAAO,EAAa;AAAA,EAAA,GAClF,CACL;AAER;"}

package/dist/components/RichTextEditor/serializer/utils/serializeLeafToHtml.d.ts

@@ -1,2 +1 @@
-import { TDescendant } from '@udecode/plate';
-export declare const serializeLeafToHtml: (node: TDescendant) => string;
+export declare const serializeLeafToHtml: (node: any) => string;

package/dist/components/RichTextEditor/serializer/utils/serializeLeafToHtml.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"serializeLeafToHtml.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeLeafToHtml.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TDescendant } from '@udecode/plate';\nimport {\n    BOLD_CLASSES,\n    CODE_CLASSES,\n    ITALIC_CLASSES,\n    STRIKETHROUGH_CLASSES,\n    UNDERLINE_CLASSES,\n} from '@components/RichTextEditor/Plugins';\nimport escapeHtml from 'escape-html';\n\nexport const serializeLeafToHtml = (node: TDescendant): string => {\n    let string = escapeHtml(node.text);\n    if (node.bold) {\n        string = `<span class=\"${BOLD_CLASSES}\">${string}</span>`;\n    }\n    if (node.italic) {\n        string = `<span class=\"${ITALIC_CLASSES}\">${string}</span>`;\n    }\n    if (node.underline) {\n        string = `<span class=\"${UNDERLINE_CLASSES}\">${string}</span>`;\n    }\n    if (node.strikethrough) {\n        string = `<span class=\"${STRIKETHROUGH_CLASSES}\">${string}</span>`;\n    }\n    if (node.code) {\n        string = `<span class=\"${CODE_CLASSES}\">${string}</span>`;\n    }\n    return string;\n};\n"],"names":["escapeHtml"],"mappings":";;;;;;;AAYa,MAAA,IAAsB,CAAC,MAA8B;AAC1D,MAAA,IAASA,EAAW,EAAK,IAAI;AACjC,SAAI,EAAK,QACL,KAAS,gBAAgB,MAAiB,aAE1C,EAAK,UACL,KAAS,gBAAgB,MAAmB,aAE5C,EAAK,aACL,KAAS,gBAAgB,MAAsB,aAE/C,EAAK,iBACL,KAAS,gBAAgB,MAA0B,aAEnD,EAAK,QACL,KAAS,gBAAgB,MAAiB,aAEvC;AACX;"}
+{"version":3,"file":"serializeLeafToHtml.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeLeafToHtml.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    BOLD_CLASSES,\n    CODE_CLASSES,\n    ITALIC_CLASSES,\n    STRIKETHROUGH_CLASSES,\n    UNDERLINE_CLASSES,\n} from '@components/RichTextEditor/Plugins';\nimport escapeHtml from 'escape-html';\n\nexport const serializeLeafToHtml = (node: any): string => {\n    let string = escapeHtml(node.text);\n    if (node.bold) {\n        string = `<span class=\"${BOLD_CLASSES}\">${string}</span>`;\n    }\n    if (node.italic) {\n        string = `<span class=\"${ITALIC_CLASSES}\">${string}</span>`;\n    }\n    if (node.underline) {\n        string = `<span class=\"${UNDERLINE_CLASSES}\">${string}</span>`;\n    }\n    if (node.strikethrough) {\n        string = `<span class=\"${STRIKETHROUGH_CLASSES}\">${string}</span>`;\n    }\n    if (node.code) {\n        string = `<span class=\"${CODE_CLASSES}\">${string}</span>`;\n    }\n    return string;\n};\n"],"names":["escapeHtml"],"mappings":";;;;;;;AAWa,MAAA,IAAsB,CAAC,MAAsB;AAClD,MAAA,IAASA,EAAW,EAAK,IAAI;AACjC,SAAI,EAAK,QACL,KAAS,gBAAgB,MAAiB,aAE1C,EAAK,UACL,KAAS,gBAAgB,MAAmB,aAE5C,EAAK,aACL,KAAS,gBAAgB,MAAsB,aAE/C,EAAK,iBACL,KAAS,gBAAgB,MAA0B,aAEnD,EAAK,QACL,KAAS,gBAAgB,MAAiB,aAEvC;AACX;"}

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.d.ts

@@ -1,3 +1,2 @@
-import { TDescendant } from '@udecode/plate';
 import { DesignTokens } from '../../../RichTextEditor/types';
-export declare const serializeNodeToHtmlRecursive: (node: TDescendant, designTokens: DesignTokens) => string;
+export declare const serializeNodeToHtmlRecursive: (node: any, designTokens: DesignTokens) => string;

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js

@@ -1,6 +1,6 @@
-import { ELEMENT_LINK as c, ELEMENT_LI as i, ELEMENT_OL as m, ELEMENT_UL as s, ELEMENT_PARAGRAPH as $ } from "@udecode/plate";
+import { ELEMENT_LINK as c, ELEMENT_LI as m, ELEMENT_OL as i, ELEMENT_UL as s, ELEMENT_PARAGRAPH as $ } from "@udecode/plate";
 import "../../Plugins/index.es.js";
-import { TextStyles as l } from "../../Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
+import { TextStyles as E } from "../../Plugins/TextStylePlugin/TextStyles/textStyles.es.js";
 import "../../Plugins/TextStylePlugin/TextStyles/Custom1Plugin/createCustom1Plugin.es.js";
 import "../../Plugins/TextStylePlugin/TextStyles/Custom2Plugin/createCustom2Plugin.es.js";
 import "../../Plugins/TextStylePlugin/TextStyles/Custom3Plugin/createCustom3Plugin.es.js";
@@ -9,43 +9,47 @@ import "../../Plugins/TextStylePlugin/TextStyles/Heading2Plugin/createHeading2Pl
 import "../../Plugins/TextStylePlugin/TextStyles/Heading3Plugin/createHeading3Plugin.es.js";
 import "../../Plugins/TextStylePlugin/TextStyles/Heading4Plugin/createHeading4Plugin.es.js";
 import "../../Plugins/TextStylePlugin/TextStyles/Quote/createQuotePlugin.es.js";
-import a from "../../../../node_modules/escape-html/index.es.js";
+import p from "../../../../node_modules/escape-html/index.es.js";
 import { reactCssPropsToCss as e } from "./reactCssPropsToCss.es.js";
 import { serializeLeafToHtml as o } from "./serializeLeafToHtml.es.js";
 import { ELEMENT_CHECK_ITEM as u } from "../../Plugins/CheckboxListPlugin/id.es.js";
 import { OL_CLASSES as L } from "../../Plugins/ListPlugin/OrderedListPlugin/OrderedListMarkupElement.es.js";
 import { UL_CLASSES as h } from "../../Plugins/ListPlugin/UnorderedListPlugin/UnorderedListMarkupElement.es.js";
-const N = (E, t) => {
-  if (!E.children)
-    return o(E);
-  const r = E.children.map((p) => N(p, t)).join("");
-  switch (E.type) {
-    case l.ELEMENT_HEADING1:
+const N = (l, t) => {
+  if (!l.children)
+    return o(l);
+  const r = l.children.map((a) => N(a, t)).join("");
+  switch (l.type) {
+    case E.ELEMENT_HEADING1:
       return `<h1 style="${e(t.heading1)}">${r}</h1>`;
-    case l.ELEMENT_HEADING2:
+    case E.ELEMENT_HEADING2:
       return `<h2 style="${e(t.heading2)}">${r}</h2>`;
-    case l.ELEMENT_HEADING3:
+    case E.ELEMENT_HEADING3:
       return `<h3 style="${e(t.heading3)}">${r}</h3>`;
-    case l.ELEMENT_HEADING4:
+    case E.ELEMENT_HEADING4:
       return `<h4 style="${e(t.heading4)}">${r}</h4>`;
-    case l.ELEMENT_CUSTOM1:
+    case E.ELEMENT_CUSTOM1:
       return `<p style="${e(t.custom1)}">${r}</p>`;
-    case l.ELEMENT_CUSTOM2:
+    case E.ELEMENT_CUSTOM2:
       return `<p style="${e(t.custom2)}">${r}</p>`;
-    case l.ELEMENT_CUSTOM3:
+    case E.ELEMENT_CUSTOM3:
       return `<p style="${e(t.custom3)}">${r}</p>`;
-    case l.ELEMENT_QUOTE:
+    case E.ELEMENT_QUOTE:
       return `<p style="${e(t.quote)}">${r}</p>`;
     case $:
       return `<p>${r}</p>`;
     case s:
       return `<ul class="${h}">${r}</ul>`;
-    case m:
-      return `<ol class="${L}">${r}</ol>`;
     case i:
+      return `<ol class="${L}">${r}</ol>`;
+    case m:
       return `<li>${r}</li>`;
     case c:
-      return E.chosenLink ? `<a style="${e(t.link)}" target=${E.chosenLink.openInNewTab ? "_blank" : "_self"} href="${a(E.chosenLink.searchResult.link)}">${r}</a>` : `<a style="${e(t.link)}" href="${a(E.url)}">${r}</a>`;
+      if (l.chosenLink) {
+        const { chosenLink: a } = l;
+        return `<a style="${e(t.link)}" target=${a.openInNewTab ? "_blank" : "_self"} href="${p(a.searchResult.link)}">${r}</a>`;
+      }
+      return `<a style="${e(t.link)}" href="${p(l.url)}">${r}</a>`;
     case u:
       return `<input type="checkbox"/><label>${r}</label>`;
     default:

package/dist/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_LI, ELEMENT_LINK, ELEMENT_OL, ELEMENT_PARAGRAPH, ELEMENT_UL, TDescendant } from '@udecode/plate';\nimport { ELEMENT_CHECK_ITEM, OL_CLASSES, UL_CLASSES } from '@components/RichTextEditor/Plugins';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport { TextStyles } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\nimport escapeHtml from 'escape-html';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\n\nexport const serializeNodeToHtmlRecursive = (node: TDescendant, designTokens: DesignTokens): string => {\n    if (!node.children) {\n        return serializeLeafToHtml(node);\n    }\n\n    const children = node.children.map((n: TDescendant) => serializeNodeToHtmlRecursive(n, designTokens)).join('');\n\n    switch (node.type) {\n        case TextStyles.ELEMENT_HEADING1:\n            return `<h1 style=\"${reactCssPropsToCss(designTokens.heading1)}\">${children}</h1>`;\n        case TextStyles.ELEMENT_HEADING2:\n            return `<h2 style=\"${reactCssPropsToCss(designTokens.heading2)}\">${children}</h2>`;\n        case TextStyles.ELEMENT_HEADING3:\n            return `<h3 style=\"${reactCssPropsToCss(designTokens.heading3)}\">${children}</h3>`;\n        case TextStyles.ELEMENT_HEADING4:\n            return `<h4 style=\"${reactCssPropsToCss(designTokens.heading4)}\">${children}</h4>`;\n        case TextStyles.ELEMENT_CUSTOM1:\n            return `<p style=\"${reactCssPropsToCss(designTokens.custom1)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM2:\n            return `<p style=\"${reactCssPropsToCss(designTokens.custom2)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM3:\n            return `<p style=\"${reactCssPropsToCss(designTokens.custom3)}\">${children}</p>`;\n        case TextStyles.ELEMENT_QUOTE:\n            return `<p style=\"${reactCssPropsToCss(designTokens.quote)}\">${children}</p>`;\n        case ELEMENT_PARAGRAPH:\n            return `<p>${children}</p>`;\n        case ELEMENT_UL:\n            return `<ul class=\"${UL_CLASSES}\">${children}</ul>`;\n        case ELEMENT_OL:\n            return `<ol class=\"${OL_CLASSES}\">${children}</ol>`;\n        case ELEMENT_LI:\n            return `<li>${children}</li>`;\n        case ELEMENT_LINK:\n            if (node.chosenLink) {\n                return `<a style=\"${reactCssPropsToCss(designTokens.link)}\" target=${\n                    node.chosenLink.openInNewTab ? '_blank' : '_self'\n                } href=\"${escapeHtml(node.chosenLink.searchResult.link)}\">${children}</a>`;\n            }\n            return `<a style=\"${reactCssPropsToCss(designTokens.link)}\" href=\"${escapeHtml(node.url)}\">${children}</a>`;\n        case ELEMENT_CHECK_ITEM:\n            return `<input type=\"checkbox\"/><label>${children}</label>`;\n\n        default:\n            return children;\n    }\n};\n"],"names":["escapeHtml"],"mappings":";;;;;;;;;;;;;;;;;AAUa,MAAA,IAA+B,CAAC,GAAmB,MAAuC;AAC/F,MAAA,CAAC,EAAK;AACN,WAAO,EAAoB,CAAI;AAGnC,QAAM,IAAW,EAAK,SAAS,IAAI,CAAC,MAAmB,EAA6B,GAAG,CAAY,CAAC,EAAE,KAAK,EAAE;AAE7G,UAAQ,EAAK;AAAA,SACJ,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,KAAK,MAAM;AAAA,SAC9D;AACD,aAAO,MAAM;AAAA,SACZ;AACD,aAAO,cAAc,MAAe;AAAA,SACnC;AACD,aAAO,cAAc,MAAe;AAAA,SACnC;AACD,aAAO,OAAO;AAAA,SACb;AACD,aAAI,EAAK,aACE,aAAa,EAAmB,EAAa,IAAI,aACpD,EAAK,WAAW,eAAe,WAAW,iBACpCA,EAAW,EAAK,WAAW,aAAa,IAAI,MAAM,UAEzD,aAAa,EAAmB,EAAa,IAAI,YAAYA,EAAW,EAAK,GAAG,MAAM;AAAA,SAC5F;AACD,aAAO,kCAAkC;AAAA;AAGlC,aAAA;AAAA;AAEnB;"}
+{"version":3,"file":"serializeNodeToHtmlRecursive.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/serializeNodeToHtmlRecursive.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_LI, ELEMENT_LINK, ELEMENT_OL, ELEMENT_PARAGRAPH, ELEMENT_UL, TDescendant } from '@udecode/plate';\nimport { ELEMENT_CHECK_ITEM, OL_CLASSES, UL_CLASSES } from '@components/RichTextEditor/Plugins';\nimport { DesignTokens } from '@components/RichTextEditor/types';\nimport { TextStyles } from '@components/RichTextEditor/Plugins/TextStylePlugin/TextStyles';\nimport escapeHtml from 'escape-html';\nimport { reactCssPropsToCss } from './reactCssPropsToCss';\nimport { serializeLeafToHtml } from './serializeLeafToHtml';\n\nexport const serializeNodeToHtmlRecursive = (node: any, designTokens: DesignTokens): string => {\n    if (!node.children) {\n        return serializeLeafToHtml(node);\n    }\n    const children = node.children.map((n: TDescendant) => serializeNodeToHtmlRecursive(n, designTokens)).join('');\n\n    switch (node.type) {\n        case TextStyles.ELEMENT_HEADING1:\n            return `<h1 style=\"${reactCssPropsToCss(designTokens.heading1)}\">${children}</h1>`;\n        case TextStyles.ELEMENT_HEADING2:\n            return `<h2 style=\"${reactCssPropsToCss(designTokens.heading2)}\">${children}</h2>`;\n        case TextStyles.ELEMENT_HEADING3:\n            return `<h3 style=\"${reactCssPropsToCss(designTokens.heading3)}\">${children}</h3>`;\n        case TextStyles.ELEMENT_HEADING4:\n            return `<h4 style=\"${reactCssPropsToCss(designTokens.heading4)}\">${children}</h4>`;\n        case TextStyles.ELEMENT_CUSTOM1:\n            return `<p style=\"${reactCssPropsToCss(designTokens.custom1)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM2:\n            return `<p style=\"${reactCssPropsToCss(designTokens.custom2)}\">${children}</p>`;\n        case TextStyles.ELEMENT_CUSTOM3:\n            return `<p style=\"${reactCssPropsToCss(designTokens.custom3)}\">${children}</p>`;\n        case TextStyles.ELEMENT_QUOTE:\n            return `<p style=\"${reactCssPropsToCss(designTokens.quote)}\">${children}</p>`;\n        case ELEMENT_PARAGRAPH:\n            return `<p>${children}</p>`;\n        case ELEMENT_UL:\n            return `<ul class=\"${UL_CLASSES}\">${children}</ul>`;\n        case ELEMENT_OL:\n            return `<ol class=\"${OL_CLASSES}\">${children}</ol>`;\n        case ELEMENT_LI:\n            return `<li>${children}</li>`;\n        case ELEMENT_LINK:\n            if (node.chosenLink) {\n                const { chosenLink } = node;\n                return `<a style=\"${reactCssPropsToCss(designTokens.link)}\" target=${\n                    chosenLink.openInNewTab ? '_blank' : '_self'\n                } href=\"${escapeHtml(chosenLink.searchResult.link)}\">${children}</a>`;\n            }\n            return `<a style=\"${reactCssPropsToCss(designTokens.link)}\" href=\"${escapeHtml(node.url)}\">${children}</a>`;\n        case ELEMENT_CHECK_ITEM:\n            return `<input type=\"checkbox\"/><label>${children}</label>`;\n\n        default:\n            return children;\n    }\n};\n"],"names":["escapeHtml"],"mappings":";;;;;;;;;;;;;;;;;AAUa,MAAA,IAA+B,CAAC,GAAW,MAAuC;AACvF,MAAA,CAAC,EAAK;AACN,WAAO,EAAoB,CAAI;AAEnC,QAAM,IAAW,EAAK,SAAS,IAAI,CAAC,MAAmB,EAA6B,GAAG,CAAY,CAAC,EAAE,KAAK,EAAE;AAE7G,UAAQ,EAAK;AAAA,SACJ,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,cAAc,EAAmB,EAAa,QAAQ,MAAM;AAAA,SAClE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,OAAO,MAAM;AAAA,SAChE,EAAW;AACZ,aAAO,aAAa,EAAmB,EAAa,KAAK,MAAM;AAAA,SAC9D;AACD,aAAO,MAAM;AAAA,SACZ;AACD,aAAO,cAAc,MAAe;AAAA,SACnC;AACD,aAAO,cAAc,MAAe;AAAA,SACnC;AACD,aAAO,OAAO;AAAA,SACb;AACD,UAAI,EAAK,YAAY;AACjB,cAAM,EAAE,kBAAe;AACvB,eAAO,aAAa,EAAmB,EAAa,IAAI,aACpD,EAAW,eAAe,WAAW,iBAC/BA,EAAW,EAAW,aAAa,IAAI,MAAM;AAAA,MAC3D;AACO,aAAA,aAAa,EAAmB,EAAa,IAAI,YAAYA,EAAW,EAAK,GAAG,MAAM;AAAA,SAC5F;AACD,aAAO,kCAAkC;AAAA;AAGlC,aAAA;AAAA;AAEnB;"}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -20,6 +20,7 @@ export declare type TooltipProps = PropsWithChildren<{
     flip?: boolean;
     withArrow?: boolean;
     hoverDelay?: number;
+    enterDelay?: number;
     open?: boolean;
     disabled?: boolean;
     hidden?: boolean;
@@ -35,4 +36,4 @@ export declare enum TooltipAlignment {
     Middle = "Middle",
     End = "End"
 }
-export declare const Tooltip: ({ content, tooltipIcon, heading, headingIcon, linkUrl, linkLabel, brightHeader, buttons, children, position, alignment, withArrow, flip, triggerElement, hoverDelay, open, disabled, hidden, }: TooltipProps) => JSX.Element;
+export declare const Tooltip: ({ content, tooltipIcon, heading, headingIcon, linkUrl, linkLabel, brightHeader, buttons, children, position, alignment, withArrow, flip, triggerElement, hoverDelay, enterDelay, open, disabled, hidden, }: TooltipProps) => JSX.Element;

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

@@ -1,21 +1,21 @@
-import { Button as D } from "../Button/Button.es.js";
-import { ButtonStyle as $, ButtonEmphasis as P, ButtonSize as V } from "../Button/ButtonTypes.es.js";
-import { IconSize as Y } from "../../foundation/Icon/IconSize.es.js";
-import { useLink as se } from "@react-aria/link";
-import { FOCUS_VISIBLE_STYLE as ne } from "../../utilities/focusStyle.es.js";
+import { Button as P } from "../Button/Button.es.js";
+import { ButtonStyle as V, ButtonEmphasis as Y, ButtonSize as j } from "../Button/ButtonTypes.es.js";
+import { IconSize as q } from "../../foundation/Icon/IconSize.es.js";
+import { useLink as ne } from "@react-aria/link";
+import { FOCUS_VISIBLE_STYLE as ce } from "../../utilities/focusStyle.es.js";
 import { merge as c } from "../../utilities/merge.es.js";
-import e, { useRef as f, useMemo as ce, useState as j, useCallback as h, useEffect as we, cloneElement as S } from "react";
-import { BrightHeader as me, brightHeaderArrowBackgroundColors as x } from "./BrightHeader.es.js";
-import { usePopper as fe } from "react-popper";
-import { createPortal as de } from "react-dom";
-const q = {
+import e, { useRef as d, useMemo as me, useState as D, useCallback as S, useEffect as we, cloneElement as x } from "react";
+import { BrightHeader as fe, brightHeaderArrowBackgroundColors as v } from "./BrightHeader.es.js";
+import { usePopper as de } from "react-popper";
+import { createPortal as pe } from "react-dom";
+const G = {
   small: "tw-pt-3.5",
   large: "tw-pt-4"
-}, G = {
+}, J = {
   small: "tw-pb-3.5",
   large: "tw-pb-4"
 };
-var pe = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Right = "Right", t.Bottom = "Bottom", t.Left = "Left", t))(pe || {}), ie = /* @__PURE__ */ ((t) => (t.Start = "Start", t.Middle = "Middle", t.End = "End", t))(ie || {});
+var ie = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Right = "Right", t.Bottom = "Bottom", t.Left = "Left", t))(ie || {}), ue = /* @__PURE__ */ ((t) => (t.Start = "Start", t.Middle = "Middle", t.End = "End", t))(ue || {});
 const be = {
   ["Top-Start"]: "top-start",
   ["Top-End"]: "top-end",
@@ -29,164 +29,169 @@ const be = {
   ["Right-Middle"]: "right",
   ["Bottom-Middle"]: "bottom",
   ["Left-Middle"]: "left"
-}, ue = (t, o, n) => {
+}, Ee = (t, a, n) => {
   switch (!0) {
     case t.toString().includes("Top".toLowerCase()):
       return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-black-100 before:dark:tw-bg-white";
     case t.toString().includes("Right".toLowerCase()):
       return c([
         "before:tw-border-t-0 before:tw-border-r-0 tw-left-[-6px]",
-        o && n === "Start" ? x[o] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        a && n === "Start" ? v[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
       ]);
     case t.toString().includes("Bottom".toLowerCase()):
       return c([
         "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
-        o ? x[o] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        a ? v[a] : "before:tw-bg-black-100 before:dark:tw-bg-white"
       ]);
     case t.toString().includes("Left".toLowerCase()):
       return c([
         "before:tw-border-b-0 before:tw-border-l-0 tw-right-[-6px]",
-        o && n === "Start" ? x[o] : "before:tw-bg-black-100 before:dark:tw-bg-white"
+        a && n === "Start" ? v[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";
   }
-}, Re = ({
+}, Te = ({
   content: t,
-  tooltipIcon: o,
+  tooltipIcon: a,
   heading: n,
-  headingIcon: d,
-  linkUrl: l,
+  headingIcon: p,
+  linkUrl: s,
   linkLabel: b,
   brightHeader: w,
   buttons: r,
-  children: J,
-  position: v = "Bottom",
-  alignment: B = "Middle",
-  withArrow: p,
-  flip: K = !0,
-  triggerElement: k,
-  hoverDelay: C = 200,
-  open: M = !1,
-  disabled: Q = !1,
-  hidden: W = !1
+  children: K,
+  position: B = "Bottom",
+  alignment: k = "Middle",
+  withArrow: i,
+  flip: Q = !0,
+  triggerElement: C,
+  hoverDelay: M = 200,
+  enterDelay: E = 0,
+  open: L = !1,
+  disabled: W = !1,
+  hidden: X = !1
 }) => {
-  var T, O;
-  const m = f(null), L = f(null), { linkProps: X } = se({}, L), Z = ce(() => l || w || r || n || d, [l, w, r, n, d]), A = be[`${v}-${B}`], u = f(null), R = f(null), [H, U] = j(null), ee = p ? 10 : 5, i = fe(m == null ? void 0 : m.current, u.current, {
-    placement: A,
+  var O, F;
+  const f = d(null), R = d(null), { linkProps: Z } = ne({}, R), A = me(() => s || w || r || n || p, [s, w, r, n, p]), H = be[`${B}-${k}`], g = d(null), T = d(null), [U, ee] = D(null), te = i ? 10 : 5, u = de(f == null ? void 0 : f.current, g.current, {
+    placement: H,
     strategy: "fixed",
     modifiers: [
       {
         name: "arrow",
         options: {
-          element: H
+          element: U
         }
       },
       {
         name: "offset",
         options: {
-          offset: [0, ee]
+          offset: [0, te]
         }
       },
       {
         name: "flip",
-        enabled: K
+        enabled: Q
       }
     ]
-  }), te = (O = (T = i.state) == null ? void 0 : T.placement) != null ? O : v, re = ue(te, w, B), [oe, a] = j(!1), E = f(null), y = h(() => {
-    E.current && clearTimeout(E.current), a(!0);
-  }, []), N = h(() => {
-    E.current = setTimeout(() => a(!1), C);
-  }, [C]), z = h((s) => {
-    var I, _;
-    const F = (_ = s.path) != null ? _ : (I = s.composedPath) == null ? void 0 : I.call(s);
-    F && [m, R, u].some((g) => F.includes(g == null ? void 0 : g.current)) && y();
-  }, [y]), ae = !!((r == null ? void 0 : r.length) || (l == null ? void 0 : l.length)), le = {
-    onMouseOver: (s) => z(s.nativeEvent),
+  }), re = (F = (O = u.state) == null ? void 0 : O.placement) != null ? F : B, oe = Ee(re, w, k), [ae, o] = D(!1), m = d(null), N = S(() => {
+    m.current && clearTimeout(m.current), m.current = setTimeout(() => o(!1), M);
+  }, [M]), z = S(() => {
+    if (m.current && clearTimeout(m.current), E) {
+      m.current = setTimeout(() => o(!0), E);
+      return;
+    }
+    o(!0);
+  }, [E]), y = S((l) => {
+    var _, $;
+    const I = ($ = l.path) != null ? $ : (_ = l.composedPath) == null ? void 0 : _.call(l);
+    I && [f, T, g].some((h) => I.includes(h == null ? void 0 : h.current)) && z();
+  }, [z]), se = !!((r == null ? void 0 : r.length) || (s == null ? void 0 : s.length)), le = {
+    onMouseOver: (l) => y(l.nativeEvent),
     onMouseLeave: N,
-    onFocus: () => a(!0),
-    onBlur: () => ae ? null : a(!1)
+    onFocus: () => o(!0),
+    onBlur: () => se ? null : o(!1)
   };
   return we(() => {
-    a(M);
-  }, [M]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
+    o(L);
+  }, [L]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
     ...le,
-    ref: R
-  }, k && S(k, {
-    ref: m
-  })), oe && !Q && de(/* @__PURE__ */ e.createElement("div", {
-    ref: u,
+    ref: T
+  }, C && x(C, {
+    ref: f
+  })), ae && !W && pe(/* @__PURE__ */ e.createElement("div", {
+    ref: g,
     className: c([
       "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]",
-      W && "tw-hidden"
+      X && "tw-hidden"
     ]),
     "data-test-id": "tooltip",
     role: "tooltip",
-    style: i.styles.popper,
-    ...i.attributes.popper,
-    onFocus: () => a(!0),
-    onMouseOver: (s) => z(s.nativeEvent),
+    style: u.styles.popper,
+    ...u.attributes.popper,
+    onFocus: () => o(!0),
+    onMouseOver: (l) => y(l.nativeEvent),
     onMouseLeave: N
-  }, w && /* @__PURE__ */ e.createElement(me, {
+  }, w && /* @__PURE__ */ e.createElement(fe, {
     headerStyle: w
   }), /* @__PURE__ */ e.createElement("div", {
     className: c([
       "tw-px-4",
-      Z ? q.small : q.large,
-      l ? G.small : G.large
+      A ? G.small : G.large,
+      s ? J.small : J.large
     ])
   }, n && /* @__PURE__ */ e.createElement("h4", {
     className: "tw-flex tw-text-m tw-font-bold tw-mb-1"
-  }, d && /* @__PURE__ */ e.createElement("span", {
+  }, p && /* @__PURE__ */ e.createElement("span", {
     className: "tw-mr-1.5"
-  }, S(d, { size: Y.Size20 })), n), /* @__PURE__ */ e.createElement("div", {
+  }, x(p, { size: q.Size20 })), n), /* @__PURE__ */ e.createElement("div", {
     className: "tw-flex"
-  }, o && /* @__PURE__ */ e.createElement("span", {
+  }, a && /* @__PURE__ */ e.createElement("span", {
     className: "tw-shrink-0 tw-mr-1"
-  }, S(o, { size: Y.Size16 })), /* @__PURE__ */ e.createElement("p", {
+  }, x(a, { size: q.Size16 })), /* @__PURE__ */ e.createElement("p", {
     className: "tw-text-s tw-min-w-0 tw-break-words"
-  }, t)), l && /* @__PURE__ */ e.createElement("a", {
-    ...X,
+  }, t)), s && /* @__PURE__ */ e.createElement("a", {
+    ...Z,
     "data-test-id": "tooltip-link",
-    ref: L,
-    href: l,
+    ref: R,
+    href: s,
     target: "_blank",
     rel: "noopener noreferrer",
     className: c([
       "tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1",
-      ne
+      ce
     ]),
-    onBlur: () => r && r.length > 0 ? null : a(!1)
+    onBlur: () => r && r.length > 0 ? null : o(!1)
   }, b != null ? b : "Click here to learn more."), r && /* @__PURE__ */ e.createElement("div", {
     className: "tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4"
   }, r.length > 0 && /* @__PURE__ */ e.createElement("div", {
-    onBlur: () => r && r.length < 2 ? a(!1) : null
-  }, /* @__PURE__ */ e.createElement(D, {
-    style: $.Default,
-    emphasis: P.Strong,
-    size: V.Small,
+    onBlur: () => r && r.length < 2 ? o(!1) : null
+  }, /* @__PURE__ */ e.createElement(P, {
+    style: V.Default,
+    emphasis: Y.Strong,
+    size: j.Small,
     onClick: r[0].action
   }, r[0].label)), r.length === 2 && /* @__PURE__ */ e.createElement("div", {
-    onBlur: () => a(!1)
-  }, /* @__PURE__ */ e.createElement(D, {
-    style: $.Default,
-    emphasis: P.Default,
-    size: V.Small,
+    onBlur: () => o(!1)
+  }, /* @__PURE__ */ e.createElement(P, {
+    style: V.Default,
+    emphasis: Y.Default,
+    size: j.Small,
     onClick: r[1].action
   }, r[1].label))), /* @__PURE__ */ e.createElement("div", {
     "data-test-id": "popover-arrow",
-    "data-popper-arrow": p,
-    ref: U,
-    style: i.styles.arrow,
+    "data-popper-arrow": i,
+    ref: ee,
+    style: u.styles.arrow,
     className: c([
-      p && "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",
-      p && re
+      i && "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",
+      i && oe
     ])
-  })), J), document.body));
+  })), K), document.body));
 };
 export {
-  Re as Tooltip,
-  ie as TooltipAlignment,
-  pe as TooltipPosition
+  Te as Tooltip,
+  ue as TooltipAlignment,
+  ie as TooltipPosition
 };
 //# sourceMappingURL=Tooltip.es.js.map

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    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\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    open?: boolean;\n    disabled?: boolean;\n    hidden?: boolean;\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    open = false,\n    disabled = false,\n    hidden = false,\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    }, []);\n\n    const handleHideTooltipOnHover = useCallback(() => {\n        timeoutRef.current = setTimeout(() => setIsOpen(false), hoverDelay);\n    }, [hoverDelay]);\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        [handleShowTooltipOnHover],\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    useEffect(() => {\n        setIsOpen(open);\n    }, [open]);\n\n    return (\n        <>\n            <div {...triggerProps} ref={triggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: triggerRefElement,\n                    })}\n            </div>\n            {isOpen &&\n                !disabled &&\n                createPortal(\n                    <div\n                        ref={tooltipContainerRef}\n                        className={merge([\n                            '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                            hidden && 'tw-hidden',\n                        ])}\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 onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n                                            <Button\n                                                style={ButtonStyle.Default}\n                                                emphasis={ButtonEmphasis.Strong}\n                                                size={ButtonSize.Small}\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.Default}\n                                                emphasis={ButtonEmphasis.Default}\n                                                size={ButtonSize.Small}\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                    document.body,\n                )}\n        </>\n    );\n};\n"],"names":[],"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    HTMLAttributes,\n    PropsWithChildren,\n    ReactChild,\n    ReactElement,\n    ReactNode,\n    cloneElement,\n    useCallback,\n    useEffect,\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    enterDelay?: number;\n    open?: boolean;\n    disabled?: boolean;\n    hidden?: boolean;\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    enterDelay = 0,\n    open = false,\n    disabled = false,\n    hidden = false,\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 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) => {\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        [handleShowTooltipOnHover],\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    useEffect(() => {\n        setIsOpen(open);\n    }, [open]);\n\n    return (\n        <>\n            <div {...triggerProps} ref={triggerElementContainerRef}>\n                {triggerElement &&\n                    cloneElement(triggerElement, {\n                        ref: triggerRefElement,\n                    })}\n            </div>\n            {isOpen &&\n                !disabled &&\n                createPortal(\n                    <div\n                        ref={tooltipContainerRef}\n                        className={merge([\n                            '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                            hidden && 'tw-hidden',\n                        ])}\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 onBlur={() => (buttons && buttons.length < 2 ? setIsOpen(false) : null)}>\n                                            <Button\n                                                style={ButtonStyle.Default}\n                                                emphasis={ButtonEmphasis.Strong}\n                                                size={ButtonSize.Small}\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.Default}\n                                                emphasis={ButtonEmphasis.Default}\n                                                size={ButtonSize.Small}\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                    document.body,\n                )}\n        </>\n    );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/Tree/Node.d.ts

@@ -5,7 +5,7 @@ import { DraggableItem } from '../../utilities/dnd';
 export declare type RenderNodeArrayData = Omit<NodeProps, 'isFirst' | 'strong' | 'node'> & {
     nodes: DraggableItem<TreeNodeItem>[];
 };
-export declare const renderNodeArray: ({ nodes, activeIds, treeId, onClick, onDrop, onEditableSave, parentIds, }: RenderNodeArrayData) => JSX.Element[];
+export declare const renderNodeArray: ({ nodes, activeIds, treeId, onClick, onDrop, onEditableSave, onNodeExpand, forceCaret, parentIds, }: RenderNodeArrayData) => JSX.Element[];
 export interface TreeNodeItem extends TreeFlatListItem {
     nodes?: DraggableItem<TreeNodeItem>[];
 }
@@ -20,6 +20,8 @@ declare type NodeProps = {
     treeId: string;
     onDrop?: OnDropCallback<TreeNodeItem>;
     onEditableSave?: (targetItemId: string, value: string) => void;
+    forceCaret?: boolean;
+    onNodeExpand?: (itemId: string) => void;
 };
-export declare const Node: ({ node, strong, activeIds, onClick, parentIds, isFirst, onDrop, onEditableSave, treeId, }: NodeProps) => ReactElement<NodeProps>;
+export declare const Node: ({ node, strong, activeIds, onClick, parentIds, isFirst, onDrop, onEditableSave, onNodeExpand, treeId, }: NodeProps) => ReactElement<NodeProps>;
 export {};