@tedi-design-system/react 18.1.0-rc.24 → 18.1.0-rc.26

package/src/tedi/components/form/radio/radio.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),T=require("../feedback-text/feedback-text.cjs.js"),$=require("../form-label/form-label.cjs.js"),e=require("./radio.module.scss.cjs.js"),z=require("../../layout/grid/row.cjs.js"),p=require("../../layout/grid/col.cjs.js"),x=j=>{const{id:r,label:u,value:n,className:k,disabled:s,onChange:i,hideLabel:q,helper:t,checked:o,defaultChecked:C,hover:N,name:g,tooltip:f,size:h="default",invalid:R,required:y,...w}=j,[_,L]=c.useState(C||!1),b=c.useRef(null),M=c.useMemo(()=>i&&typeof o<"u"?o:_,[i,_,o]),v=d=>{typeof o>"u"&&L(d==null?void 0:d.target.checked),i==null||i(n,d==null?void 0:d.target.checked)},m=t?t.id??`${r}-helper`:void 0,I=f?`${r}-tooltip`:void 0,S=l.default(e.default["tedi-radio__label"],{[e.default["tedi-radio--disabled"]]:s});return a.jsxs("div",{className:l.default(e.default["tedi-radio"],{[e.default["tedi-radio--disabled"]]:s}),"data-name":"radio",...w,children:[a.jsxs(z.Row,{gutter:0,children:[a.jsx(p.Col,{width:"auto",children:a.jsxs("div",{className:e.default["tedi-radio__outer-indicator-wrapper"],children:[a.jsx("input",{id:r,value:n,name:g,type:"radio",disabled:s,checked:M,onChange:v,className:e.default["tedi-radio__input"],"aria-describedby":[m,I].filter(Boolean).join(" ")}),a.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=b.current)==null?void 0:d.click()},className:l.default(e.default["tedi-radio__indicator"],{[e.default["tedi-radio__indicator--hover"]]:N},{[e.default[`tedi-radio__indicator--size-${h}`]]:h},{[e.default["tedi-radio__indicator--invalid"]]:R},k),"data-testid":"radio-indicator"})]})}),u&&a.jsx(p.Col,{children:a.jsx($.FormLabel,{ref:b,className:S,id:r,"data-testid":"radio-label",hideLabel:q,label:u,tooltip:f,required:y})})]}),t&&a.jsx(T.FeedbackText,{id:m,...t,className:l.default(e.default["tedi-radio__helper"],t.className)})]})};exports.Radio=x;exports.default=x;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),l=require("../../../../../external/classnames/index.cjs.js"),c=require("react"),T=require("../feedback-text/feedback-text.cjs.js"),$=require("../form-label/form-label.cjs.js"),e=require("./radio.module.scss.cjs.js"),z=require("../../layout/grid/row.cjs.js"),x=require("../../layout/grid/col.cjs.js"),j=k=>{const{id:r,label:u,value:n,className:q,disabled:s,onChange:i,hideLabel:C,helper:t,checked:o,defaultChecked:N,hover:g,name:R,tooltip:f,size:h="default",invalid:y,required:_,...w}=k,[b,L]=c.useState(N||!1),m=c.useRef(null),M=c.useMemo(()=>i&&typeof o<"u"?o:b,[i,b,o]),v=d=>{typeof o>"u"&&L(d==null?void 0:d.target.checked),i==null||i(n,d==null?void 0:d.target.checked)},p=t?t.id??`${r}-helper`:void 0,I=f?`${r}-tooltip`:void 0,S=l.default(e.default["tedi-radio__label"],{[e.default["tedi-radio--disabled"]]:s});return a.jsxs("div",{className:l.default(e.default["tedi-radio"],{[e.default["tedi-radio--disabled"]]:s}),"data-name":"radio",...w,children:[a.jsxs(z.Row,{gutter:0,children:[a.jsx(x.Col,{width:"auto",children:a.jsxs("div",{className:e.default["tedi-radio__outer-indicator-wrapper"],children:[a.jsx("input",{id:r,value:n,name:R,type:"radio",disabled:s,checked:M,onChange:v,className:e.default["tedi-radio__input"],"aria-describedby":[p,I].filter(Boolean).join(" "),required:_}),a.jsx("div",{"aria-hidden":"true",onClick:()=>{var d;return(d=m.current)==null?void 0:d.click()},className:l.default(e.default["tedi-radio__indicator"],{[e.default["tedi-radio__indicator--hover"]]:g},{[e.default[`tedi-radio__indicator--size-${h}`]]:h},{[e.default["tedi-radio__indicator--invalid"]]:y},q),"data-testid":"radio-indicator"})]})}),u&&a.jsx(x.Col,{children:a.jsx($.FormLabel,{ref:m,className:S,id:r,"data-testid":"radio-label",hideLabel:C,label:u,tooltip:f,required:_})})]}),t&&a.jsx(T.FeedbackText,{id:p,...t,className:l.default(e.default["tedi-radio__helper"],t.className)})]})};exports.Radio=j;exports.default=j;

