@tedi-design-system/react 18.1.0-rc.25 → 18.1.0-rc.27

package/src/tedi/components/form/multi-value-field/multi-value-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),x=require("../../../../../external/classnames/index.cjs.js"),_=require("react"),j=require("../../base/icon/icon.cjs.js"),w=require("../../buttons/closing-button/closing-button.cjs.js"),k=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),R=require("../form-label/form-label.cjs.js"),i=require("./multi-value-field.module.scss.cjs.js"),$=require("../../../providers/label-provider/use-labels.cjs.js"),c=_.forwardRef((h,O)=>{const{id:b,label:d,name:m,values:f,onChange:n,tagColor:q="primary",className:N,icon:t,onIconClick:v,iconButtonProps:s,isClearable:V=!0,required:p,disabled:u}=h,{getLabel:y}=$.useLabels(),[C,S]=_.useState(f??[]),a=f??C,g=l=>{S(l),n==null||n(l)},F=l=>{const r=a.filter((T,M)=>M!==l);g(r)},o=!u&&V&&a.length>0,I=()=>{g([])},L=()=>{if(!t)return null;const l=typeof t=="string"?{name:t}:t;return v?e.jsx("button",{...s,className:x.default(i.default["tedi-multi-value-field__icon-wrapper"],s==null?void 0:s.className),onClick:v,type:"button",children:e.jsx(j.Icon,{...l,size:18})}):e.jsx("div",{className:i.default["tedi-multi-value-field__icon-wrapper"],children:e.jsx(j.Icon,{...l,size:18})})};return e.jsxs("div",{className:x.default(i.default["tedi-multi-value-field"],N),children:[d&&e.jsx(R.FormLabel,{id:b,label:d,required:p}),e.jsxs("div",{className:i.default["tedi-multi-value-field__inner"],children:[a.length>0&&e.jsx("div",{className:i.default["tedi-multi-value-field__tags"],children:a.map((l,r)=>e.jsx(z.Tag,{color:q,onClose:u?void 0:()=>F(r),children:l},`${l}-${r}`))}),(o||t)&&e.jsxs("div",{className:i.default["tedi-multi-value-field__right-area"],children:[o&&e.jsx(w.ClosingButton,{onClick:I,title:y("clear"),className:i.default["tedi-multi-value-field__clear-button"],iconSize:18}),o&&t&&e.jsx(k.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),t&&L()]})]}),m&&e.jsx("input",{type:"hidden",name:m,value:a.length?JSON.stringify(a):"",required:p,disabled:u})]})});c.displayName="MultiValueField";exports.MultiValueField=c;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),v=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),T=require("../../base/icon/icon.cjs.js"),Z=require("../../buttons/closing-button/closing-button.cjs.js"),ee=require("../../misc/separator/separator.cjs.js"),z=require("../../tags/tag/tag.cjs.js"),te=require("../form-label/form-label.cjs.js"),r=require("./multi-value-field.module.scss.cjs.js"),le=require("../../../providers/label-provider/use-labels.cjs.js"),j=4,ie=44,N=i.forwardRef((F,O)=>{const{id:A,label:w,name:q,values:C,onChange:_,tagColor:y="primary",tagsDirection:P="stack",className:$,icon:o,onIconClick:V,iconButtonProps:m,isClearable:G=!0,required:S,disabled:b}=F,{getLabel:M}=le.useLabels(),[X,B]=i.useState(C??[]),E=i.useRef(null),W=i.useRef(null);i.useImperativeHandle(O,()=>({input:W.current,wrapper:E.current}),[]);const a=C??X,n=P==="row",[f,D]=i.useState(null),H=i.useCallback(e=>D(e),[]),p=i.useRef(0),[d,g]=i.useState(null);i.useEffect(()=>{n&&g(null)},[a.length,n]),i.useEffect(()=>{if(!n||!f||typeof ResizeObserver>"u")return;const e=new ResizeObserver(t=>{var c;const s=((c=t[0])==null?void 0:c.contentRect.width)??0;s>0&&s!==p.current&&g(null)});return e.observe(f),()=>e.disconnect()},[n,f]),i.useLayoutEffect(()=>{if(!n||d!==null)return;const e=f;if(!e)return;const t=e.clientWidth;if(t===0)return;const s=e.querySelectorAll("[data-tedi-tag-index]");if(s.length===0)return;let c=0;for(let u=0;u<s.length;u++)c+=s[u].offsetWidth+(u>0?j:0);if(c<=t){p.current=t,g(s.length);return}let k=0,h=0;for(let u=0;u<s.length;u++){const Q=s[u].offsetWidth,Y=u<s.length-1?ie+j:0,L=k+Q+(h>0?j:0);if(L+Y<=t)k=L,h++;else break}h===0&&(h=1),p.current=t,g(h)},[n,d,a,f]);const I=e=>{B(e),_==null||_(e)},J=e=>{const t=a.filter((s,c)=>c!==e);I(t)},x=!b&&G&&a.length>0,U=()=>{I([])},R=n&&d!==null?Math.max(0,a.length-d):0,K=()=>{if(!o)return null;const e=typeof o=="string"?{name:o}:o;return V?l.jsx("button",{...m,className:v.default(r.default["tedi-multi-value-field__icon-wrapper"],m==null?void 0:m.className),onClick:V,type:"button",children:l.jsx(T.Icon,{...e,size:18})}):l.jsx("div",{className:r.default["tedi-multi-value-field__icon-wrapper"],children:l.jsx(T.Icon,{...e,size:18})})};return l.jsxs("div",{className:v.default(r.default["tedi-multi-value-field"],$),children:[w&&l.jsx(te.FormLabel,{id:A,label:w,required:S}),l.jsxs("div",{ref:E,className:v.default(r.default["tedi-multi-value-field__inner"],{[r.default["tedi-multi-value-field__inner--row"]]:n}),children:[a.length>0&&l.jsxs("div",{ref:H,className:v.default(r.default["tedi-multi-value-field__tags"],{[r.default["tedi-multi-value-field__tags--row"]]:n}),children:[a.map((e,t)=>n&&d!==null&&t>=d?null:l.jsx(z.Tag,{color:y,"data-tedi-tag-index":t,onClose:b?void 0:()=>J(t),children:e},`${e}-${t}`)),R>0&&l.jsxs(z.Tag,{color:y,className:r.default["tedi-multi-value-field__overflow-tag"],"aria-label":M("multi-value-field.hidden-count",R),children:["+",R]})]}),(x||o)&&l.jsxs("div",{className:r.default["tedi-multi-value-field__right-area"],children:[x&&l.jsx(Z.ClosingButton,{onClick:U,title:M("clear"),className:r.default["tedi-multi-value-field__clear-button"],iconSize:18}),x&&o&&l.jsx(ee.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),o&&K()]})]}),q&&l.jsx("input",{ref:W,type:"hidden",name:q,value:a.length?JSON.stringify(a):"",required:S,disabled:b})]})});N.displayName="MultiValueField";exports.MultiValueField=N;exports.default=N;

