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

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

@@ -230,6 +230,14 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * Props to pass down to the underlying TextField (in 'single' mode) or MultiValueField (in 'multiple' mode). This allows for additional customization of the input field, such as adding custom styles, attributes, or event handlers.
      */
     inputProps?: DateTextFieldProps | DateMultiValueFieldProps;
+    /**
+     * Layout for the selected-date tags in `'multiple'` mode.
+     * - `'stack'` (default) — tags wrap onto multiple rows; the field grows in height.
+     * - `'row'` — tags stay on a single row; any that don't fit collapse into a
+     *   `+N` counter (measured from the available width).
+     * @default stack
+     */
+    tagsDirection?: 'stack' | 'row';
     /**
      * Open the calendar inside a modal instead of a floating popover. Useful
      * on narrow viewports where a popover overlaps the input itself. Mirrors
@@ -266,6 +274,13 @@ export interface DateFieldProps extends BreakpointSupport<DateFieldBreakpointPro
      * label.
      */
     disabledDateErrorMessage?: string;
+    /**
+     * Error message rendered below the input when the typed text cannot be parsed
+     * into a valid date for the current `mode`. Validation runs on blur so
+     * partially-typed input isn't flagged mid-typing. Falls back to the localised
+     * `dateField.invalidDateError` label.
+     */
+    invalidDateErrorMessage?: string;
 }
 export declare const DateField: React.ForwardRefExoticComponent<DateFieldProps & React.RefAttributes<TextFieldForwardRef>>;
 export {};