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

package/src/tedi/components/form/choice-group/components/choice-group-item/choice-group-item.es.js

@@ -21,13 +21,13 @@ const oe = (l) => {
     hideLabel: j,
     helper: d,
     tooltip: w,
-    type: o = "radio",
+    type: t = "radio",
     variant: m = "default",
     color: E = "primary",
     layout: F,
     showIndicator: b,
     justifyContent: y = "start"
-  } = $(l), { currentValue: n, name: v, onChange: f, inputType: G } = L.useContext(z), t = Array.isArray(n) ? n.includes(r) : r === n, P = n === void 0 ? l.defaultChecked : t, x = (i, k) => {
+  } = $(l), { currentValue: n, name: v, onChange: f, inputType: G } = L.useContext(z), o = Array.isArray(n) ? n.includes(r) : r === n, P = n === void 0 ? l.defaultChecked : o, x = (i, k) => {
     f == null || f(i, k), p == null || p(i, k);
   }, R = u(
     e[`tedi-choice-group-item--${F === "separated" ? "separated" : "segmented"}`],
@@ -37,22 +37,22 @@ const oe = (l) => {
     e[`tedi-choice-group-item--${m}`],
     e[`tedi-choice-group-item--${m}-${E}`],
     b && e["tedi-choice-group-item--indicator"],
-    o && e[`tedi-choice-group-item--${o}`],
+    t && e[`tedi-choice-group-item--${t}`],
     { [e["tedi-choice-group-item--disabled"]]: a },
-    { [e["tedi-choice-group-item--checked"]]: t },
+    { [e["tedi-choice-group-item--checked"]]: o },
     { [`justify-content-${y}`]: y }
-  ), M = o === "radio" ? q : S, T = (i) => {
+  ), M = t === "radio" ? q : S, T = (i) => {
     var N;
     a || m !== "card" || i.target.closest("input, label") || (N = document.getElementById(c)) == null || N.click();
-  }, g = o === "radio";
+  }, g = t === "radio";
   return /* @__PURE__ */ s(J, { ...I, className: R, children: /* @__PURE__ */ s(
     "div",
     {
       className: A,
       tabIndex: g || a ? -1 : 0,
       onClick: T,
-      role: g ? void 0 : o,
-      "aria-checked": g ? void 0 : t,
+      role: g ? void 0 : t,
+      "aria-checked": g ? void 0 : o,
       children: m === "default" || b ? /* @__PURE__ */ s(
         M,
         {
@@ -62,14 +62,13 @@ const oe = (l) => {
           name: v,
           className: u(e["tedi-choice-group-item__indicator"], B),
           disabled: a,
-          checked: t,
+          checked: o,
           defaultChecked: P,
           onChange: x,
           hideLabel: j,
           helper: d ? { ...d, className: u(e["tedi-choice-group-item__feedback-text"], d.className) } : void 0,
           tooltip: w,
-          "data-testid": "choice-group-item-indicator",
-          "aria-checked": t
+          "data-testid": "choice-group-item-indicator"
         }
       ) : /* @__PURE__ */ _(H, { children: [
         /* @__PURE__ */ s(
@@ -80,14 +79,14 @@ const oe = (l) => {
             name: v,
             type: G,
             disabled: a,
-            checked: t,
+            checked: o,
             defaultChecked: n === void 0 ? l.defaultChecked : void 0,
             onChange: (i) => {
               x(r, i.target.checked);
             },
             className: "visually-hidden",
-            role: o === "radio" ? "radio" : void 0,
-            "aria-checked": t,
+            role: t === "radio" ? "radio" : void 0,
+            "aria-checked": o,
             tabIndex: -1
           }
         ),

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) })
       ]
     }
   );