@progress/kendo-react-dateinputs 8.2.0-develop.1 → 8.2.0-develop.10

package/datetimepicker/DateTimePicker.mjs

@@ -8,22 +8,22 @@
 "use client";
 import * as a from "react";
 import e from "prop-types";
-import { Popup as _ } from "@progress/kendo-react-popup";
+import { Popup as K } from "@progress/kendo-react-popup";
 import { cloneDate as I } from "@progress/kendo-date-math";
-import { Keys as h, validatePackage as K, canUseDOM as y, AsyncFocusBlur as U, classNames as j, kendoThemeMaps as D, createPropsContext as $, withIdHOC as W, withPropsContext as X } from "@progress/kendo-react-common";
-import { calendarIcon as H } from "@progress/kendo-svg-icons";
-import { DateInput as Z } from "../dateinput/DateInput.mjs";
-import { Button as G } from "@progress/kendo-react-buttons";
-import { packageMetadata as J } from "../package-metadata.mjs";
-import { MAX_DATE as Q, MIN_DATE as Y, isInDateRange as ee, MAX_TIME as te, MIN_TIME as ie } from "../utils.mjs";
-import { MOBILE_MEDIUM_DEVISE as se } from "../common/constants.mjs";
-import { dateTimePickerCancel as S, messages as u, dateTimePickerSet as T, toggleDateTimeSelector as p } from "../messages/index.mjs";
-import { provideLocalizationService as m, registerForLocalization as oe } from "@progress/kendo-react-intl";
-import { DateTimeSelector as ne } from "./DateTimeSelector.mjs";
-import { isInTimeRange as ae } from "../timepicker/utils.mjs";
-import { PickerFloatingLabel as re } from "../hooks/usePickerFloatingLabel.mjs";
-import { AdaptiveMode as le } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as de } from "@progress/kendo-react-layout";
+import { Keys as h, validatePackage as U, canUseDOM as y, AsyncFocusBlur as j, classNames as $, kendoThemeMaps as D, createPropsContext as W, withIdHOC as X, withPropsContext as H } from "@progress/kendo-react-common";
+import { calendarIcon as Z } from "@progress/kendo-svg-icons";
+import { DateInput as G } from "../dateinput/DateInput.mjs";
+import { Button as J } from "@progress/kendo-react-buttons";
+import { packageMetadata as Q } from "../package-metadata.mjs";
+import { MAX_DATE as Y, MIN_DATE as ee, isInDateRange as te, MAX_TIME as ie, MIN_TIME as se } from "../utils.mjs";
+import { MOBILE_MEDIUM_DEVISE as oe } from "../common/constants.mjs";
+import { dateTimePickerCancel as S, messages as p, dateTimePickerSet as T, toggleDateTimeSelector as m } from "../messages/index.mjs";
+import { provideLocalizationService as c, registerForLocalization as ne } from "@progress/kendo-react-intl";
+import { DateTimeSelector as ae } from "./DateTimeSelector.mjs";
+import { isInTimeRange as re } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as le } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as de } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as he } from "@progress/kendo-react-layout";
 const o = class o extends a.Component {
   constructor(t) {
     super(t), this._element = null, this._dateInput = a.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
@@ -37,11 +37,11 @@ const o = class o extends a.Component {
         format: d,
         calendar: l,
         cancelButton: r,
-        weekNumber: f,
+        weekNumber: u,
         focusedDate: g
       } = this.props;
       return /* @__PURE__ */ a.createElement(
-        ne,
+        ae,
         {
           ref: (v) => {
             this._dateTimeSelector = v;
@@ -52,7 +52,7 @@ const o = class o extends a.Component {
           onChange: this.handleValueChange,
           onReject: this.handleReject,
           disabled: i,
-          weekNumber: f,
+          weekNumber: u,
           min: this.min,
           max: this.max,
           minTime: s,
@@ -65,7 +65,7 @@ const o = class o extends a.Component {
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(S, u[S]), n = m(this).toLanguageString(T, u[T]), d = {
+      const { windowWidth: i = 0 } = this.state, s = c(this).toLanguageString(S, p[S]), n = c(this).toLanguageString(T, p[T]), d = {
         expand: this.show,
         onClose: this.handleBlur,
         adaptiveTitle: this.props.adaptiveTitle,
@@ -83,7 +83,7 @@ const o = class o extends a.Component {
           }
         }
       };
-      return /* @__PURE__ */ a.createElement(le, { ...d }, /* @__PURE__ */ a.createElement(de, { className: "!k-overflow-hidden" }, this.renderPicker()));
+      return /* @__PURE__ */ a.createElement(de, { ...d }, /* @__PURE__ */ a.createElement(he, { className: "!k-overflow-hidden" }, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (i) => {
@@ -113,7 +113,7 @@ const o = class o extends a.Component {
         return;
       }
       s && (n === h.up || n === h.down) && (i.preventDefault(), i.stopPropagation(), this.shouldFocusDateInput = n === h.up, this.setShow(n === h.down));
-    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), K(J), this.state = {
+    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), U(Q), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
       focused: !1
@@ -161,7 +161,7 @@ const o = class o extends a.Component {
    * The mobile mode of the ComboBox.
    */
   get mobileMode() {
-    return !!(this.state.windowWidth && this.state.windowWidth <= se && this.props.adaptive);
+    return !!(this.state.windowWidth && this.state.windowWidth <= oe && this.props.adaptive);
   }
   get min() {
     return this.props.min !== void 0 ? this.props.min : o.defaultProps.min;
@@ -173,7 +173,7 @@ const o = class o extends a.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const t = ee(this.value, this.min, this.max) && ae(this.value, this.props.minTime || ie, this.props.maxTime || te), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, n = this.props.valid !== void 0 ? this.props.valid : s;
+    const t = te(this.value, this.min, this.max) && re(this.value, this.props.minTime || se, this.props.maxTime || ie), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, n = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: i,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -229,42 +229,43 @@ const o = class o extends a.Component {
       size: t = o.defaultProps.size,
       rounded: i = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
-      disabled: n,
-      tabIndex: d,
-      title: l,
-      id: r,
-      format: f,
-      formatPlaceholder: g,
-      min: v,
-      max: M,
-      className: k,
-      width: O,
-      name: P,
-      validationMessage: C,
-      required: x,
-      validityStyles: E,
-      minTime: F,
-      maxTime: R,
-      ariaLabelledBy: z,
-      ariaDescribedBy: A,
-      popup: B = _
-    } = this.props, w = !this.validityStyles || this.validity.valid, N = {
-      id: r,
-      ariaLabelledBy: z,
-      ariaDescribedBy: A,
-      format: f,
-      formatPlaceholder: g,
-      disabled: n,
-      title: l,
-      validityStyles: E,
-      validationMessage: C,
-      required: x,
-      min: v,
-      max: M,
-      minTime: F,
-      maxTime: R,
-      name: P,
-      tabIndex: this.show ? -1 : d,
+      autoFocus: n = o.defaultProps.autoFocus,
+      disabled: d,
+      tabIndex: l,
+      title: r,
+      id: u,
+      format: g,
+      formatPlaceholder: v,
+      min: M,
+      max: k,
+      className: O,
+      width: P,
+      name: C,
+      validationMessage: x,
+      required: E,
+      validityStyles: F,
+      minTime: R,
+      maxTime: z,
+      ariaLabelledBy: A,
+      ariaDescribedBy: B,
+      popup: N = K
+    } = this.props, w = !this.validityStyles || this.validity.valid, q = {
+      id: u,
+      ariaLabelledBy: A,
+      ariaDescribedBy: B,
+      format: g,
+      formatPlaceholder: v,
+      disabled: d,
+      title: r,
+      validityStyles: F,
+      validationMessage: x,
+      required: E,
+      min: M,
+      max: k,
+      minTime: R,
+      maxTime: z,
+      name: C,
+      tabIndex: this.show ? -1 : l,
       valid: this.validity.valid,
       value: this.value,
       onChange: this.handleValueChange,
@@ -276,20 +277,20 @@ const o = class o extends a.Component {
       fillMode: null,
       rounded: null
     }, b = /* @__PURE__ */ a.createElement(
-      U,
+      j,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: q, onBlur: V }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      ({ onFocus: V, onBlur: L }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
         "div",
         {
-          ref: (L) => {
-            this._element = L;
+          ref: (_) => {
+            this._element = _;
           },
-          className: j(
+          className: $(
             "k-input",
             "k-datetimepicker",
             {
@@ -300,12 +301,12 @@ const o = class o extends a.Component {
               "k-required": this.required,
               "k-disabled": this.props.disabled
             },
-            k
+            O
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: O },
-          onFocus: this.mobileMode ? void 0 : q,
-          onBlur: V,
+          style: { width: P },
+          onFocus: this.mobileMode ? void 0 : V,
+          onBlur: L,
           onClick: this.mobileMode ? this.handleDateIconClick : void 0
         },
         /* @__PURE__ */ a.createElement(
@@ -315,27 +316,28 @@ const o = class o extends a.Component {
             ariaRole: "combobox",
             ariaControls: this._popupId,
             readonly: this.mobileMode,
-            ...N
+            autoFocus: n,
+            ...q
           }
         ),
         /* @__PURE__ */ a.createElement(
-          G,
+          J,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: H,
+            svgIcon: Z,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
-            title: m(this).toLanguageString(p, u[p]),
+            title: c(this).toLanguageString(m, p[m]),
             className: "k-input-button",
             rounded: null,
             fillMode: s,
-            "aria-label": m(this).toLanguageString(p, u[p])
+            "aria-label": c(this).toLanguageString(m, p[m])
           }
         ),
         /* @__PURE__ */ a.createElement(
-          B,
+          N,
           {
             show: this.show,
             animate: this.element !== null,
@@ -356,11 +358,11 @@ const o = class o extends a.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ a.createElement(
-      re,
+      le,
       {
         dateInput: this._dateInput,
         label: this.props.label,
-        editorId: r,
+        editorId: u,
         editorValid: w,
         editorDisabled: this.props.disabled,
         children: b,
@@ -445,32 +447,34 @@ o.displayName = "DateTimePicker", o.propTypes = {
   cancelButton: e.bool,
   size: e.oneOf([null, "small", "medium", "large"]),
   rounded: e.oneOf([null, "small", "medium", "large", "full"]),
-  fillMode: e.oneOf([null, "solid", "flat", "outline"])
+  fillMode: e.oneOf([null, "solid", "flat", "outline"]),
+  autoFocus: e.bool
 }, 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: Q,
-  min: Y,
+  max: Y,
+  min: ee,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   required: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: Z,
+  dateInput: G,
   size: "medium",
   rounded: "medium",
-  fillMode: "solid"
+  fillMode: "solid",
+  autoFocus: !1
 };
-let c = o;
-const he = $(), ue = W(X(he, c));
-ue.displayName = "KendoReactDateTimePicker";
-oe(c);
+let f = o;
+const ue = W(), pe = X(H(ue, f));
+pe.displayName = "KendoReactDateTimePicker";
+ne(f);
 export {
-  ue as DateTimePicker,
-  he as DateTimePickerPropsContext,
-  c as DateTimePickerWithoutContext
+  pe as DateTimePicker,
+  ue as DateTimePickerPropsContext,
+  f as DateTimePickerWithoutContext
 };