@progress/kendo-react-dateinputs 9.2.0-develop.9 → 9.3.0-develop.1

package/datepicker/DatePicker.mjs

@@ -6,419 +6,313 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as n from "react";
+import * as o from "react";
 import e from "prop-types";
-import { Popup as Y } from "@progress/kendo-react-popup";
-import { getDate as Z, cloneDate as O } from "@progress/kendo-date-math";
-import { classNames as k, Keys as r, validatePackage as G, canUseDOM as P, AsyncFocusBlur as J, kendoThemeMaps as T, createPropsContext as Q, withIdHOC as ee, withPropsContext as te, withAdaptiveModeContext as ie } from "@progress/kendo-react-common";
-import { calendarIcon as se } from "@progress/kendo-svg-icons";
-import { packageMetadata as oe } from "../package-metadata.mjs";
-import { DateInput as ae } from "../dateinput/DateInput.mjs";
-import { Calendar as ne } from "../calendar/components/Calendar.mjs";
-import { MAX_DATE as re, MIN_DATE as le, isInDateRange as de, setTime as ue } from "../utils.mjs";
-import { toggleCalendar as x, messages as he } from "../messages/index.mjs";
-import { provideLocalizationService as pe, registerForLocalization as ce } from "@progress/kendo-react-intl";
-import { ToggleButton as me } from "./ToggleButton.mjs";
-import { PickerWrap as fe } from "../common/PickerWrap.mjs";
-import { PickerFloatingLabel as ge } from "../hooks/usePickerFloatingLabel.mjs";
-import { ActionSheetContent as ve } from "@progress/kendo-react-layout";
-import { AdaptiveMode as we } from "../common/AdaptiveMode.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: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d && Z(d), u = k(f), b = {
-        popupClass: "k-datepicker-popup",
-        show: v,
-        anchor: this._element,
-        className: u,
-        id: this._popupId,
-        anchorAlign: {
-          horizontal: "left",
-          vertical: "bottom"
-        },
-        popupAlign: {
-          horizontal: "left",
-          vertical: "top"
-        },
-        ...g,
-        onMouseDownOutside: this.handleMouseDownOutside
-      }, h = {
-        disabled: t,
-        value: w,
-        min: s,
-        max: a,
-        weekNumber: c,
-        focusedDate: m,
-        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, { ...b }, /* @__PURE__ */ n.createElement(this.calendarComp, { _ref: this.setCalendarRef, ...h }));
-    }, this.renderAdaptivePopup = () => {
-      const { windowWidth: t = 0 } = this.state, s = {
-        expand: this.show,
-        onClose: this.handleBlur,
-        title: this.props.adaptiveTitle,
-        windowWidth: t
-      };
-      return /* @__PURE__ */ n.createElement(we, { ...s }, /* @__PURE__ */ n.createElement(ve, { overflowHidden: !0 }, 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: O(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.togglePopup = () => {
-      this.setShow(!this.show);
-    }, this.handleMouseDownOutside = (t) => {
-      var s;
-      (s = this.props.popupSettings) != null && s.onMouseDownOutside && this.props.popupSettings.onMouseDownOutside.call(void 0, t);
-    }, 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.show) {
-        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));
-    }, G(oe), this.state = {
-      value: this.props.defaultValue || o.defaultProps.defaultValue,
-      show: this.props.defaultShow || o.defaultProps.defaultShow,
-      focused: !1
+import { Popup as Je } from "@progress/kendo-react-popup";
+import { cloneDate as ne, getDate as Qe } from "@progress/kendo-date-math";
+import { validatePackage as et, useId as tt, useAdaptiveModeContext as nt, usePropsContext as ot, canUseDOM as oe, AsyncFocusBlur as rt, classNames as re, kendoThemeMaps as ae, createPropsContext as at, Keys as D } from "@progress/kendo-react-common";
+import { calendarIcon as it } from "@progress/kendo-svg-icons";
+import { packageMetadata as lt } from "../package-metadata.mjs";
+import { DateInput as ut } from "../dateinput/DateInput.mjs";
+import { Calendar as st } from "../calendar/components/Calendar.mjs";
+import { nullable as l, MAX_DATE as ct, MIN_DATE as dt, isInDateRange as ft, setTime as mt } from "../utils.mjs";
+import { toggleCalendar as ie, messages as pt } from "../messages/index.mjs";
+import { useLocalization as gt } from "@progress/kendo-react-intl";
+import { ToggleButton as ht } from "./ToggleButton.mjs";
+import { PickerWrap as vt } from "../common/PickerWrap.mjs";
+import { PickerFloatingLabel as wt } from "../hooks/usePickerFloatingLabel.mjs";
+import { ActionSheetContent as bt } from "@progress/kendo-react-layout";
+import { AdaptiveMode as yt } from "../common/AdaptiveMode.mjs";
+const le = o.forwardRef((n, ue) => {
+  et(lt);
+  const V = tt(n.id), se = gt(), g = nt(), {
+    defaultShow: ce = a.defaultShow,
+    defaultValue: de = a.defaultValue,
+    dateInput: fe = a.dateInput,
+    calendar: me = a.calendar,
+    toggleButton: pe = a.toggleButton,
+    popup: ge = a.popup,
+    pickerWrap: Rt = a.pickerWrap,
+    disabled: h = a.disabled,
+    format: he = a.format,
+    max: P = a.max,
+    min: I = a.min,
+    popupSettings: v = a.popupSettings,
+    tabIndex: ve = a.tabIndex,
+    weekNumber: we = a.weekNumber,
+    validityStyles: F = a.validityStyles,
+    size: S = a.size,
+    rounded: E = a.rounded,
+    fillMode: x = a.fillMode,
+    autoFocus: be = a.autoFocus,
+    show: N,
+    autoSwitchParts: ye,
+    autoSwitchKeys: Ce,
+    twoDigitYearMax: Re,
+    ariaLabel: ke,
+    adaptive: kt,
+    adaptiveTitle: De,
+    inputAttributes: Oe,
+    validationMessage: z,
+    _adaptiveMode: Dt = g,
+    valid: W,
+    focusedDate: Me,
+    ...L
+  } = ot(Ct, n), B = () => {
+    if (oe)
+      return b.current && b.current.ownerDocument || window.document;
+  }, s = () => !!(p.windowWidth && g && p.windowWidth <= (g == null ? void 0 : g.medium) && n.adaptive), d = () => {
+    const t = C.current !== void 0 && C.current !== null ? C.current : n.value !== void 0 ? n.value : p.value;
+    return t !== null ? ne(t) : null;
+  }, i = () => O.current !== void 0 ? O.current : N !== void 0 ? N : p.show, Pe = () => fe || a.dateInput, Ie = () => pe || a.toggleButton, Se = () => me || a.calendar, Ee = () => ge || a.popup, K = () => n.required !== void 0 ? n.required : !1, T = () => {
+    const t = d() || n.value || null, r = I, u = P, M = ft(t, r, u), _ = z !== void 0, q = (!K() || t != null) && M, A = W !== void 0 ? W : q;
+    return {
+      customError: _,
+      rangeOverflow: t && u.getTime() < t.getTime() || !1,
+      rangeUnderflow: t && t.getTime() < r.getTime() || !1,
+      valid: A,
+      valueMissing: t === null
     };
-  }
-  get _popupId() {
-    return this.props.id + "-popup-id";
-  }
-  get document() {
-    if (P)
-      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() {
+  }, xe = (t) => {
+    for (const r of t)
+      k({ windowWidth: r.target.clientWidth });
+  }, Be = () => {
+    c.current && c.current.focus();
+  }, H = (t) => {
+    y.current = t;
+  }, f = (t) => {
+    i() !== t && (k({ show: t }), t && n.onOpen && n.onOpen.call(void 0, { target: w.current }), !t && n.onClose && n.onClose.call(void 0, { target: w.current }));
+  }, Te = (t) => {
+    const r = d();
+    return r && t ? mt(t, r) : t;
+  }, _e = (t) => {
+    v != null && v.onMouseDownOutside && v.onMouseDownOutside.call(void 0, t);
+  }, U = (t, r) => {
+    k({ value: ne(t || void 0) }), C.current = t, O.current = !1, s() || (m.current = !0), n.onChange && n.onChange.call(void 0, {
+      syntheticEvent: r.syntheticEvent,
+      nativeEvent: r.nativeEvent,
+      value: d(),
+      show: i(),
+      target: w.current
+    }), C.current = void 0, O.current = void 0, f(!1);
+  }, qe = (t) => {
+    const r = Te(t.value);
+    U(r, t);
+  }, Y = () => {
+    const { popupClass: t, ...r } = v, u = i(), M = d(), _ = M && Qe(M), q = re(t), A = {
+      popupClass: "k-datepicker-popup",
+      show: u,
+      anchor: b.current,
+      className: q,
+      id: Z,
+      anchorAlign: {
+        horizontal: "left",
+        vertical: "bottom"
+      },
+      popupAlign: {
+        horizontal: "left",
+        vertical: "top"
+      },
+      ...r,
+      onMouseDownOutside: _e
+    }, ee = {
+      disabled: h,
+      value: _,
+      min: I,
+      max: P,
+      weekNumber: we,
+      focusedDate: Me,
+      className: s() ? "k-calendar-lg" : "",
+      navigation: !s(),
+      onChange: qe
+    }, te = Se(), Ge = Ee();
+    return s() ? /* @__PURE__ */ o.createElement(te, { _ref: H, ...ee }) : /* @__PURE__ */ o.createElement(Ge, { ...A }, /* @__PURE__ */ o.createElement(te, { _ref: H, ...ee }));
+  }, $ = () => {
+    k({ focused: !1 }), f(!1);
+  }, Ae = () => {
+    const { windowWidth: t = 0 } = p, r = {
+      expand: i(),
+      onClose: $,
+      adaptiveTitle: De,
+      windowWidth: t
+    }, u = Y();
+    return /* @__PURE__ */ o.createElement(yt, { ...r }, /* @__PURE__ */ o.createElement(bt, { overflowHidden: !0 }, u));
+  }, Ve = (t) => {
+    U(t.value, t);
+  }, Fe = () => {
+    k({ focused: !0 });
+  }, Ne = () => {
+    f(!i());
+  }, j = () => {
+    h || (m.current = !0, f(!i()));
+  }, ze = (t) => {
+    t.preventDefault();
+  }, We = (t) => {
+    const { altKey: r, keyCode: u } = t;
+    if (u === D.esc && i()) {
+      m.current = !0, f(!1);
+      return;
+    }
+    r && (u === D.up || u === D.down) && (t.preventDefault(), t.stopPropagation(), m.current = u === D.up, f(u === D.down));
+  }, w = o.useRef(null), b = o.useRef(null), c = o.useRef(null), y = o.useRef(null);
+  o.useImperativeHandle(
+    w,
+    () => ({
+      props: n,
+      get element() {
+        return b.current;
+      },
+      get calendar() {
+        return y.current;
+      },
+      get dateInput() {
+        return c.current;
+      },
+      get name() {
+        return n.name;
+      },
+      get show() {
+        return i();
+      },
+      get validity() {
+        return T();
+      },
+      get value() {
+        return d();
+      },
+      get mobileMode() {
+        return s();
+      },
+      togglePopup: Ne,
+      // Hidden Methods but still accessible
+      focus: Be
+    })
+  ), o.useImperativeHandle(ue, () => w.current);
+  const C = o.useRef(null), O = o.useRef(void 0), Le = o.useRef(null), m = o.useRef(!1), X = o.useRef(!1), R = o.useRef(null), [p, Ke] = o.useState({
+    value: de,
+    show: ce,
+    focused: !1
+  }), [, He] = o.useReducer((t) => t, !0), k = (t) => {
+    Ke((r) => ({ ...r, ...t }));
+  };
+  o.useEffect(() => {
+    y.current && y.current.element && i() && !X.current && y.current.element.focus({ preventScroll: !0 }), c.current && c.current.element && !i() && m.current && c.current.element.focus({ preventScroll: !0 }), X.current = i(), m.current = !1;
+  }), o.useEffect(() => {
     var t;
-    return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((t = this.props._adaptiveMode) == null ? void 0 : t.medium) && 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 ? O(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 = de(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
+    return R.current = oe && window.ResizeObserver && new window.ResizeObserver((r) => xe(r)), i() && He(), (t = B()) != null && t.body && R.current && R.current.observe(B().body), () => {
+      var r;
+      clearTimeout(Le.current), (r = B()) != null && r.body && R.current && R.current.disconnect();
     };
-  }
-  /**
-   * @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 : !1;
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    var i;
-    this.observerResize = P && 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: c,
-      title: m,
-      id: l,
-      format: f,
-      formatPlaceholder: g,
-      min: v,
-      max: d,
-      className: w,
-      width: u,
-      name: b,
-      validationMessage: h,
-      required: B,
-      validityStyles: F,
-      ariaLabelledBy: E,
-      ariaDescribedBy: z,
-      ariaLabel: V,
-      placeholder: N,
-      label: C,
-      popupSettings: ye,
-      defaultValue: De,
-      defaultShow: Ie,
-      value: Me,
-      popup: Se,
-      weekNumber: Oe,
-      dateInput: ke,
-      calendar: Pe,
-      toggleButton: Te,
-      onChange: xe,
-      onBlur: Be,
+  }, []);
+  const Z = V + "-popup-id", Ue = Y(), Ye = Pe(), $e = d(), je = Ie(), Xe = Ae(), G = !F || T().valid, J = se.toLanguageString(ie, pt[ie]), Ze = {
+    disabled: h,
+    format: he,
+    formatPlaceholder: n.formatPlaceholder,
+    id: n.id,
+    ariaLabelledBy: n.ariaLabelledBy,
+    ariaDescribedBy: n.ariaDescribedBy,
+    ariaLabel: ke,
+    max: P,
+    min: I,
+    name: n.name,
+    onChange: Ve,
+    required: n.required,
+    tabIndex: i() ? -1 : ve,
+    title: n.title,
+    valid: T().valid,
+    validationMessage: z,
+    validityStyles: F,
+    value: $e,
+    label: void 0,
+    placeholder: p.focused ? null : n.placeholder,
+    ariaExpanded: i(),
+    size: null,
+    fillMode: null,
+    rounded: null,
+    autoFill: n.autoFill,
+    twoDigitYearMax: Re,
+    enableMouseWheel: n.enableMouseWheel,
+    autoCorrectParts: n.autoCorrectParts,
+    autoSwitchParts: ye,
+    autoSwitchKeys: Ce,
+    allowCaretMode: n.allowCaretMode,
+    inputAttributes: Oe
+  }, Q = /* @__PURE__ */ o.createElement(
+    rt,
+    {
       onFocus: Fe,
-      show: Ee,
-      onOpen: ze,
-      pickerWrap: Ve,
-      adaptive: Ne,
-      adaptiveTitle: Re,
-      valid: Ae,
-      autoFocus: R,
-      inputAttributes: A,
-      // Removed to support direct use in Form Field component
-      visited: We,
-      touched: _e,
-      modified: qe,
-      autoFill: W,
-      twoDigitYearMax: _,
-      enableMouseWheel: q,
-      autoCorrectParts: L,
-      autoSwitchParts: K,
-      autoSwitchKeys: U,
-      allowCaretMode: $,
-      _adaptiveMode: Le,
-      ...y
-    } = this.props, H = this.value, D = !this.validityStyles || this.validity.valid, j = {
-      disabled: a,
-      format: f,
-      formatPlaceholder: g,
-      id: l,
-      ariaLabelledBy: E,
-      ariaDescribedBy: z,
-      ariaLabel: V,
-      max: d,
-      min: v,
-      name: b,
-      onChange: this.handleInputValueChange,
-      required: B,
-      tabIndex: this.show ? -1 : c,
-      title: m,
-      valid: this.validity.valid,
-      validationMessage: h,
-      validityStyles: F,
-      value: H,
-      label: void 0,
-      placeholder: this.state.focused ? null : N,
-      ariaExpanded: this.show,
-      size: null,
-      fillMode: null,
-      rounded: null,
-      autoFill: W,
-      twoDigitYearMax: _,
-      enableMouseWheel: q,
-      autoCorrectParts: L,
-      autoSwitchParts: K,
-      autoSwitchKeys: U,
-      allowCaretMode: $,
-      inputAttributes: A
-    }, I = pe(this).toLanguageString(
-      x,
-      he[x]
-    ), M = /* @__PURE__ */ n.createElement(
-      J,
+      onBlur: s() ? void 0 : $,
+      onSyncBlur: n.onBlur,
+      onSyncFocus: n.onFocus
+    },
+    (t) => /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+      "span",
       {
-        onFocus: this.handleFocus,
-        onBlur: this.mobileMode ? void 0 : this.handleBlur,
-        onSyncBlur: this.props.onBlur,
-        onSyncFocus: this.props.onFocus
-      },
-      (S) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
-        "span",
-        {
-          ...C ? {} : y,
-          ref: (X) => {
-            this._element = X;
-          },
-          className: k(
-            "k-input",
-            "k-datepicker",
-            {
-              [`k-input-${T.sizeMap[i] || i}`]: i,
-              [`k-rounded-${T.roundedMap[t] || t}`]: t,
-              [`k-input-${s}`]: s,
-              "k-invalid": !D,
-              "k-required": this.required,
-              "k-disabled": a
-            },
-            w
-          ),
-          onKeyDown: this.handleKeyDown,
-          style: { width: u },
-          onFocus: S.onFocus,
-          onBlur: S.onBlur,
-          onClick: this.mobileMode ? this.handleIconClick : void 0
-        },
-        /* @__PURE__ */ n.createElement(
-          this.dateInputComp,
+        ...n.label ? {} : L,
+        ref: b,
+        className: re(
+          "k-input",
+          "k-datepicker",
           {
-            _ref: this._dateInput,
-            ariaRole: "combobox",
-            ariaExpanded: this.show,
-            ariaControls: this._popupId,
-            autoFocus: R,
-            ...j
-          }
-        ),
-        /* @__PURE__ */ n.createElement(
-          this.toggleButtonComp,
-          {
-            type: "button",
-            icon: "calendar",
-            svgIcon: se,
-            title: I,
-            className: "k-input-button",
-            rounded: null,
-            onClick: this.mobileMode ? void 0 : this.handleIconClick,
-            "aria-label": I,
-            fillMode: s,
-            onMouseDown: this.handleIconMouseDown
-          }
+            [`k-input-${ae.sizeMap[S] || S}`]: S,
+            [`k-rounded-${ae.roundedMap[E] || E}`]: E,
+            [`k-input-${x}`]: x,
+            "k-invalid": !G,
+            "k-required": K(),
+            "k-disabled": h
+          },
+          n.className
         ),
-        !this.mobileMode && this.renderPopup()
-      ), this.mobileMode && this.renderAdaptivePopup())
-    );
-    return C ? /* @__PURE__ */ n.createElement(
-      ge,
-      {
-        dateInput: this._dateInput,
-        label: C,
-        editorId: l,
-        editorValid: D,
-        editorDisabled: a,
-        children: M,
-        style: { width: u },
-        ...y
-      }
-    ) : M;
-  }
-  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 ? ue(i, this.value) : i;
-  }
-  nextTick(i) {
-    clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
-  }
-  calculateMedia(i) {
-    for (const t of i)
-      this.setState({ windowWidth: t.target.clientWidth });
-  }
-};
-o.displayName = "DatePicker", o.propTypes = {
+        onKeyDown: We,
+        style: { width: n.width },
+        onFocus: t.onFocus,
+        onBlur: t.onBlur,
+        onClick: s() ? j : void 0
+      },
+      /* @__PURE__ */ o.createElement(
+        Ye,
+        {
+          _ref: c,
+          ariaRole: "combobox",
+          ariaExpanded: i(),
+          ariaControls: Z,
+          autoFocus: be,
+          ...Ze
+        }
+      ),
+      /* @__PURE__ */ o.createElement(
+        je,
+        {
+          type: "button",
+          icon: "calendar",
+          svgIcon: it,
+          title: J,
+          className: "k-input-button",
+          rounded: null,
+          onClick: s() ? void 0 : j,
+          "aria-label": J,
+          fillMode: x,
+          onMouseDown: ze
+        }
+      ),
+      !s() && Ue
+    ), s() && Xe)
+  );
+  return n.label ? /* @__PURE__ */ o.createElement(
+    wt,
+    {
+      dateInput: c,
+      label: n.label,
+      editorId: V,
+      editorValid: G,
+      editorDisabled: h,
+      children: Q,
+      style: { width: n.width },
+      ...L
+    }
+  ) : Q;
+});
+le.propTypes = {
   className: e.string,
   defaultShow: e.bool,
   defaultValue: e.instanceOf(Date),
@@ -427,37 +321,32 @@ o.displayName = "DatePicker", o.propTypes = {
   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"])
+      skeleton: l(e.string),
+      pattern: l(e.string),
+      date: l(e.oneOf(["short", "medium", "long", "full"])),
+      time: l(e.oneOf(["short", "medium", "long", "full"])),
+      datetime: l(e.oneOf(["short", "medium", "long", "full"])),
+      era: l(e.oneOf(["narrow", "short", "long"])),
+      year: l(e.oneOf(["numeric", "2-digit"])),
+      month: l(e.oneOf(["numeric", "2-digit", "narrow", "short", "long"])),
+      day: l(e.oneOf(["numeric", "2-digit"])),
+      weekday: l(e.oneOf(["narrow", "short", "long"])),
+      hour: l(e.oneOf(["numeric", "2-digit"])),
+      hour12: l(e.bool),
+      minute: l(e.oneOf(["numeric", "2-digit"])),
+      second: l(e.oneOf(["numeric", "2-digit"])),
+      timeZoneName: l(e.oneOf(["short", "long"]))
     })
   ]),
   formatPlaceholder: e.oneOfType([
-    e.oneOf([
-      "wide",
-      "narrow",
-      "short",
-      "formatPattern"
-    ]),
+    e.oneOf(["wide", "narrow", "short", "formatPattern"]).isRequired,
     e.shape({
-      year: e.string,
-      month: e.string,
-      day: e.string,
-      hour: e.string,
-      minute: e.string,
-      second: e.string
+      year: e.string.isRequired,
+      month: e.string.isRequired,
+      day: e.string.isRequired,
+      hour: e.string.isRequired,
+      minute: e.string.isRequired,
+      second: e.string.isRequired
     })
   ]),
   id: e.string,
