@progress/kendo-react-dateinputs 14.5.0-develop.8 → 15.0.0-develop.1

package/datetimepicker/DateTimeSelector.mjs

@@ -5,19 +5,19 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as i from "react";
-import { provideLocalizationService as R, registerForLocalization as M } from "@progress/kendo-react-intl";
-import { dateTimePickerCancel as C, messages as p, dateTimePickerSet as _, date as D, time as T } from "../messages/index.mjs";
-import { Button as f, ButtonGroup as x } from "@progress/kendo-react-buttons";
+import * as n from "react";
+import { provideLocalizationService as x, registerForLocalization as M } from "@progress/kendo-react-intl";
+import { dateTimePickerCancel as y, messages as d, dateTimePickerSet as C, date as _, time as D } from "../messages/index.mjs";
+import { Button as T, SegmentedControl as R } 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 g, MAX_TIME as F, MIN_TIME as L, getToday as E, setTime as P } from "../utils.mjs";
+import { MIDNIGHT_DATE as p, MAX_TIME as F, MIN_TIME as L, getToday as E, setTime as P } from "../utils.mjs";
 import { isEqualDate as V } from "@progress/kendo-date-math";
-import { classNames as l, uDateTimePicker as m, uTime as k, 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 {
+import { classNames as r, uDateTimePicker as u, uTime as S, Keys as h, getActiveElement as I } from "@progress/kendo-react-common";
+import { getNow as k } from "../timepicker/utils.mjs";
+const v = class v extends n.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) => {
+    super(s), this._calendar = null, this._timePart = null, this._cancelButton = null, this._acceptButton = null, this._buttonGroupRef = 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,41 +29,41 @@ const b = class b 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, a = e && e.uDateTimePicker, n = this.localizationService.toLanguageString(C, p[C]), r = this.localizationService.toLanguageString(_, p[_]);
-      return /* @__PURE__ */ i.createElement("div", { className: l(m.timeFooter({ c: a })) }, /* @__PURE__ */ i.createElement(
-        f,
+      const { cancelButton: t, unstyled: e } = this.props, a = e && e.uDateTimePicker, i = this.localizationService.toLanguageString(y, d[y]), l = this.localizationService.toLanguageString(C, d[C]);
+      return /* @__PURE__ */ n.createElement("div", { className: r(u.timeFooter({ c: a })) }, /* @__PURE__ */ n.createElement(
+        T,
         {
           type: "button",
           themeColor: "primary",
           ref: (o) => {
             this._acceptButton = o;
           },
-          className: l(k.accept({ c: a })),
+          className: r(S.accept({ c: a })),
           disabled: !this.hasDateValue,
           onClick: this.handleAccept,
           onKeyDown: this.handleSetKeyDown,
-          title: r,
-          "aria-label": r
+          title: l,
+          "aria-label": l
         },
-        r
-      ), t && /* @__PURE__ */ i.createElement(
-        f,
+        l
+      ), t && /* @__PURE__ */ n.createElement(
+        T,
         {
           type: "button",
           ref: (o) => {
             this._cancelButton = o;
           },
-          className: l(k.cancel({ c: a })),
+          className: r(S.cancel({ c: a })),
           onClick: this.handleReject,
           onKeyDown: this.handleCancelKeyDown,
-          title: n,
-          "aria-label": n
+          title: i,
+          "aria-label": i
         },
-        n
+        i
       ));
     }, this.handleReject = (t) => {
-      this.setState({ dateValue: this.props.value, timeValue: this.props.value || g });
-      const e = this.mergeDate(this.props.value, this.props.value || g);
+      this.setState({ dateValue: this.props.value, timeValue: this.props.value || p });
+      const e = this.mergeDate(this.props.value, this.props.value || p);
       if (this.props.onReject) {
         const a = {
           nativeEvent: t.nativeEvent,
@@ -76,23 +76,22 @@ const b = class b extends i.Component {
     }, this.handleAccept = (t, e) => {
       if (!this.state.dateValue || !this.state.timeValue || !this.hasDateValue)
         return;
-      const a = e || (this._timePart ? this._timePart.value : this.state.timeValue), n = this.mergeDate(this.state.dateValue, a);
+      const a = e || (this._timePart ? this._timePart.value : this.state.timeValue), i = this.mergeDate(this.state.dateValue, a);
       this.props.onChange.call(void 0, {
         syntheticEvent: t,
         nativeEvent: t.nativeEvent,
-        value: n,
+        value: i,
         target: this
       });
     }, this.handleNowClick = (t) => {
-      this.setState({ timeValue: B() }), this.handleAccept(t, B());
+      this.setState({ timeValue: k() }), this.handleAccept(t, k());
     }, this.handleCalendarValueChange = (t) => {
       t.syntheticEvent.stopPropagation(), this.setState({ dateValue: t.value, tab: "time" }), this.shouldFocusPart = !0;
     }, this.handleTimeListContainerChange = (t) => {
       this.setState({ timeValue: t });
-    }, this.handleDateClick = (t) => {
-      t.stopPropagation(), this.move("left");
-    }, this.handleTimeClick = (t) => {
-      t.stopPropagation(), this.move("right");
+    }, this.handleTabChange = (t) => {
+      const e = t === "date" ? "left" : "right";
+      this.move(e);
     }, this.handleKeyDown = (t) => {
       const { keyCode: e, altKey: a } = t;
       if (!this.props.disabled)
@@ -114,26 +113,26 @@ const b = class b extends i.Component {
             return;
         }
     }, this.handleCancelKeyDown = (t) => {
-      var a;
-      const { keyCode: e } = t;
-      e === h.tab && ((a = this._dateButtonRef) != null && a.element) && (t.preventDefault(), this._dateButtonRef.element.focus());
+      var i;
+      const { keyCode: e } = t, a = (i = this._buttonGroupRef) == null ? void 0 : i.querySelector(".k-segmented-control-button");
+      e === h.tab && a && (t.preventDefault(), a.focus());
     }, this.handleSetKeyDown = (t) => {
-      var a;
-      const { keyCode: e } = t;
-      e === h.tab && !this.props.cancelButton && ((a = this._dateButtonRef) != null && a.element) && (t.preventDefault(), this._dateButtonRef.element.focus());
+      var i;
+      const { keyCode: e } = t, a = (i = this._buttonGroupRef) == null ? void 0 : i.querySelector(".k-segmented-control-button");
+      e === h.tab && !this.props.cancelButton && a && (t.preventDefault(), a.focus());
     }, this.handleDateKeyDown = (t) => {
-      var n, r, o;
+      var i, l, o;
       const { keyCode: e, shiftKey: a } = t;
-      a && e === h.tab && (t.stopPropagation(), (n = this._cancelButton) != null && n.element ? this._cancelButton.element.focus() : (o = (r = this._acceptButton) == null ? void 0 : r.element) == null || o.focus()), e === h.enter && (t.stopPropagation(), this.move("left"));
+      a && e === h.tab && (t.stopPropagation(), (i = this._cancelButton) != null && i.element ? this._cancelButton.element.focus() : (o = (l = this._acceptButton) == null ? void 0 : l.element) == null || o.focus()), e === h.enter && t.stopPropagation();
     }, this.handleTimeKeyDown = (t) => {
       const { keyCode: e } = t;
-      e === h.enter && (t.stopPropagation(), this.move("right"));
+      e === h.enter && t.stopPropagation();
     }, this.handleTimePartMount = (t) => {
       this.setState({ timeValue: t });
     }, this.state = {
       tab: "date",
       dateValue: this.props.value,
-      timeValue: this.props.value || g
+      timeValue: this.props.value || p
     };
   }
   get calendar() {
@@ -146,28 +145,28 @@ const b = class b extends i.Component {
     return this.state.dateValue !== null;
   }
   get localizationService() {
-    return R(this);
+    return x(this);
   }
   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((n) => ({
-      dateValue: s.value && this.props.value && V(s.value, this.props.value) ? n.dateValue : this.props.value,
-      timeValue: this.props.value || g
+    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((i) => ({
+      dateValue: s.value && this.props.value && V(s.value, this.props.value) ? i.dateValue : this.props.value,
+      timeValue: this.props.value || p
     })), this.shouldFocusPart = !1;
   }
   render() {
-    const { disabled: s, min: t, max: e, weekNumber: a, focusedDate: n, format: r, mobileMode: o, footerActions: w, unstyled: d } = this.props, u = d && d.uDateTimePicker, S = l(
-      m.wrap({
-        c: u,
+    const { disabled: s, min: t, max: e, weekNumber: a, focusedDate: i, format: l, mobileMode: o, footerActions: w, unstyled: f } = this.props, m = f && f.uDateTimePicker, B = r(
+      u.wrap({
+        c: m,
         date: this.state.tab === "date",
         time: this.state.tab === "time",
         disabled: s
       })
-    ), K = this.localizationService.toLanguageString(D, p[D]), N = this.localizationService.toLanguageString(T, p[T]), y = {
+    ), K = this.localizationService.toLanguageString(_, d[_]), N = this.localizationService.toLanguageString(D, d[D]), b = {
       min: t,
       max: e,
       weekNumber: a,
-      focusedDate: n,
+      focusedDate: i,
       disabled: s || this.state.tab !== "date",
       value: this.state.dateValue,
       onChange: this.handleCalendarValueChange,
@@ -175,50 +174,54 @@ const b = class b extends i.Component {
       tabIndex: s || this.state.tab !== "date" ? -1 : void 0,
       mobileMode: o
     };
-    return /* @__PURE__ */ i.createElement("div", { onKeyDown: this.handleKeyDown, className: S, tabIndex: -1 }, /* @__PURE__ */ i.createElement("div", { className: l(m.buttonGroup({ c: u })) }, /* @__PURE__ */ i.createElement(x, { width: "100%", unstyled: d }, /* @__PURE__ */ i.createElement(
-      f,
+    return /* @__PURE__ */ n.createElement("div", { onKeyDown: this.handleKeyDown, className: B, tabIndex: -1 }, /* @__PURE__ */ n.createElement(
+      "div",
       {
+        className: r(u.buttonGroup({ c: m })),
         ref: (c) => {
-          this._dateButtonRef = c;
-        },
-        type: "button",
-        selected: this.state.tab === "date",
-        togglable: !0,
-        size: o ? "large" : void 0,
-        onClick: this.handleDateClick,
-        onKeyDown: this.handleDateKeyDown
-      },
-      K
-    ), /* @__PURE__ */ i.createElement(
-      f,
-      {
-        type: "button",
-        selected: this.state.tab === "time",
-        togglable: !0,
-        size: o ? "large" : void 0,
-        onClick: this.handleTimeClick,
-        onKeyDown: this.handleTimeKeyDown
+          this._buttonGroupRef = c;
+        }
       },
-      N
-    ))), /* @__PURE__ */ i.createElement("div", { className: l(m.selector({ c: u })) }, /* @__PURE__ */ i.createElement(
+      /* @__PURE__ */ n.createElement(
+        R,
+        {
+          layoutMode: "stretch",
+          size: o ? "large" : void 0,
+          value: this.state.tab,
+          onChange: this.handleTabChange,
+          items: [
+            {
+              value: "date",
+              text: K,
+              onKeyDown: this.handleDateKeyDown
+            },
+            {
+              value: "time",
+              text: N,
+              onKeyDown: this.handleTimeKeyDown
+            }
+          ]
+        }
+      )
+    ), /* @__PURE__ */ n.createElement("div", { className: r(u.selector({ c: m })) }, /* @__PURE__ */ n.createElement(
       "div",
       {
-        className: l(m.calendarWrap({ c: u })),
+        className: r(u.calendarWrap({ c: m })),
         ref: (c) => {
           this._calendarWrap = c;
         }
       },
-      this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...y }) : /* @__PURE__ */ i.createElement(
+      this.props.calendar ? /* @__PURE__ */ n.createElement(this.props.calendar, { key: this.state.tab, ...b }) : /* @__PURE__ */ n.createElement(
         z,
         {
           key: this.state.tab,
           ref: (c) => {
             this._calendar = c;
           },
-          ...y
+          ...b
         }
       )
-    ), /* @__PURE__ */ i.createElement("div", { className: l(m.timeWrap({ c: u })) }, /* @__PURE__ */ i.createElement("div", { className: l(m.timeSelector({ c: u, mobileMode: o })) }, /* @__PURE__ */ i.createElement(
+    ), /* @__PURE__ */ n.createElement("div", { className: r(u.timeWrap({ c: m })) }, /* @__PURE__ */ n.createElement("div", { className: r(u.timeSelector({ c: m, mobileMode: o })) }, /* @__PURE__ */ n.createElement(
       A,
       {
         key: 1,
@@ -231,11 +234,11 @@ const b = class b extends i.Component {
         max: this.maxTime || F,
         steps: this.props.steps,
         value: this.state.timeValue,
-        format: r,
+        format: l,
         onChange: this.handleTimeListContainerChange,
         onMount: this.handleTimePartMount,
         mobileMode: o,
-        unstyled: d
+        unstyled: f
       }
     )))), w && this.dateTimeFooter());
   }
@@ -261,11 +264,11 @@ const b = class b extends i.Component {
     return s ? P(s || E(), t) : t;
   }
 };
-b.defaultProps = {
+v.defaultProps = {
   footerActions: !0
 };
-let v = b;
-M(v);
+let g = v;
+M(g);
 export {
-  v as DateTimeSelector
+  g as DateTimeSelector
 };