superdesk-ui-framework 4.0.31 → 4.0.33

package/app/styles/form-elements/_forms-general.scss

@@ -79,7 +79,7 @@
 		}
 	}
 
-	.form__row-item:not(.sd-flex-no-grow) {
+	.form__row-item:not(.sd-flex-no-grow, .form__row-item--no-grow) {
 		flex-basis: 0;
 	}
 

package/app/styles/form-elements/_inputs.scss

@@ -758,6 +758,7 @@
     .sd-input__input-container {
         grid-row: 2/3;
         grid-column: 2/4;
+        min-width: min-content;
     }
 
     .sd-input__input-container:has(input[type="time"]) {
@@ -825,7 +826,7 @@
             display: inline-block;
             margin-inline-end: var(--space--1);
             pointer-events: none;
-            opacity: 0.4; 
+            opacity: 0.4;
             z-index: 0;
             transition: opacity 0.2s ease;
         }
@@ -859,7 +860,7 @@
             -webkit-font-smoothing: antialiased;
             margin-inline-end: var(--space--1);
             pointer-events: none;
-            opacity: 0.6; 
+            opacity: 0.6;
             z-index: 0;
             transition: opacity 0.2s ease;
         }
@@ -959,6 +960,11 @@
     }
 }
 
+.sd-input--content-width {
+    width: max-content;
+    min-width: 100px;
+}
+
 .sd-input--invalid {
     .sd-input__input,
     .sd-input__select,

package/app-typescript/components/Form/InputWrapper.tsx

@@ -12,7 +12,13 @@ export interface IInputCommon {
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
+
+    /**
+     * Defaults to `true`
+     * If set to false, it will be as wide as content
+     */
     fullWidth?: boolean;
+
     boxedStyle?: boolean;
     boxedLable?: boolean;
 }
@@ -44,11 +50,14 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
     }
 
     render() {
+        const fullWidth = this.props.fullWidth ?? true;
+
         const classes = classNames('sd-input', {
             'sd-input--inline-label': this.props.inlineLabel,
             'sd-input--required': this.props.required,
             'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
+            'sd-input--full-width': fullWidth,
+            'sd-input--content-width': !fullWidth,
             'sd-input--invalid': this.props.invalid,
             'sd-input--medium': this.props.size === undefined,
             [`sd-input--${this.props.size}`]: this.props.size || this.props.size !== undefined,

package/app-typescript/components/Layouts/Panel.tsx

@@ -26,6 +26,7 @@ interface IPropsPanel {
         | {custom: React.CSSProperties['width']};
     background?: 'transparent' | 'light' | 'grey'; // defaults to light (white)
     open?: boolean;
+    ['data-test-id']?: string;
 }
 
 export default class Panel extends React.PureComponent<IPropsPanel> {
@@ -52,7 +53,13 @@ export default class Panel extends React.PureComponent<IPropsPanel> {
         let classes2 = classNames('side-panel__container', classes2Obj);
 
         return (
-            <div className={classes2} style={style} data-theme={this.props.theme ? `${this.props.theme}-ui` : null}>
+            <div
+                className={classes2}
+                style={style}
+                data-theme={this.props.theme ? `${this.props.theme}-ui` : null}
+                data-test-id={this.props['data-test-id']}
+
+            >
                 <div className={classes}>
                     {this.props.children}
                 </div>

package/app-typescript/components/Menu.tsx

@@ -58,6 +58,7 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
+    'data-test-id'?: string;
 }
 
 function isSeparator(item: IMenuItem): item is ISeparator {
@@ -162,7 +163,7 @@ export class Menu extends React.Component<IProps, {}> {
                                 firstMenuItem.focus();
                             }
                         }}
-                        data-test-id="menu"
+                        data-test-id={this.props['data-test-id'] ?? 'menu'}
                         zIndex={this.zIndex}
                     />
                 </div>

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -9,6 +9,7 @@ interface IProps {
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
     disabled?: boolean;
+    ['data-test-id']?: string;
 }
 
 export interface ISideBarTab {
@@ -44,7 +45,7 @@ export class SideBarTabs extends React.PureComponent<IProps> {
 
     render() {
         return (
-            <div className='sd-sidetab-menu sd-sidetab-menu--static'>
+            <div className='sd-sidetab-menu sd-sidetab-menu--static' data-test-id={this.props['data-test-id']}>
                 <ul>
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
@@ -65,6 +66,8 @@ export class SideBarTabs extends React.PureComponent<IProps> {
                                             },
                                         )}
                                         onClick={() => this.handleClick(item)}
+                                        data-test-id='widget-icon'
+                                        data-test-value={item.id}
                                     >
                                         {item.badgeValue != null && (
                                             <Badge text={item['badgeValue']} type='primary' />

package/app-typescript/components/Select.tsx

@@ -50,7 +50,7 @@ class Select extends React.Component<ISelect> {
                         className='sd-input__select'
                         id={this.htmlId}
                         value={this.props.value}
-                        aria-describedby={this.htmlId}
+                        aria-describedby={this.htmlId + 'label'}
                         tabIndex={this.props.tabindex}
                         onChange={this.handleChange}
                         disabled={this.props.disabled || this.props.readonly}

package/app-typescript/components/SubNav.tsx

@@ -5,6 +5,7 @@ interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker'; // defaults to 'light'
     theme?: 'light' | 'dark'; // defaults to 'light
     className?: string;
+    ['data-test-id']?: string;
 }
 interface IPropsDivider {
     width?: 'small' | 'medium' | 'large' | 'x-large'; // defaults to 'medium'
@@ -38,6 +39,7 @@ export class SubNav extends React.PureComponent<IProps> {
             <div
                 data-theme={this.props.theme ? `${this.props.theme}-ui` : defaultTheme}
                 className={classes}
+                data-test-id={this.props['data-test-id']}
             >
                 {this.props.children}
             </div>

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

@@ -54,7 +54,10 @@ interface IPropsBase<T> extends IInputWrapper {
     getBackgroundColor?(item: T): string;
     getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(
+        item: T,
+        Wrapper: React.ComponentType<{backgroundColor?: string}>,
+    ): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 
@@ -632,6 +635,24 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         });
     }
 
+    private renderItemContent(item: T, Wrapper: React.ComponentType<{backgroundColor?: string}>) {
+        if (this.props.valueTemplate) {
+            return this.props.valueTemplate(item, Wrapper);
+        }
+
+        const content = this.props.optionTemplate?.(item) ?? (
+            <span>
+                {this.props.getLabel(item)}
+            </span>
+        );
+
+        return (
+            <Wrapper>
+                {content}
+            </Wrapper>
+        );
+    }
+
     render() {
         if (this.props.preview) {
             return (
@@ -702,7 +723,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
-                fullWidth={this.props.inputWidth === '100%' ?? false}
+                fullWidth={this.props.fullWidth}
                 data-test-id={this.props['data-test-id']}
             >
                 <div
@@ -762,16 +783,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
                                     return (
                                         <ItemWrapper itemId={itemId} key={itemId} i={i}>
-                                            {this.props.valueTemplate
-                                                ? this.props.valueTemplate(item, Wrapper)
-                                                : (
-                                                    <Wrapper>
-                                                        <span>
-                                                            {this.props.getLabel(item)}
-                                                        </span>
-                                                    </Wrapper>
-                                                )
-                                            }
+                                            {this.renderItemContent(item, Wrapper)}
                                         </ItemWrapper>
                                     );
                                 })}
@@ -863,14 +875,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 );
 
                                 return <React.Fragment key={i}>
-                                    {this.props.valueTemplate
-                                        ? this.props.valueTemplate(item, Wrapper)
-                                        : (
-                                            <Wrapper>
-                                                <span>{this.props.getLabel(item)}</span>
-                                            </Wrapper>
-                                        )
-                                    }
+                                    {this.renderItemContent(item, Wrapper)}
                                 </React.Fragment>;
                             })}
                         </div>
@@ -886,6 +891,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         style={{
                             zIndex: this.zIndex,
                             width: this.treeSelectRef.current?.offsetWidth,
+                            minWidth: '300px',
                         }}
                         ref={this.dropdownRef}
                     >

package/dist/examples.bundle.js

@@ -45093,12 +45093,14 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b;
+        var _b, _c;
+        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
                 'sd-input--disabled': this.props.disabled,
-                'sd-input--full-width': this.props.fullWidth,
+                'sd-input--full-width': fullWidth,
+                'sd-input--content-width': !fullWidth,
                 'sd-input--invalid': this.props.invalid,
                 'sd-input--medium': this.props.size === undefined
             },
@@ -45114,8 +45116,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
-                    _b.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
+                    _c.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },
@@ -65287,7 +65289,7 @@ var Panel = /** @class */ (function (_super) {
             style.width = this.props.size.custom;
         }
         var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
-        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
+        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: classes }, this.props.children)));
     };
     return Panel;
