@progress/kendo-react-dateinputs 4.14.1 → 5.0.1

package/dist/es/datetimepicker/DateTimePicker.js

@@ -26,9 +26,10 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { DateInput } from '../dateinput/DateInput';
 import { validatePackage } from '@progress/kendo-react-common';
+import { Button } from '@progress/kendo-react-buttons';
 import { packageMetadata } from '../package-metadata';
 import { MIN_DATE, MAX_DATE, isInDateRange, MAX_TIME } from '../utils';
 import { messages, toggleDateTimeSelector } from '../messages';
@@ -44,7 +45,6 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._popupId = guid();
         _this._element = null;
-        _this._wrapper = null;
         _this._dateInput = React.createRef();
         _this._dateTimeSelector = null;
         _this.shouldFocusDateInput = false;
@@ -116,7 +116,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.dateInputElement = function () {
             return (_this.dateInput && _this.dateInput.element) ||
-                (_this._wrapper && _this._wrapper.querySelector('.k-dateinput-wrap > input.k-input'));
+                (_this.element && _this.element.querySelector('.k-dateinput > input.k-input-inner'));
         };
         validatePackage(packageMetadata);
         _this.state = {
@@ -294,15 +294,8 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
      */
     DateTimePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, cancelButton = _a.cancelButton, minTime = _a.minTime, maxTime = _a.maxTime, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, _b = _a.popup, PopupComponent = _b === void 0 ? Popup : _b, calendar = _a.calendar;
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? DateTimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DateTimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DateTimePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, format = _a.format, formatPlaceholder = _a.formatPlaceholder, min = _a.min, max = _a.max, weekNumber = _a.weekNumber, focusedDate = _a.focusedDate, className = _a.className, width = _a.width, name = _a.name, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, cancelButton = _a.cancelButton, minTime = _a.minTime, maxTime = _a.maxTime, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, _e = _a.popup, PopupComponent = _e === void 0 ? Popup : _e, calendar = _a.calendar;
         var isValid = !this.validityStyles || this.validity.valid;
-        var rootClassName = classNames('k-widget k-datetimepicker', {
-            'k-state-invalid': !isValid
-        }, className);
-        var wrapperClassNames = classNames('k-picker-wrap', {
-            'k-state-disabled': disabled,
-            'k-state-focused': this.state.focused
-        });
         var dataInputProps = {
             id: id, ariaLabelledBy: ariaLabelledBy, ariaDescribedBy: ariaDescribedBy, format: format, formatPlaceholder: formatPlaceholder, disabled: disabled,
             title: title, validityStyles: validityStyles, validationMessage: validationMessage, required: required, min: min, max: max, minTime: minTime, maxTime: maxTime, name: name,
@@ -314,24 +307,33 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
             label: undefined,
             placeholder: !this.state.focused ? this.props.placeholder : null,
             ariaHasPopup: true,
-            ariaExpanded: this.show
+            ariaExpanded: this.show,
+            size: null,
+            fillMode: null,
+            rounded: null
         };
         var dateTimePicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncFocus: this.props.onFocus, onSyncBlur: this.props.onBlur }, function (_a) {
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
+            var _b;
             return (React.createElement("div", { ref: function (div) {
                     _this._element = div;
-                }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement("div", { ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },
-                    React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dataInputProps)),
-                    React.createElement("span", __assign({ role: "button", onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
-                            .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-select" }, {
-                        'aria-controls': _this._popupId,
-                        'aria-label': provideLocalizationService(_this)
-                            .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
-                    }),
-                        React.createElement("span", { className: "k-link k-link-date" },
-                            React.createElement("span", { className: "k-icon k-i-calendar" })))),
-                React.createElement(PopupComponent, { show: _this.show, animate: _this._wrapper !== null, anchor: _this._wrapper, className: "k-datetime-container k-group k-reset", id: _this._popupId, anchorAlign: {
+                }, className: classNames('k-input', 'k-datetimepicker', (_b = {},
+                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b["k-input-" + fillMode] = fillMode,
+                    _b['k-valid'] = isValid,
+                    _b['k-invalid'] = !isValid,
+                    _b['k-required'] = _this.required,
+                    _b['k-disabled'] = _this.props.disabled,
+                    _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
+                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dataInputProps)),
+                React.createElement(Button, __assign({ type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
+                        .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button" }, {
+                    'aria-controls': _this._popupId,
+                    'aria-label': provideLocalizationService(_this)
+                        .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
+                })),
+                React.createElement(PopupComponent, { show: _this.show, animate: _this.element !== null, anchor: _this.element, className: "k-datetime-container k-group k-reset", id: _this._popupId, anchorAlign: {
                         horizontal: 'left',
                         vertical: 'bottom'
                     }, popupAlign: {
@@ -422,7 +424,10 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         required: PropTypes.bool,
         validate: PropTypes.bool,
         valid: PropTypes.bool,
-        cancelButton: PropTypes.bool
+        cancelButton: PropTypes.bool,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
     };
     /**
      * @hidden
@@ -440,7 +445,10 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         required: false,
         validityStyles: true,
         cancelButton: true,
-        dateInput: DateInput
+        dateInput: DateInput,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return DateTimePickerWithoutContext;
 }(React.Component));

package/dist/es/datetimepicker/DateTimeSelector.js

@@ -206,7 +206,7 @@ var DateTimeSelector = /** @class */ (function (_super) {
                 React.createElement("div", { className: "k-datetime-time-wrap" }, React.createElement(TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || MIN_TIME, max: this.maxTime || MAX_TIME, steps: this.props.steps, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange, onMount: this.handleTimePartMount }))),
             React.createElement("div", { className: "k-datetime-footer k-actions k-hstack k-justify-content-stretch" },
                 cancelButton && React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
-                React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", disabled: !this.hasDateValue, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                React.createElement(Button, __assign({ type: "button", themeColor: "primary", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", disabled: !this.hasDateValue, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     Object.defineProperty(DateTimeSelector.prototype, "minTime", {
         get: function () {

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642516221,
+    publishDate: 1642764822,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/timepicker/TimePart.js

@@ -217,7 +217,7 @@ var TimePart = /** @class */ (function (_super) {
             React.createElement("div", { className: "k-time-header" },
                 React.createElement("span", { className: "k-title" }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ''))),
                 this.showNowButton() &&
-                    React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._nowButton = btn; }, className: "k-time-now", look: "flat", primary: true, title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(now, messages[now]))),
+                    React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._nowButton = btn; }, className: "k-time-now", fillMode: "flat", themeColor: 'primary', title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(now, messages[now]))),
             React.createElement("div", { className: "k-time-list-container", onKeyDown: this.handleKeyDown },
                 React.createElement("span", { className: "k-time-highlight" }),
                 this.dateFormatParts.map(function (part, idx) {

package/dist/es/timepicker/TimePicker.d.ts

@@ -32,6 +32,43 @@ export interface TimePickerProps extends TimePickerSettings, FormComponentProps
      * > The `value` has to be a valid [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
      */
     value?: Date | null;
+    /**
+     * Configures the `size` of the TimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TimePicker.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TimePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 /**
  * @hidden
@@ -108,6 +145,9 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
         required: PropTypes.Requireable<boolean>;
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
     };
     /**
      * @hidden
@@ -125,6 +165,9 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
         required: boolean;
         validityStyles: boolean;
         dateInput: React.ComponentType<DateInputProps<any>>;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
     };
     /**
      * @hidden
@@ -132,12 +175,10 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
     readonly state: TimePickerState;
     private _popupId;
     private _element;
-    private _wrapper;
     private _dateInput;
     private _timeSelector;
     private valueDuringOnChange?;
     private showDuringOnChange?;
-    private nextTickId;
     private shouldFocusDateInput;
     private prevShow;
     constructor(props: TimePickerProps);
@@ -185,10 +226,6 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
      * @hidden
      */
     componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
     /**
      * @hidden
      */
@@ -206,7 +243,6 @@ export declare class TimePickerWithoutContext extends React.Component<TimePicker
     protected nextShow: (nextProps: TimePickerProps, nextState: TimePickerState) => boolean;
     protected normalizeTime(date: Date): Date;
     protected setShow(show: boolean): void;
-    protected nextTick(f: () => any): void;
     protected mergeTime(value: Date | null): Date | null;
     private handleInputValueChange;
     private handleValueChange;

package/dist/es/timepicker/TimePicker.js

@@ -35,7 +35,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -45,6 +45,7 @@ import { TimeSelector } from './TimeSelector';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME, setTime } from '../utils';
 import { isInRange, isSmallerThanMin, isBiggerThanMax } from './utils';
 import { PickerFloatingLabel } from '../hooks/usePickerFloatingLabel';
+import { Button } from '@progress/kendo-react-buttons';
 /** @hidden */
 var TimePickerWithoutContext = /** @class */ (function (_super) {
     __extends(TimePickerWithoutContext, _super);
@@ -52,7 +53,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._popupId = guid();
         _this._element = null;
-        _this._wrapper = null;
         _this._dateInput = React.createRef();
         _this._timeSelector = null;
         _this.shouldFocusDateInput = false;
@@ -144,7 +144,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.normalizeTime = _this.normalizeTime.bind(_this);
         _this.setShow = _this.setShow.bind(_this);
-        _this.nextTick = _this.nextTick.bind(_this);
         _this.mergeTime = _this.mergeTime.bind(_this);
         return _this;
     }
@@ -301,12 +300,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             this.forceUpdate();
         }
     };
-    /**
-     * @hidden
-     */
-    TimePickerWithoutContext.prototype.componentWillUnmount = function () {
-        clearTimeout(this.nextTickId);
-    };
     /**
      * @hidden
      */
@@ -328,15 +321,9 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
      */
     TimePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
-        var _b = this.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, ["popupClass"]);
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? TimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? TimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? TimePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
+        var _e = this.popupSettings, popupClass = _e.popupClass, otherPopupSettings = __rest(_e, ["popupClass"]);
         var isValid = !this.validityStyles || this.validity.valid;
-        var rootClassName = classNames('k-widget k-timepicker', className);
-        var wrapperClassNames = classNames('k-picker-wrap', {
-            'k-state-invalid': !isValid,
-            'k-state-disabled': disabled,
-            'k-state-focused': this.state.focused
-        });
         var popupClassNames = classNames('k-group k-reset', popupClass);
         var dateInputProps = {
             disabled: disabled,
@@ -360,9 +347,12 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             label: undefined,
             placeholder: !this.state.focused ? this.props.placeholder : null,
             ariaHasPopup: true,
-            ariaExpanded: this.show
+            ariaExpanded: this.show,
+            size: null,
+            fillMode: null,
+            rounded: null
         };
-        var popupProps = __assign({ show: this.show, animate: this._wrapper !== null, anchor: this._wrapper, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -376,14 +366,21 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             .toLanguageString(toggleTimeSelector, messages[toggleTimeSelector]);
         var timepicker = (React.createElement(AsyncFocusBlur, { onFocus: this.handleFocus, onBlur: this.handleBlur, onSyncBlur: this.props.onBlur, onSyncFocus: this.props.onFocus }, function (_a) {
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
-            return (React.createElement("div", { ref: function (span) { _this._element = span; }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement("span", { ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },
-                    React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
-                    React.createElement("span", __assign({ role: "button", onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-select" }, {
-                        'aria-controls': _this._popupId,
-                        'aria-label': toggleClockMessage
-                    }),
-                        React.createElement("span", { className: "k-icon k-i-clock" }))),
+            var _b;
+            return (React.createElement("div", { ref: function (span) { _this._element = span; }, className: classNames('k-input', 'k-timepicker', (_b = {},
+                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b["k-input-" + fillMode] = fillMode,
+                    _b['k-valid'] = isValid,
+                    _b['k-invalid'] = !isValid,
+                    _b['k-required'] = _this.required,
+                    _b['k-disabled'] = _this.props.disabled,
+                    _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
+                React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
+                React.createElement(Button, __assign({ type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, "aria-label": toggleTimeMessage, className: "k-input-button" }, {
+                    'aria-controls': _this._popupId,
+                    'aria-label': toggleClockMessage
+                })),
                 _this.props.popup
                     ? React.createElement(_this.props.popup, __assign({}, popupProps), timeSelector)
                     : React.createElement(Popup, __assign({}, popupProps), timeSelector)));
@@ -401,12 +398,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         }
         this.setState({ show: show });
     };
-    TimePickerWithoutContext.prototype.nextTick = function (f) {
-        // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
-        // XXX: https://github.com/facebook/react/issues/3751
-        clearTimeout(this.nextTickId);
-        this.nextTickId = window.setTimeout(function () { return f(); });
-    };
     TimePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? setTime(this.value, value) : value;
     };
@@ -480,7 +471,10 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         validationMessage: PropTypes.string,
         required: PropTypes.bool,
         validate: PropTypes.bool,
-        valid: PropTypes.bool
+        valid: PropTypes.bool,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
     };
     /**
      * @hidden
@@ -497,7 +491,10 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         steps: {},
         required: false,
         validityStyles: true,
-        dateInput: DateInput
+        dateInput: DateInput,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return TimePickerWithoutContext;
 }(React.Component));

package/dist/es/timepicker/TimeSelector.js

@@ -179,7 +179,7 @@ var TimeSelector = /** @class */ (function (_super) {
             React.createElement("div", { className: "k-time-footer k-actions k-hstack k-justify-content-stretch" },
                 cancelButton &&
                     React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
-                React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", primary: true, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", themeColor: 'primary', onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     TimeSelector.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.

package/dist/npm/calendar/components/CalendarHeaderTitle.js

@@ -52,7 +52,7 @@ var CalendarHeaderTitle = /** @class */ (function (_super) {
      */
     CalendarHeaderTitle.prototype.render = function () {
         var _a = this.props, view = _a.view, props = __rest(_a, ["view"]);
-        return (React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", look: "flat" }, props), this.props.children));
+        return (React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", fillMode: "flat" }, props), this.props.children));
     };
     return CalendarHeaderTitle;
 }(React.PureComponent));

package/dist/npm/calendar/components/MultiViewCalendar.js

@@ -459,9 +459,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var activeDate = kendo_date_math_1.cloneDate(this.dates && this.dates[0] ? this.dates[0] : utils_1.getToday());
         return (React.createElement("div", __assign({ ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, role: 'grid', tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, wrapperAria),
             React.createElement(Header_1.Header, { key: ".kendo.calendar.header." + activeDate.getTime(), activeView: activeView, currentDate: activeDate, min: this.min, max: this.max, rangeLength: this.props.views, bus: this.bus, service: this.service, headerTitle: this.props.headerTitle, commands: (React.createElement(React.Fragment, null,
-                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-nav-prev", icon: "arrow-chevron-left", look: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-nav-prev", icon: "arrow-chevron-left", fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
                     React.createElement(TodayCommand_1.TodayCommand, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),
-                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-nav-next", icon: "arrow-chevron-right", look: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-nav-next", icon: "arrow-chevron-right", fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
             React.createElement(HorizontalViewList_1.HorizontalViewList, { ref: function (el) { _this.calendarViewList = el; }, dates: this.dates, activeView: activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, service: this.service, selectionRange: visualizedRange, value: this.selectedMultiple || this.selectedDate, cellUID: this.cellUID, views: this.props.views, onChange: this.handleDateChange, showWeekNumbers: this.props.weekNumber, onCellEnter: this.handleCellEnter, cell: this.props.cell, weekCell: this.props.weekCell, headerTitle: this.props.headerTitle })));
     };
     /**

package/dist/npm/calendar/services/DOMService.js

@@ -30,7 +30,7 @@ var DOMService = /** @class */ (function () {
         var tbody = utils_1.domContainerFactory('tbody');
         var thead = utils_1.domContainerFactory('thead');
         var table = utils_1.domContainerFactory('table');
-        var monthHeader = function () { return (div("\n                <span class=\"k-button k-flat k-calendar-title\">\n                <span className=\"k-button-text\">March 2017</span>\n            </span>\n            <span class=\"k-spacer\"></span>\n            <span class=\"k-calendar-nav k-hstack\"><span class=\"k-nav-today\">TODAY</span></span>\n        ", 'k-calendar-header k-hstack')); };
+        var monthHeader = function () { return (div("\n            <span class=\"k-button k-button-md k-button-rectangle k-button-solid k-button-solid-base k-button-flat k-calendar-title\">\n                <span className=\"k-button-text\">March 2017</span>\n            </span>\n            <span class=\"k-spacer\"></span>\n            <span class=\"k-calendar-nav k-hstack\"><span class=\"k-nav-today\">TODAY</span></span>\n        ", 'k-calendar-header k-hstack')); };
         var monthWeekHeader = function () { return (table([
             thead([
                 tr([th('MO', 'k-calendar-th')], 'k-calendar-tr')

package/dist/npm/common/PickerWrap.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 /**
- * Represents the props of the KendoReact [PickerWrap]({% slug api_dateinputs_pickerwrap %}) component.
+ * @hidden
+ * @deprecated
  */
 export interface PickerWrapProps {
     _ref?: React.Ref<HTMLSpanElement | null>;
@@ -11,6 +12,7 @@ export interface PickerWrapProps {
     style?: React.CSSProperties;
 }
 /**
- * Represents the default `pickerWrap` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
+ * @hidden
+ * @deprecated
  */
 export declare const PickerWrap: React.ForwardRefExoticComponent<PickerWrapProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/npm/common/PickerWrap.js

@@ -3,7 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
- * Represents the default `pickerWrap` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
+ * @hidden
+ * @deprecated
  */
 exports.PickerWrap = React.forwardRef(function (props, ref) {
     var _ref = props._ref;

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

@@ -42,6 +42,43 @@ export interface DateInputProps<T extends DateInput = any> extends FormComponent
      * Determines the event handler that will be fired when the user edits the value ([see example]({% slug dateranges_dateinput %})).
      */
     onChange?: (event: DateInputChangeEvent<T>) => void;
+    /**
+     * Configures the `size` of the DateInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DateInput.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DateInput.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 /** @hidden */
 export declare class DateInputWithoutContext extends React.Component<DateInputProps, {
@@ -108,12 +145,18 @@ export declare class DateInputWithoutContext extends React.Component<DateInputPr
         required: PropTypes.Requireable<boolean>;
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
     };
     /**
      * @hidden
      */
     static defaultProps: {
         format: string;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
         formatPlaceholder: DateInputFormatPlaceholder;
         spinners: boolean;
         disabled: boolean;

package/dist/npm/dateinput/DateInput.js

@@ -27,6 +27,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var models_1 = require("./models");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -234,6 +235,7 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
      */
     DateInputWithoutContext.prototype.render = function () {
         var _this = this;
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? DateInputWithoutContext.defaultProps.size : _b, _c = _a.fillMode, fillMode = _c === void 0 ? DateInputWithoutContext.defaultProps.fillMode : _c, _d = _a.rounded, rounded = _d === void 0 ? DateInputWithoutContext.defaultProps.rounded : _d;
         if (this.props._ref) {
             this.props._ref.current = this;
         }
@@ -259,25 +261,23 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         }
         var dateinput = (React.createElement(kendo_react_common_1.AsyncFocusBlur, { onFocus: this.elementOnFocus, onBlur: this.elementOnBlur }, function (_a) {
             var onFocus = _a.onFocus, onBlur = _a.onBlur;
-            return (React.createElement("span", { style: !label
+            var _b;
+            return (React.createElement("span", { ref: function (span) { _this._wrapper = span; }, style: !label
                     ? { width: _this.props.width }
-                    : undefined, dir: _this.props.dir, className: wrapperClassesInstance.join(' '), onFocus: onFocus, onBlur: onBlur },
-                React.createElement("span", { className: kendo_react_common_1.classNames('k-dateinput-wrap', {
-                        'k-state-disabled': _this.props.disabled,
-                        'k-state-invalid': !isValid
-                    }), ref: function (span) { _this._wrapper = span; } },
-                    React.createElement("input", __assign({ role: "spinbutton", tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: "text", spellCheck: false, autoComplete: "off", autoCorrect: "off", className: "k-input", id: inputId, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-expanded": _this.props.ariaExpanded, "aria-haspopup": _this.props.ariaHasPopup, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: kendo_react_common_1.noop, value: text, placeholder: placeholder, name: name }, ariaProps, { ref: function (input) { return _this._element = input; } })),
-                    _this.props.children,
-                    _this.props.spinners &&
-                        React.createElement("span", { className: "k-select", onMouseDown: _this.spinnersMouseDown },
-                            React.createElement("span", { className: "k-link k-link-increase", "aria-label": localizationService
-                                    .toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]), title: localizationService
-                                    .toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]), onClick: _this.increasePart },
-                                React.createElement("span", { className: "k-icon k-i-arrow-n" })),
-                            React.createElement("span", { className: "k-link k-link-decrease", "aria-label": localizationService
-                                    .toLanguageString(messages_1.decreaseValue, messages_1.messages[messages_1.decreaseValue]), title: localizationService
-                                    .toLanguageString(messages_1.decreaseValue, messages_1.messages[messages_1.decreaseValue]), onClick: _this.decreasePart },
-                                React.createElement("span", { className: "k-icon k-i-arrow-s" }))))));
+                    : undefined, dir: _this.props.dir, className: kendo_react_common_1.classNames('k-dateinput', 'k-input', (_b = {},
+                    _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-input-" + fillMode] = fillMode,
+                    _b["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+                    _b['k-valid'] = isValid,
+                    _b['k-invalid'] = !isValid,
+                    _b['k-required'] = _this.required,
+                    _b['k-disabled'] = _this.props.disabled,
+                    _b), _this.props.className), onFocus: onFocus, onBlur: onBlur },
+                React.createElement("input", __assign({ role: "spinbutton", tabIndex: _this.props.tabIndex, disabled: _this.props.disabled, title: _this.props.title !== undefined ? _this.props.title : currentText, type: "text", spellCheck: false, autoComplete: "off", autoCorrect: "off", className: "k-input-inner", id: inputId, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-expanded": _this.props.ariaExpanded, "aria-haspopup": _this.props.ariaHasPopup, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: kendo_react_common_1.noop, value: text, placeholder: placeholder, name: name }, ariaProps, { ref: function (input) { return _this._element = input; } })),
+                _this.props.children,
+                _this.props.spinners && (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: _this.spinnersMouseDown },
+                    React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-spinner-increase", icon: 'arrow-n', "aria-label": localizationService.toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]), title: localizationService.toLanguageString(messages_1.increaseValue, messages_1.messages[messages_1.increaseValue]), onClick: _this.increasePart }),
+                    React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-spinner-decrease", icon: 'arrow-s', "aria-label": localizationService.toLanguageString(messages_1.decreaseValue, messages_1.messages[messages_1.decreaseValue]), title: localizationService.toLanguageString(messages_1.decreaseValue, messages_1.messages[messages_1.decreaseValue]), onClick: _this.decreasePart })))));
         }));
         return label
             ? (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 } }))
@@ -636,13 +636,19 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         validationMessage: PropTypes.string,
         required: PropTypes.bool,
         validate: PropTypes.bool,
-        valid: PropTypes.bool
+        valid: PropTypes.bool,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
     };
     /**
      * @hidden
      */
     DateInputWithoutContext.defaultProps = {
         format: utils_1.defaultFormat,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid',
         formatPlaceholder: utils_1.defaultFormatPlaceholder,
         // defaultValue: null as Date | null,
         spinners: false,