@frontify/fondue 12.0.0-beta.375 → 12.0.0-beta.376

package/dist/components/Popper/Popper.es.js

@@ -1,71 +1,76 @@
-import { jsx as p, Fragment as I } from "react/jsx-runtime";
-import { useState as i, useLayoutEffect as L, Children as N, isValidElement as x } from "react";
-import { Trigger as u } from "../../utilities/dialogs/Trigger.es.js";
+import { jsx as n, Fragment as D } from "react/jsx-runtime";
+import { useState as i, useLayoutEffect as F, Children as I, isValidElement as N } from "react";
+import { Trigger as E } from "../../utilities/dialogs/Trigger.es.js";
 import { Content as y } from "../../utilities/dialogs/Content.es.js";
-import { usePopper as D } from "react-popper";
+import { usePopper as x } from "react-popper";
 import { Portal as H } from "../Portal/Portal.es.js";
-const S = 200, v = 400, C = "100px", R = ({ dimension: n, isVerticalAlignedToTop: r }) => ({
-  left: `${(window.innerWidth - n.width) / 2}px`,
-  top: r ? C : `${(window.innerHeight - n.height) / 2}px`,
+const S = 200, C = 400, R = "100px", U = ({ dimension: p, isVerticalAlignedToTop: r }) => ({
+  left: `${(window.innerWidth - p.width) / 2}px`,
+  top: r ? R : `${(window.innerHeight - p.height) / 2}px`,
   transform: "none"
 }), m = ({
-  children: n,
+  children: p,
   open: r,
-  placement: E = "bottom-start",
-  offset: P = [0, 8],
-  flip: h = !0,
+  placement: P = "bottom-start",
+  offset: h = [0, 8],
+  flip: w = !0,
   enablePortal: g = !0,
-  zIndex: l = "auto",
+  zIndex: a = "auto",
   isDetached: s = !1,
   verticalAlignment: T,
-  strategy: w = "absolute"
+  strategy: L = "absolute"
 }) => {
-  const [_, b] = i(null), [O, a] = i(null), [A, F] = i({
+  const [_, b] = i(null), [v, l] = i(null), [O, A] = i({
     width: S,
-    height: v
-  }), t = D(s ? document.body : _, O, {
-    placement: E,
+    height: C
+  }), t = x(s ? document.body : _, v, {
+    placement: P,
     modifiers: [
-      { name: "offset", options: { offset: P } },
+      { name: "offset", options: { offset: h } },
       {
         name: "flip",
-        enabled: h
+        enabled: w
       }
     ],
-    strategy: w
+    strategy: L
   });
-  L(() => {
-    var e, o, d, c;
-    s && t.state && r && F({
-      width: (o = (e = t.state.rects) == null ? void 0 : e.popper) == null ? void 0 : o.width,
-      height: (c = (d = t.state.rects) == null ? void 0 : d.popper) == null ? void 0 : c.height
-    });
+  F(() => {
+    const e = () => {
+      var o, d, u, c;
+      s && t.state && r && A({
+        width: (d = (o = t.state.rects) == null ? void 0 : o.popper) == null ? void 0 : d.width,
+        height: (c = (u = t.state.rects) == null ? void 0 : u.popper) == null ? void 0 : c.height
+      });
+    };
+    return e(), window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
   }, [s, r, t.state]);
-  const f = s ? R({ dimension: A, isVerticalAlignedToTop: T === "top" }) : {};
-  return /* @__PURE__ */ p(I, { children: N.map(n, (e) => {
-    if (x(e) && typeof e.type == "function") {
+  const f = s ? U({ dimension: O, isVerticalAlignedToTop: T === "top" }) : {};
+  return /* @__PURE__ */ n(D, { children: I.map(p, (e) => {
+    if (N(e) && typeof e.type == "function") {
       const { displayName: o } = e.type;
-      if (o === u.displayName)
-        return /* @__PURE__ */ p("div", { ref: b, children: e });
+      if (o === E.displayName)
+        return /* @__PURE__ */ n("div", { ref: b, children: e });
       if (o === y.displayName && r)
-        return g ? /* @__PURE__ */ p(H, { children: /* @__PURE__ */ p(
+        return g ? /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(
           "div",
           {
-            ref: a,
+            ref: l,
             style: {
-              zIndex: l,
+              zIndex: a,
               ...t.styles.popper,
               ...f
             },
             ...t.attributes.popper,
             children: e
           }
-        ) }) : /* @__PURE__ */ p(
+        ) }) : /* @__PURE__ */ n(
           "div",
           {
-            ref: a,
+            ref: l,
             style: {
-              zIndex: l,
+              zIndex: a,
               ...t.styles.popper,
               ...f
             },
@@ -77,7 +82,7 @@ const S = 200, v = 400, C = "100px", R = ({ dimension: n, isVerticalAlignedToTop
   }) });
 };
 m.displayName = "FonduePopper";
-m.Trigger = u;
+m.Trigger = E;
 m.Content = y;
 export {
   m as Popper

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.es.js","sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, isValidElement, useLayoutEffect, useState } from 'react';\nimport { Trigger } from '@utilities/dialogs/Trigger';\nimport { Content } from '@utilities/dialogs/Content';\nimport { usePopper } from 'react-popper';\nimport { Portal } from '@components/Portal';\nimport { PopperDimension, PopperProps, PrepareElementStyleProps } from '@components/Popper/types';\n\nconst DEFAULT_POPPER_WIDTH = 200;\nconst DEFAULT_POPPER_HEIGHT = 400;\nconst DEFAULT_DIALOG_TOP_POSITION = '100px';\n\nconst prepareElementStyle = ({ dimension, isVerticalAlignedToTop }: PrepareElementStyleProps) => ({\n    left: `${(window.innerWidth - dimension.width) / 2}px`,\n    top: isVerticalAlignedToTop ? DEFAULT_DIALOG_TOP_POSITION : `${(window.innerHeight - dimension.height) / 2}px`,\n    transform: 'none',\n});\n\nexport const Popper = ({\n    children,\n    open,\n    placement = 'bottom-start',\n    offset = [0, 8],\n    flip = true,\n    enablePortal = true,\n    zIndex = 'auto',\n    isDetached = false,\n    verticalAlignment,\n    strategy = 'absolute',\n}: PopperProps) => {\n    const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [popperDimensions, setPopperDimensions] = useState<PopperDimension>({\n        width: DEFAULT_POPPER_WIDTH,\n        height: DEFAULT_POPPER_HEIGHT,\n    });\n\n    const popperInstance = usePopper(isDetached ? document.body : referenceElement, popperElement, {\n        placement,\n        modifiers: [\n            { name: 'offset', options: { offset } },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n        strategy,\n    });\n\n    useLayoutEffect(() => {\n        if (isDetached && popperInstance.state && open) {\n            setPopperDimensions({\n                width: popperInstance.state.rects?.popper?.width,\n                height: popperInstance.state.rects?.popper?.height,\n            });\n        }\n    }, [isDetached, open, popperInstance.state]);\n\n    const detachedElementStyles = isDetached\n        ? prepareElementStyle({ dimension: popperDimensions, isVerticalAlignedToTop: verticalAlignment === 'top' })\n        : {};\n\n    return (\n        <>\n            {Children.map(children, (child) => {\n                if (isValidElement(child) && typeof child.type === 'function') {\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore Property 'displayName' does not exist on type 'JSXElementConstructor<any>'.ts(2339)\n                    const { displayName } = child.type;\n\n                    if (displayName === Trigger.displayName) {\n                        return <div ref={setReferenceElement}>{child}</div>;\n                    }\n\n                    if (displayName === Content.displayName && open) {\n                        return enablePortal ? (\n                            <Portal>\n                                <div\n                                    ref={setPopperElement}\n                                    style={{\n                                        zIndex,\n                                        ...popperInstance.styles.popper,\n                                        ...detachedElementStyles,\n                                    }}\n                                    {...popperInstance.attributes.popper}\n                                >\n                                    {child}\n                                </div>\n                            </Portal>\n                        ) : (\n                            <div\n                                ref={setPopperElement}\n                                style={{\n                                    zIndex,\n                                    ...popperInstance.styles.popper,\n                                    ...detachedElementStyles,\n                                }}\n                                {...popperInstance.attributes.popper}\n                            >\n                                {child}\n                            </div>\n                        );\n                    }\n                }\n            })}\n        </>\n    );\n};\nPopper.displayName = 'FonduePopper';\nPopper.Trigger = Trigger;\nPopper.Content = Content;\n"],"names":["DEFAULT_POPPER_WIDTH","DEFAULT_POPPER_HEIGHT","DEFAULT_DIALOG_TOP_POSITION","prepareElementStyle","dimension","isVerticalAlignedToTop","Popper","children","open","placement","offset","flip","enablePortal","zIndex","isDetached","verticalAlignment","strategy","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperDimensions","setPopperDimensions","popperInstance","usePopper","useLayoutEffect","_b","_a","_d","_c","detachedElementStyles","jsx","Fragment","Children","child","isValidElement","displayName","Trigger","Content","Portal"],"mappings":";;;;;;AASA,MAAMA,IAAuB,KACvBC,IAAwB,KACxBC,IAA8B,SAE9BC,IAAsB,CAAC,EAAE,WAAAC,GAAW,wBAAAC,SAAwD;AAAA,EAC9F,MAAM,IAAI,OAAO,aAAaD,EAAU,SAAS,CAAC;AAAA,EAClD,KAAKC,IAAyBH,IAA8B,IAAI,OAAO,cAAcE,EAAU,UAAU,CAAC;AAAA,EAC1G,WAAW;AACf,IAEaE,IAAS,CAAC;AAAA,EACnB,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS,CAAC,GAAG,CAAC;AAAA,EACd,MAAAC,IAAO;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,QAAAC,IAAS;AAAA,EACT,YAAAC,IAAa;AAAA,EACb,mBAAAC;AAAA,EACA,UAAAC,IAAW;AACf,MAAmB;AACf,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAgC,IAAI,GAC9E,CAACC,GAAeC,CAAgB,IAAIF,EAAgC,IAAI,GACxE,CAACG,GAAkBC,CAAmB,IAAIJ,EAA0B;AAAA,IACtE,OAAOnB;AAAA,IACP,QAAQC;AAAA,EAAA,CACX,GAEKuB,IAAiBC,EAAUX,IAAa,SAAS,OAAOG,GAAkBG,GAAe;AAAA,IAC3F,WAAAX;AAAA,IACA,WAAW;AAAA,MACP,EAAE,MAAM,UAAU,SAAS,EAAE,QAAAC,IAAS;AAAA,MACtC;AAAA,QACI,MAAM;AAAA,QACN,SAASC;AAAA,MACb;AAAA,IACJ;AAAA,IACA,UAAAK;AAAA,EAAA,CACH;AAED,EAAAU,EAAgB,MAAM;;AACd,IAAAZ,KAAcU,EAAe,SAAShB,KAClBe,EAAA;AAAA,MAChB,QAAOI,KAAAC,IAAAJ,EAAe,MAAM,UAArB,gBAAAI,EAA4B,WAA5B,gBAAAD,EAAoC;AAAA,MAC3C,SAAQE,KAAAC,IAAAN,EAAe,MAAM,UAArB,gBAAAM,EAA4B,WAA5B,gBAAAD,EAAoC;AAAA,IAAA,CAC/C;AAAA,KAEN,CAACf,GAAYN,GAAMgB,EAAe,KAAK,CAAC;AAErC,QAAAO,IAAwBjB,IACxBX,EAAoB,EAAE,WAAWmB,GAAkB,wBAAwBP,MAAsB,MAAO,CAAA,IACxG,CAAA;AAEN,SAES,gBAAAiB,EAAAC,GAAA,EAAA,UAAAC,EAAS,IAAI3B,GAAU,CAAC4B,MAAU;AAC/B,QAAIC,EAAeD,CAAK,KAAK,OAAOA,EAAM,QAAS,YAAY;AAGrD,YAAA,EAAE,aAAAE,EAAY,IAAIF,EAAM;AAE1B,UAAAE,MAAgBC,EAAQ;AACxB,eAAQ,gBAAAN,EAAA,OAAA,EAAI,KAAKd,GAAsB,UAAMiB,EAAA,CAAA;AAG7C,UAAAE,MAAgBE,EAAQ,eAAe/B;AAChC,eAAAI,sBACF4B,GACG,EAAA,UAAA,gBAAAR;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKX;AAAA,YACL,OAAO;AAAA,cACH,QAAAR;AAAA,cACA,GAAGW,EAAe,OAAO;AAAA,cACzB,GAAGO;AAAA,YACP;AAAA,YACC,GAAGP,EAAe,WAAW;AAAA,YAE7B,UAAAW;AAAA,UAAA;AAAA,WAET,IAEA,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,KAAKX;AAAA,YACL,OAAO;AAAA,cACH,QAAAR;AAAA,cACA,GAAGW,EAAe,OAAO;AAAA,cACzB,GAAGO;AAAA,YACP;AAAA,YACC,GAAGP,EAAe,WAAW;AAAA,YAE7B,UAAAW;AAAA,UAAA;AAAA,QAAA;AAAA,IAIjB;AAAA,EACH,CAAA,EACL,CAAA;AAER;AACA7B,EAAO,cAAc;AACrBA,EAAO,UAAUgC;AACjBhC,EAAO,UAAUiC;"}
+{"version":3,"file":"Popper.es.js","sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Children, isValidElement, useLayoutEffect, useState } from 'react';\nimport { Trigger } from '@utilities/dialogs/Trigger';\nimport { Content } from '@utilities/dialogs/Content';\nimport { usePopper } from 'react-popper';\nimport { Portal } from '@components/Portal';\nimport { PopperDimension, PopperProps, PrepareElementStyleProps } from '@components/Popper/types';\n\nconst DEFAULT_POPPER_WIDTH = 200;\nconst DEFAULT_POPPER_HEIGHT = 400;\nconst DEFAULT_DIALOG_TOP_POSITION = '100px';\n\nconst prepareElementStyle = ({ dimension, isVerticalAlignedToTop }: PrepareElementStyleProps) => ({\n    left: `${(window.innerWidth - dimension.width) / 2}px`,\n    top: isVerticalAlignedToTop ? DEFAULT_DIALOG_TOP_POSITION : `${(window.innerHeight - dimension.height) / 2}px`,\n    transform: 'none',\n});\n\nexport const Popper = ({\n    children,\n    open,\n    placement = 'bottom-start',\n    offset = [0, 8],\n    flip = true,\n    enablePortal = true,\n    zIndex = 'auto',\n    isDetached = false,\n    verticalAlignment,\n    strategy = 'absolute',\n}: PopperProps) => {\n    const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [popperDimensions, setPopperDimensions] = useState<PopperDimension>({\n        width: DEFAULT_POPPER_WIDTH,\n        height: DEFAULT_POPPER_HEIGHT,\n    });\n\n    const popperInstance = usePopper(isDetached ? document.body : referenceElement, popperElement, {\n        placement,\n        modifiers: [\n            { name: 'offset', options: { offset } },\n            {\n                name: 'flip',\n                enabled: flip,\n            },\n        ],\n        strategy,\n    });\n\n    useLayoutEffect(() => {\n        const adjustPopperDimensions = () => {\n            if (isDetached && popperInstance.state && open) {\n                setPopperDimensions({\n                    width: popperInstance.state.rects?.popper?.width,\n                    height: popperInstance.state.rects?.popper?.height,\n                });\n            }\n        };\n\n        adjustPopperDimensions();\n        window.addEventListener('resize', adjustPopperDimensions);\n\n        return () => {\n            window.removeEventListener('resize', adjustPopperDimensions);\n        };\n    }, [isDetached, open, popperInstance.state]);\n\n    const detachedElementStyles = isDetached\n        ? prepareElementStyle({ dimension: popperDimensions, isVerticalAlignedToTop: verticalAlignment === 'top' })\n        : {};\n\n    return (\n        <>\n            {Children.map(children, (child) => {\n                if (isValidElement(child) && typeof child.type === 'function') {\n                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                    // @ts-ignore Property 'displayName' does not exist on type 'JSXElementConstructor<any>'.ts(2339)\n                    const { displayName } = child.type;\n\n                    if (displayName === Trigger.displayName) {\n                        return <div ref={setReferenceElement}>{child}</div>;\n                    }\n\n                    if (displayName === Content.displayName && open) {\n                        return enablePortal ? (\n                            <Portal>\n                                <div\n                                    ref={setPopperElement}\n                                    style={{\n                                        zIndex,\n                                        ...popperInstance.styles.popper,\n                                        ...detachedElementStyles,\n                                    }}\n                                    {...popperInstance.attributes.popper}\n                                >\n                                    {child}\n                                </div>\n                            </Portal>\n                        ) : (\n                            <div\n                                ref={setPopperElement}\n                                style={{\n                                    zIndex,\n                                    ...popperInstance.styles.popper,\n                                    ...detachedElementStyles,\n                                }}\n                                {...popperInstance.attributes.popper}\n                            >\n                                {child}\n                            </div>\n                        );\n                    }\n                }\n            })}\n        </>\n    );\n};\nPopper.displayName = 'FonduePopper';\nPopper.Trigger = Trigger;\nPopper.Content = Content;\n"],"names":["DEFAULT_POPPER_WIDTH","DEFAULT_POPPER_HEIGHT","DEFAULT_DIALOG_TOP_POSITION","prepareElementStyle","dimension","isVerticalAlignedToTop","Popper","children","open","placement","offset","flip","enablePortal","zIndex","isDetached","verticalAlignment","strategy","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperDimensions","setPopperDimensions","popperInstance","usePopper","useLayoutEffect","adjustPopperDimensions","_b","_a","_d","_c","detachedElementStyles","jsx","Fragment","Children","child","isValidElement","displayName","Trigger","Content","Portal"],"mappings":"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"}

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

@@ -86,7 +86,7 @@ const Y = 12, y = 7, D = (e) => {
         onBlur: g,
         "aria-label": M,
         "aria-disabled": f,
-        "aria-labelledby": m,
+        "aria-describedby": m,
         disabled: f,
         className: "disabled:tw-text-text-disabled",
         "data-test-id": `${u}-button`,

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-labelledby={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        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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"}

package/dist/hooks/useMobileDetection.es.js

@@ -3,7 +3,7 @@ const r = () => {
   const [t, n] = i(!1);
   return s(() => {
     const e = () => {
-      const o = window.matchMedia("only screen and (max-width: 480px)").matches;
+      const o = window.matchMedia("only screen and (max-width: 640px)").matches;
       n(o);
     };
     return e(), window.addEventListener("resize", e), window.addEventListener("load", e), () => {

package/dist/hooks/useMobileDetection.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMobileDetection.es.js","sources":["../../src/hooks/useMobileDetection.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\n\nconst useMobileDetection = () => {\n    const [isMobile, setIsMobile] = useState(false);\n\n    useEffect(() => {\n        const handleDeviceDetection = () => {\n            const isMobileScreen = window.matchMedia('only screen and (max-width: 480px)').matches;\n\n            setIsMobile(isMobileScreen);\n        };\n\n        handleDeviceDetection();\n        window.addEventListener('resize', handleDeviceDetection);\n        window.addEventListener('load', handleDeviceDetection);\n\n        return () => {\n            window.removeEventListener('resize', handleDeviceDetection);\n            window.removeEventListener('load', handleDeviceDetection);\n        };\n    }, []);\n\n    return isMobile;\n};\n\nexport default useMobileDetection;\n"],"names":["useMobileDetection","isMobile","setIsMobile","useState","useEffect","handleDeviceDetection","isMobileScreen","useMobileDetection$1"],"mappings":";AAIA,MAAMA,IAAqB,MAAM;AAC7B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAE9C,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAwB,MAAM;AAChC,YAAMC,IAAiB,OAAO,WAAW,oCAAoC,EAAE;AAE/E,MAAAJ,EAAYI,CAAc;AAAA,IAAA;AAGR,WAAAD,KACf,OAAA,iBAAiB,UAAUA,CAAqB,GAChD,OAAA,iBAAiB,QAAQA,CAAqB,GAE9C,MAAM;AACF,aAAA,oBAAoB,UAAUA,CAAqB,GACnD,OAAA,oBAAoB,QAAQA,CAAqB;AAAA,IAAA;AAAA,EAEhE,GAAG,CAAE,CAAA,GAEEJ;AACX,GAEAM,IAAeP;"}
+{"version":3,"file":"useMobileDetection.es.js","sources":["../../src/hooks/useMobileDetection.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\n\nconst useMobileDetection = () => {\n    const [isMobile, setIsMobile] = useState(false);\n\n    useEffect(() => {\n        const handleDeviceDetection = () => {\n            const isSmallScreen = window.matchMedia('only screen and (max-width: 640px)').matches;\n\n            setIsMobile(isSmallScreen);\n        };\n\n        handleDeviceDetection();\n        window.addEventListener('resize', handleDeviceDetection);\n        window.addEventListener('load', handleDeviceDetection);\n\n        return () => {\n            window.removeEventListener('resize', handleDeviceDetection);\n            window.removeEventListener('load', handleDeviceDetection);\n        };\n    }, []);\n\n    return isMobile;\n};\n\nexport default useMobileDetection;\n"],"names":["useMobileDetection","isMobile","setIsMobile","useState","useEffect","handleDeviceDetection","isSmallScreen","useMobileDetection$1"],"mappings":";AAIA,MAAMA,IAAqB,MAAM;AAC7B,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK;AAE9C,SAAAC,EAAU,MAAM;AACZ,UAAMC,IAAwB,MAAM;AAChC,YAAMC,IAAgB,OAAO,WAAW,oCAAoC,EAAE;AAE9E,MAAAJ,EAAYI,CAAa;AAAA,IAAA;AAGP,WAAAD,KACf,OAAA,iBAAiB,UAAUA,CAAqB,GAChD,OAAA,iBAAiB,QAAQA,CAAqB,GAE9C,MAAM;AACF,aAAA,oBAAoB,UAAUA,CAAqB,GACnD,OAAA,oBAAoB,QAAQA,CAAqB;AAAA,IAAA;AAAA,EAEhE,GAAG,CAAE,CAAA,GAEEJ;AACX,GAEAM,IAAeP;"}