@@ -79480,9 +79482,17 @@ var TreeSelect = /** @class */ (function (_super) {
             value: (0, common_1.arrayMove)(this.state.value, result.source.index, result.destination.index),
         });
     };
+    TreeSelect.prototype.renderItemContent = function (item, Wrapper) {
+        var _a, _b, _c;
+        if (this.props.valueTemplate) {
+            return this.props.valueTemplate(item, Wrapper);
+        }
+        var content = (_c = (_b = (_a = this.props).optionTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : (React.createElement("span", null, this.props.getLabel(item)));
+        return (React.createElement(Wrapper, null, content));
+    };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        var _a, _b;
+        var _a;
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
                     ? {
@@ -79515,7 +79525,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: this.props.fullWidth, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly
@@ -79535,10 +79545,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             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, draggable: _this.props.sortable }, children));
                         };
                         var itemId = _this.props.getId(item);
-                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.props.valueTemplate
-                            ? _this.props.valueTemplate(item, Wrapper)
-                            : (React.createElement(Wrapper, null,
-                                React.createElement("span", null, _this.props.getLabel(item))))));
+                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.renderItemContent(item, Wrapper)));
                     })),
                     this.state.value.length > 0
                         ? (this.props.readOnly || this.props.disabled)
@@ -79571,16 +79578,14 @@ var TreeSelect = /** @class */ (function (_super) {
                                     (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
                                         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)))));
+                        return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
                     }))),
             React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: "autocomplete autocomplete--multi-select"
                         + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
-                        width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
+                        width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
+                        minWidth: '300px',
                     }, ref: this.dropdownRef },
                     React.createElement("div", { className: 'autocomplete__header' },
                         React.createElement("div", { className: "autocomplete__icon" },
@@ -84618,7 +84623,7 @@ var Select = /** @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, readonly: this.props.readonly, 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("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));
@@ -128219,7 +128224,7 @@ var SubNav = /** @class */ (function (_super) {
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));
@@ -149169,6 +149174,7 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
+        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -149186,7 +149192,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
+                    }, "data-test-id": (_a = this.props['data-test-id']) !== null && _a !== void 0 ? _a : 'menu', zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));
@@ -154425,7 +154431,7 @@ var SideBarTabs = /** @class */ (function (_super) {
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static' },
+        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static', "data-test-id": this.props['data-test-id'] },
             React.createElement("ul", null, this.props.items.map(function (item, index) {
                 if (item === 'divider') {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
@@ -154433,7 +154439,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
                         React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
-                            }), onClick: function () { return _this.handleClick(item); } },
+                            }), onClick: function () { return _this.handleClick(item); }, "data-test-id": 'widget-icon', "data-test-value": item.id },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
@@ -188153,7 +188159,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 938 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.31","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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/enzyme-adapter-react-16":"^1.0.6","@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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","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-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.33","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","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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/enzyme-adapter-react-16":"^1.0.6","@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","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","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","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","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-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 939 */

package/dist/superdesk-ui.bundle.css

@@ -39294,7 +39294,7 @@ textarea.sd-media-carousel__media-title {
   .form__row--flex .form__row-item:only-child {
     margin: 0; }
 
-.form__row--flex .form__row-item:not(.sd-flex-no-grow) {
+.form__row--flex .form__row-item {
   flex-basis: 0; }
 
 .form__row--flex .form__row-item--no-grow {
@@ -40193,7 +40193,8 @@ textarea.sd-media-carousel__media-title {
     grid-column: 2/4; }
   .sd-input .sd-input__input-container {
     grid-row: 2/3;
-    grid-column: 2/4; }
+    grid-column: 2/4;
+    min-width: min-content; }
   .sd-input .sd-input__input-container:has(input[type="time"]) {
     min-width: 110px; }
   .sd-input textarea.sd-input__input {
@@ -40346,6 +40347,10 @@ textarea.sd-media-carousel__media-title {
       inset-block-start: -2px;
       inset-inline-end: 4px; }
 
+.sd-input--content-width {
+  width: max-content;
+  min-width: 100px; }
+
 .sd-input--invalid .sd-input__input,
 .sd-input--invalid .sd-input__select,
 .sd-input--invalid .sd-input__duration-input,

package/dist/superdesk-ui.bundle.js

@@ -44597,12 +44597,14 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b;
+        var _b, _c;
+        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
                 'sd-input--disabled': this.props.disabled,
-                'sd-input--full-width': this.props.fullWidth,
+                'sd-input--full-width': fullWidth,
+                'sd-input--content-width': !fullWidth,
                 'sd-input--invalid': this.props.invalid,
                 'sd-input--medium': this.props.size === undefined
             },
@@ -44618,8 +44620,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
-                    _b.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
+                    _c.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },
@@ -64791,7 +64793,7 @@ var Panel = /** @class */ (function (_super) {
             style.width = this.props.size.custom;
         }
         var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
-        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
+        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: classes }, this.props.children)));
     };
     return Panel;
@@ -78601,9 +78603,17 @@ var TreeSelect = /** @class */ (function (_super) {
             value: (0, common_1.arrayMove)(this.state.value, result.source.index, result.destination.index),
         });
     };
+    TreeSelect.prototype.renderItemContent = function (item, Wrapper) {
+        var _a, _b, _c;
+        if (this.props.valueTemplate) {
+            return this.props.valueTemplate(item, Wrapper);
+        }
+        var content = (_c = (_b = (_a = this.props).optionTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : (React.createElement("span", null, this.props.getLabel(item)));
+        return (React.createElement(Wrapper, null, content));
+    };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        var _a, _b;
+        var _a;
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
                     ? {
@@ -78636,7 +78646,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: this.props.fullWidth, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly
@@ -78656,10 +78666,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             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, draggable: _this.props.sortable }, children));
                         };
                         var itemId = _this.props.getId(item);
-                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.props.valueTemplate
-                            ? _this.props.valueTemplate(item, Wrapper)
-                            : (React.createElement(Wrapper, null,
-                                React.createElement("span", null, _this.props.getLabel(item))))));
+                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.renderItemContent(item, Wrapper)));
                     })),
                     this.state.value.length > 0
                         ? (this.props.readOnly || this.props.disabled)
@@ -78692,16 +78699,14 @@ var TreeSelect = /** @class */ (function (_super) {
                                     (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
                                         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)))));
+                        return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
                     }))),
             React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: "autocomplete autocomplete--multi-select"
                         + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
