@televet/kibble-ui 4.0.0-beta.80 → 4.0.0-beta.82

package/dist/chunks/{tooltip.component-BdlSO_v_.js → withTruncation-CIxtQTOw.js}

@@ -1,110 +1,116 @@
 import { j as s } from "./jsx-runtime-C5mzlN2N.js";
-import { forwardRef as p, useId as S } from "react";
-import { c as G, f as P, u as h, h as V, g as m, d as $, b as F, i as B, j as U, k as Y, n as M, s as y, l as N, m as R, P as q } from "./use-locale-context-BiiNTYMT.js";
-import { c as J } from "./create-slot-recipe-context-BJmsuxih.js";
-import { a1 as c, c as K, z as Q, t as W, b as X } from "./index-YtNA0Ueo.js";
-const [L, g] = G({
+import { forwardRef as C, useId as Y, memo as y, useState as z, useRef as R, useCallback as q, useEffect as J } from "react";
+import { a as K } from "./config-DlTdf-Yt.js";
+import { B as Q } from "./box-Ck9I7FYv.js";
+import { c as X } from "./create-recipe-context-D7FewUR4.js";
+import { u as Z } from "./use-slot-recipe-DhtQ1j_5.js";
+import { c as ee, f as O, u as k, h as te, g as x, d as re, b as oe, i as ne, j as se, k as ie, n as ae, s as L, l as I, m as H, P as ce } from "./use-locale-context-BiiNTYMT.js";
+import { c as le } from "./create-slot-recipe-context-BJmsuxih.js";
+import { a1 as g, c as de, z as pe, t as ue, b as ge } from "./index-YtNA0Ueo.js";
+const { withContext: Ce } = X({
+  key: "text"
+}), ve = Ce("p"), [D, v] = ee({
   name: "HoverCardContext",
   hookName: "useHoverCardContext",
   providerName: "<HoverCardProvider />"
-}), w = p((e, t) => {
-  const o = g(), r = c(o.getArrowProps(), e);
-  return /* @__PURE__ */ s.jsx(P.div, { ...r, ref: t });
+}), _ = C((e, t) => {
+  const r = v(), o = g(r.getArrowProps(), e);
+  return /* @__PURE__ */ s.jsx(O.div, { ...o, ref: t });
 });
-w.displayName = "HoverCardArrow";
-const I = p((e, t) => {
-  const o = g(), r = c(o.getArrowTipProps(), e);
-  return /* @__PURE__ */ s.jsx(P.div, { ...r, ref: t });
+_.displayName = "HoverCardArrow";
+const j = C((e, t) => {
+  const r = v(), o = g(r.getArrowTipProps(), e);
+  return /* @__PURE__ */ s.jsx(O.div, { ...o, ref: t });
 });
-I.displayName = "HoverCardArrowTip";
-const k = p((e, t) => {
-  const o = g(), r = h(), n = c(o.getContentProps(), r.getPresenceProps(), e);
-  return r.unmounted ? null : /* @__PURE__ */ s.jsx(P.div, { ...n, ref: V(r.ref, t) });
+j.displayName = "HoverCardArrowTip";
+const A = C((e, t) => {
+  const r = v(), o = k(), n = g(r.getContentProps(), o.getPresenceProps(), e);
+  return o.unmounted ? null : /* @__PURE__ */ s.jsx(O.div, { ...n, ref: te(o.ref, t) });
 });
-k.displayName = "HoverCardContent";
-const Z = (e) => e.children(g()), D = p((e, t) => {
-  const o = g(), r = c(o.getPositionerProps(), e);
-  return h().unmounted ? null : /* @__PURE__ */ s.jsx(P.div, { ...r, ref: t });
+A.displayName = "HoverCardContent";
+const Pe = (e) => e.children(v()), S = C((e, t) => {
+  const r = v(), o = g(r.getPositionerProps(), e);
+  return k().unmounted ? null : /* @__PURE__ */ s.jsx(O.div, { ...o, ref: t });
 });
-D.displayName = "HoverCardPositioner";
-var z = X("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content"), C = z.build(), H = (e) => e.ids?.trigger ?? `hover-card:${e.id}:trigger`, x = (e) => e.ids?.content ?? `hover-card:${e.id}:content`, A = (e) => e.ids?.positioner ?? `hover-card:${e.id}:popper`, ee = (e) => e.ids?.arrow ?? `hover-card:${e.id}:arrow`, E = (e) => e.getById(H(e)), te = (e) => e.getById(x(e)), T = (e) => e.getById(A(e));
-function oe(e, t) {
-  const { state: o, send: r, prop: n, context: a, scope: d } = e, l = o.hasTag("open"), u = $({
+S.displayName = "HoverCardPositioner";
+var me = ge("hoverCard").parts("arrow", "arrowTip", "trigger", "positioner", "content"), m = me.build(), $ = (e) => e.ids?.trigger ?? `hover-card:${e.id}:trigger`, F = (e) => e.ids?.content ?? `hover-card:${e.id}:content`, G = (e) => e.ids?.positioner ?? `hover-card:${e.id}:popper`, Oe = (e) => e.ids?.arrow ?? `hover-card:${e.id}:arrow`, w = (e) => e.getById($(e)), Te = (e) => e.getById(F(e)), N = (e) => e.getById(G(e));
+function Ee(e, t) {
+  const { state: r, send: o, prop: n, context: a, scope: c } = e, l = r.hasTag("open"), u = re({
     ...n("positioning"),
     placement: a.get("currentPlacement")
   });
   return {
     open: l,
     setOpen(i) {
-      o.hasTag("open") !== i && r({ type: i ? "OPEN" : "CLOSE" });
+      r.hasTag("open") !== i && o({ type: i ? "OPEN" : "CLOSE" });
     },
     reposition(i = {}) {
-      r({ type: "POSITIONING.SET", options: i });
+      o({ type: "POSITIONING.SET", options: i });
     },
     getArrowProps() {
       return t.element({
-        id: ee(d),
-        ...C.arrow.attrs,
+        id: Oe(c),
+        ...m.arrow.attrs,
         dir: n("dir"),
         style: u.arrow
       });
     },
     getArrowTipProps() {
       return t.element({
-        ...C.arrowTip.attrs,
+        ...m.arrowTip.attrs,
         dir: n("dir"),
         style: u.arrowTip
       });
     },
     getTriggerProps() {
       return t.element({
-        ...C.trigger.attrs,
+        ...m.trigger.attrs,
         dir: n("dir"),
         "data-placement": a.get("currentPlacement"),
-        id: H(d),
+        id: $(c),
         "data-state": l ? "open" : "closed",
         onPointerEnter(i) {
-          i.pointerType !== "touch" && r({ type: "POINTER_ENTER", src: "trigger" });
+          i.pointerType !== "touch" && o({ type: "POINTER_ENTER", src: "trigger" });
         },
         onPointerLeave(i) {
-          i.pointerType !== "touch" && r({ type: "POINTER_LEAVE", src: "trigger" });
+          i.pointerType !== "touch" && o({ type: "POINTER_LEAVE", src: "trigger" });
         },
         onFocus() {
-          r({ type: "TRIGGER_FOCUS" });
+          o({ type: "TRIGGER_FOCUS" });
         },
         onBlur() {
-          r({ type: "TRIGGER_BLUR" });
+          o({ type: "TRIGGER_BLUR" });
         }
       });
     },
     getPositionerProps() {
       return t.element({
-        id: A(d),
-        ...C.positioner.attrs,
+        id: G(c),
+        ...m.positioner.attrs,
         dir: n("dir"),
         style: u.floating
       });
     },
     getContentProps() {
       return t.element({
-        ...C.content.attrs,
+        ...m.content.attrs,
         dir: n("dir"),
-        id: x(d),
+        id: F(c),
         hidden: !l,
         tabIndex: -1,
         "data-state": l ? "open" : "closed",
         "data-placement": a.get("currentPlacement"),
         onPointerEnter(i) {
-          i.pointerType !== "touch" && r({ type: "POINTER_ENTER", src: "content" });
+          i.pointerType !== "touch" && o({ type: "POINTER_ENTER", src: "content" });
         },
         onPointerLeave(i) {
-          i.pointerType !== "touch" && r({ type: "POINTER_LEAVE", src: "content" });
+          i.pointerType !== "touch" && o({ type: "POINTER_LEAVE", src: "content" });
         }
       });
     }
   };
 }
-var { not: O, and: f } = Q(), re = K({
+var { not: E, and: b } = pe(), fe = de({
   props({ props: e }) {
     return {
       openDelay: 700,
@@ -124,8 +130,8 @@ var { not: O, and: f } = Q(), re = K({
       open: t(() => ({
         defaultValue: e("defaultOpen"),
         value: e("open"),
-        onChange(o) {
-          e("onOpenChange")?.({ open: o });
+        onChange(r) {
+          e("onOpenChange")?.({ open: r });
         }
       })),
       currentPlacement: t(() => ({
@@ -136,9 +142,9 @@ var { not: O, and: f } = Q(), re = K({
       }))
     };
   },
-  watch({ track: e, context: t, action: o }) {
+  watch({ track: e, context: t, action: r }) {
     e([() => t.get("open")], () => {
-      o(["toggleVisibility"]);
+      r(["toggleVisibility"]);
     });
   },
   states: {
@@ -194,12 +200,12 @@ var { not: O, and: f } = Q(), re = K({
         ],
         TRIGGER_BLUR: [
           {
-            guard: f("isOpenControlled", O("isPointer")),
+            guard: b("isOpenControlled", E("isPointer")),
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
             actions: ["invokeOnClose", "toggleVisibility"]
           },
           {
-            guard: O("isPointer"),
+            guard: E("isPointer"),
             target: "closed",
             actions: ["invokeOnClose"]
           }
@@ -242,11 +248,11 @@ var { not: O, and: f } = Q(), re = K({
         ],
         TRIGGER_BLUR: [
           {
-            guard: f("isOpenControlled", O("isPointer")),
+            guard: b("isOpenControlled", E("isPointer")),
             actions: ["invokeOnClose"]
           },
           {
-            guard: O("isPointer"),
+            guard: E("isPointer"),
             target: "closed",
             actions: ["invokeOnClose"]
           }
@@ -291,21 +297,21 @@ var { not: O, and: f } = Q(), re = K({
     },
     effects: {
       waitForOpenDelay({ send: e, prop: t }) {
-        const o = setTimeout(() => {
+        const r = setTimeout(() => {
           e({ type: "OPEN_DELAY" });
         }, t("openDelay"));
-        return () => clearTimeout(o);
+        return () => clearTimeout(r);
       },
       waitForCloseDelay({ send: e, prop: t }) {
-        const o = setTimeout(() => {
+        const r = setTimeout(() => {
           e({ type: "CLOSE_DELAY" });
         }, t("closeDelay"));
-        return () => clearTimeout(o);
+        return () => clearTimeout(r);
       },
-      trackPositioning({ context: e, prop: t, scope: o }) {
+      trackPositioning({ context: e, prop: t, scope: r }) {
         e.get("currentPlacement") || e.set("currentPlacement", t("positioning").placement);
-        const r = () => T(o);
-        return m(E(o), r, {
+        const o = () => N(r);
+        return x(w(r), o, {
           ...t("positioning"),
           defer: !0,
           onComplete(n) {
@@ -313,17 +319,17 @@ var { not: O, and: f } = Q(), re = K({
           }
         });
       },
-      trackDismissableElement({ send: e, scope: t, prop: o }) {
-        return W(() => te(t), {
+      trackDismissableElement({ send: e, scope: t, prop: r }) {
+        return ue(() => Te(t), {
           defer: !0,
-          exclude: [E(t)],
+          exclude: [w(t)],
           onDismiss() {
             e({ type: "CLOSE", src: "interact-outside" });
           },
-          onInteractOutside: o("onInteractOutside"),
-          onPointerDownOutside: o("onPointerDownOutside"),
+          onInteractOutside: r("onInteractOutside"),
+          onPointerDownOutside: r("onPointerDownOutside"),
           onFocusOutside(n) {
-            n.preventDefault(), o("onFocusOutside")?.(n);
+            n.preventDefault(), r("onFocusOutside")?.(n);
           }
         });
       }
@@ -341,11 +347,11 @@ var { not: O, and: f } = Q(), re = K({
       clearIsPointer({ context: e }) {
         e.set("isPointer", !1);
       },
-      reposition({ context: e, prop: t, scope: o, event: r }) {
-        const n = () => T(o);
-        m(E(o), n, {
+      reposition({ context: e, prop: t, scope: r, event: o }) {
+        const n = () => N(r);
+        x(w(r), n, {
           ...t("positioning"),
-          ...r.options,
+          ...o.options,
           defer: !0,
           listeners: !1,
           onComplete(a) {
@@ -353,15 +359,15 @@ var { not: O, and: f } = Q(), re = K({
           }
         });
       },
-      toggleVisibility({ prop: e, event: t, send: o }) {
+      toggleVisibility({ prop: e, event: t, send: r }) {
         queueMicrotask(() => {
-          o({ type: e("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: t });
+          r({ type: e("open") ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: t });
         });
       }
     }
   }
 });
-F()([
+oe()([
   "closeDelay",
   "dir",
   "getRootNode",
@@ -376,93 +382,115 @@ F()([
   "onPointerDownOutside",
   "onFocusOutside"
 ]);
-const ne = (e) => {
-  const t = S(), { getRootNode: o } = B(), { dir: r } = U(), n = {
+const he = (e) => {
+  const t = Y(), { getRootNode: r } = ne(), { dir: o } = se(), n = {
     id: t,
-    dir: r,
-    getRootNode: o,
+    dir: o,
+    getRootNode: r,
     ...e
-  }, a = Y(re, n);
-  return oe(a, M);
-}, se = (e) => {
-  const [t, { children: o, ...r }] = y(e), n = ne(r), a = N(c({ present: n.open }, t));
-  return /* @__PURE__ */ s.jsx(L, { value: n, children: /* @__PURE__ */ s.jsx(R, { value: a, children: o }) });
-}, ie = (e) => {
-  const [t, { value: o, children: r }] = y(e), n = N(c({ present: o.open }, t));
-  return /* @__PURE__ */ s.jsx(L, { value: o, children: /* @__PURE__ */ s.jsx(R, { value: n, children: r }) });
-}, _ = p((e, t) => {
-  const o = g(), r = c(o.getTriggerProps(), e);
-  return /* @__PURE__ */ s.jsx(P.button, { ...r, ref: t });
+  }, a = ie(fe, n);
+  return Ee(a, ae);
+}, we = (e) => {
+  const [t, { children: r, ...o }] = L(e), n = he(o), a = I(g({ present: n.open }, t));
+  return /* @__PURE__ */ s.jsx(D, { value: n, children: /* @__PURE__ */ s.jsx(H, { value: a, children: r }) });
+}, ye = (e) => {
+  const [t, { value: r, children: o }] = L(e), n = I(g({ present: r.open }, t));
+  return /* @__PURE__ */ s.jsx(D, { value: r, children: /* @__PURE__ */ s.jsx(H, { value: n, children: o }) });
+}, V = C((e, t) => {
+  const r = v(), o = g(r.getTriggerProps(), e);
+  return /* @__PURE__ */ s.jsx(O.button, { ...o, ref: t });
 });
-_.displayName = "HoverCardTrigger";
+V.displayName = "HoverCardTrigger";
 const {
-  withRootProvider: b,
-  withContext: v,
-  PropsProvider: ae
-} = J({ key: "hoverCard" }), Te = b(ie), de = b(
-  se
-), fe = ae, ce = v(_, "trigger", { forwardAsChild: !0 }), le = v(D, "positioner", { forwardAsChild: !0 }), pe = v(k, "content", { forwardAsChild: !0 }), j = v(I, "arrowTip", { forwardAsChild: !0 }), ge = v(
-  w,
+  withRootProvider: B,
+  withContext: T,
+  PropsProvider: Re
+} = le({ key: "hoverCard" }), Ue = B(ye), xe = B(
+  we
+), Me = Re, Ne = T(V, "trigger", { forwardAsChild: !0 }), be = T(S, "positioner", { forwardAsChild: !0 }), ke = T(A, "content", { forwardAsChild: !0 }), U = T(j, "arrowTip", { forwardAsChild: !0 }), Le = T(
+  _,
   "arrow",
   {
     forwardAsChild: !0,
-    defaultProps: { children: /* @__PURE__ */ s.jsx(j, {}) }
+    defaultProps: { children: /* @__PURE__ */ s.jsx(U, {}) }
   }
-), he = Z, ue = p(
+), We = Pe, Ie = K({
+  slots: ["root", "trigger", "content", "arrow", "arrowTip"],
+  base: {
+    arrow: {
+      "--arrow-size": "10px"
+    },
+    arrowTip: {
+      border: "none"
+    },
+    content: {
+      "--hovercard-bg": "colors.background.overlay.contrast",
+      border: "none",
+      borderRadius: "base",
+      boxShadow: "none",
+      padding: 2
+    },
+    trigger: {
+      display: "inline-block"
+    }
+  }
+}), M = ({ children: e, ...t }) => /* @__PURE__ */ s.jsx(ve, { className: "Text", "data-testid": "kibble-text", ...t, children: e });
+M.displayName = "Text";
+const He = De(M), W = C(
   (e, t) => {
     const {
-      children: o,
-      disabled: r = !1,
+      children: r,
+      disabled: o = !1,
       openDelay: n = 350,
       placement: a = "top",
-      positioning: d,
+      positioning: c,
       portalled: l = !0,
       label: u,
       ...i
-    } = e;
-    return o ? r ? o : /* @__PURE__ */ s.jsxs(
-      de,
+    } = e, d = Z({ recipe: Ie })();
+    return r ? o ? r : /* @__PURE__ */ s.jsxs(
+      xe,
       {
         positioning: {
-          ...d,
-          placement: d?.placement || a
+          ...c,
+          placement: c?.placement || a
         },
         openDelay: n,
         ...i,
         children: [
           /* @__PURE__ */ s.jsx(
-            ce,
+            Ne,
             {
               asChild: !0,
               className: "Tooltip__Trigger",
               "data-testid": "kibble-tooltip-trigger",
-              children: o
+              css: d.trigger,
+              children: r
             }
           ),
-          /* @__PURE__ */ s.jsx(q, { disabled: !l, children: /* @__PURE__ */ s.jsx(
-            le,
+          /* @__PURE__ */ s.jsx(ce, { disabled: !l, children: /* @__PURE__ */ s.jsx(
+            be,
             {
               className: "Tooltip",
               "data-testid": "kibble-tooltip",
               children: /* @__PURE__ */ s.jsxs(
-                pe,
+                ke,
                 {
                   className: "Tooltip__Content",
                   "data-testid": "kibble-tooltip-content",
                   ref: t,
+                  css: d.content,
                   children: [
                     /* @__PURE__ */ s.jsx(
-                      ge,
+                      Le,
                       {
                         className: "Tooltip__Arrow",
                         "data-testid": "kibble-tooltip-arrow",
-                        children: /* @__PURE__ */ s.jsx(
-                          j,
-                          {}
-                        )
+                        css: d.arrow,
+                        children: /* @__PURE__ */ s.jsx(U, { css: d.arrowTip })
                       }
                     ),
-                    u
+                    /* @__PURE__ */ s.jsx(He, { truncated: !1, variant: "onContrast", size: "sm", children: u })
                   ]
                 }
               )
@@ -473,19 +501,80 @@ const {
     ) : /* @__PURE__ */ s.jsx(s.Fragment, {});
   }
 );
-ue.displayName = "Tooltip";
+W.displayName = "Tooltip";
+const De = (e) => {
+  const t = y(e);
+  function r({
+    truncated: o = !1,
+    noOfLines: n = 1,
+    children: a,
+    tooltipProps: c,
+    ...l
+  }) {
+    const [u, i] = z(!1), p = R(null), d = R(null), f = q(() => {
+      if (p.current) {
+        const P = p.current?.children[0].scrollHeight || 0, h = p.current?.offsetHeight || 0;
+        i(P > h);
+      }
+    }, []);
+    return J(() => {
+      if (o && p.current) {
+        let P;
+        const h = () => {
+          window.clearTimeout(P), P = window.setTimeout(f, 100);
+        };
+        return d.current = new ResizeObserver(() => {
+          h();
+        }), d.current.observe(p.current), f(), () => {
+          window.clearTimeout(P), d.current && d.current.disconnect();
+        };
+      }
+    }, [o, f]), o ? /* @__PURE__ */ s.jsx(
+      W,
+      {
+        ...c,
+        label: c?.label || a?.toLocaleString() || "",
+        disabled: !u,
+        "data-testid": "kibble-truncated-text-tooltip",
+        children: /* @__PURE__ */ s.jsx(
+          Q,
+          {
+            ref: p,
+            display: "inline-block",
+            position: "relative",
+            className: "TruncatedText__Wrapper",
+            "data-testid": "kibble-truncated-text-wrapper",
+            children: /* @__PURE__ */ s.jsx(
+              t,
+              {
+                className: "TruncatedText__TextContent",
+                "data-testid": "kibble-truncated-text-content",
+                lineClamp: n,
+                ...l,
+                children: a
+              }
+            )
+          }
+        )
+      }
+    ) : /* @__PURE__ */ s.jsx(t, { ...l, children: a });
+  }
+  return r.displayName = `withTruncation(${e.displayName || e.name}`, y(r);
+};
 export {
-  ge as H,
-  ue as T,
-  j as a,
-  pe as b,
-  he as c,
-  le as d,
-  fe as e,
-  de as f,
-  Te as g,
-  ce as h,
-  z as i,
-  g as u
+  Le as H,
+  W as T,
+  He as W,
+  U as a,
+  ke as b,
+  We as c,
+  be as d,
+  Me as e,
+  xe as f,
+  Ue as g,
+  Ne as h,
+  me as i,
+  v as u,
+  De as w
 };
-//# sourceMappingURL=tooltip.component-BdlSO_v_.js.map
+//# sourceMappingURL=withTruncation-CIxtQTOw.js.map