@progress/kendo-react-dateinputs 9.0.0-develop.2 → 9.0.0-develop.21

package/datetimepicker/DateTimePicker.mjs

@@ -6,43 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
+import * as n from "react";
 import e from "prop-types";
-import { Popup as H } from "@progress/kendo-react-popup";
-import { cloneDate as O } from "@progress/kendo-date-math";
-import { Keys as d, validatePackage as W, canUseDOM as M, AsyncFocusBlur as X, classNames as I, uDateTimePicker as D, 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 { Popup as Q } from "@progress/kendo-react-popup";
+import { cloneDate as M } from "@progress/kendo-date-math";
+import { Keys as d, validatePackage as $, canUseDOM as O, AsyncFocusBlur as ee, classNames as I, uDateTimePicker as D, createPropsContext as te, withIdHOC as ie, withPropsContext as se, withUnstyledHOC as oe } from "@progress/kendo-react-common";
+import { calendarIcon as ae } from "@progress/kendo-svg-icons";
+import { DateInput as ne } from "../dateinput/DateInput.mjs";
+import { Button as re } from "@progress/kendo-react-buttons";
+import { packageMetadata as le } from "../package-metadata.mjs";
+import { MAX_DATE as he, MIN_DATE as de, isInDateRange as ue, MAX_TIME as pe, MIN_TIME as ce } from "../utils.mjs";
+import { MOBILE_MEDIUM_DEVISE as me } from "../common/constants.mjs";
 import { dateTimePickerCancel as P, messages as p, dateTimePickerSet as C, toggleDateTimeSelector as c } from "../messages/index.mjs";
-import { provideLocalizationService as m, registerForLocalization as le } from "@progress/kendo-react-intl";
-import { DateTimeSelector as he } from "./DateTimeSelector.mjs";
-import { isInTimeRange as de } from "../timepicker/utils.mjs";
-import { PickerFloatingLabel as ue } from "../hooks/usePickerFloatingLabel.mjs";
-import { AdaptiveMode as pe } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as ce } from "@progress/kendo-react-layout";
-const o = class o extends a.Component {
+import { provideLocalizationService as m, registerForLocalization as fe } from "@progress/kendo-react-intl";
+import { DateTimeSelector as ge } from "./DateTimeSelector.mjs";
+import { isInTimeRange as ve } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as we } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as be } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
+const o = class o extends n.Component {
   constructor(t) {
-    super(t), this._element = null, this._dateInput = a.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(t), this._element = null, this._dateInput = n.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: l,
-        cancelButton: r,
-        weekNumber: u,
-        focusedDate: g,
-        unstyled: v
-      } = this.props;
-      return /* @__PURE__ */ a.createElement(
-        he,
+      const { disabled: i, minTime: s, maxTime: a, format: h, calendar: l, cancelButton: r, weekNumber: u, focusedDate: g, unstyled: v } = this.props;
+      return /* @__PURE__ */ n.createElement(
+        ge,
         {
           ref: (w) => {
             this._dateTimeSelector = w;
@@ -57,7 +47,7 @@ const o = class o extends a.Component {
           min: this.min,
           max: this.max,
           minTime: s,
-          maxTime: n,
+          maxTime: a,
           focusedDate: g,
           format: h,
           calendar: l,
@@ -67,7 +57,13 @@ const o = class o extends a.Component {
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(P, p[P]), n = m(this).toLanguageString(C, p[C]), h = {
+      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(
+        P,
+        p[P]
+      ), a = m(this).toLanguageString(
+        C,
+        p[C]
+      ), h = {
         expand: this.show,
         onClose: this.handleBlur,
         adaptiveTitle: this.props.adaptiveTitle,
@@ -78,19 +74,19 @@ const o = class o extends a.Component {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
           },
-          applyText: n,
+          applyText: a,
           onApply: (l) => {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
           }
         }
       };
-      return /* @__PURE__ */ a.createElement(pe, { ...h }, /* @__PURE__ */ a.createElement(ce, { overflowHidden: !0 }, this.renderPicker()));
+      return /* @__PURE__ */ n.createElement(be, { ...h }, /* @__PURE__ */ n.createElement(ye, { overflowHidden: !0 }, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (i) => {
       this.setState({
-        value: O(i.value || void 0)
+        value: M(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, {
@@ -109,13 +105,13 @@ const o = class o extends a.Component {
     }, this.handleIconMouseDown = (i) => {
       i.preventDefault();
     }, this.handleKeyDown = (i) => {
-      const { altKey: s, keyCode: n } = i;
-      if (n === d.esc) {
+      const { altKey: s, keyCode: a } = i;
+      if (a === d.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (n === d.up || n === d.down) && (i.preventDefault(), i.stopPropagation(), this.shouldFocusDateInput = n === d.up, this.setShow(n === d.down));
-    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), W(te), this.state = {
+      s && (a === d.up || a === d.down) && (i.preventDefault(), i.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"), $(le), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
       focused: !1
@@ -125,7 +121,7 @@ const o = class o extends a.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (M)
+    if (O)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -145,7 +141,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 ? O(t) : null;
+    return t !== null ? M(t) : null;
   }
   /**
    * Gets the popup state of the DateTimePicker.
@@ -163,7 +159,7 @@ const o = class o extends a.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= re && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= me && this.props.adaptive);
   }
   get min() {
     return this.props.min !== void 0 ? this.props.min : o.defaultProps.min;
@@ -175,12 +171,12 @@ const o = class o extends a.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const t = oe(this.value, this.min, this.max) && de(this.value, this.props.minTime || ae, this.props.maxTime || ne), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, n = this.props.valid !== void 0 ? this.props.valid : s;
+    const t = ue(this.value, this.min, this.max) && ve(this.value, this.props.minTime || ce, this.props.maxTime || pe), 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: n,
+      valid: a,
       valueMissing: this.value === null
     };
   }
@@ -207,7 +203,7 @@ const o = class o extends a.Component {
    */
   componentDidMount() {
     var t;
-    this.observerResize = M && 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
@@ -231,7 +227,7 @@ const o = class o extends a.Component {
       size: t = o.defaultProps.size,
       rounded: i = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
-      autoFocus: n = o.defaultProps.autoFocus,
+      autoFocus: a = o.defaultProps.autoFocus,
       disabled: h,
       tabIndex: l,
       title: r,
@@ -250,9 +246,16 @@ const o = class o extends a.Component {
       maxTime: N,
       ariaLabelledBy: V,
       ariaDescribedBy: L,
-      popup: _ = H,
-      unstyled: b
-    } = this.props, y = b && b.uDateTimePicker, S = !this.validityStyles || this.validity.valid, q = {
+      popup: _ = Q,
+      unstyled: b,
+      autoFill: q,
+      twoDigitYearMax: K,
+      enableMouseWheel: U,
+      autoCorrectParts: j,
+      autoSwitchParts: H,
+      autoSwitchKeys: W,
+      allowCaretMode: X
+    } = this.props, y = b && b.uDateTimePicker, S = !this.validityStyles || this.validity.valid, Y = {
       id: u,
       ariaLabelledBy: V,
       ariaDescribedBy: L,
@@ -279,20 +282,27 @@ const o = class o extends a.Component {
       size: null,
       fillMode: null,
       rounded: null,
-      unstyled: b
-    }, T = /* @__PURE__ */ a.createElement(
-      X,
+      unstyled: b,
+      autoFill: q,
+      twoDigitYearMax: K,
+      enableMouseWheel: U,
+      autoCorrectParts: j,
+      autoSwitchParts: H,
+      autoSwitchKeys: W,
+      allowCaretMode: X
+    }, T = /* @__PURE__ */ n.createElement(
+      ee,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: U, onBlur: K }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      ({ onFocus: Z, onBlur: G }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "div",
         {
-          ref: (j) => {
-            this._element = j;
+          ref: (J) => {
+            this._element = J;
           },
           className: I(
             D.wrapper({
@@ -308,11 +318,11 @@ const o = class o extends a.Component {
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: k },
-          onFocus: this.mobileMode ? void 0 : U,
-          onBlur: K,
+          onFocus: this.mobileMode ? void 0 : Z,
+          onBlur: G,
           onClick: this.mobileMode ? this.handleDateIconClick : void 0
         },
-        /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ n.createElement(
           this.dateInputComp,
           {
             _ref: this._dateInput,
@@ -320,27 +330,33 @@ const o = class o extends a.Component {
             ariaControls: this._popupId,
             ariaHasPopup: "dialog",
             readonly: this.mobileMode,
-            autoFocus: n,
-            ...q
+            autoFocus: a,
+            ...Y
           }
         ),
-        /* @__PURE__ */ a.createElement(
-          ee,
+        /* @__PURE__ */ n.createElement(
+          re,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: Y,
+            svgIcon: ae,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
-            title: m(this).toLanguageString(c, p[c]),
+            title: m(this).toLanguageString(
+              c,
+              p[c]
+            ),
             className: I(D.inputButton({ c: y })),
             rounded: null,
             fillMode: s,
-            "aria-label": m(this).toLanguageString(c, p[c])
+            "aria-label": m(this).toLanguageString(
+              c,
+              p[c]
+            )
           }
         ),
-        /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ n.createElement(
           _,
           {
             show: this.show,
@@ -361,8 +377,8 @@ const o = class o extends a.Component {
         )
       ), this.mobileMode && this.renderAdaptivePopup())
     );
-    return this.props.label ? /* @__PURE__ */ a.createElement(
-      ue,
+    return this.props.label ? /* @__PURE__ */ n.createElement(
+      we,
       {
         dateInput: this._dateInput,
         label: this.props.label,
@@ -417,7 +433,12 @@ o.displayName = "DateTimePicker", o.propTypes = {
     })
   ]),
   formatPlaceholder: e.oneOfType([
-    e.oneOf(["wide", "narrow", "short", "formatPattern"]),
+    e.oneOf([
+      "wide",
+      "narrow",
+      "short",
+      "formatPattern"
+    ]),
     e.shape({
       year: e.string,
       month: e.string,
@@ -459,30 +480,30 @@ 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: ie,
-  min: se,
+  max: he,
+  min: de,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: $,
+  dateInput: ne,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   autoFocus: !1
 };
 let f = o;
-const me = Z(), fe = G(
-  J(
-    me,
-    Q(f)
+const Ie = te(), De = ie(
+  se(
+    Ie,
+    oe(f)
   )
 );
-fe.displayName = "KendoReactDateTimePicker";
-le(f);
+De.displayName = "KendoReactDateTimePicker";
+fe(f);
 export {
-  fe as DateTimePicker,
-  me as DateTimePickerPropsContext,
+  De as DateTimePicker,
+  Ie as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };