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

package/datepicker/DatePicker.mjs

@@ -0,0 +1,462 @@
+/**
+ * @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 e from "prop-types";
+import { Popup as q } from "@progress/kendo-react-popup";
+import { getDate as L, cloneDate as C } from "@progress/kendo-date-math";
+import { classNames as D, Keys as r, validatePackage as W, canUseDOM as k, AsyncFocusBlur as _, kendoThemeMaps as O, createPropsContext as K, withIdHOC as U, withPropsContext as $ } from "@progress/kendo-react-common";
+import { calendarIcon as H } from "@progress/kendo-svg-icons";
+import { packageMetadata as X } from "../package-metadata.mjs";
+import { DateInput as Z } from "../dateinput/DateInput.mjs";
+import { Calendar as j } from "../calendar/components/Calendar.mjs";
+import { MAX_DATE as G, MIN_DATE as J, isInDateRange as Q, setTime as Y } from "../utils.mjs";
+import { toggleCalendar as S, messages as ee } from "../messages/index.mjs";
+import { provideLocalizationService as te, registerForLocalization as ie } from "@progress/kendo-react-intl";
+import { ToggleButton as se } from "./ToggleButton.mjs";
+import { PickerWrap as oe } from "../common/PickerWrap.mjs";
+import { PickerFloatingLabel as ae } from "../hooks/usePickerFloatingLabel.mjs";
+import { ActionSheetContent as ne } from "@progress/kendo-react-layout";
+import { AdaptiveMode as re } from "../common/AdaptiveMode.mjs";
+import { MOBILE_MEDIUM_DEVISE as le } from "../common/constants.mjs";
+const o = class o extends n.Component {
+  constructor(i) {
+    super(i), this._element = null, this._dateInput = n.createRef(), this._calendar = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
+      this.dateInput && this.dateInput.focus();
+    }, this.setCalendarRef = (t) => {
+      this._calendar = 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.renderPopup = () => {
+      const { disabled: t, min: s, max: a, weekNumber: u, focusedDate: c } = this.props, { popupClass: l, ...m } = this.props.popupSettings, f = this.show, d = this.value, g = d && L(d), v = D(
+        "k-calendar-container k-group k-reset",
+        l
+      ), w = {
+        popupClass: "k-datepicker-popup",
+        show: f,
+        anchor: this._element,
+        className: v,
+        id: this._popupId,
+        anchorAlign: {
+          horizontal: "left",
+          vertical: "bottom"
+        },
+        popupAlign: {
+          horizontal: "left",
+          vertical: "top"
+        },
+        ...m
+      }, h = {
+        disabled: t,
+        value: g,
+        min: s,
+        max: a,
+        weekNumber: u,
+        focusedDate: c,
+        className: this.mobileMode ? "k-calendar-lg" : "",
+        navigation: !this.mobileMode,
+        onChange: this.handleCalendarValueChange
+      };
+      return this.mobileMode ? /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }) : /* @__PURE__ */ n.createElement(this.popupComp, { ...w }, /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }));
+    }, this.renderAdaptivePopup = () => {
+      const { windowWidth: t = 0 } = this.state, s = {
+        expand: this.show,
+        onClose: this.handleBlur,
+        adaptiveTitle: this.props.adaptiveTitle,
+        windowWidth: t
+      };
+      return /* @__PURE__ */ n.createElement(re, { ...s }, /* @__PURE__ */ n.createElement(ne, { className: "!k-overflow-hidden" }, this.renderPopup()));
+    }, this.handleInputValueChange = (t) => {
+      this.handleValueChange(t.value, t);
+    }, this.handleCalendarValueChange = (t) => {
+      const s = this.mergeTime(t.value);
+      this.handleValueChange(s, t);
+    }, this.handleValueChange = (t, s) => {
+      this.setState({
+        value: C(t || void 0)
+      }), this.valueDuringOnChange = t, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
+      const { onChange: a } = this.props;
+      a && a.call(void 0, {
+        syntheticEvent: s.syntheticEvent,
+        nativeEvent: s.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.handleIconClick = () => {
+      this.props.disabled || (this.shouldFocusDateInput = !0, this.setShow(!this.show));
+    }, this.handleIconMouseDown = (t) => {
+      t.preventDefault();
+    }, this.handleKeyDown = (t) => {
+      const { altKey: s, keyCode: a } = t;
+      if (a === r.esc) {
+        this.shouldFocusDateInput = !0, this.setShow(!1);
+        return;
+      }
+      s && (a === r.up || a === r.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === r.up, this.setShow(a === r.down));
+    }, W(X), 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 (k)
+      return this.element && this.element.ownerDocument || document;
+  }
+  /**
+   * Gets the wrapping element of the DatePickerWithoutContext.
+   */
+  get element() {
+    return this._element;
+  }
+  /**
+   * The mobile mode of the DatePicker.
+   */
+  get mobileMode() {
+    return !!(this.state.windowWidth && this.state.windowWidth <= le && this.props.adaptive);
+  }
+  /**
+   * Gets the DateInput component inside the DatePicker component.
+   */
+  get dateInput() {
+    return this._dateInput.current;
+  }
+  /**
+   * Gets the Calendar component inside the DatePicker component.
+   */
+  get calendar() {
+    return this._calendar;
+  }
+  /**
+   * Gets the value of the DatePickerWithoutContext.
+   */
+  get value() {
+    const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
+    return i !== null ? C(i) : null;
+  }
+  /**
+   * Gets the popup state of the DatePickerWithoutContext.
+   */
+  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 DatePickerWithoutContext.
+   */
+  get name() {
+    return this.props.name;
+  }
+  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 dateInputComp() {
+    return this.props.dateInput || o.defaultProps.dateInput;
+  }
+  get toggleButtonComp() {
+    return this.props.toggleButton || o.defaultProps.toggleButton;
+  }
+  get calendarComp() {
+    return this.props.calendar || o.defaultProps.calendar;
+  }
+  get popupComp() {
+    return this.props.popup || o.defaultProps.popup;
+  }
+  get pickerWrapComp() {
+    return this.props.pickerWrap || o.defaultProps.pickerWrap;
+  }
+  /**
+   * Represents the validity state into which the DatePicker is set.
+   */
+  get validity() {
+    const i = Q(this.value, this.min, this.max), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, a = this.props.valid !== void 0 ? this.props.valid : s;
+    return {
+      customError: t,
+      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
+    };
+  }
+  /**
+   * @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
+   */
+  componentDidMount() {
+    var i;
+    this.observerResize = k && 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);
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate() {
+    this._calendar && this._calendar.element && this.show && !this.prevShow && this._calendar.element.focus({ preventScroll: !0 }), this.dateInput && this.dateInput.element && !this.show && this.shouldFocusDateInput && this.dateInput.element.focus({ preventScroll: !0 }), this.prevShow = this.show, this.shouldFocusDateInput = !1;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    var i;
+    clearTimeout(this.nextTickId), (i = this.document) != null && i.body && this.observerResize && this.observerResize.disconnect();
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      size: i = o.defaultProps.size,
+      rounded: t = o.defaultProps.rounded,
+      fillMode: s = o.defaultProps.fillMode,
+      disabled: a,
+      tabIndex: u,
+      title: c,
+      id: l,
+      format: m,
+      formatPlaceholder: f,
+      min: d,
+      max: g,
+      className: v,
+      width: w,
+      name: h,
+      validationMessage: M,
+      required: P,
+      validityStyles: T,
+      ariaLabelledBy: E,
+      ariaDescribedBy: x,
+      ariaLabel: B
+    } = this.props, z = this.show, V = this.value, b = !this.validityStyles || this.validity.valid, F = {
+      disabled: a,
+      format: m,
+      formatPlaceholder: f,
+      id: l,
+      ariaLabelledBy: E,
+      ariaDescribedBy: x,
+      ariaLabel: B,
+      max: g,
+      min: d,
+      name: h,
+      onChange: this.handleInputValueChange,
+      required: P,
+      tabIndex: z ? -1 : u,
+      title: c,
+      valid: this.validity.valid,
+      validationMessage: M,
+      validityStyles: T,
+      value: V,
+      label: void 0,
+      placeholder: this.state.focused ? null : this.props.placeholder,
+      ariaExpanded: this.show,
+      size: null,
+      fillMode: null,
+      rounded: null
+    }, y = te(this).toLanguageString(S, ee[S]), I = /* @__PURE__ */ n.createElement(
+      _,
+      {
+        onFocus: this.handleFocus,
+        onBlur: this.mobileMode ? void 0 : this.handleBlur,
+        onSyncBlur: this.props.onBlur,
+        onSyncFocus: this.props.onFocus
+      },
+      ({ onFocus: N, onBlur: R }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+        "span",
+        {
+          ref: (A) => {
+            this._element = A;
+          },
+          className: D(
+            "k-input",
+            "k-datepicker",
+            {
+              [`k-input-${O.sizeMap[i] || i}`]: i,
+              [`k-rounded-${O.roundedMap[t] || t}`]: t,
+              [`k-input-${s}`]: s,
+              "k-invalid": !b,
+              "k-required": this.required,
+              "k-disabled": this.props.disabled
+            },
+            v
+          ),
+          onKeyDown: this.handleKeyDown,
+          style: { width: w },
+          onFocus: N,
+          onBlur: R,
+          onClick: this.mobileMode ? this.handleIconClick : void 0
+        },
+        /* @__PURE__ */ n.createElement(
+          this.dateInputComp,
+          {
+            _ref: this._dateInput,
+            ariaRole: "combobox",
+            readonly: this.mobileMode,
+            ariaExpanded: this.show,
+            ariaControls: this._popupId,
+            ...F
+          }
+        ),
+        /* @__PURE__ */ n.createElement(
+          this.toggleButtonComp,
+          {
+            type: "button",
+            icon: "calendar",
+            svgIcon: H,
+            title: y,
+            className: "k-input-button",
+            rounded: null,
+            onClick: this.mobileMode ? void 0 : this.handleIconClick,
+            "aria-label": y,
+            onMouseDown: this.handleIconMouseDown
+          }
+        ),
+        !this.mobileMode && this.renderPopup()
+      ), this.mobileMode && this.renderAdaptivePopup())
+    );
+    return this.props.label ? /* @__PURE__ */ n.createElement(
+      ae,
+      {
+        dateInput: this._dateInput,
+        label: this.props.label,
+        editorId: l,
+        editorValid: b,
+        editorDisabled: this.props.disabled,
+        children: I,
+        style: { width: this.props.width }
+      }
+    ) : 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 ? Y(i, this.value) : i;
+  }
+  nextTick(i) {
+    clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
+  }
+  calculateMedia(i) {
+    for (let t of i)
+      this.setState({ windowWidth: t.target.clientWidth });
+  }
+};
+o.displayName = "DatePicker", 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,
+  ariaLabel: 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,
+  size: e.oneOf([null, "small", "medium", "large"]),
+  rounded: e.oneOf([null, "small", "medium", "large", "full"]),
+  fillMode: e.oneOf([null, "solid", "flat", "outline"]),
+  adaptive: e.bool,
+  adaptiveTitle: e.string
+}, o.defaultProps = {
+  defaultShow: !1,
+  defaultValue: null,
+  dateInput: Z,
+  calendar: j,
+  toggleButton: se,
+  popup: q,
+  pickerWrap: oe,
+  disabled: !1,
+  format: "d",
+  max: G,
+  min: J,
+  popupSettings: {},
+  tabIndex: 0,
+  weekNumber: !1,
+  required: !1,
+  validityStyles: !0,
+  size: "medium",
+  rounded: "medium",
+  fillMode: "solid"
+};
+let p = o;
+const de = K(), he = U($(de, p));
+he.displayName = "KendoReactDatePicker";
+ie(p);
+export {
+  he as DatePicker,
+  de as DatePickerPropsContext,
+  p as DatePickerWithoutContext
+};

