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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),D=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),P=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),Te=require("../../buttons/button/button.cjs.js"),jt=require("../../content/calendar/calendar.cjs.js"),y=require("../date-field/date-field-helpers.cjs.js"),Ft=require("../textfield/textfield.cjs.js"),ke=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),Tt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),kt=require("../../../providers/label-provider/use-labels.cjs.js"),Me=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Mt=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Ct=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),G=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),St=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),f=s=>String(s).padStart(2,"0"),_=s=>s?`${f(s.getHours())}:${f(s.getMinutes())}`:"00:00",b=(s,c)=>{const[U,h]=c.split(":"),w=Number(U),R=Number(h),E=new Date(s);return E.setHours(Number.isFinite(w)?w:0,Number.isFinite(R)?R:0,0,0),E},ne=s=>s instanceof Date,Pt=s=>s?`${s.getFullYear()}-${f(s.getMonth()+1)}-${f(s.getDate())}T${f(s.getHours())}:${f(s.getMinutes())}`:"",wt=s=>{if(!s)return;const c=new Date(s);return isNaN(c.getTime())?void 0:c},Rt=s=>!s||ne(s)?{}:s,Et=s=>ne(s)?s:void 0,Ce=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:U}=Tt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:h}=kt.useLabels(),w=Me.default(s.defaultServerBreakpoint),R=Me.isBreakpointBelow(w,"md"),{layout:E="side-by-side",useNativePicker:Se=!1,monthYearSelectType:Pe="dropdown",timeGridVariant:we,showOutsideDays:Re=!0,availableTimes:v,timeHeading:z=h("dateTimeField.timeHeading"),clearable:Ee=!0}=U(s),{id:Ve,label:qe,placeholder:Ae,className:Oe,value:le,defaultValue:$e,onChange:W,required:de,readOnly:Le,disabled:V,minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me,disabledMatchers:j,stepMinutes:fe=15,initialMonth:J,locale:Be=Mt.et,localeCode:F="et-EE",selectTimeLabel:He=h("dateTimeField.selectTime"),backLabel:Ie=h("dateTimeField.back"),mode:Ye="single",selectionLevel:Ge="days",minYear:Ue,maxYear:ze,inputProps:l,disabledDateErrorMessage:We=h("dateField.disabledDateError")}=s,d=Ye==="range",p=Se&&!d,T=d?"side-by-side":E,he=we??(T==="multi-step"?"radio":"button"),pe=le!==void 0,[Je,Ke]=n.useState($e),x=pe?le:Je,u=d?Rt(x):{},m=d?void 0:Et(x),[N,K]=n.useState(!1),[Qe,Q]=n.useState("date"),[Xe,ge]=n.useState("days"),X=d?u.from:m,[Ze,q]=n.useState(()=>X??J??new Date),_e=n.useRef(X);_e.current=X,n.useEffect(()=>{N||(Q("date"),ge("days"),q(_e.current??J??new Date))},[N,J]);const A=n.useMemo(()=>new Intl.DateTimeFormat(F,{day:"2-digit",month:"2-digit",year:"numeric"}),[F]),et=n.useMemo(()=>new Intl.DateTimeFormat(F,{day:"2-digit",month:"2-digit",year:"2-digit"}),[F]),O=n.useCallback(e=>e?`${A.format(e)} ${f(e.getHours())}:${f(e.getMinutes())}`:"",[A]),$=n.useCallback(e=>{if(!e)return"";if(ne(e))return O(e);const t=O(e.from),r=O(e.to);return!t&&!r?"":r?t?`${t} – ${r}`:r:t},[O]),tt=n.useMemo(()=>{const e=y.getLocaleDateParts(A),{fieldOrder:t}=e,r=new RegExp(`^${y.buildDateRegexSource(e)}\\s+(\\d{2}):(\\d{2})$`);return Nt=>{const Y=Nt.trim().match(r);if(!Y)return;const ye={};t.forEach((Dt,yt)=>{ye[Dt]=Number(Y[yt+1])});const je=Number(Y[t.length+1]),Fe=Number(Y[t.length+2]),{day:ae,month:se,year:re}=ye;if(ae===void 0||se===void 0||re===void 0||je>23||Fe>59)return;const S=new Date(re,se-1,ae,je,Fe,0,0);if(!(isNaN(S.getTime())||S.getFullYear()!==re||S.getMonth()!==se-1||S.getDate()!==ae))return S}},[A]),[it,Z]=n.useState(()=>$(x)),[be,g]=n.useState(!1);n.useEffect(()=>{Z($(x))},[x,$]);const at=D.useFloating({open:N,onOpenChange:K,placement:"bottom-end",middleware:[G.offset(y.CALENDAR_POPOVER_OFFSET),G.flip(),G.shift({padding:y.CALENDAR_POPOVER_PADDING}),G.size({padding:y.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){t.floating.style.maxWidth=`${e}px`}})],whileElementsMounted:Ct.autoUpdate}),{refs:ee,context:L,x:st,y:rt,strategy:nt}=at,lt=D.useInteractions([D.useDismiss(L,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),D.useRole(L,{role:"dialog"})]),B=n.useRef(null),dt=n.useCallback(e=>{B.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]);n.useEffect(()=>{var e;(e=B.current)!=null&&e.inner&&ee.setReference(B.current.inner)},[ee]);const o=e=>{pe||Ke(e),W==null||W(e),Z($(e))},k=n.useCallback(e=>{if(v)return typeof v=="function"?v(e??new Date):v},[v]),M=n.useCallback((e,t)=>{const r=k(e);return!r||r.length===0||r.includes(t)?t:r[0]},[k]),ot=e=>{if(d){const t=e;if(!t||!t.from&&!t.to){o(void 0);return}const r={};t.from&&(r.from=b(t.from,M(t.from,_(u.from)))),t.to&&(r.to=b(t.to,M(t.to,_(u.to)))),o(r);return}e instanceof Date?o(b(e,M(e,_(m)))):e===void 0&&o(void 0)},ct=e=>{if(d){o({from:b(e,M(e,_(u.from)))});return}o(b(e,M(e,_(m))))},ut=e=>{const t=m??new Date;o(b(t,e)),T==="multi-step"&&k(t)&&K(!1)},mt=e=>t=>{const r=u[e]??u.from??new Date;o({...u,[e]:b(r,t)})},H=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me}),...j?Array.isArray(j)?j:[j]:[]],[oe,ce,ue,me,j]),ve=n.useCallback(e=>St.dateMatchModifiers(e,H),[H]),ft=e=>{if(Z(e),e===""){g(!1),o(void 0);return}if(p){const r=wt(e);if(!r){g(!1);return}if(ve(r)){g(!0);return}g(!1),o(r),q(r);return}if(d)return;const t=tt(e);if(!t){g(!1);return}if(ve(t)){g(!0);return}g(!1),o(t),q(t)},ht=()=>{var t;const e=(t=B.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},pt=()=>{if(!V){if(p){ht();return}K(e=>!e)}},gt=T==="multi-step"?i.jsx("div",{className:a.default["tedi-date-time-field__select-time-wrapper"],children:i.jsx(Te.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>Q("time"),children:He})}):void 0,te=i.jsx(jt.Calendar,{view:Xe,setView:ge,selectionLevel:Ge,currentMonth:Ze,setCurrentMonth:q,mode:d?"range":"single",value:d?u:m,numberOfMonths:d&&!R?2:1,locale:Be,localeCode:F,showOutsideDays:Re,monthYearSelectType:Pe,minYear:Ue,maxYear:ze,disabledMatchers:H.length?H:void 0,required:de,handleSelect:ot,applyValue:ct,footer:gt,className:P.default(a.default["tedi-date-time-field__calendar"],T==="side-by-side"&&a.default["tedi-date-time-field__calendar--split"])}),ie=k(m),_t=!ie||ie.length===0,xe=i.jsx(ke.TimePicker,{value:_(m),stepMinutes:fe,availableTimes:ie,gridVariant:he,onChange:ut,className:P.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:_t})}),Ne=e=>{const t=k(u[e]),r=!t||t.length===0;return i.jsx(ke.TimePicker,{value:_(u[e]),stepMinutes:fe,availableTimes:t,gridVariant:he,onChange:mt(e),className:P.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:r})})},C=l==null?void 0:l.helper,I=be?{text:We,type:"error"}:null,bt=I?C?Array.isArray(C)?[...C,I]:[C,I]:I:C,De=h("dateField.openCalendar"),vt=p?{"aria-label":De}:{"aria-label":De,"aria-haspopup":"dialog","aria-expanded":N,"aria-controls":N?L.floatingId:void 0},xt={...l,id:Ve,label:qe,value:p?Pt(m):it,placeholder:Ae,readOnly:Le||!p&&!!v&&!!x,icon:"calendar_today",isClearable:Ee,required:de,disabled:V,invalid:be||(l==null?void 0:l.invalid),helper:bt,onIconClick:pt,iconButtonProps:vt,onChange:ft,className:P.default(a.default["tedi-date-time-field__textfield"],l==null?void 0:l.className,{[a.default["tedi-date-time-field__icon--disabled"]]:V}),input:{...l==null?void 0:l.input,type:p?"datetime-local":"text"}};return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:P.default(a.default["tedi-date-time-field__container"],Oe),children:i.jsx(Ft.TextField,{ref:dt,...xt})}),!p&&i.jsx(D.FloatingPortal,{children:N&&!V&&i.jsx(D.FloatingFocusManager,{context:L,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:ee.setFloating,className:a.default["tedi-date-time-field__popup"],...lt.getFloatingProps({style:{position:nt,top:rt??0,left:st??0}}),children:d?i.jsxs("div",{className:a.default["tedi-date-time-field__range"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__range-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__range-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-times"],children:[i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("from")})]}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("to")})]})]})]}):T==="side-by-side"?i.jsxs("div",{className:a.default["tedi-date-time-field__split"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__split-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__split-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__split-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:xe})]})]}):Qe==="date"?te:i.jsxs("div",{className:a.default["tedi-date-time-field__time-step"],children:[i.jsxs("header",{className:a.default["tedi-date-time-field__time-header"],children:[i.jsx(Te.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>Q("date"),children:Ie}),i.jsx("span",{className:a.default["tedi-date-time-field__time-date"],children:et.format(m??new Date)})]}),i.jsx("div",{className:a.default["tedi-date-time-field__time-body"],children:xe})]})})})})]})});Ce.displayName="DateTimeField";exports.DateTimeField=Ce;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),D=require("../../../../../external/@floating-ui/react/dist/floating-ui.react.cjs.js"),S=require("../../../../../external/classnames/index.cjs.js"),n=require("react"),Te=require("../../buttons/button/button.cjs.js"),Ft=require("../../content/calendar/calendar.cjs.js"),y=require("../date-field/date-field-helpers.cjs.js"),Tt=require("../textfield/textfield.cjs.js"),ke=require("../time-picker/time-picker.cjs.js"),a=require("./date-time-field.module.scss.cjs.js"),kt=require("../../../helpers/hooks/use-breakpoint-props.cjs.js"),Mt=require("../../../providers/label-provider/use-labels.cjs.js"),Me=require("../../../helpers/hooks/use-breakpoint.cjs.js"),Ct=require("../../../../../external/react-day-picker/dist/esm/locale/et.cjs.js"),Pt=require("../../../../../external/@floating-ui/dom/dist/floating-ui.dom.cjs.js"),G=require("../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.cjs.js"),St=require("../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.cjs.js"),f=s=>String(s).padStart(2,"0"),_=s=>s?`${f(s.getHours())}:${f(s.getMinutes())}`:"00:00",b=(s,c)=>{const[U,h]=c.split(":"),w=Number(U),R=Number(h),E=new Date(s);return E.setHours(Number.isFinite(w)?w:0,Number.isFinite(R)?R:0,0,0),E},ne=s=>s instanceof Date,wt=s=>s?`${s.getFullYear()}-${f(s.getMonth()+1)}-${f(s.getDate())}T${f(s.getHours())}:${f(s.getMinutes())}`:"",Rt=s=>{if(!s)return;const c=new Date(s);return isNaN(c.getTime())?void 0:c},Et=s=>!s||ne(s)?{}:s,Vt=s=>ne(s)?s:void 0,Ce=n.forwardRef((s,c)=>{const{getCurrentBreakpointProps:U}=kt.useBreakpointProps(s.defaultServerBreakpoint),{getLabel:h}=Mt.useLabels(),w=Me.default(s.defaultServerBreakpoint),R=Me.isBreakpointBelow(w,"md"),{layout:E="side-by-side",useNativePicker:Pe=!1,monthYearSelectType:Se="dropdown",timeGridVariant:we,showOutsideDays:Re=!0,availableTimes:v,timeHeading:z=h("dateTimeField.timeHeading"),clearable:Ee=!0}=U(s),{id:Ve,label:qe,labelProps:Ae,placeholder:Oe,className:$e,value:le,defaultValue:Le,onChange:W,required:de,readOnly:Be,disabled:V,minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me,disabledMatchers:j,stepMinutes:fe=15,initialMonth:J,locale:He=Ct.et,localeCode:F="et-EE",selectTimeLabel:Ie=h("dateTimeField.selectTime"),backLabel:Ye=h("dateTimeField.back"),mode:Ge="single",selectionLevel:Ue="days",minYear:ze,maxYear:We,inputProps:l,disabledDateErrorMessage:Je=h("dateField.disabledDateError")}=s,d=Ge==="range",g=Pe&&!d,T=d?"side-by-side":E,he=we??(T==="multi-step"?"radio":"button"),ge=le!==void 0,[Ke,Qe]=n.useState(Le),x=ge?le:Ke,u=d?Et(x):{},m=d?void 0:Vt(x),[N,K]=n.useState(!1),[Xe,Q]=n.useState("date"),[Ze,pe]=n.useState("days"),X=d?u.from:m,[et,q]=n.useState(()=>X??J??new Date),_e=n.useRef(X);_e.current=X,n.useEffect(()=>{N||(Q("date"),pe("days"),q(_e.current??J??new Date))},[N,J]);const A=n.useMemo(()=>new Intl.DateTimeFormat(F,{day:"2-digit",month:"2-digit",year:"numeric"}),[F]),tt=n.useMemo(()=>new Intl.DateTimeFormat(F,{day:"2-digit",month:"2-digit",year:"2-digit"}),[F]),O=n.useCallback(e=>e?`${A.format(e)} ${f(e.getHours())}:${f(e.getMinutes())}`:"",[A]),$=n.useCallback(e=>{if(!e)return"";if(ne(e))return O(e);const t=O(e.from),r=O(e.to);return!t&&!r?"":r?t?`${t} – ${r}`:r:t},[O]),it=n.useMemo(()=>{const e=y.getLocaleDateParts(A),{fieldOrder:t}=e,r=new RegExp(`^${y.buildDateRegexSource(e)}\\s+(\\d{2}):(\\d{2})$`);return Dt=>{const Y=Dt.trim().match(r);if(!Y)return;const ye={};t.forEach((yt,jt)=>{ye[yt]=Number(Y[jt+1])});const je=Number(Y[t.length+1]),Fe=Number(Y[t.length+2]),{day:ae,month:se,year:re}=ye;if(ae===void 0||se===void 0||re===void 0||je>23||Fe>59)return;const P=new Date(re,se-1,ae,je,Fe,0,0);if(!(isNaN(P.getTime())||P.getFullYear()!==re||P.getMonth()!==se-1||P.getDate()!==ae))return P}},[A]),[at,Z]=n.useState(()=>$(x)),[be,p]=n.useState(!1);n.useEffect(()=>{Z($(x))},[x,$]);const st=D.useFloating({open:N,onOpenChange:K,placement:"bottom-end",middleware:[G.offset(y.CALENDAR_POPOVER_OFFSET),G.flip(),G.shift({padding:y.CALENDAR_POPOVER_PADDING}),G.size({padding:y.CALENDAR_POPOVER_PADDING,apply({availableWidth:e,elements:t}){t.floating.style.maxWidth=`${e}px`}})],whileElementsMounted:Pt.autoUpdate}),{refs:ee,context:L,x:rt,y:nt,strategy:lt}=st,dt=D.useInteractions([D.useDismiss(L,{outsidePress:e=>{const t=e.target;return!(t!=null&&t.closest('[role="menu"], [role="listbox"]'))}}),D.useRole(L,{role:"dialog"})]),B=n.useRef(null),ot=n.useCallback(e=>{B.current=e,typeof c=="function"?c(e):c&&(c.current=e)},[c]);n.useEffect(()=>{var e;(e=B.current)!=null&&e.inner&&ee.setReference(B.current.inner)},[ee]);const o=e=>{ge||Qe(e),W==null||W(e),Z($(e))},k=n.useCallback(e=>{if(v)return typeof v=="function"?v(e??new Date):v},[v]),M=n.useCallback((e,t)=>{const r=k(e);return!r||r.length===0||r.includes(t)?t:r[0]},[k]),ct=e=>{if(d){const t=e;if(!t||!t.from&&!t.to){o(void 0);return}const r={};t.from&&(r.from=b(t.from,M(t.from,_(u.from)))),t.to&&(r.to=b(t.to,M(t.to,_(u.to)))),o(r);return}e instanceof Date?o(b(e,M(e,_(m)))):e===void 0&&o(void 0)},ut=e=>{if(d){o({from:b(e,M(e,_(u.from)))});return}o(b(e,M(e,_(m))))},mt=e=>{const t=m??new Date;o(b(t,e)),T==="multi-step"&&k(t)&&K(!1)},ft=e=>t=>{const r=u[e]??u.from??new Date;o({...u,[e]:b(r,t)})},H=n.useMemo(()=>[...y.buildDisabledMatchers({minDate:oe,maxDate:ce,disablePast:ue,disableFuture:me}),...j?Array.isArray(j)?j:[j]:[]],[oe,ce,ue,me,j]),ve=n.useCallback(e=>St.dateMatchModifiers(e,H),[H]),ht=e=>{if(Z(e),e===""){p(!1),o(void 0);return}if(g){const r=Rt(e);if(!r){p(!1);return}if(ve(r)){p(!0);return}p(!1),o(r),q(r);return}if(d)return;const t=it(e);if(!t){p(!1);return}if(ve(t)){p(!0);return}p(!1),o(t),q(t)},gt=()=>{var t;const e=(t=B.current)==null?void 0:t.input;if(e){if(typeof e.showPicker=="function"){e.showPicker();return}e.focus()}},pt=()=>{if(!V){if(g){gt();return}K(e=>!e)}},_t=T==="multi-step"?i.jsx("div",{className:a.default["tedi-date-time-field__select-time-wrapper"],children:i.jsx(Te.Button,{type:"button",visualType:"link",size:"small",iconLeft:"schedule",onClick:()=>Q("time"),children:Ie})}):void 0,te=i.jsx(Ft.Calendar,{view:Ze,setView:pe,selectionLevel:Ue,currentMonth:et,setCurrentMonth:q,mode:d?"range":"single",value:d?u:m,numberOfMonths:d&&!R?2:1,locale:He,localeCode:F,showOutsideDays:Re,monthYearSelectType:Se,minYear:ze,maxYear:We,disabledMatchers:H.length?H:void 0,required:de,handleSelect:ct,applyValue:ut,footer:_t,className:S.default(a.default["tedi-date-time-field__calendar"],T==="side-by-side"&&a.default["tedi-date-time-field__calendar--split"])}),ie=k(m),bt=!ie||ie.length===0,xe=i.jsx(ke.TimePicker,{value:_(m),stepMinutes:fe,availableTimes:ie,gridVariant:he,onChange:mt,className:S.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:bt})}),Ne=e=>{const t=k(u[e]),r=!t||t.length===0;return i.jsx(ke.TimePicker,{value:_(u[e]),stepMinutes:fe,availableTimes:t,gridVariant:he,onChange:ft(e),className:S.default(a.default["tedi-date-time-field__time-picker"],{[a.default["tedi-date-time-field__time-picker--wheel"]]:r})})},C=l==null?void 0:l.helper,I=be?{text:Je,type:"error"}:null,vt=I?C?Array.isArray(C)?[...C,I]:[C,I]:I:C,De=h("dateField.openCalendar"),xt=g?{"aria-label":De}:{"aria-label":De,"aria-haspopup":"dialog","aria-expanded":N,"aria-controls":N?L.floatingId:void 0},Nt={...l,id:Ve,label:qe,labelProps:Ae??(l==null?void 0:l.labelProps),value:g?wt(m):at,placeholder:Oe,readOnly:Be||!g&&!!v&&!!x,icon:"calendar_today",isClearable:Ee,required:de,disabled:V,invalid:be||(l==null?void 0:l.invalid),helper:vt,onIconClick:pt,iconButtonProps:xt,onChange:ht,className:S.default(a.default["tedi-date-time-field__textfield"],l==null?void 0:l.className,{[a.default["tedi-date-time-field__icon--disabled"]]:V}),input:{...l==null?void 0:l.input,type:g?"datetime-local":"text"}};return i.jsxs(i.Fragment,{children:[i.jsx("div",{className:S.default(a.default["tedi-date-time-field__container"],$e),children:i.jsx(Tt.TextField,{ref:ot,...Nt})}),!g&&i.jsx(D.FloatingPortal,{children:N&&!V&&i.jsx(D.FloatingFocusManager,{context:L,modal:!1,initialFocus:-1,children:i.jsx("div",{ref:ee.setFloating,className:a.default["tedi-date-time-field__popup"],...dt.getFloatingProps({style:{position:lt,top:nt??0,left:rt??0}}),children:d?i.jsxs("div",{className:a.default["tedi-date-time-field__range"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__range-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__range-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-times"],children:[i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("from")})]}),i.jsxs("div",{className:a.default["tedi-date-time-field__range-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:Ne("to")})]})]})]}):T==="side-by-side"?i.jsxs("div",{className:a.default["tedi-date-time-field__split"],children:[te,i.jsx("div",{className:a.default["tedi-date-time-field__split-separator"],"aria-hidden":"true",children:i.jsx("div",{className:a.default["tedi-date-time-field__split-separator-line"]})}),i.jsxs("div",{className:a.default["tedi-date-time-field__split-time"],children:[i.jsx("div",{className:a.default["tedi-date-time-field__split-time-header"],children:i.jsx("span",{className:a.default["tedi-date-time-field__split-heading"],children:z})}),i.jsx("div",{className:a.default["tedi-date-time-field__split-time-body"],children:xe})]})]}):Xe==="date"?te:i.jsxs("div",{className:a.default["tedi-date-time-field__time-step"],children:[i.jsxs("header",{className:a.default["tedi-date-time-field__time-header"],children:[i.jsx(Te.Button,{type:"button",visualType:"link",size:"small",iconLeft:"arrow_back",onClick:()=>Q("date"),children:Ye}),i.jsx("span",{className:a.default["tedi-date-time-field__time-date"],children:tt.format(m??new Date)})]}),i.jsx("div",{className:a.default["tedi-date-time-field__time-body"],children:xe})]})})})})]})});Ce.displayName="DateTimeField";exports.DateTimeField=Ce;

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

@@ -83,6 +83,11 @@ export interface DateTimeFieldProps extends BreakpointSupport<DateTimeFieldBreak
      * 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'];
     /**
      * Placeholder shown in the input when no value is selected.
      */

package/src/tedi/components/form/date-time-field/date-time-field.es.js

@@ -1,33 +1,33 @@
-import { jsx as r, jsxs as f, Fragment as kt } from "react/jsx-runtime";
-import { useFloating as Mt, useInteractions as wt, useDismiss as xt, useRole as Ct, FloatingPortal as Rt, FloatingFocusManager as Vt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
+import { jsx as r, jsxs as f, Fragment as Mt } from "react/jsx-runtime";
+import { useFloating as wt, useInteractions as xt, useDismiss as Ct, useRole as Rt, FloatingPortal as Vt, FloatingFocusManager as Pt } from "../../../../../external/@floating-ui/react/dist/floating-ui.react.es.js";
 import V from "../../../../../external/classnames/index.es.js";
 import we, { useState as _, useRef as Et, useEffect as se, useMemo as W, useCallback as F } from "react";
 import { Button as xe } from "../../buttons/button/button.es.js";
-import { Calendar as Pt } from "../../content/calendar/calendar.es.js";
-import { getLocaleDateParts as St, buildDateRegexSource as $t, buildDisabledMatchers as At, CALENDAR_POPOVER_OFFSET as Ot, CALENDAR_POPOVER_PADDING as Ce } from "../date-field/date-field-helpers.es.js";
-import { TextField as Lt } from "../textfield/textfield.es.js";
+import { Calendar as St } from "../../content/calendar/calendar.es.js";
+import { getLocaleDateParts as $t, buildDateRegexSource as At, buildDisabledMatchers as Ot, CALENDAR_POPOVER_OFFSET as Lt, CALENDAR_POPOVER_PADDING as Ce } from "../date-field/date-field-helpers.es.js";
+import { TextField as Ht } from "../textfield/textfield.es.js";
 import { TimePicker as Re } from "../time-picker/time-picker.es.js";
 import i from "./date-time-field.module.scss.es.js";
-import { useBreakpointProps as Ht } from "../../../helpers/hooks/use-breakpoint-props.es.js";
-import { useLabels as It } from "../../../providers/label-provider/use-labels.es.js";
-import Bt, { isBreakpointBelow as Yt } from "../../../helpers/hooks/use-breakpoint.es.js";
-import { et as zt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
-import { autoUpdate as Gt } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
-import { offset as Wt, flip as jt, shift as qt, size as Ut } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
-import { dateMatchModifiers as Jt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
+import { useBreakpointProps as It } from "../../../helpers/hooks/use-breakpoint-props.es.js";
+import { useLabels as Bt } from "../../../providers/label-provider/use-labels.es.js";
+import Yt, { isBreakpointBelow as zt } from "../../../helpers/hooks/use-breakpoint.es.js";
+import { et as Gt } from "../../../../../external/react-day-picker/dist/esm/locale/et.es.js";
+import { autoUpdate as Wt } from "../../../../../external/@floating-ui/dom/dist/floating-ui.dom.es.js";
+import { offset as jt, flip as qt, shift as Ut, size as Jt } from "../../../../../external/@floating-ui/react-dom/dist/floating-ui.react-dom.es.js";
+import { dateMatchModifiers as Kt } from "../../../../../external/react-day-picker/dist/esm/utils/dateMatchModifiers.es.js";
 const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:${u(a.getMinutes())}` : "00:00", v = (a, d) => {
-  const [j, p] = d.split(":"), E = Number(j), P = Number(p), S = new Date(a);
-  return S.setHours(Number.isFinite(E) ? E : 0, Number.isFinite(P) ? P : 0, 0, 0), S;
-}, le = (a) => a instanceof Date, Kt = (a) => a ? `${a.getFullYear()}-${u(a.getMonth() + 1)}-${u(a.getDate())}T${u(a.getHours())}:${u(a.getMinutes())}` : "", Qt = (a) => {
+  const [j, p] = d.split(":"), P = Number(j), E = Number(p), S = new Date(a);
+  return S.setHours(Number.isFinite(P) ? P : 0, Number.isFinite(E) ? E : 0, 0, 0), S;
+}, le = (a) => a instanceof Date, Qt = (a) => a ? `${a.getFullYear()}-${u(a.getMonth() + 1)}-${u(a.getDate())}T${u(a.getHours())}:${u(a.getMinutes())}` : "", Xt = (a) => {
   if (!a) return;
   const d = new Date(a);
   return isNaN(d.getTime()) ? void 0 : d;
-}, Xt = (a) => !a || le(a) ? {} : a, Zt = (a) => le(a) ? a : void 0, ei = we.forwardRef((a, d) => {
-  const { getCurrentBreakpointProps: j } = Ht(a.defaultServerBreakpoint), { getLabel: p } = It(), E = Bt(a.defaultServerBreakpoint), P = Yt(E, "md"), {
+}, Zt = (a) => !a || le(a) ? {} : a, ei = (a) => le(a) ? a : void 0, ti = we.forwardRef((a, d) => {
+  const { getCurrentBreakpointProps: j } = It(a.defaultServerBreakpoint), { getLabel: p } = Bt(), P = Yt(a.defaultServerBreakpoint), E = zt(P, "md"), {
     layout: S = "side-by-side",
     useNativePicker: Ve = !1,
-    monthYearSelectType: Ee = "dropdown",
-    timeGridVariant: Pe,
+    monthYearSelectType: Pe = "dropdown",
+    timeGridVariant: Ee,
     showOutsideDays: Se = !0,
     availableTimes: N,
     timeHeading: q = p("dateTimeField.timeHeading"),
@@ -35,13 +35,14 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
   } = j(a), {
     id: Ae,
     label: Oe,
-    placeholder: Le,
-    className: He,
+    labelProps: Le,
+    placeholder: He,
+    className: Ie,
     value: oe,
-    defaultValue: Ie,
+    defaultValue: Be,
     onChange: U,
     required: de,
-    readOnly: Be,
+    readOnly: Ye,
     disabled: $,
     minDate: ce,
     maxDate: me,
@@ -50,17 +51,17 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
     disabledMatchers: T,
     stepMinutes: pe = 15,
     initialMonth: J,
-    locale: Ye = zt,
+    locale: ze = Gt,
     localeCode: k = "et-EE",
-    selectTimeLabel: ze = p("dateTimeField.selectTime"),
-    backLabel: Ge = p("dateTimeField.back"),
-    mode: We = "single",
-    selectionLevel: je = "days",
-    minYear: qe,
-    maxYear: Ue,
+    selectTimeLabel: Ge = p("dateTimeField.selectTime"),
+    backLabel: We = p("dateTimeField.back"),
+    mode: je = "single",
+    selectionLevel: qe = "days",
+    minYear: Ue,
+    maxYear: Je,
     inputProps: s,
-    disabledDateErrorMessage: Je = p("dateField.disabledDateError")
-  } = a, l = We === "range", h = Ve && !l, M = l ? "side-by-side" : S, he = Pe ?? (M === "multi-step" ? "radio" : "button"), ge = oe !== void 0, [Ke, Qe] = _(Ie), y = ge ? oe : Ke, c = l ? Xt(y) : {}, m = l ? void 0 : Zt(y), [D, K] = _(!1), [Xe, Q] = _("date"), [Ze, _e] = _("days"), X = l ? c.from : m, [et, A] = _(() => X ?? J ?? /* @__PURE__ */ new Date()), be = Et(X);
+    disabledDateErrorMessage: Ke = p("dateField.disabledDateError")
+  } = a, l = je === "range", h = Ve && !l, M = l ? "side-by-side" : S, he = Ee ?? (M === "multi-step" ? "radio" : "button"), ge = oe !== void 0, [Qe, Xe] = _(Be), y = ge ? oe : Qe, c = l ? Zt(y) : {}, m = l ? void 0 : ei(y), [D, K] = _(!1), [Ze, Q] = _("date"), [et, _e] = _("days"), X = l ? c.from : m, [tt, A] = _(() => X ?? J ?? /* @__PURE__ */ new Date()), be = Et(X);
   be.current = X, se(() => {
     D || (Q("date"), _e("days"), A(be.current ?? J ?? /* @__PURE__ */ new Date()));
   }, [D, J]);
@@ -71,7 +72,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       year: "numeric"
     }),
     [k]
-  ), tt = W(
+  ), it = W(
     () => new Intl.DateTimeFormat(k, {
       day: "2-digit",
       month: "2-digit",
@@ -89,14 +90,14 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       return !t && !n ? "" : n ? t ? `${t} – ${n}` : n : t;
     },
     [L]
-  ), it = W(() => {
-    const e = St(O), { fieldOrder: t } = e, n = new RegExp(`^${$t(e)}\\s+(\\d{2}):(\\d{2})$`);
-    return (Dt) => {
-      const G = Dt.trim().match(n);
+  ), at = W(() => {
+    const e = $t(O), { fieldOrder: t } = e, n = new RegExp(`^${At(e)}\\s+(\\d{2}):(\\d{2})$`);
+    return (Ft) => {
+      const G = Ft.trim().match(n);
       if (!G) return;
       const Te = {};
-      t.forEach((Ft, Tt) => {
-        Te[Ft] = Number(G[Tt + 1]);
+      t.forEach((Tt, kt) => {
+        Te[Tt] = Number(G[kt + 1]);
       });
       const ke = Number(G[t.length + 1]), Me = Number(G[t.length + 2]), { day: ae, month: re, year: ne } = Te;
       if (ae === void 0 || re === void 0 || ne === void 0 || ke > 23 || Me > 59) return;
@@ -104,35 +105,35 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       if (!(isNaN(R.getTime()) || R.getFullYear() !== ne || R.getMonth() !== re - 1 || R.getDate() !== ae))
         return R;
     };
-  }, [O]), [at, Z] = _(() => H(y)), [ve, g] = _(!1);
+  }, [O]), [rt, Z] = _(() => H(y)), [ve, g] = _(!1);
   se(() => {
     Z(H(y));
   }, [y, H]);
-  const rt = Mt({
+  const nt = wt({
     open: D,
     onOpenChange: K,
     placement: "bottom-end",
     middleware: [
-      Wt(Ot),
-      jt(),
-      qt({ padding: Ce }),
-      Ut({
+      jt(Lt),
+      qt(),
+      Ut({ padding: Ce }),
+      Jt({
         padding: Ce,
         apply({ availableWidth: e, elements: t }) {
           t.floating.style.maxWidth = `${e}px`;
         }
       })
     ],
-    whileElementsMounted: Gt
-  }), { refs: ee, context: I, x: nt, y: st, strategy: lt } = rt, ot = wt([
-    xt(I, {
+    whileElementsMounted: Wt
+  }), { refs: ee, context: I, x: st, y: lt, strategy: ot } = nt, dt = xt([
+    Ct(I, {
       outsidePress: (e) => {
         const t = e.target;
         return !(t != null && t.closest('[role="menu"], [role="listbox"]'));
       }
     }),
-    Ct(I, { role: "dialog" })
-  ]), B = we.useRef(null), dt = F(
+    Rt(I, { role: "dialog" })
+  ]), B = we.useRef(null), ct = F(
     (e) => {
       B.current = e, typeof d == "function" ? d(e) : d && (d.current = e);
     },
@@ -143,7 +144,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
     (e = B.current) != null && e.inner && ee.setReference(B.current.inner);
   }, [ee]);
   const o = (e) => {
-    ge || Qe(e), U == null || U(e), Z(H(e));
+    ge || Xe(e), U == null || U(e), Z(H(e));
   }, w = F(
     (e) => {
       if (N)
@@ -156,7 +157,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       return !n || n.length === 0 || n.includes(t) ? t : n[0];
     },
     [w]
-  ), ct = (e) => {
+  ), mt = (e) => {
     if (l) {
       const t = e;
       if (!t || !t.from && !t.to) {
@@ -168,21 +169,21 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       return;
     }
     e instanceof Date ? o(v(e, x(e, b(m)))) : e === void 0 && o(void 0);
-  }, mt = (e) => {
+  }, ft = (e) => {
     if (l) {
       o({ from: v(e, x(e, b(c.from))) });
       return;
     }
     o(v(e, x(e, b(m))));
-  }, ft = (e) => {
+  }, ut = (e) => {
     const t = m ?? /* @__PURE__ */ new Date();
     o(v(t, e)), M === "multi-step" && w(t) && K(!1);
-  }, ut = (e) => (t) => {
+  }, pt = (e) => (t) => {
     const n = c[e] ?? c.from ?? /* @__PURE__ */ new Date();
     o({ ...c, [e]: v(n, t) });
   }, Y = W(
     () => [
-      ...At({
+      ...Ot({
         minDate: ce,
         maxDate: me,
         disablePast: fe,
@@ -192,15 +193,15 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
     ],
     [ce, me, fe, ue, T]
   ), Ne = F(
-    (e) => Jt(e, Y),
+    (e) => Kt(e, Y),
     [Y]
-  ), pt = (e) => {
+  ), ht = (e) => {
     if (Z(e), e === "") {
       g(!1), o(void 0);
       return;
     }
     if (h) {
-      const n = Qt(e);
+      const n = Xt(e);
       if (!n) {
         g(!1);
         return;
@@ -213,7 +214,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       return;
     }
     if (l) return;
-    const t = it(e);
+    const t = at(e);
     if (!t) {
       g(!1);
       return;
@@ -223,7 +224,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       return;
     }
     g(!1), o(t), A(t);
-  }, ht = () => {
+  }, gt = () => {
     var t;
     const e = (t = B.current) == null ? void 0 : t.input;
     if (e) {
@@ -233,51 +234,51 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       }
       e.focus();
     }
-  }, gt = () => {
+  }, _t = () => {
     if (!$) {
       if (h) {
-        ht();
+        gt();
         return;
       }
       K((e) => !e);
     }
-  }, _t = M === "multi-step" ? /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__select-time-wrapper"], children: /* @__PURE__ */ r(xe, { type: "button", visualType: "link", size: "small", iconLeft: "schedule", onClick: () => Q("time"), children: ze }) }) : void 0, te = /* @__PURE__ */ r(
-    Pt,
+  }, bt = M === "multi-step" ? /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__select-time-wrapper"], children: /* @__PURE__ */ r(xe, { type: "button", visualType: "link", size: "small", iconLeft: "schedule", onClick: () => Q("time"), children: Ge }) }) : void 0, te = /* @__PURE__ */ r(
+    St,
     {
-      view: Ze,
+      view: et,
       setView: _e,
-      selectionLevel: je,
-      currentMonth: et,
+      selectionLevel: qe,
+      currentMonth: tt,
       setCurrentMonth: A,
       mode: l ? "range" : "single",
       value: l ? c : m,
-      numberOfMonths: l && !P ? 2 : 1,
-      locale: Ye,
+      numberOfMonths: l && !E ? 2 : 1,
+      locale: ze,
       localeCode: k,
       showOutsideDays: Se,
-      monthYearSelectType: Ee,
-      minYear: qe,
-      maxYear: Ue,
+      monthYearSelectType: Pe,
+      minYear: Ue,
+      maxYear: Je,
       disabledMatchers: Y.length ? Y : void 0,
       required: de,
-      handleSelect: ct,
-      applyValue: mt,
-      footer: _t,
+      handleSelect: mt,
+      applyValue: ft,
+      footer: bt,
       className: V(
         i["tedi-date-time-field__calendar"],
         M === "side-by-side" && i["tedi-date-time-field__calendar--split"]
       )
     }
-  ), ie = w(m), bt = !ie || ie.length === 0, ye = /* @__PURE__ */ r(
+  ), ie = w(m), vt = !ie || ie.length === 0, ye = /* @__PURE__ */ r(
     Re,
     {
       value: b(m),
       stepMinutes: pe,
       availableTimes: ie,
       gridVariant: he,
-      onChange: ft,
+      onChange: ut,
       className: V(i["tedi-date-time-field__time-picker"], {
-        [i["tedi-date-time-field__time-picker--wheel"]]: bt
+        [i["tedi-date-time-field__time-picker--wheel"]]: vt
       })
     }
   ), De = (e) => {
@@ -289,33 +290,34 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
         stepMinutes: pe,
         availableTimes: t,
         gridVariant: he,
-        onChange: ut(e),
+        onChange: pt(e),
         className: V(i["tedi-date-time-field__time-picker"], {
           [i["tedi-date-time-field__time-picker--wheel"]]: n
         })
       }
     );
-  }, C = s == null ? void 0 : s.helper, z = ve ? { text: Je, type: "error" } : null, vt = z ? C ? Array.isArray(C) ? [...C, z] : [C, z] : z : C, Fe = p("dateField.openCalendar"), Nt = h ? { "aria-label": Fe } : {
+  }, C = s == null ? void 0 : s.helper, z = ve ? { text: Ke, type: "error" } : null, Nt = z ? C ? Array.isArray(C) ? [...C, z] : [C, z] : z : C, Fe = p("dateField.openCalendar"), yt = h ? { "aria-label": Fe } : {
     "aria-label": Fe,
     "aria-haspopup": "dialog",
     "aria-expanded": D,
     "aria-controls": D ? I.floatingId : void 0
-  }, yt = {
+  }, Dt = {
     ...s,
     id: Ae,
     label: Oe,
-    value: h ? Kt(m) : at,
-    placeholder: Le,
-    readOnly: Be || !h && !!N && !!y,
+    labelProps: Le ?? (s == null ? void 0 : s.labelProps),
+    value: h ? Qt(m) : rt,
+    placeholder: He,
+    readOnly: Ye || !h && !!N && !!y,
     icon: "calendar_today",
     isClearable: $e,
     required: de,
     disabled: $,
     invalid: ve || (s == null ? void 0 : s.invalid),
-    helper: vt,
-    onIconClick: gt,
-    iconButtonProps: Nt,
-    onChange: pt,
+    helper: Nt,
+    onIconClick: _t,
+    iconButtonProps: yt,
+    onChange: ht,
     className: V(i["tedi-date-time-field__textfield"], s == null ? void 0 : s.className, {
       [i["tedi-date-time-field__icon--disabled"]]: $
     }),
@@ -324,18 +326,18 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
       type: h ? "datetime-local" : "text"
     }
   };
-  return /* @__PURE__ */ f(kt, { children: [
-    /* @__PURE__ */ r("div", { className: V(i["tedi-date-time-field__container"], He), children: /* @__PURE__ */ r(Lt, { ref: dt, ...yt }) }),
-    !h && /* @__PURE__ */ r(Rt, { children: D && !$ && /* @__PURE__ */ r(Vt, { context: I, modal: !1, initialFocus: -1, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ f(Mt, { children: [
+    /* @__PURE__ */ r("div", { className: V(i["tedi-date-time-field__container"], Ie), children: /* @__PURE__ */ r(Ht, { ref: ct, ...Dt }) }),
+    !h && /* @__PURE__ */ r(Vt, { children: D && !$ && /* @__PURE__ */ r(Pt, { context: I, modal: !1, initialFocus: -1, children: /* @__PURE__ */ r(
       "div",
       {
         ref: ee.setFloating,
         className: i["tedi-date-time-field__popup"],
-        ...ot.getFloatingProps({
+        ...dt.getFloatingProps({
           style: {
-            position: lt,
-            top: st ?? 0,
-            left: nt ?? 0
+            position: ot,
+            top: lt ?? 0,
+            left: st ?? 0
           }
         }),
         children: l ? /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__range"], children: [
@@ -358,7 +360,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
             /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-header"], children: /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__split-heading"], children: q }) }),
             /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__split-time-body"], children: ye })
           ] })
-        ] }) : Xe === "date" ? te : /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__time-step"], children: [
+        ] }) : Ze === "date" ? te : /* @__PURE__ */ f("div", { className: i["tedi-date-time-field__time-step"], children: [
           /* @__PURE__ */ f("header", { className: i["tedi-date-time-field__time-header"], children: [
             /* @__PURE__ */ r(
               xe,
@@ -368,10 +370,10 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
                 size: "small",
                 iconLeft: "arrow_back",
                 onClick: () => Q("date"),
-                children: Ge
+                children: We
               }
             ),
-            /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__time-date"], children: tt.format(m ?? /* @__PURE__ */ new Date()) })
+            /* @__PURE__ */ r("span", { className: i["tedi-date-time-field__time-date"], children: it.format(m ?? /* @__PURE__ */ new Date()) })
           ] }),
           /* @__PURE__ */ r("div", { className: i["tedi-date-time-field__time-body"], children: ye })
         ] })
@@ -379,7 +381,7 @@ const u = (a) => String(a).padStart(2, "0"), b = (a) => a ? `${u(a.getHours())}:
     ) }) })
   ] });
 });
