@progress/kendo-react-dateinputs 11.0.0-develop.5 → 11.0.0-develop.7

package/daterangepicker/DateRangePicker.mjs

@@ -7,20 +7,20 @@
  */
 import * as i from "react";
 import e from "prop-types";
-import { Popup as T } from "@progress/kendo-react-popup";
+import { Popup as _ } from "@progress/kendo-react-popup";
 import { cloneDate as w } from "@progress/kendo-date-math";
-import { classNames as b, Keys as c, validatePackage as _, canUseDOM as D, IconWrap as A, WatermarkOverlay as F, getActiveElement as P, createPropsContext as B, withIdHOC as z, withPropsContext as N, withAdaptiveModeContext as L } from "@progress/kendo-react-common";
-import { provideLocalizationService as m, registerForLocalization as V } from "@progress/kendo-react-intl";
-import { arrowsSwapIcon as W } from "@progress/kendo-svg-icons";
-import { packageMetadata as K } from "../package-metadata.mjs";
+import { classNames as b, Keys as c, validatePackage as F, canUseDOM as D, IconWrap as P, WatermarkOverlay as z, getActiveElement as B, createPropsContext as L, withIdHOC as N, withPropsContext as V, withAdaptiveModeContext as W } from "@progress/kendo-react-common";
+import { provideLocalizationService as m, registerForLocalization as K } from "@progress/kendo-react-intl";
+import { arrowsSwapIcon as U } from "@progress/kendo-svg-icons";
+import { packageMetadata as q } from "../package-metadata.mjs";
 import { DateInput as f } from "../dateinput/DateInput.mjs";
-import { MultiViewCalendar as U } from "../calendar/components/MultiViewCalendar.mjs";
+import { MultiViewCalendar as j } 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 j } from "../utils.mjs";
-import { start as I, messages as l, end as C, separator as S, swapStartEnd as u } from "../messages/index.mjs";
-import { Button as G } from "@progress/kendo-react-buttons";
-import { AdaptiveMode as H } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as X } from "@progress/kendo-react-layout";
+import { nullable as h, MAX_DATE as G, MIN_DATE as H } from "../utils.mjs";
+import { dateRangePickerCancel as I, messages as l, dateRangePickerSet as C, start as S, end as E, separator as y, swapStartEnd as p } from "../messages/index.mjs";
+import { Button as X } from "@progress/kendo-react-buttons";
+import { AdaptiveMode as Y } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as Z } 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.showLicenseWatermark = !1, this.focus = () => {
@@ -44,7 +44,7 @@ const o = class o extends i.Component {
         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 });
