@pismo/marola 2.1.18 → 2.1.19

package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts

@@ -22,7 +22,7 @@ declare const meta: {
         open?: boolean | undefined;
         onClose?: (() => void) | undefined;
         content: import('react').ReactNode;
-        position?: import('@floating-ui/utils').Placement | undefined;
+        position?: import('@floating-ui/react-dom').Placement | undefined;
         disablePortal?: boolean | undefined;
         arialRole?: import('react').AriaRole | undefined;
         disableHoverListener?: boolean | undefined;

package/dist/components/Tooltip/Tooltip.js

@@ -1,59 +1,285 @@
-import { jsx as i, jsxs as g, Fragment as R } from "react/jsx-runtime";
-import * as f from "react";
-import { useRef as T, useState as q, useEffect as E, isValidElement as O, cloneElement as V } from "react";
-import { T as z, P as D } from "../../Popup-aWlctE1C.js";
-import { c as A } from "../../clsx-OuTLNxxd.js";
-import { _ as F, b as I, P as c } from "../../useSlotProps-C7dqSmdM.js";
-import { C as L } from "../../ClickAwayListener-BjqhGzJh.js";
-import '../../assets/Tooltip.css';function W() {
-  const p = f.useContext(z);
-  if (!p)
+import { jsx as x, jsxs as $, Fragment as et } from "react/jsx-runtime";
+import * as j from "react";
+import { useRef as ot, useState as G, useEffect as J, isValidElement as nt, cloneElement as it } from "react";
+import { T as rt, P as at } from "../../Popup-aWlctE1C.js";
+import { c as X } from "../../clsx-OuTLNxxd.js";
+import { _ as lt, b as st, P as O } from "../../useSlotProps-C7dqSmdM.js";
+import { C as ct } from "../../ClickAwayListener-BjqhGzJh.js";
+import '../../assets/Tooltip.css';function pt() {
+  const t = j.useContext(rt);
+  if (!t)
     throw new Error("Missing transition context");
   const {
-    registerTransition: a,
-    requestedEnter: h,
-    onExited: e
-  } = p;
-  return f.useEffect(() => a(), [a]), {
-    onExited: e,
-    requestedEnter: h
+    registerTransition: e,
+    requestedEnter: i,
+    onExited: n
+  } = t;
+  return j.useEffect(() => e(), [e]), {
+    onExited: n,
+    requestedEnter: i
   };
 }
-const $ = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
-function C(p) {
+const ft = ["children", "className", "enterAnimationName", "enterClassName", "exitAnimationName", "exitClassName"];
+function Y(t) {
   const {
-    children: a,
-    className: h,
-    enterAnimationName: e,
-    enterClassName: m,
-    exitAnimationName: l,
-    exitClassName: u
-  } = p, y = F(p, $), {
-    requestedEnter: s,
-    onExited: o
-  } = W(), r = f.useRef(!0);
-  f.useEffect(() => {
-    s && r.current && (r.current = !1);
-  }, [s]);
-  const d = f.useCallback((t) => {
-    t.animationName === l ? (o(), r.current = !0) : t.animationName === e && (r.current = !1);
-  }, [o, l, e]);
-  return /* @__PURE__ */ i("div", I({
-    onAnimationEnd: d,
-    className: A(h, s ? m : u)
-  }, y, {
-    children: a
+    children: e,
+    className: i,
+    enterAnimationName: n,
+    enterClassName: r,
+    exitAnimationName: o,
+    exitClassName: l
+  } = t, s = lt(t, ft), {
+    requestedEnter: f,
+    onExited: c
+  } = pt(), m = j.useRef(!0);
+  j.useEffect(() => {
+    f && m.current && (m.current = !1);
+  }, [f]);
+  const g = j.useCallback((a) => {
+    a.animationName === o ? (c(), m.current = !0) : a.animationName === n && (m.current = !1);
+  }, [c, o, n]);
+  return /* @__PURE__ */ x("div", st({
+    onAnimationEnd: g,
+    className: X(i, f ? r : l)
+  }, s, {
+    children: e
   }));
 }
-process.env.NODE_ENV !== "production" && (C.propTypes = {
-  children: c.node,
-  className: c.string,
-  enterAnimationName: c.string,
-  enterClassName: c.string,
-  exitAnimationName: c.string,
-  exitClassName: c.string
+process.env.NODE_ENV !== "production" && (Y.propTypes = {
+  children: O.node,
+  className: O.string,
+  enterAnimationName: O.string,
+  enterClassName: O.string,
+  exitAnimationName: O.string,
+  exitClassName: O.string
 });
-const B = "_tooltip_f9rcp_79", G = "_tooltip__container_f9rcp_125", J = "_tooltip__title_f9rcp_131", K = "_tooltip__content_f9rcp_138", Q = "_tooltip__footer_f9rcp_145", n = {
+const mt = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+}, ut = {
+  start: "end",
+  end: "start"
+};
+function Z(t, e) {
+  return typeof t == "function" ? t(e) : t;
+}
+function F(t) {
+  return t.split("-")[0];
+}
+function H(t) {
+  return t.split("-")[1];
+}
+function _t(t) {
+  return t === "x" ? "y" : "x";
+}
+function ht(t) {
+  return t === "y" ? "height" : "width";
+}
+const gt = /* @__PURE__ */ new Set(["top", "bottom"]);
+function M(t) {
+  return gt.has(F(t)) ? "y" : "x";
+}
+function dt(t) {
+  return _t(M(t));
+}
+function yt(t, e, i) {
+  i === void 0 && (i = !1);
+  const n = H(t), r = dt(t), o = ht(r);
+  let l = r === "x" ? n === (i ? "end" : "start") ? "right" : "left" : n === "start" ? "bottom" : "top";
+  return e.reference[o] > e.floating[o] && (l = L(l)), [l, L(l)];
+}
+function xt(t) {
+  const e = L(t);
+  return [q(t), e, q(e)];
+}
+function q(t) {
+  return t.replace(/start|end/g, (e) => ut[e]);
+}
+const K = ["left", "right"], Q = ["right", "left"], bt = ["top", "bottom"], vt = ["bottom", "top"];
+function wt(t, e, i) {
+  switch (t) {
+    case "top":
+    case "bottom":
+      return i ? e ? Q : K : e ? K : Q;
+    case "left":
+    case "right":
+      return e ? bt : vt;
+    default:
+      return [];
+  }
+}
+function At(t, e, i, n) {
+  const r = H(t);
+  let o = wt(F(t), i === "start", n);
+  return r && (o = o.map((l) => l + "-" + r), e && (o = o.concat(o.map(q)))), o;
+}
+function L(t) {
+  return t.replace(/left|right|bottom|top/g, (e) => mt[e]);
+}
+function Pt(t) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...t
+  };
+}
+function Nt(t) {
+  return typeof t != "number" ? Pt(t) : {
+    top: t,
+    right: t,
+    bottom: t,
+    left: t
+  };
+}
+function U(t) {
+  const {
+    x: e,
+    y: i,
+    width: n,
+    height: r
+  } = t;
+  return {
+    width: n,
+    height: r,
+    top: i,
+    left: e,
+    right: e + n,
+    bottom: i + r,
+    x: e,
+    y: i
+  };
+}
+async function kt(t, e) {
+  var i;
+  e === void 0 && (e = {});
+  const {
+    x: n,
+    y: r,
+    platform: o,
+    rects: l,
+    elements: s,
+    strategy: f
+  } = t, {
+    boundary: c = "clippingAncestors",
+    rootBoundary: m = "viewport",
+    elementContext: g = "floating",
+    altBoundary: a = !1,
+    padding: S = 0
+  } = Z(e, t), p = Nt(S), b = s[a ? g === "floating" ? "reference" : "floating" : g], w = U(await o.getClippingRect({
+    element: (i = await (o.isElement == null ? void 0 : o.isElement(b))) == null || i ? b : b.contextElement || await (o.getDocumentElement == null ? void 0 : o.getDocumentElement(s.floating)),
+    boundary: c,
+    rootBoundary: m,
+    strategy: f
+  })), v = g === "floating" ? {
+    x: n,
+    y: r,
+    width: l.floating.width,
+    height: l.floating.height
+  } : l.reference, P = await (o.getOffsetParent == null ? void 0 : o.getOffsetParent(s.floating)), d = await (o.isElement == null ? void 0 : o.isElement(P)) ? await (o.getScale == null ? void 0 : o.getScale(P)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, y = U(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: s,
+    rect: v,
+    offsetParent: P,
+    strategy: f
+  }) : v);
+  return {
+    top: (w.top - y.top + p.top) / d.y,
+    bottom: (y.bottom - w.bottom + p.bottom) / d.y,
+    left: (w.left - y.left + p.left) / d.x,
+    right: (y.right - w.right + p.right) / d.x
+  };
+}
+const Ct = function(t) {
+  return t === void 0 && (t = {}), {
+    name: "flip",
+    options: t,
+    async fn(e) {
+      var i, n;
+      const {
+        placement: r,
+        middlewareData: o,
+        rects: l,
+        initialPlacement: s,
+        platform: f,
+        elements: c
+      } = e, {
+        mainAxis: m = !0,
+        crossAxis: g = !0,
+        fallbackPlacements: a,
+        fallbackStrategy: S = "bestFit",
+        fallbackAxisSideDirection: p = "none",
+        flipAlignment: C = !0,
+        ...b
+      } = Z(t, e);
+      if ((i = o.arrow) != null && i.alignmentOffset)
+        return {};
+      const w = F(r), v = M(s), P = F(s) === s, d = await (f.isRTL == null ? void 0 : f.isRTL(c.floating)), y = a || (P || !C ? [L(s)] : xt(s)), D = p !== "none";
+      !a && D && y.push(...At(s, C, p, d));
+      const V = [s, ...y], R = await kt(e, b), E = [];
+      let u = ((n = o.flip) == null ? void 0 : n.overflows) || [];
+      if (m && E.push(R[w]), g) {
+        const N = yt(r, l, d);
+        E.push(R[N[0]], R[N[1]]);
+      }
+      if (u = [...u, {
+        placement: r,
+        overflows: E
+      }], !E.every((N) => N <= 0)) {
+        var I, z;
+        const N = (((I = o.flip) == null ? void 0 : I.index) || 0) + 1, B = V[N];
+        if (B && (!(g === "alignment" ? v !== M(B) : !1) || // We leave the current main axis only if every placement on that axis
+        // overflows the main axis.
+        u.every((_) => _.overflows[0] > 0 && M(_.placement) === v)))
+          return {
+            data: {
+              index: N,
+              overflows: u
+            },
+            reset: {
+              placement: B
+            }
+          };
+        let T = (z = u.filter((k) => k.overflows[0] <= 0).sort((k, _) => k.overflows[1] - _.overflows[1])[0]) == null ? void 0 : z.placement;
+        if (!T)
+          switch (S) {
+            case "bestFit": {
+              var W;
+              const k = (W = u.filter((_) => {
+                if (D) {
+                  const A = M(_.placement);
+                  return A === v || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  A === "y";
+                }
+                return !0;
+              }).map((_) => [_.placement, _.overflows.filter((A) => A > 0).reduce((A, tt) => A + tt, 0)]).sort((_, A) => _[1] - A[1])[0]) == null ? void 0 : W[0];
+              k && (T = k);
+              break;
+            }
+            case "initialPlacement":
+              T = s;
+              break;
+          }
+        if (r !== T)
+          return {
+            reset: {
+              placement: T
+            }
+          };
+      }
+      return {};
+    }
+  };
+}, Et = Ct, Ot = "_tooltip_f9rcp_79", St = "_tooltip__container_f9rcp_125", Rt = "_tooltip__title_f9rcp_131", Tt = "_tooltip__content_f9rcp_138", Mt = "_tooltip__footer_f9rcp_145", h = {
   "u-typography-h1": "_u-typography-h1_f9rcp_1",
   "u-typography-h2": "_u-typography-h2_f9rcp_8",
   "u-typography-h3": "_u-typography-h3_f9rcp_15",
@@ -69,15 +295,15 @@ const B = "_tooltip_f9rcp_79", G = "_tooltip__container_f9rcp_125", J = "_toolti
   "u-typography-base--strikethrough": "_u-typography-base--strikethrough_f9rcp_68",
   "u-typography-base--underlined": "_u-typography-base--underlined_f9rcp_71",
   "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_f9rcp_74",
-  tooltip: B,
+  tooltip: Ot,
   "tooltip--bottom": "_tooltip--bottom_f9rcp_96",
   "tooltip--top": "_tooltip--top_f9rcp_103",
   "tooltip--right": "_tooltip--right_f9rcp_110",
   "tooltip--left": "_tooltip--left_f9rcp_117",
-  tooltip__container: G,
-  tooltip__title: J,
-  tooltip__content: K,
-  tooltip__footer: Q,
+  tooltip__container: St,
+  tooltip__title: Rt,
+  tooltip__content: Tt,
+  tooltip__footer: Mt,
   "tooltip__footer-button": "_tooltip__footer-button_f9rcp_149",
   "tooltip__footer-link": "_tooltip__footer-link_f9rcp_169",
   "s--animation": "_s--animation_f9rcp_180",
@@ -85,85 +311,90 @@ const B = "_tooltip_f9rcp_79", G = "_tooltip__container_f9rcp_125", J = "_toolti
   "tooltip--open-animation": "_tooltip--open-animation_f9rcp_1",
   "tooltip--anim-close": "_tooltip--anim-close_f9rcp_183",
   "tooltip--close-animation": "_tooltip--close-animation_f9rcp_1"
-}, ot = ({
-  arialRole: p,
-  children: a,
-  className: h,
-  disableHoverListener: e,
-  onClose: m,
-  position: l = "bottom",
-  open: u,
-  title: y,
-  content: s,
-  footer: o,
-  onTargetCreated: r,
-  ...d
+}, $t = ({
+  arialRole: t,
+  children: e,
+  className: i,
+  disableHoverListener: n,
+  onClose: r,
+  position: o = "bottom",
+  open: l,
+  title: s,
+  content: f,
+  footer: c,
+  onTargetCreated: m,
+  ...g
 }) => {
-  const t = T(null), [P, _] = q(u || !1);
-  let N = P;
-  E(() => {
-    _(u || !1);
-  }, [u]);
-  const b = O(a) ? a : /* @__PURE__ */ i("span", { children: a });
-  !s && s !== 0 && (N = !1);
-  const v = () => {
-    m == null || m(), !e && _(!1);
+  const a = ot(null), [S, p] = G(l || !1);
+  let C = S;
+  const [b, w] = G(o);
+  J(() => {
+    p(l || !1);
+  }, [l]);
+  const v = nt(e) ? e : /* @__PURE__ */ x("span", { children: e });
+  !f && f !== 0 && (C = !1);
+  const P = () => {
+    r == null || r(), !n && p(!1);
   };
-  E(() => {
-    if (t != null && t.current) {
-      const j = t == null ? void 0 : t.current;
-      r == null || r(j);
+  J(() => {
+    if (a != null && a.current) {
+      const u = a == null ? void 0 : a.current;
+      m == null || m(u);
     }
-  }, [t, e]);
-  const x = () => {
-    e || _(!0);
-  }, k = () => {
-    e || _(!1);
-  }, S = {
-    padding: l.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
+  }, [a, n]);
+  const d = () => {
+    n || p(!0);
+  }, y = () => {
+    n || p(!1);
+  }, D = {
+    padding: b.match(/(bottom|top)/) ? ".25rem 0" : "0 .25rem",
     zIndex: 1
-  }, w = A(n.tooltip, n[`tooltip--${l}`], h), M = {
-    ...b.props,
-    ref: t,
-    onPointerEnter: e ? void 0 : () => _(!0),
-    onPointerLeave: e ? void 0 : () => _(!1)
-  };
-  return /* @__PURE__ */ g(R, { children: [
-    V(b, M),
-    /* @__PURE__ */ i(
-      D,
+  }, V = X(h.tooltip, h[`tooltip--${b}`], i), R = {
+    ...v.props,
+    ref: a,
+    onPointerEnter: n ? void 0 : () => p(!0),
+    onPointerLeave: n ? void 0 : () => p(!1)
+  }, E = () => ({
+    name: "currentPlacement",
+    fn: (u) => (w(u.placement), u)
+  });
+  return /* @__PURE__ */ $(et, { children: [
+    it(v, R),
+    /* @__PURE__ */ x(
+      at,
       {
         disablePortal: !0,
-        ...d,
-        open: N,
-        anchor: t == null ? void 0 : t.current,
-        style: S,
-        role: p,
-        placement: l,
-        onPointerEnter: x,
-        onPointerLeave: k,
+        ...g,
+        open: C,
+        anchor: a == null ? void 0 : a.current,
+        style: D,
+        role: t,
+        placement: b,
+        onPointerEnter: d,
+        onPointerLeave: y,
         "data-testid": "popup",
-        children: /* @__PURE__ */ i(
-          C,
+        middleware: [Et(), E()],
+        children: /* @__PURE__ */ x(
+          Y,
           {
-            className: n["tooltip--animation"],
-            enterClassName: n["tooltip--anim-open"],
-            exitClassName: n["tooltip--anim-close"],
+            className: h["tooltip--animation"],
+            enterClassName: h["tooltip--anim-open"],
+            exitClassName: h["tooltip--anim-close"],
             enterAnimationName: "tooltip--open-animation",
             exitAnimationName: "tooltip--close-animation",
-            children: /* @__PURE__ */ i("div", { className: w, onPointerEnter: x, onPointerLeave: k, children: /* @__PURE__ */ i(L, { onClickAway: v, children: /* @__PURE__ */ g("div", { className: n.tooltip__container, children: [
-              y && /* @__PURE__ */ i("div", { className: n.tooltip__title, children: y }),
-              /* @__PURE__ */ i("div", { className: n.tooltip__content, children: s }),
-              o && /* @__PURE__ */ g("div", { className: n.tooltip__footer, children: [
-                o.type === "button" && o.onClick && /* @__PURE__ */ i("button", { onClick: o.onClick, className: n["tooltip__footer-button"], children: o.label }),
-                o.type === "link" && o.href && /* @__PURE__ */ i(
+            children: /* @__PURE__ */ x("div", { className: V, onPointerEnter: d, onPointerLeave: y, children: /* @__PURE__ */ x(ct, { onClickAway: P, children: /* @__PURE__ */ $("div", { className: h.tooltip__container, children: [
+              s && /* @__PURE__ */ x("div", { className: h.tooltip__title, children: s }),
+              /* @__PURE__ */ x("div", { className: h.tooltip__content, children: f }),
+              c && /* @__PURE__ */ $("div", { className: h.tooltip__footer, children: [
+                c.type === "button" && c.onClick && /* @__PURE__ */ x("button", { onClick: c.onClick, className: h["tooltip__footer-button"], children: c.label }),
+                c.type === "link" && c.href && /* @__PURE__ */ x(
                   "a",
                   {
-                    href: o.href,
-                    className: n["tooltip__footer-link"],
+                    href: c.href,
+                    className: h["tooltip__footer-link"],
                     target: "_blank",
                     rel: "noopener noreferrer",
-                    children: o.label
+                    children: c.label
                   }
                 )
               ] })
@@ -175,5 +406,5 @@ const B = "_tooltip_f9rcp_79", G = "_tooltip__container_f9rcp_125", J = "_toolti
   ] });
 };
 export {
-  ot as Tooltip
+  $t as Tooltip
 };

package/dist/components/Tooltip/Tooltip.stories.d.ts

@@ -20,7 +20,7 @@ declare const meta: {
         open?: boolean | undefined;
         disableHoverListener?: boolean | undefined;
         onClose?: (() => void) | undefined;
-        position?: import('@floating-ui/utils').Placement | undefined;
+        position?: import('@floating-ui/react-dom').Placement | undefined;
         arialRole?: import('react').AriaRole | undefined;
         className?: string | undefined;
         style?: import('react').CSSProperties | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "2.1.18",
+  "version": "2.1.19",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -96,6 +96,7 @@
   },
   "dependencies": {
     "@base-ui-components/react": "^1.0.0-alpha.6",
+    "@floating-ui/dom": "^1.7.2",
     "@mui/base": "^5.0.0-beta.40",
     "@mui/material": "^5.15.15"
   },