@progress/kendo-react-dateinputs 9.1.1-develop.4 → 9.2.0-develop.1

package/datetimepicker/DateTimePicker.mjs

@@ -8,31 +8,31 @@
 "use client";
 import * as n from "react";
 import e from "prop-types";
-import { Popup as Q } from "@progress/kendo-react-popup";
+import { Popup as $ } 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 { Keys as d, validatePackage as ee, canUseDOM as O, AsyncFocusBlur as te, classNames as I, uDateTimePicker as D, createPropsContext as ie, withIdHOC as se, withPropsContext as oe, withUnstyledHOC as ae } from "@progress/kendo-react-common";
+import { calendarIcon as ne } from "@progress/kendo-svg-icons";
+import { DateInput as re } from "../dateinput/DateInput.mjs";
+import { Button as le } from "@progress/kendo-react-buttons";
+import { packageMetadata as he } from "../package-metadata.mjs";
+import { MAX_DATE as de, MIN_DATE as ue, isInDateRange as pe, MAX_TIME as ce, MIN_TIME as me } from "../utils.mjs";
+import { MOBILE_MEDIUM_DEVISE as fe } 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 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";
+import { provideLocalizationService as m, registerForLocalization as ge } from "@progress/kendo-react-intl";
+import { DateTimeSelector as ve } from "./DateTimeSelector.mjs";
+import { isInTimeRange as we } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as be } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as ye } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Ie } from "@progress/kendo-react-layout";
 const o = class o extends n.Component {
   constructor(t) {
     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: a, format: h, calendar: l, cancelButton: r, weekNumber: u, focusedDate: g, unstyled: v } = this.props;
+      const { disabled: i, minTime: s, maxTime: a, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
       return /* @__PURE__ */ n.createElement(
-        ge,
+        ve,
         {
           ref: (w) => {
             this._dateTimeSelector = w;
@@ -43,12 +43,12 @@ const o = class o extends n.Component {
           onChange: this.handleValueChange,
           onReject: this.handleReject,
           disabled: i,
-          weekNumber: u,
+          weekNumber: g,
           min: this.min,
           max: this.max,
           minTime: s,
           maxTime: a,
-          focusedDate: g,
+          focusedDate: u,
           format: h,
           calendar: l,
           mobileMode: this.mobileMode,
@@ -81,7 +81,7 @@ const o = class o extends n.Component {
           }
         }
       };
-      return /* @__PURE__ */ n.createElement(be, { ...h }, /* @__PURE__ */ n.createElement(ye, { overflowHidden: !0 }, this.renderPicker()));
+      return /* @__PURE__ */ n.createElement(ye, { ...h }, /* @__PURE__ */ n.createElement(Ie, { overflowHidden: !0 }, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (i) => {
@@ -111,7 +111,7 @@ const o = class o extends n.Component {
         return;
       }
       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 = {
+    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), ee(he), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
       focused: !1
@@ -159,7 +159,7 @@ const o = class o extends n.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= me && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= fe && this.props.adaptive);
   }
   get min() {
     return this.props.min !== void 0 ? this.props.min : o.defaultProps.min;
@@ -171,7 +171,7 @@ const o = class o extends n.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    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;
+    const t = pe(this.value, this.min, this.max) && we(this.value, this.props.minTime || me, this.props.maxTime || ce), 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,
@@ -228,50 +228,51 @@ const o = class o extends n.Component {
       rounded: i = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
       autoFocus: a = o.defaultProps.autoFocus,
-      disabled: h,
-      tabIndex: l,
-      title: r,
+      inputAttributes: h,
+      disabled: l,
+      tabIndex: r,
+      title: g,
       id: u,
-      format: g,
-      formatPlaceholder: v,
-      min: w,
-      max: x,
-      className: E,
-      width: k,
-      name: F,
+      format: v,
+      formatPlaceholder: w,
+      min: x,
+      max: E,
+      className: k,
+      width: F,
+      name: A,
       validationMessage: R,
       required: B,
       validityStyles: z,
-      minTime: A,
-      maxTime: N,
-      ariaLabelledBy: V,
-      ariaDescribedBy: L,
-      popup: _ = Q,
+      minTime: N,
+      maxTime: V,
+      ariaLabelledBy: L,
+      ariaDescribedBy: _,
+      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 = {
+      autoFill: K,
+      twoDigitYearMax: U,
+      enableMouseWheel: j,
+      autoCorrectParts: H,
+      autoSwitchParts: W,
+      autoSwitchKeys: X,
+      allowCaretMode: Y
+    } = this.props, y = b && b.uDateTimePicker, S = !this.validityStyles || this.validity.valid, Z = {
       id: u,
-      ariaLabelledBy: V,
-      ariaDescribedBy: L,
-      format: g,
-      formatPlaceholder: v,
-      disabled: h,
-      title: r,
+      ariaLabelledBy: L,
+      ariaDescribedBy: _,
+      format: v,
+      formatPlaceholder: w,
+      disabled: l,
+      title: g,
       validityStyles: z,
       validationMessage: R,
       required: B,
-      min: w,
-      max: x,
-      minTime: A,
-      maxTime: N,
-      name: F,
-      tabIndex: this.show ? -1 : l,
+      min: x,
+      max: E,
+      minTime: N,
+      maxTime: V,
+      name: A,
+      tabIndex: this.show ? -1 : r,
       valid: this.validity.valid,
       value: this.value,
       onChange: this.handleValueChange,
@@ -283,26 +284,26 @@ const o = class o extends n.Component {
       fillMode: null,
       rounded: null,
       unstyled: b,
-      autoFill: q,
-      twoDigitYearMax: K,
-      enableMouseWheel: U,
-      autoCorrectParts: j,
-      autoSwitchParts: H,
-      autoSwitchKeys: W,
-      allowCaretMode: X
+      autoFill: K,
+      twoDigitYearMax: U,
+      enableMouseWheel: j,
+      autoCorrectParts: H,
+      autoSwitchParts: W,
+      autoSwitchKeys: X,
+      allowCaretMode: Y
     }, T = /* @__PURE__ */ n.createElement(
-      ee,
+      te,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: Z, onBlur: G }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: G, onBlur: J }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "div",
         {
-          ref: (J) => {
-            this._element = J;
+          ref: (Q) => {
+            this._element = Q;
           },
           className: I(
             D.wrapper({
@@ -310,16 +311,16 @@ const o = class o extends n.Component {
               size: t,
               fillMode: s,
               rounded: i,
-              disabled: h,
+              disabled: l,
               required: this.required,
               invalid: !S
             }),
-            E
+            k
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: k },
-          onFocus: this.mobileMode ? void 0 : Z,
-          onBlur: G,
+          style: { width: F },
+          onFocus: this.mobileMode ? void 0 : G,
+          onBlur: J,
           onClick: this.mobileMode ? this.handleDateIconClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -330,16 +331,17 @@ const o = class o extends n.Component {
             ariaControls: this._popupId,
             ariaHasPopup: "dialog",
             autoFocus: a,
-            ...Y
+            inputAttributes: h,
+            ...Z
           }
         ),
         /* @__PURE__ */ n.createElement(
-          re,
+          le,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: ae,
+            svgIcon: ne,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
             title: m(this).toLanguageString(
@@ -356,7 +358,7 @@ const o = class o extends n.Component {
           }
         ),
         /* @__PURE__ */ n.createElement(
-          _,
+          q,
           {
             show: this.show,
             animate: this.element !== null,
@@ -377,7 +379,7 @@ const o = class o extends n.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ n.createElement(
-      we,
+      be,
       {
         dateInput: this._dateInput,
         label: this.props.label,
@@ -472,37 +474,38 @@ o.displayName = "DateTimePicker", o.propTypes = {
   size: e.oneOf([null, "small", "medium", "large"]),
   rounded: e.oneOf([null, "small", "medium", "large", "full"]),
   fillMode: e.oneOf([null, "solid", "flat", "outline"]),
-  autoFocus: e.bool
+  autoFocus: e.bool,
+  inputAttributes: e.object
 }, o.defaultProps = {
   defaultShow: !1,
   defaultValue: null,
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: he,
-  min: de,
+  max: de,
+  min: ue,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: ne,
+  dateInput: re,
   size: "medium",
   rounded: "medium",
   fillMode: "solid",
   autoFocus: !1
 };
 let f = o;
-const Ie = te(), De = ie(
-  se(
-    Ie,
-    oe(f)
+const De = ie(), Se = se(
+  oe(
+    De,
+    ae(f)
   )
 );
-De.displayName = "KendoReactDateTimePicker";
-fe(f);
+Se.displayName = "KendoReactDateTimePicker";
+ge(f);
 export {
-  De as DateTimePicker,
-  Ie as DateTimePickerPropsContext,
+  Se as DateTimePicker,
+  De as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };