@progress/kendo-react-dateinputs 14.4.0-develop.1 → 14.4.0-develop.11

package/datetimepicker/DateTimeSelector.mjs

@@ -7,17 +7,17 @@
  */
 import * as i from "react";
 import { provideLocalizationService as R, registerForLocalization as M } from "@progress/kendo-react-intl";
-import { dateTimePickerCancel as D, messages as f, dateTimePickerSet as _, date as T, time as E } from "../messages/index.mjs";
-import { Button as g, ButtonGroup as x } from "@progress/kendo-react-buttons";
+import { dateTimePickerCancel as C, messages as p, dateTimePickerSet as D, date as _, time as T } from "../messages/index.mjs";
+import { Button as f, ButtonGroup as x } from "@progress/kendo-react-buttons";
 import { Calendar as z } from "../calendar/components/Calendar.mjs";
 import { TimePart as A } from "../timepicker/TimePart.mjs";
-import { MIDNIGHT_DATE as v, MAX_TIME as F, MIN_TIME as L, getToday as V, setTime as P } from "../utils.mjs";
+import { MIDNIGHT_DATE as g, MAX_TIME as F, MIN_TIME as L, getToday as E, setTime as P } from "../utils.mjs";
 import { isEqualDate as k } from "@progress/kendo-date-math";
-import { classNames as l, uDateTimePicker as u, uTime as B, Keys as h, getActiveElement as I } from "@progress/kendo-react-common";
-import { getNow as w } from "../timepicker/utils.mjs";
-const y = class y extends i.Component {
-  constructor(a) {
-    super(a), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._dateButtonRef = null, this._calendarWrap = null, this.shouldFocusPart = !1, this.focus = (t) => {
+import { classNames as l, uDateTimePicker as u, uTime as V, Keys as h, getActiveElement as I } from "@progress/kendo-react-common";
+import { getNow as B } from "../timepicker/utils.mjs";
+const b = class b extends i.Component {
+  constructor(s) {
+    super(s), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._dateButtonRef = null, this._calendarWrap = null, this.shouldFocusPart = !1, this.focus = (t) => {
       Promise.resolve().then(() => {
         this.state.tab === "time" && this._timePart && this._timePart.focus(t);
         const e = this.calendarElement();
@@ -29,30 +29,16 @@ const y = class y extends i.Component {
       const e = t === "left" ? "date" : "time";
       this.shouldFocusPart = !0, this.setState({ tab: e });
     }, this.dateTimeFooter = () => {
-      const { cancelButton: t, unstyled: e } = this.props, s = e && e.uDateTimePicker, o = this.localizationService.toLanguageString(D, f[D]), r = this.localizationService.toLanguageString(_, f[_]);
-      return /* @__PURE__ */ i.createElement("div", { className: l(u.timeFooter({ c: s })) }, t && /* @__PURE__ */ i.createElement(
-        g,
-        {
-          type: "button",
-          ref: (n) => {
-            this._cancelButton = n;
-          },
-          className: l(B.cancel({ c: s })),
-          onClick: this.handleReject,
-          onKeyDown: this.handleCancelKeyDown,
-          title: o,
-          "aria-label": o
-        },
-        o
-      ), /* @__PURE__ */ i.createElement(
-        g,
+      const { cancelButton: t, unstyled: e } = this.props, a = e && e.uDateTimePicker, o = this.localizationService.toLanguageString(C, p[C]), r = this.localizationService.toLanguageString(D, p[D]);
+      return /* @__PURE__ */ i.createElement("div", { className: l(u.timeFooter({ c: a })) }, /* @__PURE__ */ i.createElement(
+        f,
         {
           type: "button",
           themeColor: "primary",
           ref: (n) => {
             this._acceptButton = n;
           },
-          className: l(B.accept({ c: s })),
+          className: l(V.accept({ c: a })),
           disabled: !this.hasDateValue,
           onClick: this.handleAccept,
           onKeyDown: this.handleSetKeyDown,
@@ -60,31 +46,45 @@ const y = class y extends i.Component {
           "aria-label": r
         },
         r
+      ), t && /* @__PURE__ */ i.createElement(
+        f,
+        {
+          type: "button",
+          ref: (n) => {
+            this._cancelButton = n;
+          },
+          className: l(V.cancel({ c: a })),
+          onClick: this.handleReject,
+          onKeyDown: this.handleCancelKeyDown,
+          title: o,
+          "aria-label": o
+        },
+        o
       ));
     }, this.handleReject = (t) => {
-      this.setState({ dateValue: this.props.value, timeValue: this.props.value || v });
-      const e = this.mergeDate(this.props.value, this.props.value || v);
+      this.setState({ dateValue: this.props.value, timeValue: this.props.value || g });
+      const e = this.mergeDate(this.props.value, this.props.value || g);
       if (this.props.onReject) {
-        const s = {
+        const a = {
           nativeEvent: t.nativeEvent,
           syntheticEvent: t,
           target: this,
           value: e
         };
-        this.props.onReject.call(void 0, s);
+        this.props.onReject.call(void 0, a);
       }
     }, this.handleAccept = (t, e) => {
       if (!this.state.dateValue || !this.state.timeValue || !this.hasDateValue)
         return;
-      const s = this.mergeDate(this.state.dateValue, e || this.state.timeValue);
+      const a = this.mergeDate(this.state.dateValue, e || this.state.timeValue);
       this.props.onChange.call(void 0, {
         syntheticEvent: t,
         nativeEvent: t.nativeEvent,
-        value: s,
+        value: a,
         target: this
       });
     }, this.handleNowClick = (t) => {
-      this.setState({ timeValue: w() }), this.handleAccept(t, w());
+      this.setState({ timeValue: B() }), this.handleAccept(t, B());
     }, this.handleCalendarValueChange = (t) => {
       t.syntheticEvent.stopPropagation(), this.setState({ dateValue: t.value, tab: "time" }), this.shouldFocusPart = !0;
     }, this.handleTimeListContainerChange = (t) => {
@@ -94,19 +94,19 @@ const y = class y extends i.Component {
     }, this.handleTimeClick = (t) => {
       t.stopPropagation(), this.move("right");
     }, this.handleKeyDown = (t) => {
-      const { keyCode: e, altKey: s } = t;
+      const { keyCode: e, altKey: a } = t;
       if (!this.props.disabled)
         switch (e) {
           case h.enter:
             !this.hasActiveButton() && this.hasDateValue && this.handleAccept(t);
             return;
           case h.left:
-            if (!s)
+            if (!a)
               return;
             this.move("left");
             return;
           case h.right:
-            if (!s)
+            if (!a)
               return;
             this.move("right");
             return;
@@ -114,15 +114,17 @@ const y = class y extends i.Component {
             return;
         }
     }, this.handleCancelKeyDown = (t) => {
+      var a;
       const { keyCode: e } = t;
-      e === h.tab && this._dateButtonRef && this._dateButtonRef.element && !this.hasDateValue && (t.preventDefault(), this._dateButtonRef.element.focus());
+      e === h.tab && ((a = this._dateButtonRef) != null && a.element) && (t.preventDefault(), this._dateButtonRef.element.focus());
     }, this.handleSetKeyDown = (t) => {
+      var a;
       const { keyCode: e } = t;
-      e === h.tab && this._dateButtonRef && this._dateButtonRef.element && (t.preventDefault(), this._dateButtonRef.element.focus());
+      e === h.tab && !this.props.cancelButton && ((a = this._dateButtonRef) != null && a.element) && (t.preventDefault(), this._dateButtonRef.element.focus());
     }, this.handleDateKeyDown = (t) => {
-      var o, r, n, d;
-      const { keyCode: e, shiftKey: s } = t;
-      s && e === h.tab && (t.stopPropagation(), this.hasDateValue ? (d = (n = this._acceptButton) == null ? void 0 : n.element) == null || d.focus() : (r = (o = this._cancelButton) == null ? void 0 : o.element) == null || r.focus()), e === h.enter && (t.stopPropagation(), this.move("left"));
+      var o, r, n;
+      const { keyCode: e, shiftKey: a } = t;
+      a && e === h.tab && (t.stopPropagation(), (o = this._cancelButton) != null && o.element ? this._cancelButton.element.focus() : (n = (r = this._acceptButton) == null ? void 0 : r.element) == null || n.focus()), e === h.enter && (t.stopPropagation(), this.move("left"));
     }, this.handleTimeKeyDown = (t) => {
       const { keyCode: e } = t;
       e === h.enter && (t.stopPropagation(), this.move("right"));
@@ -131,7 +133,7 @@ const y = class y extends i.Component {
     }, this.state = {
       tab: "date",
       dateValue: this.props.value,
-      timeValue: this.props.value || v
+      timeValue: this.props.value || g
     };
   }
   get calendar() {
@@ -146,35 +148,35 @@ const y = class y extends i.Component {
   get localizationService() {
     return R(this);
   }
-  componentDidUpdate(a, t) {
-    var e, s;
-    this.shouldFocusPart && this.focus({ preventScroll: !0 }), (((e = a.value) == null ? void 0 : e.getTime()) !== ((s = this.props.value) == null ? void 0 : s.getTime()) || this.state.tab !== t.tab && this.props.value) && this.setState((o) => ({
-      dateValue: a.value && this.props.value && k(a.value, this.props.value) ? o.dateValue : this.props.value,
-      timeValue: this.props.value || v
+  componentDidUpdate(s, t) {
+    var e, a;
+    this.shouldFocusPart && this.focus({ preventScroll: !0 }), (((e = s.value) == null ? void 0 : e.getTime()) !== ((a = this.props.value) == null ? void 0 : a.getTime()) || this.state.tab !== t.tab && this.props.value) && this.setState((o) => ({
+      dateValue: s.value && this.props.value && k(s.value, this.props.value) ? o.dateValue : this.props.value,
+      timeValue: this.props.value || g
     })), this.shouldFocusPart = !1;
   }
   render() {
-    const { disabled: a, min: t, max: e, weekNumber: s, focusedDate: o, format: r, mobileMode: n, footerActions: d, unstyled: p } = this.props, m = p && p.uDateTimePicker, S = l(
+    const { disabled: s, min: t, max: e, weekNumber: a, focusedDate: o, format: r, mobileMode: n, footerActions: w, unstyled: d } = this.props, m = d && d.uDateTimePicker, S = l(
       u.wrap({
         c: m,
         date: this.state.tab === "date",
         time: this.state.tab === "time",
-        disabled: a
+        disabled: s
       })
-    ), K = this.localizationService.toLanguageString(T, f[T]), N = this.localizationService.toLanguageString(E, f[E]), C = {
+    ), K = this.localizationService.toLanguageString(_, p[_]), N = this.localizationService.toLanguageString(T, p[T]), y = {
       min: t,
       max: e,
-      weekNumber: s,
+      weekNumber: a,
       focusedDate: o,
-      disabled: a || this.state.tab !== "date",
+      disabled: s || this.state.tab !== "date",
       value: this.state.dateValue,
       onChange: this.handleCalendarValueChange,
       navigation: !1,
-      tabIndex: a || this.state.tab !== "date" ? -1 : void 0,
+      tabIndex: s || this.state.tab !== "date" ? -1 : void 0,
       mobileMode: n
     };
-    return /* @__PURE__ */ i.createElement("div", { onKeyDown: this.handleKeyDown, className: S, tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: l(u.buttonGroup({ c: m })) }, /* @__PURE__ */ i.createElement(x, { width: "100%", unstyled: p }, /* @__PURE__ */ i.createElement(
-      g,
+    return /* @__PURE__ */ i.createElement("div", { onKeyDown: this.handleKeyDown, className: S, tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: l(u.buttonGroup({ c: m })) }, /* @__PURE__ */ i.createElement(x, { width: "100%", unstyled: d }, /* @__PURE__ */ i.createElement(
+      f,
       {
         ref: (c) => {
           this._dateButtonRef = c;
@@ -188,7 +190,7 @@ const y = class y extends i.Component {
       },
       K
     ), /* @__PURE__ */ i.createElement(
-      g,
+      f,
       {
         type: "button",
         selected: this.state.tab === "time",
@@ -206,14 +208,14 @@ const y = class y extends i.Component {
           this._calendarWrap = c;
         }
       },
-      this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...C }) : /* @__PURE__ */ i.createElement(
+      this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...y }) : /* @__PURE__ */ i.createElement(
         z,
         {
           key: this.state.tab,
           ref: (c) => {
             this._calendar = c;
           },
-          ...C
+          ...y
         }
       )
     ), /* @__PURE__ */ i.createElement("div", { className: l(u.timeWrap({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: l(u.timeSelector({ c: m, mobileMode: n })) }, /* @__PURE__ */ i.createElement(
@@ -221,7 +223,7 @@ const y = class y extends i.Component {
       {
         key: 1,
         onNowClick: this.handleNowClick,
-        disabled: a || this.state.tab !== "time",
+        disabled: s || this.state.tab !== "time",
         ref: (c) => {
           this._timePart = c;
         },
@@ -233,9 +235,9 @@ const y = class y extends i.Component {
         onChange: this.handleTimeListContainerChange,
         onMount: this.handleTimePartMount,
         mobileMode: n,
-        unstyled: p
+        unstyled: d
       }
-    )))), d && this.dateTimeFooter());
+    )))), w && this.dateTimeFooter());
   }
   get minTime() {
     return this.props.minTime !== void 0 ? this.props.minTime : this.normalizeRange(this.props.min, this.state.dateValue);
@@ -243,27 +245,27 @@ const y = class y extends i.Component {
   get maxTime() {
     return this.props.maxTime !== void 0 ? this.props.maxTime : this.normalizeRange(this.props.max, this.state.dateValue);
   }
-  normalizeRange(a, t) {
-    return k(a, t || V()) ? a : null;
+  normalizeRange(s, t) {
+    return k(s, t || E()) ? s : null;
   }
   hasActiveButton() {
     if (!this._acceptButton)
       return !1;
-    const a = I(document);
-    return this._acceptButton && a === this._acceptButton.element || this._cancelButton && a === this._cancelButton.element;
+    const s = I(document);
+    return this._acceptButton && s === this._acceptButton.element || this._cancelButton && s === this._cancelButton.element;
   }
-  mergeTime(a, t) {
-    return a && t ? P(t, a) : t;
+  mergeTime(s, t) {
+    return s && t ? P(t, s) : t;
   }
-  mergeDate(a, t) {
-    return a ? P(a || V(), t) : t;
+  mergeDate(s, t) {
+    return s ? P(s || E(), t) : t;
   }
 };
-y.defaultProps = {
+b.defaultProps = {
   footerActions: !0
 };
-let b = y;
-M(b);
+let v = b;
+M(v);
 export {
-  b as DateTimeSelector
+  v as DateTimeSelector
 };