@progress/kendo-react-dateinputs 8.3.0-develop.10 → 8.3.0-develop.12

package/datepicker/DatePicker.mjs

@@ -206,7 +206,7 @@ const o = class o extends n.Component {
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : o.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : !1;
   }
   /**
    * @hidden
@@ -279,7 +279,7 @@ const o = class o extends n.Component {
       touched: Be,
       modified: Fe,
       ...I
-    } = this.props, A = this.value, C = !this.validityStyles || this.validity.valid, q = {
+    } = this.props, A = this.value, C = !this.validityStyles || this.validity.valid, L = {
       disabled: a,
       format: f,
       formatPlaceholder: g,
@@ -316,8 +316,8 @@ const o = class o extends n.Component {
         "span",
         {
           ...y ? {} : I,
-          ref: (L) => {
-            this._element = L;
+          ref: (q) => {
+            this._element = q;
           },
           className: k(
             "k-input",
@@ -347,7 +347,7 @@ const o = class o extends n.Component {
             ariaExpanded: this.show,
             ariaControls: this._popupId,
             autoFocus: R,
-            ...q
+            ...L
           }
         ),
         /* @__PURE__ */ n.createElement(
@@ -397,7 +397,7 @@ const o = class o extends n.Component {
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
   }
   calculateMedia(i) {
-    for (let t of i)
+    for (const t of i)
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
@@ -481,7 +481,6 @@ o.displayName = "DatePicker", o.propTypes = {
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
-  required: !1,
   validityStyles: !0,
   size: "medium",
   rounded: "medium",

package/datetimepicker/DateTimePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),e=require("prop-types"),U=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),H=require("@progress/kendo-svg-icons"),W=require("../dateinput/DateInput.js"),X=require("@progress/kendo-react-buttons"),Z=require("../package-metadata.js"),p=require("../utils.js"),$=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),G=require("./DateTimeSelector.js"),J=require("../timepicker/utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout");function te(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const r=te(j),n=class n extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const i=this.dateInputElement();i&&i.focus()},this.renderPicker=()=>{const{disabled:i,minTime:s,maxTime:a,format:h,calendar:d,cancelButton:u,weekNumber:f,focusedDate:v}=this.props;return r.createElement(G.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:f,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:v,format:h,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode})},this.renderAdaptivePopup=()=>{const{windowWidth:i=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]),h={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:a,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(Y.AdaptiveMode,{...h},r.createElement(ee.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:I.cloneDate(i.value||void 0)}),this.valueDuringOnChange=i.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=i=>{i.preventDefault()},this.handleKeyDown=i=>{const{altKey:s,keyCode:a}=i;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(i.preventDefault(),i.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"),o.validatePackage(Z.packageMetadata),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 t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?I.cloneDate(t):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(){return!!(this.state.windowWidth&&this.state.windowWidth<=$.MOBILE_MEDIUM_DEVISE&&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 t=p.isInDateRange(this.value,this.min,this.max)&&J.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,a=this.props.valid!==void 0?this.props.valid:s;return{customError:i,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:n.defaultProps.required}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)}componentDidUpdate(){const t=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),t&&!this.show&&this.shouldFocusDateInput&&t.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=n.defaultProps.size,rounded:i=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,disabled:h,tabIndex:d,title:u,id:f,format:v,formatPlaceholder:w,min:O,max:k,className:M,width:C,name:x,validationMessage:q,required:E,validityStyles:R,minTime:F,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:A,popup:N=U.Popup,unstyled:y}=this.props,b=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,L={id:f,ariaLabelledBy:B,ariaDescribedBy:A,format:v,formatPlaceholder:w,disabled:h,title:u,validityStyles:R,validationMessage:q,required:E,min:O,max:k,minTime:F,maxTime:z,name:x,tabIndex:this.show?-1:d,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,size:null,fillMode:null,rounded:null},S=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:_,onBlur:V})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:K=>{this._element=K},className:o.classNames(o.uDateTimePicker.wrapper({c:b,size:t,fillMode:s,rounded:i,disabled:h,required:this.required,invalid:!D}),M),onKeyDown:this.handleKeyDown,style:{width:C},onFocus:this.mobileMode?void 0:_,onBlur:V,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode,autoFocus:a,...L}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:H.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:b})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(N,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:b})),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(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}setShow(t){const{onOpen:i,onClose:s}=this.props;this.show!==t&&(this.setState({show:t}),t&&i&&i.call(void 0,{target:this}),!t&&s&&s.call(void 0,{target:this}))}nextTick(t){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>t())}calculateMedia(t){for(const i of t)this.setState({windowWidth:i.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,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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,cancelButton:!0,dateInput:W.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=n;const T=o.createPropsContext(),P=o.withIdHOC(o.withPropsContext(T,o.withUnstyledHOC(g)));P.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=P;exports.DateTimePickerPropsContext=T;exports.DateTimePickerWithoutContext=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),e=require("prop-types"),U=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),H=require("@progress/kendo-svg-icons"),W=require("../dateinput/DateInput.js"),X=require("@progress/kendo-react-buttons"),Z=require("../package-metadata.js"),p=require("../utils.js"),$=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),G=require("./DateTimeSelector.js"),J=require("../timepicker/utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout");function te(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const r=te(j),n=class n extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const i=this.dateInputElement();i&&i.focus()},this.renderPicker=()=>{const{disabled:i,minTime:s,maxTime:a,format:h,calendar:d,cancelButton:u,weekNumber:f,focusedDate:v}=this.props;return r.createElement(G.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:f,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:v,format:h,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode})},this.renderAdaptivePopup=()=>{const{windowWidth:i=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]),h={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:a,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(Y.AdaptiveMode,{...h},r.createElement(ee.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:I.cloneDate(i.value||void 0)}),this.valueDuringOnChange=i.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=i=>{i.preventDefault()},this.handleKeyDown=i=>{const{altKey:s,keyCode:a}=i;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(i.preventDefault(),i.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"),o.validatePackage(Z.packageMetadata),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 t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?I.cloneDate(t):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(){return!!(this.state.windowWidth&&this.state.windowWidth<=$.MOBILE_MEDIUM_DEVISE&&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 t=p.isInDateRange(this.value,this.min,this.max)&&J.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,a=this.props.valid!==void 0?this.props.valid:s;return{customError:i,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)}componentDidUpdate(){const t=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),t&&!this.show&&this.shouldFocusDateInput&&t.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=n.defaultProps.size,rounded:i=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,disabled:h,tabIndex:d,title:u,id:f,format:v,formatPlaceholder:w,min:O,max:k,className:M,width:C,name:x,validationMessage:E,required:q,validityStyles:R,minTime:F,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:A,popup:N=U.Popup,unstyled:y}=this.props,b=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,L={id:f,ariaLabelledBy:B,ariaDescribedBy:A,format:v,formatPlaceholder:w,disabled:h,title:u,validityStyles:R,validationMessage:E,required:q,min:O,max:k,minTime:F,maxTime:z,name:x,tabIndex:this.show?-1:d,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,size:null,fillMode:null,rounded:null},S=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:_,onBlur:V})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:K=>{this._element=K},className:o.classNames(o.uDateTimePicker.wrapper({c:b,size:t,fillMode:s,rounded:i,disabled:h,required:this.required,invalid:!D}),M),onKeyDown:this.handleKeyDown,style:{width:C},onFocus:this.mobileMode?void 0:_,onBlur:V,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",readonly:this.mobileMode,autoFocus:a,...L}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:H.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:b})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(N,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:b})),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(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}setShow(t){const{onOpen:i,onClose:s}=this.props;this.show!==t&&(this.setState({show:t}),t&&i&&i.call(void 0,{target:this}),!t&&s&&s.call(void 0,{target:this}))}nextTick(t){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>t())}calculateMedia(t){for(const i of t)this.setState({windowWidth:i.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,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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},n.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:W.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=n;const T=o.createPropsContext(),P=o.withIdHOC(o.withPropsContext(T,o.withUnstyledHOC(g)));P.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=P;exports.DateTimePickerPropsContext=T;exports.DateTimePickerWithoutContext=g;

package/datetimepicker/DateTimePicker.mjs

@@ -10,7 +10,7 @@ import * as a from "react";
 import e from "prop-types";
 import { Popup as H } from "@progress/kendo-react-popup";
 import { cloneDate as T } from "@progress/kendo-date-math";
-import { Keys as h, validatePackage as W, canUseDOM as O, AsyncFocusBlur as X, classNames as b, uDateTimePicker as y, createPropsContext as Z, withIdHOC as G, withPropsContext as J, withUnstyledHOC as Q } from "@progress/kendo-react-common";
+import { Keys as d, validatePackage as W, canUseDOM as O, AsyncFocusBlur as X, classNames as b, uDateTimePicker as y, createPropsContext as Z, withIdHOC as G, withPropsContext as J, withUnstyledHOC as Q } from "@progress/kendo-react-common";
 import { calendarIcon as Y } from "@progress/kendo-svg-icons";
 import { DateInput as $ } from "../dateinput/DateInput.mjs";
 import { Button as ee } from "@progress/kendo-react-buttons";
@@ -19,8 +19,8 @@ import { MAX_DATE as ie, MIN_DATE as se, isInDateRange as oe, MAX_TIME as ne, MI
 import { MOBILE_MEDIUM_DEVISE as re } from "../common/constants.mjs";
 import { dateTimePickerCancel as M, messages as p, dateTimePickerSet as P, toggleDateTimeSelector as c } from "../messages/index.mjs";
 import { provideLocalizationService as m, registerForLocalization as le } from "@progress/kendo-react-intl";
-import { DateTimeSelector as de } from "./DateTimeSelector.mjs";
-import { isInTimeRange as he } from "../timepicker/utils.mjs";
+import { DateTimeSelector as he } from "./DateTimeSelector.mjs";
+import { isInTimeRange as de } from "../timepicker/utils.mjs";
 import { PickerFloatingLabel as ue } from "../hooks/usePickerFloatingLabel.mjs";
 import { AdaptiveMode as pe } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as ce } from "@progress/kendo-react-layout";
@@ -34,14 +34,14 @@ const o = class o extends a.Component {
         disabled: i,
         minTime: s,
         maxTime: n,
-        format: d,
+        format: h,
         calendar: l,
         cancelButton: r,
         weekNumber: u,
         focusedDate: g
       } = this.props;
       return /* @__PURE__ */ a.createElement(
-        de,
+        he,
         {
           ref: (v) => {
             this._dateTimeSelector = v;
@@ -58,14 +58,14 @@ const o = class o extends a.Component {
           minTime: s,
           maxTime: n,
           focusedDate: g,
-          format: d,
+          format: h,
           calendar: l,
           mobileMode: this.mobileMode,
           footerActions: !this.mobileMode
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(M, p[M]), n = m(this).toLanguageString(P, p[P]), d = {
+      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(M, p[M]), n = m(this).toLanguageString(P, p[P]), h = {
         expand: this.show,
         onClose: this.handleBlur,
         adaptiveTitle: this.props.adaptiveTitle,
@@ -83,7 +83,7 @@ const o = class o extends a.Component {
           }
         }
       };
-      return /* @__PURE__ */ a.createElement(pe, { ...d }, /* @__PURE__ */ a.createElement(ce, { overflowHidden: !0 }, this.renderPicker()));
+      return /* @__PURE__ */ a.createElement(pe, { ...h }, /* @__PURE__ */ a.createElement(ce, { overflowHidden: !0 }, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (i) => {
@@ -108,11 +108,11 @@ const o = class o extends a.Component {
       i.preventDefault();
     }, this.handleKeyDown = (i) => {
       const { altKey: s, keyCode: n } = i;
-      if (n === h.esc) {
+      if (n === d.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (n === h.up || n === h.down) && (i.preventDefault(), i.stopPropagation(), this.shouldFocusDateInput = n === h.up, this.setShow(n === h.down));
+      s && (n === d.up || n === d.down) && (i.preventDefault(), i.stopPropagation(), this.shouldFocusDateInput = n === d.up, this.setShow(n === d.down));
     }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), W(te), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
@@ -173,7 +173,7 @@ const o = class o extends a.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const t = oe(this.value, this.min, this.max) && he(this.value, this.props.minTime || ae, this.props.maxTime || ne), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, n = this.props.valid !== void 0 ? this.props.valid : s;
+    const t = oe(this.value, this.min, this.max) && de(this.value, this.props.minTime || ae, this.props.maxTime || ne), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, n = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: i,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -192,7 +192,7 @@ const o = class o extends a.Component {
    * @hidden
    */
   get required() {
-    return this.props.required !== void 0 ? this.props.required : o.defaultProps.required;
+    return this.props.required !== void 0 ? this.props.required : !1;
   }
   /**
    * @hidden
@@ -230,7 +230,7 @@ const o = class o extends a.Component {
       rounded: i = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
       autoFocus: n = o.defaultProps.autoFocus,
-      disabled: d,
+      disabled: h,
       tabIndex: l,
       title: r,
       id: u,
@@ -246,17 +246,17 @@ const o = class o extends a.Component {
       validityStyles: z,
       minTime: A,
       maxTime: N,
-      ariaLabelledBy: q,
-      ariaDescribedBy: V,
-      popup: L = H,
+      ariaLabelledBy: V,
+      ariaDescribedBy: L,
+      popup: _ = H,
       unstyled: I
-    } = this.props, w = I && I.uDateTimePicker, D = !this.validityStyles || this.validity.valid, _ = {
+    } = this.props, w = I && I.uDateTimePicker, D = !this.validityStyles || this.validity.valid, q = {
       id: u,
-      ariaLabelledBy: q,
-      ariaDescribedBy: V,
+      ariaLabelledBy: V,
+      ariaDescribedBy: L,
       format: g,
       formatPlaceholder: v,
-      disabled: d,
+      disabled: h,
       title: r,
       validityStyles: z,
       validationMessage: R,
@@ -297,7 +297,7 @@ const o = class o extends a.Component {
               size: t,
               fillMode: s,
               rounded: i,
-              disabled: d,
+              disabled: h,
               required: this.required,
               invalid: !D
             }),
@@ -315,9 +315,10 @@ const o = class o extends a.Component {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this._popupId,
+            ariaHasPopup: "dialog",
             readonly: this.mobileMode,
             autoFocus: n,
-            ..._
+            ...q
           }
         ),
         /* @__PURE__ */ a.createElement(
@@ -337,7 +338,7 @@ const o = class o extends a.Component {
           }
         ),
         /* @__PURE__ */ a.createElement(
-          L,
+          _,
           {
             show: this.show,
             animate: this.element !== null,
@@ -460,7 +461,6 @@ o.displayName = "DateTimePicker", o.propTypes = {
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
-  required: !1,
   validityStyles: !0,
   cancelButton: !0,
   dateInput: $,

package/datetimepicker/DateTimeSelector.mjs

@@ -155,17 +155,7 @@ const y = class y extends i.Component {
     }), this.shouldFocusPart = !1;
   }
   render() {
-    const {
-      disabled: a,
-      min: t,
-      max: e,
-      weekNumber: s,
-      focusedDate: l,
-      format: r,
-      mobileMode: n,
-      footerActions: d,
-      unstyled: v
-    } = this.props, m = v && v.uDateTimePicker, S = o(
+    const { disabled: a, min: t, max: e, weekNumber: s, focusedDate: l, format: r, mobileMode: n, footerActions: d, unstyled: v } = this.props, m = v && v.uDateTimePicker, S = o(
       u.wrap({
         c: m,
         date: this.state.tab === "date",
@@ -184,36 +174,34 @@ const y = class y extends i.Component {
       tabIndex: a || this.state.tab !== "date" ? -1 : void 0,
       mobileMode: n
     };
-    return /* @__PURE__ */ i.createElement(
+    return /* @__PURE__ */ i.createElement("div", { onKeyDown: this.handleKeyDown, className: S, tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: o(u.buttonGroup({ c: m })) }, /* @__PURE__ */ i.createElement(x, { width: "100%" }, /* @__PURE__ */ i.createElement(
+      f,
+      {
+        ref: (c) => this._dateButtonRef = c,
+        type: "button",
+        selected: this.state.tab === "date",
+        togglable: !0,
+        onClick: this.handleDateClick,
+        onKeyDown: this.handleDateKeyDown
+      },
+      K
+    ), /* @__PURE__ */ i.createElement(
+      f,
+      {
+        type: "button",
+        selected: this.state.tab === "time",
+        togglable: !0,
+        onClick: this.handleTimeClick,
+        onKeyDown: this.handleTimeKeyDown
+      },
+      N
+    ))), /* @__PURE__ */ i.createElement("div", { className: o(u.selector({ c: m })) }, /* @__PURE__ */ i.createElement(
       "div",
       {
-        onKeyDown: this.handleKeyDown,
-        className: S,
-        tabIndex: -1
+        className: o(u.calendarWrap({ c: m })),
+        ref: (c) => this._calendarWrap = c
       },
-      /* @__PURE__ */ i.createElement("div", { className: o(u.buttonGroup({ c: m })) }, /* @__PURE__ */ i.createElement(x, { width: "100%" }, /* @__PURE__ */ i.createElement(
-        f,
-        {
-          ref: (c) => this._dateButtonRef = c,
-          type: "button",
-          selected: this.state.tab === "date",
-          togglable: !0,
-          onClick: this.handleDateClick,
-          onKeyDown: this.handleDateKeyDown
-        },
-        K
-      ), /* @__PURE__ */ i.createElement(
-        f,
-        {
-          type: "button",
-          selected: this.state.tab === "time",
-          togglable: !0,
-          onClick: this.handleTimeClick,
-          onKeyDown: this.handleTimeKeyDown
-        },
-        N
-      ))),
-      /* @__PURE__ */ i.createElement("div", { className: o(u.selector({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: o(u.calendarWrap({ c: m })), ref: (c) => this._calendarWrap = c }, this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...C }) : /* @__PURE__ */ i.createElement(
+      this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...C }) : /* @__PURE__ */ i.createElement(
         A,
         {
           key: this.state.tab,
@@ -222,28 +210,27 @@ const y = class y extends i.Component {
           },
           ...C
         }
-      )), /* @__PURE__ */ i.createElement("div", { className: o(u.timeWrap({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: o(u.timeSelector({ c: m, mobileMode: n })) }, /* @__PURE__ */ i.createElement(
-        z,
-        {
-          key: 1,
-          onNowClick: this.handleNowClick,
-          disabled: a || this.state.tab !== "time",
-          ref: (c) => {
-            this._timePart = c;
-          },
-          min: this.minTime || F,
-          max: this.maxTime || L,
-          steps: this.props.steps,
-          value: this.state.timeValue,
-          format: r,
-          onChange: this.handleTimeListContainerChange,
-          onMount: this.handleTimePartMount,
-          mobileMode: n,
-          unstyled: v
-        }
-      )))),
-      d && this.dateTimeFooter()
-    );
+      )
+    ), /* @__PURE__ */ i.createElement("div", { className: o(u.timeWrap({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: o(u.timeSelector({ c: m, mobileMode: n })) }, /* @__PURE__ */ i.createElement(
+      z,
+      {
+        key: 1,
+        onNowClick: this.handleNowClick,
+        disabled: a || this.state.tab !== "time",
+        ref: (c) => {
+          this._timePart = c;
+        },
+        min: this.minTime || F,
+        max: this.maxTime || L,
+        steps: this.props.steps,
+        value: this.state.timeValue,
+        format: r,
+        onChange: this.handleTimeListContainerChange,
+        onMount: this.handleTimePartMount,
+        mobileMode: n,
+        unstyled: v
+      }
+    )))), d && this.dateTimeFooter());
   }
   get minTime() {
     return this.props.minTime !== void 0 ? this.props.minTime : this.normalizeRange(this.props.min, this.state.dateValue);