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

package/dist/npm/timepicker/TimePicker.js

@@ -47,6 +47,7 @@ var TimeSelector_1 = require("./TimeSelector");
 var utils_1 = require("../utils");
 var utils_2 = require("./utils");
 var usePickerFloatingLabel_1 = require("../hooks/usePickerFloatingLabel");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 /** @hidden */
 var TimePickerWithoutContext = /** @class */ (function (_super) {
     __extends(TimePickerWithoutContext, _super);
@@ -54,7 +55,6 @@ var TimePickerWithoutContext = /** @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._timeSelector = null;
         _this.shouldFocusDateInput = false;
@@ -146,7 +146,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         };
         _this.normalizeTime = _this.normalizeTime.bind(_this);
         _this.setShow = _this.setShow.bind(_this);
-        _this.nextTick = _this.nextTick.bind(_this);
         _this.mergeTime = _this.mergeTime.bind(_this);
         return _this;
     }
@@ -303,12 +302,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             this.forceUpdate();
         }
     };
-    /**
-     * @hidden
-     */
-    TimePickerWithoutContext.prototype.componentWillUnmount = function () {
-        clearTimeout(this.nextTickId);
-    };
     /**
      * @hidden
      */
@@ -330,15 +323,9 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
      */
     TimePickerWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
-        var _b = this.popupSettings, popupClass = _b.popupClass, otherPopupSettings = __rest(_b, ["popupClass"]);
+        var _a = this.props, _b = _a.size, size = _b === void 0 ? TimePickerWithoutContext.defaultProps.size : _b, _c = _a.rounded, rounded = _c === void 0 ? TimePickerWithoutContext.defaultProps.rounded : _c, _d = _a.fillMode, fillMode = _d === void 0 ? TimePickerWithoutContext.defaultProps.fillMode : _d, disabled = _a.disabled, tabIndex = _a.tabIndex, title = _a.title, id = _a.id, className = _a.className, format = _a.format, formatPlaceholder = _a.formatPlaceholder, smoothScroll = _a.smoothScroll, width = _a.width, name = _a.name, steps = _a.steps, cancelButton = _a.cancelButton, nowButton = _a.nowButton, validationMessage = _a.validationMessage, required = _a.required, validityStyles = _a.validityStyles, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
+        var _e = this.popupSettings, popupClass = _e.popupClass, otherPopupSettings = __rest(_e, ["popupClass"]);
         var isValid = !this.validityStyles || this.validity.valid;
-        var rootClassName = kendo_react_common_1.classNames('k-widget k-timepicker', 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-group k-reset', popupClass);
         var dateInputProps = {
             disabled: disabled,
@@ -362,9 +349,12 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             label: undefined,
             placeholder: !this.state.focused ? this.props.placeholder : null,
             ariaHasPopup: true,
-            ariaExpanded: this.show
+            ariaExpanded: this.show,
+            size: null,
+            fillMode: null,
+            rounded: null
         };
-        var popupProps = __assign({ show: this.show, animate: this._wrapper !== null, anchor: this._wrapper, className: popupClassNames, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ show: this.show, animate: this.element !== null, anchor: this.element, className: popupClassNames, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -378,14 +368,21 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
             .toLanguageString(messages_1.toggleTimeSelector, messages_1.messages[messages_1.toggleTimeSelector]);
         var timepicker = (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("div", { ref: function (span) { _this._element = span; }, className: rootClassName, onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
-                React.createElement("span", { ref: function (span) { _this._wrapper = span; }, className: wrapperClassNames },
-                    React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
-                    React.createElement("span", __assign({ role: "button", onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, className: "k-select" }, {
-                        'aria-controls': _this._popupId,
-                        'aria-label': toggleClockMessage
-                    }),
-                        React.createElement("span", { className: "k-icon k-i-clock" }))),
+            var _b;
+            return (React.createElement("div", { ref: function (span) { _this._element = span; }, className: kendo_react_common_1.classNames('k-input', 'k-timepicker', (_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(kendo_react_buttons_1.Button, __assign({ type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, "aria-label": toggleTimeMessage, className: "k-input-button" }, {
+                    'aria-controls': _this._popupId,
+                    'aria-label': toggleClockMessage
+                })),
                 _this.props.popup
                     ? React.createElement(_this.props.popup, __assign({}, popupProps), timeSelector)
                     : React.createElement(kendo_react_popup_1.Popup, __assign({}, popupProps), timeSelector)));
@@ -403,12 +400,6 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         }
         this.setState({ show: show });
     };
-    TimePickerWithoutContext.prototype.nextTick = function (f) {
-        // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
-        // XXX: https://github.com/facebook/react/issues/3751
-        clearTimeout(this.nextTickId);
-        this.nextTickId = window.setTimeout(function () { return f(); });
-    };
     TimePickerWithoutContext.prototype.mergeTime = function (value) {
         return this.value && value ? utils_1.setTime(this.value, value) : value;
     };
@@ -482,7 +473,10 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         validationMessage: PropTypes.string,
         required: PropTypes.bool,
         validate: PropTypes.bool,
-        valid: PropTypes.bool
+        valid: PropTypes.bool,
+        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
     };
     /**
      * @hidden
@@ -499,7 +493,10 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
         steps: {},
         required: false,
         validityStyles: true,
-        dateInput: DateInput_1.DateInput
+        dateInput: DateInput_1.DateInput,
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
     };
     return TimePickerWithoutContext;
 }(React.Component));

package/dist/npm/timepicker/TimeSelector.js

@@ -181,7 +181,7 @@ var TimeSelector = /** @class */ (function (_super) {
             React.createElement("div", { className: "k-time-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", primary: true, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", themeColor: 'primary', onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     TimeSelector.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.