@progress/kendo-react-dateinputs 8.3.0-develop.1 → 8.3.0-develop.10

package/datetimepicker/DateTimeSelector.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const C=require("react"),k=require("@progress/kendo-react-intl"),n=require("../messages/index.js"),m=require("@progress/kendo-react-buttons"),E=require("../calendar/components/Calendar.js"),P=require("../timepicker/TimePart.js"),o=require("../utils.js"),b=require("@progress/kendo-date-math"),l=require("@progress/kendo-react-common"),y=require("../timepicker/utils.js");function w(u){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(a,e,t.get?t:{enumerable:!0,get:()=>u[e]})}}return a.default=u,Object.freeze(a)}const i=w(C),f=class f 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=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-widget.k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e}=this.props,t=this.localizationService.toLanguageString(n.dateTimePickerCancel,n.messages[n.dateTimePickerCancel]),s=this.localizationService.toLanguageString(n.dateTimePickerSet,n.messages[n.dateTimePickerSet]);return i.createElement("div",{className:"k-datetime-footer k-actions k-actions-stretched"},e&&i.createElement(m.Button,{type:"button",ref:r=>{this._cancelButton=r},className:"k-time-cancel",onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:t,"aria-label":t},t),i.createElement(m.Button,{type:"button",themeColor:"primary",ref:r=>{this._acceptButton=r},className:"k-time-accept",disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:s,"aria-label":s},s))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||o.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||o.MIDNIGHT_DATE);if(this.props.onReject){const s={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,s)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const s=this.mergeDate(this.state.dateValue,t||this.state.timeValue);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:s,target:this})},this.handleNowClick=e=>{this.setState({timeValue:y.getNow()}),this.handleAccept(e,y.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleDateClick=e=>{e.stopPropagation(),this.move("left")},this.handleTimeClick=e=>{e.stopPropagation(),this.move("right")},this.handleKeyDown=e=>{const{keyCode:t,altKey:s}=e;if(!this.props.disabled)switch(t){case l.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case l.Keys.left:if(!s)return;this.move("left");return;case l.Keys.right:if(!s)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{const{keyCode:t}=e;t===l.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&!this.hasDateValue&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleSetKeyDown=e=>{const{keyCode:t}=e;t===l.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleDateKeyDown=e=>{var r,d,c,p;const{keyCode:t,shiftKey:s}=e;s&&t===l.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(p=(c=this._acceptButton)==null?void 0:c.element)==null||p.focus():(d=(r=this._cancelButton)==null?void 0:r.element)==null||d.focus()),t===l.Keys.enter&&(e.stopPropagation(),this.move("left"))},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===l.Keys.enter&&(e.stopPropagation(),this.move("right"))},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||o.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return k.provideLocalizationService(this)}componentDidUpdate(a,e){var t,s;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=a.value)==null?void 0:t.getTime())!==((s=this.props.value)==null?void 0:s.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState({dateValue:a.value&&this.props.value&&b.isEqualDate(a.value,this.props.value)?this.state.dateValue:this.props.value,timeValue:this.props.value||o.MIDNIGHT_DATE}),this.shouldFocusPart=!1}render(){const{disabled:a,min:e,max:t,weekNumber:s,focusedDate:r,format:d,mobileMode:c,footerActions:p}=this.props,D=l.classNames({"k-date-tab":this.state.tab==="date","k-time-tab":this.state.tab==="time","k-disabled":a},"k-datetime-wrap"),T=this.localizationService.toLanguageString(n.date,n.messages[n.date]),_=this.localizationService.toLanguageString(n.time,n.messages[n.time]),v={min:e,max:t,weekNumber:s,focusedDate:r,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:c};return i.createElement("div",{onKeyDown:this.handleKeyDown,className:D,tabIndex:-1},i.createElement("div",{className:"k-datetime-buttongroup"},i.createElement(m.ButtonGroup,{width:"100%"},i.createElement(m.Button,{ref:h=>this._dateButtonRef=h,type:"button",selected:this.state.tab==="date",togglable:!0,onClick:this.handleDateClick,onKeyDown:this.handleDateKeyDown},T),i.createElement(m.Button,{type:"button",selected:this.state.tab==="time",togglable:!0,onClick:this.handleTimeClick,onKeyDown:this.handleTimeKeyDown},_))),i.createElement("div",{className:"k-datetime-selector"},i.createElement("div",{className:"k-datetime-calendar-wrap",ref:h=>this._calendarWrap=h},this.props.calendar?i.createElement(this.props.calendar,{key:this.state.tab,...v}):i.createElement(E.Calendar,{key:this.state.tab,ref:h=>{this._calendar=h},...v})),i.createElement("div",{className:"k-datetime-time-wrap"},i.createElement("div",{className:c?"k-reset k-timeselector-lg k-timeselector":""},i.createElement(P.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:a||this.state.tab!=="time",ref:h=>{this._timePart=h},min:this.minTime||o.MIN_TIME,max:this.maxTime||o.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:d,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:c})))),p&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(a,e){return b.isEqualDate(a,e||o.getToday())?a:null}hasActiveButton(){if(!this._acceptButton)return!1;const a=l.getActiveElement(document);return this._acceptButton&&a===this._acceptButton.element||this._cancelButton&&a===this._cancelButton.element}mergeTime(a,e){return a&&e?o.setTime(e,a):e}mergeDate(a,e){return a?o.setTime(a||o.getToday(),e):e}};f.defaultProps={footerActions:!0};let g=f;k.registerForLocalization(g);exports.DateTimeSelector=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),_=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),p=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),B=require("../timepicker/TimePart.js"),r=require("../utils.js"),y=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),b=require("../timepicker/utils.js");function V(d){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const n=V(E),D=class D 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=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e,unstyled:t}=this.props,i=t&&t.uDateTimePicker,c=this.localizationService.toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),h=this.localizationService.toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]);return n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},e&&n.createElement(p.Button,{type:"button",ref:o=>{this._cancelButton=o},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:c,"aria-label":c},c),n.createElement(p.Button,{type:"button",themeColor:"primary",ref:o=>{this._acceptButton=o},className:a.classNames(a.uTime.accept({c:i})),disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:h,"aria-label":h},h))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||r.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||r.MIDNIGHT_DATE);if(this.props.onReject){const i={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,i)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const i=this.mergeDate(this.state.dateValue,t||this.state.timeValue);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:this})},this.handleNowClick=e=>{this.setState({timeValue:b.getNow()}),this.handleAccept(e,b.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleDateClick=e=>{e.stopPropagation(),this.move("left")},this.handleTimeClick=e=>{e.stopPropagation(),this.move("right")},this.handleKeyDown=e=>{const{keyCode:t,altKey:i}=e;if(!this.props.disabled)switch(t){case a.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case a.Keys.left:if(!i)return;this.move("left");return;case a.Keys.right:if(!i)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&!this.hasDateValue&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleSetKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleDateKeyDown=e=>{var c,h,o,g;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(g=(o=this._acceptButton)==null?void 0:o.element)==null||g.focus():(h=(c=this._cancelButton)==null?void 0:c.element)==null||h.focus()),t===a.Keys.enter&&(e.stopPropagation(),this.move("left"))},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.enter&&(e.stopPropagation(),this.move("right"))},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||r.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return _.provideLocalizationService(this)}componentDidUpdate(s,e){var t,i;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=s.value)==null?void 0:t.getTime())!==((i=this.props.value)==null?void 0:i.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?this.state.dateValue:this.props.value,timeValue:this.props.value||r.MIDNIGHT_DATE}),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:c,format:h,mobileMode:o,footerActions:g,unstyled:v}=this.props,m=v&&v.uDateTimePicker,k=a.classNames(a.uDateTimePicker.wrap({c:m,date:this.state.tab==="date",time:this.state.tab==="time",disabled:s})),C=this.localizationService.toLanguageString(l.date,l.messages[l.date]),P=this.localizationService.toLanguageString(l.time,l.messages[l.time]),T={min:e,max:t,weekNumber:i,focusedDate:c,disabled:s||this.state.tab!=="date",value:this.state.dateValue,onChange:this.handleCalendarValueChange,navigation:!1,tabIndex:s||this.state.tab!=="date"?-1:void 0,mobileMode:o};return n.createElement("div",{onKeyDown:this.handleKeyDown,className:k,tabIndex:-1},n.createElement("div",{className:a.classNames(a.uDateTimePicker.buttonGroup({c:m}))},n.createElement(p.ButtonGroup,{width:"100%"},n.createElement(p.Button,{ref:u=>this._dateButtonRef=u,type:"button",selected:this.state.tab==="date",togglable:!0,onClick:this.handleDateClick,onKeyDown:this.handleDateKeyDown},C),n.createElement(p.Button,{type:"button",selected:this.state.tab==="time",togglable:!0,onClick:this.handleTimeClick,onKeyDown:this.handleTimeKeyDown},P))),n.createElement("div",{className:a.classNames(a.uDateTimePicker.selector({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.calendarWrap({c:m})),ref:u=>this._calendarWrap=u},this.props.calendar?n.createElement(this.props.calendar,{key:this.state.tab,...T}):n.createElement(N.Calendar,{key:this.state.tab,ref:u=>{this._calendar=u},...T})),n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeWrap({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeSelector({c:m,mobileMode:o}))},n.createElement(B.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||r.MIN_TIME,max:this.maxTime||r.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:o,unstyled:v})))),g&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(s,e){return y.isEqualDate(s,e||r.getToday())?s:null}hasActiveButton(){if(!this._acceptButton)return!1;const s=a.getActiveElement(document);return this._acceptButton&&s===this._acceptButton.element||this._cancelButton&&s===this._cancelButton.element}mergeTime(s,e){return s&&e?r.setTime(e,s):e}mergeDate(s,e){return s?r.setTime(s||r.getToday(),e):e}};D.defaultProps={footerActions:!0};let f=D;_.registerForLocalization(f);exports.DateTimeSelector=f;

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
 };