@progress/kendo-react-dateinputs 14.5.0-develop.14 → 14.5.0-develop.15

package/datepicker/DatePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const it=require("react"),t=require("prop-types"),st=require("@progress/kendo-react-popup"),j=require("@progress/kendo-date-math"),u=require("@progress/kendo-react-common"),ct=require("@progress/kendo-svg-icons"),dt=require("../dateinput/DateInput.js"),ft=require("../calendar/components/Calendar.js"),r=require("../utils.js"),U=require("../messages/index.js"),mt=require("@progress/kendo-react-intl"),gt=require("./ToggleButton.js"),pt=require("../hooks/usePickerFloatingLabel.js"),bt=require("@progress/kendo-react-layout"),ht=require("../common/AdaptiveMode.js");function vt(n){const D=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const f in n)if(f!=="default"){const S=Object.getOwnPropertyDescriptor(n,f);Object.defineProperty(D,f,S.get?S:{enumerable:!0,get:()=>n[f]})}}return D.default=n,Object.freeze(D)}const o=vt(it),H=o.forwardRef((n,D)=>{const f=u.useId(n.id),S=mt.useLocalization(),C=u.useAdaptiveModeContext(),{defaultShow:me=l.defaultShow,defaultValue:ge=l.defaultValue,dateInput:pe=l.dateInput,calendar:be=l.calendar,toggleButton:he=l.toggleButton,popup:ve=l.popup,disabled:p=l.disabled,format:we=l.format,max:k=l.max,min:P=l.min,popupSettings:O=l.popupSettings,tabIndex:ye=l.tabIndex,weekNumber:De=l.weekNumber,validityStyles:Y=l.validityStyles,size:B=l.size,rounded:E=l.rounded,fillMode:x=l.fillMode,autoFocus:Ce=l.autoFocus,show:$,autoSwitchParts:ke,autoSwitchKeys:Pe,twoDigitYearMax:Oe,ariaLabel:Me,adaptive:wt,adaptiveTitle:Re=n.label||void 0,adaptiveSubtitle:Se,formatPlaceholder:Ie,inputAttributes:_e,validationMessage:X,visited:yt,value:q,touched:Dt,modified:Ct,_adaptiveMode:kt=C,valid:Z,focusedDate:Te,id:Be,ariaLabelledBy:Ee,ariaDescribedBy:xe,placeholder:qe,onChange:G,onOpen:J,onClose:Q,...ee}=u.usePropsContext(fe,n),N=()=>{if(u.canUseDOM)return m.current&&m.current.ownerDocument||window.document},c=()=>!!(y.windowWidth&&C&&y.windowWidth<=(C==null?void 0:C.medium)&&n.adaptive),b=()=>{const e=I.current!==void 0?I.current:q!==void 0?q:y.value;return e!==null?j.cloneDate(e):null},i=()=>_.current!==void 0?_.current:$!==void 0?$:y.show,Ne=()=>pe||l.dateInput,Ae=()=>he||l.toggleButton,Fe=()=>be||l.calendar,ze=()=>ve||l.popup,te=()=>n.required!==void 0?n.required:!1,A=()=>{const e=b()||q||null,a=P,s=k,T=r.isInDateRange(e,a,s),L=X!==void 0,V=(!te()||e!=null)&&T,W=Z!==void 0?Z:V;return{customError:L,rangeOverflow:e&&s.getTime()<e.getTime()||!1,rangeUnderflow:e&&e.getTime()<a.getTime()||!1,valid:W,valueMissing:e===null}},Ke=e=>{for(const a of e)R({windowWidth:a.target.clientWidth})},Le=()=>{d.current&&d.current.focus()},ne=e=>{g.current=e},h=e=>{i()!==e&&(R({show:e}),e&&J&&J({target:v.current}),!e&&Q&&Q({target:v.current}))},Ve=e=>{const a=b();return a&&e?r.setTime(e,a):e},We=e=>{O!=null&&O.onMouseDownOutside&&O.onMouseDownOutside(e)},F=(e,a)=>{R({value:j.cloneDate(e||void 0)}),I.current=e,_.current=!1,c()||(w.current=!0),G&&G({syntheticEvent:a.syntheticEvent,nativeEvent:a.nativeEvent,value:b(),show:i(),target:v.current}),I.current=void 0,_.current=void 0,h(!1)},je=e=>{const a=Ve(e.value);F(a,e)},ae=()=>{const{popupClass:e,...a}=O,s=i(),T=b(),L=T&&j.getDate(T),V=u.classNames(e),W={popupClass:"k-datepicker-popup",show:s,anchor:m.current,className:V,id:le,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...a,onMouseDownOutside:We},ce={disabled:p,value:L,min:P,max:k,weekNumber:De,focusedDate:Te,className:c()?"k-calendar-lg":"",navigation:!c(),onChange:je},de=Fe(),ut=ze();return c()?o.createElement(de,{_ref:ne,...ce}):o.createElement(ut,{...W},o.createElement(de,{_ref:ne,...ce}))},oe=()=>{R({focused:!1}),h(!1)},Ue=()=>{const{windowWidth:e=0}=y,a={expand:i(),onClose:oe,title:Re,subTitle:Se,windowWidth:e};return o.createElement(ht.AdaptiveMode,{...a},o.createElement(bt.ActionSheetContent,null,ae()))},He=e=>{F(e.value,e)},Ye=()=>{R({focused:!0})},$e=()=>{h(!i())},z=()=>{p||(w.current=!0,h(!i()))},Xe=e=>{e.preventDefault()},Ze=e=>{const{altKey:a,keyCode:s}=e;if(s===u.Keys.esc&&i()){w.current=!0,h(!1);return}a&&(s===u.Keys.up||s===u.Keys.down)&&(e.preventDefault(),e.stopPropagation(),w.current=s===u.Keys.up,h(s===u.Keys.down))},v=o.useRef(null),m=o.useRef(null),d=o.useRef(null),g=o.useRef(null);o.useImperativeHandle(v,()=>({props:n,get element(){return m.current},get calendar(){return g.current},get dateInput(){return d.current},get name(){return n.name},get show(){return i()},get validity(){return A()},get value(){return b()},get mobileMode(){return c()},togglePopup:$e,focus:Le})),o.useImperativeHandle(D,()=>v.current),u.useWebMcpRegister("datepicker",v,n,n.webMcp);const I=o.useRef(void 0),_=o.useRef(void 0),Ge=o.useRef(null),w=o.useRef(!1),K=o.useRef(!1),M=o.useRef(null),[y,Je]=o.useState({value:ge,show:me,focused:!1}),[,Qe]=o.useReducer(e=>e,!0),re=n.name||f||void 0,et=o.useCallback(e=>{if(p)return;let a=null;if(e!=null){if(e instanceof Date)a=e;else if(typeof e=="string"||typeof e=="number"){const s=new Date(e);isNaN(s.getTime())||(a=s)}}if(a&&r.isInDateRange(a,P,k)){const s={target:m.current,currentTarget:m.current};F(a,{syntheticEvent:s})}},[p,P,k]);u.useKendoPaste(m,{fieldName:re,onValueChange:et,enabled:!!re});const R=e=>{Je(a=>({...a,...e}))};o.useEffect(()=>{g.current&&g.current.element&&i()&&!K.current&&g.current.element.focus({preventScroll:!0}),c()&&i()&&!K.current&&setTimeout(()=>{g.current&&g.current.element&&g.current.element.focus({preventScroll:!0})},300),d.current&&d.current.element&&!i()&&w.current&&d.current.element.focus({preventScroll:!0}),K.current=i(),w.current=!1}),o.useEffect(()=>{var e;return M.current=u.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(a=>Ke(a)),i()&&Qe(),(e=N())!=null&&e.body&&M.current&&M.current.observe(N().body),()=>{var a;clearTimeout(Ge.current),(a=N())!=null&&a.body&&M.current&&M.current.disconnect()}},[]);const le=f+"-popup-id",tt=ae(),nt=Ne(),at=b(),ot=Ae(),rt=Ue(),ue=!Y||A().valid,ie=S.toLanguageString(U.toggleCalendar,U.messages[U.toggleCalendar]),lt={disabled:p,format:we,formatPlaceholder:Ie,id:Be,ariaLabelledBy:Ee,ariaDescribedBy:xe,ariaLabel:Me,max:k,min:P,name:n.name,onChange:He,required:n.required,_ref:d,tabIndex:i()?-1:ye,title:n.title,valid:A().valid,validationMessage:X,validityStyles:Y,value:at,label:void 0,placeholder:y.focused?null:qe,ariaExpanded:i(),autoFill:n.autoFill,twoDigitYearMax:Oe,enableMouseWheel:n.enableMouseWheel,autoCorrectParts:n.autoCorrectParts,autoSwitchParts:ke,autoSwitchKeys:Pe,allowCaretMode:n.allowCaretMode,inputAttributes:_e},se=o.createElement(u.AsyncFocusBlur,{onFocus:Ye,onBlur:c()?void 0:oe,onSyncBlur:n.onBlur,onSyncFocus:n.onFocus},e=>o.createElement(o.Fragment,null,o.createElement("span",{...n.label?{}:ee,ref:m,className:u.classNames("k-input","k-datepicker",{[`k-input-${u.kendoThemeMaps.sizeMap[B]||B}`]:B,[`k-rounded-${u.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-input-${x}`]:x,"k-invalid":!ue,"k-required":te(),"k-disabled":p},n.className),onKeyDown:Ze,style:{width:n.width},onFocus:c()?z:e.onFocus,onBlur:e.onBlur,onClick:c()?z:void 0},o.createElement(nt,{_ref:d,ariaRole:"combobox",ariaExpanded:i(),ariaControls:i()?le:void 0,autoFocus:Ce,...lt}),o.createElement(ot,{type:"button",icon:"calendar",svgIcon:ct.calendarIcon,title:ie,className:"k-input-button",onClick:c()?void 0:z,"aria-label":ie,fillMode:x,onMouseDown:Xe}),!c()&&tt),c()&&rt));return n.label?o.createElement(pt.PickerFloatingLabel,{dateInput:d,label:n.label,editorId:f,editorValid:ue,editorDisabled:p,children:se,style:{width:n.width},...ee}):se});H.propTypes={className:t.string,defaultShow:t.bool,defaultValue:t.instanceOf(Date),disabled:t.bool,focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:r.nullable(t.string),pattern:r.nullable(t.string),date:r.nullable(t.oneOf(["short","medium","long","full"])),time:r.nullable(t.oneOf(["short","medium","long","full"])),datetime:r.nullable(t.oneOf(["short","medium","long","full"])),era:r.nullable(t.oneOf(["narrow","short","long"])),year:r.nullable(t.oneOf(["numeric","2-digit"])),month:r.nullable(t.oneOf(["numeric","2-digit","narrow","short","long"])),day:r.nullable(t.oneOf(["numeric","2-digit"])),weekday:r.nullable(t.oneOf(["narrow","short","long"])),hour:r.nullable(t.oneOf(["numeric","2-digit"])),hour12:r.nullable(t.bool),minute:r.nullable(t.oneOf(["numeric","2-digit"])),second:r.nullable(t.oneOf(["numeric","2-digit"])),timeZoneName:r.nullable(t.oneOf(["short","long"]))})]),formatPlaceholder:t.oneOfType([r.nullable(t.oneOf(["wide","narrow","short","formatPattern"])),t.shape({year:r.nullable(t.string),month:r.nullable(t.string),day:r.nullable(t.string),hour:r.nullable(t.string),minute:r.nullable(t.string),second:r.nullable(t.string)})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,min:t.instanceOf(Date),max:t.instanceOf(Date),name:t.string,popupSettings:t.shape({animate:r.nullable(t.bool),appendTo:r.nullable(t.any),popupClass:r.nullable(t.string)}),show:t.bool,tabIndex:t.number,title:t.string,value:t.instanceOf(Date),weekNumber:t.bool,width:t.oneOfType([t.number,t.string]),validationMessage:t.string,required:t.bool,valid:t.bool,size:t.oneOf(["small","medium","large"]),rounded:t.oneOf(["small","medium","large","full","none"]),fillMode:t.oneOf(["solid","flat","outline"]),adaptive:t.bool,adaptiveTitle:t.string,adaptiveSubtitle:t.string,autoFocus:t.bool,inputAttributes:t.object};const l={defaultShow:!1,defaultValue:null,dateInput:dt.DateInput,calendar:ft.Calendar,toggleButton:gt.ToggleButton,popup:st.Popup,disabled:!1,format:"d",max:r.MAX_DATE,min:r.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1},fe=u.createPropsContext();H.displayName="KendoReactDatePicker";exports.DatePicker=H;exports.DatePickerPropsContext=fe;exports.datePickerDefaultProps=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const st=require("react"),t=require("prop-types"),ct=require("@progress/kendo-react-popup"),H=require("@progress/kendo-date-math"),u=require("@progress/kendo-react-common"),dt=require("@progress/kendo-svg-icons"),ft=require("../dateinput/DateInput.js"),mt=require("../calendar/components/Calendar.js"),r=require("../utils.js"),D=require("../messages/index.js"),gt=require("@progress/kendo-react-intl"),pt=require("./ToggleButton.js"),bt=require("../hooks/usePickerFloatingLabel.js"),ht=require("@progress/kendo-react-layout"),vt=require("../common/AdaptiveMode.js");function wt(n){const k=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const f in n)if(f!=="default"){const C=Object.getOwnPropertyDescriptor(n,f);Object.defineProperty(k,f,C.get?C:{enumerable:!0,get:()=>n[f]})}}return k.default=n,Object.freeze(k)}const o=wt(st),U=o.forwardRef((n,k)=>{const f=u.useId(n.id),C=gt.useLocalization(),P=u.useAdaptiveModeContext(),{defaultShow:me=l.defaultShow,defaultValue:ge=l.defaultValue,dateInput:pe=l.dateInput,calendar:be=l.calendar,toggleButton:he=l.toggleButton,popup:ve=l.popup,disabled:p=l.disabled,format:we=l.format,max:O=l.max,min:M=l.min,popupSettings:R=l.popupSettings,tabIndex:ye=l.tabIndex,weekNumber:De=l.weekNumber,validityStyles:Y=l.validityStyles,size:E=l.size,rounded:x=l.rounded,fillMode:q=l.fillMode,autoFocus:ke=l.autoFocus,show:$,autoSwitchParts:Ce,autoSwitchKeys:Pe,twoDigitYearMax:Oe,ariaLabel:Me,adaptive:yt,adaptiveTitle:Re=n.label||void 0,adaptiveSubtitle:Se,formatPlaceholder:Ie,inputAttributes:_e,validationMessage:X,visited:Dt,value:N,touched:kt,modified:Ct,_adaptiveMode:Pt=P,valid:Z,focusedDate:Te,id:Be,ariaLabelledBy:Ee,ariaDescribedBy:xe,placeholder:qe,onChange:G,onOpen:J,onClose:Q,...ee}=u.usePropsContext(fe,n),A=()=>{if(u.canUseDOM)return m.current&&m.current.ownerDocument||window.document},c=()=>!!(b.windowWidth&&P&&b.windowWidth<=(P==null?void 0:P.medium)&&n.adaptive),h=()=>{const e=_.current!==void 0?_.current:N!==void 0?N:b.value;return e!==null?H.cloneDate(e):null},i=()=>T.current!==void 0?T.current:$!==void 0?$:b.show,Ne=()=>pe||l.dateInput,Ae=()=>he||l.toggleButton,Fe=()=>be||l.calendar,Le=()=>ve||l.popup,te=()=>n.required!==void 0?n.required:!1,F=()=>{const e=h()||N||null,a=M,s=O,B=r.isInDateRange(e,a,s),V=X!==void 0,W=(!te()||e!=null)&&B,j=Z!==void 0?Z:W;return{customError:V,rangeOverflow:e&&s.getTime()<e.getTime()||!1,rangeUnderflow:e&&e.getTime()<a.getTime()||!1,valid:j,valueMissing:e===null}},ze=e=>{for(const a of e)I({windowWidth:a.target.clientWidth})},Ke=()=>{d.current&&d.current.focus()},ne=e=>{g.current=e},v=e=>{i()!==e&&(I({show:e}),e&&J&&J({target:w.current}),!e&&Q&&Q({target:w.current}))},Ve=e=>{const a=h();return a&&e?r.setTime(e,a):e},We=e=>{R!=null&&R.onMouseDownOutside&&R.onMouseDownOutside(e)},L=(e,a)=>{I({value:H.cloneDate(e||void 0)}),_.current=e,T.current=!1,c()||(y.current=!0),G&&G({syntheticEvent:a.syntheticEvent,nativeEvent:a.nativeEvent,value:h(),show:i(),target:w.current}),_.current=void 0,T.current=void 0,v(!1)},je=e=>{const a=Ve(e.value);L(a,e)},ae=()=>{const{popupClass:e,...a}=R,s=i(),B=h(),V=B&&H.getDate(B),W=u.classNames(e),j={popupClass:"k-datepicker-popup",show:s,anchor:m.current,className:W,id:le,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...a,onMouseDownOutside:We},ce={disabled:p,value:V,min:M,max:O,weekNumber:De,focusedDate:Te,className:c()?"k-calendar-lg":"",navigation:!c(),onChange:je},de=Fe(),it=Le();return c()?o.createElement(de,{_ref:ne,...ce}):o.createElement(it,{...j},o.createElement(de,{_ref:ne,...ce}))},oe=()=>{I({focused:!1}),v(!1)},He=()=>{const{windowWidth:e=0}=b,a={expand:i(),onClose:oe,title:Re,subTitle:Se,windowWidth:e};return o.createElement(vt.AdaptiveMode,{...a},o.createElement(ht.ActionSheetContent,null,ae()))},Ue=e=>{L(e.value,e)},Ye=()=>{I({focused:!0})},$e=()=>{v(!i())},z=()=>{p||(y.current=!0,v(!i()))},Xe=e=>{e.preventDefault()},Ze=e=>{const{altKey:a,keyCode:s}=e;if(s===u.Keys.esc&&i()){y.current=!0,v(!1);return}a&&(s===u.Keys.up||s===u.Keys.down)&&(e.preventDefault(),e.stopPropagation(),y.current=s===u.Keys.up,v(s===u.Keys.down))},w=o.useRef(null),m=o.useRef(null),d=o.useRef(null),g=o.useRef(null);o.useImperativeHandle(w,()=>({props:n,get element(){return m.current},get calendar(){return g.current},get dateInput(){return d.current},get name(){return n.name},get show(){return i()},get validity(){return F()},get value(){return h()},get mobileMode(){return c()},togglePopup:$e,focus:Ke})),o.useImperativeHandle(k,()=>w.current),u.useWebMcpRegister("datepicker",w,n,n.webMcp);const _=o.useRef(void 0),T=o.useRef(void 0),Ge=o.useRef(null),y=o.useRef(!1),K=o.useRef(!1),S=o.useRef(null),[b,Je]=o.useState({value:ge,show:me,focused:!1}),[,Qe]=o.useReducer(e=>e,!0),re=n.name||f||void 0,et=o.useCallback(e=>{if(p)return;let a=null;if(e!=null){if(e instanceof Date)a=e;else if(typeof e=="string"||typeof e=="number"){const s=new Date(e);isNaN(s.getTime())||(a=s)}}if(a&&r.isInDateRange(a,M,O)){const s={target:m.current,currentTarget:m.current};L(a,{syntheticEvent:s})}},[p,M,O]);u.useKendoPaste(m,{fieldName:re,onValueChange:et,enabled:!!re});const I=e=>{Je(a=>({...a,...e}))};o.useEffect(()=>{g.current&&g.current.element&&i()&&!K.current&&g.current.element.focus({preventScroll:!0}),c()&&i()&&!K.current&&setTimeout(()=>{g.current&&g.current.element&&g.current.element.focus({preventScroll:!0})},300),d.current&&d.current.element&&!i()&&y.current&&d.current.element.focus({preventScroll:!0}),K.current=i(),y.current=!1}),o.useEffect(()=>{var e;return S.current=u.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(a=>ze(a)),i()&&Qe(),(e=A())!=null&&e.body&&S.current&&S.current.observe(A().body),()=>{var a;clearTimeout(Ge.current),(a=A())!=null&&a.body&&S.current&&S.current.disconnect()}},[]);const le=f+"-popup-id",tt=ae(),nt=Ne(),at=h(),ot=Ae(),rt=He(),ue=!Y||F().valid,ie=C.toLanguageString(D.toggleCalendar,D.messages[D.toggleCalendar]),lt=Me||C.toLanguageString(D.selectDate,D.messages[D.selectDate]),ut={disabled:p,format:we,formatPlaceholder:Ie,id:Be,ariaLabelledBy:Ee,ariaDescribedBy:xe,ariaLabel:lt,max:O,min:M,name:n.name,onChange:Ue,required:n.required,_ref:d,tabIndex:i()?-1:ye,title:n.title,valid:F().valid,validationMessage:X,validityStyles:Y,value:at,label:void 0,placeholder:b.focused?null:qe,ariaExpanded:i(),autoFill:n.autoFill,twoDigitYearMax:Oe,enableMouseWheel:n.enableMouseWheel,autoCorrectParts:n.autoCorrectParts,autoSwitchParts:Ce,autoSwitchKeys:Pe,allowCaretMode:n.allowCaretMode,inputAttributes:_e},se=o.createElement(u.AsyncFocusBlur,{onFocus:Ye,onBlur:c()?void 0:oe,onSyncBlur:n.onBlur,onSyncFocus:n.onFocus},e=>o.createElement(o.Fragment,null,o.createElement("span",{...n.label?{}:ee,ref:m,className:u.classNames("k-input","k-datepicker",{[`k-input-${u.kendoThemeMaps.sizeMap[E]||E}`]:E,[`k-rounded-${u.kendoThemeMaps.roundedMap[x]||x}`]:x,[`k-input-${q}`]:q,"k-invalid":!ue,"k-required":te(),"k-disabled":p,"k-focus":b.focused},n.className),onKeyDown:Ze,style:{width:n.width},onFocus:c()?z:e.onFocus,onBlur:e.onBlur,onClick:c()?z:void 0},o.createElement(nt,{_ref:d,ariaRole:"combobox",ariaHasPopup:"grid",ariaExpanded:i(),ariaControls:i()?le:void 0,autoFocus:ke,...ut}),o.createElement(ot,{type:"button",icon:"calendar",svgIcon:dt.calendarIcon,title:ie,className:"k-input-button",onClick:c()?void 0:z,"aria-label":ie,fillMode:q,onMouseDown:Xe}),!c()&&tt),c()&&rt));return n.label?o.createElement(bt.PickerFloatingLabel,{dateInput:d,label:n.label,editorId:f,editorValid:ue,editorDisabled:p,children:se,style:{width:n.width},...ee}):se});U.propTypes={className:t.string,defaultShow:t.bool,defaultValue:t.instanceOf(Date),disabled:t.bool,focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:r.nullable(t.string),pattern:r.nullable(t.string),date:r.nullable(t.oneOf(["short","medium","long","full"])),time:r.nullable(t.oneOf(["short","medium","long","full"])),datetime:r.nullable(t.oneOf(["short","medium","long","full"])),era:r.nullable(t.oneOf(["narrow","short","long"])),year:r.nullable(t.oneOf(["numeric","2-digit"])),month:r.nullable(t.oneOf(["numeric","2-digit","narrow","short","long"])),day:r.nullable(t.oneOf(["numeric","2-digit"])),weekday:r.nullable(t.oneOf(["narrow","short","long"])),hour:r.nullable(t.oneOf(["numeric","2-digit"])),hour12:r.nullable(t.bool),minute:r.nullable(t.oneOf(["numeric","2-digit"])),second:r.nullable(t.oneOf(["numeric","2-digit"])),timeZoneName:r.nullable(t.oneOf(["short","long"]))})]),formatPlaceholder:t.oneOfType([r.nullable(t.oneOf(["wide","narrow","short","formatPattern"])),t.shape({year:r.nullable(t.string),month:r.nullable(t.string),day:r.nullable(t.string),hour:r.nullable(t.string),minute:r.nullable(t.string),second:r.nullable(t.string)})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,ariaLabel:t.string,min:t.instanceOf(Date),max:t.instanceOf(Date),name:t.string,popupSettings:t.shape({animate:r.nullable(t.bool),appendTo:r.nullable(t.any),popupClass:r.nullable(t.string)}),show:t.bool,tabIndex:t.number,title:t.string,value:t.instanceOf(Date),weekNumber:t.bool,width:t.oneOfType([t.number,t.string]),validationMessage:t.string,required:t.bool,valid:t.bool,size:t.oneOf(["small","medium","large"]),rounded:t.oneOf(["small","medium","large","full","none"]),fillMode:t.oneOf(["solid","flat","outline"]),adaptive:t.bool,adaptiveTitle:t.string,adaptiveSubtitle:t.string,autoFocus:t.bool,inputAttributes:t.object};const l={defaultShow:!1,defaultValue:null,dateInput:ft.DateInputInner,calendar:mt.Calendar,toggleButton:pt.ToggleButton,popup:ct.Popup,disabled:!1,format:"d",max:r.MAX_DATE,min:r.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1},fe=u.createPropsContext();U.displayName="KendoReactDatePicker";exports.DatePicker=U;exports.DatePickerPropsContext=fe;exports.datePickerDefaultProps=l;

package/datepicker/DatePicker.mjs

@@ -7,112 +7,112 @@
  */
 import * as o from "react";
 import t from "prop-types";
-import { Popup as dt } from "@progress/kendo-react-popup";
-import { cloneDate as le, getDate as ft } from "@progress/kendo-date-math";
-import { useId as mt, useAdaptiveModeContext as pt, usePropsContext as gt, useWebMcpRegister as ht, useKendoPaste as vt, canUseDOM as ue, AsyncFocusBlur as bt, classNames as se, kendoThemeMaps as ce, createPropsContext as wt, Keys as k } from "@progress/kendo-react-common";
-import { calendarIcon as yt } from "@progress/kendo-svg-icons";
-import { DateInput as Ct } from "../dateinput/DateInput.mjs";
-import { Calendar as Dt } from "../calendar/components/Calendar.mjs";
-import { MIN_DATE as Ot, MAX_DATE as Pt, isInDateRange as de, setTime as kt, nullable as a } from "../utils.mjs";
-import { toggleCalendar as fe, messages as Mt } from "../messages/index.mjs";
-import { useLocalization as Rt } from "@progress/kendo-react-intl";
-import { ToggleButton as St } from "./ToggleButton.mjs";
-import { PickerFloatingLabel as _t } from "../hooks/usePickerFloatingLabel.mjs";
-import { ActionSheetContent as It } from "@progress/kendo-react-layout";
-import { AdaptiveMode as Et } from "../common/AdaptiveMode.mjs";
-const me = o.forwardRef((r, pe) => {
-  const _ = mt(r.id), ge = Rt(), w = pt(), {
-    defaultShow: he = i.defaultShow,
-    defaultValue: ve = i.defaultValue,
-    dateInput: be = i.dateInput,
-    calendar: we = i.calendar,
-    toggleButton: ye = i.toggleButton,
-    popup: Ce = i.popup,
+import { Popup as pt } from "@progress/kendo-react-popup";
+import { cloneDate as ue, getDate as gt } from "@progress/kendo-date-math";
+import { useId as ht, useAdaptiveModeContext as vt, usePropsContext as bt, useWebMcpRegister as wt, useKendoPaste as yt, canUseDOM as se, AsyncFocusBlur as Ct, classNames as ce, kendoThemeMaps as de, createPropsContext as Dt, Keys as O } from "@progress/kendo-react-common";
+import { calendarIcon as Pt } from "@progress/kendo-svg-icons";
+import { DateInputInner as kt } from "../dateinput/DateInput.mjs";
+import { Calendar as Ot } from "../calendar/components/Calendar.mjs";
+import { MIN_DATE as Mt, MAX_DATE as Rt, isInDateRange as fe, setTime as It, nullable as a } from "../utils.mjs";
+import { toggleCalendar as me, messages as pe, selectDate as ge } from "../messages/index.mjs";
+import { useLocalization as St } from "@progress/kendo-react-intl";
+import { ToggleButton as _t } from "./ToggleButton.mjs";
+import { PickerFloatingLabel as Et } from "../hooks/usePickerFloatingLabel.mjs";
+import { ActionSheetContent as Bt } from "@progress/kendo-react-layout";
+import { AdaptiveMode as Tt } from "../common/AdaptiveMode.mjs";
+const he = o.forwardRef((r, ve) => {
+  const S = ht(r.id), W = St(), w = vt(), {
+    defaultShow: be = i.defaultShow,
+    defaultValue: we = i.defaultValue,
+    dateInput: ye = i.dateInput,
+    calendar: Ce = i.calendar,
+    toggleButton: De = i.toggleButton,
+    popup: Pe = i.popup,
     disabled: m = i.disabled,
-    format: De = i.format,
+    format: ke = i.format,
     max: y = i.max,
     min: C = i.min,
     popupSettings: D = i.popupSettings,
     tabIndex: Oe = i.tabIndex,
-    weekNumber: Pe = i.weekNumber,
-    validityStyles: W = i.validityStyles,
-    size: I = i.size,
+    weekNumber: Me = i.weekNumber,
+    validityStyles: q = i.validityStyles,
+    size: _ = i.size,
     rounded: E = i.rounded,
     fillMode: B = i.fillMode,
-    autoFocus: ke = i.autoFocus,
-    show: q,
-    autoSwitchParts: Me,
-    autoSwitchKeys: Re,
-    twoDigitYearMax: Se,
-    ariaLabel: _e,
-    adaptive: Tt,
-    adaptiveTitle: Ie = r.label || void 0,
-    adaptiveSubtitle: Ee,
-    formatPlaceholder: Be,
-    inputAttributes: Te,
-    validationMessage: H,
-    visited: xt,
+    autoFocus: Re = i.autoFocus,
+    show: H,
+    autoSwitchParts: Ie,
+    autoSwitchKeys: Se,
+    twoDigitYearMax: _e,
+    ariaLabel: Ee,
+    adaptive: Nt,
+    adaptiveTitle: Be = r.label || void 0,
+    adaptiveSubtitle: Te,
+    formatPlaceholder: xe,
+    inputAttributes: Ne,
+    validationMessage: U,
+    visited: At,
     value: T,
-    touched: Nt,
-    modified: At,
-    _adaptiveMode: Ft = w,
-    valid: U,
-    focusedDate: xe,
-    id: Ne,
-    ariaLabelledBy: Ae,
-    ariaDescribedBy: Fe,
-    placeholder: Ve,
-    onChange: Y,
-    onOpen: $,
-    onClose: j,
-    ...X
-  } = gt(Bt, r), x = () => {
-    if (ue)
+    touched: Ft,
+    modified: Lt,
+    _adaptiveMode: Vt = w,
+    valid: Y,
+    focusedDate: Ae,
+    id: Fe,
+    ariaLabelledBy: Le,
+    ariaDescribedBy: Ve,
+    placeholder: ze,
+    onChange: $,
+    onOpen: j,
+    onClose: X,
+    ...Z
+  } = bt(xt, r), x = () => {
+    if (se)
       return d.current && d.current.ownerDocument || window.document;
-  }, s = () => !!(b.windowWidth && w && b.windowWidth <= (w == null ? void 0 : w.medium) && r.adaptive), p = () => {
-    const e = M.current !== void 0 ? M.current : T !== void 0 ? T : b.value;
-    return e !== null ? le(e) : null;
-  }, l = () => R.current !== void 0 ? R.current : q !== void 0 ? q : b.show, ze = () => be || i.dateInput, Le = () => ye || i.toggleButton, Ke = () => we || i.calendar, We = () => Ce || i.popup, Z = () => r.required !== void 0 ? r.required : !1, N = () => {
-    const e = p() || T || null, n = C, u = y, S = de(e, n, u), z = H !== void 0, L = (!Z() || e != null) && S, K = U !== void 0 ? U : L;
+  }, s = () => !!(p.windowWidth && w && p.windowWidth <= (w == null ? void 0 : w.medium) && r.adaptive), g = () => {
+    const e = M.current !== void 0 ? M.current : T !== void 0 ? T : p.value;
+    return e !== null ? ue(e) : null;
+  }, l = () => R.current !== void 0 ? R.current : H !== void 0 ? H : p.show, Ke = () => ye || i.dateInput, We = () => De || i.toggleButton, qe = () => Ce || i.calendar, He = () => Pe || i.popup, G = () => r.required !== void 0 ? r.required : !1, N = () => {
+    const e = g() || T || null, n = C, u = y, I = fe(e, n, u), V = U !== void 0, z = (!G() || e != null) && I, K = Y !== void 0 ? Y : z;
     return {
-      customError: z,
+      customError: V,
       rangeOverflow: e && u.getTime() < e.getTime() || !1,
       rangeUnderflow: e && e.getTime() < n.getTime() || !1,
       valid: K,
       valueMissing: e === null
     };
-  }, qe = (e) => {
+  }, Ue = (e) => {
     for (const n of e)
-      P({ windowWidth: n.target.clientWidth });
-  }, He = () => {
+      k({ windowWidth: n.target.clientWidth });
+  }, Ye = () => {
     c.current && c.current.focus();
-  }, G = (e) => {
+  }, J = (e) => {
     f.current = e;
-  }, g = (e) => {
-    l() !== e && (P({ show: e }), e && $ && $({ target: h.current }), !e && j && j({ target: h.current }));
-  }, Ue = (e) => {
-    const n = p();
-    return n && e ? kt(e, n) : e;
-  }, Ye = (e) => {
+  }, h = (e) => {
+    l() !== e && (k({ show: e }), e && j && j({ target: v.current }), !e && X && X({ target: v.current }));
+  }, $e = (e) => {
+    const n = g();
+    return n && e ? It(e, n) : e;
+  }, je = (e) => {
     D != null && D.onMouseDownOutside && D.onMouseDownOutside(e);
   }, A = (e, n) => {
-    P({ value: le(e || void 0) }), M.current = e, R.current = !1, s() || (v.current = !0), Y && Y({
+    k({ value: ue(e || void 0) }), M.current = e, R.current = !1, s() || (b.current = !0), $ && $({
       syntheticEvent: n.syntheticEvent,
       nativeEvent: n.nativeEvent,
-      value: p(),
+      value: g(),
       show: l(),
-      target: h.current
-    }), M.current = void 0, R.current = void 0, g(!1);
-  }, $e = (e) => {
-    const n = Ue(e.value);
+      target: v.current
+    }), M.current = void 0, R.current = void 0, h(!1);
+  }, Xe = (e) => {
+    const n = $e(e.value);
     A(n, e);
-  }, J = () => {
-    const { popupClass: e, ...n } = D, u = l(), S = p(), z = S && ft(S), L = se(e), K = {
+  }, Q = () => {
+    const { popupClass: e, ...n } = D, u = l(), I = g(), V = I && gt(I), z = ce(e), K = {
       popupClass: "k-datepicker-popup",
       show: u,
       anchor: d.current,
-      className: L,
-      id: te,
+      className: z,
+      id: ne,
       anchorAlign: {
         horizontal: "left",
         vertical: "bottom"
@@ -122,50 +122,50 @@ const me = o.forwardRef((r, pe) => {
         vertical: "top"
       },
       ...n,
-      onMouseDownOutside: Ye
-    }, ae = {
+      onMouseDownOutside: je
+    }, ie = {
       disabled: m,
-      value: z,
+      value: V,
       min: C,
       max: y,
-      weekNumber: Pe,
-      focusedDate: xe,
+      weekNumber: Me,
+      focusedDate: Ae,
       className: s() ? "k-calendar-lg" : "",
       navigation: !s(),
-      onChange: $e
-    }, ie = Ke(), ct = We();
-    return s() ? /* @__PURE__ */ o.createElement(ie, { _ref: G, ...ae }) : /* @__PURE__ */ o.createElement(ct, { ...K }, /* @__PURE__ */ o.createElement(ie, { _ref: G, ...ae }));
-  }, Q = () => {
-    P({ focused: !1 }), g(!1);
-  }, je = () => {
-    const { windowWidth: e = 0 } = b, n = {
+      onChange: Xe
+    }, le = qe(), mt = He();
+    return s() ? /* @__PURE__ */ o.createElement(le, { _ref: J, ...ie }) : /* @__PURE__ */ o.createElement(mt, { ...K }, /* @__PURE__ */ o.createElement(le, { _ref: J, ...ie }));
+  }, ee = () => {
+    k({ focused: !1 }), h(!1);
+  }, Ze = () => {
+    const { windowWidth: e = 0 } = p, n = {
       expand: l(),
-      onClose: Q,
-      title: Ie,
-      subTitle: Ee,
+      onClose: ee,
+      title: Be,
+      subTitle: Te,
       windowWidth: e
     };
-    return /* @__PURE__ */ o.createElement(Et, { ...n }, /* @__PURE__ */ o.createElement(It, null, J()));
-  }, Xe = (e) => {
+    return /* @__PURE__ */ o.createElement(Tt, { ...n }, /* @__PURE__ */ o.createElement(Bt, null, Q()));
+  }, Ge = (e) => {
     A(e.value, e);
-  }, Ze = () => {
-    P({ focused: !0 });
-  }, Ge = () => {
-    g(!l());
+  }, Je = () => {
+    k({ focused: !0 });
+  }, Qe = () => {
+    h(!l());
   }, F = () => {
-    m || (v.current = !0, g(!l()));
-  }, Je = (e) => {
+    m || (b.current = !0, h(!l()));
+  }, et = (e) => {
     e.preventDefault();
-  }, Qe = (e) => {
+  }, tt = (e) => {
     const { altKey: n, keyCode: u } = e;
-    if (u === k.esc && l()) {
-      v.current = !0, g(!1);
+    if (u === O.esc && l()) {
+      b.current = !0, h(!1);
       return;
     }
-    n && (u === k.up || u === k.down) && (e.preventDefault(), e.stopPropagation(), v.current = u === k.up, g(u === k.down));
-  }, h = o.useRef(null), d = o.useRef(null), c = o.useRef(null), f = o.useRef(null);
+    n && (u === O.up || u === O.down) && (e.preventDefault(), e.stopPropagation(), b.current = u === O.up, h(u === O.down));
+  }, v = o.useRef(null), d = o.useRef(null), c = o.useRef(null), f = o.useRef(null);
   o.useImperativeHandle(
-    h,
+    v,
     () => ({
       props: r,
       get element() {
@@ -187,21 +187,21 @@ const me = o.forwardRef((r, pe) => {
         return N();
       },
       get value() {
-        return p();
+        return g();
       },
       get mobileMode() {
         return s();
       },
-      togglePopup: Ge,
+      togglePopup: Qe,
       // Hidden Methods but still accessible
-      focus: He
+      focus: Ye
     })
-  ), o.useImperativeHandle(pe, () => h.current), ht("datepicker", h, r, r.webMcp);
-  const M = o.useRef(void 0), R = o.useRef(void 0), et = o.useRef(null), v = o.useRef(!1), V = o.useRef(!1), O = o.useRef(null), [b, tt] = o.useState({
-    value: ve,
-    show: he,
+  ), o.useImperativeHandle(ve, () => v.current), wt("datepicker", v, r, r.webMcp);
+  const M = o.useRef(void 0), R = o.useRef(void 0), nt = o.useRef(null), b = o.useRef(!1), L = o.useRef(!1), P = o.useRef(null), [p, ot] = o.useState({
+    value: we,
+    show: be,
     focused: !1
-  }), [, nt] = o.useReducer((e) => e, !0), ee = r.name || _ || void 0, ot = o.useCallback(
+  }), [, rt] = o.useReducer((e) => e, !0), te = r.name || S || void 0, at = o.useCallback(
     (e) => {
       if (m)
         return;
@@ -214,7 +214,7 @@ const me = o.forwardRef((r, pe) => {
           isNaN(u.getTime()) || (n = u);
         }
       }
-      if (n && de(n, C, y)) {
+      if (n && fe(n, C, y)) {
         const u = {
           target: d.current,
           currentTarget: d.current
@@ -224,131 +224,133 @@ const me = o.forwardRef((r, pe) => {
     },
     [m, C, y]
   );
-  vt(d, {
-    fieldName: ee,
-    onValueChange: ot,
-    enabled: !!ee
+  yt(d, {
+    fieldName: te,
+    onValueChange: at,
+    enabled: !!te
   });
-  const P = (e) => {
-    tt((n) => ({ ...n, ...e }));
+  const k = (e) => {
+    ot((n) => ({ ...n, ...e }));
   };
   o.useEffect(() => {
-    f.current && f.current.element && l() && !V.current && f.current.element.focus({ preventScroll: !0 }), s() && l() && !V.current && setTimeout(() => {
+    f.current && f.current.element && l() && !L.current && f.current.element.focus({ preventScroll: !0 }), s() && l() && !L.current && setTimeout(() => {
       f.current && f.current.element && f.current.element.focus({ preventScroll: !0 });
-    }, 300), c.current && c.current.element && !l() && v.current && c.current.element.focus({ preventScroll: !0 }), V.current = l(), v.current = !1;
+    }, 300), c.current && c.current.element && !l() && b.current && c.current.element.focus({ preventScroll: !0 }), L.current = l(), b.current = !1;
   }), o.useEffect(() => {
     var e;
-    return O.current = ue && window.ResizeObserver && new window.ResizeObserver((n) => qe(n)), l() && nt(), (e = x()) != null && e.body && O.current && O.current.observe(x().body), () => {
+    return P.current = se && window.ResizeObserver && new window.ResizeObserver((n) => Ue(n)), l() && rt(), (e = x()) != null && e.body && P.current && P.current.observe(x().body), () => {
       var n;
-      clearTimeout(et.current), (n = x()) != null && n.body && O.current && O.current.disconnect();
+      clearTimeout(nt.current), (n = x()) != null && n.body && P.current && P.current.disconnect();
     };
   }, []);
-  const te = _ + "-popup-id", rt = J(), at = ze(), it = p(), lt = Le(), ut = je(), ne = !W || N().valid, oe = ge.toLanguageString(fe, Mt[fe]), st = {
+  const ne = S + "-popup-id", it = Q(), lt = Ke(), ut = g(), st = We(), ct = Ze(), oe = !q || N().valid, re = W.toLanguageString(me, pe[me]), dt = Ee || W.toLanguageString(ge, pe[ge]), ft = {
     disabled: m,
-    format: De,
-    formatPlaceholder: Be,
-    id: Ne,
-    ariaLabelledBy: Ae,
-    ariaDescribedBy: Fe,
-    ariaLabel: _e,
+    format: ke,
+    formatPlaceholder: xe,
+    id: Fe,
+    ariaLabelledBy: Le,
+    ariaDescribedBy: Ve,
+    ariaLabel: dt,
     max: y,
     min: C,
     name: r.name,
-    onChange: Xe,
+    onChange: Ge,
     required: r.required,
     _ref: c,
     tabIndex: l() ? -1 : Oe,
     title: r.title,
     valid: N().valid,
-    validationMessage: H,
-    validityStyles: W,
-    value: it,
+    validationMessage: U,
+    validityStyles: q,
+    value: ut,
     label: void 0,
-    placeholder: b.focused ? null : Ve,
+    placeholder: p.focused ? null : ze,
     ariaExpanded: l(),
     autoFill: r.autoFill,
-    twoDigitYearMax: Se,
+    twoDigitYearMax: _e,
     enableMouseWheel: r.enableMouseWheel,
     autoCorrectParts: r.autoCorrectParts,
-    autoSwitchParts: Me,
-    autoSwitchKeys: Re,
+    autoSwitchParts: Ie,
+    autoSwitchKeys: Se,
     allowCaretMode: r.allowCaretMode,
-    inputAttributes: Te
-  }, re = /* @__PURE__ */ o.createElement(
-    bt,
+    inputAttributes: Ne
+  }, ae = /* @__PURE__ */ o.createElement(
+    Ct,
     {
-      onFocus: Ze,
-      onBlur: s() ? void 0 : Q,
+      onFocus: Je,
+      onBlur: s() ? void 0 : ee,
       onSyncBlur: r.onBlur,
       onSyncFocus: r.onFocus
     },
     (e) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
       "span",
       {
-        ...r.label ? {} : X,
+        ...r.label ? {} : Z,
         ref: d,
-        className: se(
+        className: ce(
           "k-input",
           "k-datepicker",
           {
-            [`k-input-${ce.sizeMap[I] || I}`]: I,
-            [`k-rounded-${ce.roundedMap[E] || E}`]: E,
+            [`k-input-${de.sizeMap[_] || _}`]: _,
+            [`k-rounded-${de.roundedMap[E] || E}`]: E,
             [`k-input-${B}`]: B,
-            "k-invalid": !ne,
-            "k-required": Z(),
-            "k-disabled": m
+            "k-invalid": !oe,
+            "k-required": G(),
+            "k-disabled": m,
+            "k-focus": p.focused
           },
           r.className
         ),
-        onKeyDown: Qe,
+        onKeyDown: tt,
         style: { width: r.width },
         onFocus: s() ? F : e.onFocus,
         onBlur: e.onBlur,
         onClick: s() ? F : void 0
       },
       /* @__PURE__ */ o.createElement(
-        at,
+        lt,
         {
           _ref: c,
           ariaRole: "combobox",
+          ariaHasPopup: "grid",
           ariaExpanded: l(),
-          ariaControls: l() ? te : void 0,
-          autoFocus: ke,
-          ...st
+          ariaControls: l() ? ne : void 0,
+          autoFocus: Re,
+          ...ft
         }
       ),
       /* @__PURE__ */ o.createElement(
-        lt,
+        st,
         {
           type: "button",
           icon: "calendar",
-          svgIcon: yt,
-          title: oe,
+          svgIcon: Pt,
+          title: re,
           className: "k-input-button",
           onClick: s() ? void 0 : F,
-          "aria-label": oe,
+          "aria-label": re,
           fillMode: B,
-          onMouseDown: Je
+          onMouseDown: et
         }
       ),
-      !s() && rt
-    ), s() && ut)
+      !s() && it
+    ), s() && ct)
   );
   return r.label ? /* @__PURE__ */ o.createElement(
-    _t,
+    Et,
     {
       dateInput: c,
       label: r.label,
-      editorId: _,
-      editorValid: ne,
+      editorId: S,
+      editorValid: oe,
       editorDisabled: m,
-      children: re,
+      children: ae,
       style: { width: r.width },
-      ...X
+      ...Z
     }
-  ) : re;
+  ) : ae;
 });
-me.propTypes = {
+he.propTypes = {
   className: t.string,
   defaultShow: t.bool,
   defaultValue: t.instanceOf(Date),
@@ -420,14 +422,14 @@ me.propTypes = {
 const i = {
   defaultShow: !1,
   defaultValue: null,
-  dateInput: Ct,
-  calendar: Dt,
-  toggleButton: St,
-  popup: dt,
+  dateInput: kt,
+  calendar: Ot,
+  toggleButton: _t,
+  popup: pt,
   disabled: !1,
   format: "d",
-  max: Pt,
-  min: Ot,
+  max: Rt,
+  min: Mt,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
@@ -436,10 +438,10 @@ const i = {
   rounded: void 0,
   fillMode: void 0,
   autoFocus: !1
-}, Bt = wt();
-me.displayName = "KendoReactDatePicker";
+}, xt = Dt();
+he.displayName = "KendoReactDatePicker";
 export {
-  me as DatePicker,
-  Bt as DatePickerPropsContext,
+  he as DatePicker,
+  xt as DatePickerPropsContext,
   i as datePickerDefaultProps
 };