@progress/kendo-react-dateinputs 15.2.0-develop.1 → 15.2.0-develop.2

package/datetimepicker/DateTimePicker.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 G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),P=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),d=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("../common/AdaptiveMode.js"),ne=require("@progress/kendo-react-layout");function re(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=re(G),n=class n extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.handleSmartPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteDate(t);return}const s=t!=null?String(t):"";if(!s)return;const a=new Date(s);isNaN(a.getTime())||this.applyKendoPasteDate(a)},this.applyKendoPasteDate=t=>{if(!d.isInDateRange(t,this.min,this.max))return;const s=new Event("change",{bubbles:!0}),a={target:this._element,currentTarget:this._element,nativeEvent:s};this.handleValueChange({syntheticEvent:a,nativeEvent:s,value:t})},this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:a,format:p,calendar:u,cancelButton:h,weekNumber:v,focusedDate:f,unstyled:b}=this.props;return r.createElement(ie.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:h,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:f,format:p,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:b})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),p={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleReject(u)},applyText:a,onApply:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleAccept(u)}}};return r.createElement(ae.AdaptiveMode,{...p},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:P.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.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.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:a}=t;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===o.Keys.up,this.setShow(a===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?P.cloneDate(i):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 mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get validity(){const i=d.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||d.MIN_TIME,this.props.maxTime||d.MAX_TIME),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,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:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||n.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const i=this.props.name||this.props.id;this.KendoPasteSubscription=o.subscribeToKendoPaste(this._element,{fieldName:i,onValueChange:s=>{this.handleSmartPasteValue(s)}})}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i,t;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:i=n.defaultProps.size,rounded:t=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,inputAttributes:p,disabled:u,tabIndex:h,title:v,id:f,format:b,formatPlaceholder:w,min:k,max:C,className:M,width:x,name:E,validationMessage:q,required:R,validityStyles:F,minTime:N,maxTime:A,ariaLabelledBy:z,ariaDescribedBy:_,popup:B=J.Popup,unstyled:y,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:z,ariaDescribedBy:_,ariaLabel:this.props.ariaLabel,format:b,formatPlaceholder:w,disabled:u,title:v,validityStyles:F,validationMessage:q,required:R,min:k,max:C,minTime:N,maxTime:A,name:E,tabIndex:this.show?-1:h,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:y,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:u,required:this.required,invalid:!D}),{"k-focus":this.state.focused},M),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,ariaHasPopup:"dialog",autoFocus:a,inputAttributes:p,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(B,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};n.displayName="DateTimePicker",n.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,ariaLabel:e.string,ariaDescribedBy: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}),dateInput:e.elementType,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,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:d.MAX_DATE,min:d.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=n;const I=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(I,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=I;exports.DateTimePickerWithoutContext=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),P=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),d=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("../common/AdaptiveMode.js"),ne=require("@progress/kendo-react-layout");function re(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=re(G),n=class n extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.handleSmartPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteDate(t);return}const s=t!=null?String(t):"";if(!s)return;const a=new Date(s);isNaN(a.getTime())||this.applyKendoPasteDate(a)},this.applyKendoPasteDate=t=>{if(!d.isInDateRange(t,this.min,this.max))return;const s=new Event("change",{bubbles:!0}),a={target:this._element,currentTarget:this._element,nativeEvent:s};this.handleValueChange({syntheticEvent:a,nativeEvent:s,value:t})},this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:a,format:p,calendar:h,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:b}=this.props;return r.createElement(ie.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:f,format:p,calendar:h,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:b})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),p={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:h=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(h)},applyText:a,onApply:h=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(h)}}};return r.createElement(ae.AdaptiveMode,{...p},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:P.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.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.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:a}=t;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===o.Keys.up,this.setShow(a===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?P.cloneDate(i):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 mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get validity(){const i=d.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||d.MIN_TIME,this.props.maxTime||d.MAX_TIME),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,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:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||n.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const i=this.props.name||this.props.id;this.KendoPasteSubscription=o.subscribeToKendoPaste(this._element,{fieldName:i,onValueChange:s=>{this.handleSmartPasteValue(s)}})}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i,t;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:i=n.defaultProps.size,rounded:t=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,inputAttributes:p,disabled:h,tabIndex:u,title:v,id:f,format:b,formatPlaceholder:w,min:k,max:C,className:M,width:x,name:E,validationMessage:q,required:R,validityStyles:F,minTime:N,maxTime:A,ariaLabelledBy:z,ariaDescribedBy:_,popup:B=J.Popup,unstyled:y,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:z,ariaDescribedBy:_,ariaLabel:this.props.ariaLabel,format:b,formatPlaceholder:w,disabled:h,title:v,validityStyles:F,validationMessage:q,required:R,min:k,max:C,minTime:N,maxTime:A,name:E,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:y,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:h,required:this.required,invalid:!D}),{"k-focus":this.state.focused},M),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,ariaHasPopup:"dialog",autoFocus:a,inputAttributes:p,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",disabled:h,icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(B,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};n.displayName="DateTimePicker",n.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,ariaLabel:e.string,ariaDescribedBy: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}),dateInput:e.elementType,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,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:d.MAX_DATE,min:d.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=n;const I=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(I,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=I;exports.DateTimePickerWithoutContext=g;

