@tedi-design-system/react 19.2.0-rc.6 → 19.2.0-rc.8

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

@@ -10,7 +10,7 @@ import { useBreakpointProps as V } from "../../../../../helpers/hooks/use-breakp
 import { Col as q } from "../../../../layout/grid/col.es.js";
 const te = (n) => {
   const { getCurrentBreakpointProps: x } = V(n.defaultServerBreakpoint), {
-    id: o,
+    id: t,
     label: C,
     value: c,
     className: $,
@@ -19,7 +19,7 @@ const te = (n) => {
     colProps: B = u === "column" ? { width: 12 } : { width: "auto" },
     onChange: p,
     hideLabel: I,
-    helper: t,
+    helper: i,
     tooltip: j,
     type: h = "radio",
     variant: l = "default",
@@ -27,8 +27,8 @@ const te = (n) => {
     layout: E,
     showIndicator: k,
     justifyContent: b = "start"
-  } = x(n), { currentValue: a, name: y, onChange: f, inputType: F } = R.useContext(S), s = Array.isArray(a) ? a.includes(c) : c === a, G = a === void 0 ? n.defaultChecked : s, N = (i, g) => {
-    f == null || f(i, g), p == null || p(i, g);
+  } = x(n), { currentValue: a, name: y, onChange: f, inputType: F } = R.useContext(S), s = Array.isArray(a) ? a.includes(c) : c === a, G = a === void 0 ? n.defaultChecked : s, N = (o, g) => {
+    f == null || f(o, g), p == null || p(o, g);
   }, P = m(
     e[`tedi-choice-group-item--${E === "separated" ? "separated" : "segmented"}`],
     u && e[`tedi-choice-group-item--${u}`]
@@ -42,13 +42,13 @@ const te = (n) => {
     { [e["tedi-choice-group-item--checked"]]: s },
     { [`justify-content-${b}`]: b }
   );
-  return /* @__PURE__ */ d(q, { ...B, className: P, children: /* @__PURE__ */ d("div", { className: A, onClick: (i) => {
+  return /* @__PURE__ */ d(q, { ...B, className: P, children: /* @__PURE__ */ d("div", { className: A, onClick: (o) => {
     var _;
-    r || l !== "card" || i.target.closest("input, label") || (_ = document.getElementById(o)) == null || _.click();
+    r || l !== "card" || o.target.closest("input, label") || t && ((_ = document.getElementById(t)) == null || _.click());
   }, "aria-disabled": r || void 0, children: l === "default" || k ? /* @__PURE__ */ d(
     h === "radio" ? L : T,
     {
-      id: o,
+      id: t,
       label: C,
       value: c,
       name: y,
@@ -58,7 +58,7 @@ const te = (n) => {
       defaultChecked: G,
       onChange: N,
       hideLabel: I,
-      helper: t ? { ...t, className: m(e["tedi-choice-group-item__feedback-text"], t.className) } : void 0,
+      helper: i ? { ...i, className: m(e["tedi-choice-group-item__feedback-text"], i.className) } : void 0,
       tooltip: j,
       "data-testid": "choice-group-item-indicator"
     }
@@ -66,26 +66,26 @@ const te = (n) => {
     /* @__PURE__ */ d(
       "input",
       {
-        id: o,
+        id: t,
         value: c,
         name: y,
         type: F,
         disabled: r,
         checked: s,
         defaultChecked: a === void 0 ? n.defaultChecked : void 0,
-        onChange: (i) => {
-          N(c, i.target.checked);
+        onChange: (o) => {
+          N(c, o.target.checked);
         },
         className: "visually-hidden"
       }
     ),
-    /* @__PURE__ */ v("label", { htmlFor: o, className: e["tedi-choice-group-item__label"], children: [
+    /* @__PURE__ */ v("label", { htmlFor: t, className: e["tedi-choice-group-item__label"], children: [
       C,
-      t && /* @__PURE__ */ d(
+      i && /* @__PURE__ */ d(
         H,
         {
-          ...t,
-          id: t.id ?? `${o}-helper`,
+          ...i,
+          id: i.id ?? `${t}-helper`,
           className: e["tedi-choice-group-item__feedback-text"]
         }
       )

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

@@ -1,9 +1,12 @@
 import { FeedbackTextProps } from './feedback-text/feedback-text';
-export interface ChoiceInputProps {
+import { FormLabelProps } from './form-label/form-label';
+export type ChoiceInputVariant = 'default' | 'card';
+export type ChoiceInputCardVariant = 'primary' | 'secondary';
+interface ChoiceInputBaseProps {
     /**
-     * ID property
+     * ID property. When omitted a stable id is generated (useful inside `Radio.Group` / `Checkbox.Group`).
      */
-    id: string;
+    id?: string;
     /**
      * Label text
      */
@@ -17,9 +20,22 @@ export interface ChoiceInputProps {
      */
     value: string;
     /**
-     * name of the input
+     * name of the input. Provided automatically when rendered inside `Radio.Group` / `Checkbox.Group`.
      */
-    name: string;
+    name?: string;
+    /**
+     * Card colour variant. Only applies when `variant="card"`.
+     * @default primary
+     */
+    cardVariant?: ChoiceInputCardVariant;
+    /**
+     * Secondary description text shown under the label. Primarily used with `variant="card"`.
+     */
+    description?: React.ReactNode;
+    /**
+     * Leading icon (Material icon name) shown before the label. Primarily used with `variant="card"`.
+     */
+    icon?: string;
     /**
      * is the label hidden
      */
@@ -49,10 +65,11 @@ export interface ChoiceInputProps {
      */
     hover?: boolean;
     /**
-     * Provide content for tooltip. Accepts rich content (e.g. bold text, links),
-     * not just a plain string.
+     * Additional props forwarded to the underlying `Label` component.
+     * Use `modifiers` to control how the label text wraps or breaks
+     * (e.g. `{ modifiers: 'nowrap' }`).
      */
-    tooltip?: React.ReactNode;
+    labelProps?: FormLabelProps['labelProps'];
     /**
      *  Input size
      */
@@ -66,3 +83,24 @@ export interface ChoiceInputProps {
      */
     required?: boolean;
 }
+export interface ChoiceInputProps extends ChoiceInputBaseProps {
+    /**
+     * Visual variant.
+     * - `default` — standard indicator + label.
+     * - `card` — the whole control renders as a selectable card (indicator, label, optional icon/description).
+     * @default default
+     */
+    variant?: ChoiceInputVariant;
+    /**
+     * Provide content for tooltip. Accepts rich content (e.g. bold text, links),
+     * not just a plain string.
+     *
+     * Mutually exclusive with `variant="card"` — the card carries supplementary
+     * content through its `description` slot instead. Passing both logs a dev-time
+     * warning and the tooltip is ignored. (This is enforced at runtime rather than
+     * in the types: a discriminated union would reject the dynamic prop-spreading
+     * that `Checkbox.Group` / `Radio.Group` / `Table` rely on.)
+     */
+    tooltip?: React.ReactNode;
+}
+export {};

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`.