package/src/tedi/components/form/multi-value-field/multi-value-field.d.ts

@@ -29,6 +29,14 @@ export interface MultiValueFieldProps {
      * @default 'primary'
      */
     tagColor?: 'primary' | 'secondary' | 'danger';
+    /**
+     * Layout for the value tags.
+     * - `'stack'` (default) — tags wrap onto multiple rows; the field grows in height.
+     * - `'row'` — tags stay on a single row; any that don't fit collapse into a
+     *   `+N` counter (the count is measured from the available width).
+     * @default stack
+     */
+    tagsDirection?: 'stack' | 'row';
     /**
      * Additional CSS class names applied to the root element.
      */

package/src/tedi/components/form/multi-value-field/multi-value-field.es.js

@@ -1,81 +1,162 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import _ from "../../../../../external/classnames/index.es.js";
-import { forwardRef as L, useState as j } from "react";
-import { Icon as g } from "../../base/icon/icon.es.js";
-import { ClosingButton as M } from "../../buttons/closing-button/closing-button.es.js";
-import { Separator as $ } from "../../misc/separator/separator.es.js";
-import { Tag as q } from "../../tags/tag/tag.es.js";
-import { FormLabel as A } from "../form-label/form-label.es.js";
-import t from "./multi-value-field.module.scss.es.js";
-import { useLabels as J } from "../../../providers/label-provider/use-labels.es.js";
-const O = L((N, R) => {
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import v from "../../../../../external/classnames/index.es.js";
+import { forwardRef as te, useState as R, useRef as C, useImperativeHandle as le, useCallback as ie, useEffect as T, useLayoutEffect as re } from "react";
+import { Icon as F } from "../../base/icon/icon.es.js";
+import { ClosingButton as ne } from "../../buttons/closing-button/closing-button.es.js";
+import { Separator as se } from "../../misc/separator/separator.es.js";
+import { Tag as P } from "../../tags/tag/tag.es.js";
+import { FormLabel as ae } from "../form-label/form-label.es.js";
+import r from "./multi-value-field.module.scss.es.js";
+import { useLabels as oe } from "../../../providers/label-provider/use-labels.es.js";
+const y = 4, ue = 44, ce = te((j, q) => {
   const {
-    id: b,
-    label: d,
-    name: u,
-    values: f,
-    onChange: o,
-    tagColor: y = "primary",
-    className: C,
-    icon: i,
-    onIconClick: p,
-    iconButtonProps: a,
-    isClearable: V = !0,
-    required: v,
-    disabled: n
-  } = N, { getLabel: w } = J(), [x, I] = j(f ?? []), r = f ?? x, h = (e) => {
-    I(e), o == null || o(e);
-  }, S = (e) => {
-    const s = r.filter((T, F) => F !== e);
-    h(s);
-  }, c = !n && V && r.length > 0, k = () => {
-    h([]);
-  }, z = () => {
-    if (!i) return null;
-    const e = typeof i == "string" ? { name: i } : i;
-    return p ? /* @__PURE__ */ l(
+    id: G,
+    label: V,
+    name: W,
+    values: E,
+    onChange: g,
+    tagColor: k = "primary",
+    tagsDirection: X = "stack",
+    className: $,
+    icon: o,
+    onIconClick: I,
+    iconButtonProps: h,
+    isClearable: D = !0,
+    required: M,
+    disabled: _
+  } = j, { getLabel: S } = oe(), [H, J] = R(E ?? []), x = C(null), z = C(null);
+  le(q, () => ({ input: z.current, wrapper: x.current }), []);
+  const n = E ?? H, i = X === "row", [d, U] = R(null), B = ie((e) => U(e), []), b = C(0), [c, p] = R(null);
+  T(() => {
+    i && p(null);
+  }, [n.length, i]), T(() => {
+    if (!i || !d || typeof ResizeObserver > "u") return;
+    const e = new ResizeObserver((t) => {
+      var u;
+      const l = ((u = t[0]) == null ? void 0 : u.contentRect.width) ?? 0;
+      l > 0 && l !== b.current && p(null);
+    });
+    return e.observe(d), () => e.disconnect();
+  }, [i, d]), re(() => {
+    if (!i || c !== null) return;
+    const e = d;
+    if (!e) return;
+    const t = e.clientWidth;
+    if (t === 0) return;
+    const l = e.querySelectorAll("[data-tedi-tag-index]");
+    if (l.length === 0) return;
+    let u = 0;
+    for (let s = 0; s < l.length; s++)
+      u += l[s].offsetWidth + (s > 0 ? y : 0);
+    if (u <= t) {
+      b.current = t, p(l.length);
+      return;
+    }
+    let L = 0, f = 0;
+    for (let s = 0; s < l.length; s++) {
+      const Z = l[s].offsetWidth, ee = s < l.length - 1 ? ue + y : 0, O = L + Z + (f > 0 ? y : 0);
+      if (O + ee <= t)
+        L = O, f++;
+      else
+        break;
+    }
+    f === 0 && (f = 1), b.current = t, p(f);
+  }, [i, c, n, d]);
+  const A = (e) => {
+    J(e), g == null || g(e);
+  }, K = (e) => {
+    const t = n.filter((l, u) => u !== e);
+    A(t);
+  }, N = !_ && D && n.length > 0, Q = () => {
+    A([]);
+  }, w = i && c !== null ? Math.max(0, n.length - c) : 0, Y = () => {
+    if (!o) return null;
+    const e = typeof o == "string" ? { name: o } : o;
+    return I ? /* @__PURE__ */ a(
       "button",
       {
-        ...a,
-        className: _(t["tedi-multi-value-field__icon-wrapper"], a == null ? void 0 : a.className),
-        onClick: p,
+        ...h,
+        className: v(r["tedi-multi-value-field__icon-wrapper"], h == null ? void 0 : h.className),
+        onClick: I,
         type: "button",
-        children: /* @__PURE__ */ l(g, { ...e, size: 18 })
+        children: /* @__PURE__ */ a(F, { ...e, size: 18 })
       }
-    ) : /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ l(g, { ...e, size: 18 }) });
+    ) : /* @__PURE__ */ a("div", { className: r["tedi-multi-value-field__icon-wrapper"], children: /* @__PURE__ */ a(F, { ...e, size: 18 }) });
   };
-  return /* @__PURE__ */ m("div", { className: _(t["tedi-multi-value-field"], C), children: [
-    d && /* @__PURE__ */ l(A, { id: b, label: d, required: v }),
-    /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__inner"], children: [
-      r.length > 0 && /* @__PURE__ */ l("div", { className: t["tedi-multi-value-field__tags"], children: r.map((e, s) => /* @__PURE__ */ l(q, { color: y, onClose: n ? void 0 : () => S(s), children: e }, `${e}-${s}`)) }),
-      (c || i) && /* @__PURE__ */ m("div", { className: t["tedi-multi-value-field__right-area"], children: [
-        c && /* @__PURE__ */ l(
-          M,
-          {
-            onClick: k,
-            title: w("clear"),
-            className: t["tedi-multi-value-field__clear-button"],
-            iconSize: 18
-          }
-        ),
-        c && i && /* @__PURE__ */ l($, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
-        i && z()
-      ] })
-    ] }),
-    u && /* @__PURE__ */ l(
+  return /* @__PURE__ */ m("div", { className: v(r["tedi-multi-value-field"], $), children: [
+    V && /* @__PURE__ */ a(ae, { id: G, label: V, required: M }),
+    /* @__PURE__ */ m(
+      "div",
+      {
+        ref: x,
+        className: v(r["tedi-multi-value-field__inner"], {
+          [r["tedi-multi-value-field__inner--row"]]: i
+        }),
+        children: [
+          n.length > 0 && /* @__PURE__ */ m(
+            "div",
+            {
+              ref: B,
+              className: v(r["tedi-multi-value-field__tags"], {
+                [r["tedi-multi-value-field__tags--row"]]: i
+              }),
+              children: [
+                n.map((e, t) => i && c !== null && t >= c ? null : /* @__PURE__ */ a(
+                  P,
+                  {
+                    color: k,
+                    "data-tedi-tag-index": t,
+                    onClose: _ ? void 0 : () => K(t),
+                    children: e
+                  },
+                  `${e}-${t}`
+                )),
+                w > 0 && /* @__PURE__ */ m(
+                  P,
+                  {
+                    color: k,
+                    className: r["tedi-multi-value-field__overflow-tag"],
+                    "aria-label": S("multi-value-field.hidden-count", w),
+                    children: [
+                      "+",
+                      w
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          (N || o) && /* @__PURE__ */ m("div", { className: r["tedi-multi-value-field__right-area"], children: [
+            N && /* @__PURE__ */ a(
+              ne,
+              {
+                onClick: Q,
+                title: S("clear"),
+                className: r["tedi-multi-value-field__clear-button"],
+                iconSize: 18
+              }
+            ),
+            N && o && /* @__PURE__ */ a(se, { color: "primary", axis: "vertical", height: 1.5, spacing: 0.25 }),
+            o && Y()
+          ] })
+        ]
+      }
+    ),
+    W && /* @__PURE__ */ a(
       "input",
       {
+        ref: z,
         type: "hidden",
-        name: u,
-        value: r.length ? JSON.stringify(r) : "",
-        required: v,
-        disabled: n
+        name: W,
+        value: n.length ? JSON.stringify(n) : "",
+        required: M,
+        disabled: _
       }
     )
   ] });
 });
-O.displayName = "MultiValueField";
+ce.displayName = "MultiValueField";
 export {
-  O as MultiValueField,
-  O as default
+  ce as MultiValueField,
+  ce as default
 };

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={"tedi-multi-value-field__inner":"tedi-multi-value-field__inner-d00be7fe","tedi-multi-value-field__inner--row":"tedi-multi-value-field__inner--row-50af96e5","tedi-multi-value-field__tags":"tedi-multi-value-field__tags-4f52450e","tedi-multi-value-field__tags--row":"tedi-multi-value-field__tags--row-fa16b6db","tedi-multi-value-field__overflow-tag":"tedi-multi-value-field__overflow-tag-e6aa972a","tedi-multi-value-field__right-area":"tedi-multi-value-field__right-area-2d533551","tedi-multi-value-field__icon-wrapper":"tedi-multi-value-field__icon-wrapper-d73d0e44"};exports.default=e;

package/src/tedi/components/form/multi-value-field/multi-value-field.module.scss.es.js

@@ -1,6 +1,9 @@
 const e = {
   "tedi-multi-value-field__inner": "tedi-multi-value-field__inner-d00be7fe",
+  "tedi-multi-value-field__inner--row": "tedi-multi-value-field__inner--row-50af96e5",
   "tedi-multi-value-field__tags": "tedi-multi-value-field__tags-4f52450e",
+  "tedi-multi-value-field__tags--row": "tedi-multi-value-field__tags--row-fa16b6db",
+  "tedi-multi-value-field__overflow-tag": "tedi-multi-value-field__overflow-tag-e6aa972a",
   "tedi-multi-value-field__right-area": "tedi-multi-value-field__right-area-2d533551",
   "tedi-multi-value-field__icon-wrapper": "tedi-multi-value-field__icon-wrapper-d73d0e44"
 };

package/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),c=require("react"),f=require("../dropdown-context.cjs.js"),g=({children:e})=>{const{refs:r,getReferenceProps:o}=f.useDropdownContext(),t=e.ref??null,n=s.useMergeRefs([r.setReference,t]);return c.cloneElement(e,o({...e.props,ref:n}))};exports.DropdownTrigger=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),c=require("react"),g=require("../../../../helpers/get-element-ref.cjs.js"),f=require("../dropdown-context.cjs.js"),i=({children:e})=>{const{refs:r,getReferenceProps:t}=f.useDropdownContext(),o=g.getElementRef(e),n=s.useMergeRefs([r.setReference,o]);return c.cloneElement(e,t({...e.props,ref:n}))};exports.DropdownTrigger=i;

package/src/tedi/components/overlays/dropdown/dropdown-trigger/dropdown-trigger.es.js

@@ -1,16 +1,17 @@
-import { useMergeRefs as n } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import { cloneElement as s } from "react";
+import { useMergeRefs as m } from "../../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { cloneElement as n } from "react";
+import { getElementRef as s } from "../../../../helpers/get-element-ref.es.js";
 import { useDropdownContext as p } from "../dropdown-context.es.js";
-const R = ({ children: e }) => {
-  const { refs: r, getReferenceProps: o } = p(), t = e.ref ?? null, f = n([r.setReference, t]);
-  return s(
+const u = ({ children: e }) => {
+  const { refs: o, getReferenceProps: r } = p(), t = s(e), f = m([o.setReference, t]);
+  return n(
     e,
-    o({
+    r({
       ...e.props,
       ref: f
     })
   );
 };
 export {
-  R as DropdownTrigger
+  u as DropdownTrigger
 };

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),c=require("../modal-context.cjs.js"),g=(...e)=>o=>{for(const r of e)r&&(typeof r=="function"?r(o):r.current=o)},t=({children:e})=>{const{getReferenceProps:o,reference:r}=c.useModalContext(),n=e.ref??e.props.ref,s=g(r,n);return f.cloneElement(e,o({ref:s,...e.props}))};t.displayName="Modal.Trigger";exports.ModalTrigger=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),f=require("../../../../helpers/get-element-ref.cjs.js"),g=require("../modal-context.cjs.js"),i=(...t)=>r=>{for(const e of t)e&&(typeof e=="function"?e(r):e.current=r)},o=({children:t})=>{const{getReferenceProps:r,reference:e}=g.useModalContext(),n=f.getElementRef(t),s=i(e,n);return c.cloneElement(t,r({...t.props,ref:s}))};o.displayName="Modal.Trigger";exports.ModalTrigger=o;

package/src/tedi/components/overlays/modal/modal-trigger/modal-trigger.es.js

@@ -1,13 +1,14 @@
 import { cloneElement as n } from "react";
-import { useModalContext as s } from "../modal-context.es.js";
-const p = (...e) => (r) => {
-  for (const o of e)
-    o && (typeof o == "function" ? o(r) : o.current = r);
-}, c = ({ children: e }) => {
-  const { getReferenceProps: r, reference: o } = s(), t = e.ref ?? e.props.ref, f = p(o, t);
-  return n(e, r({ ref: f, ...e.props }));
+import { getElementRef as s } from "../../../../helpers/get-element-ref.es.js";
+import { useModalContext as m } from "../modal-context.es.js";
+const c = (...o) => (r) => {
+  for (const e of o)
+    e && (typeof e == "function" ? e(r) : e.current = r);
+}, i = ({ children: o }) => {
+  const { getReferenceProps: r, reference: e } = m(), t = s(o), f = c(e, t);
+  return n(o, r({ ...o.props, ref: f }));
 };
-c.displayName = "Modal.Trigger";
+i.displayName = "Modal.Trigger";
 export {
-  c as ModalTrigger
+  i as ModalTrigger
 };

package/src/tedi/components/overlays/overlay/overlay-trigger.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),b=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),p=require("../../../../../external/classnames/index.cjs.js"),r=require("react"),x=require("../../base/icon/icon.cjs.js"),q=require("./overlay.cjs.js"),t=require("./overlay.module.scss.cjs.js"),_=require("../../../providers/label-provider/use-labels.cjs.js"),m=s=>{const{children:e,className:l}=s,{getLabel:a}=_.useLabels(),{getReferenceProps:o,reference:c,openWith:d,open:u,role:g,ariaHidden:f,contentId:v}=r.useContext(q.OverlayContext),i=b.useMergeRefs([c,e.ref]),n=g==="tooltip"&&!f?{"aria-describedby":u?v:void 0}:{};return r.isValidElement(e)?r.cloneElement(e,o({ref:i,tabIndex:0,...n,label:e.type===x.Icon?a("tooltip.icon-trigger"):void 0,...e.props})):y.jsx("div",{...o({ref:i,tabIndex:0,className:p.default(t.default["tedi-overlay__trigger"],t.default["tedi-overlay__trigger--text"],{[t.default["tedi-overlay__trigger--click"]]:d==="click"},l),...n}),children:e})};exports.OverlayTrigger=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),m=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),p=require("../../../../../external/classnames/index.cjs.js"),t=require("react"),q=require("../../../helpers/get-element-ref.cjs.js"),x=require("../../base/icon/icon.cjs.js"),_=require("./overlay.cjs.js"),r=require("./overlay.module.scss.cjs.js"),R=require("../../../providers/label-provider/use-labels.cjs.js"),E=l=>{const{children:e,className:s}=l,{getLabel:c}=R.useLabels(),{getReferenceProps:i,reference:a,openWith:d,open:u,role:g,ariaHidden:f,contentId:v}=t.useContext(_.OverlayContext),y=t.isValidElement(e)?q.getElementRef(e):void 0,o=m.useMergeRefs([a,y]),n=g==="tooltip"&&!f?{"aria-describedby":u?v:void 0}:{};return t.isValidElement(e)?t.cloneElement(e,i({tabIndex:0,...n,label:e.type===x.Icon?c("tooltip.icon-trigger"):void 0,...e.props,ref:o})):b.jsx("div",{...i({ref:o,tabIndex:0,className:p.default(r.default["tedi-overlay__trigger"],r.default["tedi-overlay__trigger--text"],{[r.default["tedi-overlay__trigger--click"]]:d==="click"},s),...n}),children:e})};exports.OverlayTrigger=E;

package/src/tedi/components/overlays/overlay/overlay-trigger.es.js

@@ -1,37 +1,38 @@
-import { jsx as g } from "react/jsx-runtime";
-import { useMergeRefs as v } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
-import x from "../../../../../external/classnames/index.es.js";
-import { useContext as y, isValidElement as b, cloneElement as _ } from "react";
-import { Icon as u } from "../../base/icon/icon.es.js";
-import { OverlayContext as I } from "./overlay.es.js";
+import { jsx as x } from "react/jsx-runtime";
+import { useMergeRefs as y } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import b from "../../../../../external/classnames/index.es.js";
+import { useContext as _, isValidElement as s, cloneElement as u } from "react";
+import { getElementRef as I } from "../../../helpers/get-element-ref.es.js";
+import { Icon as R } from "../../base/icon/icon.es.js";
+import { OverlayContext as h } from "./overlay.es.js";
 import r from "./overlay.module.scss.es.js";
-import { useLabels as N } from "../../../providers/label-provider/use-labels.es.js";
-const j = (s) => {
-  const { children: e, className: n } = s, { getLabel: l } = N(), { getReferenceProps: t, reference: a, openWith: c, open: m, role: p, ariaHidden: f, contentId: d } = y(I), o = v([a, e.ref]), i = p === "tooltip" && !f ? {
-    "aria-describedby": m ? d : void 0
+import { useLabels as E } from "../../../providers/label-provider/use-labels.es.js";
+const T = (n) => {
+  const { children: e, className: l } = n, { getLabel: m } = E(), { getReferenceProps: t, reference: c, openWith: a, open: p, role: f, ariaHidden: d, contentId: g } = _(h), v = s(e) ? I(e) : void 0, o = y([c, v]), i = f === "tooltip" && !d ? {
+    "aria-describedby": p ? g : void 0
   } : {};
-  return b(e) ? _(
+  return s(e) ? u(
     e,
     t({
-      ref: o,
       tabIndex: 0,
       ...i,
-      label: e.type === u ? l("tooltip.icon-trigger") : void 0,
-      ...e.props
+      label: e.type === R ? m("tooltip.icon-trigger") : void 0,
+      ...e.props,
+      ref: o
     })
-  ) : /* @__PURE__ */ g(
+  ) : /* @__PURE__ */ x(
     "div",
     {
       ...t({
         ref: o,
         tabIndex: 0,
-        className: x(
+        className: b(
           r["tedi-overlay__trigger"],
           r["tedi-overlay__trigger--text"],
           {
-            [r["tedi-overlay__trigger--click"]]: c === "click"
+            [r["tedi-overlay__trigger--click"]]: a === "click"
           },
-          n
+          l
         ),
         ...i
       }),
@@ -40,5 +41,5 @@ const j = (s) => {
   );
 };
 export {
-  j as OverlayTrigger
+  T as OverlayTrigger
 };

package/src/tedi/helpers/get-element-ref.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),n=t=>{const e=t;return Number.parseInt(r.version,10)>=19?e.props.ref:e.ref};exports.getElementRef=n;

package/src/tedi/helpers/get-element-ref.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement, Ref } from 'react';
+/**
+ * Reads a React element's ref in a version-safe way.
+ *
+ * React 19 moved `ref` onto `props` (an enumerable prop) and warns whenever the
+ * legacy `element.ref` getter is accessed. React 18 keeps the ref on the element
+ * itself. So read from `props.ref` on React 19+ and only fall back to
+ * `element.ref` on React 18 — avoiding both the deprecation warning and the
+ * lost ref.
+ */
+export declare const getElementRef: <T = unknown>(element: ReactElement) => Ref<T> | undefined;

package/src/tedi/helpers/get-element-ref.es.js

@@ -0,0 +1,8 @@
+import { version as t } from "react";
+const n = (r) => {
+  const e = r;
+  return Number.parseInt(t, 10) >= 19 ? e.props.ref : e.ref;
+};
+export {
+  n as getElementRef
+};