-                        width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
+                        width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
+                        minWidth: '300px',
                     }, ref: this.dropdownRef },
                     React.createElement("div", { className: 'autocomplete__header' },
                         React.createElement("div", { className: "autocomplete__icon" },
@@ -83739,7 +83744,7 @@ var Select = /** @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, readonly: this.props.readonly, 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("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));
@@ -127340,7 +127345,7 @@ var SubNav = /** @class */ (function (_super) {
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));
@@ -148290,6 +148295,7 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
+        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -148307,7 +148313,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
+                    }, "data-test-id": (_a = this.props['data-test-id']) !== null && _a !== void 0 ? _a : 'menu', zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));
@@ -153546,7 +153552,7 @@ var SideBarTabs = /** @class */ (function (_super) {
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static' },
+        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static', "data-test-id": this.props['data-test-id'] },
             React.createElement("ul", null, this.props.items.map(function (item, index) {
                 if (item === 'divider') {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
@@ -153554,7 +153560,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
                         React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
-                            }), onClick: function () { return _this.handleClick(item); } },
+                            }), onClick: function () { return _this.handleClick(item); }, "data-test-id": 'widget-icon', "data-test-value": item.id },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),

package/package.json

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

package/react/components/Form/InputWrapper.d.ts

@@ -10,6 +10,10 @@ export interface IInputCommon {
     inlineLabel?: boolean;
     labelHidden?: boolean;
     tabindex?: number;
+    /**
+     * Defaults to `true`
+     * If set to false, it will be as wide as content
+     */
     fullWidth?: boolean;
     boxedStyle?: boolean;
     boxedLable?: boolean;

package/react/components/Form/InputWrapper.js

@@ -57,12 +57,14 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b;
+        var _b, _c;
+        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
                 'sd-input--disabled': this.props.disabled,
-                'sd-input--full-width': this.props.fullWidth,
+                'sd-input--full-width': fullWidth,
+                'sd-input--content-width': !fullWidth,
                 'sd-input--invalid': this.props.invalid,
                 'sd-input--medium': this.props.size === undefined
             },
@@ -78,8 +80,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_b = this.props.value) === null || _b === void 0 ? void 0 :
-                    _b.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
+                    _c.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },

package/react/components/Layouts/Panel.d.ts

@@ -9,6 +9,7 @@ interface IPropsPanel {
     };
     background?: 'transparent' | 'light' | 'grey';
     open?: boolean;
+    ['data-test-id']?: string;
 }
 export default class Panel extends React.PureComponent<IPropsPanel> {
     render(): JSX.Element;

package/react/components/Layouts/Panel.js

@@ -71,7 +71,7 @@ var Panel = /** @class */ (function (_super) {
             style.width = this.props.size.custom;
         }
         var classes2 = (0, classnames_1.default)('side-panel__container', classes2Obj);
-        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null },
+        return (React.createElement("div", { className: classes2, style: style, "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : null, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: classes }, this.props.children)));
     };
     return Panel;

package/react/components/Menu.d.ts

@@ -46,6 +46,7 @@ interface IMenuBranch {
 interface IProps {
     items: Array<IMenuItem>;
     children: (toggle: (event: SyntheticEvent) => void) => JSX.Element;
+    'data-test-id'?: string;
 }
 export declare class Menu extends React.Component<IProps, {}> {
     private menu;

package/react/components/Menu.js

@@ -108,6 +108,7 @@ var Menu = /** @class */ (function (_super) {
     };
     Menu.prototype.render = function () {
         var _this = this;
+        var _a;
         return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
@@ -125,7 +126,7 @@ var Menu = /** @class */ (function (_super) {
                         if (firstMenuItem instanceof HTMLElement) {
                             firstMenuItem.focus();
                         }
-                    }, "data-test-id": "menu", zIndex: this.zIndex }))));
+                    }, "data-test-id": (_a = this.props['data-test-id']) !== null && _a !== void 0 ? _a : 'menu', zIndex: this.zIndex }))));
     };
     return Menu;
 }(React.Component));

package/react/components/Navigation/SideBarTabs.d.ts

