@progress/kendo-react-dateinputs 13.4.0-develop.3 → 13.4.0-develop.5

package/timepicker/TimePicker.mjs

@@ -5,54 +5,78 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
+import * as n from "react";
 import e from "prop-types";
-import { Popup as Z } from "@progress/kendo-react-popup";
+import { Popup as J } from "@progress/kendo-react-popup";
 import { cloneDate as y } from "@progress/kendo-date-math";
-import { withIdHOC as J, createPropsContext as Q, classNames as m, uTimePicker as g, Keys as d, validatePackage as Y, getLicenseMessage as $, canUseDOM as C, AsyncFocusBlur as ee, WatermarkOverlay as te, withPropsContext as ie, withUnstyledHOC as se, withAdaptiveModeContext as oe } from "@progress/kendo-react-common";
-import { clockIcon as ae } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as ne, registerForLocalization as re } from "@progress/kendo-react-intl";
-import { packageMetadata as I } from "../package-metadata.mjs";
-import { timePickerSet as T, messages as u, toggleClock as f, timePickerCancel as le, toggleTimeSelector as M } from "../messages/index.mjs";
-import { DateInput as he } from "../dateinput/DateInput.mjs";
-import { TimeSelector as de } from "./TimeSelector.mjs";
-import { MIN_TIME as ue, MAX_TIME as pe, setTime as O, MIDNIGHT_DATE as ce } from "../utils.mjs";
-import { isInRange as me, isSmallerThanMin as ge, isBiggerThanMax as fe } from "./utils.mjs";
-import { PickerFloatingLabel as ve } from "../hooks/usePickerFloatingLabel.mjs";
-import { Button as we } from "@progress/kendo-react-buttons";
-import { AdaptiveMode as be } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Se } from "@progress/kendo-react-layout";
-const n = class n extends a.Component {
-  constructor(i) {
-    super(i), this._element = null, this._dateInput = a.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.showLicenseWatermark = !1, this.focus = () => {
+import { withIdHOC as Q, createPropsContext as Y, classNames as c, uTimePicker as g, Keys as d, validatePackage as $, getLicenseMessage as ee, canUseDOM as T, subscribeToKendoPaste as te, AsyncFocusBlur as ie, WatermarkOverlay as se, withPropsContext as oe, withUnstyledHOC as ne, withAdaptiveModeContext as ae } from "@progress/kendo-react-common";
+import { clockIcon as re } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as le, registerForLocalization as he } from "@progress/kendo-react-intl";
+import { packageMetadata as C } from "../package-metadata.mjs";
+import { timePickerSet as I, messages as u, toggleClock as f, timePickerCancel as de, toggleTimeSelector as M } from "../messages/index.mjs";
+import { DateInput as ue } from "../dateinput/DateInput.mjs";
+import { TimeSelector as pe } from "./TimeSelector.mjs";
+import { MIN_TIME as me, MAX_TIME as ce, setTime as P, MIDNIGHT_DATE as ge } from "../utils.mjs";
+import { isInRange as D, isSmallerThanMin as fe, isBiggerThanMax as ve } from "./utils.mjs";
+import { PickerFloatingLabel as we } from "../hooks/usePickerFloatingLabel.mjs";
+import { Button as be } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as Se } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
+const a = class a extends n.Component {
+  constructor(s) {
+    super(s), this._element = null, this._dateInput = n.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.showLicenseWatermark = !1, this.handleKendoPasteValue = (t) => {
+      if (t instanceof Date && !isNaN(t.getTime())) {
+        this.applyKendoPasteTime(t);
+        return;
+      }
+      const i = t != null ? String(t) : "";
+      if (!i)
+        return;
+      const o = new Date(i);
+      isNaN(o.getTime()) || this.applyKendoPasteTime(o);
+    }, this.applyKendoPasteTime = (t) => {
+      const i = this.normalizeTime(t);
+      if (!D(i, this.min, this.max))
+        return;
+      const o = new Event("change", { bubbles: !0 }), r = {
+        target: this._element,
+        currentTarget: this._element,
+        nativeEvent: o
+      };
+      this.handleValueChange({
+        syntheticEvent: r,
+        nativeEvent: o,
+        value: i
+      });
+    }, this.focus = () => {
       this.dateInput && this.dateInput.focus();
     }, this.renderTimeSelector = () => {
-      const { smoothScroll: t, cancelButton: s, nowButton: o, disabled: l, format: h, steps: r, unstyled: c } = this.props;
-      return /* @__PURE__ */ a.createElement(
-        de,
+      const { smoothScroll: t, cancelButton: i, nowButton: o, disabled: r, format: h, steps: l, unstyled: m } = this.props;
+      return /* @__PURE__ */ n.createElement(
+        pe,
         {
           ref: this.setTimeSelectorRef,
           mobileMode: this.mobileMode,
           show: this.show,
-          cancelButton: s,
-          disabled: l,
+          cancelButton: i,
+          disabled: r,
           nowButton: o,
           format: h,
           min: this.min,
           max: this.max,
-          steps: r,
+          steps: l,
           smoothScroll: t,
           value: this.value,
           footer: !this.mobileMode,
           handleTimeChange: this.mobileMode && this.handleTimeChange,
           onChange: this.handleValueChange,
           onReject: this.handleValueReject,
-          unstyled: c
+          unstyled: m
         }
       );
     }, this.renderPopup = () => {
-      const { popupClass: t, ...s } = this.popupSettings, { unstyled: o } = this.props, l = o && o.uTimePicker, h = m(t), r = {
-        popupClass: g.popup({ c: l }),
+      const { popupClass: t, ...i } = this.popupSettings, { unstyled: o } = this.props, r = o && o.uTimePicker, h = c(t), l = {
+        popupClass: g.popup({ c: r }),
         show: this.show,
         animate: this.element !== null,
         anchor: this.element,
@@ -66,37 +90,37 @@ const n = class n extends a.Component {
           horizontal: "left",
           vertical: "top"
         },
-        ...s
+        ...i
       };
-      return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...r }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(Z, { ...r }, this.renderTimeSelector());
+      return this.props.popup ? /* @__PURE__ */ n.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ n.createElement(J, { ...l }, this.renderTimeSelector());
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: t = 0 } = this.state, s = {
+      const { windowWidth: t = 0 } = this.state, i = {
         expand: this.show,
         onClose: this.handleBlur,
         title: this.props.adaptiveTitle || this.props.label,
         subTitle: this.props.adaptiveSubtitle,
         windowWidth: t,
         footer: {
-          cancelText: this.localizationService.toLanguageString(f, u[le]),
+          cancelText: this.localizationService.toLanguageString(f, u[de]),
           onCancel: this.handleValueReject,
-          applyText: this.localizationService.toLanguageString(T, u[T]),
+          applyText: this.localizationService.toLanguageString(I, u[I]),
           onApply: (o) => this.handleValueChange(o)
         }
       };
-      return /* @__PURE__ */ a.createElement(be, { ...s }, /* @__PURE__ */ a.createElement(Se, null, this.renderTimeSelector()));
+      return /* @__PURE__ */ n.createElement(Se, { ...i }, /* @__PURE__ */ n.createElement(ye, null, this.renderTimeSelector()));
     }, this.setTimeSelectorRef = (t) => {
       this._timeSelector = 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.handleInputValueChange = (t) => {
-      const s = this.mergeTime(t.value);
-      this.handleValueChange({ ...t, value: s });
+    }, this.nextValue = (t, i) => t.value !== void 0 ? t.value : i.value, this.nextShow = (t, i) => t.show !== void 0 ? t.show : i.show, this.handleInputValueChange = (t) => {
+      const i = this.mergeTime(t.value);
+      this.handleValueChange({ ...t, value: i });
     }, this.handleTimeChange = (t) => {
       this.setState({ candidate: t.time });
     }, this.handleValueChange = (t) => {
       this.setState({
         value: y(t.value || this.state.candidate)
       }), this.valueDuringOnChange = t.value, this.showDuringOnChange = !1, this.shouldFocusDateInput = !0;
-      const { onChange: s } = this.props, o = this.state.candidate || this.value;
-      s && s.call(void 0, {
+      const { onChange: i } = this.props, o = this.state.candidate || this.value;
+      i && i.call(void 0, {
         syntheticEvent: t.syntheticEvent,
         nativeEvent: t.nativeEvent,
         value: o,
@@ -114,15 +138,15 @@ const n = class n extends a.Component {
     }, this.handleIconMouseDown = (t) => {
       t.preventDefault();
     }, this.handleKeyDown = (t) => {
-      const { altKey: s, keyCode: o } = t;
+      const { altKey: i, keyCode: o } = t;
       if (o === d.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
-    }, this.showLicenseWatermark = !Y(I, { component: "TimePicker" }), this.licenseMessage = $(I), this.state = {
-      value: this.props.defaultValue || n.defaultProps.defaultValue,
-      show: this.props.defaultShow || n.defaultProps.defaultShow,
+      i && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
+    }, this.showLicenseWatermark = !$(C, { component: "TimePicker" }), this.licenseMessage = ee(C), this.state = {
+      value: this.props.defaultValue || a.defaultProps.defaultValue,
+      show: this.props.defaultShow || a.defaultProps.defaultShow,
       focused: !1,
       candidate: null
     }, this.normalizeTime = this.normalizeTime.bind(this), this.setShow = this.setShow.bind(this), this.mergeTime = this.mergeTime.bind(this);
@@ -131,7 +155,7 @@ const n = class n extends a.Component {
     return this.props.id + "-popup-id";
   }
   get document() {
-    if (C)
+    if (T)
       return this.element && this.element.ownerDocument || document;
   }
   /**
@@ -156,8 +180,8 @@ const n = class n extends a.Component {
    * Gets the value of the TimePicker.
    */
   get value() {
-    const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
-    return i !== null ? y(i) : null;
+    const s = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
+    return s !== null ? y(s) : null;
   }
   /**
    * Gets the popup state of the TimeSelector.
@@ -175,12 +199,12 @@ const n = class n extends a.Component {
    * Represents the validity state into which the TimePicker is set.
    */
   get validity() {
-    const i = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), s = this.normalizeTime(this.max), o = me(i, t, s), l = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, r = this.props.valid !== void 0 ? this.props.valid : h;
+    const s = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), i = this.normalizeTime(this.max), o = D(s, t, i), r = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, l = this.props.valid !== void 0 ? this.props.valid : h;
     return {
-      customError: l,
-      rangeOverflow: fe(i, s),
-      rangeUnderflow: ge(i, t),
-      valid: r,
+      customError: r,
+      rangeOverflow: ve(s, i),
+      rangeUnderflow: fe(s, t),
+      valid: l,
       valueMissing: this.value === null
     };
   }
@@ -195,7 +219,7 @@ const n = class n extends a.Component {
    * @hidden
    */
   get validityStyles() {
-    return this.props.validityStyles !== void 0 ? this.props.validityStyles : n.defaultProps.validityStyles;
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
   }
   /**
    * @hidden
@@ -204,26 +228,33 @@ const n = class n extends a.Component {
     return this.props.required !== void 0 ? this.props.required : !1;
   }
   get popupSettings() {
-    return this.props.popupSettings || n.defaultProps.popupSettings;
+    return this.props.popupSettings || a.defaultProps.popupSettings;
   }
   get min() {
-    return this.props.min !== void 0 ? this.props.min : n.defaultProps.min;
+    return this.props.min !== void 0 ? this.props.min : a.defaultProps.min;
   }
   get max() {
-    return this.props.max !== void 0 ? this.props.max : n.defaultProps.max;
+    return this.props.max !== void 0 ? this.props.max : a.defaultProps.max;
   }
   get dateInputComp() {
-    return this.props.dateInput || n.defaultProps.dateInput;
+    return this.props.dateInput || a.defaultProps.dateInput;
   }
   get localizationService() {
-    return ne(this);
+    return le(this);
   }
   /**
    * @hidden
    */
   componentDidMount() {
-    var i;
-    this.observerResize = C && 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);
+    var t;
+    this.observerResize = T && 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);
+    const s = this.props.name || this.props.id;
+    this.KendoPasteSubscription = te(this._element, {
+      fieldName: s,
+      onValueChange: (i) => {
+        this.handleKendoPasteValue(i);
+      }
+    });
   }
   /**
    * @hidden
@@ -237,136 +268,136 @@ const n = class n extends a.Component {
    * @hidden
    */
   componentWillUnmount() {
-    var i;
-    (i = this.document) != null && i.body && this.observerResize && this.observerResize.disconnect();
+    var s, t;
+    (s = this.document) != null && s.body && this.observerResize && this.observerResize.disconnect(), (t = this.KendoPasteSubscription) == null || t.unsubscribe();
   }
   /**
    * @hidden
    */
   render() {
     const {
-      size: i = n.defaultProps.size,
-      rounded: t = n.defaultProps.rounded,
-      fillMode: s = n.defaultProps.fillMode,
+      size: s = a.defaultProps.size,
+      rounded: t = a.defaultProps.rounded,
+      fillMode: i = a.defaultProps.fillMode,
       disabled: o,
-      tabIndex: l,
+      tabIndex: r,
       title: h,
-      id: r,
-      className: c,
-      format: D,
-      formatPlaceholder: P,
-      width: z,
-      name: k,
-      steps: x,
-      validationMessage: E,
-      required: R,
+      id: l,
+      className: m,
+      format: O,
+      formatPlaceholder: z,
+      width: k,
+      name: x,
+      steps: E,
+      validationMessage: R,
+      required: V,
       validityStyles: B,
       ariaLabelledBy: A,
       ariaDescribedBy: F,
       unstyled: v,
-      enableMouseWheel: V,
-      autoCorrectParts: L,
-      autoSwitchParts: N,
+      enableMouseWheel: N,
+      autoCorrectParts: K,
+      autoSwitchParts: L,
       autoSwitchKeys: _,
       allowCaretMode: q,
-      inputAttributes: K
-    } = this.props, w = v && v.uTimePicker, b = !this.validityStyles || this.validity.valid, W = {
+      inputAttributes: W
+    } = this.props, w = v && v.uTimePicker, b = !this.validityStyles || this.validity.valid, U = {
       disabled: o,
-      format: D,
-      formatPlaceholder: P,
-      id: r,
+      format: O,
+      formatPlaceholder: z,
+      id: l,
       ariaLabelledBy: A,
       ariaDescribedBy: F,
       max: this.normalizeTime(this.max),
       min: this.normalizeTime(this.min),
-      name: k,
+      name: x,
       onChange: this.handleInputValueChange,
-      required: R,
-      steps: x,
-      tabIndex: this.show ? -1 : l,
+      required: V,
+      steps: E,
+      tabIndex: this.show ? -1 : r,
       title: h,
       valid: this.validity.valid,
-      validationMessage: E,
+      validationMessage: R,
       validityStyles: B,
       value: this.value && this.normalizeTime(this.value),
       label: void 0,
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaHasPopup: "dialog",
       ariaExpanded: this.show,
-      enableMouseWheel: V,
-      autoCorrectParts: L,
-      autoSwitchParts: N,
+      enableMouseWheel: N,
+      autoCorrectParts: K,
+      autoSwitchParts: L,
       autoSwitchKeys: _,
       allowCaretMode: q,
-      inputAttributes: K
-    }, U = this.localizationService.toLanguageString(f, u[f]), j = this.localizationService.toLanguageString(
+      inputAttributes: W
+    }, j = this.localizationService.toLanguageString(f, u[f]), H = this.localizationService.toLanguageString(
       M,
       u[M]
-    ), S = /* @__PURE__ */ a.createElement(
-      ee,
+    ), S = /* @__PURE__ */ n.createElement(
+      ie,
       {
         onFocus: this.handleFocus,
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      ({ onFocus: H, onBlur: G }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      ({ onFocus: G, onBlur: X }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "span",
         {
-          ref: (X) => {
-            this._element = X;
+          ref: (Z) => {
+            this._element = Z;
           },
-          className: m(
+          className: c(
             g.wrapper({
               c: w,
-              size: i,
+              size: s,
               rounded: t,
-              fillMode: s,
+              fillMode: i,
               invalid: !b,
               required: this.required,
               disabled: o
             }),
-            c
+            m
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: z },
-          onFocus: this.mobileMode ? this.handleClick : H,
-          onBlur: G,
+          style: { width: k },
+          onFocus: this.mobileMode ? this.handleClick : G,
+          onBlur: X,
           onClick: this.mobileMode ? this.handleClick : void 0
         },
-        /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ n.createElement(
           this.dateInputComp,
           {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this._popupId,
-            ...W
+            ...U
           }
         ),
-        /* @__PURE__ */ a.createElement(
-          we,
+        /* @__PURE__ */ n.createElement(
+          be,
           {
             tabIndex: -1,
             type: "button",
             icon: "clock",
-            svgIcon: ae,
+            svgIcon: re,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
-            title: j,
-            className: m(g.inputButton({ c: w })),
-            fillMode: s,
-            "aria-label": U
+            title: H,
+            className: c(g.inputButton({ c: w })),
+            fillMode: i,
+            "aria-label": j
           }
         ),
         !this.mobileMode && this.renderPopup()
-      ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ a.createElement(te, { message: this.licenseMessage }))
+      ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(se, { message: this.licenseMessage }))
     );
-    return this.props.label ? /* @__PURE__ */ a.createElement(
-      ve,
+    return this.props.label ? /* @__PURE__ */ n.createElement(
+      we,
       {
         dateInput: this._dateInput,
         label: this.props.label,
-        editorId: r,
+        editorId: l,
         editorValid: b,
         editorDisabled: this.props.disabled,
         children: S,
@@ -374,26 +405,26 @@ const n = class n extends a.Component {
       }
     ) : S;
   }
-  normalizeTime(i) {
-    return O(ce, i);
+  normalizeTime(s) {
+    return P(ge, s);
   }
-  setShow(i) {
-    const { onOpen: t, onClose: s } = this.props;
-    this.show !== i && (this.setState({ show: i }), i && t && t.call(void 0, {
+  setShow(s) {
+    const { onOpen: t, onClose: i } = this.props;
+    this.show !== s && (this.setState({ show: s }), s && t && t.call(void 0, {
       target: this
-    }), !i && s && s.call(void 0, {
+    }), !s && i && i.call(void 0, {
       target: this
     }));
   }
-  mergeTime(i) {
-    return this.value && i ? O(this.value, i) : i;
+  mergeTime(s) {
+    return this.value && s ? P(this.value, s) : s;
   }
-  calculateMedia(i) {
-    for (const t of i)
+  calculateMedia(s) {
+    for (const t of s)
       this.setState({ windowWidth: t.target.clientWidth });
   }
 };
-n.displayName = "TimePicker", n.propTypes = {
+a.displayName = "TimePicker", a.propTypes = {
   className: e.string,
   cancelButton: e.bool,
   nowButton: e.bool,
@@ -463,36 +494,36 @@ n.displayName = "TimePicker", n.propTypes = {
   validate: e.bool,
   valid: e.bool,
   size: e.oneOf(["small", "medium", "large"]),
-  rounded: e.oneOf(["small", "medium", "large", "full"]),
+  rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
   fillMode: e.oneOf(["solid", "flat", "outline"]),
   inputAttributes: e.object
-}, n.defaultProps = {
+}, a.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
   disabled: !1,
   format: "t",
-  max: pe,
-  min: ue,
+  max: ce,
+  min: me,
   popupSettings: {},
   tabIndex: 0,
   steps: {},
   validityStyles: !0,
-  dateInput: he,
+  dateInput: ue,
   size: void 0,
   rounded: void 0,
   fillMode: void 0
 };
-let p = n;
-const ye = Q(), Ce = J(
-  ie(
-    ye,
-    se(oe(p))
+let p = a;
+const Te = Y(), Ce = Q(
+  oe(
+    Te,
+    ne(ae(p))
   )
 );
 Ce.displayName = "KendoReactTimePicker";
-re(p);
+he(p);
 export {
   Ce as TimePicker,
-  ye as TimePickerPropsContext,
+  Te as TimePickerPropsContext,
   p as TimePickerWithoutContext
 };