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

package/timepicker/TimePicker.mjs

@@ -8,41 +8,41 @@
 "use client";
 import * as a from "react";
 import e from "prop-types";
-import { Popup as U } from "@progress/kendo-react-popup";
+import { Popup as G } from "@progress/kendo-react-popup";
 import { cloneDate as y } from "@progress/kendo-date-math";
-import { classNames as c, uTimePicker as g, Keys as d, validatePackage as K, canUseDOM as I, AsyncFocusBlur as H, createPropsContext as j, withIdHOC as W, withPropsContext as G, withUnstyledHOC as X } from "@progress/kendo-react-common";
-import { clockIcon as Z } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as J, registerForLocalization as Q } from "@progress/kendo-react-intl";
-import { packageMetadata as Y } from "../package-metadata.mjs";
-import { toggleClock as f, messages as u, timePickerCancel as $, timePickerSet as T, toggleTimeSelector as C } from "../messages/index.mjs";
-import { DateInput as ee } from "../dateinput/DateInput.mjs";
-import { TimeSelector as te } from "./TimeSelector.mjs";
-import { MAX_TIME as ie, MIN_TIME as se, setTime as M, MIDNIGHT_DATE as oe } from "../utils.mjs";
-import { isInRange as ne, isBiggerThanMax as ae, isSmallerThanMin as le } from "./utils.mjs";
-import { PickerFloatingLabel as re } from "../hooks/usePickerFloatingLabel.mjs";
-import { Button as he } from "@progress/kendo-react-buttons";
-import { MOBILE_MEDIUM_DEVISE as de } from "../common/constants.mjs";
-import { AdaptiveMode as ue } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as pe } from "@progress/kendo-react-layout";
+import { classNames as c, uTimePicker as g, Keys as d, validatePackage as X, canUseDOM as I, AsyncFocusBlur as Z, createPropsContext as J, withIdHOC as Q, withPropsContext as Y, withUnstyledHOC as $ } from "@progress/kendo-react-common";
+import { clockIcon as ee } from "@progress/kendo-svg-icons";
+import { provideLocalizationService as te, registerForLocalization as ie } from "@progress/kendo-react-intl";
+import { packageMetadata as se } from "../package-metadata.mjs";
+import { toggleClock as f, messages as u, timePickerCancel as oe, timePickerSet as C, toggleTimeSelector as T } from "../messages/index.mjs";
+import { DateInput as ne } from "../dateinput/DateInput.mjs";
+import { TimeSelector as ae } from "./TimeSelector.mjs";
+import { MAX_TIME as re, MIN_TIME as le, setTime as M, MIDNIGHT_DATE as he } from "../utils.mjs";
+import { isInRange as de, isBiggerThanMax as ue, isSmallerThanMin as pe } from "./utils.mjs";
+import { PickerFloatingLabel as me } from "../hooks/usePickerFloatingLabel.mjs";
+import { Button as ce } from "@progress/kendo-react-buttons";
+import { MOBILE_MEDIUM_DEVISE as ge } from "../common/constants.mjs";
+import { AdaptiveMode as fe } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ve } 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.focus = () => {
       this.dateInput && this.dateInput.focus();
     }, this.renderTimeSelector = () => {
-      const { smoothScroll: t, cancelButton: s, nowButton: o, disabled: r, format: h, steps: l, unstyled: m } = this.props;
+      const { smoothScroll: t, cancelButton: s, nowButton: o, disabled: l, format: h, steps: r, unstyled: m } = this.props;
       return /* @__PURE__ */ a.createElement(
-        te,
+        ae,
         {
           ref: this.setTimeSelectorRef,
           mobileMode: this.mobileMode,
           show: this.show,
           cancelButton: s,
-          disabled: r,
+          disabled: l,
           nowButton: o,
           format: h,
           min: this.min,
           max: this.max,
-          steps: l,
+          steps: r,
           smoothScroll: t,
           value: this.value,
           footer: !this.mobileMode,
@@ -53,8 +53,8 @@ const n = class n extends a.Component {
         }
       );
     }, this.renderPopup = () => {
-      const { popupClass: t, ...s } = this.popupSettings, { unstyled: o } = this.props, r = o && o.uTimePicker, h = c(t), l = {
-        popupClass: g.popup({ c: r }),
+      const { popupClass: t, ...s } = this.popupSettings, { unstyled: o } = this.props, l = o && o.uTimePicker, h = c(t), r = {
+        popupClass: g.popup({ c: l }),
         show: this.show,
         animate: this.element !== null,
         anchor: this.element,
@@ -70,7 +70,7 @@ const n = class n extends a.Component {
         },
         ...s
       };
-      return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(U, { ...l }, this.renderTimeSelector());
+      return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...r }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(G, { ...r }, this.renderTimeSelector());
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, s = {
         expand: this.show,
@@ -78,13 +78,13 @@ const n = class n extends a.Component {
         adaptiveTitle: this.props.adaptiveTitle,
         windowWidth: t,
         footer: {
-          cancelText: this.localizationService.toLanguageString(f, u[$]),
+          cancelText: this.localizationService.toLanguageString(f, u[oe]),
           onCancel: this.handleValueReject,
-          applyText: this.localizationService.toLanguageString(T, u[T]),
+          applyText: this.localizationService.toLanguageString(C, u[C]),
           onApply: (o) => this.handleValueChange(o)
         }
       };
-      return /* @__PURE__ */ a.createElement(ue, { ...s }, /* @__PURE__ */ a.createElement(pe, { overflowHidden: !0 }, this.renderTimeSelector()));
+      return /* @__PURE__ */ a.createElement(fe, { ...s }, /* @__PURE__ */ a.createElement(ve, { overflowHidden: !0 }, 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) => {
@@ -121,7 +121,7 @@ const n = class n extends a.Component {
         return;
       }
       s && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
-    }, K(Y), this.state = {
+    }, X(se), this.state = {
       value: this.props.defaultValue || n.defaultProps.defaultValue,
       show: this.props.defaultShow || n.defaultProps.defaultShow,
       focused: !1,
@@ -176,12 +176,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 = ne(i, t, s), r = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, l = this.props.valid !== void 0 ? this.props.valid : h;
+    const i = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), s = this.normalizeTime(this.max), o = de(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;
     return {
-      customError: r,
-      rangeOverflow: ae(i, s),
-      rangeUnderflow: le(i, t),
-      valid: l,
+      customError: l,
+      rangeOverflow: ue(i, s),
+      rangeUnderflow: pe(i, t),
+      valid: r,
       valueMissing: this.value === null
     };
   }
@@ -189,7 +189,7 @@ const n = class n extends a.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= de && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= ge && this.props.adaptive);
   }
   /**
    * @hidden
@@ -216,7 +216,7 @@ const n = class n extends a.Component {
     return this.props.dateInput || n.defaultProps.dateInput;
   }
   get localizationService() {
-    return J(this);
+    return te(this);
   }
   /**
    * @hidden
@@ -247,9 +247,9 @@ const n = class n extends a.Component {
       rounded: t = n.defaultProps.rounded,
       fillMode: s = n.defaultProps.fillMode,
       disabled: o,
-      tabIndex: r,
+      tabIndex: l,
       title: h,
-      id: l,
+      id: r,
       className: m,
       format: D,
       formatPlaceholder: O,
@@ -261,12 +261,17 @@ const n = class n extends a.Component {
       validityStyles: B,
       ariaLabelledBy: R,
       ariaDescribedBy: V,
-      unstyled: v
-    } = this.props, w = v && v.uTimePicker, S = !this.validityStyles || this.validity.valid, F = {
+      unstyled: v,
+      enableMouseWheel: F,
+      autoCorrectParts: A,
+      autoSwitchParts: N,
+      autoSwitchKeys: L,
+      allowCaretMode: _
+    } = this.props, w = v && v.uTimePicker, S = !this.validityStyles || this.validity.valid, q = {
       disabled: o,
       format: D,
       formatPlaceholder: O,
-      id: l,
+      id: r,
       ariaLabelledBy: R,
       ariaDescribedBy: V,
       max: this.normalizeTime(this.max),
@@ -275,7 +280,7 @@ const n = class n extends a.Component {
       onChange: this.handleInputValueChange,
       required: k,
       steps: x,
-      tabIndex: this.show ? -1 : r,
+      tabIndex: this.show ? -1 : l,
       title: h,
       valid: this.validity.valid,
       validationMessage: E,
@@ -288,24 +293,29 @@ const n = class n extends a.Component {
       size: null,
       fillMode: null,
       rounded: null,
-      readonly: this.mobileMode
-    }, A = this.localizationService.toLanguageString(f, u[f]), N = this.localizationService.toLanguageString(
-      C,
-      u[C]
+      readonly: this.mobileMode,
+      enableMouseWheel: F,
+      autoCorrectParts: A,
+      autoSwitchParts: N,
+      autoSwitchKeys: L,
+      allowCaretMode: _
+    }, K = this.localizationService.toLanguageString(f, u[f]), U = this.localizationService.toLanguageString(
+      T,
+      u[T]
     ), b = /* @__PURE__ */ a.createElement(
-      H,
+      Z,
       {
         onFocus: this.handleFocus,
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         onSyncBlur: this.props.onBlur,
         onSyncFocus: this.props.onFocus
       },
-      ({ onFocus: L, onBlur: _ }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      ({ onFocus: H, onBlur: j }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
         "span",
         {
           id: this.props.id,
-          ref: (q) => {
-            this._element = q;
+          ref: (W) => {
+            this._element = W;
           },
           className: c(
             g.wrapper({
@@ -321,8 +331,8 @@ const n = class n extends a.Component {
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: P },
-          onFocus: L,
-          onBlur: _,
+          onFocus: H,
+          onBlur: j,
           onClick: this.mobileMode ? this.handleIconClick : void 0
         },
         /* @__PURE__ */ a.createElement(
@@ -331,34 +341,34 @@ const n = class n extends a.Component {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this._popupId,
-            ...F
+            ...q
           }
         ),
         /* @__PURE__ */ a.createElement(
-          he,
+          ce,
           {
             tabIndex: -1,
             type: "button",
             icon: "clock",
-            svgIcon: Z,
+            svgIcon: ee,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleIconClick,
-            title: N,
+            title: U,
             className: c(g.inputButton({ c: w })),
             rounded: null,
             fillMode: s,
-            "aria-label": A
+            "aria-label": K
           }
         ),
         !this.mobileMode && this.renderPopup()
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ a.createElement(
-      re,
+      me,
       {
         dateInput: this._dateInput,
         label: this.props.label,
-        editorId: l,
+        editorId: r,
         editorValid: S,
         editorDisabled: this.props.disabled,
         children: b,
@@ -367,7 +377,7 @@ const n = class n extends a.Component {
     ) : b;
   }
   normalizeTime(i) {
-    return M(oe, i);
+    return M(he, i);
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;
@@ -462,28 +472,28 @@ n.displayName = "TimePicker", n.propTypes = {
   defaultValue: null,
   disabled: !1,
   format: "t",
-  max: ie,
-  min: se,
+  max: re,
+  min: le,
   popupSettings: {},
   tabIndex: 0,
   steps: {},
   validityStyles: !0,
-  dateInput: ee,
+  dateInput: ne,
   size: "medium",
   rounded: "medium",
   fillMode: "solid"
 };
 let p = n;
-const me = j(), ce = W(
-  G(
-    me,
-    X(p)
+const we = J(), Se = Q(
+  Y(
+    we,
+    $(p)
   )
 );
-ce.displayName = "KendoReactTimePicker";
-Q(p);
+Se.displayName = "KendoReactTimePicker";
+ie(p);
 export {
-  ce as TimePicker,
-  me as TimePickerPropsContext,
+  Se as TimePicker,
+  we as TimePickerPropsContext,
   p as TimePickerWithoutContext
 };