superdesk-ui-framework 4.0.67 → 4.0.68

package/dist/vendor.bundle.js

@@ -17303,7 +17303,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_13__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(55), __webpack_require__(72)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(55), __webpack_require__(73)(module)))
 
 /***/ }),
 
@@ -17335,7 +17335,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 72:
+/***/ 73:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "superdesk-ui-framework",
-    "version": "4.0.67",
+    "version": "4.0.68",
     "license": "AGPL-3.0",
     "repository": {
         "type": "git",

package/react/components/DatePicker.js

@@ -215,7 +215,7 @@ var DatePicker = /** @class */ (function (_super) {
                         // updating internal state so a user can continue typing and enter a valid value
                         _this.setState({ value: event.value, valid: false });
                     }
-                }, locale: locale, dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () {
+                }, locale: locale, placeholder: this.props.dateFormat.replace('YYYY', 'yyyy').replace('MM', 'mm').replace('DD', 'dd'), dateFormat: this.props.dateFormat.replace('YYYY', 'yy').replace('MM', 'mm').replace('DD', 'dd'), showIcon: true, icon: "icon-calendar", headerTemplate: function () {
                     return _this.props.headerButtonBar == null ? null : (React.createElement("div", { className: "datepicker-header-toolbar" }, _this.props.headerButtonBar.map(function (_a, i) {
                         var label = _a.label, days = _a.days;
                         return (React.createElement("button", { key: i, className: "btn btn--small", onClick: function () {

package/react/components/DateTimePicker.js

@@ -68,11 +68,11 @@ var DatePicker_1 = require("../components/DatePicker");
 var common_1 = require("@sourcefabric/common");
 var lodash_1 = require("lodash");
 var TimePicker_1 = require("./TimePicker");
-var IconButton_1 = require("./IconButton");
 var Form_1 = require("./Form");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var date_fns_1 = require("date-fns");
 var helpers_1 = require("../helpers");
+var Button_1 = require("./Button");
 var DateTimePicker = /** @class */ (function (_super) {
     __extends(DateTimePicker, _super);
     function DateTimePicker() {
@@ -169,12 +169,13 @@ var DateTimePicker = /** @class */ (function (_super) {
             }
         })();
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: this.props.fullWidth, inputWrapper: this.props.inputWrapper, "data-test-id": this.props['data-test-id'], ref: this.props.ref },
-            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
+            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "center", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
                     React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: dateValue, onChange: this.handleDateChange, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth, "data-test-id": "date-input" })),
-                React.createElement("div", { style: { flexGrow: 1 } },
+                React.createElement("div", { style: { flexGrow: 0, color: 'var(--color-text-muted)' } }, "@"),
+                React.createElement("div", { className: "time-picker--date-time", style: { flexGrow: 1 } },
                     React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled || (timeRequiresDate && dateValue == null), preview: this.props.preview, value: timeValue, onChange: this.handleTimeChange, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required, headerTemplate: this.props.timeHeaderTemplate, footerTemplate: this.props.timeFooterTemplate, "data-test-id": "time-input" })),
-                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: this.handleClear, ariaValue: "Clear" })))));
+                this.props.preview !== true && (React.createElement(Button_1.Button, { icon: "remove-sign", text: "Clear", tooltip: "Clear", onClick: this.handleClear, type: "default", style: "hollow", iconOnly: true, disabled: this.props.disabled })))));
     };
     return DateTimePicker;
 }(React.PureComponent));

package/react/components/TimePicker.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IInputWrapper } from './Form/InputWrapper';
 interface IProps extends IInputWrapper {
     value: string | null;
-    onChange(valueNext: string): void;
+    onChange(valueNext: string | null): void;
     allowSeconds?: boolean;
     headerTemplate?: React.ReactNode;
     footerTemplate?: React.ReactNode;

package/react/components/TimePicker.js

@@ -54,9 +54,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(require("react"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var classnames_1 = __importDefault(require("classnames"));
 var Form_1 = require("./Form");
 var TimePickerPopover_1 = require("./TimePickerPopover");
 var ShowPopup_1 = require("./ShowPopup");
+var Icon_1 = require("./Icon");
+var IconButton_1 = require("./IconButton");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker(props) {
@@ -75,7 +78,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             this.state.popupOpen && (React.createElement(ShowPopup_1.PopupPositioner, { getReferenceElement: function () { return _this.timeInputRef.current; }, placement: "bottom-start", onClose: function () {
                     _this.setState({
                         popupOpen: false,
@@ -86,17 +89,37 @@ var TimePicker = /** @class */ (function (_super) {
                             popupOpen: false,
                         });
                     }, allowSeconds: this.props.allowSeconds, headerTemplate: this.props.headerTemplate, footerTemplate: this.props.footerTemplate }))),
-            React.createElement("input", { style: {
-                    cursor: 'pointer',
-                }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
-                    // don't show default popup
-                    e.preventDefault();
-                    _this.setState({
-                        popupOpen: true,
-                    });
-                }, className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
-                    _this.props.onChange(event.target.value);
-                }, "data-test-id": this.props['data-test-id'] })));
+            React.createElement("div", { className: "time-picker__input" },
+                React.createElement("input", { style: {
+                        cursor: 'pointer',
+                    }, ref: this.timeInputRef, value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '', type: "time", onClick: function (e) {
+                        // don't show default popup
+                        e.preventDefault();
+                        _this.setState({
+                            popupOpen: true,
+                        });
+                    }, onKeyDown: function (event) {
+                        // don't show default popup
+                        event.preventDefault();
+                        if (event.key === ' ') {
+                            _this.setState({
+                                popupOpen: !_this.state.popupOpen,
+                            });
+                        }
+                        else if ((event.key === 'Enter' || event.key === 'Escape') && _this.state.popupOpen) {
+                            _this.setState({
+                                popupOpen: false,
+                            });
+                        }
+                    }, className: (0, classnames_1.default)('sd-input__input', {
+                        'sd-input__input--has-value': this.props.value != null,
+                    }), id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
+                        _this.props.onChange(event.target.value);
+                    }, "data-test-id": this.props['data-test-id'] }),
+                React.createElement("div", { className: "time-picker__icon-wrapper" },
+                    React.createElement(Icon_1.Icon, { name: "time" }),
+                    React.createElement("div", { className: "clear-time-picker" },
+                        React.createElement(IconButton_1.IconButton, { icon: "remove-sign", size: "small", ariaValue: "Clear", toolTipFlow: "left", onClick: function () { return _this.props.onChange(null); } }))))));
     };
     return TimePicker;
 }(React.PureComponent));

