@progress/kendo-react-dateinputs 4.13.0-dev.202111291459 → 4.13.0-dev.202111300702

package/dist/npm/dateinput/DateInput.js

@@ -40,9 +40,10 @@ var utils_3 = require("../timepicker/utils");
 var defaults_1 = require("../defaults");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 // tslint:enable:max-line-length
-var DateInput = /** @class */ (function (_super) {
-    __extends(DateInput, _super);
-    function DateInput(props) {
+/** @hidden */
+var DateInputWithoutContext = /** @class */ (function (_super) {
+    __extends(DateInputWithoutContext, _super);
+    function DateInputWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this.kendoDate = null;
         _this.paste = false;
@@ -64,7 +65,7 @@ var DateInput = /** @class */ (function (_super) {
             if (_this.element && _this.element.setCustomValidity) {
                 _this.element.setCustomValidity(_this.validity.valid
                     ? ''
-                    : _this.props.validationMessage || DateInput.defaultProps.validationMessage);
+                    : _this.props.validationMessage || DateInputWithoutContext.defaultProps.validationMessage);
             }
         };
         _this.updateOnPaste = function (event) {
@@ -202,7 +203,7 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.componentDidMount = function () {
+    DateInputWithoutContext.prototype.componentDidMount = function () {
         this.setValidity();
         if (this.wrapper) {
             this.wrapper.addEventListener('wheel', this.nativeWheel, { passive: false });
@@ -211,7 +212,7 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.componentDidUpdate = function (_, prevState) {
+    DateInputWithoutContext.prototype.componentDidUpdate = function (_, prevState) {
         if (this._lastSelectedSymbol && prevState.focused === this.state.focused) {
             this.setSelection(this.selectionBySymbol(this._lastSelectedSymbol));
         }
@@ -223,7 +224,7 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.componentWillUnmount = function () {
+    DateInputWithoutContext.prototype.componentWillUnmount = function () {
         if (this.wrapper) {
             this.wrapper.removeEventListener('wheel', this.nativeWheel);
         }
@@ -231,13 +232,13 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.render = function () {
+    DateInputWithoutContext.prototype.render = function () {
         var _this = this;
         if (this.props._ref) {
             this.props._ref.current = this;
         }
         var localizationService = kendo_react_intl_1.provideLocalizationService(this);
-        var props = __assign({}, DateInput.defaultProps, this.props);
+        var props = __assign({}, DateInputWithoutContext.defaultProps, this.props);
         var min = props.min, max = props.max, name = props.name, label = props.label, id = props.id;
         var currentText = this.text;
         var text = currentText === this.props.placeholder ? '' : currentText;
@@ -282,7 +283,7 @@ var DateInput = /** @class */ (function (_super) {
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: inputId, editorValue: currentText, editorValid: isValid, editorDisabled: this.props.disabled, children: dateinput, style: { width: this.props.width } }))
             : dateinput;
     };
-    Object.defineProperty(DateInput.prototype, "value", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "value", {
         /* Public Getters */
         /**
          * Gets the value of the DateInput.
@@ -296,7 +297,7 @@ var DateInput = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "name", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "name", {
         /**
          * Gets the `name` property of the DateInput.
          */
@@ -306,31 +307,31 @@ var DateInput = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "min", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "min", {
         get: function () {
             return this.props.min !== undefined
                 ? this.props.min
-                : DateInput.defaultProps.min;
+                : DateInputWithoutContext.defaultProps.min;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "max", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "max", {
         get: function () {
             return this.props.max !== undefined
                 ? this.props.max
-                : DateInput.defaultProps.max;
+                : DateInputWithoutContext.defaultProps.max;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "text", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "text", {
         /**
          * @hidden
          */
         get: function () {
-            var props = __assign({}, DateInput.defaultProps, this.props);
-            var formatPlaceholder = props.formatPlaceholder, format = props.format, value = props.value, defaultValue = props.defaultValue;
+            var props = __assign({}, exports.DateInput.defaultProps, this.props);
+            var _a = props.formatPlaceholder, formatPlaceholder = _a === void 0 ? DateInputWithoutContext.defaultProps.formatPlaceholder : _a, _b = props.format, format = _b === void 0 ? DateInputWithoutContext.defaultProps.format : _b, value = props.value, defaultValue = props.defaultValue;
             if (this.kendoDate === null) {
                 this.kendoDate = new models_1.KendoDate(this.intl.bind(this), formatPlaceholder, format);
                 this.kendoDate.setValue(value || defaultValue || null);
@@ -342,9 +343,9 @@ var DateInput = /** @class */ (function (_super) {
             if (value !== undefined && this.value !== value) {
                 this.kendoDate.setValue(value);
             }
-            var _a = this.kendoDate.getTextAndFormat(), currentText = _a.text, currentFormat = _a.format;
+            var _c = this.kendoDate.getTextAndFormat(), currentText = _c.text, currentFormat = _c.format;
             this.currentFormat = currentFormat;
-            return props.placeholder !== null
+            return props.placeholder !== null && props.placeholder !== undefined
                 && !this.state.focused
                 && !this.kendoDate.hasValue()
                 ? props.placeholder
@@ -353,7 +354,7 @@ var DateInput = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "validity", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "validity", {
         /**
          * Represents the validity state into which the DateInput is set.
          */
@@ -374,7 +375,7 @@ var DateInput = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "element", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "element", {
         /**
          * Gets the element of the DateInput.
          *
@@ -412,31 +413,31 @@ var DateInput = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "validityStyles", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "validityStyles", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.validityStyles !== undefined
                 ? this.props.validityStyles
-                : DateInput.defaultProps.validityStyles;
+                : DateInputWithoutContext.defaultProps.validityStyles;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "required", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "required", {
         /**
          * @hidden
          */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
-                : DateInput.defaultProps.required;
+                : DateInputWithoutContext.defaultProps.required;
         },
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(DateInput.prototype, "wrapper", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "wrapper", {
         /**
          * @hidden
          */
@@ -449,10 +450,10 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.intl = function () {
+    DateInputWithoutContext.prototype.intl = function () {
         return kendo_react_intl_1.provideIntlService(this);
     };
-    Object.defineProperty(DateInput.prototype, "selection", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "selection", {
         /*  end handlers */
         get: function () {
             var returnValue = { start: 0, end: 0 };
@@ -464,7 +465,7 @@ var DateInput = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    DateInput.prototype.setSelection = function (selection) {
+    DateInputWithoutContext.prototype.setSelection = function (selection) {
         var _this = this;
         this._lastSelectedSymbol = this.currentFormat[selection.start];
         window.requestAnimationFrame(function () {
@@ -473,7 +474,7 @@ var DateInput = /** @class */ (function (_super) {
             }
         });
     };
-    DateInput.prototype.triggerChange = function (event, oldValue) {
+    DateInputWithoutContext.prototype.triggerChange = function (event, oldValue) {
         this.valueDuringOnChange = this.value;
         this.forceUpdate();
         if (this.props.onChange
@@ -489,7 +490,7 @@ var DateInput = /** @class */ (function (_super) {
         }
         this.valueDuringOnChange = undefined;
     };
-    DateInput.prototype.selectionBySymbol = function (symbol) {
+    DateInputWithoutContext.prototype.selectionBySymbol = function (symbol) {
         var start = -1;
         var end = 0;
         for (var i = 0; i < this.currentFormat.length; i++) {
@@ -505,7 +506,7 @@ var DateInput = /** @class */ (function (_super) {
         }
         return { start: start, end: end };
     };
-    DateInput.prototype.selectionByIndex = function (index) {
+    DateInputWithoutContext.prototype.selectionByIndex = function (index) {
         var selection = { start: index, end: index };
         for (var i = index, j = index - 1; i < this.currentFormat.length || j >= 0; i++, j--) {
             if (i < this.currentFormat.length && this.currentFormat[i] !== '_') {
@@ -519,7 +520,7 @@ var DateInput = /** @class */ (function (_super) {
         }
         return selection;
     };
-    DateInput.prototype.switchDateSegment = function (offset) {
+    DateInputWithoutContext.prototype.switchDateSegment = function (offset) {
         var _a = this.selection, selectionStart = _a.start, selectionEnd = _a.end;
         if (selectionStart < selectionEnd &&
             this.currentFormat[selectionStart] !== this.currentFormat[selectionEnd - 1]) {
@@ -553,7 +554,7 @@ var DateInput = /** @class */ (function (_super) {
             this.setSelection({ start: a, end: b });
         }
     };
-    DateInput.prototype.modifyDateSegmentValue = function (offset, event) {
+    DateInputWithoutContext.prototype.modifyDateSegmentValue = function (offset, event) {
         if (!this.kendoDate) {
             return;
         }
@@ -567,7 +568,11 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.propTypes = {
+    DateInputWithoutContext.displayName = 'DateInput';
+    /**
+     * @hidden
+     */
+    DateInputWithoutContext.propTypes = {
         value: PropTypes.instanceOf(Date),
         format: PropTypes.oneOfType([
             PropTypes.string,
@@ -625,8 +630,7 @@ var DateInput = /** @class */ (function (_super) {
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string,
         ariaExpanded: PropTypes.oneOfType([
-            PropTypes.bool,
-            PropTypes.string
+            PropTypes.bool
         ]),
         onChange: PropTypes.func,
         validationMessage: PropTypes.string,
@@ -637,7 +641,7 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.defaultProps = {
+    DateInputWithoutContext.defaultProps = {
         format: utils_1.defaultFormat,
         formatPlaceholder: utils_1.defaultFormatPlaceholder,
         // defaultValue: null as Date | null,
@@ -653,8 +657,25 @@ var DateInput = /** @class */ (function (_super) {
         placeholder: null
         // the rest of the properties are undefined by default
     };
-    return DateInput;
+    return DateInputWithoutContext;
 }(React.Component));
-exports.DateInput = DateInput;
-kendo_react_intl_1.registerForIntl(DateInput);
-kendo_react_intl_1.registerForLocalization(DateInput);
+exports.DateInputWithoutContext = DateInputWithoutContext;
+/**
+ * Represents the PropsContext of the `DateInput` component.
+ * Used for global configuration of all `DateInput` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+exports.DateInputPropsContext = kendo_react_common_1.createPropsContext();
+;
+/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
+/**
+ * Represents the KendoReact DateInput Component.
+ *
+ * Accepts properties of type [DateInputProps]({% slug api_dateinputs_dateinputprops %}).
+ * Obtaining the `ref` returns an object of type [DateInputHandle]({% slug api_dateinputs_dateinputhandle %}).
+ */
+exports.DateInput = kendo_react_common_1.withPropsContext(exports.DateInputPropsContext, DateInputWithoutContext);
+exports.DateInput.displayName = 'KendoReactDateInput';
+kendo_react_intl_1.registerForIntl(DateInputWithoutContext);
+kendo_react_intl_1.registerForLocalization(DateInputWithoutContext);

package/dist/npm/datepicker/DatePicker.d.ts

@@ -24,7 +24,7 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps
     /**
      * Sets the default value of the DatePicker ([see example]({% slug default_value_datepicker %})).
      */
-    defaultValue?: Date;
+    defaultValue?: Date | null;
     /**
      * Fires each time the user selects a new value ([see example]({% slug controlled_datepicker %}#toc-controlling-the-date-value)).
      */
@@ -44,7 +44,12 @@ export interface DatePickerState {
     show: boolean;
     focused: boolean;
 }
-export declare class DatePicker extends React.Component<DatePickerProps, DatePickerState> implements FormComponent {
+/** @hidden */
+export declare class DatePickerWithoutContext extends React.Component<DatePickerProps, DatePickerState> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
@@ -71,7 +76,7 @@ export declare class DatePicker extends React.Component<DatePickerProps, DatePic
             second: PropTypes.Requireable<string>;
             timeZoneName: PropTypes.Requireable<string>;
         }>>;
-        formatPlaceholder: PropTypes.Requireable<string | PropTypes.InferProps<{
+        formatPlaceholder: PropTypes.Requireable<"narrow" | "short" | "wide" | "formatPattern" | PropTypes.InferProps<{
             year: PropTypes.Requireable<string>;
             month: PropTypes.Requireable<string>;
             day: PropTypes.Requireable<string>;
@@ -107,8 +112,8 @@ export declare class DatePicker extends React.Component<DatePickerProps, DatePic
     static defaultProps: {
         defaultShow: boolean;
         defaultValue: any;
-        dateInput: React.ComponentType<DateInputProps<DateInput>>;
-        calendar: React.ComponentType<CalendarProps<Calendar>>;
+        dateInput: React.ComponentType<DateInputProps<any>>;
+        calendar: React.ComponentType<CalendarProps<any>>;
         toggleButton: React.ComponentType<ToggleButtonProps>;
         popup: React.ComponentType<PopupProps>;
         pickerWrap: React.ComponentType<PickerWrapProps>;
@@ -138,7 +143,7 @@ export declare class DatePicker extends React.Component<DatePickerProps, DatePic
     private prevShow;
     constructor(props: DatePickerProps);
     /**
-     * Gets the wrapping element of the DatePicker.
+     * Gets the wrapping element of the DatePickerWithoutContext.
      */
     readonly element: HTMLSpanElement | null;
     /**
@@ -150,15 +155,15 @@ export declare class DatePicker extends React.Component<DatePickerProps, DatePic
      */
     readonly calendar: Calendar | null;
     /**
-     * Gets the value of the DatePicker.
+     * Gets the value of the DatePickerWithoutContext.
      */
     readonly value: Date | null;
     /**
-     * Gets the popup state of the DatePicker.
+     * Gets the popup state of the DatePickerWithoutContext.
      */
     readonly show: boolean;
     /**
-     * Gets the `name` property of the DatePicker.
+     * Gets the `name` property of the DatePickerWithoutContext.
      */
     readonly name: string | undefined;
     protected readonly min: Date;
@@ -215,3 +220,52 @@ export declare class DatePicker extends React.Component<DatePickerProps, DatePic
     private handleIconMouseDown;
     private handleKeyDown;
 }
+/**
+ * Represents the PropsContext of the `DatePicker` component.
+ * Used for global configuration of all `DatePicker` instances.
+ *
+ * For more information, refer to the [DateInputs Props Context]({% slug props-context_dateinputs %}) article.
+ */
+export declare const DatePickerPropsContext: React.Context<(p: DatePickerProps) => DatePickerProps>;
+/**
+ * Represent the `ref` of the DatePicker component.
+ */
+export interface DatePickerHandle extends Pick<DatePickerWithoutContext, keyof DatePickerWithoutContext> {
+    /**
+     * Returns the HTML element of the DatePicker component.
+     */
+    element: HTMLSpanElement | null;
+    /**
+     * Gets the Calendar component inside the DatePicker component.
+     */
+    calendar: Calendar | null;
+    /**
+     * Gets the DateInput component inside the DatePicker component.
+     */
+    dateInput: DateInput | null;
+    /**
+     * Gets the `name` property of the DatePicker.
+     */
+    name: string | undefined;
+    /**
+     * Gets the popup state of the DatePicker.
+     */
+    show: boolean;
+    /**
+     * Represents the validity state into which the DatePicker is set.
+     */
+    validity: FormComponentValidity;
+    /**
+     * Gets the value of the DatePicker.
+     */
+    value: Date | null;
+}
+/** @hidden */
+export declare type DatePicker = DatePickerHandle;
+/**
+ * Represents the KendoReact DatePicker Component.
+ *
+ * Accepts properties of type [DatePickerProps]({% slug api_dateinputs_datepickerprops %}).
+ * Obtaining the `ref` returns an object of type [DatePickerHandle]({% slug api_dateinputs_datepickerhandle %}).
+ */
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<any>>;