@progress/kendo-react-dateinputs 13.4.0-develop.4 → 14.0.0-develop.1

package/datetimepicker/DateTimePicker.d.ts

@@ -288,6 +288,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
     private shouldFocusDateInput;
     private prevShow;
     private observerResize?;
+    private KendoPasteSubscription?;
     private get document();
     constructor(props: DateTimePickerProps);
     /**
@@ -344,6 +345,8 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
      * @hidden
      */
     componentWillUnmount(): void;
+    private handleSmartPasteValue;
+    private applyKendoPasteDate;
     /**
      * @hidden
      */

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"),I=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"),p=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(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(ie.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},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:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ae.AdaptiveMode,{...c},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:I.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:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===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||a.defaultProps.defaultValue,show:this.props.defaultShow||a.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?I.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:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=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:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var i;this.observerResize=o.canUseDOM&&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)}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;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:M,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:A,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:N,popup:_=J.Popup,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:M,max:k,minTime:A,maxTime:z,name:q,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:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,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:d,required:this.required,invalid:!D}),C),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._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...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(_,{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})}};a.displayName="DateTimePicker",a.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,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,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},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;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"),ne=require("../common/AdaptiveMode.js"),ae=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),a=class a 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 n=new Date(s);isNaN(n.getTime())||this.applyKendoPasteDate(n)},this.applyKendoPasteDate=t=>{if(!d.isInDateRange(t,this.min,this.max))return;const s=new Event("change",{bubbles:!0}),n={target:this._element,currentTarget:this._element,nativeEvent:s};this.handleValueChange({syntheticEvent:n,nativeEvent:s,value:t})},this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,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:n,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]),n=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:n,onApply:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleAccept(u)}}};return r.createElement(ne.AdaptiveMode,{...p},r.createElement(ae.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:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===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||a.defaultProps.defaultValue,show:this.props.defaultShow||a.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:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.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,n=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:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.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=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:p,disabled:u,tabIndex:h,title:v,id:f,format:b,formatPlaceholder:w,min:C,max:M,className:k,width:x,name:E,validationMessage:q,required:R,validityStyles:F,minTime:N,maxTime:A,ariaLabelledBy:z,ariaDescribedBy:_,popup:B=J.Popup,unstyled:S,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,y=S&&S.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:z,ariaDescribedBy:_,format:b,formatPlaceholder:w,disabled:u,title:v,validityStyles:F,validationMessage:q,required:R,min:C,max:M,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:S,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:y,size:i,fillMode:s,rounded:t,disabled:u,required:this.required,invalid:!D}),k),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._popupId,ariaHasPopup:"dialog",autoFocus:n,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:y})),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:y})),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})}};a.displayName="DateTimePicker",a.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,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,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},a.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.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;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

@@ -7,29 +7,52 @@
  */
 import * as n from "react";
 import e from "prop-types";
