@progress/kendo-react-dateinputs 8.3.0-develop.6 → 8.3.0-develop.8

package/datepicker/DatePicker.mjs

@@ -67,7 +67,7 @@ const o = class o extends n.Component {
         adaptiveTitle: this.props.adaptiveTitle,
         windowWidth: t
       };
-      return /* @__PURE__ */ n.createElement(de, { ...s }, /* @__PURE__ */ n.createElement(le, { className: "!k-overflow-hidden" }, this.renderPopup()));
+      return /* @__PURE__ */ n.createElement(de, { ...s }, /* @__PURE__ */ n.createElement(le, { overflowHidden: !0 }, this.renderPopup()));
     }, this.handleInputValueChange = (t) => {
       this.handleValueChange(t.value, t);
     }, this.handleCalendarValueChange = (t) => {
@@ -260,8 +260,8 @@ const o = class o extends n.Component {
       toggleButton: Ie,
       onChange: Ce,
       onBlur: De,
-      onFocus: ke,
-      show: Se,
+      onFocus: Se,
+      show: ke,
       onOpen: Oe,
       pickerWrap: Me,
       adaptive: Pe,
@@ -298,7 +298,7 @@ const o = class o extends n.Component {
       size: null,
       fillMode: null,
       rounded: null
-    }, D = se(this).toLanguageString(E, ie[E]), k = /* @__PURE__ */ n.createElement(
+    }, D = se(this).toLanguageString(E, ie[E]), S = /* @__PURE__ */ n.createElement(
       U,
       {
         onFocus: this.handleFocus,
@@ -306,7 +306,7 @@ const o = class o extends n.Component {
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      (S) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      (k) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "span",
         {
           ...y ? {} : I,
@@ -328,8 +328,8 @@ const o = class o extends n.Component {
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: u },
-          onFocus: S.onFocus,
-          onBlur: S.onBlur,
+          onFocus: k.onFocus,
+          onBlur: k.onBlur,
           onClick: this.mobileMode ? this.handleIconClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -370,11 +370,11 @@ const o = class o extends n.Component {
         editorId: l,
         editorValid: C,
         editorDisabled: a,
-        children: k,
+        children: S,
         style: { width: u },
         ...I
       }
-    ) : k;
+    ) : S;
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;

package/daterangepicker/DateRangePicker.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 R=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),O=require("@progress/kendo-svg-icons"),k=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),T=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),x=require("../common/constants.js"),n=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function A(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=A(R),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(T.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),adaptiveTitle:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(_.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{className:"!k-overflow-hidden"},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(k.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=x.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const a=this.value||h.EMPTY_SELECTIONRANGE,e=this.mobileMode&&this.show?this.state.currentValue:a,s=(this.props.startDateInputSettings||{}).id||this._startInputId,r=(this.props.endDateInputSettings||{}).id||this._endInputId,m=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),w=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),S=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:w,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:e.start,onChange:this.handleStartChange},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:e.end,onChange:this.handleEndChange},C=i.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":s+" "+r,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:O.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:y=>{this._element=y},className:m,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:this.props.autoFocus,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?C:S,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),autoFocus:t.bool},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const I=o.createPropsContext(),b=o.withIdHOC(o.withPropsContext(I,p));b.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=b;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),O=require("@progress/kendo-svg-icons"),k=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),T=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),x=require("../common/constants.js"),n=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function A(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=A(R),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(T.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),adaptiveTitle:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(_.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(k.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=x.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const a=this.value||h.EMPTY_SELECTIONRANGE,e=this.mobileMode&&this.show?this.state.currentValue:a,s=(this.props.startDateInputSettings||{}).id||this._startInputId,r=(this.props.endDateInputSettings||{}).id||this._endInputId,m=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),w=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),S=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:w,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:e.start,onChange:this.handleStartChange},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:e.end,onChange:this.handleEndChange},C=i.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":s+" "+r,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:O.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:y=>{this._element=y},className:m,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:this.props.autoFocus,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?C:S,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),autoFocus:t.bool},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const I=o.createPropsContext(),b=o.withIdHOC(o.withPropsContext(I,p));b.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=b;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;

package/daterangepicker/DateRangePicker.mjs

@@ -18,9 +18,9 @@ import { DateInputWithoutContext as K, DateInput as w } from "../dateinput/DateI
 import { MultiViewCalendar as U } from "../calendar/components/MultiViewCalendar.mjs";
 import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
 import { nullable as h, MAX_DATE as q, MIN_DATE as W } from "../utils.mjs";
-import { MOBILE_MEDIUM_DEVISE as G } from "../common/constants.mjs";
+import { MOBILE_MEDIUM_DEVISE as H } from "../common/constants.mjs";
 import { dateRangePickerCancel as b, messages as l, dateRangePickerSet as C, start as S, end as E, separator as y, swapStartEnd as d } from "../messages/index.mjs";
-import { Button as H } from "@progress/kendo-react-buttons";
+import { Button as G } from "@progress/kendo-react-buttons";
 import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as Y } from "@progress/kendo-react-layout";
 const o = class o extends i.Component {
@@ -78,7 +78,7 @@ const o = class o extends i.Component {
           onApply: this.handleBlur
         }
       };
-      return /* @__PURE__ */ i.createElement(X, { ...s }, /* @__PURE__ */ i.createElement(Y, { className: "!k-overflow-hidden" }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
+      return /* @__PURE__ */ i.createElement(X, { ...s }, /* @__PURE__ */ i.createElement(Y, { overflowHidden: !0 }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
     }, this.handleReverseClick = (t) => {
       const s = {
         start: this.value.end,
@@ -216,7 +216,7 @@ const o = class o extends i.Component {
    * The mobile mode of the DateRangePicker.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= G && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= H && this.props.adaptive);
   }
   /**
    * @hidden
@@ -279,7 +279,7 @@ const o = class o extends i.Component {
       value: t.end,
       onChange: this.handleEndChange
     }, O = /* @__PURE__ */ i.createElement(
-      H,
+      G,
       {
         type: "button",
         className: "k-select",

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 V=require("react"),e=require("prop-types"),K=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),U=require("../dateinput/DateInput.js"),$=require("@progress/kendo-react-buttons"),W=require("../package-metadata.js"),p=require("../utils.js"),X=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),H=require("./DateTimeSelector.js"),Z=require("../timepicker/utils.js"),G=require("../hooks/usePickerFloatingLabel.js"),J=require("../common/AdaptiveMode.js"),Q=require("@progress/kendo-react-layout");function Y(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const i in h)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(h,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>h[i]})}}return t.default=h,Object.freeze(t)}const r=Y(V),o=class o 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:c,calendar:u,cancelButton:d,weekNumber:f,focusedDate:v}=this.props;return r.createElement(H.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:d,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:c,calendar:u,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]),c={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleReject(u)},applyText:a,onApply:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleAccept(u)}}};return r.createElement(J.AdaptiveMode,{...c},r.createElement(Q.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:D.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===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===n.Keys.up||a===n.Keys.down)&&(i.preventDefault(),i.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),n.validatePackage(W.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get 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?D.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<=X.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&Z.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:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=n.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=o.defaultProps.size,rounded:i=o.defaultProps.rounded,fillMode:s=o.defaultProps.fillMode,autoFocus:a=o.defaultProps.autoFocus,disabled:c,tabIndex:u,title:d,id:f,format:v,formatPlaceholder:b,min:k,max:T,className:M,width:O,name:P,validationMessage:C,required:x,validityStyles:q,minTime:E,maxTime:R,ariaLabelledBy:F,ariaDescribedBy:z,popup:A=K.Popup}=this.props,w=!this.validityStyles||this.validity.valid,B={id:f,ariaLabelledBy:F,ariaDescribedBy:z,format:v,formatPlaceholder:b,disabled:c,title:d,validityStyles:q,validationMessage:C,required:x,min:k,max:T,minTime:E,maxTime:R,name:P,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,size:null,fillMode:null,rounded:null},y=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:L,onBlur:N})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:_=>{this._element=_},className:n.classNames("k-input","k-datetimepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-rounded-${n.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-input-${s}`]:s,"k-invalid":!w,"k-required":this.required,"k-disabled":this.props.disabled},M),onKeyDown:this.handleKeyDown,style:{width:O},onFocus:this.mobileMode?void 0:L,onBlur:N,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode,autoFocus:a,...B}),r.createElement($.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:j.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:"k-input-button",rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(A,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:"k-datetime-container k-reset",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(G.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:w,editorDisabled:this.props.disabled,children:y,style:{width:this.props.width}}):y}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})}};o.displayName="DateTimePicker",o.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,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},o.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:U.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=o;const S=n.createPropsContext(),I=n.withIdHOC(n.withPropsContext(S,g));I.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=I;exports.DateTimePickerPropsContext=S;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: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;

package/datetimepicker/DateTimePicker.mjs

@@ -8,22 +8,22 @@
 "use client";
 import * as a from "react";
 import e from "prop-types";
-import { Popup as K } from "@progress/kendo-react-popup";
-import { cloneDate as I } from "@progress/kendo-date-math";
-import { Keys as h, validatePackage as U, canUseDOM as y, AsyncFocusBlur as j, classNames as $, kendoThemeMaps as D, createPropsContext as W, withIdHOC as X, withPropsContext as H } from "@progress/kendo-react-common";
-import { calendarIcon as Z } from "@progress/kendo-svg-icons";
-import { DateInput as G } from "../dateinput/DateInput.mjs";
-import { Button as J } from "@progress/kendo-react-buttons";
-import { packageMetadata as Q } from "../package-metadata.mjs";
-import { MAX_DATE as Y, MIN_DATE as ee, isInDateRange as te, MAX_TIME as ie, MIN_TIME as se } from "../utils.mjs";
-import { MOBILE_MEDIUM_DEVISE as oe } from "../common/constants.mjs";
-import { dateTimePickerCancel as S, messages as p, dateTimePickerSet as T, toggleDateTimeSelector as m } from "../messages/index.mjs";
-import { provideLocalizationService as c, registerForLocalization as ne } from "@progress/kendo-react-intl";
-import { DateTimeSelector as ae } from "./DateTimeSelector.mjs";
-import { isInTimeRange as re } from "../timepicker/utils.mjs";
-import { PickerFloatingLabel as le } from "../hooks/usePickerFloatingLabel.mjs";
-import { AdaptiveMode as de } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as he } from "@progress/kendo-react-layout";
+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 { calendarIcon as Y } from "@progress/kendo-svg-icons";
+import { DateInput as $ } from "../dateinput/DateInput.mjs";
+import { Button as ee } from "@progress/kendo-react-buttons";
+import { packageMetadata as te } from "../package-metadata.mjs";
+import { MAX_DATE as ie, MIN_DATE as se, isInDateRange as oe, MAX_TIME as ne, MIN_TIME as ae } from "../utils.mjs";
+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 { PickerFloatingLabel as ue } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as pe } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ce } from "@progress/kendo-react-layout";
 const o = class o extends a.Component {
   constructor(t) {
     super(t), this._element = null, this._dateInput = a.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
@@ -41,7 +41,7 @@ const o = class o extends a.Component {
         focusedDate: g
       } = this.props;
       return /* @__PURE__ */ a.createElement(
-        ae,
+        de,
         {
           ref: (v) => {
             this._dateTimeSelector = v;
@@ -65,7 +65,7 @@ const o = class o extends a.Component {
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: i = 0 } = this.state, s = c(this).toLanguageString(S, p[S]), n = c(this).toLanguageString(T, p[T]), d = {
+      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(M, p[M]), n = m(this).toLanguageString(P, p[P]), d = {
         expand: this.show,
         onClose: this.handleBlur,
         adaptiveTitle: this.props.adaptiveTitle,
@@ -83,12 +83,12 @@ const o = class o extends a.Component {
           }
         }
       };
-      return /* @__PURE__ */ a.createElement(de, { ...d }, /* @__PURE__ */ a.createElement(he, { className: "!k-overflow-hidden" }, this.renderPicker()));
+      return /* @__PURE__ */ a.createElement(pe, { ...d }, /* @__PURE__ */ a.createElement(ce, { overflowHidden: !0 }, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (i) => {
       this.setState({
-        value: I(i.value || void 0)
+        value: T(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, {
@@ -113,7 +113,7 @@ const o = class o extends a.Component {
         return;
       }
       s && (n === h.up || n === h.down) && (i.preventDefault(), i.stopPropagation(), this.shouldFocusDateInput = n === h.up, this.setShow(n === h.down));
-    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), U(Q), this.state = {
+    }, 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,
       focused: !1
@@ -123,7 +123,7 @@ const o = class o extends a.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (y)
+    if (O)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -143,7 +143,7 @@ const o = class o extends a.Component {
    */
   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(t) : null;
+    return t !== null ? T(t) : null;
   }
   /**
    * Gets the popup state of the DateTimePicker.
@@ -161,7 +161,7 @@ const o = class o extends a.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= oe && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= re && this.props.adaptive);
   }
   get min() {
     return this.props.min !== void 0 ? this.props.min : o.defaultProps.min;
@@ -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 = te(this.value, this.min, this.max) && re(this.value, this.props.minTime || se, this.props.maxTime || ie), 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) && 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;
     return {
       customError: i,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -205,7 +205,7 @@ const o = class o extends a.Component {
    */
   componentDidMount() {
     var t;
-    this.observerResize = y && 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);
+    this.observerResize = O && 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);
   }
   /**
    * @hidden
@@ -236,35 +236,36 @@ const o = class o extends a.Component {
       id: u,
       format: g,
       formatPlaceholder: v,
-      min: M,
-      max: k,
-      className: O,
-      width: P,
-      name: C,
-      validationMessage: x,
-      required: E,
-      validityStyles: F,
-      minTime: R,
-      maxTime: z,
-      ariaLabelledBy: A,
-      ariaDescribedBy: B,
-      popup: N = K
-    } = this.props, w = !this.validityStyles || this.validity.valid, q = {
+      min: C,
+      max: x,
+      className: E,
+      width: k,
+      name: F,
+      validationMessage: R,
+      required: B,
+      validityStyles: z,
+      minTime: A,
+      maxTime: N,
+      ariaLabelledBy: q,
+      ariaDescribedBy: V,
+      popup: L = H,
+      unstyled: I
+    } = this.props, w = I && I.uDateTimePicker, D = !this.validityStyles || this.validity.valid, _ = {
       id: u,
-      ariaLabelledBy: A,
-      ariaDescribedBy: B,
+      ariaLabelledBy: q,
+      ariaDescribedBy: V,
       format: g,
       formatPlaceholder: v,
       disabled: d,
       title: r,
-      validityStyles: F,
-      validationMessage: x,
-      required: E,
-      min: M,
-      max: k,
-      minTime: R,
-      maxTime: z,
-      name: C,
+      validityStyles: z,
+      validationMessage: R,
+      required: B,
+      min: C,
+      max: x,
+      minTime: A,
+      maxTime: N,
+      name: F,
       tabIndex: this.show ? -1 : l,
       valid: this.validity.valid,
       value: this.value,
@@ -276,37 +277,36 @@ const o = class o extends a.Component {
       size: null,
       fillMode: null,
       rounded: null
-    }, b = /* @__PURE__ */ a.createElement(
-      j,
+    }, S = /* @__PURE__ */ a.createElement(
+      X,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: V, onBlur: L }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      ({ onFocus: U, onBlur: K }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
         "div",
         {
-          ref: (_) => {
-            this._element = _;
+          ref: (j) => {
+            this._element = j;
           },
-          className: $(
-            "k-input",
-            "k-datetimepicker",
-            {
-              [`k-input-${D.sizeMap[t] || t}`]: t,
-              [`k-rounded-${D.roundedMap[i] || i}`]: i,
-              [`k-input-${s}`]: s,
-              "k-invalid": !w,
-              "k-required": this.required,
-              "k-disabled": this.props.disabled
-            },
-            O
+          className: b(
+            y.wrapper({
+              c: w,
+              size: t,
+              fillMode: s,
+              rounded: i,
+              disabled: d,
+              required: this.required,
+              invalid: !D
+            }),
+            E
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: P },
-          onFocus: this.mobileMode ? void 0 : V,
-          onBlur: L,
+          style: { width: k },
+          onFocus: this.mobileMode ? void 0 : U,
+          onBlur: K,
           onClick: this.mobileMode ? this.handleDateIconClick : void 0
         },
         /* @__PURE__ */ a.createElement(
@@ -317,32 +317,32 @@ const o = class o extends a.Component {
             ariaControls: this._popupId,
             readonly: this.mobileMode,
             autoFocus: n,
-            ...q
+            ..._
           }
         ),
         /* @__PURE__ */ a.createElement(
-          J,
+          ee,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: Z,
+            svgIcon: Y,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
-            title: c(this).toLanguageString(m, p[m]),
-            className: "k-input-button",
+            title: m(this).toLanguageString(c, p[c]),
+            className: b(y.inputButton({ c: w })),
             rounded: null,
             fillMode: s,
-            "aria-label": c(this).toLanguageString(m, p[m])
+            "aria-label": m(this).toLanguageString(c, p[c])
           }
         ),
         /* @__PURE__ */ a.createElement(
-          N,
+          L,
           {
             show: this.show,
             animate: this.element !== null,
             anchor: this.element,
-            popupClass: "k-datetime-container k-reset",
+            popupClass: b(y.popup({ c: w })),
             id: this._popupId,
             anchorAlign: {
               horizontal: "left",
@@ -358,17 +358,17 @@ const o = class o extends a.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ a.createElement(
-      le,
+      ue,
       {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: u,
-        editorValid: w,
+        editorValid: D,
         editorDisabled: this.props.disabled,
-        children: b,
+        children: S,
         style: { width: this.props.width }
       }
-    ) : b;
+    ) : S;
   }
   setShow(t) {
     const { onOpen: i, onClose: s } = this.props;
@@ -455,26 +455,31 @@ o.displayName = "DateTimePicker", o.propTypes = {
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: Y,
-  min: ee,
+  max: ie,
+  min: se,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   required: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: G,
+  dateInput: $,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   autoFocus: !1
 };
 let f = o;
-const ue = W(), pe = X(H(ue, f));
-pe.displayName = "KendoReactDateTimePicker";
-ne(f);
+const me = Z(), fe = G(
+  J(
+    me,
+    Q(f)
+  )
+);
+fe.displayName = "KendoReactDateTimePicker";
+le(f);
 export {
-  pe as DateTimePicker,
-  ue as DateTimePickerPropsContext,
+  fe as DateTimePicker,
+  me as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };

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