+      return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(j, { ...s, ref: this.setCalendarRef });
     }, this.renderPopup = () => {
       const t = {
         popupClass: b("k-calendar-container", "k-daterangepicker-popup"),
@@ -62,16 +62,24 @@ const o = class o extends i.Component {
         ...this.props.popupSettings,
         show: this.show
       };
-      return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(T, { ...t }, this.renderCalendar());
+      return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(_, { ...t }, this.renderCalendar());
     }, this.renderAdaptivePopup = () => {
       const { windowWidth: t = 0 } = this.state, s = {
         expand: this.show,
-        onClose: (n) => this.handleBlur(n),
+        onClose: (n) => this.handleCancel(n),
         title: this.props.adaptiveTitle,
-        subTitle: this.props.adaptiveSubtitle,
-        windowWidth: t
+        windowWidth: t,
+        footer: {
+          cancelText: this.localizationService.toLanguageString(
+            I,
+            l[I]
+          ),
+          onCancel: this.handleCancel,
+          applyText: this.localizationService.toLanguageString(C, l[C]),
+          onApply: this.handleBlur
+        }
       };
-      return /* @__PURE__ */ i.createElement(H, { ...s }, /* @__PURE__ */ i.createElement(X, null, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
+      return /* @__PURE__ */ i.createElement(Y, { ...s }, /* @__PURE__ */ i.createElement(Z, null, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
     }, this.handleReverseClick = (t) => {
       const s = {
         start: this.value.end,
@@ -141,7 +149,7 @@ const o = class o extends i.Component {
         n.call(void 0, d);
       }
       this.valueDuringOnChange = void 0;
-    }, this.showLicenseWatermark = !_(K, { component: "DateRangePicker" }), this.state = {
+    }, this.showLicenseWatermark = !F(q, { component: "DateRangePicker" }), this.state = {
       show: this.props.show || this.props.defaultShow || o.defaultProps.defaultShow,
       value: this.props.value || this.props.defaultValue || o.defaultProps.defaultValue,
       currentValue: r
@@ -238,15 +246,15 @@ const o = class o extends i.Component {
    * @hidden
    */
   render() {
-    const { autoFocus: a, inputAttributes: t } = this.props, s = this.value || r, n = this.mobileMode && this.show ? this.state.currentValue : s, d = (this.props.startDateInputSettings || {}).id || this._startInputId, E = (this.props.endDateInputSettings || {}).id || this._endInputId, y = b(
+    const { autoFocus: a, inputAttributes: t } = this.props, s = this.value || r, n = this.mobileMode && this.show ? this.state.currentValue : s, d = (this.props.startDateInputSettings || {}).id || this._startInputId, x = (this.props.endDateInputSettings || {}).id || this._endInputId, k = b(
       "k-daterangepicker",
       {
         "k-disabled": this.props.disabled
       },
       this.props.className
-    ), x = this.localizationService.toLanguageString(I, l[I]), k = this.localizationService.toLanguageString(C, l[C]), M = this.localizationService.toLanguageString(S, l[S]), v = {
+    ), M = this.localizationService.toLanguageString(S, l[S]), O = this.localizationService.toLanguageString(E, l[E]), R = this.localizationService.toLanguageString(y, l[y]), g = {
       disableSelection: this.mobileMode && !0,
-      label: x,
+      label: M,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -260,9 +268,9 @@ const o = class o extends i.Component {
       value: n.start,
       onChange: this.handleStartChange,
       inputAttributes: this.props.inputAttributes
-    }, g = {
+    }, v = {
       disableSelection: this.mobileMode && !0,
-      label: k,
+      label: O,
       format: this.props.format,
       min: this.min,
       max: this.max,
@@ -276,30 +284,30 @@ const o = class o extends i.Component {
       value: n.end,
       onChange: this.handleEndChange,
       inputAttributes: this.props.inputAttributes
-    }, O = /* @__PURE__ */ i.createElement(
-      G,
+    }, T = /* @__PURE__ */ i.createElement(
+      X,
       {
         type: "button",
         className: "k-select",
         fillMode: "flat",
-        title: m(this).toLanguageString(u, l[u]),
+        title: m(this).toLanguageString(p, l[p]),
         onMouseDown: this.handleReverseMouseDown,
         onClick: this.handleReverseClick,
-        "aria-controls": d + " " + E,
+        "aria-controls": d + " " + x,
         "aria-label": m(this).toLanguageString(
-          u,
-          l[u]
+          p,
+          l[p]
         )
       },
-      /* @__PURE__ */ i.createElement(A, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: W })
+      /* @__PURE__ */ i.createElement(P, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: U })
     );
     return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
       "span",
       {
-        ref: (R) => {
-          this._element = R;
+        ref: (A) => {
+          this._element = A;
         },
-        className: y,
+        className: k,
         style: this.props.style,
         id: this.props.id,
         "aria-labelledby": this.props.ariaLabelledBy,
@@ -311,33 +319,33 @@ const o = class o extends i.Component {
         onBlur: this.mobileMode ? void 0 : this.handleBlur,
         dir: this.props.dir
       },
-      this.props.startDateInput ? /* @__PURE__ */ i.createElement(this.props.startDateInput, { ...v }) : /* @__PURE__ */ i.createElement(
+      this.props.startDateInput ? /* @__PURE__ */ i.createElement(this.props.startDateInput, { ...g }) : /* @__PURE__ */ i.createElement(
         f,
         {
-          ...v,
+          ...g,
           autoFocus: a,
           ref: this._startDateInput,
           ariaRole: "combobox",
           ariaControls: this._popupId
         }
       ),
-      (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? O : M,
-      this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...g }) : /* @__PURE__ */ i.createElement(
+      (this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? T : R,
+      this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...v }) : /* @__PURE__ */ i.createElement(
         f,
         {
-          ...g,
+          ...v,
           ref: this._endDateInput,
           ariaRole: "combobox",
           ariaControls: this._popupId
         }
       ),
       !this.mobileMode && this.renderPopup()
-    ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(F, null));
+    ), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(z, null));
   }
   focusDateInputElement() {
     if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element)
       return;
-    const a = P(document);
+    const a = B(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) {
@@ -415,22 +423,22 @@ o.displayName = "DateRangePicker", o.propTypes = {
   defaultValue: r,
   disabled: !1,
   format: "d",
-  max: q,
-  min: j,
+  max: G,
+  min: H,
   swapButton: !1,
   autoFocus: !1
 };
-let p = o;
-const Y = B(), Z = z(
-  N(
-    Y,
-    L(p)
+let u = o;
+const J = L(), Q = N(
+  V(
+    J,
+    W(u)
   )
 );
-Z.displayName = "KendoReactDateRangePicker";
-V(p);
+Q.displayName = "KendoReactDateRangePicker";
+K(u);
 export {
-  Z as DateRangePicker,
-  Y as DateRangePickerPropsContext,
-  p as DateRangePickerWithoutContext
+  Q as DateRangePicker,
+  J as DateRangePickerPropsContext,
+  u as DateRangePickerWithoutContext
 };