@progress/kendo-react-dateinputs 16.3.0-develop.1 → 16.3.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: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;
+"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"),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: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=t=>{this.props.disabled||t.type==="focus"&&this.shouldFocusDateInput||(this.shouldFocusDateInput=!0,this.setShow(this.mobileMode||!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?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: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:M,max:k,className:C,width:x,name:E,validationMessage:q,required:F,validityStyles:R,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:R,validationMessage:q,required:F,min:M,max:k,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},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.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 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;

package/datetimepicker/DateTimePicker.mjs

@@ -121,8 +121,8 @@ const a = class a extends n.Component {
       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.handleClick = (t) => {
+      this.props.disabled || t.type === "focus" && this.shouldFocusDateInput || (this.shouldFocusDateInput = !0, this.setShow(this.mobileMode || !this.show));
     }, this.handleIconMouseDown = (t) => {
       t.preventDefault();
     }, this.handleKeyDown = (t) => {
@@ -287,7 +287,7 @@ const a = class a extends n.Component {
       autoSwitchParts: X,
       autoSwitchKeys: Y,
       allowCaretMode: Z
-    } = this.props, y = w && w.uDateTimePicker, T = !this.validityStyles || this.validity.valid, G = {
+    } = this.props, y = w && w.uDateTimePicker, D = !this.validityStyles || this.validity.valid, G = {
       id: u,
       ariaLabelledBy: L,
       ariaDescribedBy: V,
@@ -320,7 +320,7 @@ const a = class a extends n.Component {
       autoSwitchParts: X,
       autoSwitchKeys: Y,
       allowCaretMode: Z
-    }, D = /* @__PURE__ */ n.createElement(
+    }, T = /* @__PURE__ */ n.createElement(
       se,
       {
         onFocus: this.handleFocus,
@@ -342,7 +342,7 @@ const a = class a extends n.Component {
               rounded: t,
               disabled: r,
               required: this.required,
-              invalid: !T
+              invalid: !D
             }),
             { "k-focus": this.state.focused },
             F
@@ -414,12 +414,12 @@ const a = class a extends n.Component {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: u,
-        editorValid: T,
+        editorValid: D,
         editorDisabled: this.props.disabled,
-        children: D,
+        children: T,
         style: { width: this.props.width }
       }
-    ) : D;
+    ) : T;
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;

package/datetimepicker/DateTimeSelector.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 E=require("react"),D=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),f=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),S=require("../timepicker/TimePart.js"),c=require("../utils.js"),y=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),b=require("../timepicker/utils.js");function V(d){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const o=V(E),v=class v extends o.Component{constructor(s){super(s),this._calendar=null,this._timePart=null,this._cancelButton=null,this._acceptButton=null,this._buttonGroupRef=null,this._calendarWrap=null,this.shouldFocusPart=!1,this.focus=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e,unstyled:t}=this.props,i=t&&t.uDateTimePicker,n=this.localizationService.toLanguageString(r.dateTimePickerCancel,r.messages[r.dateTimePickerCancel]),h=this.localizationService.toLanguageString(r.dateTimePickerSet,r.messages[r.dateTimePickerSet]);return o.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},o.createElement(f.Button,{type:"button",themeColor:"primary",ref:l=>{this._acceptButton=l},className:a.classNames(a.uTime.accept({c:i})),disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:h,"aria-label":h},h),e&&o.createElement(f.Button,{type:"button",ref:l=>{this._cancelButton=l},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:n,"aria-label":n},n))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.MIDNIGHT_DATE);if(this.props.onReject){const i={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,i)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const i=t||(this._timePart?this._timePart.value:this.state.timeValue),n=this.mergeDate(this.state.dateValue,i);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:n,target:this})},this.handleNowClick=e=>{this.setState({timeValue:b.getNow()}),this.handleAccept(e,b.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleTabChange=e=>{const t=e==="date"?"left":"right";this.move(t)},this.handleKeyDown=e=>{const{keyCode:t,altKey:i}=e;if(!this.props.disabled)switch(t){case a.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case a.Keys.left:if(!i)return;this.move("left");return;case a.Keys.right:if(!i)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{var n;const{keyCode:t}=e,i=(n=this._buttonGroupRef)==null?void 0:n.querySelector(".k-segmented-control-button");t===a.Keys.tab&&i&&(e.preventDefault(),i.focus())},this.handleSetKeyDown=e=>{var n;const{keyCode:t}=e,i=(n=this._buttonGroupRef)==null?void 0:n.querySelector(".k-segmented-control-button");t===a.Keys.tab&&!this.props.cancelButton&&i&&(e.preventDefault(),i.focus())},this.handleDateKeyDown=e=>{var n,h,l;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),(n=this._cancelButton)!=null&&n.element?this._cancelButton.element.focus():(l=(h=this._acceptButton)==null?void 0:h.element)==null||l.focus()),t===a.Keys.enter&&e.stopPropagation()},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.enter&&e.stopPropagation()},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return D.provideLocalizationService(this)}componentDidUpdate(s,e){var t,i;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=s.value)==null?void 0:t.getTime())!==((i=this.props.value)==null?void 0:i.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState(n=>({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?n.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:n,format:h,mobileMode:l,footerActions:_,unstyled:g}=this.props,m=g&&g.uDateTimePicker,P=a.classNames(a.uDateTimePicker.wrap({c:m,date:this.state.tab==="date",time:this.state.tab==="time",disabled:s})),C=this.localizationService.toLanguageString(r.date,r.messages[r.date]),k=this.localizationService.toLanguageString(r.time,r.messages[r.time]),T={min:e,max:t,weekNumber:i,focusedDate:n,disabled:s||this.state.tab!=="date",value:this.state.dateValue,onChange:this.handleCalendarValueChange,navigation:!1,tabIndex:s||this.state.tab!=="date"?-1:void 0,mobileMode:l};return o.createElement("div",{onKeyDown:this.handleKeyDown,className:P,tabIndex:-1},o.createElement("div",{className:a.classNames(a.uDateTimePicker.buttonGroup({c:m})),ref:u=>{this._buttonGroupRef=u}},o.createElement(f.SegmentedControl,{layoutMode:"stretch",size:l?"large":void 0,value:this.state.tab,onChange:this.handleTabChange,items:[{value:"date",text:C,onKeyDown:this.handleDateKeyDown},{value:"time",text:k,onKeyDown:this.handleTimeKeyDown}]})),o.createElement("div",{className:a.classNames(a.uDateTimePicker.selector({c:m}))},o.createElement("div",{className:a.classNames(a.uDateTimePicker.calendarWrap({c:m})),ref:u=>{this._calendarWrap=u}},this.props.calendar?o.createElement(this.props.calendar,{key:this.state.tab,...T}):o.createElement(N.Calendar,{key:this.state.tab,ref:u=>{this._calendar=u},...T})),o.createElement("div",{className:a.classNames(a.uDateTimePicker.timeWrap({c:m}))},o.createElement("div",{className:a.classNames(a.uDateTimePicker.timeSelector({c:m,mobileMode:l}))},o.createElement(S.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:l,unstyled:g})))),_&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(s,e){return y.isEqualDate(s,e||c.getToday())?s:null}hasActiveButton(){if(!this._acceptButton)return!1;const s=a.getActiveElement(document);return this._acceptButton&&s===this._acceptButton.element||this._cancelButton&&s===this._cancelButton.element}mergeTime(s,e){return s&&e?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s,e):e}};v.defaultProps={footerActions:!0};let p=v;D.registerForLocalization(p);exports.DateTimeSelector=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),D=require("@progress/kendo-react-intl"),o=require("../messages/index.js"),f=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),V=require("../timepicker/TimePart.js"),c=require("../utils.js"),T=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),y=require("../timepicker/utils.js");function K(d){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const r=K(E),v=class v extends r.Component{constructor(s){super(s),this._calendar=null,this._timePart=null,this._cancelButton=null,this._acceptButton=null,this._buttonGroupRef=null,this._calendarWrap=null,this.shouldFocusPart=!1,this.focus=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e,unstyled:t}=this.props,i=t&&t.uDateTimePicker,n=this.localizationService.toLanguageString(o.dateTimePickerCancel,o.messages[o.dateTimePickerCancel]),h=this.localizationService.toLanguageString(o.dateTimePickerSet,o.messages[o.dateTimePickerSet]);return r.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},r.createElement(f.Button,{type:"button",themeColor:"primary",ref:l=>{this._acceptButton=l},className:a.classNames(a.uTime.accept({c:i})),disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:h,"aria-label":h},h),e&&r.createElement(f.Button,{type:"button",ref:l=>{this._cancelButton=l},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:n,"aria-label":n},n))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.MIDNIGHT_DATE);if(this.props.onReject){const i={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,i)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const i=t||(this._timePart?this._timePart.value:this.state.timeValue),n=this.mergeDate(this.state.dateValue,i);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:n,target:this})},this.handleNowClick=e=>{this.setState({timeValue:y.getNow()}),this.handleAccept(e,y.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleTabChange=e=>{const t=e==="date"?"left":"right";this.move(t)},this.handleKeyDown=e=>{const{keyCode:t,altKey:i}=e;if(!this.props.disabled)switch(t){case a.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case a.Keys.left:if(!i)return;this.move("left");return;case a.Keys.right:if(!i)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{var n;const{keyCode:t}=e,i=(n=this._buttonGroupRef)==null?void 0:n.querySelector(".k-segmented-control-button");t===a.Keys.tab&&i&&(e.preventDefault(),i.focus())},this.handleSetKeyDown=e=>{var n;const{keyCode:t}=e,i=(n=this._buttonGroupRef)==null?void 0:n.querySelector(".k-segmented-control-button");t===a.Keys.tab&&!this.props.cancelButton&&i&&(e.preventDefault(),i.focus())},this.handleDateKeyDown=e=>{var n,h,l;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),(n=this._cancelButton)!=null&&n.element?this._cancelButton.element.focus():(l=(h=this._acceptButton)==null?void 0:h.element)==null||l.focus()),t===a.Keys.enter&&e.stopPropagation()},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.enter&&e.stopPropagation()},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return D.provideLocalizationService(this)}componentDidUpdate(s,e){var t,i;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=s.value)==null?void 0:t.getTime())!==((i=this.props.value)==null?void 0:i.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState(n=>({dateValue:s.value&&this.props.value&&T.isEqualDate(s.value,this.props.value)?n.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:n,format:h,mobileMode:l,footerActions:_,unstyled:g}=this.props,m=g&&g.uDateTimePicker,P=a.classNames(a.uDateTimePicker.wrap({c:m,date:this.state.tab==="date",time:this.state.tab==="time",disabled:s})),C=this.localizationService.toLanguageString(o.date,o.messages[o.date]),k=this.localizationService.toLanguageString(o.time,o.messages[o.time]),S=this.localizationService.toLanguageString(o.dateTimeSelectorLabel,o.messages[o.dateTimeSelectorLabel]),b={min:e,max:t,weekNumber:i,focusedDate:n,disabled:s||this.state.tab!=="date",value:this.state.dateValue,onChange:this.handleCalendarValueChange,navigation:!1,tabIndex:s||this.state.tab!=="date"?-1:void 0,mobileMode:l};return r.createElement("div",{onKeyDown:this.handleKeyDown,className:P,tabIndex:-1,role:"group","aria-label":S},r.createElement("div",{className:a.classNames(a.uDateTimePicker.buttonGroup({c:m})),ref:u=>{this._buttonGroupRef=u}},r.createElement(f.SegmentedControl,{layoutMode:"stretch",size:l?"large":void 0,value:this.state.tab,onChange:this.handleTabChange,items:[{value:"date",text:C,onKeyDown:this.handleDateKeyDown},{value:"time",text:k,onKeyDown:this.handleTimeKeyDown}]})),r.createElement("div",{className:a.classNames(a.uDateTimePicker.selector({c:m}))},r.createElement("div",{className:a.classNames(a.uDateTimePicker.calendarWrap({c:m})),ref:u=>{this._calendarWrap=u}},this.props.calendar?r.createElement(this.props.calendar,{key:this.state.tab,...b}):r.createElement(N.Calendar,{key:this.state.tab,ref:u=>{this._calendar=u},...b})),r.createElement("div",{className:a.classNames(a.uDateTimePicker.timeWrap({c:m}))},r.createElement("div",{className:a.classNames(a.uDateTimePicker.timeSelector({c:m,mobileMode:l}))},r.createElement(V.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:l,unstyled:g})))),_&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(s,e){return T.isEqualDate(s,e||c.getToday())?s:null}hasActiveButton(){if(!this._acceptButton)return!1;const s=a.getActiveElement(document);return this._acceptButton&&s===this._acceptButton.element||this._cancelButton&&s===this._cancelButton.element}mergeTime(s,e){return s&&e?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s,e):e}};v.defaultProps={footerActions:!0};let p=v;D.registerForLocalization(p);exports.DateTimeSelector=p;

package/datetimepicker/DateTimeSelector.mjs

@@ -6,15 +6,15 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as n from "react";
-import { provideLocalizationService as N, registerForLocalization as x } from "@progress/kendo-react-intl";
-import { dateTimePickerCancel as y, messages as d, dateTimePickerSet as C, date as _, time as D } from "../messages/index.mjs";
-import { Button as T, SegmentedControl as M } from "@progress/kendo-react-buttons";
-import { Calendar as R } from "../calendar/components/Calendar.mjs";
-import { TimePart as z } from "../timepicker/TimePart.mjs";
-import { MIDNIGHT_DATE as p, MAX_TIME as A, MIN_TIME as F, getToday as L, setTime as E } from "../utils.mjs";
-import { isEqualDate as P } from "@progress/kendo-date-math";
-import { classNames as r, uDateTimePicker as u, uTime as V, Keys as h, getActiveElement as I } from "@progress/kendo-react-common";
-import { getNow as S } from "../timepicker/utils.mjs";
+import { provideLocalizationService as M, registerForLocalization as z } from "@progress/kendo-react-intl";
+import { dateTimePickerCancel as y, messages as d, dateTimePickerSet as C, date as _, time as T, dateTimeSelectorLabel as D } from "../messages/index.mjs";
+import { Button as E, SegmentedControl as R } from "@progress/kendo-react-buttons";
+import { Calendar as A } from "../calendar/components/Calendar.mjs";
+import { TimePart as L } from "../timepicker/TimePart.mjs";
+import { MIDNIGHT_DATE as p, MAX_TIME as F, MIN_TIME as I, getToday as G, setTime as P } from "../utils.mjs";
+import { isEqualDate as S } from "@progress/kendo-date-math";
+import { classNames as r, uDateTimePicker as u, uTime as V, Keys as h, getActiveElement as W } from "@progress/kendo-react-common";
+import { getNow as k } from "../timepicker/utils.mjs";
 const v = class v extends n.Component {
   constructor(s) {
     super(s), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._buttonGroupRef = null, this._calendarWrap = null, this.shouldFocusPart = !1, this.focus = (t) => {
@@ -31,7 +31,7 @@ const v = class v extends n.Component {
     }, this.dateTimeFooter = () => {
       const { cancelButton: t, unstyled: e } = this.props, a = e && e.uDateTimePicker, i = this.localizationService.toLanguageString(y, d[y]), l = this.localizationService.toLanguageString(C, d[C]);
       return /* @__PURE__ */ n.createElement("div", { className: r(u.timeFooter({ c: a })) }, /* @__PURE__ */ n.createElement(
-        T,
+        E,
         {
           type: "button",
           themeColor: "primary",
@@ -47,7 +47,7 @@ const v = class v extends n.Component {
         },
         l
       ), t && /* @__PURE__ */ n.createElement(
-        T,
+        E,
         {
           type: "button",
           ref: (o) => {
@@ -84,7 +84,7 @@ const v = class v extends n.Component {
         target: this
       });
     }, this.handleNowClick = (t) => {
-      this.setState({ timeValue: S() }), this.handleAccept(t, S());
+      this.setState({ timeValue: k() }), this.handleAccept(t, k());
     }, this.handleCalendarValueChange = (t) => {
       t.syntheticEvent.stopPropagation(), this.setState({ dateValue: t.value, tab: "time" }), this.shouldFocusPart = !0;
     }, this.handleTimeListContainerChange = (t) => {
@@ -145,24 +145,27 @@ const v = class v extends n.Component {
     return this.state.dateValue !== null;
   }
   get localizationService() {
-    return N(this);
+    return M(this);
   }
   componentDidUpdate(s, t) {
     var e, a;
     this.shouldFocusPart && this.focus({ preventScroll: !0 }), (((e = s.value) == null ? void 0 : e.getTime()) !== ((a = this.props.value) == null ? void 0 : a.getTime()) || this.state.tab !== t.tab && this.props.value) && this.setState((i) => ({
-      dateValue: s.value && this.props.value && P(s.value, this.props.value) ? i.dateValue : this.props.value,
+      dateValue: s.value && this.props.value && S(s.value, this.props.value) ? i.dateValue : this.props.value,
       timeValue: this.props.value || p
     })), this.shouldFocusPart = !1;
   }
   render() {
-    const { disabled: s, min: t, max: e, weekNumber: a, focusedDate: i, format: l, mobileMode: o, footerActions: k, unstyled: f } = this.props, m = f && f.uDateTimePicker, w = r(
+    const { disabled: s, min: t, max: e, weekNumber: a, focusedDate: i, format: l, mobileMode: o, footerActions: w, unstyled: f } = this.props, m = f && f.uDateTimePicker, B = r(
       u.wrap({
         c: m,
         date: this.state.tab === "date",
         time: this.state.tab === "time",
         disabled: s
       })
-    ), B = this.localizationService.toLanguageString(_, d[_]), K = this.localizationService.toLanguageString(D, d[D]), b = {
+    ), K = this.localizationService.toLanguageString(_, d[_]), N = this.localizationService.toLanguageString(T, d[T]), x = this.localizationService.toLanguageString(
+      D,
+      d[D]
+    ), b = {
       min: t,
       max: e,
       weekNumber: a,
@@ -174,73 +177,85 @@ const v = class v extends n.Component {
       tabIndex: s || this.state.tab !== "date" ? -1 : void 0,
       mobileMode: o
     };
-    return /* @__PURE__ */ n.createElement("div", { onKeyDown: this.handleKeyDown, className: w, tabIndex: -1 }, /* @__PURE__ */ n.createElement(
+    return /* @__PURE__ */ n.createElement(
       "div",
       {
-        className: r(u.buttonGroup({ c: m })),
-        ref: (c) => {
-          this._buttonGroupRef = c;
-        }
+        onKeyDown: this.handleKeyDown,
+        className: B,
+        tabIndex: -1,
+        role: "group",
+        "aria-label": x
       },
       /* @__PURE__ */ n.createElement(
-        M,
+        "div",
+        {
+          className: r(u.buttonGroup({ c: m })),
+          ref: (c) => {
+            this._buttonGroupRef = c;
+          }
+        },
+        /* @__PURE__ */ n.createElement(
+          R,
+          {
+            layoutMode: "stretch",
+            size: o ? "large" : void 0,
+            value: this.state.tab,
+            onChange: this.handleTabChange,
+            items: [
+              {
+                value: "date",
+                text: K,
+                onKeyDown: this.handleDateKeyDown
+              },
+              {
+                value: "time",
+                text: N,
+                onKeyDown: this.handleTimeKeyDown
+              }
+            ]
+          }
+        )
+      ),
+      /* @__PURE__ */ n.createElement("div", { className: r(u.selector({ c: m })) }, /* @__PURE__ */ n.createElement(
+        "div",
         {
-          layoutMode: "stretch",
-          size: o ? "large" : void 0,
-          value: this.state.tab,
-          onChange: this.handleTabChange,
-          items: [
-            {
-              value: "date",
-              text: B,
-              onKeyDown: this.handleDateKeyDown
+          className: r(u.calendarWrap({ c: m })),
+          ref: (c) => {
+            this._calendarWrap = c;
+          }
+        },
+        this.props.calendar ? /* @__PURE__ */ n.createElement(this.props.calendar, { key: this.state.tab, ...b }) : /* @__PURE__ */ n.createElement(
+          A,
+          {
+            key: this.state.tab,
+            ref: (c) => {
+              this._calendar = c;
             },
-            {
-              value: "time",
-              text: K,
-              onKeyDown: this.handleTimeKeyDown
-            }
-          ]
-        }
-      )
-    ), /* @__PURE__ */ n.createElement("div", { className: r(u.selector({ c: m })) }, /* @__PURE__ */ n.createElement(
-      "div",
-      {
-        className: r(u.calendarWrap({ c: m })),
-        ref: (c) => {
-          this._calendarWrap = c;
-        }
-      },
-      this.props.calendar ? /* @__PURE__ */ n.createElement(this.props.calendar, { key: this.state.tab, ...b }) : /* @__PURE__ */ n.createElement(
-        R,
+            ...b
+          }
+        )
+      ), /* @__PURE__ */ n.createElement("div", { className: r(u.timeWrap({ c: m })) }, /* @__PURE__ */ n.createElement("div", { className: r(u.timeSelector({ c: m, mobileMode: o })) }, /* @__PURE__ */ n.createElement(
+        L,
         {
-          key: this.state.tab,
+          key: 1,
+          onNowClick: this.handleNowClick,
+          disabled: s || this.state.tab !== "time",
           ref: (c) => {
-            this._calendar = c;
+            this._timePart = c;
           },
-          ...b
+          min: this.minTime || I,
+          max: this.maxTime || F,
+          steps: this.props.steps,
+          value: this.state.timeValue,
+          format: l,
+          onChange: this.handleTimeListContainerChange,
+          onMount: this.handleTimePartMount,
+          mobileMode: o,
+          unstyled: f
         }
-      )
-    ), /* @__PURE__ */ n.createElement("div", { className: r(u.timeWrap({ c: m })) }, /* @__PURE__ */ n.createElement("div", { className: r(u.timeSelector({ c: m, mobileMode: o })) }, /* @__PURE__ */ n.createElement(
-      z,
-      {
-        key: 1,
-        onNowClick: this.handleNowClick,
-        disabled: s || this.state.tab !== "time",
-        ref: (c) => {
-          this._timePart = c;
-        },
-        min: this.minTime || F,
-        max: this.maxTime || A,
-        steps: this.props.steps,
-        value: this.state.timeValue,
-        format: l,
-        onChange: this.handleTimeListContainerChange,
-        onMount: this.handleTimePartMount,
-        mobileMode: o,
-        unstyled: f
-      }
-    )))), k && this.dateTimeFooter());
+      )))),
+      w && this.dateTimeFooter()
+    );
   }
   get minTime() {
     return this.props.minTime !== void 0 ? this.props.minTime : this.normalizeRange(this.props.min, this.state.dateValue);
@@ -249,26 +264,26 @@ const v = class v extends n.Component {
     return this.props.maxTime !== void 0 ? this.props.maxTime : this.normalizeRange(this.props.max, this.state.dateValue);
   }
   normalizeRange(s, t) {
-    return P(s, t || L()) ? s : null;
+    return S(s, t || G()) ? s : null;
   }
   hasActiveButton() {
     if (!this._acceptButton)
       return !1;
-    const s = I(document);
+    const s = W(document);
     return this._acceptButton && s === this._acceptButton.element || this._cancelButton && s === this._cancelButton.element;
   }
   mergeTime(s, t) {
-    return s && t ? E(t, s) : t;
+    return s && t ? P(t, s) : t;
   }
   mergeDate(s, t) {
-    return s ? E(s, t) : t;
+    return s ? P(s, t) : t;
   }
 };
 v.defaultProps = {
   footerActions: !0
 };
 let g = v;
-x(g);
+z(g);
 export {
   g as DateTimeSelector
 };