@progress/kendo-react-dateinputs 9.0.0-develop.8 → 9.0.0

package/datepicker/DatePicker.mjs

@@ -8,22 +8,22 @@
 "use client";
 import * as n from "react";
 import e from "prop-types";
-import { Popup as W } from "@progress/kendo-react-popup";
-import { getDate as _, cloneDate as M } from "@progress/kendo-date-math";
-import { classNames as k, Keys as r, validatePackage as K, canUseDOM as P, AsyncFocusBlur as U, kendoThemeMaps as T, createPropsContext as $, withIdHOC as H, withPropsContext as X } from "@progress/kendo-react-common";
-import { calendarIcon as Z } from "@progress/kendo-svg-icons";
-import { packageMetadata as j } from "../package-metadata.mjs";
-import { DateInput as G } from "../dateinput/DateInput.mjs";
-import { Calendar as J } from "../calendar/components/Calendar.mjs";
-import { MAX_DATE as Q, MIN_DATE as Y, isInDateRange as ee, setTime as te } from "../utils.mjs";
-import { toggleCalendar as E, messages as ie } from "../messages/index.mjs";
-import { provideLocalizationService as se, registerForLocalization as oe } from "@progress/kendo-react-intl";
-import { ToggleButton as ae } from "./ToggleButton.mjs";
-import { PickerWrap as ne } from "../common/PickerWrap.mjs";
-import { PickerFloatingLabel as re } from "../hooks/usePickerFloatingLabel.mjs";
-import { ActionSheetContent as le } from "@progress/kendo-react-layout";
-import { AdaptiveMode as de } from "../common/AdaptiveMode.mjs";
-import { MOBILE_MEDIUM_DEVISE as ue } from "../common/constants.mjs";
+import { Popup as Y } from "@progress/kendo-react-popup";
+import { getDate as Z, cloneDate as O } from "@progress/kendo-date-math";
+import { classNames as k, Keys as r, validatePackage as j, canUseDOM as P, AsyncFocusBlur as G, kendoThemeMaps as T, createPropsContext as J, withIdHOC as Q, withPropsContext as ee } from "@progress/kendo-react-common";
+import { calendarIcon as te } from "@progress/kendo-svg-icons";
+import { packageMetadata as ie } from "../package-metadata.mjs";
+import { DateInput as se } from "../dateinput/DateInput.mjs";
+import { Calendar as oe } from "../calendar/components/Calendar.mjs";
+import { MAX_DATE as ae, MIN_DATE as ne, isInDateRange as re, setTime as le } from "../utils.mjs";
+import { toggleCalendar as x, messages as de } from "../messages/index.mjs";
+import { provideLocalizationService as ue, registerForLocalization as he } from "@progress/kendo-react-intl";
+import { ToggleButton as pe } from "./ToggleButton.mjs";
+import { PickerWrap as ce } from "../common/PickerWrap.mjs";
+import { PickerFloatingLabel as me } from "../hooks/usePickerFloatingLabel.mjs";
+import { ActionSheetContent as fe } from "@progress/kendo-react-layout";
+import { AdaptiveMode as ge } from "../common/AdaptiveMode.mjs";
+import { MOBILE_MEDIUM_DEVISE as ve } from "../common/constants.mjs";
 const o = class o extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._dateInput = n.createRef(), this._calendar = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