@@ -468,9 +357,9 @@ o.displayName = "DatePicker", o.propTypes = {
   max: e.instanceOf(Date),
   name: e.string,
   popupSettings: e.shape({
-    animate: e.bool,
-    appendTo: e.any,
-    popupClass: e.string
+    animate: e.bool.isRequired,
+    appendTo: e.any.isRequired,
+    popupClass: e.string.isRequired
   }),
   show: e.bool,
   tabIndex: e.number,
@@ -480,7 +369,6 @@ o.displayName = "DatePicker", o.propTypes = {
   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"]),
@@ -489,18 +377,19 @@ o.displayName = "DatePicker", o.propTypes = {
   adaptiveTitle: e.string,
   autoFocus: e.bool,
   inputAttributes: e.object
-}, o.defaultProps = {
+};
+const a = {
   defaultShow: !1,
   defaultValue: null,
-  dateInput: ae,
-  calendar: ne,
-  toggleButton: me,
-  popup: Y,
-  pickerWrap: fe,
+  dateInput: ut,
+  calendar: st,
+  toggleButton: ht,
+  popup: Je,
+  pickerWrap: vt,
   disabled: !1,
   format: "d",
-  max: re,
-  min: le,
+  max: ct,
+  min: dt,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
@@ -509,18 +398,10 @@ o.displayName = "DatePicker", o.propTypes = {
   rounded: "medium",
   fillMode: "solid",
   autoFocus: !1
-};
-let p = o;
-const be = Q(), Ce = ee(
-  te(
-    be,
-    ie(p)
-  )
-);
-Ce.displayName = "KendoReactDatePicker";
-ce(p);
+}, Ct = at();
+le.displayName = "KendoReactDatePicker";
 export {
-  Ce as DatePicker,
-  be as DatePickerPropsContext,
-  p as DatePickerWithoutContext
+  le as DatePicker,
+  Ct as DatePickerPropsContext,
+  a as datePickerDefaultProps
 };