@progress/kendo-react-dateinputs 8.3.0-develop.6 → 8.3.0-develop.8

package/datetimepicker/DateTimeSelector.mjs

@@ -7,16 +7,16 @@
  */
 "use client";
 import * as i from "react";
-import { provideLocalizationService as B, registerForLocalization as P } from "@progress/kendo-react-intl";
-import { dateTimePickerCancel as v, messages as m, dateTimePickerSet as b, date as k, time as y } from "../messages/index.mjs";
-import { Button as u, ButtonGroup as S } from "@progress/kendo-react-buttons";
-import { Calendar as K } from "../calendar/components/Calendar.mjs";
-import { TimePart as N } from "../timepicker/TimePart.mjs";
-import { MIDNIGHT_DATE as d, MIN_TIME as R, MAX_TIME as M, getToday as _, setTime as C } from "../utils.mjs";
-import { isEqualDate as D } from "@progress/kendo-date-math";
-import { Keys as o, classNames as x, getActiveElement as A } from "@progress/kendo-react-common";
-import { getNow as E } from "../timepicker/utils.mjs";
-const f = class f extends i.Component {
+import { provideLocalizationService as R, registerForLocalization as M } from "@progress/kendo-react-intl";
+import { dateTimePickerCancel as D, messages as p, dateTimePickerSet as _, date as T, time as E } from "../messages/index.mjs";
+import { Button as f, 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 { MIDNIGHT_DATE as g, 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 o, 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) => {
       Promise.resolve().then(() => {
@@ -24,47 +24,47 @@ const f = class f extends i.Component {
         const e = this.calendarElement();
         this.state.tab === "date" && e && e.focus(t);
       });
-    }, this.calendarElement = () => this._calendar && this._calendar.element || this._calendarWrap && this._calendarWrap.querySelector(".k-widget.k-calendar"), this.move = (t) => {
+    }, this.calendarElement = () => this._calendar && this._calendar.element || this._calendarWrap && this._calendarWrap.querySelector(".k-calendar"), this.move = (t) => {
       if (t === "right" && this.state.tab === "time" || t === "left" && this.state.tab === "date")
         return;
       const e = t === "left" ? "date" : "time";
       this.shouldFocusPart = !0, this.setState({ tab: e });
     }, this.dateTimeFooter = () => {
-      const { cancelButton: t } = this.props, e = this.localizationService.toLanguageString(v, m[v]), s = this.localizationService.toLanguageString(b, m[b]);
-      return /* @__PURE__ */ i.createElement("div", { className: "k-datetime-footer k-actions k-actions-stretched" }, t && /* @__PURE__ */ i.createElement(
-        u,
+      const { cancelButton: t, unstyled: e } = this.props, s = e && e.uDateTimePicker, l = this.localizationService.toLanguageString(D, p[D]), r = this.localizationService.toLanguageString(_, p[_]);
+      return /* @__PURE__ */ i.createElement("div", { className: o(u.timeFooter({ c: s })) }, t && /* @__PURE__ */ i.createElement(
+        f,
         {
           type: "button",
           ref: (n) => {
             this._cancelButton = n;
           },
-          className: "k-time-cancel",
+          className: o(B.cancel({ c: s })),
           onClick: this.handleReject,
           onKeyDown: this.handleCancelKeyDown,
-          title: e,
-          "aria-label": e
+          title: l,
+          "aria-label": l
         },
-        e
+        l
       ), /* @__PURE__ */ i.createElement(
-        u,
+        f,
         {
           type: "button",
           themeColor: "primary",
           ref: (n) => {
             this._acceptButton = n;
           },
-          className: "k-time-accept",
+          className: o(B.accept({ c: s })),
           disabled: !this.hasDateValue,
           onClick: this.handleAccept,
           onKeyDown: this.handleSetKeyDown,
-          title: s,
-          "aria-label": s
+          title: r,
+          "aria-label": r
         },
-        s
+        r
       ));
     }, this.handleReject = (t) => {
-      this.setState({ dateValue: this.props.value, timeValue: this.props.value || d });
-      const e = this.mergeDate(this.props.value, this.props.value || d);
+      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 = {
           nativeEvent: t.nativeEvent,
@@ -85,7 +85,7 @@ const f = class f extends i.Component {
         target: this
       });
     }, this.handleNowClick = (t) => {
-      this.setState({ timeValue: E() }), this.handleAccept(t, E());
+      this.setState({ timeValue: w() }), this.handleAccept(t, w());
     }, this.handleCalendarValueChange = (t) => {
       t.syntheticEvent.stopPropagation(), this.setState({ dateValue: t.value, tab: "time" }), this.shouldFocusPart = !0;
     }, this.handleTimeListContainerChange = (t) => {
@@ -98,15 +98,15 @@ const f = class f extends i.Component {
       const { keyCode: e, altKey: s } = t;
       if (!this.props.disabled)
         switch (e) {
-          case o.enter:
+          case h.enter:
             !this.hasActiveButton() && this.hasDateValue && this.handleAccept(t);
             return;
-          case o.left:
+          case h.left:
             if (!s)
               return;
             this.move("left");
             return;
-          case o.right:
+          case h.right:
             if (!s)
               return;
             this.move("right");
@@ -116,23 +116,23 @@ const f = class f extends i.Component {
         }
     }, this.handleCancelKeyDown = (t) => {
       const { keyCode: e } = t;
-      e === o.tab && this._dateButtonRef && this._dateButtonRef.element && !this.hasDateValue && (t.preventDefault(), this._dateButtonRef.element.focus());
+      e === h.tab && this._dateButtonRef && this._dateButtonRef.element && !this.hasDateValue && (t.preventDefault(), this._dateButtonRef.element.focus());
     }, this.handleSetKeyDown = (t) => {
       const { keyCode: e } = t;
-      e === o.tab && this._dateButtonRef && this._dateButtonRef.element && (t.preventDefault(), this._dateButtonRef.element.focus());
+      e === h.tab && this._dateButtonRef && this._dateButtonRef.element && (t.preventDefault(), this._dateButtonRef.element.focus());
     }, this.handleDateKeyDown = (t) => {
-      var n, h, r, c;
+      var l, r, n, d;
       const { keyCode: e, shiftKey: s } = t;
-      s && e === o.tab && (t.stopPropagation(), this.hasDateValue ? (c = (r = this._acceptButton) == null ? void 0 : r.element) == null || c.focus() : (h = (n = this._cancelButton) == null ? void 0 : n.element) == null || h.focus()), e === o.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 = (l = this._cancelButton) == null ? void 0 : l.element) == null || r.focus()), e === h.enter && (t.stopPropagation(), this.move("left"));
     }, this.handleTimeKeyDown = (t) => {
       const { keyCode: e } = t;
-      e === o.enter && (t.stopPropagation(), this.move("right"));
+      e === h.enter && (t.stopPropagation(), this.move("right"));
     }, this.handleTimePartMount = (t) => {
       this.setState({ timeValue: t });
     }, this.state = {
       tab: "date",
       dateValue: this.props.value,
-      timeValue: this.props.value || d
+      timeValue: this.props.value || g
     };
   }
   get calendar() {
@@ -145,13 +145,13 @@ const f = class f extends i.Component {
     return this.state.dateValue !== null;
   }
   get localizationService() {
-    return B(this);
+    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({
-      dateValue: a.value && this.props.value && D(a.value, this.props.value) ? this.state.dateValue : this.props.value,
-      timeValue: this.props.value || d
+      dateValue: a.value && this.props.value && k(a.value, this.props.value) ? this.state.dateValue : this.props.value,
+      timeValue: this.props.value || g
     }), this.shouldFocusPart = !1;
   }
   render() {
@@ -160,49 +160,50 @@ const f = class f extends i.Component {
       min: t,
       max: e,
       weekNumber: s,
-      focusedDate: n,
-      format: h,
-      mobileMode: r,
-      footerActions: c
-    } = this.props, T = x(
-      {
-        "k-date-tab": this.state.tab === "date",
-        "k-time-tab": this.state.tab === "time",
-        "k-disabled": a
-      },
-      "k-datetime-wrap"
-    ), V = this.localizationService.toLanguageString(k, m[k]), w = this.localizationService.toLanguageString(y, m[y]), g = {
+      focusedDate: l,
+      format: r,
+      mobileMode: n,
+      footerActions: d,
+      unstyled: v
+    } = this.props, m = v && v.uDateTimePicker, S = o(
+      u.wrap({
+        c: m,
+        date: this.state.tab === "date",
+        time: this.state.tab === "time",
+        disabled: a
+      })
+    ), K = this.localizationService.toLanguageString(T, p[T]), N = this.localizationService.toLanguageString(E, p[E]), C = {
       min: t,
       max: e,
       weekNumber: s,
-      focusedDate: n,
+      focusedDate: l,
       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: r
+      mobileMode: n
     };
     return /* @__PURE__ */ i.createElement(
       "div",
       {
         onKeyDown: this.handleKeyDown,
-        className: T,
+        className: S,
         tabIndex: -1
       },
-      /* @__PURE__ */ i.createElement("div", { className: "k-datetime-buttongroup" }, /* @__PURE__ */ i.createElement(S, { width: "100%" }, /* @__PURE__ */ i.createElement(
-        u,
+      /* @__PURE__ */ i.createElement("div", { className: o(u.buttonGroup({ c: m })) }, /* @__PURE__ */ i.createElement(x, { width: "100%" }, /* @__PURE__ */ i.createElement(
+        f,
         {
-          ref: (l) => this._dateButtonRef = l,
+          ref: (c) => this._dateButtonRef = c,
           type: "button",
           selected: this.state.tab === "date",
           togglable: !0,
           onClick: this.handleDateClick,
           onKeyDown: this.handleDateKeyDown
         },
-        V
+        K
       ), /* @__PURE__ */ i.createElement(
-        u,
+        f,
         {
           type: "button",
           selected: this.state.tab === "time",
@@ -210,37 +211,38 @@ const f = class f extends i.Component {
           onClick: this.handleTimeClick,
           onKeyDown: this.handleTimeKeyDown
         },
-        w
+        N
       ))),
-      /* @__PURE__ */ i.createElement("div", { className: "k-datetime-selector" }, /* @__PURE__ */ i.createElement("div", { className: "k-datetime-calendar-wrap", ref: (l) => this._calendarWrap = l }, this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...g }) : /* @__PURE__ */ i.createElement(
-        K,
+      /* @__PURE__ */ i.createElement("div", { className: o(u.selector({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: o(u.calendarWrap({ c: m })), ref: (c) => this._calendarWrap = c }, this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { key: this.state.tab, ...C }) : /* @__PURE__ */ i.createElement(
+        A,
         {
           key: this.state.tab,
-          ref: (l) => {
-            this._calendar = l;
+          ref: (c) => {
+            this._calendar = c;
           },
-          ...g
+          ...C
         }
-      )), /* @__PURE__ */ i.createElement("div", { className: "k-datetime-time-wrap" }, /* @__PURE__ */ i.createElement("div", { className: r ? "k-reset k-timeselector-lg k-timeselector" : "" }, /* @__PURE__ */ i.createElement(
-        N,
+      )), /* @__PURE__ */ i.createElement("div", { className: o(u.timeWrap({ c: m })) }, /* @__PURE__ */ i.createElement("div", { className: o(u.timeSelector({ c: m, mobileMode: n })) }, /* @__PURE__ */ i.createElement(
+        z,
         {
           key: 1,
           onNowClick: this.handleNowClick,
           disabled: a || this.state.tab !== "time",
-          ref: (l) => {
-            this._timePart = l;
+          ref: (c) => {
+            this._timePart = c;
           },
-          min: this.minTime || R,
-          max: this.maxTime || M,
+          min: this.minTime || F,
+          max: this.maxTime || L,
           steps: this.props.steps,
           value: this.state.timeValue,
-          format: h,
+          format: r,
           onChange: this.handleTimeListContainerChange,
           onMount: this.handleTimePartMount,
-          mobileMode: r
+          mobileMode: n,
+          unstyled: v
         }
       )))),
-      c && this.dateTimeFooter()
+      d && this.dateTimeFooter()
     );
   }
   get minTime() {
@@ -250,26 +252,26 @@ const f = class f extends i.Component {
     return this.props.maxTime !== void 0 ? this.props.maxTime : this.normalizeRange(this.props.max, this.state.dateValue);
   }
   normalizeRange(a, t) {
-    return D(a, t || _()) ? a : null;
+    return k(a, t || V()) ? a : null;
   }
   hasActiveButton() {
     if (!this._acceptButton)
       return !1;
-    const a = A(document);
+    const a = I(document);
     return this._acceptButton && a === this._acceptButton.element || this._cancelButton && a === this._cancelButton.element;
   }
   mergeTime(a, t) {
-    return a && t ? C(t, a) : t;
+    return a && t ? P(t, a) : t;
   }
   mergeDate(a, t) {
-    return a ? C(a || _(), t) : t;
+    return a ? P(a || V(), t) : t;
   }
 };
-f.defaultProps = {
+y.defaultProps = {
   footerActions: !0
 };
-let p = f;
-P(p);
+let b = y;
+M(b);
 export {
-  p as DateTimeSelector
+  b as DateTimeSelector
 };