superdesk-ui-framework 4.0.31 → 4.0.32

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

@@ -825,7 +825,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 +859,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 +959,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/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' },
@@ -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" },
@@ -188153,7 +188158,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.32","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

@@ -40346,6 +40346,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' },
@@ -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" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.31",
+  "version": "4.0.32",
   "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/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" },