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

package/timepicker/TimeList.mjs

@@ -7,55 +7,55 @@
  */
 "use client";
 import * as n from "react";
-import c from "prop-types";
-import { cloneDate as f } from "@progress/kendo-date-math";
-import { Keys as a, getActiveElement as x, noop as O } from "@progress/kendo-react-common";
-import { provideIntlService as b, registerForIntl as S } from "@progress/kendo-react-intl";
-import { Virtualization as T } from "../virtualization/Virtualization.mjs";
-import { TIME_PART as p } from "./models/TimePart.mjs";
-import { DayPeriodService as I } from "./services/DayPeriodService.mjs";
-import { DOMService as H } from "./services/DOMService.mjs";
-import { HoursService as E } from "./services/HoursService.mjs";
-import { MinutesService as y } from "./services/MinutesService.mjs";
-import { SecondsService as M } from "./services/SecondsService.mjs";
-import { debounce as D, MAX_TIME as w, MIDNIGHT_DATE as R } from "../utils.mjs";
-const k = 2, v = 0.05, C = 100, P = 0, g = 9, z = {
-  [a.end]: (h, o) => h[h.length - 1],
-  [a.home]: (h, o) => h[0],
-  [a.up]: (h, o) => h[o - 1],
-  [a.down]: (h, o) => h[o + 1]
-}, m = {
-  [p.dayperiod]: I,
-  [p.hour]: E,
-  [p.minute]: y,
-  [p.second]: M
+import p from "prop-types";
+import { cloneDate as O } from "@progress/kendo-date-math";
+import { Keys as l, getActiveElement as I, noop as H, classNames as m, uTime as u } from "@progress/kendo-react-common";
+import { provideIntlService as y, registerForIntl as E } from "@progress/kendo-react-intl";
+import { Virtualization as M } from "../virtualization/Virtualization.mjs";
+import { TIME_PART as f } from "./models/TimePart.mjs";
+import { DayPeriodService as D } from "./services/DayPeriodService.mjs";
+import { DOMService as w } from "./services/DOMService.mjs";
+import { HoursService as R } from "./services/HoursService.mjs";
+import { MinutesService as C } from "./services/MinutesService.mjs";
+import { SecondsService as P } from "./services/SecondsService.mjs";
+import { debounce as z, MAX_TIME as _, MIDNIGHT_DATE as A } from "../utils.mjs";
+const F = 2, T = 0.05, N = 100, k = 0, b = 9, B = {
+  [l.end]: (h, s) => h[h.length - 1],
+  [l.home]: (h, s) => h[0],
+  [l.up]: (h, s) => h[s - 1],
+  [l.down]: (h, s) => h[s + 1]
+}, g = {
+  [f.dayperiod]: D,
+  [f.hour]: R,
+  [f.minute]: C,
+  [f.second]: P
 }, r = class r extends n.Component {
-  constructor(o) {
-    super(o), this.intl = null, this._element = null, this.service = null, this.virtualization = null, this.topOffset = 0, this.bottomOffset = 0, this.itemHeight = 0, this.listHeight = 0, this.topThreshold = 0, this.bottomThreshold = 0, this.animateToIndex = !1, this.focus = (t) => {
+  constructor(s) {
+    super(s), this.intl = null, this._element = null, this.service = null, this.virtualization = null, this.topOffset = 0, this.bottomOffset = 0, this.itemHeight = 0, this.listHeight = 0, this.topThreshold = 0, this.bottomThreshold = 0, this.animateToIndex = !1, this.focus = (t) => {
       Promise.resolve().then(() => {
         this.element && this.element.focus(t);
       });
     }, this.itemOffset = (t) => {
       if (!this.virtualization || !this.service)
         return -1;
-      const e = this.service.selectedIndex(this.props.value), i = this.virtualization.activeIndex(), s = this.virtualization.itemOffset(i), l = Math.abs(Math.ceil(t) - s);
-      if (e === i && l < k)
-        return s;
-      const u = e > i;
-      return u && l >= this.bottomThreshold || !u && l > this.topThreshold ? this.virtualization.itemOffset(i + 1) : s;
+      const e = this.service.selectedIndex(this.props.value), i = this.virtualization.activeIndex(), o = this.virtualization.itemOffset(i), a = Math.abs(Math.ceil(t) - o);
+      if (e === i && a < F)
+        return o;
+      const d = e > i;
+      return d && a >= this.bottomThreshold || !d && a > this.topThreshold ? this.virtualization.itemOffset(i + 1) : o;
     }, this.calculateHeights = () => {
-      this.dom.didCalculate && (this.itemHeight = this.dom.itemHeight, this.listHeight = this.dom.timeListHeight, this.topOffset = (this.listHeight - this.itemHeight) / 2, this.bottomOffset = this.listHeight - this.itemHeight, this.props.mobileMode && (this.topOffset += g, this.bottomOffset += g * 2), this.topThreshold = this.itemHeight * v, this.bottomThreshold = this.itemHeight * (1 - v));
+      this.dom.didCalculate && (this.itemHeight = this.dom.itemHeight, this.listHeight = this.dom.timeListHeight, this.topOffset = (this.listHeight - this.itemHeight) / 2, this.bottomOffset = this.listHeight - this.itemHeight, this.props.mobileMode && (this.topOffset += b, this.bottomOffset += b * 2), this.topThreshold = this.itemHeight * T, this.bottomThreshold = this.itemHeight * (1 - T));
     }, this.configureServices = ({ min: t, max: e, value: i } = this.props) => {
       if (this.service) {
-        const [s, l] = this.service.limitRange(t || this.min, e || this.max, i || this.props.value);
-        this.service.configure(this.serviceSettings({ min: s, max: l }));
+        const [o, a] = this.service.limitRange(t || this.min, e || this.max, i || this.props.value);
+        this.service.configure(this.serviceSettings({ min: o, max: a }));
       }
     }, this.serviceSettings = (t) => {
       const e = {
         boundRange: this.props.boundRange || r.defaultProps.boundRange,
         insertUndividedMax: !1,
-        min: f(this.min),
-        max: f(this.max),
+        min: O(this.min),
+        max: O(this.max),
         part: this.props.part,
         step: this.step
       }, i = Object.assign({}, e, t);
@@ -63,8 +63,8 @@ const k = 2, v = 0.05, C = 100, P = 0, g = 9, z = {
     }, this.handleScrollAction = ({ target: t, animationInProgress: e }) => {
       if (!(!this.virtualization || !this.service) && t && !e) {
         this.animateToIndex = !1;
-        const i = this.virtualization.itemIndex(this.itemOffset(t.scrollTop)), s = this.service.data(this.props.value)[i];
-        this.handleChange(s);
+        const i = this.virtualization.itemIndex(this.itemOffset(t.scrollTop)), o = this.service.data(this.props.value)[i];
+        this.handleChange(o);
       }
     }, this.handleFocus = (t) => {
       const { onFocus: e } = this.props;
@@ -75,19 +75,19 @@ const k = 2, v = 0.05, C = 100, P = 0, g = 9, z = {
     }, this.handleMouseOver = () => {
       if (!this._element)
         return;
-      const t = x(document);
+      const t = I(document);
       document && t !== this._element && this.props.show && this._element.focus({ preventScroll: !0 });
     }, this.handleKeyDown = (t) => {
       if (!this.service)
         return;
       const { keyCode: e } = t;
-      (e === a.down || e === a.up || e === a.end || e === a.home) && t.preventDefault();
-      const s = (z[t.keyCode] || O)(
+      (e === l.down || e === l.up || e === l.end || e === l.home) && t.preventDefault();
+      const o = (B[t.keyCode] || H)(
         this.service.data(this.props.value),
         this.service.selectedIndex(this.props.value)
       );
-      s && this.handleChange(s);
-    }, this.handleChange = D((t) => {
+      o && this.handleChange(o);
+    }, this.handleChange = z((t) => {
       if (!this.service)
         return;
       const e = this.service.apply(this.props.value, t.value);
@@ -95,7 +95,7 @@ const k = 2, v = 0.05, C = 100, P = 0, g = 9, z = {
         return;
       const { onChange: i } = this.props;
       i && i.call(void 0, e);
-    }, C), this.dom = new H();
+    }, N), this.dom = new w();
   }
   get element() {
     return this._element;
@@ -126,34 +126,36 @@ const k = 2, v = 0.05, C = 100, P = 0, g = 9, z = {
   componentDidUpdate() {
     if (!this.virtualization || !this.service)
       return;
-    const o = this.service.selectedIndex(this.props.value);
-    this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](o), this.animateToIndex = !0;
+    const s = this.service.selectedIndex(this.props.value);
+    this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](s), this.animateToIndex = !0;
   }
   /**
    * @hidden
    */
   render() {
-    if (!this.props.part.type || !m[this.props.part.type])
+    const { part: s, value: t, unstyled: e } = this.props;
+    if (!s.type || !g[s.type])
       return;
-    this.calculateHeights(), this.intl = b(this), this.service = new m[this.props.part.type](this.intl), this.configureServices();
-    const o = this.service.data(this.props.value), t = "translateY(" + this.topOffset + "px)", e = this.service.total(this.props.value), i = /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+    const i = e && e.uTime;
+    this.calculateHeights(), this.intl = y(this), this.service = new g[s.type](this.intl), this.configureServices();
+    const o = this.service.data(t), a = "translateY(" + this.topOffset + "px)", d = this.service.total(t), v = /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
       "ul",
       {
-        style: { transform: t, msTransform: t },
-        className: "k-reset"
+        style: { transform: a, msTransform: a },
+        className: m(u.ul({ c: i }))
       },
-      o.map((s, l) => /* @__PURE__ */ n.createElement("li", { key: l, className: "k-item", onClick: () => {
-        this.handleChange(s);
-      } }, /* @__PURE__ */ n.createElement("span", null, s.text)))
-    ), /* @__PURE__ */ n.createElement("div", { className: "k-scrollable-placeholder" }));
+      o.map((c, S) => /* @__PURE__ */ n.createElement("li", { key: S, className: m(u.li({ c: i })), onClick: () => {
+        this.handleChange(c);
+      } }, /* @__PURE__ */ n.createElement("span", null, c.text)))
+    ), /* @__PURE__ */ n.createElement("div", { className: m(u.scrollablePlaceholder({ c: i })) }));
     return /* @__PURE__ */ n.createElement(
       "div",
       {
-        className: "k-time-list",
+        className: m(u.list({ c: i })),
         id: String(this.props.id || ""),
         tabIndex: this.props.disabled ? -1 : 0,
-        ref: (s) => {
-          this._element = s;
+        ref: (c) => {
+          this._element = c;
         },
         onKeyDown: this.handleKeyDown,
         onFocus: this.handleFocus,
@@ -161,43 +163,43 @@ const k = 2, v = 0.05, C = 100, P = 0, g = 9, z = {
         onMouseOver: this.handleMouseOver
       },
       this.dom.didCalculate ? /* @__PURE__ */ n.createElement(
-        T,
+        M,
         {
           bottomOffset: this.bottomOffset,
-          children: i,
-          className: "k-time-container",
+          children: v,
+          className: m(u.container({ c: i })),
           itemHeight: this.itemHeight,
           maxScrollDifference: this.listHeight,
           onScrollAction: this.handleScrollAction,
-          ref: (s) => {
-            this.virtualization = s;
+          ref: (c) => {
+            this.virtualization = c;
           },
           role: "presentation",
-          skip: P,
+          skip: k,
           tabIndex: -1,
-          take: e,
+          take: d,
           topOffset: this.topOffset,
-          total: e
+          total: d
         }
-      ) : /* @__PURE__ */ n.createElement("div", { className: "k-time-container k-content k-scrollable" }, i)
+      ) : /* @__PURE__ */ n.createElement("div", { className: m(u.container({ c: i, content: !0, scrollable: !0 })) }, v)
     );
   }
 };
 r.propTypes = {
-  id: c.number,
-  max: c.instanceOf(Date),
-  min: c.instanceOf(Date),
-  part: function(o, t, e) {
-    const i = o[t];
-    if (!i || !m[i.type])
+  id: p.number,
+  max: p.instanceOf(Date),
+  min: p.instanceOf(Date),
+  part: function(s, t, e) {
+    const i = s[t];
+    if (!i || !g[i.type])
       throw new Error(`
                     Invalid prop '${t}' supplied to ${e}.
                     Supported part types are hour|minute|second|dayperiod.
                 `);
     return null;
   },
-  step: function(o, t, e) {
-    const i = o[t];
+  step: function(s, t, e) {
+    const i = s[t];
     if (i !== void 0 && i <= 0)
       throw new Error(`
                     Invalid prop '${t}' supplied to ${e}.
@@ -205,18 +207,18 @@ r.propTypes = {
                 `);
     return null;
   },
-  value: c.instanceOf(Date),
-  smoothScroll: c.bool,
-  show: c.bool
+  value: p.instanceOf(Date),
+  smoothScroll: p.bool,
+  show: p.bool
 }, r.defaultProps = {
   boundRange: !1,
-  max: w,
-  min: R,
+  max: _,
+  min: A,
   step: 1,
   smoothScroll: !0
 };
-let d = r;
-S(d);
+let x = r;
+E(x);
 export {
-  d as TimeList
+  x as TimeList
 };

package/timepicker/TimePart.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react"),e=require("prop-types"),R=require("@progress/kendo-date-math"),p=require("@progress/kendo-react-common"),v=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),O=require("./TimeList.js"),w=require("../utils.js"),g=require("./models/TimePart.js"),u=require("./utils.js"),B=require("@progress/kendo-react-buttons");function D(c){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const s in c)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(c,s);Object.defineProperty(n,s,t.get?t:{enumerable:!0,get:()=>c[s]})}}return n.default=c,Object.freeze(n)}const i=D(x),b=new RegExp(`${g.TIME_PART.hour}|${g.TIME_PART.minute}|${g.TIME_PART.second}|${g.TIME_PART.dayperiod}|literal`),a=class a extends i.Component{constructor(n){super(n),this._element=null,this._nowButton=null,this.dateFormatParts=[],this.timeLists=[],this.focus=(s,t)=>{Promise.resolve().then(()=>{t&&this._nowButton&&this._nowButton.element&&this._nowButton.element.focus();const o=this.timeLists[0];!t&&this.state.activeListIndex===-1&&!this.hasActiveButton()&&o&&o.element&&o.focus(s)})},this.timeFormatReducer=(s,t)=>s+t.pattern,this.timeFormatFilter=(s,t,o)=>{const r=t>=1&&o[t-1];return r&&r&&s.type==="literal"?b.test(r.type||""):b.test(s.type||"")},this.focusList=s=>{this.timeLists.length&&this.timeLists.reduce(this.listReducer,[]).map(t=>s===1?t.next:t.prev).map(t=>t&&t.element&&t.element.focus({preventScroll:!0}))},this.listReducer=(s,t,o,r)=>s.length||t.props.id!==this.state.activeListIndex?s:[{next:r[o+1]||t,prev:r[o-1]||t}],this.showNowButton=()=>!this.hasSteps()&&this.props.nowButton&&u.isInTimeRange(u.getNow(),this.min,this.max),this.handleKeyDown=s=>{const{keyCode:t}=s;switch(t){case p.Keys.left:s.preventDefault(),this.focusList(0);return;case p.Keys.right:s.preventDefault(),this.focusList(1);return;default:return}},this.handleListBlur=()=>{this.nextTick(()=>{this.setState({activeListIndex:-1})})},this.handleListFocus=s=>{clearTimeout(this.nextTickId),this.setState({activeListIndex:s})},this.handleChange=s=>{const{onChange:t}=this.props;t&&t.call(void 0,s)},this.snapTime=u.snapTime(u.generateSnappers(this.props.steps,this.props.min||a.defaultProps.min)),this.state={activeListIndex:-1},this.hasActiveButton=this.hasActiveButton.bind(this)}get element(){return this._element}get value(){return u.timeInRange(this.snapTime(R.cloneDate(this.props.value||w.MIDNIGHT_DATE)),this.min,this.max)}get intl(){return v.provideIntlService(this)}get min(){return this.snapTime(this.props.min||a.defaultProps.min)}get max(){return this.snapTime(this.props.max||a.defaultProps.max)}get steps(){return this.props.steps||a.defaultProps.steps}get boundRange(){return this.props.boundRange!==void 0?this.props.boundRange:a.defaultProps.boundRange}componentWillUnmount(){clearTimeout(this.nextTickId)}componentDidMount(){const{onMount:n}=this.props;n&&n.call(void 0,this.value)}render(){const{format:n,smoothScroll:s,onNowClick:t,className:o,disabled:r,mobileMode:T,show:I,onNowKeyDown:L}=this.props;this.snapTime=u.snapTime(u.generateSnappers(this.steps,this.min)),this.dateFormatParts=this.intl.splitDateFormat(n||a.defaultProps.format).filter(this.timeFormatFilter);const N=p.classNames({"k-disabled":r,"k-time-part":T},o);this.timeLists=[];const y=v.provideLocalizationService(this),k=y.toLanguageString(m.selectNow,m.messages[m.selectNow]);return i.createElement("div",{className:N},i.createElement("div",{className:"k-time-header"},i.createElement("span",{className:"k-title"},this.intl.formatDate(this.value,this.dateFormatParts.reduce(this.timeFormatReducer,""))),this.showNowButton()&&i.createElement(B.Button,{type:"button",ref:l=>{this._nowButton=l},className:"k-time-now",fillMode:"flat",themeColor:"base",title:k,onKeyDown:L,"aria-label":k,onClick:t,tabIndex:r?-1:0},y.toLanguageString(m.now,m.messages[m.now]))),i.createElement("div",{className:"k-time-list-container",onKeyDown:this.handleKeyDown},i.createElement("span",{className:"k-time-highlight"}),this.dateFormatParts.map((l,h)=>l.type!=="literal"?i.createElement("div",{key:h,className:p.classNames("k-time-list-wrapper",{"k-focus":h===this.state.activeListIndex}),role:"presentation",tabIndex:-1},i.createElement("span",{className:"k-title",onMouseDown:f=>{f.preventDefault()}},this.intl.dateFieldName(l)),i.createElement(O.TimeList,{min:this.min,max:this.max,boundRange:this.boundRange,part:l,step:l.type?this.steps[l.type]:1,smoothScroll:s,ref:f=>{f&&this.timeLists.push(f)},id:h,onFocus:()=>{this.handleListFocus(h)},onBlur:this.handleListBlur,onChange:this.handleChange,value:this.value,disabled:r,show:I,mobileMode:T})):i.createElement("div",{key:h,className:"k-time-separator"},l.pattern))))}nextTick(n){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>n())}hasActiveButton(){const n=p.getActiveElement(document);return this._nowButton&&n===this._nowButton.element}hasSteps(){const n=Object.keys(this.steps);return n.length!==n.reduce((s,t)=>s+this.steps[t],0)}};a.propTypes={cancelButton:e.bool,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},a.defaultProps={value:null,disabled:!1,nowButton:!0,cancelButton:!0,format:"hh:mm a",min:w.MIN_TIME,max:w.MAX_TIME,steps:{},boundRange:!1};let d=a;v.registerForIntl(d);v.registerForLocalization(d);exports.TimePart=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),e=require("prop-types"),D=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),v=require("@progress/kendo-react-intl"),h=require("../messages/index.js"),E=require("./TimeList.js"),b=require("../utils.js"),T=require("./models/TimePart.js"),m=require("./utils.js"),k=require("@progress/kendo-react-buttons");function P(p){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(i,s,t.get?t:{enumerable:!0,get:()=>p[s]})}}return i.default=p,Object.freeze(i)}const o=P(B),y=new RegExp(`${T.TIME_PART.hour}|${T.TIME_PART.minute}|${T.TIME_PART.second}|${T.TIME_PART.dayperiod}|literal`),l=class l extends o.Component{constructor(i){super(i),this._element=null,this._nowButton=null,this.dateFormatParts=[],this.timeLists=[],this.focus=(s,t)=>{Promise.resolve().then(()=>{t&&this._nowButton&&this._nowButton.element&&this._nowButton.element.focus();const a=this.timeLists[0];!t&&this.state.activeListIndex===-1&&!this.hasActiveButton()&&a&&a.element&&a.focus(s)})},this.timeFormatReducer=(s,t)=>s+t.pattern,this.timeFormatFilter=(s,t,a)=>{const r=t>=1&&a[t-1];return r&&r&&s.type==="literal"?y.test(r.type||""):y.test(s.type||"")},this.focusList=s=>{this.timeLists.length&&this.timeLists.reduce(this.listReducer,[]).map(t=>s===1?t.next:t.prev).map(t=>t&&t.element&&t.element.focus({preventScroll:!0}))},this.listReducer=(s,t,a,r)=>s.length||t.props.id!==this.state.activeListIndex?s:[{next:r[a+1]||t,prev:r[a-1]||t}],this.showNowButton=()=>!this.hasSteps()&&this.props.nowButton&&m.isInTimeRange(m.getNow(),this.min,this.max),this.handleKeyDown=s=>{const{keyCode:t}=s;switch(t){case n.Keys.left:s.preventDefault(),this.focusList(0);return;case n.Keys.right:s.preventDefault(),this.focusList(1);return;default:return}},this.handleListBlur=()=>{this.nextTick(()=>{this.setState({activeListIndex:-1})})},this.handleListFocus=s=>{clearTimeout(this.nextTickId),this.setState({activeListIndex:s})},this.handleChange=s=>{const{onChange:t}=this.props;t&&t.call(void 0,s)},this.snapTime=m.snapTime(m.generateSnappers(this.props.steps,this.props.min||l.defaultProps.min)),this.state={activeListIndex:-1},this.hasActiveButton=this.hasActiveButton.bind(this)}get element(){return this._element}get value(){return m.timeInRange(this.snapTime(D.cloneDate(this.props.value||b.MIDNIGHT_DATE)),this.min,this.max)}get intl(){return v.provideIntlService(this)}get min(){return this.snapTime(this.props.min||l.defaultProps.min)}get max(){return this.snapTime(this.props.max||l.defaultProps.max)}get steps(){return this.props.steps||l.defaultProps.steps}get boundRange(){return this.props.boundRange!==void 0?this.props.boundRange:l.defaultProps.boundRange}componentWillUnmount(){clearTimeout(this.nextTickId)}componentDidMount(){const{onMount:i}=this.props;i&&i.call(void 0,this.value)}render(){const{format:i,smoothScroll:s,onNowClick:t,className:a,disabled:r,mobileMode:N,show:x,onNowKeyDown:R,unstyled:w}=this.props,u=w&&w.uTime;this.snapTime=m.snapTime(m.generateSnappers(this.steps,this.min)),this.dateFormatParts=this.intl.splitDateFormat(i||l.defaultProps.format).filter(this.timeFormatFilter);const O=n.classNames(n.uTime.part({c:u,mobileMode:N,disabled:r}),a);this.timeLists=[];const I=v.provideLocalizationService(this),L=I.toLanguageString(h.selectNow,h.messages[h.selectNow]);return o.createElement("div",{className:O},o.createElement("div",{className:n.classNames(n.uTime.header({c:u}))},o.createElement("span",{className:n.classNames(n.uTime.title({c:u}))},this.intl.formatDate(this.value,this.dateFormatParts.reduce(this.timeFormatReducer,""))),this.showNowButton()&&o.createElement(k.Button,{type:"button",ref:c=>{this._nowButton=c},className:n.classNames(n.uTime.now({c:u})),fillMode:"flat",themeColor:"base",title:L,onKeyDown:R,"aria-label":L,onClick:t,tabIndex:r?-1:0},I.toLanguageString(h.now,h.messages[h.now]))),o.createElement("div",{className:n.classNames(n.uTime.listContainer({c:u})),onKeyDown:this.handleKeyDown},o.createElement("span",{className:n.classNames(n.uTime.highlight({c:u}))}),this.dateFormatParts.map((c,d)=>c.type!=="literal"?o.createElement("div",{key:d,className:n.classNames(n.uTime.listWrapper({c:u,focused:d===this.state.activeListIndex})),role:"presentation",tabIndex:-1},o.createElement("span",{className:n.classNames(n.uTime.title({c:u})),onMouseDown:g=>{g.preventDefault()}},this.intl.dateFieldName(c)),o.createElement(E.TimeList,{min:this.min,max:this.max,boundRange:this.boundRange,part:c,step:c.type?this.steps[c.type]:1,smoothScroll:s,ref:g=>{g&&this.timeLists.push(g)},id:d,onFocus:()=>{this.handleListFocus(d)},onBlur:this.handleListBlur,onChange:this.handleChange,value:this.value,disabled:r,show:x,mobileMode:N,unstyled:w})):o.createElement("div",{key:d,className:n.classNames(n.uTime.separator({c:u}))},c.pattern))))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){const i=n.getActiveElement(document);return this._nowButton&&i===this._nowButton.element}hasSteps(){const i=Object.keys(this.steps);return i.length!==i.reduce((s,t)=>s+this.steps[t],0)}};l.propTypes={cancelButton:e.bool,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},l.defaultProps={value:null,disabled:!1,nowButton:!0,cancelButton:!0,format:"hh:mm a",min:b.MIN_TIME,max:b.MAX_TIME,steps:{},boundRange:!1};let f=l;v.registerForIntl(f);v.registerForLocalization(f);exports.TimePart=f;

package/timepicker/TimePart.mjs

@@ -8,16 +8,16 @@
 "use client";
 import * as n from "react";
 import t from "prop-types";
-import { cloneDate as B } from "@progress/kendo-date-math";
-import { Keys as v, classNames as w, getActiveElement as D } from "@progress/kendo-react-common";
-import { provideIntlService as E, provideLocalizationService as F, registerForIntl as O, registerForLocalization as R } from "@progress/kendo-react-intl";
-import { selectNow as b, messages as k, now as y } from "../messages/index.mjs";
-import { TimeList as S } from "./TimeList.mjs";
-import { MIN_TIME as M, MAX_TIME as P, MIDNIGHT_DATE as C } from "../utils.mjs";
-import { TIME_PART as u } from "./models/TimePart.mjs";
-import { isInTimeRange as A, getNow as K, snapTime as L, generateSnappers as x, timeInRange as _ } from "./utils.mjs";
-import { Button as $ } from "@progress/kendo-react-buttons";
-const p = new RegExp(`${u.hour}|${u.minute}|${u.second}|${u.dayperiod}|literal`), a = class a extends n.Component {
+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 { MIN_TIME as A, MAX_TIME as K, MIDNIGHT_DATE as _ } 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";
+const v = new RegExp(`${d.hour}|${d.minute}|${d.second}|${d.dayperiod}|literal`), a = class a 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,22 +27,22 @@ const p = new RegExp(`${u.hour}|${u.minute}|${u.second}|${u.dayperiod}|literal`)
       });
     }, 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" ? p.test(r.type || "") : p.test(s.type || "");
+      return r && r && s.type === "literal" ? v.test(r.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 : [{
       next: r[o + 1] || e,
       prev: r[o - 1] || e
-    }], this.showNowButton = () => !this.hasSteps() && this.props.nowButton && A(K(), this.min, this.max), this.handleKeyDown = (s) => {
+    }], this.showNowButton = () => !this.hasSteps() && this.props.nowButton && $(z(), this.min, this.max), this.handleKeyDown = (s) => {
       const { keyCode: e } = s;
       switch (e) {
-        case v.left:
+        case T.left:
           s.preventDefault(), this.focusList(
             0
             /* Left */
           );
           return;
-        case v.right:
+        case T.right:
           s.preventDefault(), this.focusList(
             1
             /* Right */
@@ -62,8 +62,8 @@ const p = new RegExp(`${u.hour}|${u.minute}|${u.second}|${u.dayperiod}|literal`)
     }, this.handleChange = (s) => {
       const { onChange: e } = this.props;
       e && e.call(void 0, s);
-    }, this.snapTime = L(
-      x(this.props.steps, this.props.min || a.defaultProps.min)
+    }, this.snapTime = N(
+      B(this.props.steps, this.props.min || a.defaultProps.min)
     ), this.state = {
       activeListIndex: -1
     }, this.hasActiveButton = this.hasActiveButton.bind(this);
@@ -75,14 +75,14 @@ const p = new RegExp(`${u.hour}|${u.minute}|${u.second}|${u.dayperiod}|literal`)
     return this._element;
   }
   get value() {
-    return _(
-      this.snapTime(B(this.props.value || C)),
+    return W(
+      this.snapTime(O(this.props.value || _)),
       this.min,
       this.max
     );
   }
   get intl() {
-    return E(this);
+    return k(this);
   }
   get min() {
     return this.snapTime(this.props.min || a.defaultProps.min);
@@ -116,88 +116,94 @@ const p = new RegExp(`${u.hour}|${u.minute}|${u.second}|${u.dayperiod}|literal`)
       onNowClick: e,
       className: o,
       disabled: r,
-      mobileMode: d,
-      show: I,
-      onNowKeyDown: T
-    } = this.props;
-    this.snapTime = L(x(this.steps, this.min)), this.dateFormatParts = this.intl.splitDateFormat(i || a.defaultProps.format).filter(this.timeFormatFilter);
-    const N = w(
-      {
-        "k-disabled": r,
-        "k-time-part": d
-      },
+      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 f = F(this), g = f.toLanguageString(b, k[b]);
-    return /* @__PURE__ */ n.createElement("div", { className: N }, /* @__PURE__ */ n.createElement("div", { className: "k-time-header" }, /* @__PURE__ */ n.createElement("span", { className: "k-title" }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ""))), this.showNowButton() && /* @__PURE__ */ n.createElement(
-      $,
+    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,
       {
         type: "button",
-        ref: (m) => {
-          this._nowButton = m;
+        ref: (u) => {
+          this._nowButton = u;
         },
-        className: "k-time-now",
+        className: l(h.now({ c: m })),
         fillMode: "flat",
         themeColor: "base",
-        title: g,
-        onKeyDown: T,
-        "aria-label": g,
+        title: y,
+        onKeyDown: E,
+        "aria-label": y,
         onClick: e,
         tabIndex: r ? -1 : 0
       },
-      f.toLanguageString(y, k[y])
+      b.toLanguageString(I, x[I])
     )), /* @__PURE__ */ n.createElement(
       "div",
       {
-        className: "k-time-list-container",
+        className: l(h.listContainer({ c: m })),
         onKeyDown: this.handleKeyDown
       },
-      /* @__PURE__ */ n.createElement("span", { className: "k-time-highlight" }),
-      this.dateFormatParts.map((m, l) => m.type !== "literal" ? /* @__PURE__ */ n.createElement(
+      /* @__PURE__ */ n.createElement("span", { className: l(h.highlight({ c: m })) }),
+      this.dateFormatParts.map((u, c) => u.type !== "literal" ? /* @__PURE__ */ n.createElement(
         "div",
         {
-          key: l,
-          className: w("k-time-list-wrapper", {
-            "k-focus": l === this.state.activeListIndex
-          }),
+          key: c,
+          className: l(
+            h.listWrapper({
+              c: m,
+              focused: c === this.state.activeListIndex
+            })
+          ),
           role: "presentation",
           tabIndex: -1
         },
-        /* @__PURE__ */ n.createElement("span", { className: "k-title", onMouseDown: (h) => {
-          h.preventDefault();
-        } }, this.intl.dateFieldName(m)),
+        /* @__PURE__ */ n.createElement("span", { className: l(h.title({ c: m })), onMouseDown: (p) => {
+          p.preventDefault();
+        } }, this.intl.dateFieldName(u)),
         /* @__PURE__ */ n.createElement(
-          S,
+          P,
           {
             min: this.min,
             max: this.max,
             boundRange: this.boundRange,
-            part: m,
-            step: m.type ? this.steps[m.type] : 1,
+            part: u,
+            step: u.type ? this.steps[u.type] : 1,
             smoothScroll: s,
-            ref: (h) => {
-              h && this.timeLists.push(h);
+            ref: (p) => {
+              p && this.timeLists.push(p);
             },
-            id: l,
+            id: c,
             onFocus: () => {
-              this.handleListFocus(l);
+              this.handleListFocus(c);
             },
             onBlur: this.handleListBlur,
             onChange: this.handleChange,
             value: this.value,
             disabled: r,
-            show: I,
-            mobileMode: d
+            show: D,
+            mobileMode: w,
+            unstyled: g
           }
         )
       ) : /* @__PURE__ */ n.createElement(
         "div",
         {
-          key: l,
-          className: "k-time-separator"
+          key: c,
+          className: l(h.separator({ c: m }))
         },
-        m.pattern
+        u.pattern
       ))
     ));
   }
@@ -205,7 +211,7 @@ const p = new RegExp(`${u.hour}|${u.minute}|${u.second}|${u.dayperiod}|literal`)
     clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
   }
   hasActiveButton() {
-    const i = D(document);
+    const i = R(document);
     return this._nowButton && i === this._nowButton.element;
   }
   hasSteps() {
@@ -254,14 +260,14 @@ a.propTypes = {
   nowButton: !0,
   cancelButton: !0,
   format: "hh:mm a",
-  min: M,
-  max: P,
+  min: A,
+  max: K,
   steps: {},
   boundRange: !1
 };
-let c = a;
-O(c);
-R(c);
+let f = a;
+C(f);
+M(f);
 export {
-  c as TimePart
+  f as TimePart
 };

package/timepicker/TimePicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("react"),e=require("prop-types"),L=require("@progress/kendo-react-popup"),w=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),_=require("@progress/kendo-svg-icons"),b=require("@progress/kendo-react-intl"),K=require("../package-metadata.js"),l=require("../messages/index.js"),j=require("../dateinput/DateInput.js"),U=require("./TimeSelector.js"),c=require("../utils.js"),g=require("./utils.js"),$=require("../hooks/usePickerFloatingLabel.js"),H=require("@progress/kendo-react-buttons"),W=require("../common/constants.js"),G=require("../common/AdaptiveMode.js"),X=require("@progress/kendo-react-layout");function Z(d){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const t in d)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(d,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>d[t]})}}return i.default=d,Object.freeze(i)}const r=Z(A),n=class n extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:h,format:p,steps:u}=this.props;return r.createElement(U.TimeSelector,{ref:this.setTimeSelectorRef,className:this.mobileMode?"k-reset k-timeselector-lg":"",mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:h,nowButton:o,format:p,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})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,o=a.classNames(t),h={popupClass:"k-timepicker-popup k-list-container",show:this.show,animate:this.element!==null,anchor:this.element,className:o,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...s};return this.props.popup?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(L.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,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 r.createElement(G.AdaptiveMode,{...s},r.createElement(X.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:w.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0;const{onChange:s}=this.props,o=this.state.candidate||this.value;s&&s.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.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:o}=t;if(o===a.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===a.Keys.up||o===a.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===a.Keys.up,this.setShow(o===a.Keys.down))},a.validatePackage(K.packageMetadata),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.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(a.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 i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?w.cloneDate(i):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 i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),o=g.isInRange(i,t,s),h=this.props.validationMessage!==void 0,p=(!this.required||this.value!==null)&&o,u=this.props.valid!==void 0?this.props.valid:p;return{customError:h,rangeOverflow:g.isBiggerThanMax(i,s),rangeUnderflow:g.isSmallerThanMin(i,t),valid:u,valueMissing:this.value===null}}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=W.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:n.defaultProps.required}get popupSettings(){return this.props.popupSettings||n.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get dateInputComp(){return this.props.dateInput||n.defaultProps.dateInput}get localizationService(){return b.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=a.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=n.defaultProps.size,rounded:t=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,disabled:o,tabIndex:h,title:p,id:u,className:I,format:k,formatPlaceholder:M,width:T,name:C,steps:D,validationMessage:O,required:P,validityStyles:z,ariaLabelledBy:q,ariaDescribedBy:x}=this.props,f=!this.validityStyles||this.validity.valid,R={disabled:o,format:k,formatPlaceholder:M,id:u,ariaLabelledBy:q,ariaDescribedBy:x,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:C,onChange:this.handleInputValueChange,required:P,steps:D,tabIndex:this.show?-1:h,title:p,valid:this.validity.valid,validationMessage:O,validityStyles:z,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,size:null,fillMode:null,rounded:null,readonly:this.mobileMode},E=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),B=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),v=r.createElement(a.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:V,onBlur:F})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:N=>{this._element=N},className:a.classNames("k-input","k-timepicker",{[`k-input-${a.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-rounded-${a.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${s}`]:s,"k-invalid":!f,"k-required":this.required,"k-disabled":this.props.disabled},I),onKeyDown:this.handleKeyDown,style:{width:T},onFocus:V,onBlur:F,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...R}),r.createElement(H.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:_.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:B,className:"k-input-button",rounded:null,fillMode:s,"aria-label":E}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement($.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:u,editorValid:f,editorDisabled:this.props.disabled,children:v,style:{width:this.props.width}}):v}normalizeTime(i){return c.setTime(c.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?c.setTime(this.value,i):i}calculateMedia(i){for(let t of i)this.setState({windowWidth:t.target.clientWidth})}};n.displayName="TimePicker",n.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,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}),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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"])},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:c.MAX_TIME,min:c.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},required:!1,validityStyles:!0,dateInput:j.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=n;const S=a.createPropsContext(),y=a.withIdHOC(a.withPropsContext(S,m));y.displayName="KendoReactTimePicker";b.registerForLocalization(m);exports.TimePicker=y;exports.TimePickerPropsContext=S;exports.TimePickerWithoutContext=m;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),e=require("prop-types"),K=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),U=require("../package-metadata.js"),l=require("../messages/index.js"),H=require("../dateinput/DateInput.js"),W=require("./TimeSelector.js"),c=require("../utils.js"),f=require("./utils.js"),G=require("../hooks/usePickerFloatingLabel.js"),X=require("@progress/kendo-react-buttons"),Z=require("../common/constants.js"),$=require("../common/AdaptiveMode.js"),J=require("@progress/kendo-react-layout");function Q(p){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return i.default=p,Object.freeze(i)}const r=Q(_),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(W.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.uTimePicker.popup({c:u}),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"},...s};return this.props.popup?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(K.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,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 r.createElement($.AdaptiveMode,{...s},r.createElement(J.ActionSheetContent,{overflowHidden:!0},this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},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.shouldFocusDateInput=!0;const{onChange:s}=this.props,o=this.state.candidate||this.value;s&&s.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.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage(U.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.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 i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.cloneDate(i):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 i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,valueMissing:this.value===null}}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=Z.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:a.defaultProps.required}get popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:P,width:D,name:O,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,B={disabled:o,format:M,formatPlaceholder:P,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,size:null,fillMode:null,rounded:null,readonly:this.mobileMode},V=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),F=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:N,onBlur:A})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:L=>{this._element=L},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:D},onFocus:N,onBlur:A,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...B}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:j.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:F,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":V}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return c.setTime(c.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?c.setTime(this.value,i):i}calculateMedia(i){for(let t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.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,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}),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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"])},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:c.MAX_TIME,min:c.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},required:!1,validityStyles:!0,dateInput:H.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;