twenty-ui 2.41.0 → 2.42.0

package/dist/OverflowingTextWithTooltip-C21bgWKF.js

@@ -1,236 +0,0 @@
-import { s as T, t as ae } from "./theme-constants-DETwIS-a.js";
-import { n as ce, t as ue } from "./linkifyText-DVk8e0sw.js";
-import { clsx as U } from "clsx";
-import { useEffect as R, useId as de, useRef as I, useState as B } from "react";
-import { isNonEmptyString as m } from "@sniptt/guards";
-import { Fragment as Q, jsx as n, jsxs as q } from "react/jsx-runtime";
-import { useRender as fe } from "@base-ui/react/use-render";
-import { createPortal as ve } from "react-dom";
-import { Tooltip as S } from "@base-ui/react/tooltip";
-var me = "_link_mrld0_1", pe = { link: me }, z = ({ text: e }) => m(e) ? /* @__PURE__ */ n(Q, { children: ue(e).map((r, i) => r.type === "link" ? /* @__PURE__ */ n("a", {
-  className: pe.link,
-  href: ce(r.content),
-  target: "_blank",
-  rel: "noopener noreferrer",
-  onClick: (c) => c.stopPropagation(),
-  children: r.content
-}, i) : r.content) }) : null, _e = "_truncate_1x6ii_1", he = "_lineClamp_1x6ii_7", F = {
-  truncate: _e,
-  lineClamp: he
-}, ee = ({ render: e, truncate: r, lineClamp: i, className: c, style: f, ref: x, ...C }) => {
-  const p = T(i) && Number.isInteger(i) && i > 0;
-  return fe({
-    render: e,
-    ref: x,
-    props: {
-      ...C,
-      className: U(r && F.truncate, p && F.lineClamp, c),
-      style: p ? {
-        ...f,
-        "--text-line-clamp": i
-      } : f
-    }
-  });
-}, Te = "_positioner_ybf3c_1", ge = "_tooltip_ybf3c_6", we = "_textContent_ybf3c_30", ye = "_title_ybf3c_36", Le = "_icon_ybf3c_48", xe = "_description_ybf3c_54", Ce = "_interactive_ybf3c_60", Ee = "_arrow_ybf3c_64", v = {
-  positioner: Te,
-  tooltip: ge,
-  textContent: we,
-  title: ye,
-  icon: Le,
-  description: xe,
-  interactive: Ce,
-  arrow: Ee
-}, De = /* @__PURE__ */ (function(e) {
-  return e.Top = "top", e.Left = "left", e.Right = "right", e.Bottom = "bottom", e;
-})({}), Me = /* @__PURE__ */ (function(e) {
-  return e.noDelay = "0ms", e.shortDelay = "300ms", e.mediumDelay = "500ms", e.longDelay = "1000ms", e;
-})({}), te = 20, ke = 10, Ae = ({ anchorSelect: e, className: r, title: i, Icon: c, description: f, hidden: x = !1, noArrow: C = !0, offset: p, delay: o = "500ms", place: E, positionStrategy: l, children: _, interactive: g, maxWidth: H = "300px", isOpen: D }) => {
-  const h = (s) => {
-    switch (s) {
-      case "0ms":
-        return 0;
-      case "300ms":
-        return 300;
-      case "500ms":
-        return 500;
-      case "1000ms":
-        return 1e3;
-    }
-  }, w = ae(), [P, M] = B(!1), [u, k] = B([]), [a, d] = B(null), A = I(void 0), y = I(void 0), $ = I(!1), W = I(!1), Y = T(D), G = h(o);
-  R(() => {
-    if (!m(e)) {
-      k([]);
-      return;
-    }
-    const s = () => {
-      try {
-        return Array.from(document.querySelectorAll(e));
-      } catch {
-        return [];
-      }
-    };
-    k(s());
-    const K = new MutationObserver(() => {
-      k((b) => {
-        const N = s();
-        return N.length === b.length && N.every((t, L) => t === b[L]) ? b : N;
-      });
-    });
-    return K.observe(document.body, {
-      childList: !0,
-      subtree: !0,
-      attributes: !0,
-      attributeFilter: ["data-tooltip-id"]
-    }), () => K.disconnect();
-  }, [e]), R(() => {
-    T(a) && u.includes(a) || d(u[0] ?? null);
-  }, [u, a]), R(() => {
-    if (u.length === 0) return;
-    const s = (t) => {
-      Y || M(t);
-    }, K = (t) => {
-      if (!t.isConnected) {
-        d(null);
-        return;
-      }
-      G > 0 ? (clearTimeout(A.current), $.current ? s(!0) : A.current = setTimeout(() => {
-        s(!0);
-      }, G)) : s(!0), d(t), clearTimeout(y.current);
-    }, b = (t) => {
-      t.contains(t.ownerDocument.activeElement) || (clearTimeout(y.current), y.current = setTimeout(() => {
-        W.current || s(!1);
-      }, te), clearTimeout(A.current));
-    }, N = u.map((t) => {
-      const L = () => K(t), j = () => b(t);
-      return t.addEventListener("mouseover", L), t.addEventListener("mouseout", j), t.addEventListener("focus", L), t.addEventListener("blur", j), () => {
-        t.removeEventListener("mouseover", L), t.removeEventListener("mouseout", j), t.removeEventListener("focus", L), t.removeEventListener("blur", j);
-      };
-    });
-    return () => N.forEach((t) => t());
-  }, [
-    u,
-    Y,
-    G
-  ]), R(() => () => {
-    clearTimeout(A.current), clearTimeout(y.current);
-  }, []);
-  const re = () => {
-    W.current = !0;
-  }, ne = () => {
-    W.current = !1, !a?.contains(a.ownerDocument.activeElement) && (clearTimeout(y.current), y.current = setTimeout(() => {
-      W.current || Y || M(!1);
-    }, te), clearTimeout(A.current));
-  }, V = m(i), X = m(f), Z = V || X ? /* @__PURE__ */ q(Q, { children: [/* @__PURE__ */ q("div", {
-    className: v.textContent,
-    children: [V && /* @__PURE__ */ q("div", {
-      className: v.title,
-      children: [T(c) && /* @__PURE__ */ n(c, {
-        className: v.icon,
-        "aria-hidden": !0
-      }), /* @__PURE__ */ n("span", { children: i })]
-    }), X && /* @__PURE__ */ n("div", {
-      className: v.description,
-      children: f
-    })]
-  }), _] }) : _, J = !x && (D ?? P) && !!Z && T(a);
-  R(() => {
-    J && ($.current = !0);
-  }, [J]);
-  const [oe, ie] = (E ?? "top").split("-"), le = oe, se = ie ?? "center";
-  return /* @__PURE__ */ n(S.Root, {
-    open: J,
-    onOpenChangeComplete: (s) => {
-      s || ($.current = !1);
-    },
-    children: /* @__PURE__ */ n(S.Portal, {
-      container: w ?? void 0,
-      children: /* @__PURE__ */ n(S.Positioner, {
-        anchor: a,
-        side: le,
-        align: se,
-        sideOffset: p ?? ke,
-        positionMethod: l,
-        className: v.positioner,
-        style: { maxWidth: H },
-        children: /* @__PURE__ */ q(S.Popup, {
-          role: "tooltip",
-          className: U(v.tooltip, g && v.interactive, r),
-          onMouseEnter: g ? re : void 0,
-          onMouseLeave: g ? ne : void 0,
-          children: [Z, !C && /* @__PURE__ */ n(S.Arrow, { className: v.arrow })]
-        })
-      })
-    })
-  });
-}, be = "_overflowingMultilineText_1qcnw_1", Ne = "_overflowingText_1qcnw_20", Re = "_large_1qcnw_37", Se = "_multilineTooltip_1qcnw_41", O = {
-  overflowingMultilineText: be,
-  overflowingText: Ne,
-  large: Re,
-  multilineTooltip: Se
-}, Ue = ({ size: e = "small", text: r, isTooltipMultiline: i, displayedMaxRows: c, tooltipContent: f, tooltipDelay: x = Me.mediumDelay, tooltipPlace: C = De.Bottom, alwaysShowTooltip: p = !1, isFocusable: o = !1 }) => {
-  const E = `title-id-${de().replace(/:/g, "")}`, l = I(null), [_, g] = B(!1), [H, D] = B(!1), h = () => {
-    g(l.current ? l.current?.scrollHeight > l.current?.clientHeight || l.current.scrollWidth > l.current.clientWidth : !1), D(!0);
-  }, w = () => {
-    g(!1), D(!1);
-  }, P = () => {
-    o && document.activeElement === l.current || w();
-  }, M = (d) => {
-    d.key === "Escape" && H && (_ || p) && (d.stopPropagation(), w());
-  }, u = () => {
-    l.current?.focus(), h();
-  }, k = (d) => {
-    d.stopPropagation(), d.preventDefault();
-  }, a = m(f) ? f : m(r) ? r : null;
-  return /* @__PURE__ */ q(Q, { children: [T(c) ? /* @__PURE__ */ n(ee, {
-    lineClamp: c || 1,
-    "data-testid": "tooltip",
-    "data-content-overflowing": _ ? "" : void 0,
-    className: U(O.overflowingMultilineText, e === "large" && O.large),
-    ref: l,
-    id: E,
-    tabIndex: o ? 0 : void 0,
-    onFocus: o ? h : void 0,
-    onBlur: o ? w : void 0,
-    onKeyDown: o ? M : void 0,
-    onClick: o ? u : void 0,
-    onMouseEnter: h,
-    onMouseLeave: P,
-    children: m(r) ? /* @__PURE__ */ n(z, { text: r }) : r
-  }) : /* @__PURE__ */ n(ee, {
-    truncate: !0,
-    "data-testid": "tooltip",
-    "data-content-overflowing": _ ? "" : void 0,
-    className: U(O.overflowingText, e === "large" && O.large),
-    ref: l,
-    id: E,
-    tabIndex: o ? 0 : void 0,
-    onFocus: o ? h : void 0,
-    onBlur: o ? w : void 0,
-    onKeyDown: o ? M : void 0,
-    onClick: o ? u : void 0,
-    onMouseEnter: h,
-    onMouseLeave: P,
-    children: m(r) ? /* @__PURE__ */ n(z, { text: r }) : r
-  }), H && (_ || p) && T(a) && ve(/* @__PURE__ */ n("div", {
-    onClick: k,
-    children: /* @__PURE__ */ n(Ae, {
-      anchorSelect: `#${E}`,
-      title: a,
-      className: i ? O.multilineTooltip : void 0,
-      offset: 5,
-      noArrow: !0,
-      place: C,
-      positionStrategy: "absolute",
-      delay: x,
-      isOpen: !0
-    })
-  }), document.body)] });
-};
-export {
-  ee as a,
-  De as i,
-  Ae as n,
-  z as o,
-  Me as r,
-  Ue as t
-};