-import { Popup as $ } from "@progress/kendo-react-popup";
-import { cloneDate as M } from "@progress/kendo-date-math";
-import { withIdHOC as ee, createPropsContext as te, Keys as d, canUseDOM as O, AsyncFocusBlur as ie, classNames as S, uDateTimePicker as I, withPropsContext as se, withUnstyledHOC as oe, withAdaptiveModeContext as ae } from "@progress/kendo-react-common";
-import { calendarIcon as ne } from "@progress/kendo-svg-icons";
-import { DateInput as re } from "../dateinput/DateInput.mjs";
-import { Button as le } from "@progress/kendo-react-buttons";
-import { MIN_DATE as he, MAX_DATE as de, isInDateRange as ue, MAX_TIME as pe, MIN_TIME as ce } from "../utils.mjs";
-import { dateTimePickerCancel as C, messages as p, dateTimePickerSet as P, toggleDateTimeSelector as c } from "../messages/index.mjs";
-import { provideLocalizationService as m, registerForLocalization as me } from "@progress/kendo-react-intl";
-import { DateTimeSelector as fe } from "./DateTimeSelector.mjs";
-import { isInTimeRange as ge } from "../timepicker/utils.mjs";
-import { PickerFloatingLabel as ve } from "../hooks/usePickerFloatingLabel.mjs";
-import { AdaptiveMode as we } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as be } from "@progress/kendo-react-layout";
-const o = class o extends n.Component {
+import { Popup as ee } from "@progress/kendo-react-popup";
+import { cloneDate as P } from "@progress/kendo-date-math";
+import { withIdHOC as te, createPropsContext as ie, Keys as d, canUseDOM as C, subscribeToKendoPaste as se, AsyncFocusBlur as oe, classNames as S, uDateTimePicker as D, withPropsContext as ae, withUnstyledHOC as ne, withAdaptiveModeContext as re } from "@progress/kendo-react-common";
+import { calendarIcon as le } from "@progress/kendo-svg-icons";
+import { DateInput as he } from "../dateinput/DateInput.mjs";
+import { Button as de } from "@progress/kendo-react-buttons";
+import { isInDateRange as M, MIN_DATE as ue, MAX_DATE as pe, MAX_TIME as ce, MIN_TIME as me } from "../utils.mjs";
+import { dateTimePickerCancel as O, messages as p, dateTimePickerSet as x, toggleDateTimeSelector as c } from "../messages/index.mjs";
+import { provideLocalizationService as m, registerForLocalization as fe } from "@progress/kendo-react-intl";
+import { DateTimeSelector as ge } from "./DateTimeSelector.mjs";
+import { isInTimeRange as ve } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as we } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as be } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
+const a = class a extends n.Component {
   constructor(i) {
-    super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(i), this._element = null, this._dateInput = n.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 o = new Date(s);
+      isNaN(o.getTime()) || this.applyKendoPasteDate(o);
+    }, this.applyKendoPasteDate = (t) => {
+      if (!M(t, this.min, this.max))
+        return;
+      const s = new Event("change", { bubbles: !0 }), o = {
+        target: this._element,
+        currentTarget: this._element,
+        nativeEvent: s
+      };
+      this.handleValueChange({
+        syntheticEvent: o,
+        nativeEvent: s,
+        value: t
+      });
+    }, this.focus = () => {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
-      const { disabled: t, minTime: s, maxTime: a, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
+      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
       return /* @__PURE__ */ n.createElement(
-        fe,
+        ge,
         {
           ref: (w) => {
             this._dateTimeSelector = w;
@@ -44,7 +67,7 @@ const o = class o extends n.Component {
           min: this.min,
           max: this.max,
           minTime: s,
-          maxTime: a,
+          maxTime: o,
           focusedDate: u,
           format: h,
           calendar: l,
@@ -55,11 +78,11 @@ const o = class o extends n.Component {
       );
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, s = m(this).toLanguageString(
-        C,
-        p[C]
-      ), a = m(this).toLanguageString(
-        P,
-        p[P]
+        O,
+        p[O]
+      ), o = m(this).toLanguageString(
+        x,
+        p[x]
       ), h = {
         expand: this.show,
         onClose: this.handleBlur,
@@ -72,19 +95,19 @@ const o = class o extends n.Component {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
           },
-          applyText: a,
+          applyText: o,
           onApply: (l) => {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
           }
         }
       };
-      return /* @__PURE__ */ n.createElement(we, { ...h }, /* @__PURE__ */ n.createElement(be, null, this.renderPicker()));
+      return /* @__PURE__ */ n.createElement(be, { ...h }, /* @__PURE__ */ n.createElement(ye, null, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (t) => {
       this.setState({
-        value: M(t.value || void 0)
+        value: P(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, {
@@ -103,15 +126,15 @@ const o = class o extends n.Component {
     }, this.handleIconMouseDown = (t) => {
       t.preventDefault();
     }, this.handleKeyDown = (t) => {
-      const { altKey: s, keyCode: a } = t;
-      if (a === d.esc) {
+      const { altKey: s, keyCode: o } = t;
+      if (o === d.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (a === d.up || a === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === d.up, this.setShow(a === d.down));
+      s && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.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 || o.defaultProps.defaultValue,
-      show: this.props.defaultShow || o.defaultProps.defaultShow,
+      value: this.props.defaultValue || a.defaultProps.defaultValue,
+      show: this.props.defaultShow || a.defaultProps.defaultShow,
       focused: !1
     };
   }
@@ -119,7 +142,7 @@ const o = class o extends n.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (O)
+    if (C)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -139,7 +162,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 ? M(i) : null;
+    return i !== null ? P(i) : null;
   }
   /**
    * Gets the popup state of the DateTimePicker.
@@ -161,21 +184,21 @@ const o = class o extends n.Component {
     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 : o.defaultProps.min;
+    return this.props.min !== void 0 ? this.props.min : a.defaultProps.min;
   }
   get max() {
-    return this.props.max !== void 0 ? this.props.max : o.defaultProps.max;
+    return this.props.max !== void 0 ? this.props.max : a.defaultProps.max;
   }
   /**
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const i = ue(this.value, this.min, this.max) && ge(this.value, this.props.minTime || ce, this.props.maxTime || pe), 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 = M(this.value, this.min, this.max) && ve(this.value, this.props.minTime || me, this.props.maxTime || ce), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, o = 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,
+      valid: o,
       valueMissing: this.value === null
     };
   }
@@ -183,7 +206,7 @@ const o = class o extends n.Component {
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : o.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -195,14 +218,21 @@ const o = class o extends n.Component {
    * @hidden
    */
   get dateInputComp() {
-    return this.props.dateInput || o.defaultProps.dateInput;
+    return this.props.dateInput || a.defaultProps.dateInput;
   }
   /**
    * @hidden
    */
   componentDidMount() {
-    var i;
-    this.observerResize = O && 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);
+    var t;
+    this.observerResize = C && 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 = se(this._element, {
+      fieldName: i,
+      onValueChange: (s) => {
+        this.handleSmartPasteValue(s);
+      }
+    });
   }
   /**
    * @hidden
@@ -217,18 +247,18 @@ const o = class o extends n.Component {
    * @hidden
    */
   componentWillUnmount() {
-    var i;
-    clearTimeout(this.nextTickId), (i = this.document) != null && i.body && this.observerResize && this.observerResize.disconnect();
+    var i, t;
+    clearTimeout(this.nextTickId), (i = this.document) != null && i.body && this.observerResize && this.observerResize.disconnect(), (t = this.KendoPasteSubscription) == null || t.unsubscribe();
   }
   /**
    * @hidden
    */
   render() {
     const {
-      size: i = o.defaultProps.size,
-      rounded: t = o.defaultProps.rounded,
-      fillMode: s = o.defaultProps.fillMode,
-      autoFocus: a = o.defaultProps.autoFocus,
+      size: i = a.defaultProps.size,
+      rounded: t = a.defaultProps.rounded,
+      fillMode: s = a.defaultProps.fillMode,
+      autoFocus: o = a.defaultProps.autoFocus,
       inputAttributes: h,
       disabled: l,
       tabIndex: r,
@@ -236,28 +266,28 @@ const o = class o extends n.Component {
       id: u,
       format: v,
       formatPlaceholder: w,
-      min: x,
+      min: E,
       max: k,
-      className: E,
-      width: F,
-      name: A,
+      className: F,
+      width: A,
+      name: N,
       validationMessage: R,
       required: B,
       validityStyles: z,
-      minTime: N,
-      maxTime: _,
+      minTime: _,
+      maxTime: K,
       ariaLabelledBy: V,
       ariaDescribedBy: q,
-      popup: L = $,
+      popup: L = ee,
       unstyled: b,
-      autoFill: K,
-      twoDigitYearMax: U,
-      enableMouseWheel: j,
-      autoCorrectParts: H,
-      autoSwitchParts: W,
-      autoSwitchKeys: X,
-      allowCaretMode: Y
-    } = this.props, y = b && b.uDateTimePicker, D = !this.validityStyles || this.validity.valid, Z = {
+      autoFill: U,
+      twoDigitYearMax: j,
+      enableMouseWheel: H,
+      autoCorrectParts: W,
+      autoSwitchParts: X,
+      autoSwitchKeys: Y,
+      allowCaretMode: Z
+    } = this.props, y = b && b.uDateTimePicker, T = !this.validityStyles || this.validity.valid, G = {
       id: u,
       ariaLabelledBy: V,
       ariaDescribedBy: q,
@@ -268,11 +298,11 @@ const o = class o extends n.Component {
       validityStyles: z,
       validationMessage: R,
       required: B,
-      min: x,
+      min: E,
       max: k,
-      minTime: N,
-      maxTime: _,
-      name: A,
+      minTime: _,
+      maxTime: K,
+      name: N,
       tabIndex: this.show ? -1 : r,
       valid: this.validity.valid,
       value: this.value,
@@ -282,43 +312,43 @@ const o = class o extends n.Component {
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaExpanded: this.show,
       unstyled: b,
-      autoFill: K,
-      twoDigitYearMax: U,
-      enableMouseWheel: j,
-      autoCorrectParts: H,
-      autoSwitchParts: W,
-      autoSwitchKeys: X,
-      allowCaretMode: Y
-    }, T = /* @__PURE__ */ n.createElement(
-      ie,
+      autoFill: U,
+      twoDigitYearMax: j,
+      enableMouseWheel: H,
+      autoCorrectParts: W,
+      autoSwitchParts: X,
+      autoSwitchKeys: Y,
+      allowCaretMode: Z
+    }, I = /* @__PURE__ */ n.createElement(
+      oe,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: G, onBlur: J }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: J, onBlur: Q }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "div",
         {
-          ref: (Q) => {
-            this._element = Q;
+          ref: ($) => {
+            this._element = $;
           },
           className: S(
-            I.wrapper({
+            D.wrapper({
               c: y,
               size: i,
               fillMode: s,
               rounded: t,
               disabled: l,
               required: this.required,
-              invalid: !D
+              invalid: !T
             }),
-            E
+            F
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: F },
-          onFocus: this.mobileMode ? this.handleClick : G,
-          onBlur: J,
+          style: { width: A },
+          onFocus: this.mobileMode ? this.handleClick : J,
+          onBlur: Q,
           onClick: this.mobileMode ? this.handleClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -328,25 +358,25 @@ const o = class o extends n.Component {
             ariaRole: "combobox",
             ariaControls: this._popupId,
             ariaHasPopup: "dialog",
-            autoFocus: a,
+            autoFocus: o,
             inputAttributes: h,
-            ...Z
+            ...G
           }
         ),
         /* @__PURE__ */ n.createElement(
-          le,
+          de,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: ne,
+            svgIcon: le,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
             title: m(this).toLanguageString(
               c,
               p[c]
             ),
-            className: S(I.inputButton({ c: y })),
+            className: S(D.inputButton({ c: y })),
             fillMode: s,
             "aria-label": m(this).toLanguageString(
               c,
@@ -360,7 +390,7 @@ const o = class o extends n.Component {
             show: this.show,
             animate: this.element !== null,
             anchor: this.element,
-            popupClass: S(I.popup({ c: y })),
+            popupClass: S(D.popup({ c: y })),
             id: this._popupId,
             anchorAlign: {
               horizontal: "left",
@@ -376,17 +406,17 @@ const o = class o extends n.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ n.createElement(
-      ve,
+      we,
       {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: u,
-        editorValid: D,
+        editorValid: T,
         editorDisabled: this.props.disabled,
-        children: T,
+        children: I,
         style: { width: this.props.width }
       }
-    ) : T;
+    ) : I;
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;
@@ -404,7 +434,7 @@ const o = class o extends n.Component {
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-o.displayName = "DateTimePicker", o.propTypes = {
+a.displayName = "DateTimePicker", a.propTypes = {
   className: e.string,
   defaultShow: e.bool,
   defaultValue: e.instanceOf(Date),
@@ -473,38 +503,38 @@ o.displayName = "DateTimePicker", o.propTypes = {
   fillMode: e.oneOf(["solid", "flat", "outline"]),
   autoFocus: e.bool,
   inputAttributes: e.object
-}, o.defaultProps = {
+}, a.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: de,
-  min: he,
+  max: pe,
+  min: ue,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: re,
+  dateInput: he,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
   autoFocus: !1
 };
-let f = o;
-const ye = te(), Se = ee(
-  se(
-    ye,
-    oe(
-      ae(f)
+let f = a;
+const Se = ie(), De = te(
+  ae(
+    Se,
+    ne(
+      re(f)
     )
   )
 );
-Se.displayName = "KendoReactDateTimePicker";
-me(f);
+De.displayName = "KendoReactDateTimePicker";
+fe(f);
 export {
-  Se as DateTimePicker,
-  ye as DateTimePickerPropsContext,
+  De as DateTimePicker,
+  Se as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };