@tedi-design-system/react 16.0.0-rc.1 → 16.0.0-rc.11

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

@@ -1,84 +1,85 @@
-import { jsxs as n, jsx as i } from "react/jsx-runtime";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
 import d from "../../../../../external/classnames/index.es.js";
-import b from "react";
-import { Icon as C } from "../../base/icon/icon.es.js";
-import { FeedbackText as M } from "../feedback-text/feedback-text.es.js";
+import m 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 e from "./checkbox.module.scss.es.js";
 import { Row as H } from "../../layout/grid/row.es.js";
-import { Col as g } from "../../layout/grid/col.es.js";
-const P = (y) => {
+import { Col as C } from "../../layout/grid/col.es.js";
+const Q = (g) => {
   const {
-    id: t,
-    label: r,
-    value: f,
-    className: z,
-    disabled: _ = !1,
-    onChange: o,
-    hideLabel: I = !1,
-    helper: a,
-    checked: l,
-    defaultChecked: R,
-    indeterminate: h,
-    hover: j,
-    name: w,
-    tooltip: p,
-    invalid: F,
-    size: s = "default",
-    ...L
-  } = y, [x, $] = b.useState(R || !1), m = b.useRef(null), k = b.useMemo(() => h ? "mixed" : o && typeof l < "u" ? l : x, [h, o, l, x]), v = (c) => {
-    typeof l > "u" && $(c == null ? void 0 : c.target.checked), o == null || o(f, c == null ? void 0 : c.target.checked);
-  }, u = a ? a.id ?? `${t}-helper` : void 0, B = p ? `${t}-tooltip` : void 0, N = d(e["tedi-checkbox"], { [e["tedi-checkbox--disabled"]]: _ });
-  return /* @__PURE__ */ n("div", { "data-name": "check", ...L, children: [
-    /* @__PURE__ */ n(H, { gutter: 0, children: [
-      /* @__PURE__ */ i(g, { width: "auto", children: /* @__PURE__ */ n("div", { className: e["tedi-checkbox__outer-indicator-wrapper"], children: [
+    id: a,
+    label: k,
+    value: b,
+    className: y,
+    disabled: f = !1,
+    onChange: t,
+    hideLabel: z = !1,
+    helper: o,
+    checked: r,
+    defaultChecked: I,
+    indeterminate: n,
+    hover: R,
+    name: j,
+    tooltip: _,
+    invalid: w,
+    size: l = "default",
+    required: L,
+    ...$
+  } = g, [p, v] = m.useState(I || !1), x = m.useRef(null), h = m.useMemo(() => n ? "mixed" : t && typeof r < "u" ? r : p, [n, t, r, p]), B = (c) => {
+    typeof r > "u" && v(c == null ? void 0 : c.target.checked), t == null || t(b, 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"]]: f });
+  return /* @__PURE__ */ s("div", { "data-name": "check", ...$, 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__ */ i(
           "input",
           {
-            id: t,
-            value: f,
-            name: w,
+            id: a,
+            value: b,
+            name: j,
             type: "checkbox",
-            disabled: _,
-            checked: k !== "mixed" ? k : !1,
-            "aria-checked": k,
-            onChange: v,
+            disabled: f,
+            checked: h !== "mixed" ? h : !1,
+            "aria-checked": h,
+            onChange: B,
             className: e["tedi-checkbox__input"],
-            "aria-describedby": [u, B].filter(Boolean).join(" ")
+            "aria-describedby": [u, F].filter(Boolean).join(" ")
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ s(
           "div",
           {
             "aria-hidden": "true",
             onClick: () => {
               var c;
-              return (c = m.current) == null ? void 0 : c.click();
+              return (c = x.current) == null ? void 0 : c.click();
             },
             className: d(
               e["tedi-checkbox__indicator"],
               {
-                [e["tedi-checkbox__indicator--hover"]]: j,
-                [e["tedi-checkbox__indicator--indeterminate"]]: h,
-                [e[`tedi-checkbox__indicator--size-${s}`]]: s,
-                [e["tedi-checkbox__indicator--invalid"]]: F
+                [e["tedi-checkbox__indicator--hover"]]: R,
+                [e["tedi-checkbox__indicator--indeterminate"]]: n,
+                [e[`tedi-checkbox__indicator--size-${l}`]]: l,
+                [e["tedi-checkbox__indicator--invalid"]]: w
               },
-              z
+              y
             ),
             "data-testid": "checkbox-indicator",
             children: [
               /* @__PURE__ */ i(
-                C,
+                N,
                 {
-                  size: s === "default" ? 16 : 18,
+                  size: l === "default" ? 16 : 18,
                   name: "remove",
                   className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--indeterminate"])
                 }
               ),
               /* @__PURE__ */ i(
-                C,
+                N,
                 {
-                  size: s === "default" ? 16 : 18,
+                  size: l === "default" ? 16 : 18,
                   name: "check",
                   className: d(e["tedi-checkbox__icon"], e["tedi-checkbox__icon--check"])
                 }
@@ -87,23 +88,24 @@ const P = (y) => {
           }
         )
       ] }) }),
-      /* @__PURE__ */ i(g, { children: r && typeof r == "string" ? /* @__PURE__ */ i(
+      k && /* @__PURE__ */ i(C, { children: /* @__PURE__ */ i(
         E,
         {
-          ref: m,
-          className: N,
-          id: t,
+          ref: x,
+          className: M,
+          id: a,
           "data-testid": "checkbox-label",
-          hideLabel: I,
-          label: r,
-          tooltip: p
+          hideLabel: z,
+          label: k,
+          tooltip: _,
+          required: L
         }
-      ) : /* @__PURE__ */ i("label", { ref: m, htmlFor: t, className: N, "data-testid": "checkbox-label", children: r }) })
+      ) })
     ] }),
-    a && /* @__PURE__ */ i(M, { id: u, ...a, className: d(e["tedi-checkbox__helper"], a.className) })
+    o && /* @__PURE__ */ i(q, { id: u, ...o, className: d(e["tedi-checkbox__helper"], o.className) })
   ] });
 };
 export {
-  P as Checkbox,
-  P as default
+  Q as Checkbox,
+  Q 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"),E=require("react"),F=require("../../../checkbox/checkbox.cjs.js"),L=require("../../../feedback-text/feedback-text.cjs.js"),R=require("../../../radio/radio.cjs.js"),S=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),H=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),O=require("../../../../layout/grid/col.cjs.js"),j=r=>{const{getCurrentBreakpointProps:q}=H.useBreakpointProps(r.defaultServerBreakpoint),{id:u,label:k,value:o,className:v,direction:m,disabled:l,colProps:y=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:N,helper:a,tooltip:B,type:s="radio",variant:n="default",color:$="primary",layout:G,showIndicator:C,justifyContent:x="start"}=q(r),{currentValue:d,name:b,onChange:f,inputType:I}=E.useContext(S.ChoiceGroupContext),i=Array.isArray(d)?d.includes(o):o===d,P=d===void 0?r.defaultChecked:i,g=(c,_)=>{f==null||f(c,_),p==null||p(c,_)},M=h.default(e.default[`tedi-choice-group-item--${G==="separated"?"separated":"segmented"}`],m&&e.default[`tedi-choice-group-item--${m}`]),T=h.default(e.default["tedi-choice-group-item"],e.default[`tedi-choice-group-item--${n}`],e.default[`tedi-choice-group-item--${n}-${$}`],C&&e.default["tedi-choice-group-item--indicator"],s&&e.default[`tedi-choice-group-item--${s}`],{[e.default["tedi-choice-group-item--disabled"]]:l},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),w=s==="radio"?R.Radio:F.Checkbox,A=c=>{c.target.tagName!=="LABEL"&&!l&&n==="card"&&g(o,!i)};return t.jsx(O.Col,{...y,className:M,children:t.jsx("div",{className:T,onClick:A,children:n==="default"||C?t.jsx(w,{id:u,label:k,value:o,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:l,checked:i,defaultChecked:P,onChange:g,hideLabel:N,helper:a?{...a,className:h.default(e.default["tedi-choice-group-item__feedback-text"],a.className)}:void 0,tooltip:B,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:u,value:o,name:b,type:I,disabled:l,checked:i,defaultChecked:d===void 0?r.defaultChecked:void 0,onChange:c=>g(o,c.target.checked),className:e.default["tedi-choice-group-item__input"],role:s==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:u,className:e.default["tedi-choice-group-item__label"],children:[k,a&&t.jsx(L.FeedbackText,{...a,id:u,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=j;exports.default=j;
+"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"),R=require("react"),S=require("../../../checkbox/checkbox.cjs.js"),A=require("../../../feedback-text/feedback-text.cjs.js"),H=require("../../../radio/radio.cjs.js"),L=require("../../choice-group-context.cjs.js"),e=require("./choice-group-item.module.scss.cjs.js"),O=require("../../../../../helpers/hooks/use-breakpoint-props.cjs.js"),V=require("../../../../layout/grid/col.cjs.js"),y=l=>{const{getCurrentBreakpointProps:q}=O.useBreakpointProps(l.defaultServerBreakpoint),{id:c,label:k,value:a,className:v,direction:m,disabled:n,colProps:N=m==="column"?{width:12}:{width:"auto"},onChange:p,hideLabel:B,helper:r,tooltip:$,type:d="radio",variant:s="default",color:G="primary",layout:I,showIndicator:C,justifyContent:x="start"}=q(l),{currentValue:u,name:b,onChange:f,inputType:P}=R.useContext(L.ChoiceGroupContext),i=Array.isArray(u)?u.includes(a):a===u,M=u===void 0?l.defaultChecked:i,_=(o,g)=>{f==null||f(o,g),p==null||p(o,g)},T=h.default(e.default[`tedi-choice-group-item--${I==="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}`],C&&e.default["tedi-choice-group-item--indicator"],d&&e.default[`tedi-choice-group-item--${d}`],{[e.default["tedi-choice-group-item--disabled"]]:n},{[e.default["tedi-choice-group-item--checked"]]:i},{[`justify-content-${x}`]:x}),E=d==="radio"?H.Radio:S.Checkbox,F=o=>{var j;n||s!=="card"||o.target.closest("input, label")||(j=document.getElementById(c))==null||j.click()};return t.jsx(V.Col,{...N,className:T,children:t.jsx("div",{className:w,onClick:F,role:d,"aria-checked":i,children:s==="default"||C?t.jsx(E,{id:c,label:k,value:a,name:b,className:h.default(e.default["tedi-choice-group-item__indicator"],v),disabled:n,checked:i,defaultChecked:M,onChange:_,hideLabel:B,helper:r?{...r,className:h.default(e.default["tedi-choice-group-item__feedback-text"],r.className)}:void 0,tooltip:$,"data-testid":"choice-group-item-indicator","aria-checked":i}):t.jsxs(t.Fragment,{children:[t.jsx("input",{id:c,value:a,name:b,type:P,disabled:n,checked:i,defaultChecked:u===void 0?l.defaultChecked:void 0,onChange:o=>{_(a,o.target.checked)},className:e.default["tedi-choice-group-item__input"],role:d==="radio"?"radio":void 0,"aria-checked":i}),t.jsxs("label",{htmlFor:c,className:e.default["tedi-choice-group-item__label"],children:[k,r&&t.jsx(A.FeedbackText,{...r,id:c,className:e.default["tedi-choice-group-item__feedback-text"]})]})]})})})};exports.ChoiceGroupItem=y;exports.default=y;

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

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

package/src/tedi/components/form/choice-input.types.d.ts

@@ -7,7 +7,7 @@ export interface ChoiceInputProps {
     /**
      * Label text
      */
-    label: string | React.ReactNode;
+    label: React.ReactNode;
     /**
      * Additional classes.
      */
@@ -60,4 +60,8 @@ export interface ChoiceInputProps {
      * Whether the input is marked as invalid.
      */
     invalid?: boolean;
+    /**
+     * Whether the input is marked as required.
+     */
+    required?: boolean;
 }

package/src/tedi/components/form/form-label/form-label.d.ts

@@ -7,7 +7,7 @@ export interface FormLabelProps {
     /**
      * The text content of the label that describes the input field.
      */
-    label: string;
+    label: React.ReactNode;
     /**
      * Controls the visibility of the label.
      * Use `true` to hide the label visually while maintaining its space in the layout,

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

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

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

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

package/src/tedi/components/layout/sidenav/components/sidenav-dropdown/sidenav-dropdown.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("../../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),N=require("../../../../../../../external/classnames/index.cjs.js"),v=require("react"),k=require("../../../../navigation/link/link.cjs.js"),a=require("./sidenav-dropdown.module.scss.cjs.js"),D=require("../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),h=require("../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),q=require("../../../../../providers/label-provider/use-labels.cjs.js"),F=({trigger:b,groups:g,onOpenChange:o})=>{const{getLabel:x}=q.useLabels(),[u,r]=v.useState(!1),{refs:c,floatingStyles:_,context:f}=d.useFloating({open:u,middleware:[h.offset({mainAxis:8}),h.flip()],whileElementsMounted:D.autoUpdate,placement:"right-start",onOpenChange:e=>{r(e),o==null||o(e)},strategy:"fixed"}),{getReferenceProps:j,getFloatingProps:w}=d.useInteractions([d.useClick(f),d.useDismiss(f)]),p=e=>{var m;const n=e.subItemGroups||e.subItems,t=e.key||e.href||((m=e.children)==null?void 0:m.toString());return s.jsxs("li",{role:"none",className:N.default(a.default["tedi-sidenav-dropdown__item"],n&&a.default["tedi-sidenav-dropdown__item--has-children"]),children:[s.jsxs(k.Link,{...e,role:"menuitem","aria-haspopup":n?"true":void 0,"aria-expanded":n?!1:void 0,"aria-controls":n?`${t}-submenu`:void 0,className:a.default["tedi-sidenav-dropdown__link"],"data-active":e.isActive,"aria-current":e.isActive?"page":void 0,noStyle:!0,onClick:i=>{var l;(l=e.onClick)==null||l.call(e,i),r(!1)},children:[e.children,n&&s.jsx("span",{className:a.default["tedi-sidenav__bullet"]})]}),n&&s.jsx("ul",{id:`${t}-submenu`,className:a.default["tedi-sidenav-dropdown__list"],role:"menu","aria-label":x("sidenav.submenu"),children:(e.subItemGroups??(e.subItems?[{subItems:e.subItems}]:[])).map((i,l)=>s.jsxs(v.Fragment,{children:[i.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:i.subHeading}),i.subItems.map(I=>p(I))]},l))})]},t)},y=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(n=>!n)),e.key==="Escape"&&(e.preventDefault(),r(!1),c.setReference(null))};return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:c.setReference,...j(),role:"button",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":u,onKeyDown:y,children:b}),u&&s.jsx(d.FloatingOverlay,{children:s.jsx(d.FloatingPortal,{children:s.jsx(d.FloatingFocusManager,{context:f,modal:!1,children:s.jsx("div",{ref:c.setFloating,style:_,className:a.default["tedi-sidenav-dropdown"],role:"menu",...w(),children:g.map((e,n)=>s.jsxs("div",{className:a.default["tedi-sidenav-dropdown__group"],children:[e.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:e.subHeading}),s.jsx("ul",{className:a.default["tedi-sidenav-dropdown__list"],role:"menu",children:e.subItems.map(t=>p(t))})]},n))})})})})]})};exports.SideNavDropdown=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("../../../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),k=require("../../../../../../../external/classnames/index.cjs.js"),m=require("react"),D=require("../../../../navigation/link/link.cjs.js"),a=require("./sidenav-dropdown.module.scss.cjs.js"),q=require("../../../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),h=require("../../../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),F=require("../../../../../providers/label-provider/use-labels.cjs.js"),S=({trigger:b,groups:g,onOpenChange:u,as:x})=>{const{getLabel:_}=F.useLabels(),[r,l]=m.useState(!1),{refs:c,floatingStyles:j,context:f}=d.useFloating({open:r,middleware:[h.offset({mainAxis:8}),h.flip()],whileElementsMounted:q.autoUpdate,placement:"right-start",onOpenChange:e=>{l(e),u==null||u(e)},strategy:"fixed"}),{getReferenceProps:w,getFloatingProps:y}=d.useInteractions([d.useClick(f),d.useDismiss(f)]),p=e=>{var v;const n=e.subItemGroups||e.subItems,t=e.key||e.href||((v=e.children)==null?void 0:v.toString());return s.jsxs("li",{role:"none",className:k.default(a.default["tedi-sidenav-dropdown__item"],n&&a.default["tedi-sidenav-dropdown__item--has-children"]),children:[s.jsxs(D.Link,{...e,role:"menuitem","aria-haspopup":n?"true":void 0,"aria-expanded":n?r:void 0,"aria-controls":n?`${t}-submenu`:void 0,className:a.default["tedi-sidenav-dropdown__link"],"data-active":e.isActive,"aria-current":e.isActive?"page":void 0,noStyle:!0,onClick:i=>{var o;(o=e.onClick)==null||o.call(e,i),l(!1)},as:e.as??x,children:[e.children,n&&s.jsx("span",{className:a.default["tedi-sidenav__bullet"]})]}),n&&s.jsx("ul",{id:`${t}-submenu`,className:a.default["tedi-sidenav-dropdown__list"],role:"menu","aria-label":_("sidenav.submenu"),children:(e.subItemGroups??(e.subItems?[{subItems:e.subItems}]:[])).map((i,o)=>s.jsxs(m.Fragment,{children:[i.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:i.subHeading}),i.subItems.map(N=>p(N))]},o))})]},t)},I=e=>{(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),l(n=>!n)),e.key==="Escape"&&(e.preventDefault(),l(!1),c.setReference(null))};return s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:c.setReference,...w(),role:"button",tabIndex:-1,"aria-haspopup":"menu","aria-expanded":r,onKeyDown:I,children:b}),r&&s.jsx(d.FloatingOverlay,{children:s.jsx(d.FloatingPortal,{children:s.jsx(d.FloatingFocusManager,{context:f,modal:!1,children:s.jsx("div",{ref:c.setFloating,style:j,className:a.default["tedi-sidenav-dropdown"],role:"menu",...y(),children:g.map((e,n)=>s.jsxs("div",{className:a.default["tedi-sidenav-dropdown__group"],children:[e.subHeading&&s.jsx("div",{className:a.default["tedi-sidenav-dropdown__heading"],role:"presentation",children:e.subHeading}),s.jsx("ul",{className:a.default["tedi-sidenav-dropdown__list"],role:"menu",children:e.subItems.map(t=>p(t))})]},n))})})})})]})};exports.SideNavDropdown=S;

package/src/tedi/components/layout/sidenav/components/sidenav-dropdown/sidenav-dropdown.d.ts

@@ -4,10 +4,11 @@ type SideNavDropdownProps<C extends React.ElementType = 'a'> = {
     trigger: React.ReactNode;
     groups: Group<C>[];
     onOpenChange?: (isOpen: boolean) => void;
+    as?: C;
 };
 type Group<C extends React.ElementType> = {
     subHeading?: string;
     subItems: SideNavItemProps<C>[];
 };
-export declare const SideNavDropdown: <C extends React.ElementType = "a">({ trigger, groups, onOpenChange, }: SideNavDropdownProps<C>) => import("react/jsx-runtime").JSX.Element;
+export declare const SideNavDropdown: <C extends React.ElementType = "a">({ trigger, groups, onOpenChange, as, }: SideNavDropdownProps<C>) => import("react/jsx-runtime").JSX.Element;
 export {};