@progress/kendo-react-dateinputs 15.1.1-develop.3 → 15.2.0-develop.2

package/datetimepicker/DateTimePicker.mjs

@@ -7,20 +7,20 @@
  */
 import * as n from "react";
 import e from "prop-types";
-import { Popup as ie } from "@progress/kendo-react-popup";
+import { Popup as ee } from "@progress/kendo-react-popup";
 import { cloneDate as P } from "@progress/kendo-date-math";
-import { createPropsContext as se, Keys as d, canUseDOM as C, subscribeToKendoPaste as oe, AsyncFocusBlur as ae, classNames as S, uDateTimePicker as T, withIdHOC as ne, withPropsContext as re, withUnstyledHOC as le, withAdaptiveModeContext as he } from "@progress/kendo-react-common";
-import { calendarIcon as de } from "@progress/kendo-svg-icons";
-import { DateInputInner as ue } from "../dateinput/DateInput.mjs";
-import { Button as pe } from "@progress/kendo-react-buttons";
-import { isInDateRange as M, MIN_DATE as ce, MAX_DATE as me, MAX_TIME as fe, MIN_TIME as ge } from "../utils.mjs";
-import { dateTimePickerCancel as O, messages as u, dateTimePickerSet as x, selectDateAndTime as k, toggleDateTimeSelector as m } from "../messages/index.mjs";
-import { provideLocalizationService as p, registerForLocalization as ve } from "@progress/kendo-react-intl";
-import { DateTimeSelector as be } from "./DateTimeSelector.mjs";
-import { isInTimeRange as we } from "../timepicker/utils.mjs";
-import { PickerFloatingLabel as ye } from "../hooks/usePickerFloatingLabel.mjs";
-import { AdaptiveMode as Se } from "../common/AdaptiveMode.mjs";
-import { ActionSheetContent as Te } from "@progress/kendo-react-layout";
+import { createPropsContext as te, Keys as d, canUseDOM as C, subscribeToKendoPaste as ie, AsyncFocusBlur as se, classNames as S, uDateTimePicker as I, withIdHOC as oe, withPropsContext as ae, withUnstyledHOC as ne, withAdaptiveModeContext as re } from "@progress/kendo-react-common";
+import { calendarIcon as le } from "@progress/kendo-svg-icons";
+import { DateInputInner as he } from "../dateinput/DateInput.mjs";
+import { Button as de } from "@progress/kendo-react-buttons";
+import { isInDateRange as M, MIN_DATE as ue, MAX_DATE as pe, MAX_TIME as ce, MIN_TIME as me } from "../utils.mjs";
+import { dateTimePickerCancel as O, messages as p, dateTimePickerSet as x, toggleDateTimeSelector as c } from "../messages/index.mjs";
+import { provideLocalizationService as m, registerForLocalization as fe } from "@progress/kendo-react-intl";
+import { DateTimeSelector as ge } from "./DateTimeSelector.mjs";
+import { isInTimeRange as ve } from "../timepicker/utils.mjs";
+import { PickerFloatingLabel as be } from "../hooks/usePickerFloatingLabel.mjs";
+import { AdaptiveMode as we } from "../common/AdaptiveMode.mjs";
+import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
 const a = class a extends n.Component {
   constructor(i) {
     super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.handleSmartPasteValue = (t) => {
@@ -50,14 +50,14 @@ const a = class a extends n.Component {
       const t = this.dateInputElement();
       t && t.focus();
     }, this.renderPicker = () => {
-      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: c, unstyled: v } = this.props;
+      const { disabled: t, minTime: s, maxTime: o, format: h, calendar: r, cancelButton: l, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
       return /* @__PURE__ */ n.createElement(
-        be,
+        ge,
         {
           ref: (b) => {
             this._dateTimeSelector = b;
           },
-          cancelButton: r,
+          cancelButton: l,
           steps: this.props.steps,
           value: this.value,
           onChange: this.handleValueChange,
@@ -68,21 +68,21 @@ const a = class a extends n.Component {
           max: this.max,
           minTime: s,
           maxTime: o,
-          focusedDate: c,
+          focusedDate: u,
           format: h,
-          calendar: l,
+          calendar: r,
           mobileMode: this.mobileMode,
           footerActions: !this.mobileMode,
           unstyled: v
         }
       );
     }, this.renderAdaptivePopup = () => {
-      const { windowWidth: t = 0 } = this.state, s = p(this).toLanguageString(
+      const { windowWidth: t = 0 } = this.state, s = m(this).toLanguageString(
         O,
-        u[O]
-      ), o = p(this).toLanguageString(
+        p[O]
+      ), o = m(this).toLanguageString(
         x,
-        u[x]
+        p[x]
       ), h = {
         expand: this.show,
         onClose: this.handleBlur,
@@ -91,18 +91,18 @@ const a = class a extends n.Component {
         windowWidth: t,
         footer: {
           cancelText: s,
-          onCancel: (l) => {
-            var r;
-            return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
+          onCancel: (r) => {
+            var l;
+            return (l = this._dateTimeSelector) == null ? void 0 : l.handleReject(r);
           },
           applyText: o,
-          onApply: (l) => {
-            var r;
-            return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
+          onApply: (r) => {
+            var l;
+            return (l = this._dateTimeSelector) == null ? void 0 : l.handleAccept(r);
           }
         }
       };
-      return /* @__PURE__ */ n.createElement(Se, { ...h }, /* @__PURE__ */ n.createElement(Te, null, this.renderPicker()));
+      return /* @__PURE__ */ n.createElement(we, { ...h }, /* @__PURE__ */ n.createElement(ye, null, this.renderPicker()));
     }, this.handleReject = () => {
       this.shouldFocusDateInput = !0, this.setShow(!1);
     }, this.handleValueChange = (t) => {
@@ -193,7 +193,7 @@ const a = class a extends n.Component {
    * Represents the validity state into which the DateTimePicker is set.
    */
   get validity() {
-    const i = M(this.value, this.min, this.max) && we(this.value, this.props.minTime || ge, this.props.maxTime || fe), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, o = this.props.valid !== void 0 ? this.props.valid : s;
+    const i = M(this.value, this.min, this.max) && ve(this.value, this.props.minTime || me, this.props.maxTime || ce), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, o = this.props.valid !== void 0 ? this.props.valid : s;
     return {
       customError: t,
       rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
@@ -227,7 +227,7 @@ const a = class a extends n.Component {
     var t;
     this.observerResize = C && 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);
     const i = this.props.name || this.props.id;
-    this.KendoPasteSubscription = oe(this._element, {
+    this.KendoPasteSubscription = ie(this._element, {
       fieldName: i,
       onValueChange: (s) => {
         this.handleSmartPasteValue(s);
@@ -260,54 +260,51 @@ const a = class a extends n.Component {
       fillMode: s = a.defaultProps.fillMode,
       autoFocus: o = a.defaultProps.autoFocus,
       inputAttributes: h,
-      disabled: l,
-      tabIndex: r,
+      disabled: r,
+      tabIndex: l,
       title: g,
-      id: c,
+      id: u,
       format: v,
       formatPlaceholder: b,
-      min: E,
-      max: F,
-      className: A,
-      width: N,
-      name: R,
-      validationMessage: B,
-      required: z,
-      validityStyles: _,
-      minTime: K,
-      maxTime: L,
-      ariaLabelledBy: V,
-      ariaDescribedBy: q,
-      popup: U = ie,
+      min: k,
+      max: E,
+      className: F,
+      width: A,
+      name: N,
+      validationMessage: R,
+      required: B,
+      validityStyles: z,
+      minTime: _,
+      maxTime: K,
+      ariaLabelledBy: L,
+      ariaDescribedBy: V,
+      popup: q = ee,
       unstyled: w,
-      autoFill: j,
-      twoDigitYearMax: H,
-      enableMouseWheel: W,
-      autoCorrectParts: X,
-      autoSwitchParts: Y,
-      autoSwitchKeys: Z,
-      allowCaretMode: G
-    } = this.props, y = w && w.uDateTimePicker, D = !this.validityStyles || this.validity.valid, J = p(this).toLanguageString(
-      k,
-      u[k]
-    ), Q = {
-      id: c,
-      ariaLabelledBy: V,
-      ariaDescribedBy: q,
-      ariaLabel: J,
+      autoFill: U,
+      twoDigitYearMax: j,
+      enableMouseWheel: H,
+      autoCorrectParts: W,
+      autoSwitchParts: X,
+      autoSwitchKeys: Y,
+      allowCaretMode: Z
+    } = this.props, y = w && w.uDateTimePicker, T = !this.validityStyles || this.validity.valid, G = {
+      id: u,
+      ariaLabelledBy: L,
+      ariaDescribedBy: V,
+      ariaLabel: this.props.ariaLabel,
       format: v,
       formatPlaceholder: b,
-      disabled: l,
+      disabled: r,
       title: g,
-      validityStyles: _,
-      validationMessage: B,
-      required: z,
-      min: E,
-      max: F,
-      minTime: K,
-      maxTime: L,
-      name: R,
-      tabIndex: this.show ? -1 : r,
+      validityStyles: z,
+      validationMessage: R,
+      required: B,
+      min: k,
+      max: E,
+      minTime: _,
+      maxTime: K,
+      name: N,
+      tabIndex: this.show ? -1 : l,
       valid: this.validity.valid,
       value: this.value,
       onChange: this.handleValueChange,
@@ -316,44 +313,44 @@ const a = class a extends n.Component {
       placeholder: this.state.focused ? null : this.props.placeholder,
       ariaExpanded: this.show,
       unstyled: w,
-      autoFill: j,
-      twoDigitYearMax: H,
-      enableMouseWheel: W,
-      autoCorrectParts: X,
-      autoSwitchParts: Y,
-      autoSwitchKeys: Z,
-      allowCaretMode: G
-    }, I = /* @__PURE__ */ n.createElement(
-      ae,
+      autoFill: U,
+      twoDigitYearMax: j,
+      enableMouseWheel: H,
+      autoCorrectParts: W,
+      autoSwitchParts: X,
+      autoSwitchKeys: Y,
+      allowCaretMode: Z
+    }, D = /* @__PURE__ */ n.createElement(
+      se,
       {
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         onSyncFocus: this.props.onFocus,
         onSyncBlur: this.props.onBlur
       },
-      ({ onFocus: $, onBlur: ee }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
+      ({ onFocus: J, onBlur: Q }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
         "div",
         {
-          ref: (te) => {
-            this._element = te;
+          ref: ($) => {
+            this._element = $;
           },
           className: S(
-            T.wrapper({
+            I.wrapper({
               c: y,
               size: i,
               fillMode: s,
               rounded: t,
-              disabled: l,
+              disabled: r,
               required: this.required,
-              invalid: !D
+              invalid: !T
             }),
             { "k-focus": this.state.focused },
-            A
+            F
           ),
           onKeyDown: this.handleKeyDown,
-          style: { width: N },
-          onFocus: this.mobileMode ? this.handleClick : $,
-          onBlur: ee,
+          style: { width: A },
+          onFocus: this.mobileMode ? this.handleClick : J,
+          onBlur: Q,
           onClick: this.mobileMode ? this.handleClick : void 0
         },
         /* @__PURE__ */ n.createElement(
@@ -365,37 +362,38 @@ const a = class a extends n.Component {
             ariaHasPopup: "dialog",
             autoFocus: o,
             inputAttributes: h,
-            ...Q
+            ...G
           }
         ),
         /* @__PURE__ */ n.createElement(
-          pe,
+          de,
           {
             tabIndex: -1,
             type: "button",
+            disabled: r,
             icon: "calendar",
-            svgIcon: de,
+            svgIcon: le,
             onMouseDown: this.handleIconMouseDown,
             onClick: this.mobileMode ? void 0 : this.handleClick,
-            title: p(this).toLanguageString(
-              m,
-              u[m]
+            title: m(this).toLanguageString(
+              c,
+              p[c]
             ),
-            className: S(T.inputButton({ c: y })),
+            className: S(I.inputButton({ c: y })),
             fillMode: s,
-            "aria-label": p(this).toLanguageString(
-              m,
-              u[m]
+            "aria-label": m(this).toLanguageString(
+              c,
+              p[c]
             )
           }
         ),
         /* @__PURE__ */ n.createElement(
-          U,
+          q,
           {
             show: this.show,
             animate: this.element !== null,
             anchor: this.element,
-            popupClass: S(T.popup({ c: y })),
+            popupClass: S(I.popup({ c: y })),
             id: this._popupId,
             anchorAlign: {
               horizontal: "left",
@@ -411,17 +409,17 @@ const a = class a extends n.Component {
       ), this.mobileMode && this.renderAdaptivePopup())
     );
     return this.props.label ? /* @__PURE__ */ n.createElement(
-      ye,
+      be,
       {
         dateInput: this._dateInput,
         label: this.props.label,
-        editorId: c,
-        editorValid: D,
+        editorId: u,
+        editorValid: T,
         editorDisabled: this.props.disabled,
-        children: I,
+        children: D,
         style: { width: this.props.width }
       }
-    ) : I;
+    ) : D;
   }
   setShow(i) {
     const { onOpen: t, onClose: s } = this.props;
@@ -483,6 +481,7 @@ a.displayName = "DateTimePicker", a.propTypes = {
   ]),
   id: e.string,
   ariaLabelledBy: e.string,
+  ariaLabel: e.string,
   ariaDescribedBy: e.string,
   min: e.instanceOf(Date),
   max: e.instanceOf(Date),
@@ -515,32 +514,32 @@ a.displayName = "DateTimePicker", a.propTypes = {
   disabled: !1,
   format: "g",
   // general date and time pattern (short time): "M/d/y h:mm a" for en.
-  max: me,
-  min: ce,
+  max: pe,
+  min: ue,
   popupSettings: {},
   tabIndex: 0,
   weekNumber: !1,
   validityStyles: !0,
   cancelButton: !0,
-  dateInput: ue,
+  dateInput: he,
   size: void 0,
   rounded: void 0,
   fillMode: void 0,
   autoFocus: !1
 };
 let f = a;
-const De = se(), Ie = ne(
-  re(
-    De,
-    le(
-      he(f)
+const Se = te(), Ie = oe(
+  ae(
+    Se,
+    ne(
+      re(f)
     )
   )
 );
 Ie.displayName = "KendoReactDateTimePicker";
-ve(f);
+fe(f);
 export {
   Ie as DateTimePicker,
-  De as DateTimePickerPropsContext,
+  Se as DateTimePickerPropsContext,
   f as DateTimePickerWithoutContext
 };

package/datetimepicker/models/DateTimePickerSettings.d.ts

@@ -91,6 +91,13 @@ export interface DateTimePickerSettings {
      * This property is related to accessibility.
      */
     ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     *
+     * @remarks
+     * This property is related to accessibility.
+     */
+    ariaLabel?: string;
     /**
      * Specifies the greatest valid date
      * ([see example](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/date-ranges)).