@progress/kendo-react-dateinputs 15.2.0-develop.1 → 15.2.0-develop.2

package/timepicker/TimePart.mjs

@@ -7,18 +7,18 @@
  */
 import * as n from "react";
 import t from "prop-types";
-import { cloneDate as O } from "@progress/kendo-date-math";
-import { Keys as T, classNames as l, uTime as h, getActiveElement as R } from "@progress/kendo-react-common";
-import { provideIntlService as k, provideLocalizationService as S, registerForIntl as C, registerForLocalization as M } from "@progress/kendo-react-intl";
-import { selectNow as L, messages as x, now as I } from "../messages/index.mjs";
-import { TimeList as P } from "./TimeList.mjs";
-import { MAX_TIME as A, MIN_TIME as K, MIDNIGHT_DATE as _ } from "../utils.mjs";
+import { cloneDate as E } from "@progress/kendo-date-math";
+import { Keys as b, classNames as h, uTime as u, getActiveElement as F } from "@progress/kendo-react-common";
+import { provideIntlService as O, provideLocalizationService as R, registerForIntl as k, registerForLocalization as S } from "@progress/kendo-react-intl";
+import { selectNow as y, messages as T, now as L } from "../messages/index.mjs";
+import { TimeList as M } from "./TimeList.mjs";
+import { MAX_TIME as P, MIN_TIME as C, MIDNIGHT_DATE as A } from "../utils.mjs";
 import { TIME_PART as d } from "./models/TimePart.mjs";
