superdesk-ui-framework 3.0.53 → 3.0.55

package/dist/superdesk-ui.bundle.js

@@ -38819,6 +38819,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -38852,15 +38863,18 @@ var AvatarContentImage = /** @class */ (function (_super) {
     }
     AvatarContentImage.prototype.render = function () {
         var _a = this.props, imageUrl = _a.imageUrl, tooltipText = _a.tooltipText, onClick = _a.onClick;
-        var role = onClick == null ? undefined : 'button';
+        var maybeButtonProps = onClick == null ? {} : {
+            role: 'button',
+            onClick: function () { return onClick(); },
+        };
         if (imageUrl == null) {
-            return (React.createElement("span", { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText, role: role },
+            return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content sd-avatar-content--dummy-img", title: tooltipText }),
                 React.createElement("svg", { width: "200", height: "200", viewBox: "0 0 200 200", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", "fill-opacity": "0.01" }),
-                    React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", "fill-opacity": "1" }))));
+                    React.createElement("circle", { cx: "100", cy: "100", r: "100", fill: "white", fillOpacity: "0.01" }),
+                    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z", fill: "var(--sd-colour-avatar-dummy)", fillOpacity: "1" }))));
         }
         else {
-            return (React.createElement("span", { className: "sd-avatar-content", title: tooltipText, role: role },
+            return (React.createElement("span", __assign({}, maybeButtonProps, { className: "sd-avatar-content", title: tooltipText }),
                 React.createElement("img", { src: imageUrl })));
         }
     };
@@ -39777,6 +39791,10 @@ var DatePicker = /** @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 },
             React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
+                    var refAny = ref;
+                    if (_this.props['data-test-id'] != null && (refAny === null || refAny === void 0 ? void 0 : refAny.inputElement) != null) {
+                        refAny.inputElement.setAttribute('data-test-id', _this.props['data-test-id']);
+                    }
                 }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
                     var result = parseFromPrimeReactCalendarFormat(event.value);
                     if (result !== 'failed-to-parse') {
@@ -63743,7 +63761,7 @@ var TimePicker = /** @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 },
             React.createElement("input", { value: this.props.value, type: "time", 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'] })));
     };
     return TimePicker;
 }(React.PureComponent));
@@ -64106,6 +64124,7 @@ var Label_1 = __webpack_require__(36);
 var SelectPreview_1 = __webpack_require__(75);
 var TreeSelectPill_1 = __webpack_require__(513);
 var TreeSelectItem_1 = __webpack_require__(514);
+var react_dom_1 = __webpack_require__(8);
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -64124,8 +64143,9 @@ var TreeSelect = /** @class */ (function (_super) {
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
         _this.onMouseDown = function (event) {
-            var _a;
-            if ((((_a = _this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
                 && _this.state.openDropdown) {
                 _this.setState({ openDropdown: false });
             }
@@ -64528,6 +64548,7 @@ var TreeSelect = /** @class */ (function (_super) {
     };
     TreeSelect.prototype.render = function () {
         var _this = this;
+        var _a;
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
                     ? {
@@ -64540,67 +64561,70 @@ var TreeSelect = /** @class */ (function (_super) {
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
         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 },
-            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef },
-                this.props.allowMultiple
-                    ? React.createElement("div", { className: "tags-input__tags" },
-                        this.props.readOnly
-                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
+            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef }, this.props.allowMultiple
+                ? React.createElement("div", { className: "tags-input__tags" },
+                    this.props.readOnly
+                        || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
+                                e.stopPropagation();
+                                if (!_this.props.disabled) {
+                                    _this.setState({ openDropdown: !_this.state.openDropdown });
+                                }
+                            } },
+                            React.createElement("i", { className: "icon-plus-large" })),
+                    React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
+                        var Wrapper = function (_a) {
+                            var backgroundColor = _a.backgroundColor, children = _a.children;
+                            return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor }, children));
+                        };
+                        return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                            ? _this.props.valueTemplate(item, Wrapper)
+                            : (React.createElement(Wrapper, null,
+                                React.createElement("span", null, _this.props.getLabel(item))))));
+                    })),
+                    this.state.value.length > 0
+                        ? (this.props.readOnly || this.props.disabled)
+                            || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
                                     e.stopPropagation();
-                                    if (!_this.props.disabled) {
-                                        _this.setState({ openDropdown: !_this.state.openDropdown });
-                                    }
+                                    _this.setState({ value: [] });
                                 } },
-                                React.createElement("i", { className: "icon-plus-large" })),
-                        React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
-                            var Wrapper = function (_a) {
-                                var backgroundColor = _a.backgroundColor, children = _a.children;
-                                return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor }, children));
-                            };
-                            return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
-                                ? _this.props.valueTemplate(item, Wrapper)
-                                : (React.createElement(Wrapper, null,
-                                    React.createElement("span", null, _this.props.getLabel(item))))));
-                        })),
-                        this.state.value.length > 0
-                            ? (this.props.readOnly || this.props.disabled)
-                                || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
-                                        e.stopPropagation();
-                                        _this.setState({ value: [] });
-                                    } },
-                                    React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
-                            : null)
-                    : React.createElement("div", { className: "tags-input__tags" },
-                        this.props.readOnly
-                            || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
-                                    _this.setState({ openDropdown: !_this.state.openDropdown });
-                                } }),
-                        this.state.value.length < 1
-                            && React.createElement("span", { className: 'tags-input__single-item'
-                                    + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
-                                React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
-                        this.state.value.map(function (item, i) {
-                            var Wrapper = function (_a) {
-                                var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
-                                return (React.createElement("span", { className: 'tags-input__single-item'
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
-                                    _this.props.getBorderColor
-                                        && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
-                                                ? { backgroundColor: borderColor }
-                                                : { backgroundColor: _this.props.getBorderColor(item) } }),
-                                    React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
-                                        React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
-                                        _this.props.readOnly
-                                            || React.createElement("span", { className: "tags-input__remove-button" },
-                                                React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
-                            };
-                            return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
-                                ? _this.props.valueTemplate(item, Wrapper)
-                                : (React.createElement(Wrapper, null,
-                                    React.createElement("span", null, _this.props.getLabel(item)))));
-                        })),
-                this.state.openDropdown
-                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select"
-                            + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
+                                React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
+                        : null)
+                : React.createElement("div", { className: "tags-input__tags" },
+                    this.props.readOnly
+                        || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
+                                _this.setState({ openDropdown: !_this.state.openDropdown });
+                            }, "data-test-id": this.state.openDropdown ? undefined : this.props['data-test-id'] }),
+                    this.state.value.length < 1
+                        && React.createElement("span", { className: 'tags-input__single-item'
+                                + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
+                            React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
+                    this.state.value.map(function (item, i) {
+                        var Wrapper = function (_a) {
+                            var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
+                            return (React.createElement("span", { className: 'tags-input__single-item'
+                                    + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
+                                _this.props.getBorderColor
+                                    && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
+                                            ? { backgroundColor: borderColor }
+                                            : { backgroundColor: _this.props.getBorderColor(item) } }),
+                                React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
+                                    React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
+                                    _this.props.readOnly
+                                        || React.createElement("span", { className: "tags-input__remove-button" },
+                                            React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
+                        };
+                        return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                            ? _this.props.valueTemplate(item, Wrapper)
+                            : (React.createElement(Wrapper, null,
+                                React.createElement("span", null, _this.props.getLabel(item)))));
+                    }))),
+            (0, react_dom_1.createPortal)(this.state.openDropdown
+                && React.createElement("div", { id: 'TREESELECT_DROPDOWN', "data-test-id": this.props['data-test-id'] },
+                    React.createElement("div", { className: "autocomplete autocomplete--multi-select"
+                            + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
+                            zIndex: this.props.zIndex,
+                            width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
+                        }, ref: this.dropdownRef },
                         React.createElement("div", { className: 'autocomplete__header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                     _this.backButton();
@@ -64624,7 +64648,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                         else {
                                             return;
                                         }
-                                    } }))),
+                                    }, "data-test-id": "filter-input" }))),
                         (this.state.activeTree.length > 0 && this.state.buttonValue != null)
                             && React.createElement("div", { className: 'autocomplete__category-header' },
                                 React.createElement("div", { className: "autocomplete__icon", onClick: function () {
@@ -64642,7 +64666,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                 React.createElement(Loader_1.Loader, { overlay: true }))
                             : this.state.searchFieldValue === ''
                                 ? this.props.getOptions
-                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options.map(function (option, i) {
+                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options" }, this.state.options.map(function (option, i) {
                                         var selectedItem = _this.state.value.some(function (obj) {
                                             return _this.props.getId(obj) === _this.props.getId(option.value);
                                         });
@@ -64655,7 +64679,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     : null
                                 : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
                                     ? this.state.options
-                                    : this.state.filterArr))))));
+                                    : this.state.filterArr)))), document.body)));
     };
     return TreeSelect;
 }(React.Component));
@@ -65974,7 +65998,7 @@ var Input = /** @class */ (function (_super) {
                 React.createElement("span", null, this.props.value)));
         }
         return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
-            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
+            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled, "data-test-id": this.props['data-test-id'] })));
     };
     return Input;
 }(React.Component));
@@ -66689,6 +66713,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var ItemTemplate = this.props.itemTemplate;
+        var ValueTemplate = this.props.valueTemplate;
         var _b = this.state, loading = _b.loading, options = _b.options;
         var _c = this.props, value = _c.value, onChange = _c.onChange, getLabel = _c.getLabel, disabled = _c.disabled, required = _c.required, zIndex = _c.zIndex, autoFocus = _c.autoFocus, areEqual = _c.areEqual, getItems = _c.getItems, emptyFilterMessage = _c.noResultsFoundMessage, filterPlaceholder = _c.filterPlaceholder, width = _c.width;
         // Using another data structure so it is possible to have getLabel function
@@ -66712,7 +66737,12 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
-                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
+                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
+                    var _a, _b;
+                    return ValueTemplate != null
+                        ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
+                        : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
+                }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
                     _this.setState({ loading: true });
                     getItems(searchString).then(function (_options) {
                         _this.setState({ options: _options, loading: false });
@@ -77694,7 +77724,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
             _a));
         return (React.createElement(React.Fragment, null,
             !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
-                React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
+                React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'] }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
                     React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
                     React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined },
                         item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
@@ -77702,7 +77732,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
                             React.createElement("span", { className: "sd-check-button__text-label-inner" }, item.label) : null))); }))
                 : null,
             ((_l = this.props.group) === null || _l === void 0 ? void 0 : _l.groupLabel) ?
