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

package/dist/es/dateinput/DateInput.d.ts

@@ -15,7 +15,7 @@ export interface DateInputChangeEvent<T = DateInput> {
 /**
  * Represents the props of the [KendoReact DateInput component]({% slug overview_dateinput %}). The generic argument is passed to the `onChange` property and is used as a target in the [`DateInputChangeEvent`]({% slug api_dateinputs_dateinputchangeevent %}) interface.
  */
-export interface DateInputProps<T = DateInput> extends FormComponentProps, DateInputSettings {
+export interface DateInputProps<T extends DateInput = any> extends FormComponentProps, DateInputSettings {
     /** @hidden */
     _ref?: React.MutableRefObject<DateInput | null>;
     /**
@@ -43,9 +43,14 @@ export interface DateInputProps<T = DateInput> extends FormComponentProps, DateI
      */
     onChange?: (event: DateInputChangeEvent<T>) => void;
 }
-export declare class DateInput extends React.Component<DateInputProps, {
+/** @hidden */
+export declare class DateInputWithoutContext extends React.Component<DateInputProps, {
     focused: boolean;
 }> implements FormComponent {
+    /**
+     * @hidden
+     */
+    static displayName: string;
     /**
      * @hidden
      */
@@ -68,7 +73,7 @@ export declare class DateInput extends React.Component<DateInputProps, {
             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>;
@@ -97,7 +102,7 @@ export declare class DateInput extends React.Component<DateInputProps, {
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
-        ariaExpanded: PropTypes.Requireable<string | boolean>;
+        ariaExpanded: PropTypes.Requireable<boolean>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         validationMessage: PropTypes.Requireable<string>;
         required: PropTypes.Requireable<boolean>;
@@ -240,3 +245,40 @@ export declare class DateInput extends React.Component<DateInputProps, {
     private switchDateSegment;
     private modifyDateSegmentValue;
 }
+/**
+ * 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.
+ */
+export declare const DateInputPropsContext: React.Context<(p: DateInputProps<any>) => DateInputProps<any>>;
+/**
+ * Represent the `ref` of the DateInput component.
+ */
+export interface DateInputHandle extends Pick<DateInputWithoutContext, keyof DateInputWithoutContext> {
+    /**
+     * Returns the HTML element of the DateInput component.
+     */
+    element: HTMLInputElement | null;
+    /**
+     * Gets the `name` property of the DateInput.
+     */
+    name: string | undefined;
+    /**
+     * Returns the `value` of the DateInput component.
+     */
+    value: Date | null;
+    /**
+     * Represents the validity state into which the DateInput is set.
+     */
+    validity: FormComponentValidity;
+}
+/** @hidden */
+export declare type DateInput = DateInputHandle;
+/**
+ * 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 %}).
+ */
+export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps<any> & React.RefAttributes<any>>;

package/dist/es/dateinput/DateInput.js

@@ -27,7 +27,7 @@ import * as PropTypes from 'prop-types';
 import { isEqual, cloneDate } from '@progress/kendo-date-math';
 import { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { KendoDate } from './models';
-import { guid, AsyncFocusBlur, noop, classNames } from '@progress/kendo-react-common';
+import { guid, AsyncFocusBlur, noop, classNames, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -38,9 +38,10 @@ import { isInTimeRange } from '../timepicker/utils';
 import { MIN_TIME, MAX_TIME } from '../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;
@@ -62,7 +63,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) {
@@ -200,7 +201,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 });
@@ -209,7 +210,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));
         }
@@ -221,7 +222,7 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.componentWillUnmount = function () {
+    DateInputWithoutContext.prototype.componentWillUnmount = function () {
         if (this.wrapper) {
             this.wrapper.removeEventListener('wheel', this.nativeWheel);
         }
@@ -229,13 +230,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 = 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;
@@ -280,7 +281,7 @@ var DateInput = /** @class */ (function (_super) {
             ? (React.createElement(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.
@@ -294,7 +295,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.
          */
@@ -304,31 +305,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 _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 KendoDate(this.intl.bind(this), formatPlaceholder, format);
                 this.kendoDate.setValue(value || defaultValue || null);
@@ -340,9 +341,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
@@ -351,7 +352,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.
          */
@@ -372,7 +373,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.
          *
@@ -410,31 +411,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
          */
@@ -447,10 +448,10 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.prototype.intl = function () {
+    DateInputWithoutContext.prototype.intl = function () {
         return provideIntlService(this);
     };
-    Object.defineProperty(DateInput.prototype, "selection", {
+    Object.defineProperty(DateInputWithoutContext.prototype, "selection", {
         /*  end handlers */
         get: function () {
             var returnValue = { start: 0, end: 0 };
@@ -462,7 +463,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 () {
@@ -471,7 +472,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
@@ -487,7 +488,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++) {
@@ -503,7 +504,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] !== '_') {
@@ -517,7 +518,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]) {
@@ -551,7 +552,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;
         }
@@ -565,7 +566,11 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.propTypes = {
+    DateInputWithoutContext.displayName = 'DateInput';
+    /**
+     * @hidden
+     */
+    DateInputWithoutContext.propTypes = {
         value: PropTypes.instanceOf(Date),
         format: PropTypes.oneOfType([
             PropTypes.string,
@@ -623,8 +628,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,
@@ -635,7 +639,7 @@ var DateInput = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DateInput.defaultProps = {
+    DateInputWithoutContext.defaultProps = {
         format: defaultFormat,
         formatPlaceholder: defaultFormatPlaceholder,
         // defaultValue: null as Date | null,
@@ -651,8 +655,25 @@ var DateInput = /** @class */ (function (_super) {
         placeholder: null
         // the rest of the properties are undefined by default
     };
-    return DateInput;
+    return DateInputWithoutContext;
 }(React.Component));
-export { DateInput };
-registerForIntl(DateInput);
-registerForLocalization(DateInput);
+export { 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.
+ */
+export var DateInputPropsContext = 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 %}).
+ */
+export var DateInput = withPropsContext(DateInputPropsContext, DateInputWithoutContext);
+DateInput.displayName = 'KendoReactDateInput';
+registerForIntl(DateInputWithoutContext);
+registerForLocalization(DateInputWithoutContext);

package/dist/es/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>>;