-ei.displayName = "DateTimeField";
+ti.displayName = "DateTimeField";
 export {
-  ei as DateTimeField
+  ti as DateTimeField
 };

package/src/tedi/components/form/form-label/form-label.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react/jsx-runtime"),f=require("../../../../../external/classnames/index.cjs.js"),p=require("react"),q=require("../../content/label/label.cjs.js"),e=require("./form-label.module.scss.cjs.js"),l=p.forwardRef(({label:t,hideLabel:a,required:o,id:s,renderWithoutLabel:u,size:r="default",className:d,tooltip:i,...m},n)=>{const c=f.default(e.default["tedi-form-label"],e.default[`tedi-form-label--${r}`],{[e.default[`tedi-form-label--hidden${a==="keep-space"?"-keep-space":""}`]]:a},d);return b.jsx(q.Label,{as:u?"span":"label",ref:n,className:c,htmlFor:s,required:o,isSmall:r==="small",tooltip:i,...m,children:t})});l.displayName="FormLabel";exports.FormLabel=l;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),p=require("../../../../../external/classnames/index.cjs.js"),q=require("react"),F=require("../../content/label/label.cjs.js"),e=require("./form-label.module.scss.cjs.js"),l=q.forwardRef(({label:t,hideLabel:a,required:o,id:s,renderWithoutLabel:u,size:r="default",className:d,tooltip:i,labelProps:m,...n},c)=>{const b=p.default(e.default["tedi-form-label"],e.default[`tedi-form-label--${r}`],{[e.default[`tedi-form-label--hidden${a==="keep-space"?"-keep-space":""}`]]:a},d);return f.jsx(F.Label,{as:u?"span":"label",ref:c,className:b,htmlFor:s,required:o,isSmall:r==="small",tooltip:i,...m,...n,children:t})});l.displayName="FormLabel";exports.FormLabel=l;exports.default=l;

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