-                React.createElement("div", { className: 'sd-check-button__group-wrapper' },
+                React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'] },
                     React.createElement(FormLabel_1.FormLabel, { forId: this.htmlId + 'group', text: this.props.group.groupLabel }),
                     React.createElement("div", { role: "radiogroup", id: this.htmlId + 'group', className: classes }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: -1 },
                         React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
@@ -79622,10 +79652,10 @@ var TabLabel = function (_a) {
     return (React.createElement("span", null, label));
 };
 exports.TabLabel = TabLabel;
-var Tabs = function (_a) {
-    var _b;
-    var initiallySelectedIndex = _a.initiallySelectedIndex, size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
-    var _c = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _c[0], setIndex = _c[1];
+var Tabs = function (props) {
+    var _a;
+    var initiallySelectedIndex = props.initiallySelectedIndex, size = props.size, theme = props.theme, ariaLabel = props.ariaLabel, children = props.children, onClick = props.onClick;
+    var _b = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _b[0], setIndex = _b[1];
     function handleSelected(i) {
         setIndex(i);
         handleClick(i);
@@ -79633,11 +79663,11 @@ var Tabs = function (_a) {
     var handleClick = function (i) {
         onClick(i);
     };
-    var classes = (0, classnames_1.default)('sd-nav-tabs', (_b = {},
-        _b["sd-nav-tabs--".concat(size)] = size && size !== undefined,
-        _b['sd-nav-tabs--ui-dark'] = theme === 'dark',
-        _b));
-    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
+    var classes = (0, classnames_1.default)('sd-nav-tabs', (_a = {},
+        _a["sd-nav-tabs--".concat(size)] = size && size !== undefined,
+        _a['sd-nav-tabs--ui-dark'] = theme === 'dark',
+        _a));
+    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs', "data-test-id": props['data-test-id'] }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
 };
 exports.Tabs = Tabs;
 var TabContent = function (_a) {

package/package.json

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

package/react/components/DatePicker.d.ts

@@ -13,6 +13,7 @@ interface IDatePickerBase extends IInputWrapper {
 interface IDatePicker extends IDatePickerBase {
     value: Date | null;
     onChange(valueNext: Date | null): void;
+    'data-test-id'?: string;
 }
 interface IState {
     value: CalendarProps['value'];

package/react/components/DatePicker.js

@@ -139,6 +139,10 @@ var DatePicker = /** @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 },
             React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
+                    var refAny = ref;
+                    if (_this.props['data-test-id'] != null && (refAny === null || refAny === void 0 ? void 0 : refAny.inputElement) != null) {
+                        refAny.inputElement.setAttribute('data-test-id', _this.props['data-test-id']);
+                    }
                 }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
                     var result = parseFromPrimeReactCalendarFormat(event.value);
                     if (result !== 'failed-to-parse') {

package/react/components/Input.d.ts

@@ -4,6 +4,7 @@ interface IPropsBase extends IInputCommon {
     maxLength?: number;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large';
+    'data-test-id'?: string;
 }
 interface IPropsText extends IPropsBase {
     type: 'text';

package/react/components/Input.js

@@ -68,7 +68,7 @@ var Input = /** @class */ (function (_super) {
                 React.createElement("span", null, this.props.value)));
         }
         return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
-            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
+            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled, "data-test-id": this.props['data-test-id'] })));
     };
     return Input;
 }(React.Component));

