@progress/kendo-react-dateinputs 7.4.0-develop.8 → 7.4.0

package/datepicker/DatePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),e=require("prop-types"),_=require("@progress/kendo-react-popup"),k=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),U=require("../package-metadata.js"),j=require("../dateinput/DateInput.js"),$=require("../calendar/components/Calendar.js"),c=require("../utils.js"),C=require("../messages/index.js"),P=require("@progress/kendo-react-intl"),H=require("./ToggleButton.js"),X=require("../common/PickerWrap.js"),Z=require("../hooks/usePickerFloatingLabel.js"),G=require("@progress/kendo-react-layout"),J=require("../common/AdaptiveMode.js"),Q=require("../common/constants.js");function Y(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const r=Y(K),o=class o extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._calendar=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.setCalendarRef=t=>{this._calendar=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.renderPopup=()=>{const{disabled:t,min:i,max:n,weekNumber:m,focusedDate:g}=this.props,{popupClass:u,...f}=this.props.popupSettings,v=this.show,h=this.value,w=h&&k.getDate(h),b=a.classNames("k-calendar-container k-group k-reset",u),y={popupClass:"k-datepicker-popup",show:v,anchor:this._element,className:b,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...f},p={disabled:t,value:w,min:i,max:n,weekNumber:m,focusedDate:g,className:this.mobileMode?"k-calendar-lg":"",navigation:!this.mobileMode,onChange:this.handleCalendarValueChange};return this.mobileMode?r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...p}):r.createElement(this.popupComp,{...y},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...p}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(J.AdaptiveMode,{...i},r.createElement(G.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange(i,t)},this.handleValueChange=(t,i)=>{this.setState({value:k.cloneDate(t||void 0)}),this.valueDuringOnChange=t,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:n}=this.props;n&&n.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:n}=t;if(n===a.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(n===a.Keys.up||n===a.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===a.Keys.up,this.setShow(n===a.Keys.down))},a.validatePackage(U.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(a.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=Q.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?k.cloneDate(s):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}get toggleButtonComp(){return this.props.toggleButton||o.defaultProps.toggleButton}get calendarComp(){return this.props.calendar||o.defaultProps.calendar}get popupComp(){return this.props.popup||o.defaultProps.popup}get pickerWrapComp(){return this.props.pickerWrap||o.defaultProps.pickerWrap}get validity(){const s=c.isInDateRange(this.value,this.min,this.max),t=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,n=this.props.valid!==void 0?this.props.valid:i;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}componentDidMount(){var s;this.observerResize=a.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._calendar&&this._calendar.element&&this.show&&!this.prevShow&&this._calendar.element.focus({preventScroll:!0}),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s;clearTimeout(this.nextTickId),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:s=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:i=o.defaultProps.fillMode,disabled:n,tabIndex:m,title:g,id:u,format:f,formatPlaceholder:v,min:h,max:w,className:b,width:y,name:p,validationMessage:T,required:q,validityStyles:x,ariaLabelledBy:E,ariaDescribedBy:R,ariaLabel:B}=this.props,z=this.show,N=this.value,D=!this.validityStyles||this.validity.valid,F={disabled:n,format:f,formatPlaceholder:v,id:u,ariaLabelledBy:E,ariaDescribedBy:R,ariaLabel:B,max:w,min:h,name:p,onChange:this.handleInputValueChange,required:q,tabIndex:z?-1:m,title:g,valid:this.validity.valid,validationMessage:T,validityStyles:x,value:N,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},I=P.provideLocalizationService(this).toLanguageString(C.toggleCalendar,C.messages[C.toggleCalendar]),O=r.createElement(a.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:V,onBlur:A})=>r.createElement(r.Fragment,null,r.createElement("span",{ref:L=>{this._element=L},className:a.classNames("k-input","k-datepicker",{[`k-input-${a.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${a.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${i}`]:i,"k-invalid":!D,"k-required":this.required,"k-disabled":this.props.disabled},b),onKeyDown:this.handleKeyDown,style:{width:y},onFocus:V,onBlur:A,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",readonly:this.mobileMode,ariaExpanded:this.show,ariaControls:this._popupId,...F}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:W.calendarIcon,title:I,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":I,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Z.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:u,editorValid:D,editorDisabled:this.props.disabled,children:O,style:{width:this.props.width}}):O}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?c.setTime(s,this.value):s}nextTick(s){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>s())}calculateMedia(s){for(let t of s)this.setState({windowWidth:t.target.clientWidth})}};o.displayName="DatePicker",o.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:j.DateInput,calendar:$.Calendar,toggleButton:H.ToggleButton,popup:_.Popup,pickerWrap:X.PickerWrap,disabled:!1,format:"d",max:c.MAX_DATE,min:c.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"};let d=o;const M=a.createPropsContext(),S=a.withIdHOC(a.withPropsContext(M,d));S.displayName="KendoReactDatePicker";P.registerForLocalization(d);exports.DatePicker=S;exports.DatePickerPropsContext=M;exports.DatePickerWithoutContext=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),_=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),j=require("../package-metadata.js"),$=require("../dateinput/DateInput.js"),H=require("../calendar/components/Calendar.js"),m=require("../utils.js"),D=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),X=require("./ToggleButton.js"),Z=require("../common/PickerWrap.js"),G=require("../hooks/usePickerFloatingLabel.js"),J=require("@progress/kendo-react-layout"),Q=require("../common/AdaptiveMode.js"),Y=require("../common/constants.js");function ee(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const r=ee(W),o=class o extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._calendar=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.setCalendarRef=t=>{this._calendar=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.renderPopup=()=>{const{disabled:t,min:i,max:a,weekNumber:g,focusedDate:f,popupSettings:d}=this.props,{popupClass:v,...w}=d,b=this.show,h=this.value,y=h&&I.getDate(h),p=n.classNames("k-calendar-container k-group k-reset",v),k={popupClass:"k-datepicker-popup",show:b,anchor:this._element,className:p,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...w},c={disabled:t,value:y,min:i,max:a,weekNumber:g,focusedDate:f,className:this.mobileMode?"k-calendar-lg":"",navigation:!this.mobileMode,onChange:this.handleCalendarValueChange};return this.mobileMode?r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}):r.createElement(this.popupComp,{...k},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(Q.AdaptiveMode,{...i},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange(i,t)},this.handleValueChange=(t,i)=>{this.setState({value:I.cloneDate(t||void 0)}),this.valueDuringOnChange=t,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:a}=this.props;a&&a.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:a}=t;if(a===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===n.Keys.up||a===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},n.validatePackage(j.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=Y.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?I.cloneDate(s):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}get toggleButtonComp(){return this.props.toggleButton||o.defaultProps.toggleButton}get calendarComp(){return this.props.calendar||o.defaultProps.calendar}get popupComp(){return this.props.popup||o.defaultProps.popup}get pickerWrapComp(){return this.props.pickerWrap||o.defaultProps.pickerWrap}get validity(){const s=m.isInDateRange(this.value,this.min,this.max),t=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,a=this.props.valid!==void 0?this.props.valid:i;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}componentDidMount(){var s;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._calendar&&this._calendar.element&&this.show&&!this.prevShow&&this._calendar.element.focus({preventScroll:!0}),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s;clearTimeout(this.nextTickId),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:s=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:i=o.defaultProps.fillMode,disabled:a,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:k,validationMessage:c,required:E,validityStyles:R,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,placeholder:V,label:C,popupSettings:te,defaultValue:se,defaultShow:ie,value:oe,popup:ae,weekNumber:ne,dateInput:re,calendar:le,toggleButton:ue,onChange:de,onBlur:he,onFocus:pe,show:ce,onOpen:me,pickerWrap:ge,...O}=this.props,A=this.value,S=!this.validityStyles||this.validity.valid,L={disabled:a,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,max:h,min:b,name:k,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:R,value:A,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},M=q.provideLocalizationService(this).toLanguageString(D.toggleCalendar,D.messages[D.toggleCalendar]),P=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},T=>r.createElement(r.Fragment,null,r.createElement("span",{...C?{}:O,ref:K=>{this._element=K},className:n.classNames("k-input","k-datepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${i}`]:i,"k-invalid":!S,"k-required":this.required,"k-disabled":a},y),onKeyDown:this.handleKeyDown,style:{width:p},onFocus:T.onFocus,onBlur:T.onBlur,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",readonly:this.mobileMode,ariaExpanded:this.show,ariaControls:this._popupId,...L}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:U.calendarIcon,title:M,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":M,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return C?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:C,editorId:d,editorValid:S,editorDisabled:a,children:P,style:{width:p},...O}):P}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?m.setTime(s,this.value):s}nextTick(s){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>s())}calculateMedia(s){for(let t of s)this.setState({windowWidth:t.target.clientWidth})}};o.displayName="DatePicker",o.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:$.DateInput,calendar:H.Calendar,toggleButton:X.ToggleButton,popup:_.Popup,pickerWrap:Z.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"};let u=o;const x=n.createPropsContext(),B=n.withIdHOC(n.withPropsContext(x,u));B.displayName="KendoReactDatePicker";q.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=x;exports.DatePickerWithoutContext=u;

package/datepicker/DatePicker.mjs

@@ -8,22 +8,22 @@
 "use client";
 import * as n from "react";
 import e from "prop-types";
-import { Popup as q } from "@progress/kendo-react-popup";
-import { getDate as L, cloneDate as C } from "@progress/kendo-date-math";
-import { classNames as D, Keys as r, validatePackage as W, canUseDOM as k, AsyncFocusBlur as _, kendoThemeMaps as O, createPropsContext as K, withIdHOC as U, withPropsContext as $ } from "@progress/kendo-react-common";
-import { calendarIcon as H } from "@progress/kendo-svg-icons";
-import { packageMetadata as X } from "../package-metadata.mjs";
-import { DateInput as Z } from "../dateinput/DateInput.mjs";
-import { Calendar as j } from "../calendar/components/Calendar.mjs";
-import { MAX_DATE as G, MIN_DATE as J, isInDateRange as Q, setTime as Y } from "../utils.mjs";
-import { toggleCalendar as S, messages as ee } from "../messages/index.mjs";
-import { provideLocalizationService as te, registerForLocalization as ie } from "@progress/kendo-react-intl";
-import { ToggleButton as se } from "./ToggleButton.mjs";
-import { PickerWrap as oe } from "../common/PickerWrap.mjs";
-import { PickerFloatingLabel as ae } from "../hooks/usePickerFloatingLabel.mjs";
-import { ActionSheetContent as ne } from "@progress/kendo-react-layout";
-import { AdaptiveMode as re } from "../common/AdaptiveMode.mjs";
-import { MOBILE_MEDIUM_DEVISE as le } from "../common/constants.mjs";
+import { Popup as L } from "@progress/kendo-react-popup";
+import { getDate as W, cloneDate as O } from "@progress/kendo-date-math";
+import { classNames as M, Keys as r, validatePackage as _, canUseDOM as P, AsyncFocusBlur as K, kendoThemeMaps as T, createPropsContext as U, withIdHOC as $, withPropsContext as H } from "@progress/kendo-react-common";
+import { calendarIcon as X } from "@progress/kendo-svg-icons";
+import { packageMetadata as Z } from "../package-metadata.mjs";
+import { DateInput as j } from "../dateinput/DateInput.mjs";
+import { Calendar as G } from "../calendar/components/Calendar.mjs";
+import { MAX_DATE as J, MIN_DATE as Q, isInDateRange as Y, setTime as ee } from "../utils.mjs";
+import { toggleCalendar as E, messages as te } from "../messages/index.mjs";
+import { provideLocalizationService as ie, registerForLocalization as se } from "@progress/kendo-react-intl";
+import { ToggleButton as oe } from "./ToggleButton.mjs";
+import { PickerWrap as ae } from "../common/PickerWrap.mjs";
+import { PickerFloatingLabel as ne } from "../hooks/usePickerFloatingLabel.mjs";
+import { ActionSheetContent as re } from "@progress/kendo-react-layout";
+import { AdaptiveMode as le } from "../common/AdaptiveMode.mjs";
+import { MOBILE_MEDIUM_DEVISE as de } from "../common/constants.mjs";
 const o = class o extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._dateInput = n.createRef(), this._calendar = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
@@ -31,14 +31,14 @@ const o = class o extends n.Component {
     }, this.setCalendarRef = (t) => {
       this._calendar = t;
     }, this.nextValue = (t, s) => t.value !== void 0 ? t.value : s.value, this.nextShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.renderPopup = () => {
-      const { disabled: t, min: s, max: a, weekNumber: u, focusedDate: c } = this.props, { popupClass: l, ...m } = this.props.popupSettings, f = this.show, d = this.value, g = d && L(d), v = D(
+      const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d && W(d), u = M(
         "k-calendar-container k-group k-reset",
-        l
-      ), w = {
+        f
+      ), b = {
         popupClass: "k-datepicker-popup",
-        show: f,
+        show: v,
         anchor: this._element,
-        className: v,
+        className: u,
         id: this._popupId,
         anchorAlign: {
           horizontal: "left",
@@ -48,19 +48,19 @@ const o = class o extends n.Component {
           horizontal: "left",
           vertical: "top"
         },
-        ...m
+        ...g
       }, h = {
         disabled: t,
-        value: g,
+        value: w,
         min: s,
         max: a,
-        weekNumber: u,
-        focusedDate: c,
+        weekNumber: c,
+        focusedDate: m,
         className: this.mobileMode ? "k-calendar-lg" : "",
         navigation: !this.mobileMode,
         onChange: this.handleCalendarValueChange
       };
-      return this.mobileMode ? /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }) : /* @__PURE__ */ n.createElement(this.popupComp, { ...w }, /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }));
+      return this.mobileMode ? /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }) : /* @__PURE__ */ n.createElement(this.popupComp, { ...b }, /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }));
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, s = {
         expand: this.show,
@@ -68,7 +68,7 @@ const o = class o extends n.Component {
         adaptiveTitle: this.props.adaptiveTitle,
         windowWidth: t
       };
-      return /* @__PURE__ */ n.createElement(re, { ...s }, /* @__PURE__ */ n.createElement(ne, { className: "!k-overflow-hidden" }, this.renderPopup()));
+      return /* @__PURE__ */ n.createElement(le, { ...s }, /* @__PURE__ */ n.createElement(re, { className: "!k-overflow-hidden" }, this.renderPopup()));
     }, this.handleInputValueChange = (t) => {
       this.handleValueChange(t.value, t);
     }, this.handleCalendarValueChange = (t) => {
@@ -76,7 +76,7 @@ const o = class o extends n.Component {
       this.handleValueChange(s, t);
     }, this.handleValueChange = (t, s) => {
       this.setState({
-        value: C(t || void 0)
+        value: O(t || void 0)
       }), this.valueDuringOnChange = t, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
       const { onChange: a } = this.props;
       a && a.call(void 0, {
@@ -101,7 +101,7 @@ const o = class o extends n.Component {
         return;
       }
       s && (a === r.up || a === r.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === r.up, this.setShow(a === r.down));
-    }, W(X), this.state = {
+    }, _(Z), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
       focused: !1
@@ -111,7 +111,7 @@ const o = class o extends n.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (k)
+    if (P)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -124,7 +124,7 @@ const o = class o extends n.Component {
    * The mobile mode of the DatePicker.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= le && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= de && this.props.adaptive);
   }
   /**
    * Gets the DateInput component inside the DatePicker component.
@@ -143,7 +143,7 @@ const o = class o extends n.Component {
    */
   get value() {
     const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
-    return i !== null ? C(i) : null;
+    return i !== null ? O(i) : null;
   }
   /**
    * Gets the popup state of the DatePickerWithoutContext.
@@ -182,7 +182,7 @@ const o = class o extends n.Component {
    * Represents the validity state into which the DatePicker is set.
    */
   get validity() {
-    const i = Q(this.value, this.min, this.max), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, a = this.props.valid !== void 0 ? this.props.valid : s;
+    const i = Y(this.value, this.min, this.max), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, a = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: t,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -208,7 +208,7 @@ const o = class o extends n.Component {
    */
   componentDidMount() {
     var i;
-    this.observerResize = k && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
+    this.observerResize = P && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (i = this.document) != null && i.body && this.observerResize && this.observerResize.observe(this.document.body);
   }
   /**
    * @hidden
@@ -232,78 +232,97 @@ const o = class o extends n.Component {
       rounded: t = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
       disabled: a,
-      tabIndex: u,
-      title: c,
+      tabIndex: c,
+      title: m,
       id: l,
-      format: m,
-      formatPlaceholder: f,
-      min: d,
-      max: g,
-      className: v,
-      width: w,
-      name: h,
-      validationMessage: M,
-      required: P,
-      validityStyles: T,
-      ariaLabelledBy: E,
-      ariaDescribedBy: x,
-      ariaLabel: B
-    } = this.props, z = this.show, V = this.value, b = !this.validityStyles || this.validity.valid, F = {
+      format: f,
+      formatPlaceholder: g,
+      min: v,
+      max: d,
+      className: w,
+      width: u,
+      name: b,
+      validationMessage: h,
+      required: x,
+      validityStyles: B,
+      ariaLabelledBy: V,
+      ariaDescribedBy: z,
+      ariaLabel: F,
+      placeholder: N,
+      label: y,
+      popupSettings: pe,
+      defaultValue: ce,
+      defaultShow: me,
+      value: fe,
+      popup: ge,
+      weekNumber: ve,
+      dateInput: we,
+      calendar: be,
+      toggleButton: ye,
+      onChange: Ie,
+      onBlur: Ce,
+      onFocus: De,
+      show: ke,
+      onOpen: Se,
+      pickerWrap: Oe,
+      ...I
+    } = this.props, R = this.value, C = !this.validityStyles || this.validity.valid, A = {
       disabled: a,
-      format: m,
-      formatPlaceholder: f,
+      format: f,
+      formatPlaceholder: g,
       id: l,
-      ariaLabelledBy: E,
-      ariaDescribedBy: x,
-      ariaLabel: B,
-      max: g,
-      min: d,
-      name: h,
+      ariaLabelledBy: V,
+      ariaDescribedBy: z,
+      ariaLabel: F,
+      max: d,
+      min: v,
+      name: b,
       onChange: this.handleInputValueChange,
-      required: P,
-      tabIndex: z ? -1 : u,
-      title: c,
+      required: x,
+      tabIndex: this.show ? -1 : c,
+      title: m,
       valid: this.validity.valid,
-      validationMessage: M,
-      validityStyles: T,
-      value: V,
+      validationMessage: h,
+      validityStyles: B,
+      value: R,
       label: void 0,
-      placeholder: this.state.focused ? null : this.props.placeholder,
+      placeholder: this.state.focused ? null : N,
       ariaExpanded: this.show,
       size: null,
       fillMode: null,
       rounded: null
-    }, y = te(this).toLanguageString(S, ee[S]), I = /* @__PURE__ */ n.createElement(
-      _,
+    }, D = ie(this).toLanguageString(E, te[E]), k = /* @__PURE__ */ n.createElement(
+      K,
       {
         onFocus: this.handleFocus,
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      ({ onFocus: N, onBlur: R }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      (S) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "span",
         {
-          ref: (A) => {
-            this._element = A;
+          ...y ? {} : I,
+          ref: (q) => {
+            this._element = q;
           },
-          className: D(
+          className: M(
             "k-input",
             "k-datepicker",
             {
-              [`k-input-${O.sizeMap[i] || i}`]: i,
-              [`k-rounded-${O.roundedMap[t] || t}`]: t,
+              [`k-input-${T.sizeMap[i] || i}`]: i,
+              [`k-rounded-${T.roundedMap[t] || t}`]: t,
               [`k-input-${s}`]: s,
-              "k-invalid": !b,
+              "k-invalid": !C,
               "k-required": this.required,
-              "k-disabled": this.props.disabled
+              "k-disabled": a
             },
-            v
+            w
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: w },
-          onFocus: N,
-          onBlur: R,
+          style: { width: u },
+          onFocus: S.onFocus,
+          onBlur: S.onBlur,
           onClick: this.mobileMode ? this.handleIconClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -314,7 +333,7 @@ const o = class o extends n.Component {
             readonly: this.mobileMode,
             ariaExpanded: this.show,
             ariaControls: this._popupId,
-            ...F
+            ...A
           }
         ),
         /* @__PURE__ */ n.createElement(
@@ -322,30 +341,31 @@ const o = class o extends n.Component {
           {
             type: "button",
             icon: "calendar",
-            svgIcon: H,
-            title: y,
+            svgIcon: X,
+            title: D,
             className: "k-input-button",
             rounded: null,
             onClick: this.mobileMode ? void 0 : this.handleIconClick,
-            "aria-label": y,
+            "aria-label": D,
             onMouseDown: this.handleIconMouseDown
           }
         ),
         !this.mobileMode && this.renderPopup()
       ), this.mobileMode && this.renderAdaptivePopup())
     );
-    return this.props.label ? /* @__PURE__ */ n.createElement(
-      ae,
+    return y ? /* @__PURE__ */ n.createElement(
+      ne,
       {
         dateInput: this._dateInput,
-        label: this.props.label,
+        label: y,
         editorId: l,
-        editorValid: b,
-        editorDisabled: this.props.disabled,
-        children: I,
-        style: { width: this.props.width }
+        editorValid: C,
+        editorDisabled: a,
+        children: k,
+        style: { width: u },
+        ...I
       }
-    ) : I;
+    ) : k;
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;
@@ -356,7 +376,7 @@ const o = class o extends n.Component {
     }));
   }
   mergeTime(i) {
-    return this.value && i ? Y(i, this.value) : i;
+    return this.value && i ? ee(i, this.value) : i;
   }
   nextTick(i) {
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
@@ -433,15 +453,15 @@ o.displayName = "DatePicker", o.propTypes = {
 }, o.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
-  dateInput: Z,
-  calendar: j,
-  toggleButton: se,
-  popup: q,
-  pickerWrap: oe,
+  dateInput: j,
+  calendar: G,
+  toggleButton: oe,
+  popup: L,
+  pickerWrap: ae,
   disabled: !1,
   format: "d",
-  max: G,
-  min: J,
+  max: J,
+  min: Q,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
@@ -452,11 +472,11 @@ o.displayName = "DatePicker", o.propTypes = {
   fillMode: "solid"
 };
 let p = o;
-const de = K(), he = U($(de, p));
+const ue = U(), he = $(H(ue, p));
 he.displayName = "KendoReactDatePicker";
-ie(p);
+se(p);
 export {
   he as DatePicker,
-  de as DatePickerPropsContext,
+  ue as DatePickerPropsContext,
   p as DatePickerWithoutContext
 };