@progress/kendo-react-dateinputs 14.5.0-develop.9 → 15.0.0-develop.2

package/datetimepicker/DateTimePicker.mjs

@@ -7,20 +7,20 @@
  */
 import * as n from "react";
 import e from "prop-types";
-import { Popup as ee } from "@progress/kendo-react-popup";
+import { Popup as ie } from "@progress/kendo-react-popup";
 import { cloneDate as P } from "@progress/kendo-date-math";
-import { withIdHOC as te, withPropsContext as ie, withUnstyledHOC as se, withAdaptiveModeContext as oe, createPropsContext as ae, Keys as d, canUseDOM as C, subscribeToKendoPaste as ne, AsyncFocusBlur as re, classNames as S, uDateTimePicker as D } from "@progress/kendo-react-common";
-import { calendarIcon as le } from "@progress/kendo-svg-icons";
-import { DateInput as he } from "../dateinput/DateInput.mjs";
-import { Button as de } from "@progress/kendo-react-buttons";
-import { isInDateRange as M, MIN_DATE as ue, MAX_DATE as pe, MAX_TIME as ce, MIN_TIME as me } from "../utils.mjs";
-import { dateTimePickerCancel as O, messages as p, dateTimePickerSet as x, 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 { createPropsContext as se, Keys as d, canUseDOM as C, subscribeToKendoPaste as oe, AsyncFocusBlur as ae, classNames as S, uDateTimePicker as T, withIdHOC as ne, withPropsContext as re, withUnstyledHOC as le, withAdaptiveModeContext as he } from "@progress/kendo-react-common";
+import { calendarIcon as de } from "@progress/kendo-svg-icons";
+import { DateInputInner as ue } from "../dateinput/DateInput.mjs";
+import { Button as pe } from "@progress/kendo-react-buttons";
+import { isInDateRange as M, MIN_DATE as ce, MAX_DATE as me, MAX_TIME as fe, MIN_TIME as ge } from "../utils.mjs";
+import { dateTimePickerCancel as O, messages as u, dateTimePickerSet as x, selectDateAndTime as k, toggleDateTimeSelector as m } from "../messages/index.mjs";
+import { provideLocalizationService as p, registerForLocalization as ve } from "@progress/kendo-react-intl";
+import { DateTimeSelector as be } from "./DateTimeSelector.mjs";
+import { isInTimeRange as we } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as ye } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as Se } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Te } from "@progress/kendo-react-layout";
 const a = class a extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.handleSmartPasteValue = (t) => {
@@ -50,12 +50,12 @@ const a = class a extends n.Component {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
-      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
+      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: c, unstyled: v } = this.props;
       return /* @__PURE__ */ n.createElement(
-        ge,
+        be,
         {
-          ref: (w) => {
-            this._dateTimeSelector = w;
+          ref: (b) => {
+            this._dateTimeSelector = b;
           },
           cancelButton: r,
           steps: this.props.steps,
@@ -68,7 +68,7 @@ const a = class a extends n.Component {
           max: this.max,
           minTime: s,
           maxTime: o,
-          focusedDate: u,
+          focusedDate: c,
           format: h,
           calendar: l,
           mobileMode: this.mobileMode,
@@ -77,12 +77,12 @@ const a = class a extends n.Component {
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: t = 0 } = this.state, s = m(this).toLanguageString(
+      const { windowWidth: t = 0 } = this.state, s = p(this).toLanguageString(
         O,
-        p[O]
-      ), o = m(this).toLanguageString(
+        u[O]
+      ), o = p(this).toLanguageString(
         x,
-        p[x]
+        u[x]
       ), h = {
         expand: this.show,
         onClose: this.handleBlur,
@@ -102,7 +102,7 @@ const a = class a extends n.Component {
           }
         }
       };
-      return /* @__PURE__ */ n.createElement(be, { ...h }, /* @__PURE__ */ n.createElement(ye, null, this.renderPicker()));
+      return /* @__PURE__ */ n.createElement(Se, { ...h }, /* @__PURE__ */ n.createElement(Te, null, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (t) => {
@@ -193,7 +193,7 @@ const a = class a extends n.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const i = M(this.value, this.min, this.max) && ve(this.value, this.props.minTime || me, this.props.maxTime || ce), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, o = this.props.valid !== void 0 ? this.props.valid : s;
+    const i = M(this.value, this.min, this.max) && we(this.value, this.props.minTime || ge, this.props.maxTime || fe), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, o = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: t,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -227,7 +227,7 @@ const a = class a extends n.Component {
     var t;
     this.observerResize = C && 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 i = this.props.name || this.props.id;
-    this.KendoPasteSubscription = ne(this._element, {
+    this.KendoPasteSubscription = oe(this._element, {
       fieldName: i,
       onValueChange: (s) => {
         this.handleSmartPasteValue(s);
@@ -263,46 +263,50 @@ const a = class a extends n.Component {
       disabled: l,
       tabIndex: r,
       title: g,
-      id: u,
+      id: c,
       format: v,
-      formatPlaceholder: w,
+      formatPlaceholder: b,
       min: E,
-      max: k,
-      className: F,
-      width: A,
-      name: N,
-      validationMessage: R,
-      required: B,
-      validityStyles: z,
-      minTime: _,
-      maxTime: K,
+      max: F,
+      className: A,
+      width: N,
+      name: R,
+      validationMessage: B,
+      required: z,
+      validityStyles: _,
+      minTime: K,
+      maxTime: L,
       ariaLabelledBy: V,
       ariaDescribedBy: q,
-      popup: L = ee,
-      unstyled: b,
-      autoFill: U,
-      twoDigitYearMax: j,
-      enableMouseWheel: H,
-      autoCorrectParts: W,
-      autoSwitchParts: X,
-      autoSwitchKeys: Y,
-      allowCaretMode: Z
-    } = this.props, y = b && b.uDateTimePicker, T = !this.validityStyles || this.validity.valid, G = {
-      id: u,
+      popup: U = ie,
+      unstyled: w,
+      autoFill: j,
+      twoDigitYearMax: H,
+      enableMouseWheel: W,
+      autoCorrectParts: X,
+      autoSwitchParts: Y,
+      autoSwitchKeys: Z,
+      allowCaretMode: G
+    } = this.props, y = w && w.uDateTimePicker, D = !this.validityStyles || this.validity.valid, J = p(this).toLanguageString(
+      k,
+      u[k]
+    ), Q = {
+      id: c,
       ariaLabelledBy: V,
       ariaDescribedBy: q,
+      ariaLabel: J,
       format: v,
-      formatPlaceholder: w,
+      formatPlaceholder: b,
       disabled: l,
       title: g,
-      validityStyles: z,
-      validationMessage: R,
-      required: B,
+      validityStyles: _,
+      validationMessage: B,
+      required: z,
       min: E,
-      max: k,
-      minTime: _,
-      maxTime: K,
-      name: N,
+      max: F,
+      minTime: K,
+      maxTime: L,
+      name: R,
       tabIndex: this.show ? -1 : r,
       valid: this.validity.valid,
       value: this.value,
@@ -311,44 +315,45 @@ const a = class a extends n.Component {
       label: void 0,
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaExpanded: this.show,
-      unstyled: b,
-      autoFill: U,
-      twoDigitYearMax: j,
-      enableMouseWheel: H,
-      autoCorrectParts: W,
-      autoSwitchParts: X,
-      autoSwitchKeys: Y,
-      allowCaretMode: Z
+      unstyled: w,
+      autoFill: j,
+      twoDigitYearMax: H,
+      enableMouseWheel: W,
+      autoCorrectParts: X,
+      autoSwitchParts: Y,
+      autoSwitchKeys: Z,
+      allowCaretMode: G
     }, I = /* @__PURE__ */ n.createElement(
-      re,
+      ae,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: J, onBlur: Q }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: $, onBlur: ee }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "div",
         {
-          ref: ($) => {
-            this._element = $;
+          ref: (te) => {
+            this._element = te;
           },
           className: S(
-            D.wrapper({
+            T.wrapper({
               c: y,
               size: i,
               fillMode: s,
               rounded: t,
               disabled: l,
               required: this.required,
-              invalid: !T
+              invalid: !D
             }),
-            F
+            { "k-focus": this.state.focused },
+            A
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: A },
-          onFocus: this.mobileMode ? this.handleClick : J,
-          onBlur: Q,
+          style: { width: N },
+          onFocus: this.mobileMode ? this.handleClick : $,
+          onBlur: ee,
           onClick: this.mobileMode ? this.handleClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -360,37 +365,37 @@ const a = class a extends n.Component {
             ariaHasPopup: "dialog",
             autoFocus: o,
             inputAttributes: h,
-            ...G
+            ...Q
           }
         ),
         /* @__PURE__ */ n.createElement(
-          de,
+          pe,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: le,
+            svgIcon: de,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
-            title: m(this).toLanguageString(
-              c,
-              p[c]
+            title: p(this).toLanguageString(
+              m,
+              u[m]
             ),
-            className: S(D.inputButton({ c: y })),
+            className: S(T.inputButton({ c: y })),
             fillMode: s,
-            "aria-label": m(this).toLanguageString(
-              c,
-              p[c]
+            "aria-label": p(this).toLanguageString(
+              m,
+              u[m]
             )
           }
         ),
         /* @__PURE__ */ n.createElement(
-          L,
+          U,
           {
             show: this.show,
             animate: this.element !== null,
             anchor: this.element,
-            popupClass: S(D.popup({ c: y })),
+            popupClass: S(T.popup({ c: y })),
             id: this._popupId,
             anchorAlign: {
               horizontal: "left",
@@ -406,12 +411,12 @@ const a = class a extends n.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ n.createElement(
-      we,
+      ye,
       {
         dateInput: this._dateInput,
         label: this.props.label,
-        editorId: u,
-        editorValid: T,
+        editorId: c,
+        editorValid: D,
         editorDisabled: this.props.disabled,
         children: I,
         style: { width: this.props.width }
@@ -487,6 +492,7 @@ a.displayName = "DateTimePicker", a.propTypes = {
     appendTo: e.any,
     popupClass: e.string
   }),
+  dateInput: e.elementType,
   show: e.bool,
   tabIndex: e.number,
   title: e.string,
@@ -509,32 +515,32 @@ a.displayName = "DateTimePicker", a.propTypes = {
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: pe,
-  min: ue,
+  max: me,
+  min: ce,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: he,
+  dateInput: ue,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
   autoFocus: !1
 };
 let f = a;
-const Se = ae(), De = te(
-  ie(
-    Se,
-    se(
-      oe(f)
+const De = se(), Ie = ne(
+  re(
+    De,
+    le(
+      he(f)
     )
   )
 );
-De.displayName = "KendoReactDateTimePicker";
-fe(f);
+Ie.displayName = "KendoReactDateTimePicker";
+ve(f);
 export {
-  De as DateTimePicker,
-  Se as DateTimePickerPropsContext,
+  Ie as DateTimePicker,
+  De as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };