@progress/kendo-react-dateinputs 5.10.0-dev.202301091032 → 5.10.0-dev.202301111405

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

@@ -30,6 +30,7 @@ import { registerForIntl, provideIntlService, registerForLocalization, provideLo
 import { classNames, guid, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
 import { cloneDate, isEqualDate, getDate } from '@progress/kendo-date-math';
 import { Button } from '@progress/kendo-react-buttons';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import { Action, CalendarViewEnum, EMPTY_SELECTIONRANGE } from '../models';
 import { Header } from './Header';
 import { MIN_DATE, MAX_DATE } from '../../defaults';
@@ -462,9 +463,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : getToday());
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled },
             React.createElement(Header, { key: ".kendo.calendar.header.".concat(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-calendar-nav-prev", icon: "chevron-left", fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
+                    React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-prev", icon: "chevron-left", svgIcon: chevronLeftIcon, 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-calendar-nav-next", icon: "chevron-right", fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
+                    React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: "chevron-right", svgIcon: chevronRightIcon, 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/components/TodayCommand.js

@@ -17,6 +17,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
 import { classNames } from '@progress/kendo-react-common';
+import { Button } from '@progress/kendo-react-buttons';
 import { getDate } from '@progress/kendo-date-math';
 import { messages, today } from '../../messages';
 import { dateInRange, getToday, isInRange } from '../../utils';
@@ -74,7 +75,7 @@ var TodayCommand = /** @class */ (function (_super) {
         var todayClassNames = classNames('k-calendar-nav-today', {
             'k-disabled': this.props.disabled
         });
-        return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick, tabIndex: this.props.tabIndex }, todayMessage));
+        return (React.createElement(Button, { className: todayClassNames, onClick: this.handleClick, tabIndex: this.props.tabIndex, fillMode: 'flat' }, todayMessage));
     };
     TodayCommand.propTypes = {
         max: PropTypes.instanceOf(Date).isRequired,

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

@@ -46,7 +46,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-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-calendar-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\"><button class=\"k-calendar-nav-today\">TODAY</button></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/dateinput/DateInput.js

@@ -37,6 +37,7 @@ 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 { caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { KendoDate } from './models';
 import { guid, AsyncFocusBlur, noop, classNames, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
@@ -280,8 +281,8 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 React.createElement("input", { role: _this.props.ariaRole || 'textbox', 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-label": _this.props.ariaLabel, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-haspopup": _this.props.ariaHasPopup, "aria-disabled": _this.props.disabled, "aria-expanded": _this.props.ariaExpanded, "aria-controls": _this.props.ariaControls, onWheel: _this.wheel, onClick: _this.elementClick, onInput: _this.elementChange, onPaste: _this.handlePaste, onKeyDown: _this.elementKeyDown, onChange: noop, value: text, placeholder: placeholder, name: name, 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, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-increase", icon: 'caret-alt-up', "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]), title: localizationService.toLanguageString(increaseValue, messages[increaseValue]), onClick: _this.increasePart }),
-                    React.createElement(Button, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-decrease", icon: 'caret-alt-down', "aria-label": localizationService.toLanguageString(decreaseValue, messages[decreaseValue]), title: localizationService.toLanguageString(decreaseValue, messages[decreaseValue]), onClick: _this.decreasePart })))));
+                    React.createElement(Button, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-increase", icon: 'caret-alt-up', svgIcon: caretAltUpIcon, "aria-label": localizationService.toLanguageString(increaseValue, messages[increaseValue]), title: localizationService.toLanguageString(increaseValue, messages[increaseValue]), onClick: _this.increasePart }),
+                    React.createElement(Button, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-decrease", icon: 'caret-alt-down', svgIcon: caretAltDownIcon, "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 } }))

package/dist/es/datepicker/DatePicker.js

@@ -40,6 +40,7 @@ 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, validatePackage, kendoThemeMaps } from '@progress/kendo-react-common';
+import { calendarIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from '../package-metadata';
 import { DateInput } from '../dateinput/DateInput';
 import { Calendar } from '../calendar/components/Calendar';
@@ -384,7 +385,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             fillMode: null,
             rounded: null
         };
-        var popupProps = __assign({ show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ popupClass: 'k-datepicker-popup', show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -414,7 +415,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                     _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, ariaRole: 'combobox', ariaExpanded: _this.show, ariaControls: _this._popupId }, dateInputProps)),
-                React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
+                React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
                 React.createElement(_this.popupComp, __assign({}, popupProps),
                     React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
         }));

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

@@ -88,9 +88,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
                 minute: PropTypes.Requireable<string>;
                 second: PropTypes.Requireable<string>;
                 timeZoneName: PropTypes.Requireable<string>;
