@progress/kendo-react-dateinputs 9.5.0 → 10.0.0-develop.2

package/daterangepicker/DateRangePicker.mjs

@@ -9,21 +9,21 @@ import * as i from "react";
 import e from "prop-types";
 import { Popup as _ } from "@progress/kendo-react-popup";
 import { cloneDate as w } from "@progress/kendo-date-math";
-import { classNames as D, Keys as c, validatePackage as F, canUseDOM as b, IconWrap as P, getActiveElement as z, createPropsContext as B, withIdHOC as N, withPropsContext as L, withAdaptiveModeContext as V } from "@progress/kendo-react-common";
+import { classNames as D, Keys as c, validatePackage as F, canUseDOM as b, IconWrap as P, WatermarkOverlay as z, getActiveElement as B, createPropsContext as L, withIdHOC as N, withPropsContext as V, withAdaptiveModeContext as W } from "@progress/kendo-react-common";
 import { provideLocalizationService as m, registerForLocalization as K } from "@progress/kendo-react-intl";
 import { arrowsSwapIcon as U } from "@progress/kendo-svg-icons";
-import { packageMetadata as W } from "../package-metadata.mjs";
+import { packageMetadata as q } from "../package-metadata.mjs";
 import { DateInput as f } from "../dateinput/DateInput.mjs";
-import { MultiViewCalendar as q } from "../calendar/components/MultiViewCalendar.mjs";
+import { MultiViewCalendar as H } from "../calendar/components/MultiViewCalendar.mjs";
 import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
-import { nullable as h, MAX_DATE as H, MIN_DATE as j } from "../utils.mjs";
+import { nullable as h, MAX_DATE as j, MIN_DATE as G } from "../utils.mjs";
 import { dateRangePickerCancel as I, messages as l, dateRangePickerSet as C, start as S, end as y, separator as E, swapStartEnd as p } from "../messages/index.mjs";