package/datetimepicker/DateTimePicker.mjs

@@ -50,14 +50,14 @@ const a = class a extends n.Component {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
-      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
+      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: r, cancelButton: l, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
       return /* @__PURE__ */ n.createElement(
         ge,
         {
           ref: (b) => {
             this._dateTimeSelector = b;
           },
-          cancelButton: r,
+          cancelButton: l,
           steps: this.props.steps,
           value: this.value,
           onChange: this.handleValueChange,
@@ -70,7 +70,7 @@ const a = class a extends n.Component {
           maxTime: o,
           focusedDate: u,
           format: h,
-          calendar: l,
+          calendar: r,
           mobileMode: this.mobileMode,
           footerActions: !this.mobileMode,
           unstyled: v
@@ -91,14 +91,14 @@ const a = class a extends n.Component {
         windowWidth: t,
         footer: {
           cancelText: s,
-          onCancel: (l) => {
-            var r;
-            return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
+          onCancel: (r) => {
+            var l;
+            return (l = this._dateTimeSelector) == null ? void 0 : l.handleReject(r);
           },
           applyText: o,
-          onApply: (l) => {
-            var r;
-            return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
+          onApply: (r) => {
+            var l;
+            return (l = this._dateTimeSelector) == null ? void 0 : l.handleAccept(r);
           }
         }
       };
@@ -260,8 +260,8 @@ const a = class a extends n.Component {
       fillMode: s = a.defaultProps.fillMode,
       autoFocus: o = a.defaultProps.autoFocus,
       inputAttributes: h,
-      disabled: l,
-      tabIndex: r,
+      disabled: r,
+      tabIndex: l,
       title: g,
       id: u,
       format: v,
@@ -294,7 +294,7 @@ const a = class a extends n.Component {
       ariaLabel: this.props.ariaLabel,
       format: v,
       formatPlaceholder: b,
-      disabled: l,
+      disabled: r,
       title: g,
       validityStyles: z,
       validationMessage: R,
@@ -304,7 +304,7 @@ const a = class a extends n.Component {
       minTime: _,
       maxTime: K,
       name: N,
-      tabIndex: this.show ? -1 : r,
+      tabIndex: this.show ? -1 : l,
       valid: this.validity.valid,
       value: this.value,
       onChange: this.handleValueChange,
@@ -340,7 +340,7 @@ const a = class a extends n.Component {
               size: i,
               fillMode: s,
               rounded: t,
-              disabled: l,
+              disabled: r,
               required: this.required,
               invalid: !T
             }),
@@ -370,6 +370,7 @@ const a = class a extends n.Component {
           {
             tabIndex: -1,
             type: "button",
+            disabled: r,
             icon: "calendar",
             svgIcon: le,
             onMouseDown: this.handleIconMouseDown,