@frontify/fondue 12.0.0-beta.374 → 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":"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"}
+{"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/SegmentedControls/SegmentedControls.es.js

@@ -1,28 +1,28 @@
-import { jsx as r, jsxs as I } from "react/jsx-runtime";
-import { useMemoizedId as j } from "../../hooks/useMemoizedId.es.js";
-import { useFocusRing as F } from "@react-aria/focus";
-import { setInteractionModality as M } from "@react-aria/interactions";
-import { useRadio as P, useRadioGroup as $ } from "@react-aria/radio";
-import { VisuallyHidden as H } from "@react-aria/visually-hidden";
-import { useRadioGroupState as O } from "@react-stately/radio";
-import { FOCUS_STYLE as A } from "../../utilities/focusStyle.es.js";
-import { merge as v } from "../../utilities/merge.es.js";
-import { motion as B } from "framer-motion";
-import { forwardRef as T, useRef as E, useState as W, useMemo as X, useCallback as N, useEffect as z } from "react";
-const h = (m) => m.icon !== void 0, k = T((m, f) => {
-  const { id: p, item: e, disabled: a, radioGroupState: t, size: d } = m, o = E(null), c = e.id === t.selectedValue, { inputProps: x } = P(
+import { jsx as r, jsxs as R } from "react/jsx-runtime";
+import { useMemoizedId as F } from "../../hooks/useMemoizedId.es.js";
+import { useFocusRing as M } from "@react-aria/focus";
+import { setInteractionModality as P } from "@react-aria/interactions";
+import { useRadio as $, useRadioGroup as z } from "@react-aria/radio";
+import { VisuallyHidden as A } from "@react-aria/visually-hidden";
+import { useRadioGroupState as B } from "@react-stately/radio";
+import { FOCUS_STYLE as T } from "../../utilities/focusStyle.es.js";
+import { merge as S } from "../../utilities/merge.es.js";
+import { motion as X } from "framer-motion";
+import { forwardRef as H, useRef as k, useState as O, useMemo as U, useCallback as I, useEffect as Y } from "react";
+const h = (m) => m.icon !== void 0, D = H((m, u) => {
+  const { id: p, item: e, disabled: d, radioGroupState: n, size: o } = m, s = k(null), c = e.id === n.selectedValue, { inputProps: x } = $(
     {
       value: e.id,
       "aria-label": h(e) ? e.ariaLabel : e.value.toString(),
-      isDisabled: a,
+      isDisabled: d,
       id: c ? p : void 0
     },
-    t,
-    o
-  ), { isFocusVisible: w, focusProps: S } = F(), s = () => {
-    var g;
-    a || (t.setSelectedValue(e.id), (g = o.current) == null || g.focus(), M("pointer"));
-  }, y = () => {
+    n,
+    s
+  ), { isFocusVisible: w, focusProps: y } = M(), i = () => {
+    var b;
+    d || (n.setSelectedValue(e.id), (b = s.current) == null || b.focus(), P("pointer"));
+  }, C = () => {
     switch (!0) {
       case h(e):
         return "fondue-segmented-controls-item-icon";
@@ -35,35 +35,35 @@ const h = (m) => m.icon !== void 0, k = T((m, f) => {
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: f,
-      className: v([
+      ref: u,
+      className: S([
         "tw-relative",
         "after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden",
-        w && A
+        w && T
       ]),
-      children: /* @__PURE__ */ I(
+      children: /* @__PURE__ */ R(
         "div",
         {
           role: "none",
-          onClick: s,
-          "data-test-id": y(),
-          className: v([
+          onClick: i,
+          "data-test-id": C(),
+          className: S([
             "tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center",
-            d === "small" ? "tw-px-2" : "tw-px-4",
-            c && !a ? "tw-text-text" : "tw-text-text-weak",
-            a ? "tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed" : "hover:tw-text-text hover:tw-cursor-pointer"
+            o === "small" ? "tw-px-2" : "tw-px-4",
+            c && !d ? "tw-text-text" : "tw-text-text-weak",
+            d ? "tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed" : "hover:tw-text-text hover:tw-cursor-pointer"
           ]),
           children: [
-            /* @__PURE__ */ r(H, { children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r(A, { children: /* @__PURE__ */ r(
               "input",
               {
                 ...x,
-                ...S,
+                ...y,
                 "data-test-id": "fondue-segmented-controls-input",
-                ref: o
+                ref: s
               }
             ) }),
-            /* @__PURE__ */ I("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex", children: [
+            /* @__PURE__ */ R("span", { className: "tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex", children: [
               h(e) && /* @__PURE__ */ r("span", { className: "tw-leading-3", "aria-label": e.ariaLabel, children: e.icon }),
               e.value && /* @__PURE__ */ r("span", { className: h(e) ? "tw-ml-2" : "", children: e.value.toString() })
             ] })
@@ -74,76 +74,77 @@ const h = (m) => m.icon !== void 0, k = T((m, f) => {
     e.id
   );
 });
-k.displayName = "SegmentedControlsItem";
-const U = ({
+D.displayName = "SegmentedControlsItem";
+const _ = ({
   id: m,
-  items: f,
+  items: u,
   activeItemId: p,
   onChange: e,
-  ariaLabel: a = "SegmentedControls",
-  disabled: t = !1,
-  hugWidth: d = !1,
-  size: o
+  ariaLabel: d = "SegmentedControls",
+  disabled: n = !1,
+  hugWidth: o = !1,
+  size: s
 }) => {
-  const c = j(m), x = { onChange: e, value: p, label: a, isDisabled: t }, w = O(x), { radioGroupProps: S } = $(x, w), s = E([]), [y, g] = W(null), D = X(() => f.map((n, u) => /* @__PURE__ */ r(
-    k,
+  const c = F(m), x = { onChange: e, value: p, label: d, isDisabled: n }, w = B(x), { radioGroupProps: y } = z(x, w), i = k([]), [C, b] = O(null), G = U(() => u.map((t, a) => /* @__PURE__ */ r(
+    D,
     {
       id: c,
-      item: n,
-      disabled: t,
+      item: t,
+      disabled: n,
       radioGroupState: w,
-      ref: (l) => s.current[u] = l,
-      size: o
+      ref: (f) => i.current[a] = f,
+      size: s
     },
-    `fondue-segmented-controls-${c}-item-${n.id}`
-  )), [f, c, t, w, o]), i = f.findIndex((n) => n.id === w.selectedValue), G = d ? "" : "tw-w-full", V = d ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly", L = N(() => {
-    var l;
-    let u = o === "small" || d ? -1 : 0;
-    for (let C = 0; C < i; C++)
-      u += ((l = s.current[C]) == null ? void 0 : l.clientWidth) ?? 0;
-    return `${u}px`;
-  }, [d, i, o]), R = N(() => {
-    var l;
-    const u = i === s.current.length - 1 ? 1 : -1;
-    return `${(((l = s.current[i]) == null ? void 0 : l.clientWidth) ?? 0) + u}px`;
-  }, [i]), b = N(() => {
-    const n = s.current ? { x: L(), width: R() } : { x: "0px", width: "0px" };
-    g(n);
-  }, [R, L]);
-  return z(() => (i >= 0 && b(), window.addEventListener("resize", b), () => {
-    window.removeEventListener("resize", b);
-  }), [i, b]), /* @__PURE__ */ r("div", { className: "tw-flex", children: /* @__PURE__ */ I(
+    `fondue-segmented-controls-${c}-item-${t.id}`
+  )), [u, c, n, w, s]), l = u.findIndex((t) => t.id === w.selectedValue), V = o ? "" : "tw-w-full", j = o ? "tw-flex" : "tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly", g = s === "small", N = l === i.current.length - 1, L = I(() => {
+    var a;
+    let t = o ? -1 : 0;
+    t -= g && N ? 1 : 0;
+    for (let f = 0; f < l; f++)
+      t += ((a = i.current[f]) == null ? void 0 : a.clientWidth) ?? 0;
+    return t -= N || o ? 0 : 1, `${t}px`;
+  }, [l, g, N, o]), E = I(() => {
+    var a;
+    const t = g || o ? -1 : 0;
+    return `${(((a = i.current[l]) == null ? void 0 : a.clientWidth) ?? 0) + t}px`;
+  }, [l, g, o]), v = I(() => {
+    const t = i.current ? { x: L(), width: E() } : { x: "0px", width: "0px" };
+    b(t);
+  }, [E, L]);
+  return Y(() => (l >= 0 && v(), window.addEventListener("resize", v), () => {
+    window.removeEventListener("resize", v);
+  }), [l, v]), /* @__PURE__ */ r("div", { className: "tw-flex", children: /* @__PURE__ */ R(
     "fieldset",
     {
-      ...S,
+      ...y,
       "data-test-id": "fondue-segmented-controls",
-      className: v([
+      className: S([
         "tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none",
-        G,
-        V
+        V,
+        j
       ]),
       children: [
         /* @__PURE__ */ r(
-          B.div,
+          X.div,
           {
             "aria-hidden": "true",
-            animate: y ?? { x: "0px", width: "0px" },
+            animate: C ?? { x: "0px", width: "0px" },
             initial: !1,
             transition: { type: "tween", duration: 0.3 },
             hidden: !p,
-            className: v([
-              "tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none",
-              t ? "tw-border-line-x-strong hover:tw-cursor-not-allowed" : "tw-border-line-xx-strong tw-bg-base"
+            className: S([
+              "tw-absolute tw--inset-y-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none",
+              n ? "tw-border-line-x-strong hover:tw-cursor-not-allowed" : "tw-border-line-xx-strong tw-bg-base"
             ])
           }
         ),
-        D
+        G
       ]
     }
   ) });
 };
-U.displayName = "FondueSegmentedControls";
+_.displayName = "FondueSegmentedControls";
 export {
-  U as SegmentedControls
+  _ as SegmentedControls
 };
 //# sourceMappingURL=SegmentedControls.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport { ReactElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nexport type IconItem = {\n    id: string;\n    icon: ReactElement<IconProps>;\n    value?: string;\n    ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n    id: string;\n    value: string | number;\n};\n\nexport type SegmentSize = 'small' | 'medium';\n\nexport type SegmentedControlsProps = {\n    id?: string;\n    items: (TextOrNumberItem | IconItem)[];\n    activeItemId?: string;\n    onChange: (id: string) => void;\n    ariaLabel?: string;\n    disabled?: boolean;\n    hugWidth?: boolean;\n    size?: SegmentSize;\n};\n\nconst isIconItem = (item: TextOrNumberItem | IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n    id: string;\n    item: TextOrNumberItem | IconItem;\n    disabled: boolean;\n    radioGroupState: RadioGroupState;\n    size?: SegmentSize;\n}\n\nconst SegmentedControlsItem = forwardRef<HTMLDivElement, SegmentedControlsItemProps>((props, ref) => {\n    const { id, item, disabled, radioGroupState, size } = props;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const isActive = item.id === radioGroupState.selectedValue;\n    const { inputProps } = useRadio(\n        {\n            value: item.id,\n            'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n            isDisabled: disabled,\n            id: isActive ? id : undefined,\n        },\n        radioGroupState,\n        inputRef,\n    );\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleMockLabelClick = () => {\n        if (!disabled) {\n            radioGroupState.setSelectedValue(item.id);\n            inputRef.current?.focus();\n            setInteractionModality('pointer');\n        }\n    };\n\n    const getSegmentedControlsItemTestId = () => {\n        switch (true) {\n            case isIconItem(item):\n                return 'fondue-segmented-controls-item-icon';\n            case typeof item.value === 'string':\n                return 'fondue-segmented-controls-item-text';\n            default:\n                return 'fondue-segmented-controls-item-number';\n        }\n    };\n\n    return (\n        <div\n            key={item.id}\n            ref={ref}\n            className={merge([\n                'tw-relative',\n                \"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden\",\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n        >\n            <div\n                // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n                // https://github.com/adobe/react-spectrum/issues/2380\n                role=\"none\"\n                onClick={handleMockLabelClick}\n                data-test-id={getSegmentedControlsItemTestId()}\n                className={merge([\n                    'tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n                    size === 'small' ? 'tw-px-2' : 'tw-px-4',\n                    isActive && !disabled ? 'tw-text-text' : 'tw-text-text-weak',\n                    disabled\n                        ? 'tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed'\n                        : 'hover:tw-text-text hover:tw-cursor-pointer',\n                ])}\n            >\n                <VisuallyHidden>\n                    <input\n                        {...inputProps}\n                        {...focusProps}\n                        data-test-id=\"fondue-segmented-controls-input\"\n                        ref={inputRef}\n                    />\n                </VisuallyHidden>\n                <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n                    {isIconItem(item) && (\n                        <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n                            {item.icon}\n                        </span>\n                    )}\n                    {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n                </span>\n            </div>\n        </div>\n    );\n});\n\nSegmentedControlsItem.displayName = 'SegmentedControlsItem';\n\nexport const SegmentedControls = ({\n    id: propId,\n    items,\n    activeItemId,\n    onChange,\n    ariaLabel = 'SegmentedControls',\n    disabled = false,\n    hugWidth = false,\n    size,\n}: SegmentedControlsProps): ReactElement => {\n    const id = useMemoizedId(propId);\n    const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n    const radioGroupState = useRadioGroupState(groupProps);\n    const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n    const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n    const [activeBorderDimensions, setActiveBorderDimensions] = useState<{ x: string; width: string } | null>(null);\n    const itemElements = useMemo(() => {\n        return items.map((item, index) => (\n            <SegmentedControlsItem\n                id={id}\n                item={item}\n                disabled={disabled}\n                radioGroupState={radioGroupState}\n                ref={(el) => (itemsRef.current[index] = el)}\n                key={`fondue-segmented-controls-${id}-item-${item.id}`}\n                size={size}\n            />\n        ));\n    }, [items, id, disabled, radioGroupState, size]);\n    const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n    const width = hugWidth ? '' : 'tw-w-full';\n    const alignment = hugWidth ? 'tw-flex' : 'tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly';\n\n    const getSliderX = useCallback(() => {\n        const isSmallOrHugWidth = size === 'small' || hugWidth;\n        let translateX = isSmallOrHugWidth ? -1 : 0;\n        for (let i = 0; i < selectedIndex; i++) {\n            translateX += itemsRef.current[i]?.clientWidth ?? 0;\n        }\n\n        return `${translateX}px`;\n    }, [hugWidth, selectedIndex, size]);\n\n    const getSliderWidth = useCallback(() => {\n        const isLastElement = selectedIndex === itemsRef.current.length - 1;\n        const width = isLastElement ? 1 : -1;\n\n        return `${(itemsRef.current[selectedIndex]?.clientWidth ?? 0) + width}px`;\n    }, [selectedIndex]);\n\n    const setSliderDimensions = useCallback(() => {\n        const dimensions = itemsRef.current ? { x: getSliderX(), width: getSliderWidth() } : { x: '0px', width: '0px' };\n        setActiveBorderDimensions(dimensions);\n    }, [getSliderWidth, getSliderX]);\n\n    useEffect(() => {\n        if (selectedIndex >= 0) {\n            setSliderDimensions();\n        }\n        window.addEventListener('resize', setSliderDimensions);\n\n        return () => {\n            window.removeEventListener('resize', setSliderDimensions);\n        };\n    }, [selectedIndex, setSliderDimensions]);\n\n    return (\n        <div className=\"tw-flex\">\n            <fieldset\n                {...radioGroupProps}\n                data-test-id=\"fondue-segmented-controls\"\n                className={merge([\n                    'tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none',\n                    width,\n                    alignment,\n                ])}\n            >\n                <motion.div\n                    aria-hidden=\"true\"\n                    // div border is not included in width so it must be subtracted from translation.\n                    animate={activeBorderDimensions ?? { x: '0px', width: '0px' }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: 0.3 }}\n                    hidden={!activeItemId}\n                    className={merge([\n                        'tw-absolute tw--inset-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n                        disabled\n                            ? 'tw-border-line-x-strong hover:tw-cursor-not-allowed'\n                            : 'tw-border-line-xx-strong tw-bg-base',\n                    ])}\n                />\n                {itemElements}\n            </fieldset>\n        </div>\n    );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","forwardRef","props","ref","id","disabled","radioGroupState","size","inputRef","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","jsx","merge","FOCUS_STYLE","jsxs","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","hugWidth","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemsRef","activeBorderDimensions","setActiveBorderDimensions","useState","itemElements","useMemo","index","el","selectedIndex","width","alignment","getSliderX","useCallback","translateX","i","getSliderWidth","setSliderDimensions","dimensions","useEffect","motion"],"mappings":"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"}
+{"version":3,"file":"SegmentedControls.es.js","sources":["../../../src/components/SegmentedControls/SegmentedControls.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconProps } from '@foundation/Icon/IconProps';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { setInteractionModality } from '@react-aria/interactions';\nimport { useRadio, useRadioGroup } from '@react-aria/radio';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { RadioGroupState, useRadioGroupState } from '@react-stately/radio';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { motion } from 'framer-motion';\nimport { ReactElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nexport type IconItem = {\n    id: string;\n    icon: ReactElement<IconProps>;\n    value?: string;\n    ariaLabel: string;\n};\n\nexport type TextOrNumberItem = {\n    id: string;\n    value: string | number;\n};\n\nexport type SegmentSize = 'small' | 'medium';\n\nexport type SegmentedControlsProps = {\n    id?: string;\n    items: (TextOrNumberItem | IconItem)[];\n    activeItemId?: string;\n    onChange: (id: string) => void;\n    ariaLabel?: string;\n    disabled?: boolean;\n    hugWidth?: boolean;\n    size?: SegmentSize;\n};\n\nconst isIconItem = (item: TextOrNumberItem | IconItem): item is IconItem => (item as IconItem).icon !== undefined;\n\ninterface SegmentedControlsItemProps {\n    id: string;\n    item: TextOrNumberItem | IconItem;\n    disabled: boolean;\n    radioGroupState: RadioGroupState;\n    size?: SegmentSize;\n}\n\nconst SegmentedControlsItem = forwardRef<HTMLDivElement, SegmentedControlsItemProps>((props, ref) => {\n    const { id, item, disabled, radioGroupState, size } = props;\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const isActive = item.id === radioGroupState.selectedValue;\n    const { inputProps } = useRadio(\n        {\n            value: item.id,\n            'aria-label': isIconItem(item) ? item.ariaLabel : item.value.toString(),\n            isDisabled: disabled,\n            id: isActive ? id : undefined,\n        },\n        radioGroupState,\n        inputRef,\n    );\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const handleMockLabelClick = () => {\n        if (!disabled) {\n            radioGroupState.setSelectedValue(item.id);\n            inputRef.current?.focus();\n            setInteractionModality('pointer');\n        }\n    };\n\n    const getSegmentedControlsItemTestId = () => {\n        switch (true) {\n            case isIconItem(item):\n                return 'fondue-segmented-controls-item-icon';\n            case typeof item.value === 'string':\n                return 'fondue-segmented-controls-item-text';\n            default:\n                return 'fondue-segmented-controls-item-number';\n        }\n    };\n\n    return (\n        <div\n            key={item.id}\n            ref={ref}\n            className={merge([\n                'tw-relative',\n                \"after:tw-content-[''] after:tw-border-r after:tw-border-solid after:tw-border-line-strong after:tw-absolute after:tw-right-0 after:tw-h-full last:after:tw-hidden\",\n                isFocusVisible && FOCUS_STYLE,\n            ])}\n        >\n            <div\n                // TODO: Change element back to label when bug #2380 from @react-aria is fixed\n                // https://github.com/adobe/react-spectrum/issues/2380\n                role=\"none\"\n                onClick={handleMockLabelClick}\n                data-test-id={getSegmentedControlsItemTestId()}\n                className={merge([\n                    'tw-relative tw-w-full tw-py-2 tw-inline-flex tw-justify-center tw-items-center tw-font-sans tw-font-normal tw-h-full tw-text-center',\n                    size === 'small' ? 'tw-px-2' : 'tw-px-4',\n                    isActive && !disabled ? 'tw-text-text' : 'tw-text-text-weak',\n                    disabled\n                        ? 'tw-text-box-disabled-inverse tw-bg-box-disabled hover:tw-cursor-not-allowed'\n                        : 'hover:tw-text-text hover:tw-cursor-pointer',\n                ])}\n            >\n                <VisuallyHidden>\n                    <input\n                        {...inputProps}\n                        {...focusProps}\n                        data-test-id=\"fondue-segmented-controls-input\"\n                        ref={inputRef}\n                    />\n                </VisuallyHidden>\n                <span className=\"tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-flex\">\n                    {isIconItem(item) && (\n                        <span className=\"tw-leading-3\" aria-label={item.ariaLabel}>\n                            {item.icon}\n                        </span>\n                    )}\n                    {item.value && <span className={isIconItem(item) ? 'tw-ml-2' : ''}>{item.value.toString()}</span>}\n                </span>\n            </div>\n        </div>\n    );\n});\n\nSegmentedControlsItem.displayName = 'SegmentedControlsItem';\n\nexport const SegmentedControls = ({\n    id: propId,\n    items,\n    activeItemId,\n    onChange,\n    ariaLabel = 'SegmentedControls',\n    disabled = false,\n    hugWidth = false,\n    size,\n}: SegmentedControlsProps): ReactElement => {\n    const id = useMemoizedId(propId);\n    const groupProps = { onChange, value: activeItemId, label: ariaLabel, isDisabled: disabled };\n    const radioGroupState = useRadioGroupState(groupProps);\n    const { radioGroupProps } = useRadioGroup(groupProps, radioGroupState);\n    const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n    const [activeBorderDimensions, setActiveBorderDimensions] = useState<{ x: string; width: string } | null>(null);\n    const itemElements = useMemo(() => {\n        return items.map((item, index) => (\n            <SegmentedControlsItem\n                id={id}\n                item={item}\n                disabled={disabled}\n                radioGroupState={radioGroupState}\n                ref={(el) => (itemsRef.current[index] = el)}\n                key={`fondue-segmented-controls-${id}-item-${item.id}`}\n                size={size}\n            />\n        ));\n    }, [items, id, disabled, radioGroupState, size]);\n    const selectedIndex = items.findIndex((item) => item.id === radioGroupState.selectedValue);\n    const width = hugWidth ? '' : 'tw-w-full';\n    const alignment = hugWidth ? 'tw-flex' : 'tw-grid tw-grid-flow-col tw-auto-cols-fr tw-justify-evenly';\n    const isSmall = size === 'small';\n    const isLastElement = selectedIndex === itemsRef.current.length - 1;\n\n    const getSliderX = useCallback(() => {\n        let translateX = hugWidth ? -1 : 0;\n        translateX -= isSmall && isLastElement ? 1 : 0;\n        for (let i = 0; i < selectedIndex; i++) {\n            translateX += itemsRef.current[i]?.clientWidth ?? 0;\n        }\n\n        translateX -= isLastElement || hugWidth ? 0 : 1;\n        return `${translateX}px`;\n    }, [selectedIndex, isSmall, isLastElement, hugWidth]);\n\n    const getSliderWidth = useCallback(() => {\n        const width = isSmall || hugWidth ? -1 : 0;\n\n        return `${(itemsRef.current[selectedIndex]?.clientWidth ?? 0) + width}px`;\n    }, [selectedIndex, isSmall, hugWidth]);\n\n    const setSliderDimensions = useCallback(() => {\n        const dimensions = itemsRef.current ? { x: getSliderX(), width: getSliderWidth() } : { x: '0px', width: '0px' };\n        setActiveBorderDimensions(dimensions);\n    }, [getSliderWidth, getSliderX]);\n\n    useEffect(() => {\n        if (selectedIndex >= 0) {\n            setSliderDimensions();\n        }\n        window.addEventListener('resize', setSliderDimensions);\n\n        return () => {\n            window.removeEventListener('resize', setSliderDimensions);\n        };\n    }, [selectedIndex, setSliderDimensions]);\n\n    return (\n        <div className=\"tw-flex\">\n            <fieldset\n                {...radioGroupProps}\n                data-test-id=\"fondue-segmented-controls\"\n                className={merge([\n                    'tw-relative tw-h-9 tw-p-0 tw-border tw-border-solid tw-border-line-strong tw-m-0 tw-bg-base-alt tw-rounded tw-font-sans tw-text-s tw-select-none',\n                    width,\n                    alignment,\n                ])}\n            >\n                <motion.div\n                    aria-hidden=\"true\"\n                    // div border is not included in width so it must be subtracted from translation.\n                    animate={activeBorderDimensions ?? { x: '0px', width: '0px' }}\n                    initial={false}\n                    transition={{ type: 'tween', duration: 0.3 }}\n                    hidden={!activeItemId}\n                    className={merge([\n                        'tw-absolute tw--inset-y-px tw-h-full tw-box-content tw-border tw-rounded tw-pointer-events-none',\n                        disabled\n                            ? 'tw-border-line-x-strong hover:tw-cursor-not-allowed'\n                            : 'tw-border-line-xx-strong tw-bg-base',\n                    ])}\n                />\n                {itemElements}\n            </fieldset>\n        </div>\n    );\n};\nSegmentedControls.displayName = 'FondueSegmentedControls';\n"],"names":["isIconItem","item","SegmentedControlsItem","forwardRef","props","ref","id","disabled","radioGroupState","size","inputRef","useRef","isActive","inputProps","useRadio","isFocusVisible","focusProps","useFocusRing","handleMockLabelClick","_a","setInteractionModality","getSegmentedControlsItemTestId","jsx","merge","FOCUS_STYLE","jsxs","VisuallyHidden","SegmentedControls","propId","items","activeItemId","onChange","ariaLabel","hugWidth","useMemoizedId","groupProps","useRadioGroupState","radioGroupProps","useRadioGroup","itemsRef","activeBorderDimensions","setActiveBorderDimensions","useState","itemElements","useMemo","index","el","selectedIndex","width","alignment","isSmall","isLastElement","getSliderX","useCallback","translateX","i","getSliderWidth","setSliderDimensions","dimensions","useEffect","motion"],"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;"}