@tedi-design-system/react 18.1.0-rc.9 → 18.1.0

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

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

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

@@ -1,57 +1,63 @@
 import { jsxs as s, jsx as i } from "react/jsx-runtime";
-import d from "../../../../../external/classnames/index.es.js";
-import k from "react";
-import { Icon as N } from "../../base/icon/icon.es.js";
-import { FeedbackText as q } from "../feedback-text/feedback-text.es.js";
-import { FormLabel as E } from "../form-label/form-label.es.js";
+import t from "../../../../../external/classnames/index.es.js";
+import n from "react";
+import { Icon as C } from "../../base/icon/icon.es.js";
+import { FeedbackText as H } from "../feedback-text/feedback-text.es.js";
+import { FormLabel as M } from "../form-label/form-label.es.js";
 import e from "./checkbox.module.scss.es.js";
-import { Row as H } from "../../layout/grid/row.es.js";
-import { Col as C } from "../../layout/grid/col.es.js";
-const Q = (g) => {
+import { Row as S } from "../../layout/grid/row.es.js";
+import { Col as R } from "../../layout/grid/col.es.js";
+const U = (y) => {
   const {
-    id: a,
-    label: b,
-    value: f,
-    className: y,
-    disabled: n = !1,
-    onChange: t,
-    hideLabel: z = !1,
-    helper: o,
-    checked: r,
-    defaultChecked: I,
-    indeterminate: h,
-    hover: R,
+    id: o,
+    label: k,
+    value: b,
+    className: g,
+    disabled: h = !1,
+    onChange: a,
+    hideLabel: v = !1,
+    helper: d,
+    checked: m,
+    defaultChecked: z,
+    indeterminate: r,
+    hover: I,
     name: j,
     tooltip: _,
-    invalid: w,
+    invalid: u,
     size: l = "default",
-    required: L,
-    ...$
-  } = g, [x, v] = k.useState(I || !1), p = k.useRef(null), m = k.useMemo(() => h ? "mixed" : t && typeof r < "u" ? r : x, [h, t, r, x]), B = (c) => {
-    typeof r > "u" && v(c == null ? void 0 : c.target.checked), t == null || t(f, c == null ? void 0 : c.target.checked);
-  }, u = o ? o.id ?? `${a}-helper` : void 0, F = _ ? `${a}-tooltip` : void 0, M = d(e["tedi-checkbox__label"], { [e["tedi-checkbox--disabled"]]: n });
+    required: p,
+    ...w
+  } = y, [L, $] = n.useState(z || !1), x = n.useRef(null), f = n.useRef(null), B = a && typeof m < "u" ? m : L;
+  n.useEffect(() => {
+    f.current && (f.current.indeterminate = !!r);
+  }, [r]);
+  const E = (c) => {
+    typeof m > "u" && $(c == null ? void 0 : c.target.checked), a == null || a(b, c == null ? void 0 : c.target.checked);
+  }, N = d ? d.id ?? `${o}-helper` : void 0, F = _ ? `${o}-tooltip` : void 0, q = t(e["tedi-checkbox__label"], { [e["tedi-checkbox--disabled"]]: h });
   return /* @__PURE__ */ s(
     "div",
     {
-      className: d(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: n }),
+      className: t(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: h }),
       "data-name": "check",
-      ...$,
+      ...w,
       children: [
-        /* @__PURE__ */ s(H, { gutter: 0, children: [
-          /* @__PURE__ */ i(C, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
+        /* @__PURE__ */ s(S, { gutter: 0, children: [
+          /* @__PURE__ */ i(R, { width: "auto", children: /* @__PURE__ */ s("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
             /* @__PURE__ */ i(
               "input",
               {
-                id: a,
-                value: f,
+                ref: f,
+                id: o,
+                value: b,
                 name: j,
                 type: "checkbox",
-                disabled: n,
-                checked: m !== "mixed" ? m : !1,
-                "aria-checked": m,
-                onChange: B,
+                disabled: h,
+                checked: r ? !1 : B,
+                onChange: E,
                 className: e["tedi-checkbox__input"],
-                "aria-describedby": [u, F].filter(Boolean).join(" ")
+                "aria-describedby": [N, F].filter(Boolean).join(" "),
+                required: p,
+                "aria-invalid": u || void 0
               }
             ),
             /* @__PURE__ */ s(
@@ -60,60 +66,60 @@ const Q = (g) => {
                 "aria-hidden": "true",
                 onClick: () => {
                   var c;
-                  return (c = p.current) == null ? void 0 : c.click();
+                  return (c = x.current) == null ? void 0 : c.click();
                 },
-                className: d(
+                className: t(
                   e["tedi-checkbox__indicator"],
                   {
-                    [e["tedi-checkbox__indicator--hover"]]: R,
-                    [e["tedi-checkbox__indicator--indeterminate"]]: h,
+                    [e["tedi-checkbox__indicator--hover"]]: I,
+                    [e["tedi-checkbox__indicator--indeterminate"]]: r,
                     [e[`tedi-checkbox__indicator--size-${l}`]]: l,
-                    [e["tedi-checkbox__indicator--invalid"]]: w
+                    [e["tedi-checkbox__indicator--invalid"]]: u
                   },
-                  y
+                  g
                 ),
                 "data-testid": "checkbox-indicator",
                 children: [
                   /* @__PURE__ */ i(
-                    N,
+                    C,
                     {
                       size: l === "default" ? 16 : 18,
                       name: "remove",
-                      className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--indeterminate"])
+                      className: t(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--indeterminate"])
                     }
                   ),
                   /* @__PURE__ */ i(
-                    N,
+                    C,
                     {
                       size: l === "default" ? 16 : 18,
                       name: "check",
-                      className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--check"])
+                      className: t(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--check"])
                     }
                   )
                 ]
               }
             )
           ] }) }),
-          b && /* @__PURE__ */ i(C, { children: /* @__PURE__ */ i(
-            E,
+          k && /* @__PURE__ */ i(R, { children: /* @__PURE__ */ i(
+            M,
             {
-              ref: p,
-              className: M,
-              id: a,
+              ref: x,
+              className: q,
+              id: o,
               "data-testid": "checkbox-label",
-              hideLabel: z,
-              label: b,
+              hideLabel: v,
+              label: k,
               tooltip: _,
-              required: L
+              required: p
             }
           ) })
         ] }),
-        o && /* @__PURE__ */ i(q, { id: u, ...o, className: d(e["tedi-checkbox__helper"], o.className) })
+        d && /* @__PURE__ */ i(H, { id: N, ...d, className: t(e["tedi-checkbox__helper"], d.className) })
       ]
     }
   );
 };
 export {
-  Q as Checkbox,
-  Q as default
+  U as Checkbox,
+  U as default
 };

package/src/tedi/components/form/choice-group/choice-group.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),h=require("react"),Z=require("../feedback-text/feedback-text.cjs.js"),ee=require("../form-label/form-label.cjs.js"),te=require("../checkbox/checkbox.cjs.js"),j=require("./choice-group.module.scss.cjs.js"),re=require("./choice-group-context.cjs.js"),N=require("./components/choice-group-item/choice-group-item.cjs.js"),ne=require("../../../providers/label-provider/use-labels.cjs.js"),v=require("../../../helpers/hooks/use-breakpoint.cjs.js"),oe=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),F=require("../../layout/grid/row.cjs.js"),ie=require("../../layout/grid/col.cjs.js"),B=f=>{const{getLabel:m}=ne.useLabels(),I=v.default(f.defaultServerBreakpoint),{getCurrentBreakpointProps:R}=oe.useBreakpointProps(f.defaultServerBreakpoint),{id:d,className:T,label:p,required:H,helper:u,items:n,variant:k="default",direction:C=k==="default"||v.isBreakpointBelow(I,"md")?"column":"row",rowProps:b,name:S,inputType:i="radio",value:G,defaultValue:w,onChange:a,hideLabel:P,indeterminateCheck:s,indeterminateCheckProps:x={},color:E,layout:y="separated",showIndicator:$,...O}=R(f),{...W}=x,X=(x==null?void 0:x.indented)??!0,L=(u==null?void 0:u.id)??`${d}-helper`,M=s&&i==="checkbox",[Y,A]=h.useState(()=>{if(w)return w;if(i==="radio"){const e=n.find(l=>l.defaultChecked);return e?e.value:null}return i==="checkbox"?n.filter(e=>e.defaultChecked).map(e=>e.value):null}),q=(e=f.value)=>!!a&&typeof e<"u",r=q(G)?G:Y,g=h.useMemo(()=>(r==null?void 0:r.length)===0,[r==null?void 0:r.length]),c=h.useMemo(()=>{var e;return(r==null?void 0:r.length)===((e=n==null?void 0:n.filter(l=>!l.disabled))==null?void 0:e.length)},[r==null?void 0:r.length,n]),z=h.useMemo(()=>!g&&!c,[c,g]),D=h.useMemo(()=>{const e=c?"all":g?"none":"some";return typeof s=="string"?s:typeof s=="function"?s(e):s?m(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[m,s,c,g]),J={name:S,inputType:i,onChange:(e,l)=>{let t=r;i==="checkbox"&&t?t=l?Array.isArray(t)?[...t,e]:[e]:Array.isArray(t)?t.filter(V=>V!==e):t:t=e,q()||A(Array.isArray(t)?[...t]:t),a==null||a(t)},currentValue:r},K=_.default(j.default["tedi-choice-group"],T),Q=_.default(j.default["tedi-choice-group__inner"],b==null?void 0:b.className,{[j.default["tedi-choice-group__inner--indented"]]:M&&X}),U=()=>{var l;const e=c?[]:(l=n==null?void 0:n.filter(t=>!t.disabled))==null?void 0:l.map(t=>t.value);q()||A([...e]),a==null||a(e)};return o.jsx(re.ChoiceGroupContext.Provider,{value:J,children:o.jsxs("fieldset",{...O,className:K,id:d,name:S,"aria-describedby":L,children:[p&&typeof p=="string"?o.jsx(ee.FormLabel,{id:d,label:p,required:H,hideLabel:P,renderWithoutLabel:!0}):o.jsx("label",{htmlFor:d,children:p}),o.jsx(F.Row,{children:o.jsx(ie.Col,{children:n!=null&&n.length?o.jsxs(o.Fragment,{children:[M&&o.jsx(te.Checkbox,{id:`${d}-indeterminate`,value:"indeterminate",name:"indeterminate",...W,label:D,indeterminate:z,checked:c,onChange:U}),o.jsx(F.Row,{direction:C,gutterX:y==="segmented"?0:2,gutterY:y==="segmented"?0:1,gap:k==="default"&&(v.isBreakpointBelow(I,"md")||C==="row")?1:0,...b,className:Q,role:i==="radio"?"radiogroup":void 0,"aria-labelledby":i==="radio"?d:void 0,children:n.map(e=>o.jsx(N.ChoiceGroupItem,{...e,color:E,variant:k,type:i,layout:y,showIndicator:$,direction:C},e.id))})]}):o.jsx("p",{children:m("table.filter.no-options")})})}),u&&o.jsx(Z.FeedbackText,{...u,id:L})]})})};B.Item=N.ChoiceGroupItem;exports.ChoiceGroup=B;exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),F=require("../../../../../external/classnames/index.cjs.js"),f=require("react"),Z=require("../feedback-text/feedback-text.cjs.js"),ee=require("../form-label/form-label.cjs.js"),te=require("../checkbox/checkbox.cjs.js"),j=require("./choice-group.module.scss.cjs.js"),re=require("./choice-group-context.cjs.js"),R=require("./components/choice-group-item/choice-group-item.cjs.js"),oe=require("../../../providers/label-provider/use-labels.cjs.js"),B=require("../../../helpers/hooks/use-breakpoint.cjs.js"),ne=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),N=require("../../layout/grid/row.cjs.js"),ie=require("../../layout/grid/col.cjs.js"),I=h=>{const{getLabel:m}=oe.useLabels(),S=B.default(h.defaultServerBreakpoint),{getCurrentBreakpointProps:T}=ne.useBreakpointProps(h.defaultServerBreakpoint),{id:c,className:H,label:p,required:G,helper:a,items:o,variant:k="default",direction:v=k==="default"||B.isBreakpointBelow(S,"md")?"column":"row",rowProps:b,name:w,inputType:i="radio",value:L,defaultValue:M,onChange:d,hideLabel:P,indeterminateCheck:s,indeterminateCheckProps:x={},color:E,layout:y="separated",showIndicator:$,...O}=T(h),{...W}=x,X=(x==null?void 0:x.indented)??!0,C=(a==null?void 0:a.id)??`${c}-helper`,A=s&&i==="checkbox",[Y,_]=f.useState(()=>{if(M)return M;if(i==="radio"){const e=o.find(l=>l.defaultChecked);return e?e.value:null}return i==="checkbox"?o.filter(e=>e.defaultChecked).map(e=>e.value):null}),q=(e=h.value)=>!!d&&typeof e<"u",r=q(L)?L:Y,g=f.useMemo(()=>(r==null?void 0:r.length)===0,[r==null?void 0:r.length]),u=f.useMemo(()=>{var e;return(r==null?void 0:r.length)===((e=o==null?void 0:o.filter(l=>!l.disabled))==null?void 0:e.length)},[r==null?void 0:r.length,o]),z=f.useMemo(()=>!g&&!u,[u,g]),D=f.useMemo(()=>{const e=u?"all":g?"none":"some";return typeof s=="string"?s:typeof s=="function"?s(e):s?m(e==="all"?"table.filter.remove-all":"table.filter.select-all"):""},[m,s,u,g]),J={name:w,inputType:i,onChange:(e,l)=>{let t=r;i==="checkbox"&&t?t=l?Array.isArray(t)?[...t,e]:[e]:Array.isArray(t)?t.filter(V=>V!==e):t:t=e,q()||_(Array.isArray(t)?[...t]:t),d==null||d(t)},currentValue:r},K=F.default(j.default["tedi-choice-group"],H),Q=F.default(j.default["tedi-choice-group__inner"],b==null?void 0:b.className,{[j.default["tedi-choice-group__inner--indented"]]:A&&X}),U=()=>{var l;const e=u?[]:(l=o==null?void 0:o.filter(t=>!t.disabled))==null?void 0:l.map(t=>t.value);q()||_([...e]),d==null||d(e)};return n.jsx(re.ChoiceGroupContext.Provider,{value:J,children:n.jsxs("fieldset",{...O,className:K,id:c,name:w,"aria-describedby":a&&i!=="radio"?C:void 0,children:[p&&typeof p=="string"?n.jsx(ee.FormLabel,{id:c,label:p,required:G,hideLabel:P,renderWithoutLabel:!0}):n.jsx("label",{htmlFor:c,children:p}),n.jsx(N.Row,{children:n.jsx(ie.Col,{children:o!=null&&o.length?n.jsxs(n.Fragment,{children:[A&&n.jsx(te.Checkbox,{id:`${c}-indeterminate`,value:"indeterminate",name:"indeterminate",...W,label:D,indeterminate:z,checked:u,onChange:U}),n.jsx(N.Row,{direction:v,gutterX:y==="segmented"?0:2,gutterY:y==="segmented"?0:1,gap:k==="default"&&(B.isBreakpointBelow(S,"md")||v==="row")?1:0,...b,className:Q,role:i==="radio"?"radiogroup":void 0,"aria-labelledby":i==="radio"?c:void 0,"aria-describedby":i==="radio"&&a?C:void 0,"aria-required":i==="radio"&&G?!0:void 0,"aria-invalid":i==="radio"&&(a==null?void 0:a.type)==="error"?!0:void 0,children:o.map(e=>n.jsx(R.ChoiceGroupItem,{...e,color:E,variant:k,type:i,layout:y,showIndicator:$,direction:v},e.id))})]}):n.jsx("p",{children:m("table.filter.no-options")})})}),a&&n.jsx(Z.FeedbackText,{...a,id:C})]})})};I.Item=R.ChoiceGroupItem;exports.ChoiceGroup=I;exports.default=I;

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

@@ -1,118 +1,131 @@
-import { jsx as n, jsxs as w, Fragment as Z } from "react/jsx-runtime";
-import F from "../../../../../external/classnames/index.es.js";
-import k, { useState as ee } from "react";
+import { jsx as a, jsxs as F, Fragment as Z } from "react/jsx-runtime";
+import G from "../../../../../external/classnames/index.es.js";
+import y, { useState as ee } from "react";
 import { FeedbackText as te } from "../feedback-text/feedback-text.es.js";
 import { FormLabel as re } from "../form-label/form-label.es.js";
 import { Checkbox as oe } from "../checkbox/checkbox.es.js";
-import I from "./choice-group.module.scss.es.js";
-import { ChoiceGroupContext as ne } from "./choice-group-context.es.js";
-import { ChoiceGroupItem as j } from "./components/choice-group-item/choice-group-item.es.js";
-import { useLabels as ie } from "../../../providers/label-provider/use-labels.es.js";
-import ae, { isBreakpointBelow as G } from "../../../helpers/hooks/use-breakpoint.es.js";
+import B from "./choice-group.module.scss.es.js";
+import { ChoiceGroupContext as ie } from "./choice-group-context.es.js";
+import { ChoiceGroupItem as q } from "./components/choice-group-item/choice-group-item.es.js";
+import { useLabels as ne } from "../../../providers/label-provider/use-labels.es.js";
+import ae, { isBreakpointBelow as H } from "../../../helpers/hooks/use-breakpoint.es.js";
 import { useBreakpointProps as le } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { Row as H } from "../../layout/grid/row.es.js";
+import { Row as j } from "../../layout/grid/row.es.js";
 import { Col as de } from "../../layout/grid/col.es.js";
-const se = (f) => {
-  const { getLabel: u } = ie(), B = ae(f.defaultServerBreakpoint), { getCurrentBreakpointProps: E } = le(f.defaultServerBreakpoint), {
-    id: s,
+const se = (u) => {
+  const { getLabel: f } = ne(), S = ae(u.defaultServerBreakpoint), { getCurrentBreakpointProps: E } = le(u.defaultServerBreakpoint), {
+    id: c,
     className: R,
     label: p,
-    required: T,
-    helper: m,
+    required: A,
+    helper: n,
     items: o,
-    variant: y = "default",
-    direction: C = y === "default" || G(B, "md") ? "column" : "row",
+    variant: k = "default",
+    direction: v = k === "default" || H(S, "md") ? "column" : "row",
     rowProps: h,
-    name: S,
+    name: L,
     inputType: i = "radio",
-    value: A,
-    defaultValue: L,
-    onChange: l,
-    hideLabel: $,
-    indeterminateCheck: d,
+    value: M,
+    defaultValue: N,
+    onChange: d,
+    hideLabel: T,
+    indeterminateCheck: s,
     indeterminateCheckProps: b = {},
-    color: q,
-    layout: x = "separated",
+    color: $,
+    layout: C = "separated",
     showIndicator: P,
     ...W
-  } = E(f), { ...X } = b, Y = (b == null ? void 0 : b.indented) ?? !0, M = (m == null ? void 0 : m.id) ?? `${s}-helper`, N = d && i === "checkbox", [z, _] = ee(() => {
-    if (L) return L;
+  } = E(u), { ...X } = b, Y = (b == null ? void 0 : b.indented) ?? !0, x = (n == null ? void 0 : n.id) ?? `${c}-helper`, _ = s && i === "checkbox", [z, w] = ee(() => {
+    if (N) return N;
     if (i === "radio") {
-      const e = o.find((a) => a.defaultChecked);
+      const e = o.find((l) => l.defaultChecked);
       return e ? e.value : null;
     }
     return i === "checkbox" ? o.filter((e) => e.defaultChecked).map((e) => e.value) : null;
-  }), v = (e = f.value) => !!l && typeof e < "u", r = v(A) ? A : z, g = k.useMemo(() => (r == null ? void 0 : r.length) === 0, [r == null ? void 0 : r.length]), c = k.useMemo(
+  }), I = (e = u.value) => !!d && typeof e < "u", r = I(M) ? M : z, g = y.useMemo(() => (r == null ? void 0 : r.length) === 0, [r == null ? void 0 : r.length]), m = y.useMemo(
     () => {
       var e;
-      return (r == null ? void 0 : r.length) === ((e = o == null ? void 0 : o.filter((a) => !a.disabled)) == null ? void 0 : e.length);
+      return (r == null ? void 0 : r.length) === ((e = o == null ? void 0 : o.filter((l) => !l.disabled)) == null ? void 0 : e.length);
     },
     [r == null ? void 0 : r.length, o]
-  ), D = k.useMemo(() => !g && !c, [c, g]), J = k.useMemo(() => {
-    const e = c ? "all" : g ? "none" : "some";
-    return typeof d == "string" ? d : typeof d == "function" ? d(e) : d ? u(e === "all" ? "table.filter.remove-all" : "table.filter.select-all") : "";
-  }, [u, d, c, g]), K = {
-    name: S,
+  ), D = y.useMemo(() => !g && !m, [m, g]), J = y.useMemo(() => {
+    const e = m ? "all" : g ? "none" : "some";
+    return typeof s == "string" ? s : typeof s == "function" ? s(e) : s ? f(e === "all" ? "table.filter.remove-all" : "table.filter.select-all") : "";
+  }, [f, s, m, g]), K = {
+    name: L,
     inputType: i,
-    onChange: (e, a) => {
+    onChange: (e, l) => {
       let t = r;
-      i === "checkbox" && t ? t = a ? Array.isArray(t) ? [...t, e] : [e] : Array.isArray(t) ? t.filter((V) => V !== e) : t : t = e, v() || _(Array.isArray(t) ? [...t] : t), l == null || l(t);
+      i === "checkbox" && t ? t = l ? Array.isArray(t) ? [...t, e] : [e] : Array.isArray(t) ? t.filter((V) => V !== e) : t : t = e, I() || w(Array.isArray(t) ? [...t] : t), d == null || d(t);
     },
     currentValue: r
-  }, O = F(I["tedi-choice-group"], R), Q = F(I["tedi-choice-group__inner"], h == null ? void 0 : h.className, {
-    [I["tedi-choice-group__inner--indented"]]: N && Y
+  }, O = G(B["tedi-choice-group"], R), Q = G(B["tedi-choice-group__inner"], h == null ? void 0 : h.className, {
+    [B["tedi-choice-group__inner--indented"]]: _ && Y
   }), U = () => {
-    var a;
-    const e = c ? [] : (a = o == null ? void 0 : o.filter((t) => !t.disabled)) == null ? void 0 : a.map((t) => t.value);
-    v() || _([...e]), l == null || l(e);
+    var l;
+    const e = m ? [] : (l = o == null ? void 0 : o.filter((t) => !t.disabled)) == null ? void 0 : l.map((t) => t.value);
+    I() || w([...e]), d == null || d(e);
   };
-  return /* @__PURE__ */ n(ne.Provider, { value: K, children: /* @__PURE__ */ w("fieldset", { ...W, className: O, id: s, name: S, "aria-describedby": M, children: [
-    p && typeof p == "string" ? /* @__PURE__ */ n(re, { id: s, label: p, required: T, hideLabel: $, renderWithoutLabel: !0 }) : /* @__PURE__ */ n("label", { htmlFor: s, children: p }),
-    /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(de, { children: o != null && o.length ? /* @__PURE__ */ w(Z, { children: [
-      N && /* @__PURE__ */ n(
-        oe,
-        {
-          id: `${s}-indeterminate`,
-          value: "indeterminate",
-          name: "indeterminate",
-          ...X,
-          label: J,
-          indeterminate: D,
-          checked: c,
-          onChange: U
-        }
-      ),
-      /* @__PURE__ */ n(
-        H,
-        {
-          direction: C,
-          gutterX: x === "segmented" ? 0 : 2,
-          gutterY: x === "segmented" ? 0 : 1,
-          gap: y === "default" && (G(B, "md") || C === "row") ? 1 : 0,
-          ...h,
-          className: Q,
-          role: i === "radio" ? "radiogroup" : void 0,
-          "aria-labelledby": i === "radio" ? s : void 0,
-          children: o.map((e) => /* @__PURE__ */ n(
+  return /* @__PURE__ */ a(ie.Provider, { value: K, children: /* @__PURE__ */ F(
+    "fieldset",
+    {
+      ...W,
+      className: O,
+      id: c,
+      name: L,
+      "aria-describedby": n && i !== "radio" ? x : void 0,
+      children: [
+        p && typeof p == "string" ? /* @__PURE__ */ a(re, { id: c, label: p, required: A, hideLabel: T, renderWithoutLabel: !0 }) : /* @__PURE__ */ a("label", { htmlFor: c, children: p }),
+        /* @__PURE__ */ a(j, { children: /* @__PURE__ */ a(de, { children: o != null && o.length ? /* @__PURE__ */ F(Z, { children: [
+          _ && /* @__PURE__ */ a(
+            oe,
+            {
+              id: `${c}-indeterminate`,
+              value: "indeterminate",
+              name: "indeterminate",
+              ...X,
+              label: J,
+              indeterminate: D,
+              checked: m,
+              onChange: U
+            }
+          ),
+          /* @__PURE__ */ a(
             j,
             {
-              ...e,
-              color: q,
-              variant: y,
-              type: i,
-              layout: x,
-              showIndicator: P,
-              direction: C
-            },
-            e.id
-          ))
-        }
-      )
-    ] }) : /* @__PURE__ */ n("p", { children: u("table.filter.no-options") }) }) }),
-    m && /* @__PURE__ */ n(te, { ...m, id: M })
-  ] }) });
+              direction: v,
+              gutterX: C === "segmented" ? 0 : 2,
+              gutterY: C === "segmented" ? 0 : 1,
+              gap: k === "default" && (H(S, "md") || v === "row") ? 1 : 0,
+              ...h,
+              className: Q,
+              role: i === "radio" ? "radiogroup" : void 0,
+              "aria-labelledby": i === "radio" ? c : void 0,
+              "aria-describedby": i === "radio" && n ? x : void 0,
+              "aria-required": i === "radio" && A ? !0 : void 0,
+              "aria-invalid": i === "radio" && (n == null ? void 0 : n.type) === "error" ? !0 : void 0,
+              children: o.map((e) => /* @__PURE__ */ a(
+                q,
+                {
+                  ...e,
+                  color: $,
+                  variant: k,
+                  type: i,
+                  layout: C,
+                  showIndicator: P,
+                  direction: v
+                },
+                e.id
+              ))
+            }
+          )
+        ] }) : /* @__PURE__ */ a("p", { children: f("table.filter.no-options") }) }) }),
+        n && /* @__PURE__ */ a(te, { ...n, id: x })
+      ]
+    }
+  ) });
 };
-se.Item = j;
+se.Item = q;
 export {
   se as ChoiceGroup,
   se as default

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),A=require("../../../checkbox/checkbox.cjs.js"),H=require("../../../feedback-text/feedback-text.cjs.js"),L=require("../../../radio/radio.cjs.js"),O=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),V=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),z=require("../../../../layout/grid/col.cjs.js"),_=n=>{const{getCurrentBreakpointProps:q}=V.useBreakpointProps(n.defaultServerBreakpoint),{id:a,label:C,value:d,className:N,direction:m,disabled:r,colProps:I=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:u,tooltip:$,type:o="radio",variant:s="default",color:G="primary",layout:P,showIndicator:x,justifyContent:b="start"}=q(n),{currentValue:l,name:v,onChange:f,inputType:M}=S.useContext(O.ChoiceGroupContext),i=Array.isArray(l)?l.includes(d):d===l,R=l===void 0?n.defaultChecked:i,y=(c,k)=>{f==null||f(c,k),p==null||p(c,k)},T=h.default(e.default[`tedi-choice-group-item--${P==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${G}`],x&&e.default["tedi-choice-group-item--indicator"],o&&e.default[`tedi-choice-group-item--${o}`],{[e.default["tedi-choice-group-item--disabled"]]:r},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${b}`]:b}),E=o==="radio"?L.Radio:A.Checkbox,F=c=>{var j;r||s!=="card"||c.target.closest("input, label")||(j=document.getElementById(a))==null||j.click()},g=o==="radio";return t.jsx(z.Col,{...I,className:T,children:t.jsx("div",{className:w,tabIndex:g||r?-1:0,onClick:F,role:g?void 0:o,"aria-checked":g?void 0:i,children:s==="default"||x?t.jsx(E,{id:a,label:C,value:d,name:v,className:h.default(e.default["tedi-choice-group-item__indicator"],N),disabled:r,checked:i,defaultChecked:R,onChange:y,hideLabel:B,helper:u?{...u,className:h.default(e.default["tedi-choice-group-item__feedback-text"],u.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:a,value:d,name:v,type:M,disabled:r,checked:i,defaultChecked:l===void 0?n.defaultChecked:void 0,onChange:c=>{y(d,c.target.checked)},className:"visually-hidden",role:o==="radio"?"radio":void 0,"aria-checked":i,tabIndex:-1}),t.jsxs("label",{htmlFor:a,className:e.default["tedi-choice-group-item__label"],children:[C,u&&t.jsx(H.FeedbackText,{...u,id:a,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=_;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),h=require("../../../../../../../external/classnames/index.cjs.js"),S=require("react"),A=require("../../../checkbox/checkbox.cjs.js"),H=require("../../../feedback-text/feedback-text.cjs.js"),L=require("../../../radio/radio.cjs.js"),O=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),V=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),z=require("../../../../layout/grid/col.cjs.js"),_=n=>{const{getCurrentBreakpointProps:q}=V.useBreakpointProps(n.defaultServerBreakpoint),{id:a,label:C,value:d,className:N,direction:m,disabled:r,colProps:I=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:u,tooltip:$,type:i="radio",variant:s="default",color:G="primary",layout:P,showIndicator:x,justifyContent:b="start"}=q(n),{currentValue:l,name:v,onChange:f,inputType:M}=S.useContext(O.ChoiceGroupContext),o=Array.isArray(l)?l.includes(d):d===l,R=l===void 0?n.defaultChecked:o,y=(c,k)=>{f==null||f(c,k),p==null||p(c,k)},T=h.default(e.default[`tedi-choice-group-item--${P==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),w=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${s}`],e.default[`tedi-choice-group-item--${s}-${G}`],x&&e.default["tedi-choice-group-item--indicator"],i&&e.default[`tedi-choice-group-item--${i}`],{[e.default["tedi-choice-group-item--disabled"]]:r},{[e.default["tedi-choice-group-item--checked"]]:o},{[`justify-content-${b}`]:b}),E=i==="radio"?L.Radio:A.Checkbox,F=c=>{var j;r||s!=="card"||c.target.closest("input, label")||(j=document.getElementById(a))==null||j.click()},g=i==="radio";return t.jsx(z.Col,{...I,className:T,children:t.jsx("div",{className:w,tabIndex:g||r?-1:0,onClick:F,role:g?void 0:i,"aria-checked":g?void 0:o,children:s==="default"||x?t.jsx(E,{id:a,label:C,value:d,name:v,className:h.default(e.default["tedi-choice-group-item__indicator"],N),disabled:r,checked:o,defaultChecked:R,onChange:y,hideLabel:B,helper:u?{...u,className:h.default(e.default["tedi-choice-group-item__feedback-text"],u.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator"}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:a,value:d,name:v,type:M,disabled:r,checked:o,defaultChecked:l===void 0?n.defaultChecked:void 0,onChange:c=>{y(d,c.target.checked)},className:"visually-hidden",role:i==="radio"?"radio":void 0,"aria-checked":o,tabIndex:-1}),t.jsxs("label",{htmlFor:a,className:e.default["tedi-choice-group-item__label"],children:[C,u&&t.jsx(H.FeedbackText,{...u,id:a,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=_;exports.default=_;

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/choice-input.types.d.ts

@@ -49,9 +49,10 @@ export interface ChoiceInputProps {
      */
     hover?: boolean;
     /**
-     * Provide content for tooltip.
+     * Provide content for tooltip. Accepts rich content (e.g. bold text, links),
+     * not just a plain string.
      */
-    tooltip?: string;
+    tooltip?: React.ReactNode;
     /**
      *  Input size
      */