@tedi-design-system/react 19.2.0-rc.5 → 19.2.0-rc.7

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { FeedbackTextProps } from './feedback-text/feedback-text';
+import { FormLabelProps } from './form-label/form-label';
 export interface ChoiceInputProps {
     /**
      * ID property
@@ -53,6 +54,12 @@ export interface ChoiceInputProps {
      * not just a plain string.
      */
     tooltip?: React.ReactNode;
+    /**
+     * Additional props forwarded to the underlying `Label` component.
+     * Use `modifiers` to control how the label text wraps or breaks
+     * (e.g. `{ modifiers: 'nowrap' }`).
+     */
+    labelProps?: FormLabelProps['labelProps'];
     /**
      *  Input size
      */

package/src/tedi/components/form/date-field/date-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),A=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),I=require("../../../../../external/classnames/index.cjs.js"),a=require("react"),At=require("../../content/calendar/calendar.cjs.js"),Ft=require("../multi-value-field/multi-value-field.cjs.js"),kt=require("../textfield/textfield.cjs.js"),D=require("./date-field.module.scss.cjs.js"),v=require("./date-field-helpers.cjs.js"),vt=require("./date-picker-modal/date-picker-modal.cjs.js"),Pt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),wt=require("../../../providers/label-provider/use-labels.cjs.js"),Nt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),pe=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Et=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),z=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Ot=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),He=a.forwardRef((P,w)=>{const{getCurrentBreakpointProps:Ye}=Pt.useBreakpointProps(P.defaultServerBreakpoint),{getLabel:X}=wt.useLabels(),{useNativePicker:Ue=!1,enableCalendar:g=!0,calendarTrigger:T="button",numberOfMonths:J,clearable:ge=!0}=Ye(P),{id:he,mode:s="single",label:be,selected:j,onSelect:i,disabled:N,disabledMatchers:E,placeholder:We,className:Ge,formatDate:c,required:S,showOutsideDays:ye=!0,parseDate:K,monthYearSelectType:De,minYear:_e,maxYear:xe,dayStatus:Me,tagsDirection:ze,showNavigation:Ce=!0,selectionLevel:O="days",initialView:L,locale:Ae=Nt.et,localeCode:$="et-EE",initialMonth:H,closeOnSelect:Xe,footer:Fe,defaultValue:Y,minDate:Q,maxDate:Z,disablePast:ke,disableFuture:ve,shouldDisableMonth:ee,shouldDisableYear:te,readOnly:R,availableDays:Pe,inputProps:n,modal:re=!1,modalProps:Je,modalTitle:Ke,disabledDateErrorMessage:Qe=X("dateField.disabledDateError"),invalidDateErrorMessage:Ze=X("dateField.invalidDateError"),useNativePicker:Rt,enableCalendar:Vt,calendarTrigger:qt,numberOfMonths:Bt,defaultServerBreakpoint:It,sm:Tt,md:jt,lg:St,xl:Lt,xxl:$t,...we}=P,f=Ue&&s==="single",Ne=pe.default(P.defaultServerBreakpoint),F=pe.isBreakpointBelow(Ne,"md"),[et,h]=a.useState(j??Y),[b,V]=a.useState(!1),[ae,Ee]=a.useState(!1),[tt,Oe]=a.useState(L??O),[ie,_]=a.useState(""),[Re,m]=a.useState(!1),[Ve,U]=a.useState(!1),y=g&&!f&&!R&&(re===!0||typeof re=="string"&&pe.isBreakpointBelow(Ne,re)),qe=F&&!y&&typeof J=="number"&&J>1?1:J,{current:u}=a.useRef("selected"in P),o=u?j:et,ne=a.useRef(null),Be=a.useRef(null),rt=a.useCallback(e=>{ne.current=e,typeof w=="function"?w(e):w&&(w.current=e)},[w]),at=e=>{if(!e)return"";const t=e.getFullYear(),r=String(e.getMonth()+1).padStart(2,"0"),l=String(e.getDate()).padStart(2,"0");return`${t}-${r}-${l}`},it=f&&o instanceof Date?at(o):"",se=a.useCallback((e,t)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((r,l)=>r.getTime()-l.getTime())[0]:e&&typeof e=="object"&&"from"in e&&e.from instanceof Date?e.from:e&&typeof e=="object"&&"to"in e&&e.to instanceof Date?e.to:t??new Date,[]),[nt,oe]=a.useState(()=>se(o,H));a.useEffect(()=>{b||oe(se(o,H))},[o,H,b,se]),a.useEffect(()=>{b&&Oe(L??O)},[b,O,L]),a.useEffect(()=>{u&&h(j)},[j,u]);const x=a.useMemo(()=>new Intl.DateTimeFormat($,{day:"2-digit",month:"2-digit",year:"numeric"}),[$]),M=a.useCallback(e=>{if(!e)return"";if(e instanceof Date)return x.format(e);if(Array.isArray(e))return e.map(t=>x.format(t)).join(", ");if(e.from){const t=x.format(e.from);return e.to?`${t} – ${x.format(e.to)}`:t}return""},[x]),le=Xe??s==="single",Ie=s==="multiple"&&Array.isArray(o)?o.map((e,t)=>({id:t,label:c?c(e):M(e),date:e})):[],W=a.useMemo(()=>{const e=[];return N&&(Array.isArray(N)?e.push(...N):e.push(N)),E&&(Array.isArray(E)?e.push(...E):e.push(E)),Q&&e.push({before:Q}),Z&&e.push({after:Z}),ke&&e.push({before:new Date}),ve&&e.push({after:new Date}),ee&&e.push(t=>ee(t)),te&&e.push(t=>te(t)),e},[N,E,Q,Z,ke,ve,ee,te]),k=a.useCallback(e=>Ot.dateMatchModifiers(e,W),[W]),st=(e,t,r,l)=>{const d=s==="range"?v.resolveRangeSelection(e,o,t):e;if(m(!1),u||h(d),i==null||i(d,t,r,l),d){const C=c?c(d):M(d);_(C)}else _("");le&&V(!1)},ot=e=>{if(k(e))return;const t=s==="range"?{from:e,to:void 0}:s==="multiple"?[...Array.isArray(o)?o:[],e]:e;m(!1),u||h(t),i==null||i(t,e,{},{});const r=c?c(t):M(t);_(r),le&&V(!1)},lt=a.useMemo(()=>{const e=v.getLocaleDateParts(x),t=new RegExp(`^${v.buildDateRegexSource(e)}$`),{fieldOrder:r}=e;return l=>{const d=l.match(t);if(!d)return;const C={};r.forEach((Mt,Ct)=>{C[Mt]=Number(d[Ct+1])});const{day:ce,month:fe,year:me}=C;if(ce===void 0||fe===void 0||me===void 0)return;const B=new Date(me,fe-1,ce);if(!(isNaN(B.getTime())||B.getFullYear()!==me||B.getMonth()!==fe-1||B.getDate()!==ce))return B}},[x]),Te=e=>(K??(s==="single"?lt:()=>{}))(e),je=e=>s==="single"&&e instanceof Date||s==="multiple"&&Array.isArray(e)||s==="range"&&!!e&&!Array.isArray(e)&&"from"in e,dt=e=>{if(_(e),U(!1),e.trim()===""){m(!1),o!==void 0&&(u||h(void 0),i==null||i(void 0,void 0,{},{}));return}const t=Te(e);if(!je(t)){m(!1);return}const l=t&&!Array.isArray(t)&&"from"in t?t:null;if(t instanceof Date&&k(t)||Array.isArray(t)&&t.some(C=>C instanceof Date&&k(C))||!!l&&(l.from&&k(l.from)||l.to&&k(l.to))){m(!0);return}m(!1),u||h(t),i==null||i(t,t,{},{}),t instanceof Date&&oe(t),le&&V(!1)},ut=()=>{if(ie.trim()===""){U(!1);return}if(!K&&s!=="single"){U(!1);return}U(!je(Te(ie)))};a.useEffect(()=>{if(u){const e=c?c(o):M(o);_(e)}},[o,u,c,M]),a.useEffect(()=>{if(!u&&Y){const e=c?c(Y):M(Y);_(e)}},[]);const ct=A.useFloating({open:b,onOpenChange:V,placement:T==="input"?"bottom-start":"bottom-end",middleware:[z.offset(v.CALENDAR_POPOVER_OFFSET),z.flip(),z.shift({padding:v.CALENDAR_POPOVER_PADDING}),z.size({padding:v.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){const r=t.floating;if(r.style.width="",r.style.maxWidth="",r.style.overflowX="",F)return;r.style.width="max-content",r.getBoundingClientRect().width>e&&(r.style.width="min-content",r.style.maxWidth=`${e}px`)}})],whileElementsMounted:Et.autoUpdate}),{refs:q,context:G,x:ft,y:mt,strategy:pt}=ct,gt=A.useClick(G),Se=A.useInteractions([...g&&!f&&T==="input"&&!y?[gt]:[],A.useDismiss(G,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),A.useRole(G,{role:"dialog"})]);a.useEffect(()=>{var t,r;const e=s==="multiple"?((t=Be.current)==null?void 0:t.wrapper)??null:((r=ne.current)==null?void 0:r.input)??null;q.setPositionReference(e??q.reference.current)},[s,b,q]);const ht=()=>{var t;const e=(t=ne.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function")try{e.showPicker();return}catch{}e.focus()}},de=()=>{!g||R||(f?ht():y?Ee(!0):V(e=>!e))},bt=e=>{if(m(!1),u||h(e),i==null||i(e,e,{},{}),e){const t=c?c(e):M(e);_(t)}else _("")},yt=e=>{if(!e){m(!1),u||h(void 0),i==null||i(void 0,void 0,{},{});return}const[t,r,l]=e.split("-").map(Number);if(!t||!r||!l)return;const d=new Date(t,r-1,l);if(!Number.isNaN(d.getTime())){if(k(d)){m(!0);return}m(!1),u||h(d),i==null||i(d,d,{},{})}},Dt=Se.getReferenceProps(y&&T==="input"?{onClick:()=>de()}:void 0),{role:Ht,"aria-expanded":Yt,"aria-haspopup":Ut,"aria-controls":_t,...xt}=Dt,Le=y?void 0:_t,ue=X("dateField.openCalendar"),$e={"aria-label":ue,"aria-expanded":y?ae:b,"aria-haspopup":"dialog","aria-controls":Le};return p.jsxs(p.Fragment,{children:[p.jsx("div",{className:I.default(D.default["tedi-date-field__container"],Ge),...xt,ref:q.setReference,children:s==="multiple"?p.jsx(Ft.MultiValueField,{...n,ref:Be,id:he,label:be,tagsDirection:ze,values:Ie.map(e=>e.label),icon:"calendar_today",onIconClick:de,iconButtonProps:g?$e:{"aria-label":ue},isClearable:ge,required:S,onChange:e=>{if(!Array.isArray(o))return;const t=Ie.filter(r=>e.includes(r.label)).map(r=>r.date);u||h(t),i==null||i(t,{},{},{})},className:I.default(D.default["tedi-date-field__textfield"],{[D.default["tedi-date-field__icon--disabled"]]:!g||R})}):p.jsx(kt.TextField,{...n,ref:rt,id:he,label:be,readOnly:R,value:f?it:ie,placeholder:We,icon:"calendar_today",isClearable:ge,onIconClick:de,iconButtonProps:g&&!f?$e:{"aria-label":ue},onChange:e=>f?yt(e):dt(e),onBlur:e=>{var t;f||ut(),(t=n==null?void 0:n.onBlur)==null||t.call(n,e)},required:S,invalid:Re||Ve||(n==null?void 0:n.invalid),helper:(()=>{const e=n==null?void 0:n.helper,t=Re?Qe:Ve?Ze:null,r=t?{text:t,type:"error"}:null;return r?e?Array.isArray(e)?[...e,r]:[e,r]:r:e})(),className:I.default(D.default["tedi-date-field__textfield"],{[D.default["tedi-date-field__textfield--disabled"]]:n==null?void 0:n.disabled,[D.default["tedi-date-field__icon--disabled"]]:!g||R}),input:{...n==null?void 0:n.input,...!K&&s!=="single"&&{readOnly:!0},...f&&{type:"date"},...g&&!f&&T==="input"?{role:"combobox","aria-haspopup":"dialog","aria-expanded":y?ae:b,"aria-controls":Le}:{}}})}),y&&p.jsx(vt.DatePickerModal,{open:ae,onOpenChange:Ee,value:o,onConfirm:bt,mode:s,numberOfMonths:qe,locale:Ae,localeCode:$,showOutsideDays:ye,disabledMatchers:W,required:S,availableDays:Pe,footer:Fe,monthYearSelectType:De,minYear:_e,maxYear:xe,dayStatus:Me,showNavigation:Ce,selectionLevel:O,initialView:L,initialMonth:H,modalProps:Je,...we,title:Ke}),g&&!f&&!y&&p.jsx(A.FloatingPortal,{children:b&&p.jsx(A.FloatingFocusManager,{context:G,modal:!1,initialFocus:-1,children:p.jsx("div",{ref:q.setFloating,className:I.default({[D.default["tedi-date-field__calendar-popover--fullwidth"]]:F}),...Se.getFloatingProps({style:{position:pt,top:mt??0,left:F?0:ft??0,right:F?0:void 0}}),children:p.jsx(At.Calendar,{...we,numberOfMonths:qe,view:tt,selectionLevel:O,currentMonth:nt,setCurrentMonth:oe,setView:Oe,mode:s,value:o,locale:Ae,localeCode:$,showOutsideDays:ye,disabledMatchers:W,required:S,availableDays:Pe,footer:Fe,monthYearSelectType:De,minYear:_e,maxYear:xe,dayStatus:Me,showNavigation:Ce,handleSelect:st,applyValue:ot,className:I.default(D.default["tedi-date-field__calendar"],{[D.default["tedi-date-field__calendar--fullwidth"]]:F})})})})})]})});He.displayName="DateField";exports.DateField=He;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),A=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),I=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),Ft=require("../../content/calendar/calendar.cjs.js"),kt=require("../multi-value-field/multi-value-field.cjs.js"),vt=require("../textfield/textfield.cjs.js"),D=require("./date-field.module.scss.cjs.js"),v=require("./date-field-helpers.cjs.js"),Pt=require("./date-picker-modal/date-picker-modal.cjs.js"),wt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Nt=require("../../../providers/label-provider/use-labels.cjs.js"),Et=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),pe=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Ot=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),z=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),Rt=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),Ye=i.forwardRef((P,w)=>{const{getCurrentBreakpointProps:Ue}=wt.useBreakpointProps(P.defaultServerBreakpoint),{getLabel:X}=Nt.useLabels(),{useNativePicker:We=!1,enableCalendar:g=!0,calendarTrigger:T="button",numberOfMonths:J,clearable:ge=!0}=Ue(P),{id:he,mode:s="single",label:be,labelProps:ye,selected:j,onSelect:n,disabled:N,disabledMatchers:E,placeholder:Ge,className:ze,formatDate:c,required:S,showOutsideDays:De=!0,parseDate:K,monthYearSelectType:_e,minYear:xe,maxYear:Me,dayStatus:Ce,tagsDirection:Xe,showNavigation:Ae=!0,selectionLevel:O="days",initialView:L,locale:Fe=Et.et,localeCode:$="et-EE",initialMonth:H,closeOnSelect:Je,footer:ke,defaultValue:Y,minDate:Q,maxDate:Z,disablePast:ve,disableFuture:Pe,shouldDisableMonth:ee,shouldDisableYear:te,readOnly:R,availableDays:we,inputProps:r,modal:ae=!1,modalProps:Ke,modalTitle:Qe,disabledDateErrorMessage:Ze=X("dateField.disabledDateError"),invalidDateErrorMessage:et=X("dateField.invalidDateError"),useNativePicker:Vt,enableCalendar:qt,calendarTrigger:Bt,numberOfMonths:It,defaultServerBreakpoint:Tt,sm:jt,md:St,lg:Lt,xl:$t,xxl:Ht,...Ne}=P,f=We&&s==="single",Ee=pe.default(P.defaultServerBreakpoint),F=pe.isBreakpointBelow(Ee,"md"),[tt,h]=i.useState(j??Y),[b,V]=i.useState(!1),[re,Oe]=i.useState(!1),[at,Re]=i.useState(L??O),[ie,_]=i.useState(""),[Ve,m]=i.useState(!1),[qe,U]=i.useState(!1),y=g&&!f&&!R&&(ae===!0||typeof ae=="string"&&pe.isBreakpointBelow(Ee,ae)),Be=F&&!y&&typeof J=="number"&&J>1?1:J,{current:u}=i.useRef("selected"in P),o=u?j:tt,ne=i.useRef(null),Ie=i.useRef(null),rt=i.useCallback(e=>{ne.current=e,typeof w=="function"?w(e):w&&(w.current=e)},[w]),it=e=>{if(!e)return"";const t=e.getFullYear(),a=String(e.getMonth()+1).padStart(2,"0"),l=String(e.getDate()).padStart(2,"0");return`${t}-${a}-${l}`},nt=f&&o instanceof Date?it(o):"",se=i.useCallback((e,t)=>e instanceof Date?e:Array.isArray(e)&&e.length>0?[...e].sort((a,l)=>a.getTime()-l.getTime())[0]:e&&typeof e=="object"&&"from"in e&&e.from instanceof Date?e.from:e&&typeof e=="object"&&"to"in e&&e.to instanceof Date?e.to:t??new Date,[]),[st,oe]=i.useState(()=>se(o,H));i.useEffect(()=>{b||oe(se(o,H))},[o,H,b,se]),i.useEffect(()=>{b&&Re(L??O)},[b,O,L]),i.useEffect(()=>{u&&h(j)},[j,u]);const x=i.useMemo(()=>new Intl.DateTimeFormat($,{day:"2-digit",month:"2-digit",year:"numeric"}),[$]),M=i.useCallback(e=>{if(!e)return"";if(e instanceof Date)return x.format(e);if(Array.isArray(e))return e.map(t=>x.format(t)).join(", ");if(e.from){const t=x.format(e.from);return e.to?`${t} – ${x.format(e.to)}`:t}return""},[x]),le=Je??s==="single",Te=s==="multiple"&&Array.isArray(o)?o.map((e,t)=>({id:t,label:c?c(e):M(e),date:e})):[],W=i.useMemo(()=>{const e=[];return N&&(Array.isArray(N)?e.push(...N):e.push(N)),E&&(Array.isArray(E)?e.push(...E):e.push(E)),Q&&e.push({before:Q}),Z&&e.push({after:Z}),ve&&e.push({before:new Date}),Pe&&e.push({after:new Date}),ee&&e.push(t=>ee(t)),te&&e.push(t=>te(t)),e},[N,E,Q,Z,ve,Pe,ee,te]),k=i.useCallback(e=>Rt.dateMatchModifiers(e,W),[W]),ot=(e,t,a,l)=>{const d=s==="range"?v.resolveRangeSelection(e,o,t):e;if(m(!1),u||h(d),n==null||n(d,t,a,l),d){const C=c?c(d):M(d);_(C)}else _("");le&&V(!1)},lt=e=>{if(k(e))return;const t=s==="range"?{from:e,to:void 0}:s==="multiple"?[...Array.isArray(o)?o:[],e]:e;m(!1),u||h(t),n==null||n(t,e,{},{});const a=c?c(t):M(t);_(a),le&&V(!1)},dt=i.useMemo(()=>{const e=v.getLocaleDateParts(x),t=new RegExp(`^${v.buildDateRegexSource(e)}$`),{fieldOrder:a}=e;return l=>{const d=l.match(t);if(!d)return;const C={};a.forEach((Ct,At)=>{C[Ct]=Number(d[At+1])});const{day:ce,month:fe,year:me}=C;if(ce===void 0||fe===void 0||me===void 0)return;const B=new Date(me,fe-1,ce);if(!(isNaN(B.getTime())||B.getFullYear()!==me||B.getMonth()!==fe-1||B.getDate()!==ce))return B}},[x]),je=e=>(K??(s==="single"?dt:()=>{}))(e),Se=e=>s==="single"&&e instanceof Date||s==="multiple"&&Array.isArray(e)||s==="range"&&!!e&&!Array.isArray(e)&&"from"in e,ut=e=>{if(_(e),U(!1),e.trim()===""){m(!1),o!==void 0&&(u||h(void 0),n==null||n(void 0,void 0,{},{}));return}const t=je(e);if(!Se(t)){m(!1);return}const l=t&&!Array.isArray(t)&&"from"in t?t:null;if(t instanceof Date&&k(t)||Array.isArray(t)&&t.some(C=>C instanceof Date&&k(C))||!!l&&(l.from&&k(l.from)||l.to&&k(l.to))){m(!0);return}m(!1),u||h(t),n==null||n(t,t,{},{}),t instanceof Date&&oe(t),le&&V(!1)},ct=()=>{if(ie.trim()===""){U(!1);return}if(!K&&s!=="single"){U(!1);return}U(!Se(je(ie)))};i.useEffect(()=>{if(u){const e=c?c(o):M(o);_(e)}},[o,u,c,M]),i.useEffect(()=>{if(!u&&Y){const e=c?c(Y):M(Y);_(e)}},[]);const ft=A.useFloating({open:b,onOpenChange:V,placement:T==="input"?"bottom-start":"bottom-end",middleware:[z.offset(v.CALENDAR_POPOVER_OFFSET),z.flip(),z.shift({padding:v.CALENDAR_POPOVER_PADDING}),z.size({padding:v.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){const a=t.floating;if(a.style.width="",a.style.maxWidth="",a.style.overflowX="",F)return;a.style.width="max-content",a.getBoundingClientRect().width>e&&(a.style.width="min-content",a.style.maxWidth=`${e}px`)}})],whileElementsMounted:Ot.autoUpdate}),{refs:q,context:G,x:mt,y:pt,strategy:gt}=ft,ht=A.useClick(G),Le=A.useInteractions([...g&&!f&&T==="input"&&!y?[ht]:[],A.useDismiss(G,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),A.useRole(G,{role:"dialog"})]);i.useEffect(()=>{var t,a;const e=s==="multiple"?((t=Ie.current)==null?void 0:t.wrapper)??null:((a=ne.current)==null?void 0:a.input)??null;q.setPositionReference(e??q.reference.current)},[s,b,q]);const bt=()=>{var t;const e=(t=ne.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function")try{e.showPicker();return}catch{}e.focus()}},de=()=>{!g||R||(f?bt():y?Oe(!0):V(e=>!e))},yt=e=>{if(m(!1),u||h(e),n==null||n(e,e,{},{}),e){const t=c?c(e):M(e);_(t)}else _("")},Dt=e=>{if(!e){m(!1),u||h(void 0),n==null||n(void 0,void 0,{},{});return}const[t,a,l]=e.split("-").map(Number);if(!t||!a||!l)return;const d=new Date(t,a-1,l);if(!Number.isNaN(d.getTime())){if(k(d)){m(!0);return}m(!1),u||h(d),n==null||n(d,d,{},{})}},_t=Le.getReferenceProps(y&&T==="input"?{onClick:()=>de()}:void 0),{role:Yt,"aria-expanded":Ut,"aria-haspopup":Wt,"aria-controls":xt,...Mt}=_t,$e=y?void 0:xt,ue=X("dateField.openCalendar"),He={"aria-label":ue,"aria-expanded":y?re:b,"aria-haspopup":"dialog","aria-controls":$e};return p.jsxs(p.Fragment,{children:[p.jsx("div",{className:I.default(D.default["tedi-date-field__container"],ze),...Mt,ref:q.setReference,children:s==="multiple"?p.jsx(kt.MultiValueField,{...r,ref:Ie,id:he,label:be,labelProps:ye??(r==null?void 0:r.labelProps),tagsDirection:Xe,values:Te.map(e=>e.label),icon:"calendar_today",onIconClick:de,iconButtonProps:g?He:{"aria-label":ue},isClearable:ge,required:S,onChange:e=>{if(!Array.isArray(o))return;const t=Te.filter(a=>e.includes(a.label)).map(a=>a.date);u||h(t),n==null||n(t,{},{},{})},className:I.default(D.default["tedi-date-field__textfield"],{[D.default["tedi-date-field__icon--disabled"]]:!g||R})}):p.jsx(vt.TextField,{...r,ref:rt,id:he,label:be,labelProps:ye??(r==null?void 0:r.labelProps),readOnly:R,value:f?nt:ie,placeholder:Ge,icon:"calendar_today",isClearable:ge,onIconClick:de,iconButtonProps:g&&!f?He:{"aria-label":ue},onChange:e=>f?Dt(e):ut(e),onBlur:e=>{var t;f||ct(),(t=r==null?void 0:r.onBlur)==null||t.call(r,e)},required:S,invalid:Ve||qe||(r==null?void 0:r.invalid),helper:(()=>{const e=r==null?void 0:r.helper,t=Ve?Ze:qe?et:null,a=t?{text:t,type:"error"}:null;return a?e?Array.isArray(e)?[...e,a]:[e,a]:a:e})(),className:I.default(D.default["tedi-date-field__textfield"],{[D.default["tedi-date-field__textfield--disabled"]]:r==null?void 0:r.disabled,[D.default["tedi-date-field__icon--disabled"]]:!g||R}),input:{...r==null?void 0:r.input,...!K&&s!=="single"&&{readOnly:!0},...f&&{type:"date"},...g&&!f&&T==="input"?{role:"combobox","aria-haspopup":"dialog","aria-expanded":y?re:b,"aria-controls":$e}:{}}})}),y&&p.jsx(Pt.DatePickerModal,{open:re,onOpenChange:Oe,value:o,onConfirm:yt,mode:s,numberOfMonths:Be,locale:Fe,localeCode:$,showOutsideDays:De,disabledMatchers:W,required:S,availableDays:we,footer:ke,monthYearSelectType:_e,minYear:xe,maxYear:Me,dayStatus:Ce,showNavigation:Ae,selectionLevel:O,initialView:L,initialMonth:H,modalProps:Ke,...Ne,title:Qe}),g&&!f&&!y&&p.jsx(A.FloatingPortal,{children:b&&p.jsx(A.FloatingFocusManager,{context:G,modal:!1,initialFocus:-1,children:p.jsx("div",{ref:q.setFloating,className:I.default({[D.default["tedi-date-field__calendar-popover--fullwidth"]]:F}),...Le.getFloatingProps({style:{position:gt,top:pt??0,left:F?0:mt??0,right:F?0:void 0}}),children:p.jsx(Ft.Calendar,{...Ne,numberOfMonths:Be,view:at,selectionLevel:O,currentMonth:st,setCurrentMonth:oe,setView:Re,mode:s,value:o,locale:Fe,localeCode:$,showOutsideDays:De,disabledMatchers:W,required:S,availableDays:we,footer:ke,monthYearSelectType:_e,minYear:xe,maxYear:Me,dayStatus:Ce,showNavigation:Ae,handleSelect:ot,applyValue:lt,className:I.default(D.default["tedi-date-field__calendar"],{[D.default["tedi-date-field__calendar--fullwidth"]]:F})})})})})]})});Ye.displayName="DateField";exports.DateField=Ye;

package/src/tedi/components/form/date-field/date-field.d.ts

@@ -54,6 +54,11 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * Field label. Required for accessibility.
      */
     label: string;
+    /**
+     * Props forwarded to the field's label (e.g. `{ modifiers: 'nowrap' }` to control
+     * how a long label wraps). Breakpoint keys are supported for responsive wrapping.
+     */
+    labelProps?: TextFieldProps['labelProps'];
     /**
      * Determines the selection mode of the calendar.
      * - `'single'` (default) – only one date can be selected. The `selected` prop should be a `Date` object or `undefined`.