package/dist/OverflowingTextWithTooltip-C2iADYbv.cjs

@@ -1 +0,0 @@
-const p=require("./theme-constants-Do_FO7Uy.cjs"),X=require("./linkifyText-C4_e-MKf.cjs");let H=require("clsx"),o=require("react"),_=require("@sniptt/guards"),t=require("react/jsx-runtime"),ue=require("@base-ui/react/use-render"),ce=require("react-dom"),A=require("@base-ui/react/tooltip");var ae="_link_mrld0_1",de={link:ae},Y=({text:e})=>(0,_.isNonEmptyString)(e)?(0,t.jsx)(t.Fragment,{children:X.linkifyText(e).map((n,s)=>n.type==="link"?(0,t.jsx)("a",{className:de.link,href:X.getSafeUrl(n.content),target:"_blank",rel:"noopener noreferrer",onClick:a=>a.stopPropagation(),children:n.content},s):n.content)}):null,fe="_truncate_1x6ii_1",ve="_lineClamp_1x6ii_7",Z={truncate:fe,lineClamp:ve},G=({render:e,truncate:n,lineClamp:s,className:a,style:v,ref:E,...j})=>{const g=p.isDefined(s)&&Number.isInteger(s)&&s>0;return(0,ue.useRender)({render:e,ref:E,props:{...j,className:(0,H.clsx)(n&&Z.truncate,g&&Z.lineClamp,a),style:g?{...v,"--text-line-clamp":s}:v}})},me="_positioner_ybf3c_1",pe="_tooltip_ybf3c_6",_e="_textContent_ybf3c_30",ge="_title_ybf3c_36",he="_icon_ybf3c_48",Te="_description_ybf3c_54",xe="_interactive_ybf3c_60",ye="_arrow_ybf3c_64",m={positioner:me,tooltip:pe,textContent:_e,title:ge,icon:he,description:Te,interactive:xe,arrow:ye},F=(function(e){return e.Top="top",e.Left="left",e.Right="right",e.Bottom="bottom",e})({}),ee=(function(e){return e.noDelay="0ms",e.shortDelay="300ms",e.mediumDelay="500ms",e.longDelay="1000ms",e})({}),z=20,we=10,te=({anchorSelect:e,className:n,title:s,Icon:a,description:v,hidden:E=!1,noArrow:j=!0,offset:g,delay:i="500ms",place:D,positionStrategy:l,children:h,interactive:x,maxWidth:O="300px",isOpen:L})=>{const T=u=>{switch(u){case"0ms":return 0;case"300ms":return 300;case"500ms":return 500;case"1000ms":return 1e3}},y=p.useThemeContainer(),[R,S]=(0,o.useState)(!1),[d,N]=(0,o.useState)([]),[c,f]=(0,o.useState)(null),k=(0,o.useRef)(void 0),w=(0,o.useRef)(void 0),W=(0,o.useRef)(!1),P=(0,o.useRef)(!1),K=p.isDefined(L),U=T(i);(0,o.useEffect)(()=>{if(!(0,_.isNonEmptyString)(e)){N([]);return}const u=()=>{try{return Array.from(document.querySelectorAll(e))}catch{return[]}};N(u());const I=new MutationObserver(()=>{N(q=>{const C=u();return C.length===q.length&&C.every((r,b)=>r===q[b])?q:C})});return I.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-tooltip-id"]}),()=>I.disconnect()},[e]),(0,o.useEffect)(()=>{p.isDefined(c)&&d.includes(c)||f(d[0]??null)},[d,c]),(0,o.useEffect)(()=>{if(d.length===0)return;const u=r=>{K||S(r)},I=r=>{if(!r.isConnected){f(null);return}U>0?(clearTimeout(k.current),W.current?u(!0):k.current=setTimeout(()=>{u(!0)},U)):u(!0),f(r),clearTimeout(w.current)},q=r=>{r.contains(r.ownerDocument.activeElement)||(clearTimeout(w.current),w.current=setTimeout(()=>{P.current||u(!1)},z),clearTimeout(k.current))},C=d.map(r=>{const b=()=>I(r),B=()=>q(r);return r.addEventListener("mouseover",b),r.addEventListener("mouseout",B),r.addEventListener("focus",b),r.addEventListener("blur",B),()=>{r.removeEventListener("mouseover",b),r.removeEventListener("mouseout",B),r.removeEventListener("focus",b),r.removeEventListener("blur",B)}});return()=>C.forEach(r=>r())},[d,K,U]),(0,o.useEffect)(()=>()=>{clearTimeout(k.current),clearTimeout(w.current)},[]);const re=()=>{P.current=!0},ne=()=>{P.current=!1,!c?.contains(c.ownerDocument.activeElement)&&(clearTimeout(w.current),w.current=setTimeout(()=>{P.current||K||S(!1)},z),clearTimeout(k.current))},J=(0,_.isNonEmptyString)(s),Q=(0,_.isNonEmptyString)(v),V=J||Q?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("div",{className:m.textContent,children:[J&&(0,t.jsxs)("div",{className:m.title,children:[p.isDefined(a)&&(0,t.jsx)(a,{className:m.icon,"aria-hidden":!0}),(0,t.jsx)("span",{children:s})]}),Q&&(0,t.jsx)("div",{className:m.description,children:v})]}),h]}):h,$=!E&&(L??R)&&!!V&&p.isDefined(c);(0,o.useEffect)(()=>{$&&(W.current=!0)},[$]);const[oe,ie]=(D??"top").split("-"),se=oe,le=ie??"center";return(0,t.jsx)(A.Tooltip.Root,{open:$,onOpenChangeComplete:u=>{u||(W.current=!1)},children:(0,t.jsx)(A.Tooltip.Portal,{container:y??void 0,children:(0,t.jsx)(A.Tooltip.Positioner,{anchor:c,side:se,align:le,sideOffset:g??we,positionMethod:l,className:m.positioner,style:{maxWidth:O},children:(0,t.jsxs)(A.Tooltip.Popup,{role:"tooltip",className:(0,H.clsx)(m.tooltip,x&&m.interactive,n),onMouseEnter:x?re:void 0,onMouseLeave:x?ne:void 0,children:[V,!j&&(0,t.jsx)(A.Tooltip.Arrow,{className:m.arrow})]})})})})},be="_overflowingMultilineText_1qcnw_1",Ee="_overflowingText_1qcnw_20",je="_large_1qcnw_37",De="_multilineTooltip_1qcnw_41",M={overflowingMultilineText:be,overflowingText:Ee,large:je,multilineTooltip:De},Le=({size:e="small",text:n,isTooltipMultiline:s,displayedMaxRows:a,tooltipContent:v,tooltipDelay:E=ee.mediumDelay,tooltipPlace:j=F.Bottom,alwaysShowTooltip:g=!1,isFocusable:i=!1})=>{const D=`title-id-${(0,o.useId)().replace(/:/g,"")}`,l=(0,o.useRef)(null),[h,x]=(0,o.useState)(!1),[O,L]=(0,o.useState)(!1),T=()=>{x(l.current?l.current?.scrollHeight>l.current?.clientHeight||l.current.scrollWidth>l.current.clientWidth:!1),L(!0)},y=()=>{x(!1),L(!1)},R=()=>{i&&document.activeElement===l.current||y()},S=f=>{f.key==="Escape"&&O&&(h||g)&&(f.stopPropagation(),y())},d=()=>{l.current?.focus(),T()},N=f=>{f.stopPropagation(),f.preventDefault()},c=(0,_.isNonEmptyString)(v)?v:(0,_.isNonEmptyString)(n)?n:null;return(0,t.jsxs)(t.Fragment,{children:[p.isDefined(a)?(0,t.jsx)(G,{lineClamp:a||1,"data-testid":"tooltip","data-content-overflowing":h?"":void 0,className:(0,H.clsx)(M.overflowingMultilineText,e==="large"&&M.large),ref:l,id:D,tabIndex:i?0:void 0,onFocus:i?T:void 0,onBlur:i?y:void 0,onKeyDown:i?S:void 0,onClick:i?d:void 0,onMouseEnter:T,onMouseLeave:R,children:(0,_.isNonEmptyString)(n)?(0,t.jsx)(Y,{text:n}):n}):(0,t.jsx)(G,{truncate:!0,"data-testid":"tooltip","data-content-overflowing":h?"":void 0,className:(0,H.clsx)(M.overflowingText,e==="large"&&M.large),ref:l,id:D,tabIndex:i?0:void 0,onFocus:i?T:void 0,onBlur:i?y:void 0,onKeyDown:i?S:void 0,onClick:i?d:void 0,onMouseEnter:T,onMouseLeave:R,children:(0,_.isNonEmptyString)(n)?(0,t.jsx)(Y,{text:n}):n}),O&&(h||g)&&p.isDefined(c)&&(0,ce.createPortal)((0,t.jsx)("div",{onClick:N,children:(0,t.jsx)(te,{anchorSelect:`#${D}`,title:c,className:s?M.multilineTooltip:void 0,offset:5,noArrow:!0,place:j,positionStrategy:"absolute",delay:E,isOpen:!0})}),document.body)]})};Object.defineProperty(exports,"AppTooltip",{enumerable:!0,get:function(){return te}});Object.defineProperty(exports,"LinkifiedText",{enumerable:!0,get:function(){return Y}});Object.defineProperty(exports,"OverflowingTextWithTooltip",{enumerable:!0,get:function(){return Le}});Object.defineProperty(exports,"Text",{enumerable:!0,get:function(){return G}});Object.defineProperty(exports,"TooltipDelay",{enumerable:!0,get:function(){return ee}});Object.defineProperty(exports,"TooltipPosition",{enumerable:!0,get:function(){return F}});

package/dist/Pill-4lAWCmbk.cjs

@@ -1 +0,0 @@
-const i=require("./theme-constants-Do_FO7Uy.cjs");let s=require("clsx"),r=require("react/jsx-runtime");var n="_container_1i6sz_1",o="_dot_1i6sz_15",d="_loaderDot_1i6sz_1",a={container:n,dot:o,loaderDot:d},_=({color:e})=>(0,r.jsx)("div",{className:a.container,style:e?{"--loader-color":i.themeCssVariables.tag.text[e]}:void 0,children:(0,r.jsx)("div",{className:a.dot})}),u="_pill_2y5ao_1",c={pill:u},v=({className:e,label:l,Icon:t})=>(0,r.jsxs)("span",{className:(0,s.clsx)(c.pill,e),children:[t&&(0,r.jsx)(t,{size:12}),l]});Object.defineProperty(exports,"Loader",{enumerable:!0,get:function(){return _}});Object.defineProperty(exports,"Pill",{enumerable:!0,get:function(){return v}});

package/dist/Pill-abKRH4XK.js

@@ -1,19 +0,0 @@
-import { c as s } from "./theme-constants-DETwIS-a.js";
-import { clsx as t } from "clsx";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-var d = "_container_1i6sz_1", _ = "_dot_1i6sz_15", m = "_loaderDot_1i6sz_1", l = {
-  container: d,
-  dot: _,
-  loaderDot: m
-}, f = ({ color: a }) => /* @__PURE__ */ r("div", {
-  className: l.container,
-  style: a ? { "--loader-color": s.tag.text[a] } : void 0,
-  children: /* @__PURE__ */ r("div", { className: l.dot })
-}), n = "_pill_2y5ao_1", v = { pill: n }, x = ({ className: a, label: o, Icon: e }) => /* @__PURE__ */ i("span", {
-  className: t(v.pill, a),
-  children: [e && /* @__PURE__ */ r(e, { size: 12 }), o]
-});
-export {
-  f as n,
-  x as t
-};