@@ -1,3 +1,4 @@
+import { LabelModifierProps } from '../../content/label/label';
 export interface FormLabelProps {
     /**
      * The unique identifier for the input element that this label is associated with.
@@ -39,6 +40,14 @@ export interface FormLabelProps {
      * If provided, an info button with a tooltip will be rendered.
      */
     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' }`) so long labels don't distort the form layout.
+     * Breakpoint keys are supported for responsive wrapping
+     * (e.g. `{ modifiers: 'nowrap', sm: { modifiers: 'break-word' } }`).
+     */
+    labelProps?: LabelModifierProps;
 }
 export declare const FormLabel: import('react').ForwardRefExoticComponent<FormLabelProps & import('react').RefAttributes<HTMLLabelElement>>;
 export default FormLabel;

package/src/tedi/components/form/form-label/form-label.es.js

@@ -1,11 +1,11 @@
-import { jsx as b } from "react/jsx-runtime";
-import c from "../../../../../external/classnames/index.es.js";
-import { forwardRef as n } from "react";
-import { Label as F } from "../../content/label/label.es.js";
+import { jsx as c } from "react/jsx-runtime";
+import n from "../../../../../external/classnames/index.es.js";
+import { forwardRef as F } from "react";
+import { Label as u } from "../../content/label/label.es.js";
 import e from "./form-label.module.scss.es.js";
