@progress/kendo-react-dateinputs 7.2.4-develop.3 → 7.3.0-develop.1

package/timepicker/TimePart.mjs

@@ -0,0 +1,267 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"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 y, now as k } 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 {
+  constructor(i) {
+    super(i), this._element = null, this._nowButton = null, this.dateFormatParts = [], this.timeLists = [], this.focus = (s, e) => {
+      Promise.resolve().then(() => {
+        e && this._nowButton && this._nowButton.element && this._nowButton.element.focus();
+        const o = this.timeLists[0];
+        !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" ? p.test(r.type || "") : p.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) => {
+      const { keyCode: e } = s;
+      switch (e) {
+        case v.left:
+          s.preventDefault(), this.focusList(
+            0
+            /* Left */
+          );
+          return;
+        case v.right:
+          s.preventDefault(), this.focusList(
+            1
+            /* Right */
+          );
+          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: e } = this.props;
+      e && e.call(void 0, s);
+    }, this.snapTime = L(
+      x(this.props.steps, this.props.min || a.defaultProps.min)
+    ), this.state = {
+      activeListIndex: -1
+    }, this.hasActiveButton = this.hasActiveButton.bind(this);
+  }
+  /**
+   * @hidden
+   */
+  get element() {
+    return this._element;
+  }
+  get value() {
+    return _(
+      this.snapTime(B(this.props.value || C)),
+      this.min,
+      this.max
+    );
+  }
+  get intl() {
+    return E(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;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    clearTimeout(this.nextTickId);
+  }
+  componentDidMount() {
+    const { onMount: i } = this.props;
+    i && i.call(void 0, this.value);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      format: i,
+      smoothScroll: s,
+      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
+      },
+      o
+    );
+    this.timeLists = [];
+    const f = F(this), g = f.toLanguageString(b, y[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(
+      $,
+      {
+        type: "button",
+        ref: (m) => {
+          this._nowButton = m;
+        },
+        className: "k-time-now",
+        fillMode: "flat",
+        themeColor: "primary",
+        title: g,
+        onKeyDown: T,
+        "aria-label": g,
+        onClick: e,
+        tabIndex: r ? -1 : 0
+      },
+      f.toLanguageString(k, y[k])
+    )), /* @__PURE__ */ n.createElement(
+      "div",
+      {
+        className: "k-time-list-container",
+        onKeyDown: this.handleKeyDown
+      },
+      /* @__PURE__ */ n.createElement("span", { className: "k-time-highlight" }),
+      this.dateFormatParts.map((m, l) => m.type !== "literal" ? /* @__PURE__ */ n.createElement(
+        "div",
+        {
+          key: l,
+          className: w("k-time-list-wrapper", {
+            "k-focus": l === 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(
+          S,
+          {
+            min: this.min,
+            max: this.max,
+            boundRange: this.boundRange,
+            part: m,
+            step: m.type ? this.steps[m.type] : 1,
+            smoothScroll: s,
+            ref: (h) => {
+              h && this.timeLists.push(h);
+            },
+            id: l,
+            onFocus: () => {
+              this.handleListFocus(l);
+            },
+            onBlur: this.handleListBlur,
+            onChange: this.handleChange,
+            value: this.value,
+            disabled: r,
+            show: I,
+            mobileMode: d
+          }
+        )
+      ) : /* @__PURE__ */ n.createElement(
+        "div",
+        {
+          key: l,
+          className: "k-time-separator"
+        },
+        m.pattern
+      ))
+    ));
+  }
+  nextTick(i) {
+    clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
+  }
+  hasActiveButton() {
+    const i = D(document);
+    return this._nowButton && i === this._nowButton.element;
+  }
+  hasSteps() {
+    const i = Object.keys(this.steps);
+    return i.length !== i.reduce((s, e) => s + this.steps[e], 0);
+  }
+};
+a.propTypes = {
+  cancelButton: t.bool,
+  disabled: t.bool,
+  format: t.oneOfType([
+    t.string,
+    t.shape({
+      skeleton: t.string,
+      pattern: t.string,
+      date: t.oneOf(["short", "medium", "long", "full"]),
+      time: t.oneOf(["short", "medium", "long", "full"]),
+      datetime: t.oneOf(["short", "medium", "long", "full"]),
+      era: t.oneOf(["narrow", "short", "long"]),
+      year: t.oneOf(["numeric", "2-digit"]),
+      month: t.oneOf(["numeric", "2-digit", "narrow", "short", "long"]),
+      day: t.oneOf(["numeric", "2-digit"]),
+      weekday: t.oneOf(["narrow", "short", "long"]),
+      hour: t.oneOf(["numeric", "2-digit"]),
+      hour12: t.bool,
+      minute: t.oneOf(["numeric", "2-digit"]),
+      second: t.oneOf(["numeric", "2-digit"]),
+      timeZoneName: t.oneOf(["short", "long"])
+    })
+  ]),
+  max: t.instanceOf(Date),
+  min: t.instanceOf(Date),
+  nowButton: t.bool,
+  steps: t.shape({
+    hour: t.number,
+    minute: t.number,
+    second: t.number
+  }),
+  smoothScroll: t.bool,
+  tabIndex: t.number,
+  value: t.instanceOf(Date),
+  show: t.bool
+}, a.defaultProps = {
+  value: null,
+  disabled: !1,
+  nowButton: !0,
+  cancelButton: !0,
+  format: "hh:mm a",
+  min: M,
+  max: P,
+  steps: {},
+  boundRange: !1
+};
+let c = a;
+O(c);
+R(c);
+export {
+  c as TimePart
+};

package/timepicker/TimePicker.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * 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("k-group k-reset",t),h={popupClass:"k-timepicker-popup",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.value||this.state.candidate;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("div",{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,"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;