superdesk-ui-framework 3.0.53 → 3.0.55

package/dist/examples.bundle.js

@@ -39175,6 +39175,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);
@@ -39208,15 +39219,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 })));
         }
     };
@@ -40133,6 +40147,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') {
@@ -64126,7 +64144,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));
@@ -64489,6 +64507,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) {
@@ -64507,8 +64526,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 });
             }
@@ -64911,6 +64931,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
                     ? {
@@ -64923,67 +64944,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();
@@ -65007,7 +65031,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 () {
@@ -65025,7 +65049,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);
                                         });
@@ -65038,7 +65062,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));
@@ -66713,7 +66737,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));
@@ -67428,6 +67452,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
@@ -67451,7 +67476,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 });
@@ -78433,7 +78463,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,
@@ -78441,7 +78471,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 }),
@@ -80361,10 +80391,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);
@@ -80372,11 +80402,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) {
@@ -143444,7 +143474,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 689 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.53","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.55","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 690 */