package/datepicker/ToggleButton.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 t=require("@progress/kendo-react-buttons"),e=t.Button;exports.ToggleButton=e;

package/datepicker/ToggleButton.mjs

@@ -0,0 +1,13 @@
+/**
+ * @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 { Button as t } from "@progress/kendo-react-buttons";
+const e = t;
+export {
+  e as ToggleButton
+};

package/daterangepicker/DateRangePicker.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 R=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),r=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),O=require("@progress/kendo-svg-icons"),k=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),T=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),d=require("../utils.js"),x=require("../common/constants.js"),n=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function A(u){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const e in u)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(u,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>u[e]})}}return a.default=u,Object.freeze(a)}const i=A(R),l=class l 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=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,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:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(T.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={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?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:o=>this.handleCancel(o),adaptiveTitle:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(_.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{className:"!k-overflow-hidden"},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},o={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,o)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:o}=e;s===r.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):o&&s===r.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):o&&s===r.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:o}=this.props;if(o){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};o.call(void 0,m)}this.valueDuringOnChange=void 0},r.validatePackage(k.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},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"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}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:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(r.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=x.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=r.canUseDOM&&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)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const a=this.value||h.EMPTY_SELECTIONRANGE,e=this.mobileMode&&this.show?this.state.currentValue:a,s=(this.props.startDateInputSettings||{}).id||this._startInputId,o=(this.props.endDateInputSettings||{}).id||this._endInputId,m=r.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),b=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),S=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:b,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:e.start,onChange:this.handleStartChange},v={disableSelection:this.mobileMode&&!0,label:E,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:e.end,onChange:this.handleEndChange},C=i.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":s+" "+o,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(r.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:O.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:y=>{this._element=y},className:m,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?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...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?C:S,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,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=r.getActiveElement(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:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(let e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:d.nullable(t.instanceOf(Date).isRequired),end:d.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),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"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:d.nullable(t.instanceOf(Date).isRequired),end:d.nullable(t.instanceOf(Date).isRequired)})},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:d.MAX_DATE,min:d.MIN_DATE,swapButton:!1};let p=l;const I=r.createPropsContext(),w=r.withIdHOC(r.withPropsContext(I,p));w.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=w;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;