@@ -31,7 +31,7 @@ const o = class o extends n.Component {
     }, this.setCalendarRef = (t) => {
       this._calendar = t;
     }, this.nextValue = (t, s) => t.value !== void 0 ? t.value : s.value, this.nextShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.renderPopup = () => {
-      const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d && _(d), u = k(f), b = {
+      const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d && Z(d), u = k(f), b = {
         popupClass: "k-datepicker-popup",
         show: v,
         anchor: this._element,
@@ -66,7 +66,7 @@ const o = class o extends n.Component {
         adaptiveTitle: this.props.adaptiveTitle,
         windowWidth: t
       };
-      return /* @__PURE__ */ n.createElement(de, { ...s }, /* @__PURE__ */ n.createElement(le, { overflowHidden: !0 }, this.renderPopup()));
+      return /* @__PURE__ */ n.createElement(ge, { ...s }, /* @__PURE__ */ n.createElement(fe, { overflowHidden: !0 }, this.renderPopup()));
     }, this.handleInputValueChange = (t) => {
       this.handleValueChange(t.value, t);
     }, this.handleCalendarValueChange = (t) => {
@@ -74,7 +74,7 @@ const o = class o extends n.Component {
       this.handleValueChange(s, t);
     }, this.handleValueChange = (t, s) => {
       this.setState({
-        value: M(t || void 0)
+        value: O(t || void 0)
       }), this.valueDuringOnChange = t, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
       const { onChange: a } = this.props;
       a && a.call(void 0, {
@@ -104,7 +104,7 @@ const o = class o extends n.Component {
         return;
       }
       s && (a === r.up || a === r.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === r.up, this.setShow(a === r.down));
-    }, K(j), this.state = {
+    }, j(ie), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
       focused: !1
@@ -127,7 +127,7 @@ const o = class o extends n.Component {
    * The mobile mode of the DatePicker.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= ue && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= ve && this.props.adaptive);
   }
   /**
    * Gets the DateInput component inside the DatePicker component.
@@ -146,7 +146,7 @@ const o = class o extends n.Component {
    */
   get value() {
     const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
-    return i !== null ? M(i) : null;
+    return i !== null ? O(i) : null;
   }
   /**
    * Gets the popup state of the DatePickerWithoutContext.
@@ -185,7 +185,7 @@ const o = class o extends n.Component {
    * Represents the validity state into which the DatePicker is set.
    */
   get validity() {
-    const i = ee(this.value, this.min, this.max), 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 = re(this.value, this.min, this.max), 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,
@@ -246,38 +246,45 @@ const o = class o extends n.Component {
       width: u,
       name: b,
       validationMessage: h,
-      required: x,
+      required: E,
       validityStyles: B,
       ariaLabelledBy: F,
       ariaDescribedBy: V,
       ariaLabel: z,
       placeholder: N,
       label: y,
-      popupSettings: ce,
-      defaultValue: me,
-      defaultShow: fe,
-      value: ge,
-      popup: ve,
-      weekNumber: we,
-      dateInput: be,
-      calendar: ye,
-      toggleButton: Ie,
-      onChange: Ce,
-      onBlur: De,
-      onFocus: Oe,
-      show: Se,
-      onOpen: Me,
-      pickerWrap: ke,
-      adaptive: Pe,
-      adaptiveTitle: Te,
-      valid: Ee,
+      popupSettings: ye,
+      defaultValue: Ce,
+      defaultShow: Ie,
+      value: De,
+      popup: Se,
+      weekNumber: Me,
+      dateInput: Oe,
+      calendar: ke,
+      toggleButton: Pe,
+      onChange: Te,
+      onBlur: xe,
+      onFocus: Ee,
+      show: Be,
+      onOpen: Fe,
+      pickerWrap: Ve,
+      adaptive: ze,
+      adaptiveTitle: Ne,
+      valid: Re,
       autoFocus: R,
       // Removed to support direct use in Form Field component
-      visited: xe,
-      touched: Be,
-      modified: Fe,
-      ...I
-    } = this.props, A = this.value, C = !this.validityStyles || this.validity.valid, L = {
+      visited: Ae,
+      touched: Le,
+      modified: We,
+      autoFill: A,
+      twoDigitYearMax: L,
+      enableMouseWheel: W,
+      autoCorrectParts: q,
+      autoSwitchParts: _,
+      autoSwitchKeys: K,
+      allowCaretMode: U,
+      ...C
+    } = this.props, $ = this.value, I = !this.validityStyles || this.validity.valid, H = {
       disabled: a,
       format: f,
       formatPlaceholder: g,
@@ -289,36 +296,43 @@ const o = class o extends n.Component {
       min: v,
       name: b,
       onChange: this.handleInputValueChange,
-      required: x,
+      required: E,
       tabIndex: this.show ? -1 : c,
       title: m,
       valid: this.validity.valid,
       validationMessage: h,
       validityStyles: B,
-      value: A,
+      value: $,
       label: void 0,
       placeholder: this.state.focused ? null : N,
       ariaExpanded: this.show,
       size: null,
       fillMode: null,
-      rounded: null
-    }, D = se(this).toLanguageString(
-      E,
-      ie[E]
-    ), O = /* @__PURE__ */ n.createElement(
-      U,
+      rounded: null,
+      autoFill: A,
+      twoDigitYearMax: L,
+      enableMouseWheel: W,
+      autoCorrectParts: q,
+      autoSwitchParts: _,
+      autoSwitchKeys: K,
+      allowCaretMode: U
+    }, D = ue(this).toLanguageString(
+      x,
+      de[x]
+    ), S = /* @__PURE__ */ n.createElement(
+      G,
       {
         onFocus: this.handleFocus,
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      (S) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      (M) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "span",
         {
-          ...y ? {} : I,
-          ref: (q) => {
-            this._element = q;
+          ...y ? {} : C,
+          ref: (X) => {
+            this._element = X;
           },
           className: k(
             "k-input",
@@ -327,7 +341,7 @@ const o = class o extends n.Component {
               [`k-input-${T.sizeMap[i] || i}`]: i,
               [`k-rounded-${T.roundedMap[t] || t}`]: t,
               [`k-input-${s}`]: s,
-              "k-invalid": !C,
+              "k-invalid": !I,
               "k-required": this.required,
               "k-disabled": a
             },
@@ -335,8 +349,8 @@ const o = class o extends n.Component {
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: u },
-          onFocus: S.onFocus,
-          onBlur: S.onBlur,
+          onFocus: M.onFocus,
+          onBlur: M.onBlur,
           onClick: this.mobileMode ? this.handleIconClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -348,7 +362,7 @@ const o = class o extends n.Component {
             ariaExpanded: this.show,
             ariaControls: this._popupId,
             autoFocus: R,
-            ...L
+            ...H
           }
         ),
         /* @__PURE__ */ n.createElement(
@@ -356,7 +370,7 @@ const o = class o extends n.Component {
           {
             type: "button",
             icon: "calendar",
-            svgIcon: Z,
+            svgIcon: te,
             title: D,
             className: "k-input-button",
             rounded: null,
@@ -370,18 +384,18 @@ const o = class o extends n.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return y ? /* @__PURE__ */ n.createElement(
-      re,
+      me,
       {
         dateInput: this._dateInput,
         label: y,
         editorId: l,
-        editorValid: C,
+        editorValid: I,
         editorDisabled: a,
-        children: O,
+        children: S,
         style: { width: u },
-        ...I
+        ...C
       }
-    ) : O;
+    ) : S;
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;
@@ -392,7 +406,7 @@ const o = class o extends n.Component {
     }));
   }
   mergeTime(i) {
-    return this.value && i ? te(i, this.value) : i;
+    return this.value && i ? le(i, this.value) : i;
   }
   nextTick(i) {
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
@@ -475,15 +489,15 @@ o.displayName = "DatePicker", o.propTypes = {
 }, o.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
-  dateInput: G,
-  calendar: J,
-  toggleButton: ae,
-  popup: W,
-  pickerWrap: ne,
+  dateInput: se,
+  calendar: oe,
+  toggleButton: pe,
+  popup: Y,
+  pickerWrap: ce,
   disabled: !1,
   format: "d",
-  max: Q,
-  min: Y,
+  max: ae,
+  min: ne,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
@@ -494,13 +508,13 @@ o.displayName = "DatePicker", o.propTypes = {
   autoFocus: !1
 };
 let p = o;
-const he = $(), pe = H(
-  X(he, p)
+const we = J(), be = Q(
+  ee(we, p)
 );
-pe.displayName = "KendoReactDatePicker";
-oe(p);
+be.displayName = "KendoReactDatePicker";
+he(p);
 export {
-  pe as DatePicker,
-  he as DatePickerPropsContext,
+  be as DatePicker,
+  we as DatePickerPropsContext,
   p as DatePickerWithoutContext
 };

package/datetimepicker/DateTimePicker.js

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