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

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

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

@@ -116,7 +116,7 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
     showOutsideDays?: boolean;
     /**
      * Custom date parsing function for user input. Receives the input string and should return a `Date`, an array of `Date`s, a `DateRange`, or `undefined` if the input is invalid or cleared.
-     * If not provided, the component will not allow manual input and will rely solely on the calendar picker for date selection.
+     * If not provided, `mode="single"` falls back to a built-in `dd.MM.yyyy` parser and stays typeable. `mode="multiple"` and `mode="range"` cannot be parsed automatically, so their input is read-only and dates are selected via the calendar only.
      */
     parseDate?: (value: string) => Date | Date[] | DateRange | undefined;
     /**

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

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