@frontify/fondue 12.0.0-beta.2 → 12.0.0-beta.4

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

@@ -1,13 +1,13 @@
 import { Button as I } from "../Button/Button.es.js";
 import { ButtonStyle as _, ButtonEmphasis as $, ButtonSize as P } from "../Button/ButtonTypes.es.js";
 import { IconSize as V } from "../../foundation/Icon/IconSize.es.js";
-import { useLink as ae } from "@react-aria/link";
-import { FOCUS_VISIBLE_STYLE as se } from "../../utilities/focusStyle.es.js";
+import { useLink as le } from "@react-aria/link";
+import { FOCUS_VISIBLE_STYLE as ce } from "../../utilities/focusStyle.es.js";
 import { merge as m } from "../../utilities/merge.es.js";
-import e, { useRef as f, useMemo as le, useState as Y, useCallback as E, useEffect as ce, cloneElement as x } from "react";
-import { BrightHeader as ne, brightHeaderArrowBackgroundColors as B } from "./BrightHeader.es.js";
-import { usePopper as we } from "react-popper";
-import { createPortal as me } from "react-dom";
+import e, { useRef as p, useMemo as ne, useState as Y, useCallback as E, useEffect as we, cloneElement as x } from "react";
+import { BrightHeader as me, brightHeaderArrowBackgroundColors as B } from "./BrightHeader.es.js";
+import { usePopper as de } from "react-popper";
+import { createPortal as fe } from "react-dom";
 const j = {
   small: "tw-pt-3.5",
   large: "tw-pt-4"
@@ -15,8 +15,8 @@ const j = {
   small: "tw-pb-3.5",
   large: "tw-pb-4"
 };
-var de = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Right = "Right", t.Bottom = "Bottom", t.Left = "Left", t))(de || {}), pe = /* @__PURE__ */ ((t) => (t.Start = "Start", t.Middle = "Middle", t.End = "End", t))(pe || {});
-const fe = {
+var pe = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Right = "Right", t.Bottom = "Bottom", t.Left = "Left", t))(pe || {}), ue = /* @__PURE__ */ ((t) => (t.Start = "Start", t.Middle = "Middle", t.End = "End", t))(ue || {});
+const ie = {
   ["Top-Start"]: "top-start",
   ["Top-End"]: "top-end",
   ["Bottom-Start"]: "bottom-start",
@@ -29,7 +29,7 @@ const fe = {
   ["Right-Middle"]: "right",
   ["Bottom-Middle"]: "bottom",
   ["Left-Middle"]: "left"
-}, ue = (t, a, w) => {
+}, be = (t, a, w) => {
   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";
@@ -51,7 +51,7 @@ const fe = {
     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";
   }
-}, Le = ({
+}, Ne = ({
   content: t,
   tooltipIcon: a,
   heading: w,
@@ -63,27 +63,29 @@ const fe = {
   children: G,
   position: k = "Bottom",
   alignment: g = "Middle",
-  withArrow: b,
+  withArrow: i,
   flip: J = !0,
   triggerElement: M,
   hoverDelay: K = 200,
-  open: L = !1
+  open: L = !1,
+  disabled: Q = !1,
+  hidden: W = !1
 }) => {
   var T, O;
-  const o = f(null), y = f(null), { linkProps: Q } = ae({}, y), W = le(() => c || d || r || w || u, [c, d, r, w, u]), X = fe[`${k}-${g}`], s = f(null), p = f(null), [Z, R] = Y(null), A = b ? 10 : 5, i = we(o == null ? void 0 : o.current, s.current, {
-    placement: X,
+  const o = p(null), y = p(null), { linkProps: X } = le({}, y), Z = ne(() => c || d || r || w || u, [c, d, r, w, u]), R = ie[`${k}-${g}`], s = p(null), f = p(null), [A, H] = Y(null), U = i ? 10 : 5, b = de(o == null ? void 0 : o.current, s.current, {
+    placement: R,
     strategy: "fixed",
     modifiers: [
       {
         name: "arrow",
         options: {
-          element: Z
+          element: A
         }
       },
       {
         name: "offset",
         options: {
-          offset: [0, A]
+          offset: [0, U]
         }
       },
       {
@@ -91,43 +93,46 @@ const fe = {
         enabled: J
       }
     ]
-  }), H = (O = (T = i.state) == null ? void 0 : T.placement) != null ? O : k, U = ue(H, d, g), [ee, l] = Y(!1), S = f(null), te = E(() => {
+  }), ee = (O = (T = b.state) == null ? void 0 : T.placement) != null ? O : k, te = be(ee, d, g), [re, l] = Y(!1), S = p(null), oe = E(() => {
     S.current && clearTimeout(S.current), l(!0);
   }, [o == null ? void 0 : o.current]), N = E(() => {
     S.current = setTimeout(() => l(!1), K);
   }, [o == null ? void 0 : o.current, s == null ? void 0 : s.current]), z = E((n) => {
     var F, D;
     const C = (D = n.path) != null ? D : (F = n.composedPath) == null ? void 0 : F.call(n);
-    C && [o, p, s].some((v) => C.includes(v == null ? void 0 : v.current)) && te();
-  }, [o == null ? void 0 : o.current, s == null ? void 0 : s.current, p == null ? void 0 : p.current]), re = !!((r == null ? void 0 : r.length) || (c == null ? void 0 : c.length)), oe = {
+    C && [o, f, s].some((v) => C.includes(v == null ? void 0 : v.current)) && oe();
+  }, [o == null ? void 0 : o.current, s == null ? void 0 : s.current, f == null ? void 0 : f.current]), ae = !!((r == null ? void 0 : r.length) || (c == null ? void 0 : c.length)), se = {
     onMouseOver: (n) => z(n.nativeEvent),
     onMouseLeave: N,
     onFocus: () => l(!0),
-    onBlur: () => re ? null : l(!1)
+    onBlur: () => ae ? null : l(!1)
   };
-  return ce(() => {
+  return we(() => {
     l(L);
   }, [L]), /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", {
-    ...oe,
-    ref: p
+    ...se,
+    ref: f
   }, M && x(M, {
     ref: o
-  })), ee && me(/* @__PURE__ */ e.createElement("div", {
+  })), re && !Q && fe(/* @__PURE__ */ e.createElement("div", {
     ref: s,
-    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]",
+    className: m([
+      "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"
+    ]),
     "data-test-id": "tooltip",
     role: "tooltip",
-    style: i.styles.popper,
-    ...i.attributes.popper,
+    style: b.styles.popper,
+    ...b.attributes.popper,
     onFocus: () => l(!0),
     onMouseOver: (n) => z(n.nativeEvent),
     onMouseLeave: N
-  }, d && /* @__PURE__ */ e.createElement(ne, {
+  }, d && /* @__PURE__ */ e.createElement(me, {
     headerStyle: d
   }), /* @__PURE__ */ e.createElement("div", {
     className: m([
       "tw-px-4",
-      W ? j.small : j.large,
+      Z ? j.small : j.large,
       c ? q.small : q.large
     ])
   }, w && /* @__PURE__ */ e.createElement("h4", {
@@ -141,7 +146,7 @@ const fe = {
   }, x(a, { size: V.Size16 })), /* @__PURE__ */ e.createElement("p", {
     className: "tw-text-s tw-min-w-0 tw-break-words"
   }, t)), c && /* @__PURE__ */ e.createElement("a", {
-    ...Q,
+    ...X,
     "data-test-id": "tooltip-link",
     ref: y,
     href: c,
@@ -149,7 +154,7 @@ const fe = {
     rel: "noopener noreferrer",
     className: m([
       "tw-text-xs tw-text-black-40 dark:tw-text-black-80 tw-underline tw-mt-1",
-      se
+      ce
     ]),
     onBlur: () => r && r.length > 0 ? null : l(!1)
   }, h != null ? h : "Click here to learn more."), r && /* @__PURE__ */ e.createElement("div", {
@@ -172,18 +177,18 @@ const fe = {
     inverted: !0
   }, r[1].label))), /* @__PURE__ */ e.createElement("div", {
     "data-test-id": "popover-arrow",
-    "data-popper-arrow": b,
-    ref: R,
-    style: i.styles.arrow,
+    "data-popper-arrow": i,
+    ref: H,
+    style: b.styles.arrow,
     className: m([
-      b && "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",
-      b && U
+      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 && te
     ])
   })), G), document.body));
 };
 export {
-  Le as Tooltip,
-  pe as TooltipAlignment,
-  de as TooltipPosition
+  Ne as Tooltip,
+  ue as TooltipAlignment,
+  pe 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}>;\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}: 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    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                createPortal(\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 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                                                inverted\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                                                inverted\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    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    }, [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    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                                                inverted\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                                                inverted\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.es.js

@@ -1,4 +1,4 @@
-import t, { useState as A } from "react";
+import e, { useState as A } from "react";
 import { merge as i } from "../../utilities/merge.es.js";
 import { useDrag as T } from "react-dnd";
 import { DropZone as N } from "../DropZone/DropZone.es.js";
@@ -13,13 +13,13 @@ const z = ({
   onDrop: c,
   onEditableSave: g,
   parentIds: s
-}) => r.map((o, e) => /* @__PURE__ */ t.createElement(L, {
+}) => r.map((o, t) => /* @__PURE__ */ e.createElement(L, {
   key: o.id,
   node: o,
-  nodeIndex: e,
+  nodeIndex: t,
   activeIds: p,
   onClick: w,
-  isFirst: e === 0,
+  isFirst: t === 0,
   onDrop: c,
   onEditableSave: g,
   parentIds: s,
@@ -33,16 +33,16 @@ const z = ({
   isFirst: g,
   onDrop: s,
   onEditableSave: o,
-  treeId: e
+  treeId: t
 }) => {
-  const { id: d, value: u, name: b, label: y, icon: v, nodes: x, actions: E, editable: k, badge: a } = r, [{ opacity: V }, B] = T({
+  const { id: d, value: u, name: b, label: y, icon: v, nodes: x, actions: E, editable: k, badge: a } = r, [{ opacity: B }, P] = T({
     item: { id: d, value: u, name: b, label: y, icon: v, nodes: x, actions: E, editable: k, badge: a },
     collect: (m) => ({
       opacity: m.isDragging() ? 0.4 : 1
     }),
-    type: e,
+    type: t,
     canDrag: s !== void 0
-  }), [f, j] = A(!1), [C, F] = A(!1), l = n && n.length > 0 && n.includes(d), D = () => F(!0), M = () => F(!1), P = () => {
+  }), [f, j] = A(!1), [V, F] = A(!1), l = n && n.length > 0 && n.includes(d), C = () => F(!0), D = () => F(!1), M = () => {
     if (!u) {
       j(!f);
       return;
@@ -50,41 +50,41 @@ const z = ({
     w && w(d);
   }, S = (m) => {
     m.stopPropagation(), j(!f);
-  }, H = () => /* @__PURE__ */ t.createElement("div", {
+  }, H = () => /* @__PURE__ */ e.createElement("div", {
     "data-test-id": "node-badge",
     className: i([
       "tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak",
       (a == null ? void 0 : a.props.size) && "tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full"
     ])
   }, a);
-  return /* @__PURE__ */ t.createElement("li", {
+  return /* @__PURE__ */ e.createElement("li", {
     "data-test-id": "node",
-    ref: B,
-    style: { opacity: V }
-  }, g && /* @__PURE__ */ t.createElement(N, {
+    ref: P,
+    style: { opacity: B }
+  }, g && /* @__PURE__ */ e.createElement(N, {
     data: {
       targetItem: r,
       position: h.Before
     },
     onDrop: s,
-    treeId: e
-  }), /* @__PURE__ */ t.createElement(N, {
+    treeId: t
+  }), /* @__PURE__ */ e.createElement(N, {
     data: {
       targetItem: r,
       position: h.Within
     },
     onDrop: s,
-    treeId: e
-  }, /* @__PURE__ */ t.createElement("div", {
+    treeId: t
+  }, /* @__PURE__ */ e.createElement("div", {
     className: i([
       "tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5",
       p && "tw-font-bold",
       u && !l && "tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover",
       l && "tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover"
     ]),
-    onMouseEnter: D,
-    onMouseLeave: M
-  }, /* @__PURE__ */ t.createElement("a", {
+    onMouseEnter: C,
+    onMouseLeave: D
+  }, /* @__PURE__ */ e.createElement("a", {
     "data-test-id": "node-link",
     className: i([
       "tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer",
@@ -92,61 +92,62 @@ const z = ({
       c.length > 1 && "tw-pl-8"
     ]),
     "aria-selected": l,
-    onClick: P
-  }, /* @__PURE__ */ t.createElement("div", {
+    onClick: M
+  }, /* @__PURE__ */ e.createElement("div", {
     className: "tw-flex tw-space-x-1 tw-items-center"
-  }, /* @__PURE__ */ t.createElement("span", {
+  }, /* @__PURE__ */ e.createElement("span", {
     "data-test-id": "toggle",
     className: "tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center",
     onClick: S
-  }, x && /* @__PURE__ */ t.createElement("div", {
+  }, x && /* @__PURE__ */ e.createElement("div", {
     className: i([
       "tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong",
       f ? "tw-rotate-90" : "",
       l && "tw-text-box-selected-strong-inverse"
     ])
-  })), v && /* @__PURE__ */ t.createElement("span", {
+  })), v && /* @__PURE__ */ e.createElement("span", {
     className: "tw-flex tw-justify-center tw-items-center tw-w-5"
-  }, v), k && o ? /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(Z, {
+  }, v), k && o ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(Z, {
     options: {
       additionalValues: r.id,
       enableDoubleClick: !0,
-      isSlimInputField: !0
+      isSlimInputField: !0,
+      removeBoxPadding: !0
     },
     onAdditionalValueSave: o
-  }, /* @__PURE__ */ t.createElement("p", null, b)), a && H()) : /* @__PURE__ */ t.createElement("span", {
+  }, /* @__PURE__ */ e.createElement("p", null, b)), a && H()) : /* @__PURE__ */ e.createElement("span", {
     className: "tw-flex tw-items-center",
     "data-test-id": "node-link-name"
-  }, b, a && H())), /* @__PURE__ */ t.createElement("div", {
+  }, b, a && H())), /* @__PURE__ */ e.createElement("div", {
     className: "tw-px-1.5"
-  }, /* @__PURE__ */ t.createElement("span", {
+  }, /* @__PURE__ */ e.createElement("span", {
     className: i([
       "tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal",
       l && "tw-text-box-selected-strong-inverse"
     ])
-  }, y))), E && /* @__PURE__ */ t.createElement("div", {
+  }, y))), E && /* @__PURE__ */ e.createElement("div", {
     className: i([
       "tw-flex tw-items-center",
-      C || l ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
+      V || l ? "tw-visible tw-space-x-1.5" : "tw-invisible tw-w-0"
     ])
-  }, E.map((m) => m)))), x && f && /* @__PURE__ */ t.createElement("ul", {
+  }, E.map((m) => m)))), x && f && /* @__PURE__ */ e.createElement("ul", {
     className: "tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left",
     "data-test-id": "sub-tree"
   }, z({
     nodes: x,
-    treeId: e,
+    treeId: t,
     activeIds: n,
     onClick: w,
     onDrop: s,
     onEditableSave: o,
     parentIds: [...c, d]
-  })), /* @__PURE__ */ t.createElement(N, {
+  })), /* @__PURE__ */ e.createElement(N, {
     data: {
       targetItem: r,
       position: h.After
     },
     onDrop: s,
-    treeId: e
+    treeId: t
   }));
 };
 export {

package/dist/components/Tree/Node.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' | 'strong' | 'node'> & {\n    nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n    nodes,\n    activeIds,\n    treeId,\n    onClick,\n    onDrop,\n    onEditableSave,\n    parentIds,\n}: RenderNodeArrayData) =>\n    nodes.map((node, i) => (\n        <Node\n            key={node.id}\n            node={node}\n            nodeIndex={i}\n            activeIds={activeIds}\n            onClick={onClick}\n            isFirst={i === 0}\n            onDrop={onDrop}\n            onEditableSave={onEditableSave}\n            parentIds={parentIds}\n            treeId={treeId}\n        />\n    ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n    nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n    node: DraggableItem<TreeNodeItem>;\n    strong?: boolean;\n    nodeIndex?: number;\n    activeIds?: NullableString[];\n    parentIds?: string[];\n    onClick: (id: NullableString) => void;\n    isFirst: boolean;\n    treeId: string;\n    onDrop?: OnDropCallback<TreeNodeItem>;\n    onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nexport const Node = ({\n    node,\n    strong = false,\n    activeIds,\n    onClick,\n    parentIds = [],\n    isFirst,\n    onDrop,\n    onEditableSave,\n    treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n    const { id, value, name, label, icon, nodes, actions, editable, badge } = node;\n    const [{ opacity }, drag] = useDrag({\n        item: { id, value, name, label, icon, nodes, actions, editable, badge },\n        collect: (monitor) => ({\n            opacity: monitor.isDragging() ? 0.4 : 1,\n        }),\n        type: treeId,\n        canDrag: onDrop !== undefined,\n    });\n    const [showNodes, setShowNodes] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n    const setHoveredTrue = () => setIsHovered(true);\n    const setHoveredFalse = () => setIsHovered(false);\n    const onNodeClick = () => {\n        if (!value) {\n            setShowNodes(!showNodes);\n            return;\n        }\n\n        if (onClick) {\n            onClick(id);\n        }\n    };\n    const toggleNodesVisibility = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setShowNodes(!showNodes);\n    };\n\n    const insertBadge = () => {\n        return (\n            <div\n                data-test-id=\"node-badge\"\n                className={merge([\n                    'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n                    badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n                ])}\n            >\n                {badge}\n            </div>\n        );\n    };\n\n    /* eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    return (\n        <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n            {isFirst && (\n                <DropZone\n                    data={{\n                        targetItem: node,\n                        position: DropZonePosition.Before,\n                    }}\n                    onDrop={onDrop}\n                    treeId={treeId}\n                />\n            )}\n            <DropZone\n                data={{\n                    targetItem: node,\n                    position: DropZonePosition.Within,\n                }}\n                onDrop={onDrop}\n                treeId={treeId}\n            >\n                <div\n                    className={merge([\n                        'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5',\n                        strong && 'tw-font-bold',\n                        value &&\n                            !selected &&\n                            'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                        selected &&\n                            'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n                    ])}\n                    onMouseEnter={setHoveredTrue}\n                    onMouseLeave={setHoveredFalse}\n                >\n                    <a\n                        data-test-id=\"node-link\"\n                        className={merge([\n                            'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer',\n                            parentIds.length === 1 && 'tw-pl-4',\n                            parentIds.length > 1 && 'tw-pl-8',\n                        ])}\n                        aria-selected={selected}\n                        onClick={onNodeClick}\n                    >\n                        <div className=\"tw-flex tw-space-x-1 tw-items-center\">\n                            <span\n                                data-test-id=\"toggle\"\n                                className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n                                onClick={toggleNodesVisibility}\n                            >\n                                {nodes && (\n                                    <div\n                                        className={merge([\n                                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                            showNodes ? 'tw-rotate-90' : '',\n                                            selected && 'tw-text-box-selected-strong-inverse',\n                                        ])}\n                                    ></div>\n                                )}\n                            </span>\n                            {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n                            {editable && onEditableSave ? (\n                                <>\n                                    <EditableText\n                                        options={{\n                                            additionalValues: node.id,\n                                            enableDoubleClick: true,\n                                            isSlimInputField: true,\n                                        }}\n                                        onAdditionalValueSave={onEditableSave}\n                                    >\n                                        <p>{name}</p>\n                                    </EditableText>\n                                    {badge && insertBadge()}\n                                </>\n                            ) : (\n                                <span className=\"tw-flex tw-items-center\" data-test-id=\"node-link-name\">\n                                    {name}\n                                    {badge && insertBadge()}\n                                </span>\n                            )}\n                        </div>\n                        <div className=\"tw-px-1.5\">\n                            <span\n                                className={merge([\n                                    'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n                                    selected && 'tw-text-box-selected-strong-inverse',\n                                ])}\n                            >\n                                {label}\n                            </span>\n                        </div>\n                    </a>\n\n                    {actions && (\n                        <div\n                            className={merge([\n                                'tw-flex tw-items-center',\n                                isHovered || selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n                            ])}\n                        >\n                            {actions.map((action) => action)}\n                        </div>\n                    )}\n                </div>\n            </DropZone>\n\n            {nodes && showNodes && (\n                <ul\n                    className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n                    data-test-id=\"sub-tree\"\n                >\n                    {renderNodeArray({\n                        nodes,\n                        treeId,\n                        activeIds,\n                        onClick,\n                        onDrop,\n                        onEditableSave,\n                        parentIds: [...parentIds, id],\n                    })}\n                </ul>\n            )}\n            <DropZone\n                data={{\n                    targetItem: node,\n                    position: DropZonePosition.After,\n                }}\n                onDrop={onDrop}\n                treeId={treeId}\n            />\n        </li>\n    );\n    /* eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Node.es.js","sources":["../../../src/components/Tree/Node.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ReactElement, useState } from 'react';\nimport { merge } from '@utilities/merge';\nimport { useDrag } from 'react-dnd';\nimport { DropZone, OnDropCallback } from '@components/DropZone';\nimport { TreeFlatListItem } from '@components/Tree';\nimport { DraggableItem, DropZonePosition } from '@utilities/dnd';\nimport { EditableText } from '../EditableText';\n\nexport type RenderNodeArrayData = Omit<NodeProps, 'isFirst' | 'strong' | 'node'> & {\n    nodes: DraggableItem<TreeNodeItem>[];\n};\n\nexport const renderNodeArray = ({\n    nodes,\n    activeIds,\n    treeId,\n    onClick,\n    onDrop,\n    onEditableSave,\n    parentIds,\n}: RenderNodeArrayData) =>\n    nodes.map((node, i) => (\n        <Node\n            key={node.id}\n            node={node}\n            nodeIndex={i}\n            activeIds={activeIds}\n            onClick={onClick}\n            isFirst={i === 0}\n            onDrop={onDrop}\n            onEditableSave={onEditableSave}\n            parentIds={parentIds}\n            treeId={treeId}\n        />\n    ));\n\nexport interface TreeNodeItem extends TreeFlatListItem {\n    nodes?: DraggableItem<TreeNodeItem>[];\n}\n\ntype NodeProps = {\n    node: DraggableItem<TreeNodeItem>;\n    strong?: boolean;\n    nodeIndex?: number;\n    activeIds?: NullableString[];\n    parentIds?: string[];\n    onClick: (id: NullableString) => void;\n    isFirst: boolean;\n    treeId: string;\n    onDrop?: OnDropCallback<TreeNodeItem>;\n    onEditableSave?: (targetItemId: string, value: string) => void;\n};\n\nexport const Node = ({\n    node,\n    strong = false,\n    activeIds,\n    onClick,\n    parentIds = [],\n    isFirst,\n    onDrop,\n    onEditableSave,\n    treeId,\n}: NodeProps): ReactElement<NodeProps> => {\n    const { id, value, name, label, icon, nodes, actions, editable, badge } = node;\n    const [{ opacity }, drag] = useDrag({\n        item: { id, value, name, label, icon, nodes, actions, editable, badge },\n        collect: (monitor) => ({\n            opacity: monitor.isDragging() ? 0.4 : 1,\n        }),\n        type: treeId,\n        canDrag: onDrop !== undefined,\n    });\n    const [showNodes, setShowNodes] = useState(false);\n    const [isHovered, setIsHovered] = useState(false);\n    const selected = activeIds && activeIds.length > 0 && activeIds.includes(id);\n\n    const setHoveredTrue = () => setIsHovered(true);\n    const setHoveredFalse = () => setIsHovered(false);\n    const onNodeClick = () => {\n        if (!value) {\n            setShowNodes(!showNodes);\n            return;\n        }\n\n        if (onClick) {\n            onClick(id);\n        }\n    };\n    const toggleNodesVisibility = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setShowNodes(!showNodes);\n    };\n\n    const insertBadge = () => {\n        return (\n            <div\n                data-test-id=\"node-badge\"\n                className={merge([\n                    'tw-flex tw-justify-center tw-items-center tw-ml-2 tw-text-text-weak',\n                    badge?.props.size && 'tw-w-8 tw-h-5 tw-bg-box-neutral tw-rounded-full',\n                ])}\n            >\n                {badge}\n            </div>\n        );\n    };\n\n    /* eslint-disable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n    return (\n        <li data-test-id=\"node\" ref={drag} style={{ opacity }}>\n            {isFirst && (\n                <DropZone\n                    data={{\n                        targetItem: node,\n                        position: DropZonePosition.Before,\n                    }}\n                    onDrop={onDrop}\n                    treeId={treeId}\n                />\n            )}\n            <DropZone\n                data={{\n                    targetItem: node,\n                    position: DropZonePosition.Within,\n                }}\n                onDrop={onDrop}\n                treeId={treeId}\n            >\n                <div\n                    className={merge([\n                        'tw-flex tw-py-2 tw-px-2.5 tw-no-underline tw-leading-5',\n                        strong && 'tw-font-bold',\n                        value &&\n                            !selected &&\n                            'tw-text-text hover:tw-bg-box-neutral-hover hover:tw-text-box-neutral-inverse-hover',\n                        selected &&\n                            'tw-font-medium tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover hover:tw-text-box-selected-strong-inverse-hover',\n                    ])}\n                    onMouseEnter={setHoveredTrue}\n                    onMouseLeave={setHoveredFalse}\n                >\n                    <a\n                        data-test-id=\"node-link\"\n                        className={merge([\n                            'tw-flex tw-items-center tw-flex-grow tw-justify-between tw-cursor-pointer',\n                            parentIds.length === 1 && 'tw-pl-4',\n                            parentIds.length > 1 && 'tw-pl-8',\n                        ])}\n                        aria-selected={selected}\n                        onClick={onNodeClick}\n                    >\n                        <div className=\"tw-flex tw-space-x-1 tw-items-center\">\n                            <span\n                                data-test-id=\"toggle\"\n                                className=\"tw-w-2 tw-h-3 tw-flex tw-items-center tw-justify-center\"\n                                onClick={toggleNodesVisibility}\n                            >\n                                {nodes && (\n                                    <div\n                                        className={merge([\n                                            'tw-transition-transform tw-w-0 tw-h-0 tw-text-black-100 tw-text-opacity-40 tw-font-normal tw-border-t-4 tw-border-t-transparent tw-border-b-4 tw-border-b-transparent tw-border-l-4 tw-border-l-x-strong',\n                                            showNodes ? 'tw-rotate-90' : '',\n                                            selected && 'tw-text-box-selected-strong-inverse',\n                                        ])}\n                                    ></div>\n                                )}\n                            </span>\n                            {icon && <span className=\"tw-flex tw-justify-center tw-items-center tw-w-5\">{icon}</span>}\n                            {editable && onEditableSave ? (\n                                <>\n                                    <EditableText\n                                        options={{\n                                            additionalValues: node.id,\n                                            enableDoubleClick: true,\n                                            isSlimInputField: true,\n                                            removeBoxPadding: true,\n                                        }}\n                                        onAdditionalValueSave={onEditableSave}\n                                    >\n                                        <p>{name}</p>\n                                    </EditableText>\n                                    {badge && insertBadge()}\n                                </>\n                            ) : (\n                                <span className=\"tw-flex tw-items-center\" data-test-id=\"node-link-name\">\n                                    {name}\n                                    {badge && insertBadge()}\n                                </span>\n                            )}\n                        </div>\n                        <div className=\"tw-px-1.5\">\n                            <span\n                                className={merge([\n                                    'tw-text-black-100 tw-text-opacity-40 tw-text-xs tw-font-normal',\n                                    selected && 'tw-text-box-selected-strong-inverse',\n                                ])}\n                            >\n                                {label}\n                            </span>\n                        </div>\n                    </a>\n\n                    {actions && (\n                        <div\n                            className={merge([\n                                'tw-flex tw-items-center',\n                                isHovered || selected ? 'tw-visible tw-space-x-1.5' : 'tw-invisible tw-w-0',\n                            ])}\n                        >\n                            {actions.map((action) => action)}\n                        </div>\n                    )}\n                </div>\n            </DropZone>\n\n            {nodes && showNodes && (\n                <ul\n                    className=\"tw-p-0 tw-m-0 tw-font-sans tw-font-normal tw-list-none tw-text-left\"\n                    data-test-id=\"sub-tree\"\n                >\n                    {renderNodeArray({\n                        nodes,\n                        treeId,\n                        activeIds,\n                        onClick,\n                        onDrop,\n                        onEditableSave,\n                        parentIds: [...parentIds, id],\n                    })}\n                </ul>\n            )}\n            <DropZone\n                data={{\n                    targetItem: node,\n                    position: DropZonePosition.After,\n                }}\n                onDrop={onDrop}\n                treeId={treeId}\n            />\n        </li>\n    );\n    /* eslint-enable jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */\n};\n"],"names":[],"mappings":";;;;;;;AAcO,MAAM,IAAkB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAEA,EAAM,IAAI,CAAC,GAAM,MACZ,kBAAA,cAAA,GAAA;AAAA,EACG,KAAK,EAAK;AAAA,EACV;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,SAAS,MAAM;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,CACJ,CACH,GAmBQ,IAAO,CAAC;AAAA,EACjB;AAAA,EACA,YAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACsC;AAChC,QAAA,EAAE,OAAI,UAAO,SAAM,UAAO,SAAM,UAAO,YAAS,aAAU,aAAU,GACpE,CAAC,EAAE,cAAW,KAAQ,EAAQ;AAAA,IAChC,MAAM,EAAE,OAAI,UAAO,SAAM,UAAO,SAAM,UAAO,YAAS,aAAU,SAAM;AAAA,IACtE,SAAS,CAAC,MAAa;AAAA,MACnB,SAAS,EAAQ,WAAW,IAAI,MAAM;AAAA,IAAA;AAAA,IAE1C,MAAM;AAAA,IACN,SAAS,MAAW;AAAA,EAAA,CACvB,GACK,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAC1C,IAAW,KAAa,EAAU,SAAS,KAAK,EAAU,SAAS,CAAE,GAErE,IAAiB,MAAM,EAAa,EAAI,GACxC,IAAkB,MAAM,EAAa,EAAK,GAC1C,IAAc,MAAM;AACtB,QAAI,CAAC,GAAO;AACR,QAAa,CAAC,CAAS;AACvB;AAAA,IACJ;AAEA,IAAI,KACA,EAAQ,CAAE;AAAA,EACd,GAEE,IAAwB,CAAC,MAA4B;AACvD,MAAM,gBAAgB,GACtB,EAAa,CAAC,CAAS;AAAA,EAAA,GAGrB,IAAc,MAEX,kBAAA,cAAA,OAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,wBAAO,MAAM,SAAQ;AAAA,IAAA,CACxB;AAAA,EAAA,GAEA,CACL;AAKR,SACK,kBAAA,cAAA,MAAA;AAAA,IAAG,gBAAa;AAAA,IAAO,KAAK;AAAA,IAAM,OAAO,EAAE,WAAQ;AAAA,EAAA,GAC/C,KACI,kBAAA,cAAA,GAAA;AAAA,IACG,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACJ,GAEH,kBAAA,cAAA,GAAA;AAAA,IACG,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEC,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAU;AAAA,MACV,KACI,CAAC,KACD;AAAA,MACJ,KACI;AAAA,IAAA,CACP;AAAA,IACD,cAAc;AAAA,IACd,cAAc;AAAA,EAAA,GAEb,kBAAA,cAAA,KAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM;AAAA,MACb;AAAA,MACA,EAAU,WAAW,KAAK;AAAA,MAC1B,EAAU,SAAS,KAAK;AAAA,IAAA,CAC3B;AAAA,IACD,iBAAe;AAAA,IACf,SAAS;AAAA,EAAA,GAER,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IACV,SAAS;AAAA,EAAA,GAER,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,IAAY,iBAAiB;AAAA,MAC7B,KAAY;AAAA,IAAA,CACf;AAAA,EACJ,CAAA,CAET,GACC,KAAS,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,EAAA,GAAoD,CAAK,GACjF,KAAY,sDAEJ,kBAAA,cAAA,GAAA;AAAA,IACG,SAAS;AAAA,MACL,kBAAkB,EAAK;AAAA,MACvB,mBAAmB;AAAA,MACnB,kBAAkB;AAAA,MAClB,kBAAkB;AAAA,IACtB;AAAA,IACA,uBAAuB;AAAA,EAEvB,GAAA,kBAAA,cAAC,WAAG,CAAK,CACb,GACC,KAAS,EAAA,CACd,IAEC,kBAAA,cAAA,QAAA;AAAA,IAAK,WAAU;AAAA,IAA0B,gBAAa;AAAA,EAAA,GAClD,GACA,KAAS,EAAA,CACd,CAER,GACC,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,EAAA,GACV,kBAAA,cAAA,QAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAY;AAAA,IAAA,CACf;AAAA,EAAA,GAEA,CACL,CACJ,CACJ,GAEC,KACI,kBAAA,cAAA,OAAA;AAAA,IACG,WAAW,EAAM;AAAA,MACb;AAAA,MACA,KAAa,IAAW,8BAA8B;AAAA,IAAA,CACzD;AAAA,EAEA,GAAA,EAAQ,IAAI,CAAC,MAAW,CAAM,CACnC,CAER,CACJ,GAEC,KAAS,KACL,kBAAA,cAAA,MAAA;AAAA,IACG,WAAU;AAAA,IACV,gBAAa;AAAA,EAAA,GAEZ,EAAgB;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,CAAC,GAAG,GAAW,CAAE;AAAA,EAC/B,CAAA,CACL,GAEH,kBAAA,cAAA,GAAA;AAAA,IACG,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAA,CACJ;AAGR;"}

package/dist/extractedThirdPartyStyles.css

@@ -7,6 +7,14 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 @import url('react-datepicker/dist/react-datepicker.min.css');
 
+.react-datepicker-popper {
+    /** 
+     *  The Modal default z-index is 50 (vide Modal.tsx file)
+     *  so it's better to place the DatePicker in a smaller z-index 
+     */
+    z-index: 49;
+}
+
 .react-datepicker-wrap {
     font-family: var(--body-family);
     border-radius: var(--radius);