@progress/kendo-react-dateinputs 4.14.1-dev.202201181415 → 5.0.1-dev.202201200659

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

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

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

@@ -457,9 +457,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : 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, { 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(Button, __assign({ type: "button", className: "k-nav-prev", icon: "arrow-chevron-left", look: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
+                    React.createElement(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, { min: this.min, max: this.max, onClick: this.handleTodayClick, disabled: !this.todayIsInRange }),
-                    React.createElement(Button, __assign({ type: "button", className: "k-nav-next", icon: "arrow-chevron-right", look: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
+                    React.createElement(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, { 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/es/calendar/services/DOMService.js

@@ -28,7 +28,7 @@ var DOMService = /** @class */ (function () {
         var tbody = containerFactory('tbody');
         var thead = containerFactory('thead');
         var table = containerFactory('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/es/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/es/common/PickerWrap.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { classNames } from '@progress/kendo-react-common';
 /**
- * Represents the default `pickerWrap` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
+ * @hidden
+ * @deprecated
  */
 export var PickerWrap = React.forwardRef(function (props, ref) {
     var _ref = props._ref;

package/dist/es/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/es/dateinput/DateInput.js

@@ -25,9 +25,10 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { isEqual, cloneDate } from '@progress/kendo-date-math';
+import { Button } from '@progress/kendo-react-buttons';
 import { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { KendoDate } from './models';
-import { guid, AsyncFocusBlur, noop, classNames, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { guid, AsyncFocusBlur, noop, classNames, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -232,6 +233,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;
         }
@@ -257,25 +259,23 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
         }
         var dateinput = (React.createElement(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: 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: 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(increaseValue, messages[increaseValue]), title: localizationService
-                                    .toLanguageString(increaseValue, messages[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(decreaseValue, messages[decreaseValue]), title: localizationService
-                                    .toLanguageString(decreaseValue, messages[decreaseValue]), onClick: _this.decreasePart },
-                                React.createElement("span", { className: "k-icon k-i-arrow-s" }))))));
+                    : undefined, dir: _this.props.dir, className: classNames('k-dateinput', 'k-input', (_b = {},
+                    _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
+                    _b["k-input-" + fillMode] = fillMode,
+                    _b["k-rounded-" + (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: 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(Button, { type: "button", className: "k-spinner-increase", icon: 'arrow-n', "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]), title: localizationService.toLanguageString(increaseValue, messages[increaseValue]), onClick: _this.increasePart }),
+                    React.createElement(Button, { type: "button", className: "k-spinner-decrease", icon: 'arrow-s', "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]), title: localizationService.toLanguageString(decreaseValue, messages[decreaseValue]), onClick: _this.decreasePart })))));
         }));
         return label
             ? (React.createElement(FloatingLabel, { label: label, editorId: inputId, editorValue: currentText, editorValid: isValid, editorDisabled: this.props.disabled, children: dateinput, style: { width: this.props.width } }))
@@ -634,13 +634,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: defaultFormat,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid',
         formatPlaceholder: defaultFormatPlaceholder,
         // defaultValue: null as Date | null,
         spinners: false,

package/dist/es/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/es/datepicker/DatePicker.js

@@ -35,8 +35,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { Popup } from '@progress/kendo-react-popup';
 import { getDate, cloneDate } from '@progress/kendo-date-math';
-import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
+import { classNames, guid, Keys, AsyncFocusBlur, createPropsContext, withPropsContext, validatePackage, kendoThemeMaps } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { DateInput } from '../dateinput/DateInput';
 import { Calendar } from '../calendar/components/Calendar';
@@ -54,7 +53,6 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
         var _this = _super.call(this, props) || this;
         _this._popupId = guid();
         _this._element = null;
-        _this._wrapper = null;
         _this._dateInput = React.createRef();
         _this._calendar = null;
         _this.shouldFocusDateInput = false;
@@ -348,18 +346,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 && getDate(value);
         var isValid = !this.validityStyles || this.validity.valid;
-        var rootClassName = classNames('k-widget k-datepicker', 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-calendar-container k-group k-reset', popupClass);
         var dateInputProps = {
             disabled: disabled,
@@ -382,9 +374,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: {
@@ -400,14 +395,22 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             focusedDate: focusedDate,
             onChange: this.handleCalendarValueChange
         };
+        var toggleButtonTitle = provideLocalizationService(this)
+            .toLanguageString(toggleCalendar, messages[toggleCalendar]);
         var datepicker = (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("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: provideLocalizationService(_this)
-                            .toLanguageString(toggleCalendar, messages[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: classNames('k-input', 'k-datepicker', (_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(_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)))));
         }));
@@ -495,7 +498,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
@@ -516,7 +522,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/es/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/es/datepicker/ToggleButton.js

@@ -1,9 +1,5 @@
-import * as React from 'react';
-import { classNames } from '@progress/kendo-react-common';
+import { Button } from '@progress/kendo-react-buttons';
 /**
  * Represents the default `toggleButton` component rendered by the [KendoReact Scheduler DatePicker]({% slug overview_datepicker %}).
  */
-export var ToggleButton = React.forwardRef(function (props, ref) {
-    var className = 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));
-});
+export var ToggleButton = Button;

package/dist/es/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/es/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/es/daterangepicker/DateRangePicker.js

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

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