package/src/tedi/components/form/radio/radio.es.js

@@ -5,29 +5,29 @@ import { FeedbackText as M } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as q } from "../form-label/form-label.es.js";
 import e from "./radio.module.scss.es.js";
 import { Row as v } from "../../layout/grid/row.es.js";
-import { Col as k } from "../../layout/grid/col.es.js";
-const K = (N) => {
+import { Col as N } from "../../layout/grid/col.es.js";
+const K = (C) => {
   const {
     id: o,
     label: m,
     value: h,
-    className: C,
+    className: g,
     disabled: c,
     onChange: a,
-    hideLabel: g,
+    hideLabel: y,
     helper: r,
     checked: t,
-    defaultChecked: y,
-    hover: R,
-    name: x,
+    defaultChecked: R,
+    hover: x,
+    name: j,
     tooltip: p,
     size: f = "default",
-    invalid: j,
-    required: w,
+    invalid: w,
+    required: u,
     ...I
-  } = N, [u, L] = n.useState(y || !1), _ = n.useRef(null), $ = n.useMemo(() => a && typeof t < "u" ? t : u, [a, u, t]), z = (i) => {
+  } = C, [_, L] = n.useState(R || !1), b = n.useRef(null), $ = n.useMemo(() => a && typeof t < "u" ? t : _, [a, _, t]), z = (i) => {
     typeof t > "u" && L(i == null ? void 0 : i.target.checked), a == null || a(h, i == null ? void 0 : i.target.checked);
-  }, b = r ? r.id ?? `${o}-helper` : void 0, B = p ? `${o}-tooltip` : void 0, F = l(e["tedi-radio__label"], { [e["tedi-radio--disabled"]]: c });
+  }, k = r ? r.id ?? `${o}-helper` : void 0, B = p ? `${o}-tooltip` : void 0, F = l(e["tedi-radio__label"], { [e["tedi-radio--disabled"]]: c });
   return /* @__PURE__ */ s(
     "div",
     {
@@ -36,19 +36,20 @@ const K = (N) => {
       ...I,
       children: [
         /* @__PURE__ */ s(v, { gutter: 0, children: [
-          /* @__PURE__ */ d(k, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-radio__outer-indicator-wrapper"], children: [
+          /* @__PURE__ */ d(N, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-radio__outer-indicator-wrapper"], children: [
             /* @__PURE__ */ d(
               "input",
               {
                 id: o,
                 value: h,
-                name: x,
+                name: j,
                 type: "radio",
                 disabled: c,
                 checked: $,
                 onChange: z,
                 className: e["tedi-radio__input"],
-                "aria-describedby": [b, B].filter(Boolean).join(" ")
+                "aria-describedby": [k, B].filter(Boolean).join(" "),
+                required: u
               }
             ),
             /* @__PURE__ */ d(
@@ -57,34 +58,34 @@ const K = (N) => {
                 "aria-hidden": "true",
                 onClick: () => {
                   var i;
-                  return (i = _.current) == null ? void 0 : i.click();
+                  return (i = b.current) == null ? void 0 : i.click();
                 },
                 className: l(
                   e["tedi-radio__indicator"],
-                  { [e["tedi-radio__indicator--hover"]]: R },
+                  { [e["tedi-radio__indicator--hover"]]: x },
                   { [e[`tedi-radio__indicator--size-${f}`]]: f },
-                  { [e["tedi-radio__indicator--invalid"]]: j },
-                  C
+                  { [e["tedi-radio__indicator--invalid"]]: w },
+                  g
                 ),
                 "data-testid": "radio-indicator"
               }
             )
           ] }) }),
-          m && /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(
+          m && /* @__PURE__ */ d(N, { children: /* @__PURE__ */ d(
             q,
             {
-              ref: _,
+              ref: b,
               className: F,
               id: o,
               "data-testid": "radio-label",
-              hideLabel: g,
+              hideLabel: y,
               label: m,
               tooltip: p,
-              required: w
+              required: u
             }
           ) })
         ] }),
-        r && /* @__PURE__ */ d(M, { id: b, ...r, className: l(e["tedi-radio__helper"], r.className) })
+        r && /* @__PURE__ */ d(M, { id: k, ...r, className: l(e["tedi-radio__helper"], r.className) })
       ]
     }
   );

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
+};