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

package/datetimepicker/DateTimePicker.mjs

@@ -0,0 +1,475 @@
+/**
+ * @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 a from "react";
+import e from "prop-types";
+import { Popup as _ } from "@progress/kendo-react-popup";
+import { cloneDate as I } from "@progress/kendo-date-math";
+import { Keys as h, validatePackage as K, canUseDOM as y, AsyncFocusBlur as U, classNames as j, kendoThemeMaps as D, createPropsContext as $, withIdHOC as W, withPropsContext as X } from "@progress/kendo-react-common";
+import { calendarIcon as H } from "@progress/kendo-svg-icons";
+import { DateInput as Z } from "../dateinput/DateInput.mjs";
+import { Button as G } from "@progress/kendo-react-buttons";
+import { packageMetadata as J } from "../package-metadata.mjs";
+import { MAX_DATE as Q, MIN_DATE as Y, isInDateRange as ee, MAX_TIME as te, MIN_TIME as ie } from "../utils.mjs";
+import { MOBILE_MEDIUM_DEVISE as se } from "../common/constants.mjs";
+import { dateTimePickerCancel as S, messages as u, dateTimePickerSet as T, toggleDateTimeSelector as p } from "../messages/index.mjs";
+import { provideLocalizationService as m, registerForLocalization as oe } from "@progress/kendo-react-intl";
+import { DateTimeSelector as ne } from "./DateTimeSelector.mjs";
+import { isInTimeRange as ae } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as re } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as le } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as de } from "@progress/kendo-react-layout";
+const o = class o extends a.Component {
+  constructor(t) {
+    super(t), this._element = null, this._dateInput = a.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+      const i = this.dateInputElement();
+      i && i.focus();
+    }, this.renderPicker = () => {
+      const {
+        disabled: i,
+        minTime: s,
+        maxTime: n,
+        format: d,
+        calendar: l,
+        cancelButton: r,
+        weekNumber: f,
+        focusedDate: g
+      } = this.props;
+      return /* @__PURE__ */ a.createElement(
+        ne,
+        {
+          ref: (v) => {
+            this._dateTimeSelector = v;
+          },
+          cancelButton: r,
+          steps: this.props.steps,
+          value: this.value,
+          onChange: this.handleValueChange,
+          onReject: this.handleReject,
+          disabled: i,
+          weekNumber: f,
+          min: this.min,
+          max: this.max,
+          minTime: s,
+          maxTime: n,
+          focusedDate: g,
+          format: d,
+          calendar: l,
+          mobileMode: this.mobileMode,
+          footerActions: !this.mobileMode
+        }
+      );
+    }, this.renderAdaptivePopup = () => {
+      const { windowWidth: i = 0 } = this.state, s = m(this).toLanguageString(S, u[S]), n = m(this).toLanguageString(T, u[T]), d = {
+        expand: this.show,
+        onClose: this.handleBlur,
+        adaptiveTitle: this.props.adaptiveTitle,
+        windowWidth: i,
+        footer: {
+          cancelText: s,
+          onCancel: (l) => {
+            var r;
+            return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
+          },
+          applyText: n,
+          onApply: (l) => {
+            var r;
+            return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
+          }
+        }
+      };
+      return /* @__PURE__ */ a.createElement(le, { ...d }, /* @__PURE__ */ a.createElement(de, { className: "!k-overflow-hidden" }, this.renderPicker()));
+    }, this.handleReject = () => {
+      this.shouldFocusDateInput = !0, this.setShow(!1);
+    }, this.handleValueChange = (i) => {
+      this.setState({
+        value: I(i.value || void 0)
+      }), this.valueDuringOnChange = i.value, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
+      const { onChange: s } = this.props;
+      s && s.call(void 0, {
+        syntheticEvent: i.syntheticEvent,
+        nativeEvent: i.nativeEvent,
+        value: this.value,
+        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.handleDateIconClick = () => {
+      this.props.disabled || (this.shouldFocusDateInput = !0, this.setShow(!this.show));
+    }, this.handleIconMouseDown = (i) => {
+      i.preventDefault();
+    }, this.handleKeyDown = (i) => {
+      const { altKey: s, keyCode: n } = i;
+      if (n === h.esc) {
+        this.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      s && (n === h.up || n === h.down) && (i.preventDefault(), i.stopPropagation(), this.shouldFocusDateInput = n === h.up, this.setShow(n === h.down));
+    }, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), K(J), this.state = {
+      value: this.props.defaultValue || o.defaultProps.defaultValue,
+      show: this.props.defaultShow || o.defaultProps.defaultShow,
+      focused: !1
+    };
+  }
+  get _popupId() {
+    return this.props.id + "-popup-id";
+  }
+  get document() {
+    if (y)
+      return this.element && this.element.ownerDocument || document;
+  }
+  /**
+   * Gets the wrapping element of the DateTimePicker.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * Gets the DateInput component inside the DateTimePicker component.
+   */
+  get dateInput() {
+    return this._dateInput.current;
+  }
+  /**
+   * Gets the value of the DateTimePicker.
+   */
+  get value() {
+    const t = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
+    return t !== null ? I(t) : null;
+  }
+  /**
+   * Gets the popup state of the DateTimePicker.
+   */
+  get show() {
+    return this.showDuringOnChange !== void 0 ? this.showDuringOnChange : this.props.show !== void 0 ? this.props.show : this.state.show;
+  }
+  /**
+   * Gets the `name` property of the DateTimePicker.
+   */
+  get name() {
+    return this.props.name;
+  }
+  /**
+   * The mobile mode of the ComboBox.
+   */
+  get mobileMode() {
+    return !!(this.state.windowWidth && this.state.windowWidth <= se && this.props.adaptive);
+  }
+  get min() {
+    return this.props.min !== void 0 ? this.props.min : o.defaultProps.min;
+  }
+  get max() {
+    return this.props.max !== void 0 ? this.props.max : o.defaultProps.max;
+  }
+  /**
+   * Represents the validity state into which the DateTimePicker is set.
+   */
+  get validity() {
+    const t = ee(this.value, this.min, this.max) && ae(this.value, this.props.minTime || ie, this.props.maxTime || te), i = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && t, n = this.props.valid !== void 0 ? this.props.valid : s;
+    return {
+      customError: i,
+      rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
+      rangeUnderflow: this.value && this.value.getTime() < this.min.getTime() || !1,
+      valid: n,
+      valueMissing: this.value === null
+    };
+  }
+  /**
+   * @hidden
+   */
+  get validityStyles() {
+    return this.props.validityStyles !== void 0 ? this.props.validityStyles : o.defaultProps.validityStyles;
+  }
+  /**
+   * @hidden
+   */
+  get required() {
+    return this.props.required !== void 0 ? this.props.required : o.defaultProps.required;
+  }
+  /**
+   * @hidden
+   */
+  get dateInputComp() {
+    return this.props.dateInput || o.defaultProps.dateInput;
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    var t;
+    this.observerResize = y && 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);
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate() {
+    const t = this.dateInputElement();
+    this._dateTimeSelector && this.show && !this.prevShow && this._dateTimeSelector.focus({ preventScroll: !0 }), t && !this.show && this.shouldFocusDateInput && t.focus({ preventScroll: !0 }), this.prevShow = this.show, this.shouldFocusDateInput = !1;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    var t;
+    clearTimeout(this.nextTickId), (t = this.document) != null && t.body && this.observerResize && this.observerResize.disconnect();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      size: t = o.defaultProps.size,
+      rounded: i = o.defaultProps.rounded,
+      fillMode: s = o.defaultProps.fillMode,
+      disabled: n,
+      tabIndex: d,
+      title: l,
+      id: r,
+      format: f,
+      formatPlaceholder: g,
+      min: v,
+      max: M,
+      className: k,
+      width: O,
+      name: P,
+      validationMessage: C,
+      required: x,
+      validityStyles: E,
+      minTime: F,
+      maxTime: R,
+      ariaLabelledBy: z,
+      ariaDescribedBy: A,
+      popup: B = _
+    } = this.props, w = !this.validityStyles || this.validity.valid, N = {
+      id: r,
+      ariaLabelledBy: z,
+      ariaDescribedBy: A,
+      format: f,
+      formatPlaceholder: g,
+      disabled: n,
+      title: l,
+      validityStyles: E,
+      validationMessage: C,
+      required: x,
+      min: v,
+      max: M,
+      minTime: F,
+      maxTime: R,
+      name: P,
+      tabIndex: this.show ? -1 : d,
+      valid: this.validity.valid,
+      value: this.value,
+      onChange: this.handleValueChange,
+      steps: this.props.steps,
+      label: void 0,
+      placeholder: this.state.focused ? null : this.props.placeholder,
+      ariaExpanded: this.show,
+      size: null,
+      fillMode: null,
+      rounded: null
+    }, b = /* @__PURE__ */ a.createElement(
+      U,
+      {
+        onFocus: this.handleFocus,
+        onBlur: this.handleBlur,
+        onSyncFocus: this.props.onFocus,
+        onSyncBlur: this.props.onBlur
+      },
+      ({ onFocus: q, onBlur: V }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
+        "div",
+        {
+          ref: (L) => {
+            this._element = L;
+          },
+          className: j(
+            "k-input",
+            "k-datetimepicker",
+            {
+              [`k-input-${D.sizeMap[t] || t}`]: t,
+              [`k-rounded-${D.roundedMap[i] || i}`]: i,
+              [`k-input-${s}`]: s,
+              "k-invalid": !w,
+              "k-required": this.required,
+              "k-disabled": this.props.disabled
+            },
+            k
+          ),
+          onKeyDown: this.handleKeyDown,
+          style: { width: O },
+          onFocus: this.mobileMode ? void 0 : q,
+          onBlur: V,
+          onClick: this.mobileMode ? this.handleDateIconClick : void 0
+        },
+        /* @__PURE__ */ a.createElement(
+          this.dateInputComp,
+          {
+            _ref: this._dateInput,
+            ariaRole: "combobox",
+            ariaControls: this._popupId,
+            readonly: this.mobileMode,
+            ...N
+          }
+        ),
+        /* @__PURE__ */ a.createElement(
+          G,
+          {
+            tabIndex: -1,
+            type: "button",
+            icon: "calendar",
+            svgIcon: H,
+            onMouseDown: this.handleIconMouseDown,
+            onClick: this.mobileMode ? void 0 : this.handleDateIconClick,
+            title: m(this).toLanguageString(p, u[p]),
+            className: "k-input-button",
+            rounded: null,
+            "aria-label": m(this).toLanguageString(p, u[p])
+          }
+        ),
+        /* @__PURE__ */ a.createElement(
+          B,
+          {
+            show: this.show,
+            animate: this.element !== null,
+            anchor: this.element,
+            popupClass: "k-datetime-container k-reset",
+            id: this._popupId,
+            anchorAlign: {
+              horizontal: "left",
+              vertical: "bottom"
+            },
+            popupAlign: {
+              horizontal: "left",
+              vertical: "top"
+            }
+          },
+          !this.mobileMode && this.renderPicker()
+        )
+      ), this.mobileMode && this.renderAdaptivePopup())
+    );
+    return this.props.label ? /* @__PURE__ */ a.createElement(
+      re,
+      {
+        dateInput: this._dateInput,
+        label: this.props.label,
+        editorId: r,
+        editorValid: w,
+        editorDisabled: this.props.disabled,
+        children: b,
+        style: { width: this.props.width }
+      }
+    ) : b;
+  }
+  setShow(t) {
+    const { onOpen: i, onClose: s } = this.props;
+    this.show !== t && (this.setState({ show: t }), t && i && i.call(void 0, {
+      target: this
+    }), !t && s && s.call(void 0, {
+      target: this
+    }));
+  }
+  nextTick(t) {
+    clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => t());
+  }
+  calculateMedia(t) {
+    for (const i of t)
+      this.setState({ windowWidth: i.target.clientWidth });
+  }
+};
+o.displayName = "DateTimePicker", o.propTypes = {
+  className: e.string,
+  defaultShow: e.bool,
+  defaultValue: e.instanceOf(Date),
+  disabled: e.bool,
+  focusedDate: e.instanceOf(Date),
+  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,
+  tabIndex: e.number,
+  title: e.string,
+  value: e.instanceOf(Date),
+  weekNumber: e.bool,
+  width: e.oneOfType([e.number, e.string]),
+  validationMessage: e.string,
+  required: e.bool,
+  validate: e.bool,
+  valid: e.bool,
+  cancelButton: e.bool,
+  size: e.oneOf([null, "small", "medium", "large"]),
+  rounded: e.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: e.oneOf([null, "solid", "flat", "outline"])
+}, o.defaultProps = {
+  defaultShow: !1,
+  defaultValue: null,
+  disabled: !1,
+  format: "g",
+  // general date and time pattern (short time): "M/d/y h:mm a" for en.
+  max: Q,
+  min: Y,
+  popupSettings: {},
+  tabIndex: 0,
+  weekNumber: !1,
+  required: !1,
+  validityStyles: !0,
+  cancelButton: !0,
+  dateInput: Z,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid"
+};
+let c = o;
+const he = $(), ue = W(X(he, c));
+ue.displayName = "KendoReactDateTimePicker";
+oe(c);
+export {
+  ue as DateTimePicker,
+  he as DateTimePickerPropsContext,
+  c as DateTimePickerWithoutContext
+};

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