superdesk-ui-framework 3.0.54 → 3.0.56

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -11,6 +11,7 @@ import {IInputWrapper} from '../Form/InputWrapper';
 import {SelectPreview} from '../SelectPreview';
 import {TreeSelectPill} from './TreeSelectPill';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelectItem';
+import {createPortal} from 'react-dom';
 
 interface IState<T> {
     value: Array<T>;
@@ -47,6 +48,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> {
@@ -131,7 +133,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
     onMouseDown = (event: MouseEvent) => {
         if (
-            (this.treeSelectRef .current?.contains(event.target as HTMLElement) !== true)
+            (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
+            && (this.treeSelectRef.current?.contains(event.target as HTMLElement) !== true)
             && this.state.openDropdown
         ) {
             this.setState({openDropdown: false});
@@ -701,6 +704,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                     onClick={() => {
                                         this.setState({openDropdown: !this.state.openDropdown});
                                     }}
+                                    data-test-id={this.state.openDropdown ? undefined : this.props['data-test-id']}
                                 />
                             }
 
@@ -770,129 +774,138 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                             })}
                         </div>
                     }
+                </div>
 
-                    {this.state.openDropdown
-                        && <div
-                            className={
-                                "autocomplete autocomplete--multi-select"
-                                + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
-                            }
-                            style={{zIndex: this.props.zIndex}}
-                            ref={this.dropdownRef}
-                        >
-                            <div className='autocomplete__header'>
-                                <div
-                                    className="autocomplete__icon"
-                                    onClick={() => {
-                                        this.backButton();
-                                    }}
-                                >
-                                    <Icon name="search" className="search"></Icon>
-                                </div>
-
-                                <div className='autocomplete__filter'>
-                                    <input
-                                        className="autocomplete__input"
-                                        type="text"
-                                        placeholder={this.props.searchPlaceholder}
-                                        ref={this.inputRef}
-                                        value={this.state.searchFieldValue}
-                                        onChange={(event) => {
-                                            if (this.props.kind === 'synchronous') {
-                                                this.setState({searchFieldValue: event.target.value});
-                                                this.popperInstance?.update();
-                                            } else if (this.props.kind === 'asynchronous') {
-                                                if (this.ICancelFn) {
-                                                    this.ICancelFn();
-                                                }
-
-                                                this.setState({searchFieldValue: event.target.value, options: []});
-                                                this.popperInstance?.update();
-                                                this.debounceFn();
-                                            } else {
-                                                return;
-                                            }
-                                        }}
-                                    />
-                                </div>
-                            </div>
-
-                            {(this.state.activeTree.length > 0 && this.state.buttonValue != null)
-                                && <div className='autocomplete__category-header'>
+                {createPortal(
+                    this.state.openDropdown
+                        && <div id='TREESELECT_DROPDOWN' data-test-id={this.props['data-test-id']}>
+                            <div
+                                className={
+                                    "autocomplete autocomplete--multi-select"
+                                    + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
+                                }
+                                style={{
+                                    zIndex: this.props.zIndex,
+                                    width: this.treeSelectRef.current?.offsetWidth,
+                                }}
+                                ref={this.dropdownRef}
+                            >
+                                <div className='autocomplete__header'>
                                     <div
                                         className="autocomplete__icon"
                                         onClick={() => {
                                             this.backButton();
                                         }}
                                     >
-                                        <Icon name="arrow-left" className="arrow-left"></Icon>
+                                        <Icon name="search" className="search"></Icon>
                                     </div>
 
                                     <div className='autocomplete__filter'>
-                                        <button className='autocomplete__category-title'>
-                                            {this.props.optionTemplate
-                                                ? this.props.optionTemplate(this.state.buttonValue.value)
-                                                : this.props.getLabel(this.state.buttonValue.value)
-                                            }
-                                        </button>
-
-                                        {this.props.selectBranchWithChildren
-                                            && this.branchButton(this.state.buttonValue)
-                                        }
+                                        <input
+                                            className="autocomplete__input"
+                                            type="text"
+                                            placeholder={this.props.searchPlaceholder}
+                                            ref={this.inputRef}
+                                            value={this.state.searchFieldValue}
+                                            onChange={(event) => {
+                                                if (this.props.kind === 'synchronous') {
+                                                    this.setState({searchFieldValue: event.target.value});
+                                                    this.popperInstance?.update();
+                                                } else if (this.props.kind === 'asynchronous') {
+                                                    if (this.ICancelFn) {
+                                                        this.ICancelFn();
+                                                    }
+
+                                                    this.setState({searchFieldValue: event.target.value, options: []});
+                                                    this.popperInstance?.update();
+                                                    this.debounceFn();
+                                                } else {
+                                                    return;
+                                                }
+                                            }}
+                                            data-test-id="filter-input"
+                                        />
                                     </div>
                                 </div>
-                            }
 
-                            {this.state.loading
-                                ? <ul className="suggestion-list--loader"><Loader overlay={true}></Loader></ul>
-                                : this.state.searchFieldValue === ''
-                                    ? this.props.getOptions
-                                        ? <ul
+                                {(this.state.activeTree.length > 0 && this.state.buttonValue != null)
+                                    && <div className='autocomplete__category-header'>
+                                        <div
+                                            className="autocomplete__icon"
+                                            onClick={() => {
+                                                this.backButton();
+                                            }}
+                                        >
+                                            <Icon name="arrow-left" className="arrow-left"></Icon>
+                                        </div>
+
+                                        <div className='autocomplete__filter'>
+                                            <button className='autocomplete__category-title'>
+                                                {this.props.optionTemplate
+                                                    ? this.props.optionTemplate(this.state.buttonValue.value)
+                                                    : this.props.getLabel(this.state.buttonValue.value)
+                                                }
+                                            </button>
+
+                                            {this.props.selectBranchWithChildren
+                                                && this.branchButton(this.state.buttonValue)
+                                            }
+                                        </div>
+                                    </div>
+                                }
+
+                                {this.state.loading
+                                    ? <ul className="suggestion-list--loader"><Loader overlay={true}></Loader></ul>
+                                    : this.state.searchFieldValue === ''
+                                        ? this.props.getOptions
+                                            ? <ul
+                                                className="suggestion-list suggestion-list--multi-select"
+                                                ref={this.ref}
+                                                data-test-id="options"
+                                            >
+                                                {this.state.options.map((option, i: React.Key | undefined) => {
+                                                    let selectedItem = this.state.value.some((obj) =>
+                                                        this.props.getId(obj) === this.props.getId(option.value),
+                                                    );
+
+                                                    return (
+                                                        <TreeSelectItem
+                                                            key={i}
+                                                            option={option}
+                                                            handleTree={this.handleTree}
+                                                            selectedItem={selectedItem}
+                                                            allowMultiple={this.props.allowMultiple}
+                                                            getBorderColor={this.props.getBorderColor}
+                                                            getBackgroundColor={this.props.getBackgroundColor}
+                                                            getId={this.props.getId}
+                                                            optionTemplate={this.props.optionTemplate}
+                                                            getLabel={this.props.getLabel}
+                                                            onKeyDown={() => this.setState({
+                                                                buttonTarget: [
+                                                                    ...this.state.buttonTarget,
+                                                                    this.props.getId(option.value),
+                                                                ],
+                                                            })}
+                                                        />
+                                                    );
+                                                })}
+                                            </ul>
+                                            : null
+                                        : <ul
                                             className="suggestion-list suggestion-list--multi-select"
                                             ref={this.ref}
                                         >
-                                            {this.state.options.map((option, i: React.Key | undefined) => {
-                                                let selectedItem = this.state.value.some((obj) =>
-                                                    this.props.getId(obj) === this.props.getId(option.value),
-                                                );
-
-                                                return (
-                                                    <TreeSelectItem
-                                                        key={i}
-                                                        option={option}
-                                                        handleTree={this.handleTree}
-                                                        selectedItem={selectedItem}
-                                                        allowMultiple={this.props.allowMultiple}
-                                                        getBorderColor={this.props.getBorderColor}
-                                                        getBackgroundColor={this.props.getBackgroundColor}
-                                                        getId={this.props.getId}
-                                                        optionTemplate={this.props.optionTemplate}
-                                                        getLabel={this.props.getLabel}
-                                                        onKeyDown={() => this.setState({
-                                                            buttonTarget: [
-                                                                ...this.state.buttonTarget,
-                                                                this.props.getId(option.value),
-                                                            ],
-                                                        })}
-                                                    />
-                                                );
-                                            })}
+                                            {this.filteredItem(
+                                                this.props.singleLevelSearch
+                                                    ? this.state.options
+                                                    : this.state.filterArr,
+                                            )}
                                         </ul>
-                                        : null
-                                    : <ul
-                                        className="suggestion-list suggestion-list--multi-select"
-                                        ref={this.ref}
-                                    >
-                                        {this.filteredItem(
-                                            this.props.singleLevelSearch
-                                                ? this.state.options
-                                                : this.state.filterArr,
-                                        )}
-                                    </ul>
-                            }
-                        </div>
-                    }
-                </div>
+                                }
+                            </div>
+                        </div>,
+                    document.body,
+                )}
             </InputWrapper>
         );
     }

package/dist/examples.bundle.js

@@ -40147,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') {
@@ -64140,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));
@@ -64503,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) {
@@ -64521,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 });
             }
@@ -64925,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
                     ? {
@@ -64937,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();
@@ -65021,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 () {
@@ -65039,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);
                                         });
@@ -65052,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));
@@ -66727,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));
@@ -78453,15 +78463,15 @@ 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 },
+                    React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item" },
                         item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
                         !item.labelHidden || !item.icon ?
                             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 }),
@@ -80381,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);
@@ -80392,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) {
@@ -143464,7 +143474,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 689 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.54","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.56","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 */