package/react/components/TimePickerPopover.js

@@ -64,7 +64,7 @@ var TimeValueHolder = /** @class */ (function (_super) {
     }
     TimeValueHolder.prototype.scrollToValue = function () {
         var _a;
-        (_a = this.spanEl.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        (_a = this.spanEl.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'start', behavior: 'smooth' });
     };
     TimeValueHolder.prototype.render = function () {
         var _a;
@@ -152,18 +152,22 @@ var TimePickerPopover = /** @class */ (function (_super) {
             overflowY: 'auto',
             scrollbarWidth: 'none',
             marginTop: 'var(--gap-1)',
+            scrollBehavior: 'smooth',
         };
-        return (React.createElement("div", { className: "sd-shadow--z2 radius-md", onBlur: this.props.closePopup },
+        return (React.createElement("div", { className: "sd-shadow--z2 radius-md", onBlur: this.props.closePopup, onKeyDown: function (event) {
+                if (event.key === 'Enter' || event.key === 'Escape') {
+                    event.preventDefault();
+                    _this.props.closePopup();
+                }
+            }, tabIndex: 0 },
             React.createElement(common_1.Spacer, { v: true, gap: "0", style: {
-                    width: 200,
-                    padding: 'var(--gap-1)',
-                    backgroundColor: 'var(--color-bg-00)',
+                    minWidth: 200,
+                    maxWidth: 'max-content',
+                    backgroundColor: 'var(--color-dropdown-menu-Bg)',
                     borderRadius: 'var(--b-radius--small)',
                 } },
-                this.props.headerTemplate && (React.createElement(React.Fragment, null,
-                    this.props.headerTemplate,
-                    React.createElement(ContentDivider_1.ContentDivider, { border: true, type: "solid", orientation: "horizontal", margin: "none" }))),
-                React.createElement(common_1.Spacer, { h: true, gap: "4", noWrap: true, justifyContent: "center", alignItems: "start" },
+                this.props.headerTemplate && (React.createElement("div", { className: "px-1-5 py-1", style: { borderBottom: '1px solid var(--color-line-x-light)' } }, this.props.headerTemplate)),
+                React.createElement(common_1.Spacer, { h: true, gap: "4", noWrap: true, justifyContent: "center", alignItems: "start", style: { paddingInline: 'var(--gap-1)' } },
                     React.createElement(common_1.Spacer, { v: true, gap: "4", style: styleForColumnOfUnit, alignItems: "center", noWrap: true }, (0, time_1.getOptionsForTimeUnit)('hours', this.is12HourFormat).map(function (hour) {
                         var isActiveHour = hour === parseUnitOfTime('hours', _this.props.value, _this.is12HourFormat);
                         return (React.createElement(TimeValueHolder, { key: hour, ref: isActiveHour ? _this.inputRefs[0] : undefined, onClick: function () {
@@ -216,9 +220,7 @@ var TimePickerPopover = /** @class */ (function (_super) {
                                     value: 'PM',
                                 },
                             ], value: parseInt(((_a = this.props.value) !== null && _a !== void 0 ? _a : '').split(':')[0], 10) < 12 ? 'AM' : 'PM' })))),
-                this.props.footerTemplate && (React.createElement(React.Fragment, null,
-                    React.createElement(ContentDivider_1.ContentDivider, { border: true, type: "solid", orientation: "horizontal", margin: "none" }),
-                    this.props.footerTemplate)))));
+                this.props.footerTemplate && (React.createElement("div", { className: "px-1-5 py-1", style: { borderTop: '1px solid var(--color-line-x-light)' } }, this.props.footerTemplate)))));
     };
     return TimePickerPopover;
 }(React.PureComponent));