-const u = n(
-  ({ label: r, hideLabel: a, required: m, id: o, renderWithoutLabel: s, size: l = "default", className: t, tooltip: f, ...p }, i) => {
-    const d = c(
+const L = F(
+  ({ label: r, hideLabel: a, required: m, id: o, renderWithoutLabel: s, size: l = "default", className: t, tooltip: f, labelProps: p, ...i }, d) => {
+    const b = n(
       e["tedi-form-label"],
       e[`tedi-form-label--${l}`],
       {
@@ -13,24 +13,25 @@ const u = n(
       },
       t
     );
-    return /* @__PURE__ */ b(
-      F,
+    return /* @__PURE__ */ c(
+      u,
       {
         as: s ? "span" : "label",
-        ref: i,
-        className: d,
+        ref: d,
+        className: b,
         htmlFor: o,
         required: m,
         isSmall: l === "small",
         tooltip: f,
         ...p,
+        ...i,
         children: r
       }
     );
   }
 );
-u.displayName = "FormLabel";
+L.displayName = "FormLabel";
 export {
-  u as FormLabel,
-  u as default
+  L as FormLabel,
+  L as default
 };

package/src/tedi/components/form/multi-value-field/multi-value-field.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),O=require("../../base/icon/icon.cjs.js"),ee=require("../../buttons/closing-button/closing-button.cjs.js"),te=require("../../misc/separator/separator.cjs.js"),T=require("../../tags/tag/tag.cjs.js"),le=require("../form-label/form-label.cjs.js"),s=require("./multi-value-field.module.scss.cjs.js"),ie=require("../../../providers/label-provider/use-labels.cjs.js"),j=4,ne=44,N=i.forwardRef((z,F)=>{const{id:A,label:w,name:C,values:q,onChange:b,tagColor:y="primary",tagsDirection:P="stack",className:$,icon:o,onIconClick:V,iconButtonProps:m,isClearable:G=!0,showClearOnInteraction:X,required:S,disabled:p}=z,{getLabel:M}=ie.useLabels(),[B,D]=i.useState(q??[]),E=i.useRef(null),I=i.useRef(null);i.useImperativeHandle(F,()=>({input:I.current,wrapper:E.current}),[]);const a=q??B,r=P==="row",[f,H]=i.useState(null),J=i.useCallback(e=>H(e),[]),x=i.useRef(0),[d,g]=i.useState(null);i.useEffect(()=>{r&&g(null)},[a.length,r]),i.useEffect(()=>{if(!r||!f||typeof ResizeObserver>"u")return;const e=new ResizeObserver(t=>{var c;const n=((c=t[0])==null?void 0:c.contentRect.width)??0;n>0&&n!==x.current&&g(null)});return e.observe(f),()=>e.disconnect()},[r,f]),i.useLayoutEffect(()=>{if(!r||d!==null)return;const e=f;if(!e)return;const t=e.clientWidth;if(t===0)return;const n=e.querySelectorAll("[data-tedi-tag-index]");if(n.length===0)return;let c=0;for(let u=0;u<n.length;u++)c+=n[u].offsetWidth+(u>0?j:0);if(c<=t){x.current=t,g(n.length);return}let k=0,h=0;for(let u=0;u<n.length;u++){const Y=n[u].offsetWidth,Z=u<n.length-1?ne+j:0,L=k+Y+(h>0?j:0);if(L+Z<=t)k=L,h++;else break}h===0&&(h=1),x.current=t,g(h)},[r,d,a,f]);const W=e=>{D(e),b==null||b(e)},U=e=>{const t=a.filter((n,c)=>c!==e);W(t)},v=!p&&G&&a.length>0,K=()=>{W([])},R=r&&d!==null?Math.max(0,a.length-d):0,Q=()=>{if(!o)return null;const e=typeof o=="string"?{name:o}:o;return V?l.jsx("button",{...m,className:_.default(s.default["tedi-multi-value-field__icon-wrapper"],m==null?void 0:m.className),onClick:V,type:"button",children:l.jsx(O.Icon,{...e,size:18})}):l.jsx("div",{className:s.default["tedi-multi-value-field__icon-wrapper"],children:l.jsx(O.Icon,{...e,size:18})})};return l.jsxs("div",{className:_.default(s.default["tedi-multi-value-field"],$,{[s.default["tedi-multi-value-field--clear-on-interaction"]]:v&&X}),children:[w&&l.jsx(le.FormLabel,{id:A,label:w,required:S}),l.jsxs("div",{ref:E,className:_.default(s.default["tedi-multi-value-field__inner"],{[s.default["tedi-multi-value-field__inner--row"]]:r}),children:[a.length>0&&l.jsxs("div",{ref:J,className:_.default(s.default["tedi-multi-value-field__tags"],{[s.default["tedi-multi-value-field__tags--row"]]:r}),children:[a.map((e,t)=>r&&d!==null&&t>=d?null:l.jsx(T.Tag,{color:y,"data-tedi-tag-index":t,onClose:p?void 0:()=>U(t),children:e},`${e}-${t}`)),R>0&&l.jsxs(T.Tag,{color:y,className:s.default["tedi-multi-value-field__overflow-tag"],"aria-label":M("multi-value-field.hidden-count",R),children:["+",R]})]}),(v||o)&&l.jsxs("div",{className:s.default["tedi-multi-value-field__right-area"],children:[v&&l.jsx(ee.ClosingButton,{onClick:K,title:M("clear"),className:s.default["tedi-multi-value-field__clear-button"],iconSize:18}),v&&o&&l.jsx(te.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),o&&Q()]})]}),C&&l.jsx("input",{ref:I,type:"hidden",name:C,value:a.length?JSON.stringify(a):"",required:S,disabled:p})]})});N.displayName="MultiValueField";exports.MultiValueField=N;exports.default=N;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react/jsx-runtime"),_=require("../../../../../external/classnames/index.cjs.js"),i=require("react"),O=require("../../base/icon/icon.cjs.js"),te=require("../../buttons/closing-button/closing-button.cjs.js"),le=require("../../misc/separator/separator.cjs.js"),T=require("../../tags/tag/tag.cjs.js"),ie=require("../form-label/form-label.cjs.js"),s=require("./multi-value-field.module.scss.cjs.js"),ne=require("../../../providers/label-provider/use-labels.cjs.js"),j=4,se=44,N=i.forwardRef((z,F)=>{const{id:P,label:w,labelProps:A,name:C,values:q,onChange:b,tagColor:y="primary",tagsDirection:$="stack",className:G,icon:o,onIconClick:V,iconButtonProps:m,isClearable:X=!0,showClearOnInteraction:B,required:S,disabled:p}=z,{getLabel:M}=ne.useLabels(),[D,H]=i.useState(q??[]),E=i.useRef(null),I=i.useRef(null);i.useImperativeHandle(F,()=>({input:I.current,wrapper:E.current}),[]);const a=q??D,r=$==="row",[f,J]=i.useState(null),U=i.useCallback(e=>J(e),[]),x=i.useRef(0),[d,g]=i.useState(null);i.useEffect(()=>{r&&g(null)},[a.length,r]),i.useEffect(()=>{if(!r||!f||typeof ResizeObserver>"u")return;const e=new ResizeObserver(t=>{var c;const n=((c=t[0])==null?void 0:c.contentRect.width)??0;n>0&&n!==x.current&&g(null)});return e.observe(f),()=>e.disconnect()},[r,f]),i.useLayoutEffect(()=>{if(!r||d!==null)return;const e=f;if(!e)return;const t=e.clientWidth;if(t===0)return;const n=e.querySelectorAll("[data-tedi-tag-index]");if(n.length===0)return;let c=0;for(let u=0;u<n.length;u++)c+=n[u].offsetWidth+(u>0?j:0);if(c<=t){x.current=t,g(n.length);return}let k=0,h=0;for(let u=0;u<n.length;u++){const Z=n[u].offsetWidth,ee=u<n.length-1?se+j:0,L=k+Z+(h>0?j:0);if(L+ee<=t)k=L,h++;else break}h===0&&(h=1),x.current=t,g(h)},[r,d,a,f]);const W=e=>{H(e),b==null||b(e)},K=e=>{const t=a.filter((n,c)=>c!==e);W(t)},v=!p&&X&&a.length>0,Q=()=>{W([])},R=r&&d!==null?Math.max(0,a.length-d):0,Y=()=>{if(!o)return null;const e=typeof o=="string"?{name:o}:o;return V?l.jsx("button",{...m,className:_.default(s.default["tedi-multi-value-field__icon-wrapper"],m==null?void 0:m.className),onClick:V,type:"button",children:l.jsx(O.Icon,{...e,size:18})}):l.jsx("div",{className:s.default["tedi-multi-value-field__icon-wrapper"],children:l.jsx(O.Icon,{...e,size:18})})};return l.jsxs("div",{className:_.default(s.default["tedi-multi-value-field"],G,{[s.default["tedi-multi-value-field--clear-on-interaction"]]:v&&B}),children:[w&&l.jsx(ie.FormLabel,{id:P,label:w,required:S,labelProps:A}),l.jsxs("div",{ref:E,className:_.default(s.default["tedi-multi-value-field__inner"],{[s.default["tedi-multi-value-field__inner--row"]]:r}),children:[a.length>0&&l.jsxs("div",{ref:U,className:_.default(s.default["tedi-multi-value-field__tags"],{[s.default["tedi-multi-value-field__tags--row"]]:r}),children:[a.map((e,t)=>r&&d!==null&&t>=d?null:l.jsx(T.Tag,{color:y,"data-tedi-tag-index":t,onClose:p?void 0:()=>K(t),children:e},`${e}-${t}`)),R>0&&l.jsxs(T.Tag,{color:y,className:s.default["tedi-multi-value-field__overflow-tag"],"aria-label":M("multi-value-field.hidden-count",R),children:["+",R]})]}),(v||o)&&l.jsxs("div",{className:s.default["tedi-multi-value-field__right-area"],children:[v&&l.jsx(te.ClosingButton,{onClick:Q,title:M("clear"),className:s.default["tedi-multi-value-field__clear-button"],iconSize:18}),v&&o&&l.jsx(le.Separator,{color:"primary",axis:"vertical",height:1.5,spacing:.25}),o&&Y()]})]}),C&&l.jsx("input",{ref:I,type:"hidden",name:C,value:a.length?JSON.stringify(a):"",required:S,disabled:p})]})});N.displayName="MultiValueField";exports.MultiValueField=N;exports.default=N;

package/src/tedi/components/form/multi-value-field/multi-value-field.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { IconWithoutBackgroundProps } from '../../base/icon/icon';
+import { FormLabelProps } from '../form-label/form-label';
 export interface MultiValueFieldProps {
     /**
      * Unique identifier for the field. Used to associate the label with the input.
@@ -9,6 +10,12 @@ export interface MultiValueFieldProps {
      * Optional label displayed above the field.
      */
     label?: string;
+    /**
+     * 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'];
     /**
      * Name attribute for the hidden input. When provided, the field value
      * will be submitted as a JSON string in forms.