-import { isInTimeRange as $, getNow as z, snapTime as N, generateSnappers as B, timeInRange as W } from "./utils.mjs";
-import { Button as j } from "@progress/kendo-react-buttons";
+import { isInTimeRange as K, getNow as _, snapTime as x, generateSnappers as I, timeInRange as z } from "./utils.mjs";
+import { Button as $ } from "@progress/kendo-react-buttons";
 const v = new RegExp(
   `${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`
-), a = class a extends n.Component {
+), r = class r extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._nowButton = null, this.dateFormatParts = [], this.timeLists = [], this.focus = (s, e) => {
       Promise.resolve().then(() => {
@@ -27,25 +27,25 @@ const v = new RegExp(
         !e && this.state.activeListIndex === -1 && !this.hasActiveButton() && o && o.element && o.focus(s);
       });
     }, this.timeFormatReducer = (s, e) => s + e.pattern, this.timeFormatFilter = (s, e, o) => {
-      const r = e >= 1 && o[e - 1];
-      return r && r && s.type === "literal" ? v.test(r.type || "") : v.test(s.type || "");
+      const a = e >= 1 && o[e - 1];
+      return a && a && s.type === "literal" ? v.test(a.type || "") : v.test(s.type || "");
     }, this.focusList = (s) => {
       this.timeLists.length && this.timeLists.reduce(this.listReducer, []).map((e) => s === 1 ? e.next : e.prev).map((e) => e && e.element && e.element.focus({ preventScroll: !0 }));
-    }, this.listReducer = (s, e, o, r) => s.length || e.props.id !== this.state.activeListIndex ? s : [
+    }, this.listReducer = (s, e, o, a) => s.length || e.props.id !== this.state.activeListIndex ? s : [
       {
-        next: r[o + 1] || e,
-        prev: r[o - 1] || e
+        next: a[o + 1] || e,
+        prev: a[o - 1] || e
       }
-    ], this.showNowButton = () => !this.hasSteps() && this.props.nowButton && $(z(), this.min, this.max), this.handleKeyDown = (s) => {
+    ], this.showNowButton = () => !this.hasSteps() && this.props.nowButton && K(_(), this.min, this.max), this.handleKeyDown = (s) => {
       const { keyCode: e } = s;
       switch (e) {
-        case T.left:
+        case b.left:
           s.preventDefault(), this.focusList(
             0
             /* Left */
           );
           return;
-        case T.right:
+        case b.right:
           s.preventDefault(), this.focusList(
             1
             /* Right */
@@ -65,7 +65,7 @@ const v = new RegExp(
     }, this.handleChange = (s) => {
       const { onChange: e } = this.props;
       e && e.call(void 0, s);
-    }, this.snapTime = N(B(this.props.steps, this.props.min || a.defaultProps.min)), this.state = {
+    }, this.snapTime = x(I(this.props.steps, this.props.min || r.defaultProps.min)), this.state = {
       activeListIndex: -1
     }, this.hasActiveButton = this.hasActiveButton.bind(this);
   }
@@ -76,22 +76,22 @@ const v = new RegExp(
     return this._element;
   }
   get value() {
-    return W(this.snapTime(O(this.props.value || _)), this.min, this.max);
+    return z(this.snapTime(E(this.props.value || A)), this.min, this.max);
   }
   get intl() {
-    return k(this);
+    return O(this);
   }
   get min() {
-    return this.snapTime(this.props.min || a.defaultProps.min);
+    return this.snapTime(this.props.min || r.defaultProps.min);
   }
   get max() {
-    return this.snapTime(this.props.max || a.defaultProps.max);
+    return this.snapTime(this.props.max || r.defaultProps.max);
   }
   get steps() {
-    return this.props.steps || a.defaultProps.steps;
+    return this.props.steps || r.defaultProps.steps;
   }
   get boundRange() {
-    return this.props.boundRange !== void 0 ? this.props.boundRange : a.defaultProps.boundRange;
+    return this.props.boundRange !== void 0 ? this.props.boundRange : r.defaultProps.boundRange;
   }
   /**
    * @hidden
@@ -107,66 +107,55 @@ const v = new RegExp(
    * @hidden
    */
   render() {
-    const { format: i, smoothScroll: s, onNowClick: e, className: o, disabled: r, mobileMode: w, show: D, onNowKeyDown: E, unstyled: g } = this.props, m = g && g.uTime;
-    this.snapTime = N(B(this.steps, this.min)), this.dateFormatParts = this.intl.splitDateFormat(i || a.defaultProps.format).filter(this.timeFormatFilter);
-    const F = l(
-      h.part({
-        c: m,
-        mobileMode: w,
-        disabled: r
-      }),
-      o
-    );
-    this.timeLists = [];
-    const b = S(this), y = b.toLanguageString(L, x[L]);
-    return /* @__PURE__ */ n.createElement("div", { className: F }, /* @__PURE__ */ n.createElement("div", { className: l(h.header({ c: m })) }, /* @__PURE__ */ n.createElement("span", { className: l(h.title({ c: m })) }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ""))), this.showNowButton() && /* @__PURE__ */ n.createElement(
-      j,
+    const { format: i, smoothScroll: s, onNowClick: e, disabled: o, mobileMode: a, show: B, onNowKeyDown: N, unstyled: g } = this.props, m = g && g.uTime;
+    this.snapTime = x(I(this.steps, this.min)), this.dateFormatParts = this.intl.splitDateFormat(i || r.defaultProps.format).filter(this.timeFormatFilter), this.timeLists = [];
+    const w = R(this), D = w.toLanguageString(y, T[y]);
+    return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("div", { className: h(u.header({ c: m })) }, /* @__PURE__ */ n.createElement("span", { className: h(u.title({ c: m })) }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ""))), this.showNowButton() && /* @__PURE__ */ n.createElement(
+      $,
       {
         type: "button",
-        ref: (u) => {
-          this._nowButton = u;
+        ref: (l) => {
+          this._nowButton = l;
         },
-        className: l(h.now({ c: m })),
+        size: a ? "large" : void 0,
+        className: h(u.now({ c: m })),
         fillMode: "flat",
-        themeColor: "base",
-        title: y,
-        onKeyDown: E,
-        "aria-label": y,
+        title: D,
+        onKeyDown: N,
         onClick: e,
-        tabIndex: r ? -1 : 0
+        tabIndex: o ? -1 : 0
       },
-      b.toLanguageString(I, x[I])
-    )), /* @__PURE__ */ n.createElement("div", { className: l(h.listContainer({ c: m })), onKeyDown: this.handleKeyDown }, /* @__PURE__ */ n.createElement("span", { className: l(h.highlight({ c: m })) }), this.dateFormatParts.map((u, c) => u.type !== "literal" ? /* @__PURE__ */ n.createElement(
+      w.toLanguageString(L, T[L])
+    )), /* @__PURE__ */ n.createElement("div", { className: h(u.listContainer({ c: m })), onKeyDown: this.handleKeyDown }, /* @__PURE__ */ n.createElement("span", { className: h(u.highlight({ c: m })) }), this.dateFormatParts.map((l, c) => l.type !== "literal" ? /* @__PURE__ */ n.createElement(
       "div",
       {
         key: c,
-        className: l(
-          h.listWrapper({
+        className: h(
+          u.listWrapper({
             c: m,
             focused: c === this.state.activeListIndex
           })
         ),
-        role: "presentation",
         tabIndex: -1
       },
       /* @__PURE__ */ n.createElement(
         "span",
         {
-          className: l(h.title({ c: m })),
+          className: h(u.title({ c: m })),
           onMouseDown: (p) => {
             p.preventDefault();
           }
         },
-        this.intl.dateFieldName(u)
+        this.intl.dateFieldName(l)
       ),
       /* @__PURE__ */ n.createElement(
-        P,
+        M,
         {
           min: this.min,
           max: this.max,
           boundRange: this.boundRange,
-          part: u,
-          step: u.type ? this.steps[u.type] : 1,
+          part: l,
+          step: l.type ? this.steps[l.type] : 1,
           smoothScroll: s,
           ref: (p) => {
             p && this.timeLists.push(p);
@@ -178,19 +167,19 @@ const v = new RegExp(
           onBlur: this.handleListBlur,
           onChange: this.handleChange,
           value: this.value,
-          disabled: r,
-          show: D,
-          mobileMode: w,
+          disabled: o,
+          show: B,
+          mobileMode: a,
           unstyled: g
         }
       )
-    ) : /* @__PURE__ */ n.createElement("div", { key: c, className: l(h.separator({ c: m })) }, u.pattern))));
+    ) : /* @__PURE__ */ n.createElement("div", { key: c, className: h(u.separator({ c: m })) }, l.pattern))));
   }
   nextTick(i) {
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
   }
   hasActiveButton() {
-    const i = R(document);
+    const i = F(document);
     return this._nowButton && i === this._nowButton.element;
   }
   hasSteps() {
@@ -198,7 +187,7 @@ const v = new RegExp(
     return i.length !== i.reduce((s, e) => s + this.steps[e], 0);
   }
 };
-a.propTypes = {
+r.propTypes = {
   cancelButton: t.bool,
   disabled: t.bool,
   format: t.oneOfType([
@@ -233,20 +222,20 @@ a.propTypes = {
   tabIndex: t.number,
   value: t.instanceOf(Date),
   show: t.bool
-}, a.defaultProps = {
+}, r.defaultProps = {
   value: null,
   disabled: !1,
   nowButton: !0,
   cancelButton: !0,
   format: "hh:mm a",
-  min: K,
-  max: A,
+  min: C,
+  max: P,
   steps: {},
   boundRange: !1
 };
-let f = a;
-C(f);
-M(f);
+let f = r;
+k(f);
+S(f);
 export {
   f as TimePart
 };

package/timepicker/TimePicker.d.ts

@@ -135,6 +135,13 @@ export interface TimePickerProps extends TimePickerSettings, FormComponentProps,
      * Applicable only when `adaptive` is set to `true`.
      */
     adaptiveSubtitle?: string;
+    /**
+     * Controls the Popup animation.
+     * Set to `false` to disable animation.
+     *
+     * @default true
+     */
+    animation?: boolean;
     /**
      * @hidden
      */

package/timepicker/TimePicker.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 X=require("react"),e=require("prop-types"),Z=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),P=require("@progress/kendo-react-intl"),T=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),p=require("../utils.js"),g=require("./utils.js"),Y=require("../hooks/usePickerFloatingLabel.js"),ee=require("@progress/kendo-react-buttons"),te=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout");function se(c){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>c[t]})}}return s.default=c,Object.freeze(s)}const a=se(X),r=class r extends a.Component{constructor(s){super(s),this._element=null,this._dateInput=a.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.showLicenseWatermark=!1,this.handleKendoPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteTime(t);return}const i=t!=null?String(t):"";if(!i)return;const o=new Date(i);isNaN(o.getTime())||this.applyKendoPasteTime(o)},this.applyKendoPasteTime=t=>{const i=this.normalizeTime(t);if(!g.isInRange(i,this.min,this.max))return;const o=new Event("change",{bubbles:!0}),h={target:this._element,currentTarget:this._element,nativeEvent:o};this.handleValueChange({syntheticEvent:h,nativeEvent:o,value:i})},this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:i,nowButton:o,disabled:h,format:d,steps:u,unstyled:f}=this.props;return a.createElement(Q.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:i,disabled:h,nowButton:o,format:d,min:this.min,max:this.max,steps:u,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:f})},this.renderPopup=()=>{const{popupClass:t,...i}=this.popupSettings,{unstyled:o}=this.props,h=o&&o.uTimePicker,d=n.classNames(t),u={popupClass:n.uTimePicker.popup({c:h}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...i};return this.props.popup?a.createElement(this.props.popup,{...u},this.renderTimeSelector()):a.createElement(Z.Popup,{...u},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return a.createElement(te.AdaptiveMode,{...i},a.createElement(ie.ActionSheetContent,null,this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.handleInputValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange({...t,value:i})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:i}=this.props,o=this.valueDuringOnChange!==void 0?this.value:this.state.candidate||this.value;i&&i.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setState({candidate:null}),this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.mobileMode||(this.shouldFocusDateInput=!0),this.setShow(!1)},this.handleClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},this.showLicenseWatermark=!n.validatePackage(T.packageMetadata,{component:"TimePicker"}),this.licenseMessage=n.getLicenseMessage(T.packageMetadata),this.state={value:this.props.defaultValue||r.defaultProps.defaultValue,show:this.props.defaultShow||r.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?y.cloneDate(s):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get validity(){const s=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),i=this.normalizeTime(this.max),o=g.isInRange(s,t,i),h=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,u=this.props.valid!==void 0?this.props.valid:d;return{customError:h,rangeOverflow:g.isBiggerThanMax(s,i),rangeUnderflow:g.isSmallerThanMin(s,t),valid:u,valueMissing:this.value===null}}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:r.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||r.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:r.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:r.defaultProps.max}get dateInputComp(){return this.props.dateInput||r.defaultProps.dateInput}get localizationService(){return P.provideLocalizationService(this)}componentDidMount(){var t;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const s=this.props.name||this.props.id;this.KendoPasteSubscription=n.subscribeToKendoPaste(this._element,{fieldName:s,onValueChange:i=>{this.handleKendoPasteValue(i)}})}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow&&this._timeSelector.focusActiveList(),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._timeSelector&&this._timeSelector.focusActiveList()},300),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s,t;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:s=r.defaultProps.size,rounded:t=r.defaultProps.rounded,fillMode:i=r.defaultProps.fillMode,disabled:o,tabIndex:h,title:d,id:u,className:f,format:I,formatPlaceholder:D,width:k,name:O,steps:z,validationMessage:x,required:R,validityStyles:q,ariaLabelledBy:E,ariaDescribedBy:L,unstyled:v,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:A}=this.props,b=v&&v.uTimePicker,w=!this.validityStyles||this.validity.valid,_={disabled:o,format:I,formatPlaceholder:D,id:u,ariaLabelledBy:E,ariaDescribedBy:L,ariaLabel:this.props.ariaLabel,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:R,steps:z,tabIndex:this.show?-1:h,title:d,valid:this.validity.valid,validationMessage:x,validityStyles:q,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:A},j=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),W=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),S=a.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:U,onBlur:H})=>a.createElement(a.Fragment,null,a.createElement("span",{ref:G=>{this._element=G},className:n.classNames(n.uTimePicker.wrapper({c:b,size:s,rounded:t,fillMode:i,invalid:!w,required:this.required,disabled:o}),{"k-focus":this.state.focused},f),onKeyDown:this.handleKeyDown,style:{width:k},onFocus:this.mobileMode?this.handleClick:U,onBlur:H,onClick:this.mobileMode?this.handleClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,..._}),a.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:$.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:W,className:n.classNames(n.uTimePicker.inputButton({c:b})),fillMode:i,"aria-label":j}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(n.WatermarkOverlay,{message:this.licenseMessage})));return this.props.label?a.createElement(Y.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:u,editorValid:w,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}normalizeTime(s){return p.setTime(p.MIDNIGHT_DATE,s)}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?p.setTime(this.value,s):s}calculateMedia(s){for(const t of s)this.setState({windowWidth:t.target.clientWidth})}};r.displayName="TimePicker",r.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaLabel:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),dateInput:e.elementType,show:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0};let m=r;const C=n.createPropsContext(),M=n.withIdHOC(n.withPropsContext(C,n.withUnstyledHOC(n.withAdaptiveModeContext(m))));M.displayName="KendoReactTimePicker";P.registerForLocalization(m);exports.TimePicker=M;exports.TimePickerPropsContext=C;exports.TimePickerWithoutContext=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const X=require("react"),e=require("prop-types"),Z=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),$=require("@progress/kendo-svg-icons"),P=require("@progress/kendo-react-intl"),T=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),c=require("../utils.js"),g=require("./utils.js"),Y=require("../hooks/usePickerFloatingLabel.js"),ee=require("@progress/kendo-react-buttons"),te=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout");function se(p){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>p[t]})}}return s.default=p,Object.freeze(s)}const a=se(X),r=class r extends a.Component{constructor(s){super(s),this._element=null,this._dateInput=a.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.showLicenseWatermark=!1,this.handleKendoPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteTime(t);return}const i=t!=null?String(t):"";if(!i)return;const o=new Date(i);isNaN(o.getTime())||this.applyKendoPasteTime(o)},this.applyKendoPasteTime=t=>{const i=this.normalizeTime(t);if(!g.isInRange(i,this.min,this.max))return;const o=new Event("change",{bubbles:!0}),h={target:this._element,currentTarget:this._element,nativeEvent:o};this.handleValueChange({syntheticEvent:h,nativeEvent:o,value:i})},this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:i,nowButton:o,disabled:h,format:d,steps:u,unstyled:f}=this.props;return a.createElement(Q.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:i,disabled:h,nowButton:o,format:d,min:this.min,max:this.max,steps:u,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:f})},this.renderPopup=()=>{const{popupClass:t,...i}=this.popupSettings,{unstyled:o}=this.props,h=o&&o.uTimePicker,d=n.classNames(t),u={popupClass:n.uTimePicker.popup({c:h}),show:this.show,animate:this.props.animation===!1?!1:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...i};return this.props.popup?a.createElement(this.props.popup,{...u},this.renderTimeSelector()):a.createElement(Z.Popup,{...u},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={id:this._popupId,expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,animation:this.props.animation,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return a.createElement(te.AdaptiveMode,{...i},a.createElement(ie.ActionSheetContent,null,this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.handleInputValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange({...t,value:i})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:i}=this.props,o=this.valueDuringOnChange!==void 0?this.value:this.state.candidate||this.value;i&&i.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setState({candidate:null}),this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.mobileMode||(this.shouldFocusDateInput=!0),this.setShow(!1)},this.handleClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},this.showLicenseWatermark=!n.validatePackage(T.packageMetadata,{component:"TimePicker"}),this.licenseMessage=n.getLicenseMessage(T.packageMetadata),this.state={value:this.props.defaultValue||r.defaultProps.defaultValue,show:this.props.defaultShow||r.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?y.cloneDate(s):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get validity(){const s=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),i=this.normalizeTime(this.max),o=g.isInRange(s,t,i),h=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,u=this.props.valid!==void 0?this.props.valid:d;return{customError:h,rangeOverflow:g.isBiggerThanMax(s,i),rangeUnderflow:g.isSmallerThanMin(s,t),valid:u,valueMissing:this.value===null}}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:r.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||r.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:r.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:r.defaultProps.max}get dateInputComp(){return this.props.dateInput||r.defaultProps.dateInput}get localizationService(){return P.provideLocalizationService(this)}componentDidMount(){var t;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const s=this.props.name||this.props.id;this.KendoPasteSubscription=n.subscribeToKendoPaste(this._element,{fieldName:s,onValueChange:i=>{this.handleKendoPasteValue(i)}})}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow&&this._timeSelector.focusActiveList(),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._timeSelector&&this._timeSelector.focusActiveList()},300),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s,t;(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:s=r.defaultProps.size,rounded:t=r.defaultProps.rounded,fillMode:i=r.defaultProps.fillMode,disabled:o,tabIndex:h,title:d,id:u,className:f,format:I,formatPlaceholder:D,width:k,name:O,steps:z,validationMessage:x,required:R,validityStyles:q,ariaLabelledBy:E,ariaDescribedBy:L,unstyled:v,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:_}=this.props,b=v&&v.uTimePicker,w=!this.validityStyles||this.validity.valid,A={disabled:o,format:I,formatPlaceholder:D,id:u,ariaLabelledBy:E,ariaDescribedBy:L,ariaLabel:this.props.ariaLabel,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:R,steps:z,tabIndex:this.show?-1:h,title:d,valid:this.validity.valid,validationMessage:x,validityStyles:q,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.mobileMode?!1:this.show,enableMouseWheel:N,autoCorrectParts:B,autoSwitchParts:F,autoSwitchKeys:K,allowCaretMode:V,inputAttributes:_},j=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),W=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),S=a.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:U,onBlur:H})=>a.createElement(a.Fragment,null,a.createElement("span",{ref:G=>{this._element=G},className:n.classNames(n.uTimePicker.wrapper({c:b,size:s,rounded:t,fillMode:i,invalid:!w,required:this.required,disabled:o}),{"k-focus":this.state.focused},f),onKeyDown:this.handleKeyDown,style:{width:k},onFocus:this.mobileMode?this.handleClick:U,onBlur:H,onClick:this.mobileMode?this.handleClick:void 0},a.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,...A}),a.createElement(ee.Button,{tabIndex:-1,type:"button",disabled:o,icon:"clock",svgIcon:$.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:W,className:n.classNames(n.uTimePicker.inputButton({c:b})),fillMode:i,"aria-label":j}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&a.createElement(n.WatermarkOverlay,{message:this.licenseMessage})));return this.props.label?a.createElement(Y.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:u,editorValid:w,editorDisabled:this.props.disabled,children:S,style:{width:this.props.width}}):S}normalizeTime(s){return c.setTime(c.MIDNIGHT_DATE,s)}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?c.setTime(this.value,s):s}calculateMedia(s){for(const t of s)this.setState({windowWidth:t.target.clientWidth})}};r.displayName="TimePicker",r.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaLabel:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),dateInput:e.elementType,show:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:c.MAX_TIME,min:c.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0};let m=r;const C=n.createPropsContext(),M=n.withIdHOC(n.withPropsContext(C,n.withUnstyledHOC(n.withAdaptiveModeContext(m))));M.displayName="KendoReactTimePicker";P.registerForLocalization(m);exports.TimePicker=M;exports.TimePickerPropsContext=C;exports.TimePickerWithoutContext=m;

