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

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js

@@ -1,4 +1,4 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { useRef as f } from "react";
 import { useBreadcrumbItem as h } from "@react-aria/breadcrumbs";
 import { useFocusRing as g } from "@react-aria/focus";
@@ -6,7 +6,7 @@ import { mergeProps as b } from "@react-aria/utils";
 import { getItemElementType as y } from "../../utilities/elements.es.js";
 import { FOCUS_STYLE_NO_OFFSET as F } from "../../utilities/focusStyle.es.js";
 import { merge as N } from "../../utilities/merge.es.js";
-const T = () => /* @__PURE__ */ e(
+const T = () => /* @__PURE__ */ t(
   "svg",
   {
     "aria-hidden": "true",
@@ -16,7 +16,7 @@ const T = () => /* @__PURE__ */ e(
     fill: "none",
     className: "tw-stroke-current tw-text-black-20",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ e("line", { x1: "3.52447", y1: "16.0623", x2: "8.46874", y2: "0.845385" })
+    children: /* @__PURE__ */ t("line", { x1: "3.52447", y1: "16.0623", x2: "8.46874", y2: "0.845385" })
   }
 ), P = ({
   decorator: i,
@@ -24,31 +24,31 @@ const T = () => /* @__PURE__ */ e(
   link: s,
   onClick: o,
   showSeparator: a,
-  children: p,
-  "data-test-id": c = "breadcrumb"
+  children: c,
+  "data-test-id": p = "breadcrumb"
 }) => {
-  const m = f(null), t = y(s, o), { itemProps: w } = h(
+  const m = f(null), e = y(s, o), { itemProps: l } = h(
     {
       isCurrent: !1,
       children: r,
-      elementType: t
+      elementType: e
     },
     m
-  ), { isFocusVisible: l, focusProps: d } = g(), u = b(w, d, { a: { href: s }, button: { onClick: o, type: "button" }, span: {} }[t]), x = N([
-    "tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-max-w-[100px] tw-whitespace-pre-wrap tw-rounded",
-    l && F
+  ), { isFocusVisible: w, focusProps: d } = g(), u = b(l, d, { a: { href: s }, button: { onClick: o, type: "button" }, span: {} }[e]), x = N([
+    "tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded",
+    w && F
   ]);
   return /* @__PURE__ */ n(
     "li",
     {
       className: "tw-flex tw-items-center tw-text-text-weak hover:tw-text-text tw-text-xs tw-transition-colors",
-      "data-test-id": `${c}-item`,
+      "data-test-id": `${p}-item`,
       children: [
-        p ?? /* @__PURE__ */ n(t, { ref: m, ...u, className: x, children: [
+        c ?? /* @__PURE__ */ n(e, { ref: m, ...u, className: x, children: [
           i,
           r
         ] }),
-        a && /* @__PURE__ */ e(T, {})
+        a && /* @__PURE__ */ t(T, {})
       ]
     }
   );

package/dist/components/Breadcrumbs/BreadcrumbItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement, useRef } from 'react';\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\n\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n    <svg\n        aria-hidden=\"true\"\n        width=\"13\"\n        height=\"17\"\n        viewBox=\"0 0 13 17\"\n        fill=\"none\"\n        className=\"tw-stroke-current tw-text-black-20\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n    </svg>\n);\n\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' | 'link' | 'onClick' | 'decorator'> & {\n    showSeparator: boolean;\n    children?: ReactElement;\n    'data-test-id'?: string;\n};\n\nexport const BreadcrumbItem = ({\n    decorator,\n    label,\n    link,\n    onClick,\n    showSeparator,\n    children,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: BreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n\n    const Element = getItemElementType(link, onClick);\n\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: false,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const elementTypeProps = { a: { href: link }, button: { onClick, type: 'button' as const }, span: {} };\n    const props = mergeProps(itemProps, focusProps, elementTypeProps[Element]);\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-max-w-[100px] tw-whitespace-pre-wrap tw-rounded',\n        isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className=\"tw-flex tw-items-center tw-text-text-weak hover:tw-text-text tw-text-xs tw-transition-colors\"\n            data-test-id={`${dataTestId}-item`}\n        >\n            {children ?? (\n                <Element ref={ref} {...props} className={classNames}>\n                    {decorator}\n                    {label}\n                </Element>\n            )}\n            {showSeparator && <Separator />}\n        </li>\n    );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","jsx","BreadcrumbItem","decorator","label","link","onClick","showSeparator","children","dataTestId","ref","useRef","Element","getItemElementType","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs"],"mappings":";;;;;;;;AAaA,MAAMA,IAAY,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,IAEN,UAAA,gBAAAA,EAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAW,CAAA;AAAA,EAAA;AAC/D,GASSC,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAyC;AAC/B,QAAAC,IAAMC,EAAO,IAAI,GAEjBC,IAAUC,EAAmBR,GAAMC,CAAO,GAE1C,EAAE,WAAAQ,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUX;AAAA,MACV,aAAaQ;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAGE,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAG9CC,IAAQC,EAAWN,GAAWG,GADX,EAAE,GAAG,EAAE,MAAMZ,EAAK,GAAG,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAqB,GAAA,MAAM,CAAG,EAAA,EACpCM,CAAO,CAAC,GAEnES,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAN,KAAkBO;AAAA,EAAA,CACrB;AAGG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAc,GAAGf,CAAU;AAAA,MAE1B,UAAA;AAAA,QAAAD,uBACII,GAAQ,EAAA,KAAAF,GAAW,GAAGS,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAlB;AAAA,UACAC;AAAA,QAAA,GACL;AAAA,QAEHG,uBAAkBP,GAAU,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}
+{"version":3,"file":"BreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/BreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement, useRef } from 'react';\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\n\nimport { getItemElementType } from '@utilities/elements';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nimport { Breadcrumb } from './Breadcrumbs';\n\nconst Separator = () => (\n    <svg\n        aria-hidden=\"true\"\n        width=\"13\"\n        height=\"17\"\n        viewBox=\"0 0 13 17\"\n        fill=\"none\"\n        className=\"tw-stroke-current tw-text-black-20\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n    >\n        <line x1=\"3.52447\" y1=\"16.0623\" x2=\"8.46874\" y2=\"0.845385\" />\n    </svg>\n);\n\ntype BreadcrumbItemProps = Pick<Breadcrumb, 'label' | 'link' | 'onClick' | 'decorator'> & {\n    showSeparator: boolean;\n    children?: ReactElement;\n    'data-test-id'?: string;\n};\n\nexport const BreadcrumbItem = ({\n    decorator,\n    label,\n    link,\n    onClick,\n    showSeparator,\n    children,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: BreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n\n    const Element = getItemElementType(link, onClick);\n\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: false,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const elementTypeProps = { a: { href: link }, button: { onClick, type: 'button' as const }, span: {} };\n    const props = mergeProps(itemProps, focusProps, elementTypeProps[Element]);\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-rounded',\n        isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className=\"tw-flex tw-items-center tw-text-text-weak hover:tw-text-text tw-text-xs tw-transition-colors\"\n            data-test-id={`${dataTestId}-item`}\n        >\n            {children ?? (\n                <Element ref={ref} {...props} className={classNames}>\n                    {decorator}\n                    {label}\n                </Element>\n            )}\n            {showSeparator && <Separator />}\n        </li>\n    );\n};\nBreadcrumbItem.displayName = 'FondueBreadcrumbItem';\n"],"names":["Separator","jsx","BreadcrumbItem","decorator","label","link","onClick","showSeparator","children","dataTestId","ref","useRef","Element","getItemElementType","itemProps","useBreadcrumbItem","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs"],"mappings":";;;;;;;;AAaA,MAAMA,IAAY,MACd,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,eAAY;AAAA,IACZ,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAU;AAAA,IACV,OAAM;AAAA,IAEN,UAAA,gBAAAA,EAAC,UAAK,IAAG,WAAU,IAAG,WAAU,IAAG,WAAU,IAAG,WAAW,CAAA;AAAA,EAAA;AAC/D,GASSC,IAAiB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAyC;AAC/B,QAAAC,IAAMC,EAAO,IAAI,GAEjBC,IAAUC,EAAmBR,GAAMC,CAAO,GAE1C,EAAE,WAAAQ,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUX;AAAA,MACV,aAAaQ;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAGE,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAG9CC,IAAQC,EAAWN,GAAWG,GADX,EAAE,GAAG,EAAE,MAAMZ,EAAK,GAAG,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAqB,GAAA,MAAM,CAAG,EAAA,EACpCM,CAAO,CAAC,GAEnES,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAN,KAAkBO;AAAA,EAAA,CACrB;AAGG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,gBAAc,GAAGf,CAAU;AAAA,MAE1B,UAAA;AAAA,QAAAD,uBACII,GAAQ,EAAA,KAAAF,GAAW,GAAGS,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAlB;AAAA,UACAC;AAAA,QAAA,GACL;AAAA,QAEHG,uBAAkBP,GAAU,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzC;AACAE,EAAe,cAAc;"}

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js

@@ -15,17 +15,17 @@ const O = ({
   link: m,
   onClick: o,
   activeInline: s,
-  "data-test-id": w = "breadcrumb"
+  "data-test-id": u = "breadcrumb"
 }) => {
-  const n = F(null), e = C(m, o), { itemProps: u } = N(
+  const n = F(null), e = C(m, o), { itemProps: l } = N(
     {
       isCurrent: !0,
       children: r,
       elementType: e
     },
     n
-  ), l = { a: { href: m }, button: { onClick: o, type: "button" }, span: {} }, { isFocusVisible: d, focusProps: f } = T(), x = B(u, f, l[e]), b = p([
-    "tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-max-w-[100px] tw-whitespace-pre-wrap tw-font-medium tw-rounded",
+  ), w = { a: { href: m }, button: { onClick: o, type: "button" }, span: {} }, { isFocusVisible: d, focusProps: f } = T(), x = B(l, f, w[e]), b = p([
+    "tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded",
     c && "tw-font-bold",
     s && "tw-text-xs",
     d && P
@@ -37,7 +37,7 @@ const O = ({
         "tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center",
         s ? "tw-flex tw-items-center" : "tw-w-full tw-inline-flex"
       ]),
-      "data-test-id": `${w}-item`,
+      "data-test-id": `${u}-item`,
       children: [
         /* @__PURE__ */ i(e, { ref: n, ...x, className: b, children: [
           a,

package/dist/components/Breadcrumbs/CurrentBreadcrumbItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement, useRef } from 'react';\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\n\nimport { Badge } from '@components/Badge';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { getItemElementType } from '@utilities/elements';\n\nimport { Breadcrumb } from './Breadcrumbs';\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\nexport const CurrentBreadcrumbItem = ({\n    label,\n    badges,\n    bold,\n    decorator,\n    link,\n    onClick,\n    activeInline,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: CurrentBreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n    const Element = getItemElementType(link, onClick);\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: true,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const elementTypeProps = { a: { href: link }, button: { onClick, type: 'button' as const }, span: {} };\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const props = mergeProps(itemProps, focusProps, elementTypeProps[Element]);\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-max-w-[100px] tw-whitespace-pre-wrap tw-font-medium tw-rounded',\n        bold && 'tw-font-bold',\n        activeInline && 'tw-text-xs',\n        isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className={merge([\n                'tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center',\n                activeInline ? 'tw-flex tw-items-center' : 'tw-w-full tw-inline-flex',\n            ])}\n            data-test-id={`${dataTestId}-item`}\n        >\n            <Element ref={ref} {...props} className={classNames}>\n                {decorator}\n                {label}\n            </Element>\n            {badges?.map(({ children: badge, ...props }, index) => (\n                <Badge {...props} key={`breadcrumb-badge-${index}`}>\n                    {badge}\n                </Badge>\n            ))}\n        </li>\n    );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["CurrentBreadcrumbItem","label","badges","bold","decorator","link","onClick","activeInline","dataTestId","ref","useRef","Element","getItemElementType","itemProps","useBreadcrumbItem","elementTypeProps","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs","badge","index","createElement","Badge"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAgD;AACtC,QAAAC,IAAMC,EAAO,IAAI,GACjBC,IAAUC,EAAmBP,GAAMC,CAAO,GAC1C,EAAE,WAAAO,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUb;AAAA,MACV,aAAaU;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAGEM,IAAmB,EAAE,GAAG,EAAE,MAAMV,EAAK,GAAG,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAqB,GAAA,MAAM,CAAG,EAAA,GAE/F,EAAE,gBAAAU,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAQC,EAAWP,GAAWI,GAAYF,EAAiBJ,CAAO,CAAC,GAEnEU,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAnB,KAAQ;AAAA,IACRI,KAAgB;AAAA,IAChBS,KAAkBO;AAAA,EAAA,CACrB;AAGG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAf,IAAe,4BAA4B;AAAA,MAAA,CAC9C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAgB,EAACb,GAAQ,EAAA,KAAAF,GAAW,GAAGU,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAjB;AAAA,UACAH;AAAA,QAAA,GACL;AAAA,QACCC,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUuB,GAAO,GAAGN,EAAM,GAAGO,MACxC,gBAAAC,EAAAC,GAAA,EAAO,GAAGT,GAAO,KAAK,oBAAoBO,CAAK,GAAA,GAC3CD,CACL;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGb;AACAzB,EAAsB,cAAc;"}
+{"version":3,"file":"CurrentBreadcrumbItem.es.js","sources":["../../../src/components/Breadcrumbs/CurrentBreadcrumbItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ReactElement, useRef } from 'react';\nimport { useBreadcrumbItem } from '@react-aria/breadcrumbs';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\n\nimport { Badge } from '@components/Badge';\nimport { FOCUS_STYLE_NO_OFFSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { getItemElementType } from '@utilities/elements';\n\nimport { Breadcrumb } from './Breadcrumbs';\n\ntype CurrentBreadcrumbItemProps = Breadcrumb;\n\nexport const CurrentBreadcrumbItem = ({\n    label,\n    badges,\n    bold,\n    decorator,\n    link,\n    onClick,\n    activeInline,\n    'data-test-id': dataTestId = 'breadcrumb',\n}: CurrentBreadcrumbItemProps): ReactElement => {\n    const ref = useRef(null);\n    const Element = getItemElementType(link, onClick);\n    const { itemProps } = useBreadcrumbItem(\n        {\n            isCurrent: true,\n            children: label,\n            elementType: Element,\n        },\n        ref,\n    );\n\n    const elementTypeProps = { a: { href: link }, button: { onClick, type: 'button' as const }, span: {} };\n\n    const { isFocusVisible, focusProps } = useFocusRing();\n    const props = mergeProps(itemProps, focusProps, elementTypeProps[Element]);\n\n    const classNames = merge([\n        'tw-flex tw-gap-x-1 tw-items-center tw-leading-4 tw-h-6 tw-whitespace-pre-wrap tw-font-medium tw-rounded',\n        bold && 'tw-font-bold',\n        activeInline && 'tw-text-xs',\n        isFocusVisible && FOCUS_STYLE_NO_OFFSET,\n    ]);\n\n    return (\n        <li\n            className={merge([\n                'tw-align-middle tw-gap-x-1 tw-text-m tw-text-text tw-items-center',\n                activeInline ? 'tw-flex tw-items-center' : 'tw-w-full tw-inline-flex',\n            ])}\n            data-test-id={`${dataTestId}-item`}\n        >\n            <Element ref={ref} {...props} className={classNames}>\n                {decorator}\n                {label}\n            </Element>\n            {badges?.map(({ children: badge, ...props }, index) => (\n                <Badge {...props} key={`breadcrumb-badge-${index}`}>\n                    {badge}\n                </Badge>\n            ))}\n        </li>\n    );\n};\nCurrentBreadcrumbItem.displayName = 'FondueCurrentBreadcrumbItem';\n"],"names":["CurrentBreadcrumbItem","label","badges","bold","decorator","link","onClick","activeInline","dataTestId","ref","useRef","Element","getItemElementType","itemProps","useBreadcrumbItem","elementTypeProps","isFocusVisible","focusProps","useFocusRing","props","mergeProps","classNames","merge","FOCUS_STYLE_NO_OFFSET","jsxs","badge","index","createElement","Badge"],"mappings":";;;;;;;;;AAgBO,MAAMA,IAAwB,CAAC;AAAA,EAClC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAAgD;AACtC,QAAAC,IAAMC,EAAO,IAAI,GACjBC,IAAUC,EAAmBP,GAAMC,CAAO,GAC1C,EAAE,WAAAO,MAAcC;AAAA,IAClB;AAAA,MACI,WAAW;AAAA,MACX,UAAUb;AAAA,MACV,aAAaU;AAAA,IACjB;AAAA,IACAF;AAAA,EAAA,GAGEM,IAAmB,EAAE,GAAG,EAAE,MAAMV,EAAK,GAAG,QAAQ,EAAE,SAAAC,GAAS,MAAM,SAAqB,GAAA,MAAM,CAAG,EAAA,GAE/F,EAAE,gBAAAU,GAAgB,YAAAC,EAAW,IAAIC,EAAa,GAC9CC,IAAQC,EAAWP,GAAWI,GAAYF,EAAiBJ,CAAO,CAAC,GAEnEU,IAAaC,EAAM;AAAA,IACrB;AAAA,IACAnB,KAAQ;AAAA,IACRI,KAAgB;AAAA,IAChBS,KAAkBO;AAAA,EAAA,CACrB;AAGG,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF,EAAM;AAAA,QACb;AAAA,QACAf,IAAe,4BAA4B;AAAA,MAAA,CAC9C;AAAA,MACD,gBAAc,GAAGC,CAAU;AAAA,MAE3B,UAAA;AAAA,QAAA,gBAAAgB,EAACb,GAAQ,EAAA,KAAAF,GAAW,GAAGU,GAAO,WAAWE,GACpC,UAAA;AAAA,UAAAjB;AAAA,UACAH;AAAA,QAAA,GACL;AAAA,QACCC,KAAA,gBAAAA,EAAQ,IAAI,CAAC,EAAE,UAAUuB,GAAO,GAAGN,EAAM,GAAGO,MACxC,gBAAAC,EAAAC,GAAA,EAAO,GAAGT,GAAO,KAAK,oBAAoBO,CAAK,GAAA,GAC3CD,CACL;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAGb;AACAzB,EAAsB,cAAc;"}

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

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

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

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