-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";
+import { Button as X } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as Y } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Z } from "@progress/kendo-react-layout";
 const o = class o 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 = () => {
+    super(a), this._element = null, this._calendar = null, this._startDateInput = i.createRef(), this._endDateInput = i.createRef(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.showLicenseWatermark = !1, this.focus = () => {
       this.startDateInput && this.startDateInput.focus();
     }, this.setCalendarRef = (t) => {
       this._calendar = t;
@@ -44,7 +44,7 @@ const o = class o extends i.Component {
         dir: this.props.dir,
         onChange: this.handleCalendarChange
       };
-      return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(q, { ...s, ref: this.setCalendarRef });
+      return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(H, { ...s, ref: this.setCalendarRef });
     }, this.renderPopup = () => {
       const t = {
         popupClass: D("k-calendar-container", "k-daterangepicker-popup"),
@@ -79,7 +79,7 @@ const o = class o extends i.Component {
           onApply: this.handleBlur
         }
       };
-      return /* @__PURE__ */ i.createElement(X, { ...s }, /* @__PURE__ */ i.createElement(Y, { overflowHidden: !0 }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
+      return /* @__PURE__ */ i.createElement(Y, { ...s }, /* @__PURE__ */ i.createElement(Z, { overflowHidden: !0 }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
     }, this.handleReverseClick = (t) => {
       const s = {
         start: this.value.end,
@@ -149,7 +149,7 @@ const o = class o extends i.Component {
         n.call(void 0, d);
       }
       this.valueDuringOnChange = void 0;
-    }, F(W), this.state = {
+    }, this.showLicenseWatermark = !F(q, { component: "DateRangePicker" }), this.state = {
       show: this.props.show || this.props.defaultShow || o.defaultProps.defaultShow,
       value: this.props.value || this.props.defaultValue || o.defaultProps.defaultValue,
       currentValue: r
@@ -244,15 +244,15 @@ const o = class o extends i.Component {
    * @hidden
    */
   render() {
-    const { autoFocus: a, inputAttributes: t } = this.props, s = this.value || r, n = this.mobileMode && this.show ? this.state.currentValue : s, d = (this.props.startDateInputSettings || {}).id || this._startInputId, x = (this.props.endDateInputSettings || {}).id || this._endInputId, O = D(
+    const { autoFocus: a, inputAttributes: t } = this.props, s = this.value || r, n = this.mobileMode && this.show ? this.state.currentValue : s, d = (this.props.startDateInputSettings || {}).id || this._startInputId, x = (this.props.endDateInputSettings || {}).id || this._endInputId, k = D(
       "k-daterangepicker",
       {
         "k-disabled": this.props.disabled
       },
       this.props.className
-    ), R = this.localizationService.toLanguageString(S, l[S]), k = this.localizationService.toLanguageString(y, l[y]), M = this.localizationService.toLanguageString(E, l[E]), g = {
+    ), O = this.localizationService.toLanguageString(S, l[S]), R = this.localizationService.toLanguageString(y, l[y]), M = this.localizationService.toLanguageString(E, l[E]), g = {
       disableSelection: this.mobileMode && !0,
-      label: R,
+      label: O,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -268,7 +268,7 @@ const o = class o extends i.Component {
       inputAttributes: this.props.inputAttributes
     }, v = {
       disableSelection: this.mobileMode && !0,
-      label: k,
+      label: R,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -283,7 +283,7 @@ const o = class o extends i.Component {
       onChange: this.handleEndChange,
       inputAttributes: this.props.inputAttributes
     }, A = /* @__PURE__ */ i.createElement(
-      G,
+      X,
       {
         type: "button",
         className: "k-select",
@@ -305,7 +305,7 @@ const o = class o extends i.Component {
         ref: (T) => {
           this._element = T;
         },
-        className: O,
+        className: k,
         style: this.props.style,
         id: this.props.id,
         "aria-labelledby": this.props.ariaLabelledBy,
@@ -338,12 +338,12 @@ const o = class o extends i.Component {
         }
       ),
       !this.mobileMode && this.renderPopup()
-    ), this.mobileMode && this.renderAdaptivePopup());
+    ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(z, null));
   }
   focusDateInputElement() {
     if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element)
       return;
-    const a = z(document);
+    const a = B(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) {
@@ -421,22 +421,22 @@ o.displayName = "DateRangePicker", o.propTypes = {
   defaultValue: r,
   disabled: !1,
   format: "d",
-  max: H,
-  min: j,
+  max: j,
+  min: G,
   swapButton: !1,
   autoFocus: !1
 };
 let u = o;
-const Z = B(), J = N(
-  L(
-    Z,
-    V(u)
+const J = L(), Q = N(
+  V(
+    J,
+    W(u)
   )
 );
-J.displayName = "KendoReactDateRangePicker";
+Q.displayName = "KendoReactDateRangePicker";
 K(u);
 export {
-  J as DateRangePicker,
-  Z as DateRangePickerPropsContext,
+  Q as DateRangePicker,
+  J as DateRangePickerPropsContext,
   u as DateRangePickerWithoutContext
 };

package/datetimepicker/DateTimePicker.js

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

package/datetimepicker/DateTimePicker.mjs

@@ -5,32 +5,31 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
+import * as a from "react";
 import e from "prop-types";
 import { Popup as $ } from "@progress/kendo-react-popup";
 import { cloneDate as M } from "@progress/kendo-date-math";
-import { Keys as d, validatePackage as ee, canUseDOM as O, AsyncFocusBlur as te, classNames as I, uDateTimePicker as D, createPropsContext as ie, withIdHOC as se, withPropsContext as oe, withUnstyledHOC as ae, withAdaptiveModeContext as ne } from "@progress/kendo-react-common";
-import { calendarIcon as re } from "@progress/kendo-svg-icons";
-import { DateInput as le } from "../dateinput/DateInput.mjs";
-import { Button as he } from "@progress/kendo-react-buttons";
-import { packageMetadata as de } from "../package-metadata.mjs";
-import { MAX_DATE as ue, MIN_DATE as pe, isInDateRange as ce, MAX_TIME as me, MIN_TIME as fe } from "../utils.mjs";
-import { dateTimePickerCancel as P, messages as p, dateTimePickerSet as C, toggleDateTimeSelector as c } from "../messages/index.mjs";
-import { provideLocalizationService as m, registerForLocalization as ge } from "@progress/kendo-react-intl";
-import { DateTimeSelector as ve } from "./DateTimeSelector.mjs";
-import { isInTimeRange as we } from "../timepicker/utils.mjs";
-import { PickerFloatingLabel as be } from "../hooks/usePickerFloatingLabel.mjs";
-import { AdaptiveMode as ye } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Ie } from "@progress/kendo-react-layout";
-const o = class o extends n.Component {
+import { Keys as d, canUseDOM as O, AsyncFocusBlur as ee, classNames as I, uDateTimePicker as D, createPropsContext as te, withIdHOC as ie, withPropsContext as se, withUnstyledHOC as oe, withAdaptiveModeContext as ne } from "@progress/kendo-react-common";
+import { calendarIcon as ae } from "@progress/kendo-svg-icons";
+import { DateInput as re } from "../dateinput/DateInput.mjs";
+import { Button as le } from "@progress/kendo-react-buttons";
+import { MAX_DATE as he, MIN_DATE as de, isInDateRange as ue, MAX_TIME as pe, MIN_TIME as ce } from "../utils.mjs";
+import { dateTimePickerCancel as C, messages as p, dateTimePickerSet as P, toggleDateTimeSelector as c } from "../messages/index.mjs";
+import { provideLocalizationService as m, registerForLocalization as me } from "@progress/kendo-react-intl";
+import { DateTimeSelector as fe } from "./DateTimeSelector.mjs";
+import { isInTimeRange as ge } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as ve } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as we } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as be } from "@progress/kendo-react-layout";
+const o = class o extends a.Component {
   constructor(i) {
-    super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(i), this._element = null, this._dateInput = a.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
-      const { disabled: t, minTime: s, maxTime: a, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
-      return /* @__PURE__ */ n.createElement(
-        ve,
+      const { disabled: t, minTime: s, maxTime: n, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
+      return /* @__PURE__ */ a.createElement(
+        fe,
         {
           ref: (w) => {
             this._dateTimeSelector = w;
@@ -45,7 +44,7 @@ const o = class o extends n.Component {
           min: this.min,
           max: this.max,
           minTime: s,
-          maxTime: a,
+          maxTime: n,
           focusedDate: u,
           format: h,
           calendar: l,
@@ -56,11 +55,11 @@ const o = class o extends n.Component {
       );
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, s = m(this).toLanguageString(
-        P,
-        p[P]
-      ), a = m(this).toLanguageString(
         C,
         p[C]
+      ), n = m(this).toLanguageString(
+        P,
+        p[P]
       ), h = {
         expand: this.show,
         onClose: this.handleBlur,
@@ -72,14 +71,14 @@ const o = class o extends n.Component {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
           },
-          applyText: a,
+          applyText: n,
           onApply: (l) => {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
           }
         }
       };
-      return /* @__PURE__ */ n.createElement(ye, { ...h }, /* @__PURE__ */ n.createElement(Ie, { overflowHidden: !0 }, this.renderPicker()));
+      return /* @__PURE__ */ a.createElement(we, { ...h }, /* @__PURE__ */ a.createElement(be, { overflowHidden: !0 }, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (t) => {
@@ -103,13 +102,13 @@ const o = class o extends n.Component {
     }, this.handleIconMouseDown = (t) => {
       t.preventDefault();
     }, this.handleKeyDown = (t) => {
-      const { altKey: s, keyCode: a } = t;
-      if (a === d.esc) {
+      const { altKey: s, keyCode: n } = t;
+      if (n === d.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (a === d.up || a === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === d.up, this.setShow(a === d.down));
-    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), ee(de), this.state = {
+      s && (n === d.up || n === d.down) && (t.preventDefault(), t.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"), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
       focused: !1
@@ -170,12 +169,12 @@ const o = class o extends n.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const i = ce(this.value, this.min, this.max) && we(this.value, this.props.minTime || fe, this.props.maxTime || me), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, a = this.props.valid !== void 0 ? this.props.valid : s;
+    const i = ue(this.value, this.min, this.max) && ge(this.value, this.props.minTime || ce, this.props.maxTime || pe), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, n = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: t,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
       rangeUnderflow: this.value && this.value.getTime() < this.min.getTime() || !1,
-      valid: a,
+      valid: n,
       valueMissing: this.value === null
     };
   }
@@ -226,7 +225,7 @@ const o = class o extends n.Component {
       size: i = o.defaultProps.size,
       rounded: t = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
-      autoFocus: a = o.defaultProps.autoFocus,
+      autoFocus: n = o.defaultProps.autoFocus,
       inputAttributes: h,
       disabled: l,
       tabIndex: r,
@@ -290,15 +289,15 @@ const o = class o extends n.Component {
       autoSwitchParts: W,
       autoSwitchKeys: X,
       allowCaretMode: Y
-    }, T = /* @__PURE__ */ n.createElement(
-      te,
+    }, T = /* @__PURE__ */ a.createElement(
+      ee,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: G, onBlur: J }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: G, onBlur: J }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
         "div",
         {
           ref: (Q) => {
@@ -322,25 +321,25 @@ const o = class o extends n.Component {
           onBlur: J,
           onClick: this.mobileMode ? this.handleDateIconClick : void 0
         },
-        /* @__PURE__ */ n.createElement(
+        /* @__PURE__ */ a.createElement(
           this.dateInputComp,
           {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this._popupId,
             ariaHasPopup: "dialog",
-            autoFocus: a,
+            autoFocus: n,
             inputAttributes: h,
             ...Z
           }
         ),
-        /* @__PURE__ */ n.createElement(
-          he,
+        /* @__PURE__ */ a.createElement(
+          le,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: re,
+            svgIcon: ae,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
             title: m(this).toLanguageString(
@@ -356,7 +355,7 @@ const o = class o extends n.Component {
             )
           }
         ),
-        /* @__PURE__ */ n.createElement(
+        /* @__PURE__ */ a.createElement(
           L,
           {
             show: this.show,
@@ -377,8 +376,8 @@ const o = class o extends n.Component {
         )
       ), this.mobileMode && this.renderAdaptivePopup())
     );
-    return this.props.label ? /* @__PURE__ */ n.createElement(
-      be,
+    return this.props.label ? /* @__PURE__ */ a.createElement(
+      ve,
       {
         dateInput: this._dateInput,
         label: this.props.label,
@@ -481,32 +480,32 @@ 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: ue,
-  min: pe,
+  max: he,
+  min: de,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: le,
+  dateInput: re,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   autoFocus: !1
 };
 let f = o;
-const De = ie(), Se = se(
-  oe(
-    De,
-    ae(
+const ye = te(), Ie = ie(
+  se(
+    ye,
+    oe(
       ne(f)
     )
   )
 );
-Se.displayName = "KendoReactDateTimePicker";
-ge(f);
+Ie.displayName = "KendoReactDateTimePicker";
+me(f);
 export {
-  Se as DateTimePicker,
-  De as DateTimePickerPropsContext,
+  Ie as DateTimePicker,
+  ye as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };