@progress/kendo-react-dateinputs 4.14.1 → 5.0.1

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

@@ -35,6 +35,43 @@ export interface DatePickerProps extends DatePickerSettings, 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 DatePicker.
+     *
+     * 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 DatePicker.
+     *
+     * 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 DatePicker.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 /**
  * @hidden
@@ -105,6 +142,9 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
         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
@@ -126,6 +166,9 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
         weekNumber: boolean;
         required: boolean;
         validityStyles: boolean;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
     };
     /**
      * @hidden
@@ -133,7 +176,6 @@ export declare class DatePickerWithoutContext extends React.Component<DatePicker
     readonly state: DatePickerState;
     private _popupId;
     private _element;
-    private _wrapper;
     private _dateInput;
     private _calendar;
     private valueDuringOnChange?;

package/dist/npm/datepicker/DatePicker.js

@@ -38,7 +38,6 @@ var PropTypes = require("prop-types");
 var kendo_react_popup_1 = require("@progress/kendo-react-popup");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var DateInput_1 = require("../dateinput/DateInput");
 var Calendar_1 = require("../calendar/components/Calendar");
@@ -56,7 +55,6 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._popupId = kendo_react_common_1.guid();
         _this._element = null;
-        _this._wrapper = null;
         _this._dateInput = React.createRef();
         _this._calendar = null;
         _this.shouldFocusDateInput = false;
@@ -140,7 +138,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                 _this.setShow(keyCode === kendo_react_common_1.Keys.down);
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        kendo_react_common_1.validatePackage(package_metadata_1.packageMetadata);
         _this.state = {
             value: _this.props.defaultValue || DatePickerWithoutContext.defaultProps.defaultValue,
             show: _this.props.defaultShow || DatePickerWithoutContext.defaultProps.defaultShow,
@@ -350,18 +348,12 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
      */
     DatePickerWithoutContext.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, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
-        var _b = this.props.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, ["popupClass"]);
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? DatePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? DatePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? DatePickerWithoutContext.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, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
+        var _e = this.props.popupSettings, popupClass = _e.popupClass, otherPopupSettings = __rest(_e, ["popupClass"]);
         var show = this.show;
         var value = this.value;
         var sanitizedValue = value && kendo_date_math_1.getDate(value);
         var isValid = !this.validityStyles || this.validity.valid;
-        var rootClassName = kendo_react_common_1.classNames('k-widget k-datepicker', className);
-        var wrapperClassNames = kendo_react_common_1.classNames('k-picker-wrap', {
-            'k-state-invalid': !isValid,
-            'k-state-disabled': disabled,
-            'k-state-focused': this.state.focused
-        });
         var popupClassNames = kendo_react_common_1.classNames('k-calendar-container k-group k-reset', popupClass);
         var dateInputProps = {
             disabled: disabled,
@@ -384,9 +376,12 @@ var DatePickerWithoutContext = /** @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: show, anchor: this._wrapper || this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -402,14 +397,22 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             focusedDate: focusedDate,
             onChange: this.handleCalendarValueChange
         };
+        var toggleButtonTitle = kendo_react_intl_1.provideLocalizationService(this)
+            .toLanguageString(messages_1.toggleCalendar, messages_1.messages[messages_1.toggleCalendar]);
         var datepicker = (React.createElement(kendo_react_common_1.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("span", { role: "group", "aria-expanded": _this.show, ref: function (span) { _this._element = span; }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement(_this.pickerWrapComp, { _ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },
-                    React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
-                    React.createElement(_this.toggleButtonComp, { onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: kendo_react_intl_1.provideLocalizationService(_this)
-                            .toLanguageString(messages_1.toggleCalendar, messages_1.messages[messages_1.toggleCalendar]), className: "k-select" },
-                        React.createElement("span", { className: "k-icon k-i-calendar" }))),
+            var _b;
+            return (React.createElement("span", { role: "group", "aria-expanded": _this.show, ref: function (span) { _this._element = span; }, className: kendo_react_common_1.classNames('k-input', 'k-datepicker', (_b = {},
+                    _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-" + (kendo_react_common_1.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(_this.toggleButtonComp, { type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
                 React.createElement(_this.popupComp, __assign({}, popupProps),
                     React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
         }));
@@ -497,7 +500,10 @@ var DatePickerWithoutContext = /** @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
@@ -518,7 +524,10 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         tabIndex: 0,
         weekNumber: false,
         required: false,
-        validityStyles: true
+        validityStyles: true,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return DatePickerWithoutContext;
 }(React.Component));

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

@@ -1,20 +1,10 @@
-import * as React from 'react';
+import { Button, ButtonProps } from '@progress/kendo-react-buttons';
 /**
  * Represents the props of the KendoReact [Toggle Button]({% slug api_dateinputs_togglebutton %}) component.
  */
-export interface ToggleButtonProps {
-    id?: string;
-    tabIndex?: number;
-    className?: string;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-    title?: string;
-    onClick?: (event: React.MouseEvent) => void;
-    onMouseDown?: (event: React.MouseEvent) => void;
-    onMouseUp?: (event: React.MouseEvent) => void;
-    [wildcard: string]: any;
+export interface ToggleButtonProps extends ButtonProps {
 }
 /**
  * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
  */
-export declare const ToggleButton: React.ForwardRefExoticComponent<Pick<ToggleButtonProps, string | number> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const ToggleButton: typeof Button;

package/dist/npm/datepicker/ToggleButton.js

@@ -1,11 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 /**
  * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
  */
-exports.ToggleButton = React.forwardRef(function (props, ref) {
-    var className = kendo_react_common_1.classNames('k-select', props.className);
-    return (React.createElement("a", { ref: ref, id: props.id, role: "button", style: props.style, className: className, tabIndex: props.tabIndex, title: props.title, "aria-label": props.title, onMouseDown: props.onMouseDown, onClick: props.onClick, onMouseUp: props.onMouseUp }, props.children));
-});
+exports.ToggleButton = kendo_react_buttons_1.Button;

package/dist/npm/datepicker/models/DatePickerSettings.d.ts

@@ -12,8 +12,7 @@ import { PickerWrapProps } from '../../common/PickerWrap';
  */
 export interface DatePickerSettings {
     /**
-     * Enables the customization or the override of the default wrapping component around the `DateInput` and `ToggleButton` rendered by the DatePicker
-     * ([see example]({% slug custom_rendering_datepicker %}#toc-customizing-the-toggle-button)).
+     * @deprecated The `DatePicker` no longer renders a `wrapper` around the DatePicker.
      */
     pickerWrap?: React.ComponentType<PickerWrapProps>;
     /**

package/dist/npm/daterangepicker/DateRangePicker.d.ts

@@ -93,7 +93,9 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
                 year: PropTypes.Requireable<string>;
                 month: PropTypes.Requireable<string>;
                 day: PropTypes.Requireable<string>;
-                hour: PropTypes.Requireable<string>;
+                hour: PropTypes.Requireable<string>; /**
+                 * @hidden
+                 */
                 minute: PropTypes.Requireable<string>;
                 second: PropTypes.Requireable<string>;
             }>>;
@@ -124,6 +126,9 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
             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">;
         }>>;
         focusedDate: PropTypes.Requireable<Date>;
         format: PropTypes.Requireable<string | PropTypes.InferProps<{

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -349,7 +349,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         var calendar = this.props.calendar
             ? React.createElement(this.props.calendar, __assign({}, calendarProps))
             : React.createElement(MultiViewCalendar_1.MultiViewCalendar, __assign({}, calendarProps, { ref: this.setCalendarRef }));
-        var reverseButton = (React.createElement(kendo_react_buttons_1.Button, __assign({ className: "k-select", look: "flat", title: kendo_react_intl_1.provideLocalizationService(this)
+        var reverseButton = (React.createElement(kendo_react_buttons_1.Button, __assign({ className: "k-select", fillMode: "flat", title: kendo_react_intl_1.provideLocalizationService(this)
                 .toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd]), onMouseDown: this.handleReverseMouseDown, onClick: this.handleReverseClick }, {
             'aria-controls': startDateInputId + ' ' + endDateInputId,
             'aria-label': kendo_react_intl_1.provideLocalizationService(this)

package/dist/npm/datetimepicker/DateTimePicker.d.ts

@@ -37,6 +37,43 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
      * [JavaScript `Date`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date) instance.
      */
     value?: Date | null;
+    /**
+     * Configures the `size` of the DateTimePicker.
+     *
+     * 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 DateTimePicker.
+     *
+     * 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 DateTimePicker.
+     *
+     * 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 DateTimePickerWithoutContext extends React.Component<DateTi
         validate: PropTypes.Requireable<boolean>;
         valid: PropTypes.Requireable<boolean>;
         cancelButton: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
     };
     /**
      * @hidden
@@ -126,6 +166,9 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
         validityStyles: boolean;
         cancelButton: boolean;
         dateInput: React.ComponentType<DateInputProps<any>>;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
     };
     /**
      * @hidden
@@ -133,7 +176,6 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
     readonly state: DateTimePickerState;
     private _popupId;
     private _element;
-    private _wrapper;
     private _dateInput;
     private _dateTimeSelector;
     private valueDuringOnChange?;

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -31,6 +31,7 @@ var kendo_date_math_1 = require("@progress/kendo-date-math");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var DateInput_1 = require("../dateinput/DateInput");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var package_metadata_1 = require("../package-metadata");
 var utils_1 = require("../utils");
 var messages_1 = require("../messages");
@@ -46,7 +47,6 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._popupId = kendo_react_common_1.guid();
         _this._element = null;
-        _this._wrapper = null;
         _this._dateInput = React.createRef();
         _this._dateTimeSelector = null;
         _this.shouldFocusDateInput = false;
@@ -118,7 +118,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'));
         };
         kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
         _this.state = {
@@ -296,15 +296,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 ? kendo_react_popup_1.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 ? kendo_react_popup_1.Popup : _e, calendar = _a.calendar;
         var isValid = !this.validityStyles || this.validity.valid;
-        var rootClassName = kendo_react_common_1.classNames('k-widget k-datetimepicker', {
-            'k-state-invalid': !isValid
-        }, className);
-        var wrapperClassNames = kendo_react_common_1.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,
@@ -316,24 +309,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(kendo_react_common_1.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: kendo_react_intl_1.provideLocalizationService(_this)
-                            .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]), className: "k-select" }, {
-                        'aria-controls': _this._popupId,
-                        'aria-label': kendo_react_intl_1.provideLocalizationService(_this)
-                            .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.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: kendo_react_common_1.classNames('k-input', 'k-datetimepicker', (_b = {},
+                    _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-rounded-" + (kendo_react_common_1.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(kendo_react_buttons_1.Button, __assign({ type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: kendo_react_intl_1.provideLocalizationService(_this)
+                        .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]), className: "k-input-button" }, {
+                    'aria-controls': _this._popupId,
+                    'aria-label': kendo_react_intl_1.provideLocalizationService(_this)
+                        .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.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: {
@@ -424,7 +426,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
@@ -442,7 +447,10 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
         required: false,
         validityStyles: true,
         cancelButton: true,
-        dateInput: DateInput_1.DateInput
+        dateInput: DateInput_1.DateInput,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return DateTimePickerWithoutContext;
 }(React.Component));

package/dist/npm/datetimepicker/DateTimeSelector.js

@@ -208,7 +208,7 @@ var DateTimeSelector = /** @class */ (function (_super) {
                 React.createElement("div", { className: "k-datetime-time-wrap" }, React.createElement(TimePart_1.TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || utils_1.MIN_TIME, max: this.maxTime || utils_1.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(kendo_react_buttons_1.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(kendo_react_buttons_1.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(kendo_react_buttons_1.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/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.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/npm/timepicker/TimePart.js

@@ -219,7 +219,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(kendo_react_buttons_1.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(messages_1.now, messages_1.messages[messages_1.now]))),
+                    React.createElement(kendo_react_buttons_1.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(messages_1.now, messages_1.messages[messages_1.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/npm/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;