@@ -5,6 +5,7 @@ interface IProps {
     items: Array<ISideBarTab | 'divider'>;
     side?: 'none' | 'left' | 'right';
     disabled?: boolean;
+    ['data-test-id']?: string;
 }
 export interface ISideBarTab {
     id: string;

package/react/components/Navigation/SideBarTabs.js

@@ -70,7 +70,7 @@ var SideBarTabs = /** @class */ (function (_super) {
     };
     SideBarTabs.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static' },
+        return (React.createElement("div", { className: 'sd-sidetab-menu sd-sidetab-menu--static', "data-test-id": this.props['data-test-id'] },
             React.createElement("ul", null, this.props.items.map(function (item, index) {
                 if (item === 'divider') {
                     return (React.createElement("li", { key: index, className: 'sd-sidetab-menu__spacer' }));
@@ -78,7 +78,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
                         React.createElement("button", { disabled: _this.props.disabled, role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab && _this.props.disabled !== true,
-                            }), onClick: function () { return _this.handleClick(item); } },
+                            }), onClick: function () { return _this.handleClick(item); }, "data-test-id": 'widget-icon', "data-test-value": item.id },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),

package/react/components/Select.js

@@ -63,7 +63,7 @@ var Select = /** @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, readonly: this.props.readonly, 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("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));

package/react/components/SubNav.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker';
     theme?: 'light' | 'dark';
     className?: string;
+    ['data-test-id']?: string;
 }
 interface IPropsDivider {
     width?: 'small' | 'medium' | 'large' | 'x-large';

package/react/components/SubNav.js

@@ -75,7 +75,7 @@ var SubNav = /** @class */ (function (_super) {
             _a["subnav--".concat(this.props.color)] = this.props.color || this.props.color !== undefined,
             _a), this.props.className);
         var defaultTheme = darkColors.includes(this.props.color || '') ? 'dark-ui' : null;
-        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes }, this.props.children));
+        return (React.createElement("div", { "data-theme": this.props.theme ? "".concat(this.props.theme, "-ui") : defaultTheme, className: classes, "data-test-id": this.props['data-test-id'] }, this.props.children));
     };
     return SubNav;
 }(React.PureComponent));

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

@@ -35,7 +35,9 @@ interface IPropsBase<T> extends IInputWrapper {
     getBackgroundColor?(item: T): string;
     getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T, Wrapper: React.ComponentType<{
+        backgroundColor?: string;
+    }>): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 interface IPropsSync<T> extends IPropsBase<T> {
@@ -89,6 +91,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private ICancelFn;
     handleDebounce(): void;
     onDragEnd(result: DropResult): void;
+    private renderItemContent;
     render(): JSX.Element;
 }
 export {};

package/react/components/TreeSelect/TreeSelect.js

@@ -527,9 +527,17 @@ var TreeSelect = /** @class */ (function (_super) {
             value: (0, common_1.arrayMove)(this.state.value, result.source.index, result.destination.index),
         });
     };
+    TreeSelect.prototype.renderItemContent = function (item, Wrapper) {
+        var _a, _b, _c;
+        if (this.props.valueTemplate) {
+            return this.props.valueTemplate(item, Wrapper);
+        }
+        var content = (_c = (_b = (_a = this.props).optionTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : (React.createElement("span", null, this.props.getLabel(item)));
+        return (React.createElement(Wrapper, null, content));
+    };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        var _a, _b;
+        var _a;
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: this.props.allowMultiple
                     ? {
@@ -562,7 +570,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: this.props.fullWidth, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly
@@ -582,10 +590,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             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, draggable: _this.props.sortable }, children));
                         };
                         var itemId = _this.props.getId(item);
-                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.props.valueTemplate
-                            ? _this.props.valueTemplate(item, Wrapper)
-                            : (React.createElement(Wrapper, null,
-                                React.createElement("span", null, _this.props.getLabel(item))))));
+                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.renderItemContent(item, Wrapper)));
                     })),
                     this.state.value.length > 0
                         ? (this.props.readOnly || this.props.disabled)
@@ -618,16 +623,14 @@ var TreeSelect = /** @class */ (function (_super) {
                                     (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
                                         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)))));
+                        return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
                     }))),
             React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: "autocomplete autocomplete--multi-select"
                         + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
-                        width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
+                        width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
+                        minWidth: '300px',
                     }, ref: this.dropdownRef },
                     React.createElement("div", { className: 'autocomplete__header' },
                         React.createElement("div", { className: "autocomplete__icon" },