package/react/components/RadioButtonGroup.d.ts

@@ -19,6 +19,7 @@ interface IProps {
     required?: boolean;
     tabindex?: number;
     onChange(nextValue: string): void;
+    'data-test-id'?: string;
 }
 export declare class RadioButtonGroup extends React.Component<IProps> {
     htmlId: string;

package/react/components/RadioButtonGroup.js

@@ -72,7 +72,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
             _a));
         return (React.createElement(React.Fragment, null,
             !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
-                React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
+                React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'] }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
                     React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
                     React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined },
                         item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
@@ -80,7 +80,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
                             React.createElement("span", { className: "sd-check-button__text-label-inner" }, item.label) : null))); }))
                 : null,
             ((_l = this.props.group) === null || _l === void 0 ? void 0 : _l.groupLabel) ?
-                React.createElement("div", { className: 'sd-check-button__group-wrapper' },
+                React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'] },
                     React.createElement(FormLabel_1.FormLabel, { forId: this.htmlId + 'group', text: this.props.group.groupLabel }),
                     React.createElement("div", { role: "radiogroup", id: this.htmlId + 'group', className: classes }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: -1 },
                         React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),

package/react/components/SelectWithTemplate.d.ts

@@ -10,6 +10,9 @@ interface IProps<T> extends IInputWrapper {
     itemTemplate: React.ComponentType<{
         option: T | null;
     }>;
+    valueTemplate?: React.ComponentType<{
+        option: T | null;
+    }>;
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
     autoFocus?: boolean;

package/react/components/SelectWithTemplate.js

@@ -75,6 +75,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var ItemTemplate = this.props.itemTemplate;
+        var ValueTemplate = this.props.valueTemplate;
         var _b = this.state, loading = _b.loading, options = _b.options;
         var _c = this.props, value = _c.value, onChange = _c.onChange, getLabel = _c.getLabel, disabled = _c.disabled, required = _c.required, zIndex = _c.zIndex, autoFocus = _c.autoFocus, areEqual = _c.areEqual, getItems = _c.getItems, emptyFilterMessage = _c.noResultsFoundMessage, filterPlaceholder = _c.filterPlaceholder, width = _c.width;
         // Using another data structure so it is possible to have getLabel function
@@ -98,7 +99,12 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
-                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
+                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
+                    var _a, _b;
+                    return ValueTemplate != null
+                        ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
+                        : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
+                }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
                     _this.setState({ loading: true });
                     getItems(searchString).then(function (_options) {
                         _this.setState({ options: _options, loading: false });

package/react/components/TabCustom.d.ts

@@ -5,6 +5,7 @@ interface ITabs {
     children: Array<any>;
     onClick(i: number): void;
     initiallySelectedIndex?: number;
+    'data-test-id'?: string;
 }
 interface ITabLabel {
     label: string;
@@ -20,7 +21,7 @@ interface ITabPanel {
     children: any;
 }
 export declare const TabLabel: ({ label }: ITabLabel) => JSX.Element;
-export declare const Tabs: ({ initiallySelectedIndex, size, theme, ariaLabel, children, onClick }: ITabs) => JSX.Element;
+export declare const Tabs: (props: ITabs) => JSX.Element;
 export declare const TabContent: ({ theme, children, activePanel }: ITabContent) => JSX.Element;
 export declare const TabPanel: ({ children, indexValue }: ITabPanel) => JSX.Element;
 export {};

package/react/components/TabCustom.js

@@ -34,10 +34,10 @@ var TabLabel = function (_a) {
     return (React.createElement("span", null, label));
 };
 exports.TabLabel = TabLabel;
-var Tabs = function (_a) {
-    var _b;
-    var initiallySelectedIndex = _a.initiallySelectedIndex, size = _a.size, theme = _a.theme, ariaLabel = _a.ariaLabel, children = _a.children, onClick = _a.onClick;
-    var _c = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _c[0], setIndex = _c[1];
+var Tabs = function (props) {
+    var _a;
+    var initiallySelectedIndex = props.initiallySelectedIndex, size = props.size, theme = props.theme, ariaLabel = props.ariaLabel, children = props.children, onClick = props.onClick;
+    var _b = React.useState(initiallySelectedIndex !== null && initiallySelectedIndex !== void 0 ? initiallySelectedIndex : 0), index = _b[0], setIndex = _b[1];
     function handleSelected(i) {
         setIndex(i);
         handleClick(i);
@@ -45,11 +45,11 @@ var Tabs = function (_a) {
     var handleClick = function (i) {
         onClick(i);
     };
-    var classes = (0, classnames_1.default)('sd-nav-tabs', (_b = {},
-        _b["sd-nav-tabs--".concat(size)] = size && size !== undefined,
-        _b['sd-nav-tabs--ui-dark'] = theme === 'dark',
-        _b));
-    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs' }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
+    var classes = (0, classnames_1.default)('sd-nav-tabs', (_a = {},
+        _a["sd-nav-tabs--".concat(size)] = size && size !== undefined,
+        _a['sd-nav-tabs--ui-dark'] = theme === 'dark',
+        _a));
+    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs', "data-test-id": props['data-test-id'] }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
 };
 exports.Tabs = Tabs;
 var TabContent = function (_a) {

package/react/components/TimePicker.d.ts

@@ -4,6 +4,7 @@ interface IProps extends IInputWrapper {
     value: string;
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
+    'data-test-id'?: string;
 }
 export declare class TimePicker extends React.PureComponent<IProps> {
     private htmlId;

package/react/components/TimePicker.js

@@ -61,7 +61,7 @@ var TimePicker = /** @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 },
             React.createElement("input", { value: this.props.value, type: "time", 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'] })));
     };
     return TimePicker;
 }(React.PureComponent));

package/react/components/TreeSelect/TreeSelect.d.ts

@@ -32,6 +32,7 @@ interface IPropsBase<T> extends IInputWrapper {
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
     valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
+    'data-test-id'?: string;
 }
 interface IPropsSync<T> extends IPropsBase<T> {
     kind: 'synchronous';