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

package/daterangepicker/DateRangePicker.mjs

@@ -0,0 +1,426 @@
+/**
+ * @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 i from "react";
+import e from "prop-types";
+import { Popup as k } from "@progress/kendo-react-popup";
+import { cloneDate as v } from "@progress/kendo-date-math";
+import { Keys as c, validatePackage as T, canUseDOM as D, classNames as _, IconWrap as P, getActiveElement as F, createPropsContext as z, withIdHOC as A, withPropsContext as B } from "@progress/kendo-react-common";
+import { provideLocalizationService as m, registerForLocalization as N } from "@progress/kendo-react-intl";
+import { arrowsSwapIcon as L } from "@progress/kendo-svg-icons";
+import { packageMetadata as V } from "../package-metadata.mjs";
+import { DateInputWithoutContext as K, DateInput as I } from "../dateinput/DateInput.mjs";
+import { MultiViewCalendar as U } from "../calendar/components/MultiViewCalendar.mjs";
+import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
+import { nullable as h, MAX_DATE as q, MIN_DATE as W } from "../utils.mjs";
+import { MOBILE_MEDIUM_DEVISE as G } from "../common/constants.mjs";
+import { dateRangePickerCancel as w, messages as l, dateRangePickerSet as b, start as C, end as S, separator as E, swapStartEnd as d } from "../messages/index.mjs";
+import { Button as H } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as X } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Y } from "@progress/kendo-react-layout";
+const o = class o extends i.Component {
+  constructor(a) {
+    super(a), this._element = null, this._calendar = null, this._startDateInput = i.createRef(), this._endDateInput = i.createRef(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.focus = () => {
+      this.startDateInput && this.startDateInput.focus();
+    }, this.setCalendarRef = (t) => {
+      this._calendar = t;
+    }, this.focusCalendarElement = () => {
+      this._calendar && this._calendar.element && this._calendar.element.focus({ preventScroll: !0 });
+    }, this.calculateValue = (t, s) => (t.value !== void 0 ? t.value : s.value) || r, this.calculateShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.renderCalendar = () => {
+      const t = this.value || r, s = {
+        min: this.min,
+        max: this.max,
+        allowReverse: this.props.allowReverse,
+        mode: "range",
+        focusedDate: this.props.focusedDate,
+        disabled: this.props.disabled,
+        className: this.mobileMode ? "k-calendar-lg" : "",
+        mobileMode: this.mobileMode,
+        ...this.props.calendarSettings,
+        value: t,
+        dir: this.props.dir,
+        onChange: this.handleCalendarChange
+      };
+      return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(U, { ...s, ref: this.setCalendarRef });
+    }, this.renderPopup = () => {
+      const t = {
+        popupClass: "k-daterangepicker-popup",
+        animate: this._element !== null,
+        anchor: this._element,
+        id: this._popupId,
+        anchorAlign: {
+          horizontal: "left",
+          vertical: "bottom"
+        },
+        popupAlign: {
+          horizontal: "left",
+          vertical: "top"
+        },
+        ...this.props.popupSettings,
+        show: this.show
+      };
+      return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(k, { ...t }, this.renderCalendar());
+    }, this.renderAdaptivePopup = () => {
+      const { windowWidth: t = 0 } = this.state, s = {
+        expand: this.show,
+        onClose: (n) => this.handleCancel(n),
+        adaptiveTitle: this.props.adaptiveTitle,
+        windowWidth: t,
+        footer: {
+          cancelText: this.localizationService.toLanguageString(w, l[w]),
+          onCancel: this.handleCancel,
+          applyText: this.localizationService.toLanguageString(b, l[b]),
+          onApply: this.handleBlur
+        }
+      };
+      return /* @__PURE__ */ i.createElement(X, { ...s }, /* @__PURE__ */ i.createElement(Y, { className: "!k-overflow-hidden" }, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
+    }, this.handleReverseClick = (t) => {
+      const s = {
+        start: this.value.end,
+        end: this.value.start
+      }, n = {
+        syntheticEvent: t,
+        nativeEvent: t.nativeEvent
+      };
+      this.handleChange(s, n);
+    }, this.handleReverseMouseDown = (t) => {
+      t.preventDefault();
+    }, this.handleFocus = (t) => {
+      clearTimeout(this.nextTickId), this.shouldFocusDateInput || this.mobileMode && this.setState({ currentValue: this.value });
+      const { onFocus: s } = this.props;
+      s && s.call(void 0, t);
+    }, this.handleClick = () => {
+      this.shouldFocusDateInput || this.setShow(!0);
+    }, this.handleBlur = (t) => {
+      this.nextTick(() => {
+        this.setShow(!1);
+      });
+      const { onBlur: s } = this.props;
+      s && s.call(void 0, t);
+    }, this.handleCancel = (t) => {
+      this.nextTick(() => {
+        this.setShow(!1), this.setState({ currentValue: r });
+      });
+      const { onCancel: s } = this.props;
+      s && s.call(void 0, t);
+    }, this.handleEndChange = (t) => {
+      const s = {
+        start: this.value.start,
+        end: v(t.value || void 0)
+      };
+      this.handleChange(s, t);
+    }, this.handleStartChange = (t) => {
+      const s = {
+        start: v(t.value || void 0),
+        end: this.value.end
+      };
+      this.handleChange(s, t);
+    }, this.extractRangeFromValue = (t) => {
+      if (!Array.isArray(t.value) && !(t.value instanceof Date))
+        return t.value || r;
+      const s = Array.isArray(t.value) ? t.value[0] : t.value;
+      return {
+        start: this.value.end !== null ? s : this.value.start,
+        end: this.value.start !== null ? s : this.value.end
+      };
+    }, this.handleCalendarChange = (t) => {
+      const s = this.extractRangeFromValue(t);
+      this.handleChange(s, t);
+    }, this.handleKeyDown = (t) => {
+      const { keyCode: s, altKey: n } = t;
+      s === c.esc ? (t.preventDefault(), this.shouldFocusDateInput = !0, this.setShow(!1)) : n && s === c.down ? (t.preventDefault(), this.shouldFocusCalendar = !0, this.setShow(!0), this.focusCalendarElement()) : n && s === c.up && (t.preventDefault(), this.shouldFocusDateInput = !0, this.setShow(!1));
+    }, this.handleChange = (t, s) => {
+      this.setState({ value: t }), this.valueDuringOnChange = t;
+      const { onChange: n } = this.props;
+      if (n) {
+        const u = {
+          syntheticEvent: s.syntheticEvent,
+          nativeEvent: s.nativeEvent,
+          value: this.value,
+          show: this.show,
+          target: this
+        };
+        n.call(void 0, u);
+      }
+      this.valueDuringOnChange = void 0;
+    }, T(V), this.state = {
+      show: this.props.show || this.props.defaultShow || o.defaultProps.defaultShow,
+      value: this.props.value || this.props.defaultValue || o.defaultProps.defaultValue,
+      currentValue: r
+    }, this.nextTick = this.nextTick.bind(this), this.setShow = this.setShow.bind(this), this.focusCalendarElement = this.focusCalendarElement.bind(this), this.focusDateInputElement = this.focusDateInputElement.bind(this);
+  }
+  get _popupId() {
+    return this.props.id + "-popup-id";
+  }
+  get _startInputId() {
+    return this.props.id + "-start-input-id";
+  }
+  get _endInputId() {
+    return this.props.id + "-end-input-id";
+  }
+  /**
+   * Gets the wrapping element of the DateRangePicker.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * Gets the start DateInput component inside the DatePicker component.
+   */
+  get startDateInput() {
+    return this._startDateInput.current;
+  }
+  /**
+   * Gets the end DateInput component inside the DatePicker component.
+   */
+  get endDateInput() {
+    return this._endDateInput.current;
+  }
+  /**
+   * Gets the MultiVieCalendar inside the DateRangePicker.
+   */
+  get calendar() {
+    return this._calendar;
+  }
+  /**
+   * Gets the value of the DateRangePicker.
+   */
+  get value() {
+    return (this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value) || r;
+  }
+  /**
+   * Gets the popup state of the DateRangePicker.
+   */
+  get show() {
+    return this.showDuringOnChange !== void 0 ? this.showDuringOnChange : this.props.show !== void 0 ? this.props.show : this.state.show;
+  }
+  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;
+  }
+  get document() {
+    if (D)
+      return this.element && this.element.ownerDocument || document;
+  }
+  get localizationService() {
+    return m(this);
+  }
+  /**
+   * The mobile mode of the DateRangePicker.
+   */
+  get mobileMode() {
+    return !!(this.state.windowWidth && this.state.windowWidth <= G && this.props.adaptive);
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    var a;
+    this.observerResize = D && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (a = this.document) != null && a.body && this.observerResize && this.observerResize.observe(this.document.body);
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate() {
+    this.shouldFocusCalendar && this.focusCalendarElement(), this.shouldFocusDateInput && this.focusDateInputElement(), this.shouldFocusCalendar = !1, this.shouldFocusDateInput = !1;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    var a;
+    clearTimeout(this.nextTickId), (a = this.document) != null && a.body && this.observerResize && this.observerResize.disconnect();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const a = this.value || r, t = this.mobileMode && this.show ? this.state.currentValue : a, s = (this.props.startDateInputSettings || {}).id || this._startInputId, n = (this.props.endDateInputSettings || {}).id || this._endInputId, u = _(
+      "k-daterangepicker",
+      {
+        "k-disabled": this.props.disabled
+      },
+      this.props.className
+    ), y = this.localizationService.toLanguageString(C, l[C]), x = this.localizationService.toLanguageString(S, l[S]), R = this.localizationService.toLanguageString(E, l[E]), f = {
+      disableSelection: this.mobileMode && !0,
+      label: y,
+      format: this.props.format,
+      min: this.min,
+      max: this.max,
+      id: this._startInputId,
+      disabled: this.props.disabled,
+      valid: this.props.valid,
+      tabIndex: this.props.tabIndex,
+      ariaExpanded: this.show,
+      ...this.props.startDateInputSettings,
+      value: t.start,
+      onChange: this.handleStartChange
+    }, g = {
+      disableSelection: this.mobileMode && !0,
+      label: x,
+      format: this.props.format,
+      min: this.min,
+      max: this.max,
+      id: this._endInputId,
+      disabled: this.props.disabled,
+      valid: this.props.valid,
+      tabIndex: this.props.tabIndex,
+      ariaExpanded: this.show,
+      ...this.props.endDateInputSettings,
+      value: t.end,
+      onChange: this.handleEndChange
+    }, M = /* @__PURE__ */ i.createElement(
+      H,
+      {
+        type: "button",
+        className: "k-select",
+        fillMode: "flat",
+        title: m(this).toLanguageString(d, l[d]),
+        onMouseDown: this.handleReverseMouseDown,
+        onClick: this.handleReverseClick,
+        "aria-controls": s + " " + n,
+        "aria-label": m(this).toLanguageString(d, l[d])
+      },
+      /* @__PURE__ */ i.createElement(P, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: L })
+    );
+    return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
+      "span",
+      {
+        ref: (O) => {
+          this._element = O;
+        },
+        className: u,
+        style: this.props.style,
+        id: this.props.id,
+        "aria-labelledby": this.props.ariaLabelledBy,
+        "aria-describedby": this.props.ariaDescribedBy,
+        tabIndex: this.props.tabIndex,
+        onFocus: this.handleFocus,
+        onClick: this.handleClick,
+        onKeyDown: this.handleKeyDown,
+        onBlur: this.mobileMode ? void 0 : this.handleBlur,
+        dir: this.props.dir
+      },
+      this.props.startDateInput ? /* @__PURE__ */ i.createElement(this.props.startDateInput, { ...f }) : /* @__PURE__ */ i.createElement(
+        I,
+        {
+          ...f,
+          ref: this._startDateInput,
+          ariaRole: "combobox",
+          ariaControls: this._popupId,
+          readonly: this.mobileMode
+        }
+      ),
+      (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? M : R,
+      this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...g }) : /* @__PURE__ */ i.createElement(
+        I,
+        {
+          ...g,
+          ref: this._endDateInput,
+          ariaRole: "combobox",
+          ariaControls: this._popupId,
+          readonly: this.mobileMode
+        }
+      ),
+      !this.mobileMode && this.renderPopup()
+    ), this.mobileMode && this.renderAdaptivePopup());
+  }
+  focusDateInputElement() {
+    if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element)
+      return;
+    const a = F(document);
+    (this.value.start === null || this.value.end !== null) && a !== this.endDateInput.element ? this.startDateInput.element.focus({ preventScroll: !0 }) : a !== this.startDateInput.element && this.endDateInput.element.focus({ preventScroll: !0 });
+  }
+  nextTick(a) {
+    clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => a());
+  }
+  setShow(a) {
+    const { onOpen: t, onClose: s } = this.props;
+    this.show !== a && (this.setState({ show: a }), a && t && t.call(void 0, {
+      target: this
+    }), !a && s && s.call(void 0, {
+      target: this
+    }));
+  }
+  calculateMedia(a) {
+    for (let t of a)
+      this.setState({ windowWidth: t.target.clientWidth });
+  }
+};
+o.displayName = "DateRangePicker", o.propTypes = {
+  allowReverse: e.bool,
+  calendarSettings: e.any,
+  className: e.string,
+  defaultShow: e.bool,
+  defaultValue: e.shape({
+    start: h(e.instanceOf(Date).isRequired),
+    end: h(e.instanceOf(Date).isRequired)
+  }),
+  disabled: e.bool,
+  endDateInputSettings: e.shape(K.propTypes),
+  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"])
+    })
+  ]),
+  id: e.string,
+  ariaLabelledBy: e.string,
+  ariaDescribedBy: e.string,
+  max: e.instanceOf(Date),
+  min: e.instanceOf(Date),
+  onBlur: e.func,
+  onChange: e.func,
+  onFocus: e.func,
+  popupSettings: e.any,
+  show: e.bool,
+  startDateInputSettings: e.any,
+  style: e.any,
+  swapButton: e.any,
+  tabIndex: e.number,
+  dir: e.string,
+  value: e.shape({
+    start: h(e.instanceOf(Date).isRequired),
+    end: h(e.instanceOf(Date).isRequired)
+  })
+}, o.defaultProps = {
+  allowReverse: !1,
+  defaultShow: !1,
+  defaultValue: r,
+  disabled: !1,
+  format: "d",
+  max: q,
+  min: W,
+  swapButton: !1
+};
+let p = o;
+const Z = z(), j = A(B(Z, p));
+j.displayName = "KendoReactDateRangePicker";
+N(p);
+export {
+  j as DateRangePicker,
+  Z as DateRangePickerPropsContext,
+  p as DateRangePickerWithoutContext
+};