-            }> | null | undefined>>; /**
-             * @hidden
-             */
+            }> | null | undefined>>;
             formatPlaceholder: PropTypes.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | PropTypes.InferProps<{
                 year: PropTypes.Requireable<string>;
                 month: PropTypes.Requireable<string>;

package/dist/es/daterangepicker/DateRangePicker.js

@@ -28,8 +28,9 @@ 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 { guid, classNames, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { guid, classNames, Keys, createPropsContext, withPropsContext, IconWrap } from '@progress/kendo-react-common';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
+import { arrowsSwapIcon } from '@progress/kendo-svg-icons';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { DateInput, DateInputWithoutContext } from '../dateinput/DateInput';
@@ -324,7 +325,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
         var startDateInputProps = __assign(__assign({ label: startMessage, format: this.props.format, min: this.min, max: this.max, id: this._startInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.startDateInputSettings), { value: value.start, onChange: this.handleStartChange });
         var endDateInputProps = __assign(__assign({ label: endMessage, format: this.props.format, min: this.min, max: this.max, id: this._endInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.endDateInputSettings), { value: value.end, onChange: this.handleEndChange });
-        var popupProps = __assign(__assign({ animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
+        var popupProps = __assign(__assign({ popupClass: 'k-daterangepicker-popup', animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -341,7 +342,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
             'aria-label': provideLocalizationService(this)
                 .toLanguageString(swapStartEnd, messages[swapStartEnd])
         }),
-            React.createElement("span", { style: { transform: 'rotate(90deg)' }, className: "k-icon k-i-arrows-swap" })));
+            React.createElement(IconWrap, { style: { transform: 'rotate(90deg)' }, name: "arrows-swap", icon: arrowsSwapIcon })));
         return (React.createElement("span", { ref: function (span) {
                 _this._element = span;
             }, className: rootClassName, style: this.props.style, id: this.props.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown },

package/dist/es/datetimepicker/DateTimePicker.js

@@ -29,6 +29,7 @@ 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, kendoThemeMaps } from '@progress/kendo-react-common';
+import { calendarIcon } from '@progress/kendo-svg-icons';
 import { DateInput } from '../dateinput/DateInput';
 import { validatePackage } from '@progress/kendo-react-common';
 import { Button } from '@progress/kendo-react-buttons';
@@ -340,7 +341,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                     _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, ariaRole: "combobox", ariaControls: _this._popupId }, dataInputProps)),
-                React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
+                React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
                         .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
                     'aria-label': provideLocalizationService(_this)
                         .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673258999,
+    publishDate: 1673444580,
     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/TimePicker.js

@@ -40,6 +40,7 @@ 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, kendoThemeMaps } from '@progress/kendo-react-common';
+import { clockIcon } from '@progress/kendo-svg-icons';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -357,7 +358,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             fillMode: null,
             rounded: null
         };
-        var popupProps = __assign({ show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ popupClass: 'k-timepicker-popup', show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -381,7 +382,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
                     _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, ariaRole: "combobox", ariaControls: _this._popupId }, dateInputProps)),
-                React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
+                React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', svgIcon: clockIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
                     'aria-label': toggleClockMessage
                 })),
                 _this.props.popup

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

@@ -33,6 +33,7 @@ var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var models_1 = require("../models");
 var Header_1 = require("./Header");
 var defaults_1 = require("../../defaults");
@@ -465,9 +466,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var activeDate = (0, kendo_date_math_1.cloneDate)(this.dates && this.dates[0] ? this.dates[0] : (0, utils_1.getToday)());
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled },
             React.createElement(Header_1.Header, { key: ".kendo.calendar.header.".concat(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-calendar-nav-prev", icon: "chevron-left", fillMode: "flat", title: prevViewTitle, disabled: isPrevDisabled, onClick: this.handlePrevButtonClick }, prevBtnAria)),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-prev", icon: "chevron-left", svgIcon: kendo_svg_icons_1.chevronLeftIcon, 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-calendar-nav-next", icon: "chevron-right", fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: "chevron-right", svgIcon: kendo_svg_icons_1.chevronRightIcon, 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/components/TodayCommand.js

@@ -20,6 +20,7 @@ var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_date_math_1 = require("@progress/kendo-date-math");
 var messages_1 = require("../../messages");
 var utils_1 = require("../../utils");
@@ -77,7 +78,7 @@ var TodayCommand = /** @class */ (function (_super) {
         var todayClassNames = (0, kendo_react_common_1.classNames)('k-calendar-nav-today', {
             'k-disabled': this.props.disabled
         });
-        return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick, tabIndex: this.props.tabIndex }, todayMessage));
+        return (React.createElement(kendo_react_buttons_1.Button, { className: todayClassNames, onClick: this.handleClick, tabIndex: this.props.tabIndex, fillMode: 'flat' }, todayMessage));
     };
     TodayCommand.propTypes = {
         max: PropTypes.instanceOf(Date).isRequired,

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

@@ -49,7 +49,7 @@ var DOMService = /** @class */ (function () {
         var tbody = (0, utils_1.domContainerFactory)('tbody');
         var thead = (0, utils_1.domContainerFactory)('thead');
         var table = (0, utils_1.domContainerFactory)('table');
-        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-calendar-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\"><button class=\"k-calendar-nav-today\">TODAY</button></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/dateinput/DateInput.js

@@ -40,6 +40,7 @@ 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_svg_icons_1 = require("@progress/kendo-svg-icons");
 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");
@@ -283,8 +284,8 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
                 React.createElement("input", { role: _this.props.ariaRole || 'textbox', 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-label": _this.props.ariaLabel, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, "aria-haspopup": _this.props.ariaHasPopup, "aria-disabled": _this.props.disabled, "aria-expanded": _this.props.ariaExpanded, "aria-controls": _this.props.ariaControls, 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, 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, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-increase", icon: 'caret-alt-up', "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, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-decrease", icon: 'caret-alt-down', "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(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-increase", icon: 'caret-alt-up', svgIcon: kendo_svg_icons_1.caretAltUpIcon, "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, { tabIndex: -1, type: "button", rounded: null, className: "k-spinner-decrease", icon: 'caret-alt-down', svgIcon: kendo_svg_icons_1.caretAltDownIcon, "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 } }))

package/dist/npm/datepicker/DatePicker.js

@@ -43,6 +43,7 @@ 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_svg_icons_1 = require("@progress/kendo-svg-icons");
 var package_metadata_1 = require("../package-metadata");
 var DateInput_1 = require("../dateinput/DateInput");
 var Calendar_1 = require("../calendar/components/Calendar");
@@ -387,7 +388,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
             fillMode: null,
             rounded: null
         };
-        var popupProps = __assign({ show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ popupClass: 'k-datepicker-popup', show: show, anchor: this._element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -417,7 +418,7 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
                     _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, ariaRole: 'combobox', ariaExpanded: _this.show, ariaControls: _this._popupId }, dateInputProps)),
