@progress/kendo-react-dateinputs 9.0.0-develop.5 → 9.0.0-develop.6

package/dateinput/DateInput.mjs

@@ -6,254 +6,63 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as h from "react";
+import * as r from "react";
 import e from "prop-types";
-import { cloneDate as f, isEqual as _ } from "@progress/kendo-date-math";
-import { Button as P } from "@progress/kendo-react-buttons";
-import { caretAltUpIcon as L, caretAltDownIcon as A } from "@progress/kendo-svg-icons";
-import { provideIntlService as O, provideLocalizationService as N, registerForIntl as q, registerForLocalization as R } from "@progress/kendo-react-intl";
-import { KendoDate as z } from "./models/kendo-date.mjs";
-import { getActiveElement as g, validatePackage as K, AsyncFocusBlur as U, classNames as p, uDateInput as c, noop as H, createPropsContext as j, withIdHOC as X, withPropsContext as Y, withUnstyledHOC as G } from "@progress/kendo-react-common";
-import { FloatingLabel as W } from "@progress/kendo-react-labels";
-import { packageMetadata as Z } from "../package-metadata.mjs";
-import { approximateStringMatching as J, defaultFormat as Q, defaultFormatPlaceholder as $, isInRange as ee } from "./utils.mjs";
-import { MAX_DATE as te, MIN_DATE as ie, MIN_TIME as se, MAX_TIME as re } from "../utils.mjs";
-import { increaseValue as v, messages as y, decreaseValue as b } from "../messages/index.mjs";
-import { isInTimeRange as ae } from "../timepicker/utils.mjs";
-import ne from "../common/ClearButton.mjs";
-const oe = "Please enter a valid value!", o = class o extends h.Component {
-  constructor(i) {
-    super(i), this.kendoDate = null, this.currentFormat = "", this.paste = !1, this._element = null, this._wrapper = null, this._lastSelectedSymbol = "", this.focus = () => {
+import { cloneDate as m, isEqual as L } from "@progress/kendo-date-math";
+import { Button as w } from "@progress/kendo-react-buttons";
+import { caretAltUpIcon as _, caretAltDownIcon as V } from "@progress/kendo-svg-icons";
+import { provideIntlService as E, provideLocalizationService as A, registerForIntl as F, registerForLocalization as N } from "@progress/kendo-react-intl";
+import { getActiveElement as k, validatePackage as q, classNames as h, uDateInput as p, createPropsContext as B, withIdHOC as R, withPropsContext as U, withUnstyledHOC as z } from "@progress/kendo-react-common";
+import { FloatingLabel as j } from "@progress/kendo-react-labels";
+import { DateInput as H } from "@progress/kendo-dateinputs-common";
+import { DEFAULT_FORMAT as K, DEFAULT_FORMAT_PLACEHOLDER as I, isInRange as W } from "./utils.mjs";
+import { packageMetadata as X } from "../package-metadata.mjs";
+import { MAX_DATE as G, MIN_DATE as Y, MIN_TIME as Z, MAX_TIME as $ } from "../utils.mjs";
+import { increaseValue as c, messages as g, decreaseValue as f } from "../messages/index.mjs";
+import { isInTimeRange as J } from "../timepicker/utils.mjs";
+import Q from "../common/ClearButton.mjs";
+import { DateInputIntl as ee } from "./dateInputIntl.mjs";
+const te = "Please enter a valid value!", n = class n extends r.Component {
+  constructor(t) {
+    super(t), this.kendoDate = null, this.kendoDateObject = null, this.mounted = !1, this._element = null, this._wrapper = null, this._nativeEvent = null, this.focus = () => {
       this._element && this._element.focus();
     }, this.setValidity = () => {
       this.element && this.element.setCustomValidity && this.element.setCustomValidity(
-        this.validity.valid ? "" : this.props.validationMessage || o.defaultProps.validationMessage
+        this.validity.valid ? "" : this.props.validationMessage || n.defaultProps.validationMessage
       );
-    }, this.updateOnPaste = (t) => {
-      if (!this.element || !this.kendoDate)
-        return;
-      const s = O(this).parseDate(this.element.value, this.props.format) || this.value, r = this.value;
-      this.kendoDate.setValue(s), this.triggerChange(t, r);
-    }, this.spinnersMouseDown = (t) => {
-      t.preventDefault();
-      const s = g(document);
+    }, this.updateOnPaste = (i) => {
+      !this.element || !this.kendoDate || this.triggerChange(i);
+    }, this.spinnersMouseDown = (i) => {
+      i.preventDefault();
+      const s = k(document);
       this.element && s !== this.element && this.element.focus({ preventScroll: !0 });
-    }, this.handlePaste = () => {
-      this.paste = !0;
-    }, this.handleClick = (t) => {
-      this.props.onChange && this.props.onChange(t);
-    }, this.elementChange = (t) => {
-      if (!this.element || !this.kendoDate)
-        return;
-      if (this.paste) {
-        this.updateOnPaste(t), this.paste = !1;
-        return;
-      }
-      const { text: s, format: r } = this.kendoDate.getTextAndFormat();
-      this.currentFormat = r;
-      const n = this.value, a = J(
-        s,
-        this.currentFormat,
-        this.element.value,
-        this.selection.start
-      ), l = a.length === 1 && a[0][1] === "_";
-      if (!l)
-        for (let d = 0; d < a.length; d++)
-          this.kendoDate.parsePart(a[d][0], a[d][1]);
-      a.length && a[0][0] !== "_" && this.setSelection(this.selectionBySymbol(a[0][0])), l && this.switchDateSegment(1), this.triggerChange(t, n);
-    }, this.elementClick = (t) => {
-      this.setSelection(this.selectionByIndex(this.selection.start));
-    }, this.nativeWheel = (t) => {
-      g(document) === this.element && t.preventDefault();
-    }, this.wheel = (t) => {
-      g(document) === this.element && (t.nativeEvent.deltaY < 0 && this.increasePart(t), t.nativeEvent.deltaY > 0 && this.decreasePart(t));
-    }, this.increasePart = (t) => {
-      this.modifyDateSegmentValue(1, t);
-    }, this.decreasePart = (t) => {
-      this.modifyDateSegmentValue(-1, t);
-    }, this.elementKeyDown = (t) => {
-      if (!t.altKey) {
-        switch (t.keyCode) {
-          case 37:
-            this.switchDateSegment(-1);
-            break;
-          case 38:
-            this.modifyDateSegmentValue(1, t);
-            break;
-          case 39:
-            this.switchDateSegment(1);
-            break;
-          case 40:
-            this.modifyDateSegmentValue(-1, t);
-            break;
-          default:
-            return;
-        }
-        t.preventDefault();
-      }
-    }, this.elementOnFocus = (t) => {
+    }, this.handleClick = (i) => {
+      this.props.onChange && this.props.onChange(i);
+    }, this.nativeWheel = (i) => {
+      k(document) === this.element && i.preventDefault();
+    }, this.increasePart = (i) => {
+      var s;
+      (s = this.kendoDate) == null || s.modifyDateSegmentValue(1), this.onChange(i);
+    }, this.decreasePart = (i) => {
+      var s;
+      (s = this.kendoDate) == null || s.modifyDateSegmentValue(-1), this.onChange(i);
+    }, this.elementOnFocus = (i) => {
       this.wrapper && this.wrapper.classList.add("k-focus"), this.setState({ focused: !0 });
-    }, this.elementOnBlur = (t) => {
+    }, this.elementOnBlur = (i) => {
       this.wrapper && this.wrapper.classList.remove("k-focus"), this.setState({ focused: !1 });
-    }, K(Z), this.state = {
+    }, q(X), this.state = {
       focused: !1
     };
   }
   get _inputId() {
     return this.props.id + "-accessibility-id";
   }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.setValidity(), this.wrapper && this.wrapper.addEventListener("wheel", this.nativeWheel, { passive: !1 });
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(i, t) {
-    this._lastSelectedSymbol && t.focused === this.state.focused ? this.setSelection(this.selectionBySymbol(this._lastSelectedSymbol)) : this.props.placeholder !== void 0 && this.selection.start === this.selection.end && this.setSelection({ start: 0, end: this.currentFormat.length }), this.setValidity();
-  }
-  /**
-   * @hidden
-   */
-  componentWillUnmount() {
-    this.wrapper && this.wrapper.removeEventListener("wheel", this.nativeWheel);
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const {
-      size: i = o.defaultProps.size,
-      fillMode: t = o.defaultProps.fillMode,
-      rounded: s = o.defaultProps.rounded,
-      autoFocus: r = o.defaultProps.autoFocus,
-      unstyled: n
-    } = this.props, a = n && n.uDateInput;
-    this.props._ref && (this.props._ref.current = this);
-    const l = N(this), d = { ...o.defaultProps, ...this.props }, { name: E, label: D, id: x, disabled: I } = d, u = this.text, T = u === this.props.placeholder ? "" : u, V = u === this.props.placeholder ? u : void 0, k = x || this._inputId, S = !this.validityStyles || this.validity.valid, F = /* @__PURE__ */ h.createElement(U, { onFocus: this.elementOnFocus, onBlur: this.elementOnBlur }, ({ onFocus: M, onBlur: B }) => /* @__PURE__ */ h.createElement(
-      "span",
-      {
-        ref: (w) => {
-          this._wrapper = w;
-        },
-        style: D ? void 0 : { width: this.props.width },
-        dir: this.props.dir,
-        className: p(
-          c.wrapper({
-            c: a,
-            size: i,
-            fillMode: t,
-            rounded: s,
-            disabled: I,
-            required: this.required,
-            invalid: !S
-          }),
-          this.props.className
-        ),
-        onFocus: M,
-        onBlur: B
-      },
-      /* @__PURE__ */ h.createElement(
-        "input",
-        {
-          role: this.props.ariaRole || "textbox",
-          readOnly: this.props.readonly,
-          tabIndex: this.props.tabIndex,
-          disabled: this.props.disabled,
-          title: this.props.title !== void 0 ? this.props.title : u,
-          type: "text",
-          spellCheck: !1,
-          autoComplete: "off",
-          autoCorrect: "off",
-          autoFocus: r,
-          className: p(c.inputInner({ c: a })),
-          id: k,
-          "aria-label": this.props.ariaLabel,
-          "aria-labelledby": this.props.ariaLabelledBy,
-          "aria-describedby": this.props.ariaDescribedBy,
-          "aria-haspopup": this.props.ariaHasPopup,
-          "aria-disabled": this.props.disabled,
-          "aria-expanded": this.props.ariaExpanded,
-          "aria-controls": this.props.ariaControls,
-          "aria-required": this.props.required,
-          "aria-invalid": !S,
-          onWheel: this.wheel,
-          onClick: this.elementClick,
-          onInput: this.elementChange,
-          onPaste: this.handlePaste,
-          onKeyDown: this.elementKeyDown,
-          onChange: H,
-          value: T,
-          placeholder: V,
-          name: E,
-          ref: (w) => this._element = w
-        }
-      ),
-      this.props.children,
-      this.props.clearButton && this.props.value && /* @__PURE__ */ h.createElement(ne, { onClick: this.handleClick, key: "clearbutton" }),
-      this.props.spinners && /* @__PURE__ */ h.createElement(
-        "span",
-        {
-          className: p(c.inputSpinner({ c: a })),
-          onMouseDown: this.spinnersMouseDown
-        },
-        /* @__PURE__ */ h.createElement(
-          P,
-          {
-            tabIndex: -1,
-            type: "button",
-            rounded: null,
-            className: p(c.spinnerIncrease({ c: a })),
-            icon: "caret-alt-up",
-            svgIcon: L,
-            "aria-label": l.toLanguageString(
-              v,
-              y[v]
-            ),
-            title: l.toLanguageString(v, y[v]),
-            onClick: this.increasePart
-          }
-        ),
-        /* @__PURE__ */ h.createElement(
-          P,
-          {
-            tabIndex: -1,
-            type: "button",
-            rounded: null,
-            className: p(c.spinnerDecrease({ c: a })),
-            icon: "caret-alt-down",
-            svgIcon: A,
-            "aria-label": l.toLanguageString(
-              b,
-              y[b]
-            ),
-            title: l.toLanguageString(b, y[b]),
-            onClick: this.decreasePart
-          }
-        )
-      )
-    ));
-    return D ? /* @__PURE__ */ h.createElement(
-      W,
-      {
-        label: D,
-        editorId: k,
-        editorValue: u,
-        editorValid: S,
-        editorDisabled: this.props.disabled,
-        children: F,
-        style: { width: this.props.width }
-      }
-    ) : F;
-  }
   /* Public Getters */
   /**
    * Gets the value of the DateInput.
    */
   get value() {
-    return this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.kendoDate && this.kendoDate.getDateObject();
+    return this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.kendoDate && this.kendoDate.value;
   }
   /**
    * Gets the `name` property of the DateInput.
@@ -262,35 +71,32 @@ const oe = "Please enter a valid value!", o = class o extends h.Component {
     return this.props.name;
   }
   get min() {
-    return this.props.min !== void 0 ? this.props.min : o.defaultProps.min;
+    return this.props.min !== void 0 ? this.props.min : n.defaultProps.min;
   }
   get max() {
-    return this.props.max !== void 0 ? this.props.max : o.defaultProps.max;
+    return this.props.max !== void 0 ? this.props.max : n.defaultProps.max;
+  }
+  get isInSegmentSelection() {
+    const { year: t, month: i, day: s, hours: o, minutes: l, seconds: a } = this.kendoDateObject;
+    return (!t || !i || !s || !o || !l || !a) && (t || i || s || o || l || a);
   }
   /**
    * @hidden
    */
   get text() {
-    const i = { ...C.defaultProps, ...this.props }, {
-      formatPlaceholder: t = o.defaultProps.formatPlaceholder,
-      format: s = o.defaultProps.format,
-      value: r,
-      defaultValue: n
-    } = i;
-    this.kendoDate === null ? (this.kendoDate = new z(this.intl.bind(this), t, s), this.kendoDate.setValue(r || n || null)) : (this.kendoDate.format = s, this.kendoDate.formatPlaceholder = t), r !== void 0 && this.value !== r && this.kendoDate.setValue(r);
-    const { text: a, format: l } = this.kendoDate.getTextAndFormat();
-    return this.currentFormat = l, i.placeholder !== null && i.placeholder !== void 0 && !this.state.focused && !this.kendoDate.hasValue() ? i.placeholder : a;
+    const { placeholder: t } = this.props, i = this.kendoDate && this.kendoDate.currentText || "";
+    return t != null && !this.state.focused && !this.value ? t : i;
   }
   /**
    * Represents the validity state into which the DateInput is set.
    */
   get validity() {
-    const i = ee(this.value, this.min, this.max) && ae(this.value, this.props.minTime, this.props.maxTime), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, r = this.props.valid !== void 0 ? this.props.valid : s;
+    const t = W(this.value, this.min, this.max) && J(this.value, this.props.minTime, this.props.maxTime), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, o = this.props.valid !== void 0 ? this.props.valid : s;
     return {
-      customError: t,
+      customError: i,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
       rangeUnderflow: this.value && this.value.getTime() < this.min.getTime() || !1,
-      valid: r,
+      valid: o,
       valueMissing: this.value === null
     };
   }
@@ -332,7 +138,7 @@ const oe = "Please enter a valid value!", o = class o extends h.Component {
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : o.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : n.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -349,74 +155,198 @@ const oe = "Please enter a valid value!", o = class o extends h.Component {
   /**
    * @hidden
    */
-  intl() {
-    return O(this);
-  }
-  /*  end handlers */
-  get selection() {
-    let i = { start: 0, end: 0 };
-    return this.element !== null && this.element.selectionStart !== void 0 && (i = { start: this.element.selectionStart, end: this.element.selectionEnd }), i;
+  get options() {
+    return {
+      format: this.props.format,
+      steps: this.props.steps,
+      formatPlaceholder: I,
+      placeholder: this.props.placeholder,
+      selectPreviousSegmentOnBackspace: !0,
+      allowCaretMode: !1,
+      value: this.props.value || this.value,
+      intlService: new ee(E(this)),
+      enableMouseWheel: !0,
+      // TODO: extract as an option
+      autoCorrectParts: !0,
+      // TODO: extract as an option
+      autoSwitchParts: !0,
+      // TODO: extract as an option
+      autoSwitchKeys: [],
+      // TODO: extract as an option
+      twoDigitYearMax: 68
+      // TODO: extract as an option
+    };
   }
-  setSelection(i) {
-    this._lastSelectedSymbol = this.currentFormat[i.start], window.requestAnimationFrame(() => {
-      const t = g(document);
-      this.element && t === this.element && !this.props.disableSelection && this.element.setSelectionRange(i.start, i.end);
-    });
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.setValidity(), this.mounted || (this.wrapper && this.wrapper.addEventListener("wheel", this.nativeWheel, { passive: !1 }), this.kendoDate = this.initKendoDate(), this.kendoDateObject = this.kendoDate.dateObject, this.mounted = !0);
   }
-  triggerChange(i, t) {
-    this.valueDuringOnChange = this.value, this.forceUpdate(), this.props.onChange && !_(t, this.value) && this.props.onChange.call(void 0, {
-      syntheticEvent: i,
-      nativeEvent: i.nativeEvent,
-      value: this.value,
-      target: this
-      // inRange: this.props.min && this.props.max ? isInRange(value, this.props.min, this.props.max) : true
-    }), this.valueDuringOnChange = void 0;
+  /**
+   * @hidden
+   */
+  componentDidUpdate(t) {
+    this.setValidity(), this.kendoDate && ((t.format !== this.props.format || t.readonly !== this.props.readonly || t.steps !== this.props.steps) && this.kendoDate.setOptions(this.options, !0), t.value !== this.props.value && (this.kendoDateObject.getValue() !== null || this.isInSegmentSelection && this.props.value !== null) && this.kendoDateObject.setValue(this.props.value), this.props.ariaExpanded !== void 0 && this.props.ariaExpanded && (this.kendoDate.options.placeholder = null), this.props.ariaExpanded !== void 0 && !this.props.ariaExpanded && (this.kendoDate.options.placeholder = this.props.placeholder), this.kendoDate.refreshElementValue());
   }
-  selectionBySymbol(i) {
-    let t = -1, s = 0;
-    for (let r = 0; r < this.currentFormat.length; r++)
-      this.currentFormat[r] === i && (s = r + 1, t === -1 && (t = r));
-    return t < 0 && (t = 0), { start: t, end: s };
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    this.wrapper && this.wrapper.removeEventListener("wheel", this.nativeWheel);
   }
-  selectionByIndex(i) {
-    let t = { start: i, end: i };
-    for (let s = i, r = i - 1; s < this.currentFormat.length || r >= 0; s++, r--) {
-      if (s < this.currentFormat.length && this.currentFormat[s] !== "_") {
-        t = this.selectionBySymbol(this.currentFormat[s]);
-        break;
-      }
-      if (r >= 0 && this.currentFormat[r] !== "_") {
-        t = this.selectionBySymbol(this.currentFormat[r]);
-        break;
+  /**
+   * @hidden
+   */
+  render() {
+    var C;
+    const {
+      size: t = n.defaultProps.size,
+      fillMode: i = n.defaultProps.fillMode,
+      rounded: s = n.defaultProps.rounded,
+      autoFocus: o = n.defaultProps.autoFocus,
+      unstyled: l
+    } = this.props, a = l && l.uDateInput;
+    this.props._ref && (this.props._ref.current = this);
+    const u = A(this), x = { ...n.defaultProps, ...this.props }, { name: P, label: v, id: S, disabled: T } = x, M = this.text, D = S || this._inputId, b = !this.validityStyles || this.validity.valid, O = /* @__PURE__ */ r.createElement(
+      "span",
+      {
+        ref: (y) => {
+          this._wrapper = y;
+        },
+        style: v ? void 0 : { width: this.props.width },
+        dir: this.props.dir,
+        className: h(
+          p.wrapper({
+            c: a,
+            size: t,
+            fillMode: i,
+            rounded: s,
+            disabled: T,
+            required: this.required,
+            invalid: !b
+          }),
+          this.props.className
+        )
+      },
+      /* @__PURE__ */ r.createElement(
+        "input",
+        {
+          role: this.props.ariaRole || "textbox",
+          readOnly: this.props.readonly,
+          tabIndex: this.props.tabIndex || 0,
+          disabled: this.props.disabled,
+          title: this.props.title !== void 0 ? this.props.title : M,
+          type: "text",
+          spellCheck: !1,
+          autoComplete: "off",
+          autoCorrect: "off",
+          autoFocus: o,
+          className: h(p.inputInner({ c: a })),
+          id: D,
+          "aria-label": this.props.ariaLabel,
+          "aria-labelledby": this.props.ariaLabelledBy,
+          "aria-describedby": this.props.ariaDescribedBy,
+          "aria-haspopup": this.props.ariaHasPopup,
+          "aria-disabled": this.props.disabled,
+          "aria-expanded": this.props.ariaExpanded,
+          "aria-controls": this.props.ariaControls,
+          "aria-required": this.props.required,
+          "aria-invalid": !b,
+          onKeyDown: this.onChange.bind(this),
+          onChange: this.onChange.bind(this),
+          onWheel: this.onChange.bind(this),
+          onInput: this.onChange.bind(this),
+          onClick: this.onChange.bind(this),
+          name: P,
+          ref: (y) => this._element = y
+        }
+      ),
+      this.props.children,
+      this.props.clearButton && this.props.value && /* @__PURE__ */ r.createElement(Q, { onClick: this.handleClick, key: "clearbutton" }),
+      this.props.spinners && /* @__PURE__ */ r.createElement(
+        "span",
+        {
+          className: h(p.inputSpinner({ c: a })),
+          onMouseDown: this.spinnersMouseDown
+        },
+        /* @__PURE__ */ r.createElement(
+          w,
+          {
+            tabIndex: -1,
+            type: "button",
+            rounded: null,
+            className: h(p.spinnerIncrease({ c: a })),
+            icon: "caret-alt-up",
+            svgIcon: _,
+            "aria-label": u.toLanguageString(c, g[c]),
+            title: u.toLanguageString(c, g[c]),
+            onClick: this.increasePart
+          }
+        ),
+        /* @__PURE__ */ r.createElement(
+          w,
+          {
+            tabIndex: -1,
+            type: "button",
+            rounded: null,
+            className: h(p.spinnerDecrease({ c: a })),
+            icon: "caret-alt-down",
+            svgIcon: V,
+            "aria-label": u.toLanguageString(f, g[f]),
+            title: u.toLanguageString(f, g[f]),
+            onClick: this.decreasePart
+          }
+        )
+      )
+    );
+    return v ? /* @__PURE__ */ r.createElement(
+      j,
+      {
+        label: v,
+        editorId: D,
+        editorValue: (C = this._element) == null ? void 0 : C.value,
+        editorValid: b,
+        editorDisabled: this.props.disabled,
+        children: O,
+        style: { width: this.props.width }
       }
-    }
-    return t;
+    ) : O;
   }
-  switchDateSegment(i) {
-    const { start: t, end: s } = this.selection;
-    if (t < s && this.currentFormat[t] !== this.currentFormat[s - 1]) {
-      this.setSelection(this.selectionByIndex(i > 0 ? t : s - 1));
-      return;
-    }
-    const r = this.currentFormat[t];
-    let n = t + i;
-    for (; n > 0 && n < this.currentFormat.length && !(this.currentFormat[n] !== r && this.currentFormat[n] !== "_"); )
-      n += i;
-    if (this.currentFormat[n] === "_")
-      return;
-    let a = n;
-    for (; a >= 0 && a < this.currentFormat.length && this.currentFormat[a] === this.currentFormat[n]; )
-      a += i;
-    n > a && (a + 1 !== t || n + 1 !== s) ? this.setSelection({ start: a + 1, end: n + 1 }) : n < a && (n !== t || a !== s) && this.setSelection({ start: n, end: a });
+  /**
+   * @hidden
+   */
+  intl() {
+    return E(this);
+  }
+  get intlCommon() {
+    return this.intlProvider();
+  }
+  /*  end handlers */
+  triggerChange(t) {
+    this.valueDuringOnChange = this.value, this.forceUpdate(), this._nativeEvent = t, this.valueDuringOnChange = void 0;
+  }
+  onChange(t) {
+    this._nativeEvent && this.props.onChange && !L(this._nativeEvent.oldValue, this.value) && this.props.onChange.call(void 0, {
+      syntheticEvent: t,
+      nativeEvent: this._nativeEvent.event,
+      value: this._nativeEvent.value,
+      target: this
+    }), this._nativeEvent = null;
   }
-  modifyDateSegmentValue(i, t) {
-    if (!this.kendoDate)
-      return;
-    const s = this.value, r = this.currentFormat[this.selection.start], n = this.kendoDate.symbolMap(r), a = ((this.props.steps || {})[n] || 1) * i;
-    this.kendoDate.modifyPart(r, a), this.triggerChange(t, s);
+  initKendoDate() {
+    return new H(this._element, {
+      ...this.options,
+      events: {
+        focus: this.elementOnFocus.bind(this),
+        blur: this.elementOnBlur.bind(this),
+        valueChange: this.triggerChange.bind(this),
+        click: this.handleClick.bind(this)
+      }
+    });
   }
 };
-o.displayName = "DateInput", o.propTypes = {
+n.displayName = "DateInput", n.propTypes = {
   value: e.instanceOf(Date),
   format: e.oneOfType([
     e.string,
@@ -488,38 +418,37 @@ o.displayName = "DateInput", o.propTypes = {
   rounded: e.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: e.oneOf([null, "solid", "flat", "outline"]),
   autoFocus: e.bool
-}, o.defaultProps = {
-  format: Q,
+}, n.defaultProps = {
+  format: K,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
-  formatPlaceholder: $,
-  // defaultValue: null as Date | null,
+  formatPlaceholder: I,
   spinners: !1,
   disabled: !1,
-  max: f(te),
-  min: f(ie),
-  minTime: f(se),
-  maxTime: f(re),
+  max: m(G),
+  min: m(Y),
+  minTime: m(Z),
+  maxTime: m($),
   validityStyles: !0,
-  validationMessage: oe,
+  validationMessage: te,
   placeholder: null,
   // the rest of the properties are undefined by default
   ariaHasPopup: "grid",
   autoFocus: !1
 };
-let m = o;
-const le = j(), C = X(
-  Y(
-    le,
-    G(m)
+let d = n;
+const ie = B(), se = R(
+  U(
+    ie,
+    z(d)
   )
 );
-C.displayName = "KendoReactDateInput";
-q(m);
-R(m);
+se.displayName = "KendoReactDateInput";
+F(d);
+N(d);
 export {
-  C as DateInput,
-  le as DateInputPropsContext,
-  m as DateInputWithoutContext
+  se as DateInput,
+  ie as DateInputPropsContext,
+  d as DateInputWithoutContext
 };