package/datetimepicker/DateTimePicker.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 _=require("react"),e=require("prop-types"),V=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),K=require("@progress/kendo-svg-icons"),j=require("../dateinput/DateInput.js"),U=require("@progress/kendo-react-buttons"),$=require("../package-metadata.js"),p=require("../utils.js"),W=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),X=require("./DateTimeSelector.js"),H=require("../timepicker/utils.js"),Z=require("../hooks/usePickerFloatingLabel.js"),G=require("../common/AdaptiveMode.js"),J=require("@progress/kendo-react-layout");function Q(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const i in h)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(h,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>h[i]})}}return t.default=h,Object.freeze(t)}const r=Q(_),o=class o extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.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:a,format:c,calendar:u,cancelButton:d,weekNumber:f,focusedDate:v}=this.props;return r.createElement(X.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:d,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:a,focusedDate:v,format:c,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode})},this.renderAdaptivePopup=()=>{const{windowWidth:i=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleReject(u)},applyText:a,onApply:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleAccept(u)}}};return r.createElement(G.AdaptiveMode,{...c},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:D.cloneDate(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:a}=i;if(a===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===n.Keys.up||a===n.Keys.down)&&(i.preventDefault(),i.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),n.validatePackage($.packageMetadata),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(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?D.cloneDate(t):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 mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=W.MOBILE_MEDIUM_DEVISE&&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}get validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&H.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,a=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:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body)}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}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=o.defaultProps.size,rounded:i=o.defaultProps.rounded,fillMode:s=o.defaultProps.fillMode,disabled:a,tabIndex:c,title:u,id:d,format:f,formatPlaceholder:v,min:w,max:k,className:T,width:M,name:O,validationMessage:P,required:C,validityStyles:x,minTime:q,maxTime:E,ariaLabelledBy:R,ariaDescribedBy:z,popup:F=V.Popup}=this.props,b=!this.validityStyles||this.validity.valid,A={id:d,ariaLabelledBy:R,ariaDescribedBy:z,format:f,formatPlaceholder:v,disabled:a,title:u,validityStyles:x,validationMessage:P,required:C,min:w,max:k,minTime:q,maxTime:E,name:O,tabIndex:this.show?-1:c,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},y=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:B,onBlur:L})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:N=>{this._element=N},className:n.classNames("k-input","k-datetimepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-rounded-${n.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-input-${s}`]:s,"k-invalid":!b,"k-required":this.required,"k-disabled":this.props.disabled},T),onKeyDown:this.handleKeyDown,style:{width:M},onFocus:this.mobileMode?void 0:B,onBlur:L,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode,...A}),r.createElement(U.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:K.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:"k-input-button",rounded:null,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(F,{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?r.createElement(Z.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:d,editorValid:b,editorDisabled:this.props.disabled,children:y,style:{width:this.props.width}}):y}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",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,cancelButton:!0,dateInput:j.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let g=o;const S=n.createPropsContext(),I=n.withIdHOC(n.withPropsContext(S,g));I.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=I;exports.DateTimePickerPropsContext=S;exports.DateTimePickerWithoutContext=g;