@progress/kendo-react-dateinputs 11.0.0-develop.2 → 11.0.0-develop.20

package/datetimepicker/DateTimeSelector.mjs

@@ -9,8 +9,8 @@ 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 { Calendar as A } from "../calendar/components/Calendar.mjs";
-import { TimePart as z } from "../timepicker/TimePart.mjs";
+import { Calendar as z } from "../calendar/components/Calendar.mjs";
+import { TimePart as A } from "../timepicker/TimePart.mjs";
 import { MIDNIGHT_DATE as v, MIN_TIME as F, MAX_TIME as L, getToday as V, 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";
@@ -29,28 +29,28 @@ 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, n = this.localizationService.toLanguageString(D, f[D]), r = this.localizationService.toLanguageString(_, f[_]);
+      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: (o) => {
-            this._cancelButton = o;
+          ref: (n) => {
+            this._cancelButton = n;
           },
           className: l(B.cancel({ c: s })),
           onClick: this.handleReject,
           onKeyDown: this.handleCancelKeyDown,
-          title: n,
-          "aria-label": n
+          title: o,
+          "aria-label": o
         },
-        n
+        o
       ), /* @__PURE__ */ i.createElement(
         g,
         {
           type: "button",
           themeColor: "primary",
-          ref: (o) => {
-            this._acceptButton = o;
+          ref: (n) => {
+            this._acceptButton = n;
           },
           className: l(B.accept({ c: s })),
           disabled: !this.hasDateValue,
@@ -120,9 +120,9 @@ const y = class y extends i.Component {
       const { keyCode: e } = t;
       e === h.tab && this._dateButtonRef && this._dateButtonRef.element && (t.preventDefault(), this._dateButtonRef.element.focus());
     }, this.handleDateKeyDown = (t) => {
-      var n, r, o, d;
+      var o, r, n, d;
       const { keyCode: e, shiftKey: s } = t;
-      s && e === h.tab && (t.stopPropagation(), this.hasDateValue ? (d = (o = this._acceptButton) == null ? void 0 : o.element) == null || d.focus() : (r = (n = this._cancelButton) == null ? void 0 : n.element) == null || r.focus()), e === h.enter && (t.stopPropagation(), this.move("left"));
+      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"));
     }, this.handleTimeKeyDown = (t) => {
       const { keyCode: e } = t;
       e === h.enter && (t.stopPropagation(), this.move("right"));
@@ -148,13 +148,13 @@ const y = class y extends i.Component {
   }
   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((n) => ({
-      dateValue: a.value && this.props.value && k(a.value, this.props.value) ? n.dateValue : this.props.value,
+    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
     })), this.shouldFocusPart = !1;
   }
   render() {
-    const { disabled: a, min: t, max: e, weekNumber: s, focusedDate: n, format: r, mobileMode: o, footerActions: d, unstyled: p } = this.props, m = p && p.uDateTimePicker, S = l(
+    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(
       u.wrap({
         c: m,
         date: this.state.tab === "date",
@@ -165,13 +165,13 @@ const y = class y extends i.Component {
       min: t,
       max: e,
       weekNumber: s,
-      focusedDate: n,
+      focusedDate: o,
       disabled: a || this.state.tab !== "date",
       value: this.state.dateValue,
       onChange: this.handleCalendarValueChange,
       navigation: !1,
       tabIndex: a || this.state.tab !== "date" ? -1 : void 0,
-      mobileMode: o
+      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,
@@ -182,6 +182,7 @@ const y = class y extends i.Component {
         type: "button",
         selected: this.state.tab === "date",
         togglable: !0,
+        size: n ? "large" : void 0,
         onClick: this.handleDateClick,
         onKeyDown: this.handleDateKeyDown
       },
@@ -192,6 +193,7 @@ const y = class y extends i.Component {
         type: "button",
         selected: this.state.tab === "time",
         togglable: !0,
+        size: n ? "large" : void 0,
         onClick: this.handleTimeClick,
         onKeyDown: this.handleTimeKeyDown
       },
@@ -205,7 +207,7 @@ const y = class y extends i.Component {
         }
       },
       this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...C }) : /* @__PURE__ */ i.createElement(
-        A,
+        z,
         {
           key: this.state.tab,
           ref: (c) => {
@@ -214,8 +216,8 @@ const y = class y extends i.Component {
           ...C
         }
       )
-    ), /* @__PURE__ */ i.createElement("div", { className: l(u.timeWrap({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: l(u.timeSelector({ c: m, mobileMode: o })) }, /* @__PURE__ */ i.createElement(
-      z,
+    ), /* @__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(
+      A,
       {
         key: 1,
         onNowClick: this.handleNowClick,
@@ -230,7 +232,7 @@ const y = class y extends i.Component {
         format: r,
         onChange: this.handleTimeListContainerChange,
         onMount: this.handleTimePartMount,
-        mobileMode: o,
+        mobileMode: n,
         unstyled: p
       }
     )))), d && this.dateTimeFooter());