package/timepicker/TimePicker.mjs

@@ -9,14 +9,14 @@ import * as a from "react";
 import e from "prop-types";
 import { Popup as J } from "@progress/kendo-react-popup";
 import { cloneDate as y } from "@progress/kendo-date-math";
-import { createPropsContext as Q, classNames as m, uTimePicker as g, Keys as d, validatePackage as Y, getLicenseMessage as $, canUseDOM as T, subscribeToKendoPaste as ee, AsyncFocusBlur as te, WatermarkOverlay as ie, withIdHOC as se, withPropsContext as oe, withUnstyledHOC as ae, withAdaptiveModeContext as ne } from "@progress/kendo-react-common";
+import { createPropsContext as Q, classNames as c, uTimePicker as g, Keys as d, validatePackage as Y, getLicenseMessage as $, canUseDOM as T, subscribeToKendoPaste as ee, AsyncFocusBlur as te, WatermarkOverlay as ie, withIdHOC as se, withPropsContext as oe, withUnstyledHOC as ae, withAdaptiveModeContext as ne } from "@progress/kendo-react-common";
 import { clockIcon as re } from "@progress/kendo-svg-icons";
 import { provideLocalizationService as le, registerForLocalization as he } from "@progress/kendo-react-intl";
 import { packageMetadata as C } from "../package-metadata.mjs";
 import { timePickerSet as I, messages as u, toggleClock as f, timePickerCancel as de, toggleTimeSelector as M } from "../messages/index.mjs";
 import { DateInputInner as ue } from "../dateinput/DateInput.mjs";
 import { TimeSelector as pe } from "./TimeSelector.mjs";