-                React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
+                React.createElement(_this.toggleButtonComp, { type: "button", icon: "calendar", svgIcon: kendo_svg_icons_1.calendarIcon, title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
                 React.createElement(_this.popupComp, __assign({}, popupProps),
                     React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
         }));

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

@@ -88,9 +88,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
                 minute: PropTypes.Requireable<string>;
                 second: PropTypes.Requireable<string>;
                 timeZoneName: PropTypes.Requireable<string>;
-            }> | null | undefined>>; /**
-             * @hidden
-             */
+            }> | null | undefined>>;
             formatPlaceholder: PropTypes.Requireable<NonNullable<"short" | "narrow" | "wide" | "formatPattern" | PropTypes.InferProps<{
                 year: PropTypes.Requireable<string>;
                 month: PropTypes.Requireable<string>;

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -33,6 +33,7 @@ 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_intl_1 = require("@progress/kendo-react-intl");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var DateInput_1 = require("../dateinput/DateInput");
@@ -327,7 +328,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         var separatorMessage = localizationService.toLanguageString(messages_1.separator, messages_1.messages[messages_1.separator]);
         var startDateInputProps = __assign(__assign({ label: startMessage, format: this.props.format, min: this.min, max: this.max, id: this._startInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.startDateInputSettings), { value: value.start, onChange: this.handleStartChange });
         var endDateInputProps = __assign(__assign({ label: endMessage, format: this.props.format, min: this.min, max: this.max, id: this._endInputId, disabled: this.props.disabled, valid: this.props.valid, tabIndex: this.props.tabIndex, ariaExpanded: this.show }, this.props.endDateInputSettings), { value: value.end, onChange: this.handleEndChange });
-        var popupProps = __assign(__assign({ animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
+        var popupProps = __assign(__assign({ popupClass: 'k-daterangepicker-popup', animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -344,7 +345,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
             'aria-label': (0, kendo_react_intl_1.provideLocalizationService)(this)
                 .toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd])
         }),
-            React.createElement("span", { style: { transform: 'rotate(90deg)' }, className: "k-icon k-i-arrows-swap" })));
+            React.createElement(kendo_react_common_1.IconWrap, { style: { transform: 'rotate(90deg)' }, name: "arrows-swap", icon: kendo_svg_icons_1.arrowsSwapIcon })));
         return (React.createElement("span", { ref: function (span) {
                 _this._element = span;
             }, className: rootClassName, style: this.props.style, id: this.props.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown },

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -32,6 +32,7 @@ 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_svg_icons_1 = require("@progress/kendo-svg-icons");
 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");
@@ -343,7 +344,7 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                     _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, ariaRole: "combobox", ariaControls: _this._popupId }, dataInputProps)),
-                React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: (0, kendo_react_intl_1.provideLocalizationService)(_this)
+                React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', svgIcon: kendo_svg_icons_1.calendarIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: (0, kendo_react_intl_1.provideLocalizationService)(_this)
                         .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
                     'aria-label': (0, kendo_react_intl_1.provideLocalizationService)(_this)
                         .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector])

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673258999,
+    publishDate: 1673444580,
     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/TimePicker.js

@@ -43,6 +43,7 @@ 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_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
@@ -360,7 +361,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             fillMode: null,
             rounded: null
         };
-        var popupProps = __assign({ show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ popupClass: 'k-timepicker-popup', show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -384,7 +385,7 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
                     _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, ariaRole: "combobox", ariaControls: _this._popupId }, dateInputProps)),
-                React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
+                React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', svgIcon: kendo_svg_icons_1.clockIcon, onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-input-button", rounded: null }, {
                     'aria-label': toggleClockMessage
                 })),
                 _this.props.popup