npm - @frontify/fondue - Versions diffs - 12.0.0-beta.14 → 12.0.0-beta.17 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
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 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 CHANGED Viewed

@@ -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 {};