@progress/kendo-react-dateinputs 11.0.0-develop.3 → 11.0.0-develop.4

package/datetimepicker/DateTimePicker.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as a from "react";
+import * as n from "react";
 import e from "prop-types";
 import { Popup as $ } from "@progress/kendo-react-popup";
 import { cloneDate as M } from "@progress/kendo-date-math";
-import { Keys as d, canUseDOM as O, AsyncFocusBlur as ee, classNames as I, uDateTimePicker as D, createPropsContext as te, withIdHOC as ie, withPropsContext as se, withUnstyledHOC as oe, withAdaptiveModeContext as ne } from "@progress/kendo-react-common";
-import { calendarIcon as ae } from "@progress/kendo-svg-icons";
+import { Keys as d, canUseDOM as O, AsyncFocusBlur as ee, classNames as S, uDateTimePicker as I, createPropsContext as te, withIdHOC as ie, withPropsContext as se, withUnstyledHOC as oe, withAdaptiveModeContext as ae } from "@progress/kendo-react-common";
+import { calendarIcon as ne } from "@progress/kendo-svg-icons";
 import { DateInput as re } from "../dateinput/DateInput.mjs";
 import { Button as le } from "@progress/kendo-react-buttons";
 import { MAX_DATE as he, MIN_DATE as de, isInDateRange as ue, MAX_TIME as pe, MIN_TIME as ce } from "../utils.mjs";
@@ -21,14 +21,14 @@ import { isInTimeRange as ge } from "../timepicker/utils.mjs";
 import { PickerFloatingLabel as ve } from "../hooks/usePickerFloatingLabel.mjs";
 import { AdaptiveMode as we } from "../common/AdaptiveMode.mjs";
 import { ActionSheetContent as be } from "@progress/kendo-react-layout";
-const o = class o extends a.Component {
+const o = class o extends n.Component {
   constructor(i) {
-    super(i), this._element = null, this._dateInput = a.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+    super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
-      const { disabled: t, minTime: s, maxTime: n, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
-      return /* @__PURE__ */ a.createElement(
+      const { disabled: t, minTime: s, maxTime: a, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
+      return /* @__PURE__ */ n.createElement(
         fe,
         {
           ref: (w) => {
@@ -44,7 +44,7 @@ const o = class o extends a.Component {
           min: this.min,
           max: this.max,
           minTime: s,
-          maxTime: n,
+          maxTime: a,
           focusedDate: u,
           format: h,
           calendar: l,
@@ -57,13 +57,14 @@ const o = class o extends a.Component {
       const { windowWidth: t = 0 } = this.state, s = m(this).toLanguageString(
         C,
         p[C]
-      ), n = m(this).toLanguageString(
+      ), a = m(this).toLanguageString(
         P,
         p[P]
       ), h = {
         expand: this.show,
         onClose: this.handleBlur,
-        title: this.props.adaptiveTitle,
+        title: this.props.adaptiveTitle || this.props.label,
+        subTitle: this.props.adaptiveSubtitle,
         windowWidth: t,
         footer: {
           cancelText: s,
@@ -71,14 +72,14 @@ const o = class o extends a.Component {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
           },
-          applyText: n,
+          applyText: a,
           onApply: (l) => {
             var r;
             return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
           }
         }
       };
-      return /* @__PURE__ */ a.createElement(we, { ...h }, /* @__PURE__ */ a.createElement(be, null, this.renderPicker()));
+      return /* @__PURE__ */ n.createElement(we, { ...h }, /* @__PURE__ */ n.createElement(be, null, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (t) => {
@@ -97,17 +98,17 @@ const o = class o extends a.Component {
       this.setState({ focused: !0 });
     }, this.handleBlur = () => {
       this.setState({ focused: !1 }), this.setShow(!1);
-    }, this.handleDateIconClick = () => {
+    }, this.handleClick = () => {
       this.props.disabled || (this.shouldFocusDateInput = !0, this.setShow(!this.show));
     }, this.handleIconMouseDown = (t) => {
       t.preventDefault();
     }, this.handleKeyDown = (t) => {
-      const { altKey: s, keyCode: n } = t;
-      if (n === d.esc) {
+      const { altKey: s, keyCode: a } = t;
+      if (a === d.esc) {
         this.shouldFocusDateInput = !0, this.setShow(!1);
         return;
       }
-      s && (n === d.up || n === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = n === d.up, this.setShow(n === d.down));
+      s && (a === d.up || a === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === d.up, this.setShow(a === d.down));
     }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), this.state = {
       value: this.props.defaultValue || o.defaultProps.defaultValue,
       show: this.props.defaultShow || o.defaultProps.defaultShow,
@@ -169,12 +170,12 @@ const o = class o extends a.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const i = ue(this.value, this.min, this.max) && ge(this.value, this.props.minTime || ce, this.props.maxTime || pe), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, n = this.props.valid !== void 0 ? this.props.valid : s;
+    const i = ue(this.value, this.min, this.max) && ge(this.value, this.props.minTime || ce, this.props.maxTime || pe), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, a = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: t,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
       rangeUnderflow: this.value && this.value.getTime() < this.min.getTime() || !1,
-      valid: n,
+      valid: a,
       valueMissing: this.value === null
     };
   }
@@ -208,7 +209,9 @@ const o = class o extends a.Component {
    */
   componentDidUpdate() {
     const i = this.dateInputElement();
-    this._dateTimeSelector && this.show && !this.prevShow && this._dateTimeSelector.focus({ preventScroll: !0 }), i && !this.show && this.shouldFocusDateInput && i.focus({ preventScroll: !0 }), this.prevShow = this.show, this.shouldFocusDateInput = !1;
+    this._dateTimeSelector && this.show && !this.prevShow && this._dateTimeSelector.focus({ preventScroll: !0 }), this.mobileMode && this.show && !this.prevShow && setTimeout(() => {
+      this._dateTimeSelector && this._dateTimeSelector.focus({ preventScroll: !0 });
+    }, 300), i && !this.show && this.shouldFocusDateInput && i.focus({ preventScroll: !0 }), this.prevShow = this.show, this.shouldFocusDateInput = !1;
   }
   /**
    * @hidden
@@ -225,7 +228,7 @@ const o = class o extends a.Component {
       size: i = o.defaultProps.size,
       rounded: t = o.defaultProps.rounded,
       fillMode: s = o.defaultProps.fillMode,
-      autoFocus: n = o.defaultProps.autoFocus,
+      autoFocus: a = o.defaultProps.autoFocus,
       inputAttributes: h,
       disabled: l,
       tabIndex: r,
@@ -242,8 +245,8 @@ const o = class o extends a.Component {
       required: z,
       validityStyles: B,
       minTime: N,
-      maxTime: V,
-      ariaLabelledBy: _,
+      maxTime: _,
+      ariaLabelledBy: V,
       ariaDescribedBy: q,
       popup: L = $,
       unstyled: b,
@@ -254,9 +257,9 @@ const o = class o extends a.Component {
       autoSwitchParts: W,
       autoSwitchKeys: X,
       allowCaretMode: Y
-    } = this.props, y = b && b.uDateTimePicker, S = !this.validityStyles || this.validity.valid, Z = {
+    } = this.props, y = b && b.uDateTimePicker, D = !this.validityStyles || this.validity.valid, Z = {
       id: u,
-      ariaLabelledBy: _,
+      ariaLabelledBy: V,
       ariaDescribedBy: q,
       format: v,
       formatPlaceholder: w,
@@ -268,7 +271,7 @@ const o = class o extends a.Component {
       min: x,
       max: k,
       minTime: N,
-      maxTime: V,
+      maxTime: _,
       name: A,
       tabIndex: this.show ? -1 : r,
       valid: this.validity.valid,
@@ -289,7 +292,7 @@ const o = class o extends a.Component {
       autoSwitchParts: W,
       autoSwitchKeys: X,
       allowCaretMode: Y
-    }, T = /* @__PURE__ */ a.createElement(
+    }, T = /* @__PURE__ */ n.createElement(
       ee,
       {
         onFocus: this.handleFocus,
@@ -297,56 +300,56 @@ const o = class o extends a.Component {
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: G, onBlur: J }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+      ({ onFocus: G, onBlur: J }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "div",
         {
           ref: (Q) => {
             this._element = Q;
           },
-          className: I(
-            D.wrapper({
+          className: S(
+            I.wrapper({
               c: y,
               size: i,
               fillMode: s,
               rounded: t,
               disabled: l,
               required: this.required,
-              invalid: !S
+              invalid: !D
             }),
             E
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: F },
-          onFocus: this.mobileMode ? void 0 : G,
+          onFocus: this.mobileMode ? this.handleClick : G,
           onBlur: J,
-          onClick: this.mobileMode ? this.handleDateIconClick : void 0
+          onClick: this.mobileMode ? this.handleClick : void 0
         },
-        /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ n.createElement(
           this.dateInputComp,
           {
             _ref: this._dateInput,
             ariaRole: "combobox",
             ariaControls: this._popupId,
             ariaHasPopup: "dialog",
-            autoFocus: n,
+            autoFocus: a,
             inputAttributes: h,
             ...Z
           }
         ),
-        /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ n.createElement(
           le,
           {
             tabIndex: -1,
             type: "button",
             icon: "calendar",
-            svgIcon: ae,
+            svgIcon: ne,
             onMouseDown: this.handleIconMouseDown,
-            onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
+            onClick: this.mobileMode ? void 0 : this.handleClick,
             title: m(this).toLanguageString(
               c,
               p[c]
             ),
-            className: I(D.inputButton({ c: y })),
+            className: S(I.inputButton({ c: y })),
             rounded: null,
             fillMode: s,
             "aria-label": m(this).toLanguageString(
@@ -355,13 +358,13 @@ const o = class o extends a.Component {
             )
           }
         ),
-        /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ n.createElement(
           L,
           {
             show: this.show,
             animate: this.element !== null,
             anchor: this.element,
-            popupClass: I(D.popup({ c: y })),
+            popupClass: S(I.popup({ c: y })),
             id: this._popupId,
             anchorAlign: {
               horizontal: "left",
@@ -376,13 +379,13 @@ const o = class o extends a.Component {
         )
       ), this.mobileMode && this.renderAdaptivePopup())
     );
-    return this.props.label ? /* @__PURE__ */ a.createElement(
+    return this.props.label ? /* @__PURE__ */ n.createElement(
       ve,
       {
         dateInput: this._dateInput,
         label: this.props.label,
         editorId: u,
-        editorValid: S,
+        editorValid: D,
         editorDisabled: this.props.disabled,
         children: T,
         style: { width: this.props.width }
@@ -494,18 +497,18 @@ o.displayName = "DateTimePicker", o.propTypes = {
   autoFocus: !1
 };
 let f = o;
-const ye = te(), Ie = ie(
+const ye = te(), Se = ie(
   se(
     ye,
     oe(
-      ne(f)
+      ae(f)
     )
   )
 );
-Ie.displayName = "KendoReactDateTimePicker";
+Se.displayName = "KendoReactDateTimePicker";
 me(f);
 export {
-  Ie as DateTimePicker,
+  Se as DateTimePicker,
   ye as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };

package/datetimepicker/DateTimeSelector.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"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"),c=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,o=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:r=>{this._cancelButton=r},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:o,"aria-label":o},o),n.createElement(p.Button,{type:"button",themeColor:"primary",ref:r=>{this._acceptButton=r},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||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.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 o,h,r,g;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(g=(r=this._acceptButton)==null?void 0:r.element)==null||g.focus():(h=(o=this._cancelButton)==null?void 0:o.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||c.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(o=>({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?o.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:o,format:h,mobileMode:r,footerActions:g,unstyled:f}=this.props,m=f&&f.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:o,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:r};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%",unstyled:f},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:r}))},n.createElement(B.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:r,unstyled:f})))),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||c.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?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s||c.getToday(),e):e}};D.defaultProps={footerActions:!0};let v=D;_.registerForLocalization(v);exports.DateTimeSelector=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),_=require("@progress/kendo-react-intl"),o=require("../messages/index.js"),p=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),B=require("../timepicker/TimePart.js"),c=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,r=this.localizationService.toLanguageString(o.dateTimePickerCancel,o.messages[o.dateTimePickerCancel]),h=this.localizationService.toLanguageString(o.dateTimePickerSet,o.messages[o.dateTimePickerSet]);return n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},e&&n.createElement(p.Button,{type:"button",ref:l=>{this._cancelButton=l},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:r,"aria-label":r},r),n.createElement(p.Button,{type:"button",themeColor:"primary",ref:l=>{this._acceptButton=l},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||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.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 r,h,l,g;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(g=(l=this._acceptButton)==null?void 0:l.element)==null||g.focus():(h=(r=this._cancelButton)==null?void 0:r.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||c.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(r=>({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?r.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:r,format:h,mobileMode:l,footerActions:g,unstyled:f}=this.props,m=f&&f.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(o.date,o.messages[o.date]),P=this.localizationService.toLanguageString(o.time,o.messages[o.time]),T={min:e,max:t,weekNumber:i,focusedDate:r,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:l};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%",unstyled:f},n.createElement(p.Button,{ref:u=>{this._dateButtonRef=u},type:"button",selected:this.state.tab==="date",togglable:!0,size:l?"large":void 0,onClick:this.handleDateClick,onKeyDown:this.handleDateKeyDown},C),n.createElement(p.Button,{type:"button",selected:this.state.tab==="time",togglable:!0,size:l?"large":void 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:l}))},n.createElement(B.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:l,unstyled:f})))),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||c.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?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s||c.getToday(),e):e}};D.defaultProps={footerActions:!0};let v=D;_.registerForLocalization(v);exports.DateTimeSelector=v;

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());