@progress/kendo-react-dateinputs 14.5.0-develop.14 → 14.5.0-develop.16

package/timepicker/TimePicker.mjs

@@ -7,21 +7,21 @@
  */
 import * as n from "react";
 import e from "prop-types";
-import { Popup as J } from "@progress/kendo-react-popup";
+import { Popup as Y } from "@progress/kendo-react-popup";
 import { cloneDate as y } from "@progress/kendo-date-math";
-import { createPropsContext as Q, classNames as c, uTimePicker as g, Keys as d, validatePackage as Y, getLicenseMessage as $, canUseDOM as T, subscribeToKendoPaste as ee, AsyncFocusBlur as te, WatermarkOverlay as ie, withIdHOC 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 { createPropsContext as $, classNames as m, uTimePicker as g, Keys as d, validatePackage as ee, getLicenseMessage as te, canUseDOM as T, subscribeToKendoPaste as ie, AsyncFocusBlur as se, WatermarkOverlay as oe, withIdHOC as ne, withPropsContext as ae, withUnstyledHOC as re, withAdaptiveModeContext as le } from "@progress/kendo-react-common";
+import { clockIcon as he } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as de, registerForLocalization as ue } 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";
+import { timePickerSet as I, messages as u, toggleClock as f, timePickerCancel as pe, selectTime as M, toggleTimeSelector as P } from "../messages/index.mjs";
+import { DateInputInner as ce } from "../dateinput/DateInput.mjs";
+import { TimeSelector as me } from "./TimeSelector.mjs";
+import { MIN_TIME as ge, MAX_TIME as fe, setTime as D, MIDNIGHT_DATE as ve } from "../utils.mjs";
+import { isInRange as O, isSmallerThanMin as we, isBiggerThanMax as be } from "./utils.mjs";
+import { PickerFloatingLabel as Se } from "../hooks/usePickerFloatingLabel.mjs";
+import { Button as ye } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as Te } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Ce } 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) => {
@@ -36,7 +36,7 @@ const a = class a extends n.Component {
       isNaN(o.getTime()) || this.applyKendoPasteTime(o);
     }, this.applyKendoPasteTime = (t) => {
       const i = this.normalizeTime(t);
-      if (!D(i, this.min, this.max))
+      if (!O(i, this.min, this.max))
         return;
       const o = new Event("change", { bubbles: !0 }), r = {
         target: this._element,
@@ -51,9 +51,9 @@ const a = class a extends n.Component {
     }, this.focus = () => {
       this.dateInput && this.dateInput.focus();
     }, this.renderTimeSelector = () => {
-      const { smoothScroll: t, cancelButton: i, nowButton: o, disabled: r, format: h, steps: l, unstyled: m } = this.props;
+      const { smoothScroll: t, cancelButton: i, nowButton: o, disabled: r, format: h, steps: l, unstyled: c } = this.props;
       return /* @__PURE__ */ n.createElement(
-        pe,
+        me,
         {
           ref: this.setTimeSelectorRef,
           mobileMode: this.mobileMode,
@@ -71,11 +71,11 @@ const a = class a extends n.Component {
           handleTimeChange: this.mobileMode && this.handleTimeChange,
           onChange: this.handleValueChange,
           onReject: this.handleValueReject,
-          unstyled: m
+          unstyled: c
         }
       );
     }, this.renderPopup = () => {
-      const { popupClass: t, ...i } = this.popupSettings, { unstyled: o } = this.props, r = o && o.uTimePicker, h = c(t), l = {
+      const { popupClass: t, ...i } = this.popupSettings, { unstyled: o } = this.props, r = o && o.uTimePicker, h = m(t), l = {
         popupClass: g.popup({ c: r }),
         show: this.show,
         animate: this.element !== null,
@@ -92,7 +92,7 @@ const a = class a extends n.Component {
         },
         ...i
       };
-      return this.props.popup ? /* @__PURE__ */ n.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ n.createElement(J, { ...l }, this.renderTimeSelector());
+      return this.props.popup ? /* @__PURE__ */ n.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ n.createElement(Y, { ...l }, this.renderTimeSelector());
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, i = {
         expand: this.show,
@@ -101,13 +101,13 @@ const a = class a extends n.Component {
         subTitle: this.props.adaptiveSubtitle,
         windowWidth: t,
         footer: {
-          cancelText: this.localizationService.toLanguageString(f, u[de]),
+          cancelText: this.localizationService.toLanguageString(f, u[pe]),
           onCancel: this.handleValueReject,
           applyText: this.localizationService.toLanguageString(I, u[I]),
           onApply: (o) => this.handleValueChange(o)
         }
       };
-      return /* @__PURE__ */ n.createElement(Se, { ...i }, /* @__PURE__ */ n.createElement(ye, null, this.renderTimeSelector()));
+      return /* @__PURE__ */ n.createElement(Te, { ...i }, /* @__PURE__ */ n.createElement(Ce, null, this.renderTimeSelector()));
     }, this.setTimeSelectorRef = (t) => {
       this._timeSelector = t;
     }, 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) => {
@@ -144,7 +144,7 @@ const a = class a extends n.Component {
         return;
       }
       i && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
-    }, this.showLicenseWatermark = !Y(C, { component: "TimePicker" }), this.licenseMessage = $(C), this.state = {
+    }, this.showLicenseWatermark = !ee(C, { component: "TimePicker" }), this.licenseMessage = te(C), this.state = {
       value: this.props.defaultValue || a.defaultProps.defaultValue,
       show: this.props.defaultShow || a.defaultProps.defaultShow,
       focused: !1,
@@ -199,11 +199,11 @@ const a = class a extends n.Component {
    * Represents the validity state into which the TimePicker is set.
    */
   get validity() {
-    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;
+    const s = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), i = this.normalizeTime(this.max), o = O(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: r,
-      rangeOverflow: ve(s, i),
-      rangeUnderflow: fe(s, t),
+      rangeOverflow: be(s, i),
+      rangeUnderflow: we(s, t),
       valid: l,
       valueMissing: this.value === null
     };
@@ -240,7 +240,7 @@ const a = class a extends n.Component {
     return this.props.dateInput || a.defaultProps.dateInput;
   }
   get localizationService() {
-    return le(this);
+    return de(this);
   }
   /**
    * @hidden
@@ -249,7 +249,7 @@ const a = class a extends n.Component {
     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 = ee(this._element, {
+    this.KendoPasteSubscription = ie(this._element, {
       fieldName: s,
       onValueChange: (i) => {
         this.handleKendoPasteValue(i);
@@ -283,42 +283,43 @@ const a = class a extends n.Component {
       tabIndex: r,
       title: h,
       id: l,
-      className: m,
-      format: O,
-      formatPlaceholder: z,
-      width: k,
-      name: x,
-      steps: E,
-      validationMessage: R,
-      required: V,
-      validityStyles: B,
+      className: c,
+      format: z,
+      formatPlaceholder: k,
+      width: x,
+      name: E,
+      steps: R,
+      validationMessage: V,
+      required: B,
+      validityStyles: L,
       ariaLabelledBy: A,
       ariaDescribedBy: F,
       unstyled: v,
       enableMouseWheel: N,
       autoCorrectParts: K,
-      autoSwitchParts: L,
-      autoSwitchKeys: _,
-      allowCaretMode: q,
-      inputAttributes: W
-    } = this.props, w = v && v.uTimePicker, b = !this.validityStyles || this.validity.valid, U = {
+      autoSwitchParts: _,
+      autoSwitchKeys: q,
+      allowCaretMode: W,
+      inputAttributes: U
+    } = this.props, w = v && v.uTimePicker, b = !this.validityStyles || this.validity.valid, j = this.localizationService.toLanguageString(M, u[M]), H = {
       disabled: o,
-      format: O,
-      formatPlaceholder: z,
+      format: z,
+      formatPlaceholder: k,
       id: l,
       ariaLabelledBy: A,
       ariaDescribedBy: F,
+      ariaLabel: j,
       max: this.normalizeTime(this.max),
       min: this.normalizeTime(this.min),
-      name: x,
+      name: E,
       onChange: this.handleInputValueChange,
-      required: V,
-      steps: E,
+      required: B,
+      steps: R,
       tabIndex: this.show ? -1 : r,
       title: h,
       valid: this.validity.valid,
-      validationMessage: R,
-      validityStyles: B,
+      validationMessage: V,
+      validityStyles: L,
       value: this.value && this.normalizeTime(this.value),
       label: void 0,
       placeholder: this.state.focused ? null : this.props.placeholder,
@@ -326,28 +327,28 @@ const a = class a extends n.Component {
       ariaExpanded: this.show,
       enableMouseWheel: N,
       autoCorrectParts: K,
-      autoSwitchParts: L,
-      autoSwitchKeys: _,
-      allowCaretMode: q,
-      inputAttributes: W
-    }, j = this.localizationService.toLanguageString(f, u[f]), H = this.localizationService.toLanguageString(
-      M,
-      u[M]
+      autoSwitchParts: _,
+      autoSwitchKeys: q,
+      allowCaretMode: W,
+      inputAttributes: U
+    }, G = this.localizationService.toLanguageString(f, u[f]), X = this.localizationService.toLanguageString(
+      P,
+      u[P]
     ), S = /* @__PURE__ */ n.createElement(
-      te,
+      se,
       {
         onFocus: this.handleFocus,
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      ({ onFocus: G, onBlur: X }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: Z, onBlur: J }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "span",
         {
-          ref: (Z) => {
-            this._element = Z;
+          ref: (Q) => {
+            this._element = Q;
           },
-          className: c(
+          className: m(
             g.wrapper({
               c: w,
               size: s,
@@ -357,12 +358,13 @@ const a = class a extends n.Component {
               required: this.required,
               disabled: o
             }),
-            m
+            { "k-focus": this.state.focused },
+            c
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: k },
-          onFocus: this.mobileMode ? this.handleClick : G,
-          onBlur: X,
+          style: { width: x },
+          onFocus: this.mobileMode ? this.handleClick : Z,
+          onBlur: J,
           onClick: this.mobileMode ? this.handleClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -371,29 +373,29 @@ const a = class a extends n.Component {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this.show ? this._popupId : void 0,
-            ...U
+            ...H
           }
         ),
         /* @__PURE__ */ n.createElement(
-          be,
+          ye,
           {
             tabIndex: -1,
             type: "button",
             icon: "clock",
-            svgIcon: re,
+            svgIcon: he,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
-            title: H,
-            className: c(g.inputButton({ c: w })),
+            title: X,
+            className: m(g.inputButton({ c: w })),
             fillMode: i,
-            "aria-label": j
+            "aria-label": G
           }
         ),
         !this.mobileMode && this.renderPopup()
-      ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(ie, { message: this.licenseMessage }))
+      ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ n.createElement(oe, { message: this.licenseMessage }))
     );
     return this.props.label ? /* @__PURE__ */ n.createElement(
-      we,
+      Se,
       {
         dateInput: this._dateInput,
         label: this.props.label,
@@ -406,7 +408,7 @@ const a = class a extends n.Component {
     ) : S;
   }
   normalizeTime(s) {
-    return P(ge, s);
+    return D(ve, s);
   }
   setShow(s) {
     const { onOpen: t, onClose: i } = this.props;
@@ -417,7 +419,7 @@ const a = class a extends n.Component {
     }));
   }
   mergeTime(s) {
-    return this.value && s ? P(this.value, s) : s;
+    return this.value && s ? D(this.value, s) : s;
   }
   calculateMedia(s) {
     for (const t of s)
@@ -478,6 +480,7 @@ a.displayName = "TimePicker", a.propTypes = {
     appendTo: e.any,
     popupClass: e.string
   }),
+  dateInput: e.elementType,
   show: e.bool,
   steps: e.shape({
     hour: e.number,
@@ -502,28 +505,28 @@ a.displayName = "TimePicker", a.propTypes = {
   defaultValue: null,
   disabled: !1,
   format: "t",
-  max: ce,
-  min: me,
+  max: fe,
+  min: ge,
   popupSettings: {},
   tabIndex: 0,
   steps: {},
   validityStyles: !0,
-  dateInput: ue,
+  dateInput: ce,
   size: void 0,
   rounded: void 0,
   fillMode: void 0
 };
 let p = a;
-const Te = Q(), Ce = se(
-  oe(
-    Te,
-    ne(ae(p))
+const Ie = $(), Me = ne(
+  ae(
+    Ie,
+    re(le(p))
   )
 );
-Ce.displayName = "KendoReactTimePicker";
-he(p);
+Me.displayName = "KendoReactTimePicker";
+ue(p);
 export {
-  Ce as TimePicker,
-  Te as TimePickerPropsContext,
+  Me as TimePicker,
+  Ie as TimePickerPropsContext,
   p as TimePickerWithoutContext
 };