-import { MIN_TIME as ce, MAX_TIME as me, setTime as P, MIDNIGHT_DATE as ge } from "../utils.mjs";
+import { MIN_TIME as me, MAX_TIME as ce, setTime as P, MIDNIGHT_DATE as ge } from "../utils.mjs";
 import { isInRange as D, isSmallerThanMin as fe, isBiggerThanMax as ve } from "./utils.mjs";
 import { PickerFloatingLabel as be } from "../hooks/usePickerFloatingLabel.mjs";
 import { Button as we } from "@progress/kendo-react-buttons";
@@ -51,7 +51,7 @@ const n = class n extends a.Component {
     }, this.focus = () => {
       this.dateInput && this.dateInput.focus();
     }, this.renderTimeSelector = () => {
-      const { smoothScroll: t, cancelButton: i, nowButton: o, disabled: r, format: h, steps: l, unstyled: c } = this.props;
+      const { smoothScroll: t, cancelButton: i, nowButton: o, disabled: r, format: h, steps: l, unstyled: m } = this.props;
       return /* @__PURE__ */ a.createElement(
         pe,
         {
@@ -71,14 +71,14 @@ const n = class n extends a.Component {
           handleTimeChange: this.mobileMode && this.handleTimeChange,
           onChange: this.handleValueChange,
           onReject: this.handleValueReject,
-          unstyled: c
+          unstyled: m
         }
       );
     }, this.renderPopup = () => {
-      const { popupClass: t, ...i } = this.popupSettings, { unstyled: o } = this.props, r = o && o.uTimePicker, h = m(t), l = {
+      const { popupClass: t, ...i } = this.popupSettings, { unstyled: o } = this.props, r = o && o.uTimePicker, h = c(t), l = {
         popupClass: g.popup({ c: r }),
         show: this.show,
-        animate: this.element !== null,
+        animate: this.props.animation === !1 ? !1 : this.element !== null,
         anchor: this.element,
         className: h,
         id: this._popupId,
@@ -95,10 +95,12 @@ const n = class n extends a.Component {
       return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...l }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(J, { ...l }, this.renderTimeSelector());
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, i = {
+        id: this._popupId,
         expand: this.show,
         onClose: this.handleBlur,
         title: this.props.adaptiveTitle || this.props.label,
         subTitle: this.props.adaptiveSubtitle,
+        animation: this.props.animation,
         windowWidth: t,
         footer: {
           cancelText: this.localizationService.toLanguageString(f, u[de]),
@@ -283,7 +285,7 @@ const n = class n extends a.Component {
       tabIndex: r,
       title: h,
       id: l,
-      className: c,
+      className: m,
       format: O,
       formatPlaceholder: z,
       width: k,
@@ -297,8 +299,8 @@ const n = class n extends a.Component {
       unstyled: v,
       enableMouseWheel: A,
       autoCorrectParts: N,
-      autoSwitchParts: K,
-      autoSwitchKeys: _,
+      autoSwitchParts: _,
+      autoSwitchKeys: K,
       allowCaretMode: q,
       inputAttributes: W
     } = this.props, b = v && v.uTimePicker, w = !this.validityStyles || this.validity.valid, U = {
@@ -324,11 +326,11 @@ const n = class n extends a.Component {
       label: void 0,
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaHasPopup: "dialog",
-      ariaExpanded: this.show,
+      ariaExpanded: this.mobileMode ? !1 : this.show,
       enableMouseWheel: A,
       autoCorrectParts: N,
-      autoSwitchParts: K,
-      autoSwitchKeys: _,
+      autoSwitchParts: _,
+      autoSwitchKeys: K,
       allowCaretMode: q,
       inputAttributes: W
     }, j = this.localizationService.toLanguageString(f, u[f]), H = this.localizationService.toLanguageString(
@@ -348,7 +350,7 @@ const n = class n extends a.Component {
           ref: (Z) => {
             this._element = Z;
           },
-          className: m(
+          className: c(
             g.wrapper({
               c: b,
               size: s,
@@ -359,7 +361,7 @@ const n = class n extends a.Component {
               disabled: o
             }),
             { "k-focus": this.state.focused },
-            c
+            m
           ),
           onKeyDown: this.handleKeyDown,
           style: { width: k },
@@ -381,12 +383,13 @@ const n = class n extends a.Component {
           {
             tabIndex: -1,
             type: "button",
+            disabled: o,
             icon: "clock",
             svgIcon: re,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
             title: H,
-            className: m(g.inputButton({ c: b })),
+            className: c(g.inputButton({ c: b })),
             fillMode: i,
             "aria-label": j
           }
@@ -506,8 +509,8 @@ n.displayName = "TimePicker", n.propTypes = {
   defaultValue: null,
   disabled: !1,
   format: "t",
-  max: me,
-  min: ce,
+  max: ce,
+  min: me,
   popupSettings: {},
   tabIndex: 0,
   steps: {},

package/timepicker/TimeSelector.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 I=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-intl"),r=require("../messages/index.js"),y=require("../utils.js"),m=require("./utils.js"),K=require("./TimePart.js"),O=require("@progress/kendo-react-buttons");function x(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>u[t]})}}return i.default=u,Object.freeze(i)}const l=x(I),c=class c extends l.Component{constructor(i){super(i),this._element=null,this._cancelButton=null,this._acceptButton=null,this.timePart=null,this.focusActiveList=()=>{this.timePart&&this.timePart.focus({preventScroll:!0})},this.handleKeyDown=t=>{const{keyCode:n}=t;switch(n){case s.Keys.enter:this.hasActiveButton()||this.handleAccept(t);return;default:return}},this.revertToNowButton=t=>{const{keyCode:n,shiftKey:o}=t;!o&&n===s.Keys.tab&&(t.preventDefault(),this.props.nowButton!==!1?this.timePart&&this.timePart.focus({preventScroll:!0},!0):this.timePart&&this.timePart.focus({preventScroll:!0}))},this.handleNowKeyDown=t=>{var p;const{keyCode:n,shiftKey:o}=t;o&&n===s.Keys.tab?(t.preventDefault(),this._acceptButton&&((p=this._acceptButton.element)==null||p.focus({preventScroll:!0}))):n===s.Keys.enter&&(t.stopPropagation(),this.handleNowClick(t))},this.handleAccept=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),this.timePart?this.timePart.value:this.current);this.setState({value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleReject=t=>{this.setState({current:this.value});const{onReject:n}=this.props;n&&n.call(void 0,t)},this.handleNowClick=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),m.getNow());this.setState({current:n,value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleChange=t=>{this.setState({current:t});const{handleTimeChange:n}=this.props;n&&n.call(void 0,{time:t})},this.dateFormatParts=this.intl.splitDateFormat(this.props.format||c.defaultProps.format),this.mergeValue=m.valueMerger(m.generateGetters(this.dateFormatParts)),this.hasActiveButton=this.hasActiveButton.bind(this),this.state={current:this.props.value||y.MIDNIGHT_DATE,value:this.props.value||c.defaultProps.value}}get element(){return this._element}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?g.cloneDate(i):null}get intl(){return f.provideIntlService(this)}get current(){return this.state.current!==null?g.cloneDate(this.state.current):null}componentWillUnmount(){clearTimeout(this.nextTickId)}render(){const{format:i,cancelButton:t,disabled:n,tabIndex:o,className:p,smoothScroll:P,min:B,max:k,boundRange:N,nowButton:T,steps:S,show:_,mobileMode:C,unstyled:h}=this.props,E=h&&h.uTimePicker,v=h&&h.uTime,D=f.provideLocalizationService(this),b=D.toLanguageString(r.timePickerCancel,r.messages[r.timePickerCancel]),w=D.toLanguageString(r.timePickerSet,r.messages[r.timePickerSet]);return l.createElement("div",{ref:a=>{this._element=a},tabIndex:n?void 0:o||0,className:s.classNames(s.uTimePicker.timeSelector({c:E,mobileMode:C,disabled:n}),p),onKeyDown:this.handleKeyDown},l.createElement(K.TimePart,{ref:a=>{this.timePart=a},value:this.current,onChange:this.handleChange,onNowClick:this.handleNowClick,format:i,smoothScroll:P,min:B,max:k,boundRange:N,disabled:n,nowButton:T,steps:S,show:_,mobileMode:C,onNowKeyDown:this.handleNowKeyDown,unstyled:h}),this.props.footer&&l.createElement("div",{className:s.classNames(s.uTime.footer({c:v}))},t&&l.createElement(O.Button,{type:"button",ref:a=>{this._cancelButton=a},className:s.classNames(s.uTime.cancel({c:v})),onClick:this.handleReject,title:b,"aria-label":b},b),l.createElement(O.Button,{type:"button",ref:a=>{this._acceptButton=a},className:s.classNames(s.uTime.accept({c:v})),themeColor:"primary",onClick:this.handleAccept,onKeyDown:this.revertToNowButton,title:w,"aria-label":w},w)))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){if(!this._acceptButton||!this._acceptButton.element)return!1;const i=s.getActiveElement(document);return this._acceptButton&&i===this._acceptButton.element||this._cancelButton&&i===this._cancelButton.element}};c.propTypes={cancelButton:e.bool,className:e.string,disabled:e.bool,format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),max:e.instanceOf(Date),min:e.instanceOf(Date),nowButton:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,value:e.instanceOf(Date),show:e.bool},c.defaultProps={value:null,disabled:!1,cancelButton:!0,format:"t",min:y.MIN_TIME,max:y.MAX_TIME,boundRange:!1,footer:!0};let d=c;f.registerForIntl(d);f.registerForLocalization(d);exports.TimeSelector=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),b=require("../utils.js"),m=require("./utils.js"),K=require("./TimePart.js"),O=require("@progress/kendo-react-buttons");function x(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>u[t]})}}return i.default=u,Object.freeze(i)}const a=x(I),c=class c extends a.Component{constructor(i){super(i),this._element=null,this._cancelButton=null,this._acceptButton=null,this.timePart=null,this.focusActiveList=()=>{this.timePart&&this.timePart.focus({preventScroll:!0})},this.handleKeyDown=t=>{const{keyCode:n}=t;switch(n){case s.Keys.enter:this.hasActiveButton()||this.handleAccept(t);return;default:return}},this.revertToNowButton=t=>{const{keyCode:n,shiftKey:o}=t;!o&&n===s.Keys.tab&&(t.preventDefault(),this.props.nowButton!==!1?this.timePart&&this.timePart.focus({preventScroll:!0},!0):this.timePart&&this.timePart.focus({preventScroll:!0}))},this.handleNowKeyDown=t=>{var p;const{keyCode:n,shiftKey:o}=t;o&&n===s.Keys.tab?(t.preventDefault(),this._acceptButton&&((p=this._acceptButton.element)==null||p.focus({preventScroll:!0}))):n===s.Keys.enter&&(t.stopPropagation(),this.handleNowClick(t))},this.handleAccept=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),this.timePart?this.timePart.value:this.current);this.setState({value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleReject=t=>{this.setState({current:this.value});const{onReject:n}=this.props;n&&n.call(void 0,t)},this.handleNowClick=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),m.getNow());this.setState({current:n,value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleChange=t=>{this.setState({current:t});const{handleTimeChange:n}=this.props;n&&n.call(void 0,{time:t})},this.dateFormatParts=this.intl.splitDateFormat(this.props.format||c.defaultProps.format),this.mergeValue=m.valueMerger(m.generateGetters(this.dateFormatParts)),this.hasActiveButton=this.hasActiveButton.bind(this),this.state={current:this.props.value||b.MIDNIGHT_DATE,value:this.props.value||c.defaultProps.value}}get element(){return this._element}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?g.cloneDate(i):null}get intl(){return f.provideIntlService(this)}get current(){return this.state.current!==null?g.cloneDate(this.state.current):null}componentWillUnmount(){clearTimeout(this.nextTickId)}render(){const{format:i,cancelButton:t,disabled:n,tabIndex:o,className:p,smoothScroll:P,min:B,max:k,boundRange:N,nowButton:T,steps:S,show:E,mobileMode:w,unstyled:h}=this.props,_=h&&h.uTimePicker,v=h&&h.uTime,y=f.provideLocalizationService(this),C=y.toLanguageString(l.timePickerCancel,l.messages[l.timePickerCancel]),D=y.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]);return a.createElement(a.Fragment,null,a.createElement("div",{ref:r=>{this._element=r},tabIndex:n?void 0:o||0,className:s.classNames(s.uTimePicker.timeSelector({c:_,mobileMode:w,disabled:n}),p),role:"group","aria-label":"Time selector",onKeyDown:this.handleKeyDown},a.createElement(K.TimePart,{ref:r=>{this.timePart=r},value:this.current,onChange:this.handleChange,onNowClick:this.handleNowClick,format:i,smoothScroll:P,min:B,max:k,boundRange:N,disabled:n,nowButton:T,steps:S,show:E,mobileMode:w,onNowKeyDown:this.handleNowKeyDown,unstyled:h})),this.props.footer&&a.createElement("div",{className:s.classNames(s.uTime.footer({c:v}))},t&&a.createElement(O.Button,{type:"button",ref:r=>{this._cancelButton=r},className:s.classNames(s.uTime.cancel({c:v})),onClick:this.handleReject,title:C},C),a.createElement(O.Button,{type:"button",ref:r=>{this._acceptButton=r},className:s.classNames(s.uTime.accept({c:v})),themeColor:"primary",onClick:this.handleAccept,onKeyDown:this.revertToNowButton,title:D},D)))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){if(!this._acceptButton||!this._acceptButton.element)return!1;const i=s.getActiveElement(document);return this._acceptButton&&i===this._acceptButton.element||this._cancelButton&&i===this._cancelButton.element}};c.propTypes={cancelButton:e.bool,className:e.string,disabled:e.bool,format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),max:e.instanceOf(Date),min:e.instanceOf(Date),nowButton:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,value:e.instanceOf(Date),show:e.bool},c.defaultProps={value:null,disabled:!1,cancelButton:!0,format:"t",min:b.MIN_TIME,max:b.MAX_TIME,boundRange:!1,footer:!0};let d=c;f.registerForIntl(d);f.registerForLocalization(d);exports.TimeSelector=d;