superdesk-ui-framework 4.0.47 → 4.0.49

package/react/components/TreeMenu.js

@@ -110,9 +110,9 @@ var TreeMenu = /** @class */ (function (_super) {
         };
         _this.onMouseDown = function (event) {
             var _a, _b;
-            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                && (((_b = _this.treeMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
-                && _this.state.openDropdown) {
+            if (((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true &&
+                ((_b = _this.treeMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true &&
+                _this.state.openDropdown) {
                 _this.setState({
                     openDropdown: false,
                     searchFieldValue: '',
@@ -143,9 +143,9 @@ var TreeMenu = /** @class */ (function (_super) {
         };
         _this.componentDidMount = function () {
             _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", _this.onMouseDown);
-            document.addEventListener("keydown", _this.onKeyDown);
-            document.addEventListener("keydown", _this.onPressEsc);
+            document.addEventListener('mousedown', _this.onMouseDown);
+            document.addEventListener('keydown', _this.onKeyDown);
+            document.addEventListener('keydown', _this.onPressEsc);
         };
         _this.state = {
             options: _this.props.getOptions ? _this.props.getOptions() : [],
@@ -176,9 +176,9 @@ var TreeMenu = /** @class */ (function (_super) {
         return _this;
     }
     TreeMenu.prototype.componentWillUnmount = function () {
-        document.removeEventListener("mousedown", this.onMouseDown);
-        document.removeEventListener("keydown", this.onKeyDown);
-        document.addEventListener("keydown", this.onPressEsc);
+        document.removeEventListener('mousedown', this.onMouseDown);
+        document.removeEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keydown', this.onPressEsc);
     };
     TreeMenu.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _this = this;
@@ -186,9 +186,9 @@ var TreeMenu = /** @class */ (function (_super) {
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
         }
-        if ((prevState.activeTree !== this.state.activeTree)
-            || (prevState.filterArr !== this.state.filterArr)
-            || (prevState.options !== this.state.options)) {
+        if (prevState.activeTree !== this.state.activeTree ||
+            prevState.filterArr !== this.state.filterArr ||
+            prevState.options !== this.state.options) {
             (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
         }
         // Update options when getOptions prop is updated
@@ -220,8 +220,9 @@ var TreeMenu = /** @class */ (function (_super) {
                         var _a;
                         (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
                             placement: state.placement,
-                            modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) { return (modifier.name === 'flip'
-                                ? __assign(__assign({}, modifier), { enabled: false }) : modifier); }),
+                            modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) {
+                                return modifier.name === 'flip' ? __assign(__assign({}, modifier), { enabled: false }) : modifier;
+                            }),
                         });
                     },
                 });
@@ -314,9 +315,7 @@ var TreeMenu = /** @class */ (function (_super) {
         var _this = this;
         var filteredArr = arr.filter(function (item) {
             if (_this.state.searchFieldValue) {
-                if (_this.props.getLabel(item.value)
-                    .toLowerCase()
-                    .includes(_this.state.searchFieldValue.toLowerCase())) {
+                if (_this.props.getLabel(item.value).toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
                     return item.value;
                 }
                 else {
@@ -349,42 +348,37 @@ var TreeMenu = /** @class */ (function (_super) {
                 React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
                         zIndex: this.zIndex,
                     } },
-                    React.createElement("div", { className: 'autocomplete__header' },
+                    React.createElement("div", { className: "autocomplete__header" },
                         React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                 _this.backButton();
                             } },
                             React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
-                        React.createElement("div", { className: 'autocomplete__filter' },
+                        React.createElement("div", { className: "autocomplete__filter" },
                             React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
                                     var _a;
                                     _this.setState({ searchFieldValue: event.target.value });
                                     (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
                                 } }))),
-                    (this.state.activeTree.length > 0 && this.state.buttonValue != null)
-                        && React.createElement("div", { className: 'autocomplete__category-header' },
-                            React.createElement("div", { className: "autocomplete__icon", onClick: function () {
-                                    _this.backButton();
-                                } },
-                                React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
-                            React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
-                                    ? this.props.optionTemplate(this.state.buttonValue.value)
-                                    : this.props.getLabel(this.state.buttonValue.value)))),
-                    this.state.searchFieldValue === '' ?
-                        this.props.getOptions ?
-                            React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select", role: 'tree' }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, onClick: function () {
-                                    onSelect(option);
-                                }, disabledItem: disabledItem(option), getBorderColor: _this.props.getBorderColor, parentCategory: _this.state.buttonValue == null
-                                    ? undefined
-                                    : _this.props.getLabel(_this.state.buttonValue.value), getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onKeyDown: function () { return _this.setState({
-                                    buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
-                                        _this.props.getId(option.value),
-                                    ], false),
-                                }); } })); }))
-                            : null
-                        : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
-                            ? this.state.options
-                            : this.state.filterArr))))));
+                    this.state.activeTree.length > 0 && this.state.buttonValue != null && (React.createElement("div", { className: "autocomplete__category-header" },
+                        React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                _this.backButton();
+                            } },
+                            React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
+                        React.createElement("div", { className: "autocomplete__filter" },
+                            React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
+                                ? this.props.optionTemplate(this.state.buttonValue.value)
+                                : this.props.getLabel(this.state.buttonValue.value))))),
+                    this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select", role: "tree" }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, onClick: function () {
+                            onSelect(option);
+                        }, disabledItem: disabledItem(option), getBorderColor: _this.props.getBorderColor, parentCategory: _this.state.buttonValue == null
+                            ? undefined
+                            : _this.props.getLabel(_this.state.buttonValue.value), getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onKeyDown: function () {
+                            return _this.setState({
+                                buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
+                                    _this.props.getId(option.value),
+                                ], false),
+                            });
+                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
     };
     return TreeMenu;
 }(React.Component));

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

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 import { IInputWrapper } from '../Form/InputWrapper';
-import { DropResult } from "react-beautiful-dnd";
+import { DropResult } from 'react-beautiful-dnd';
 interface IState<T> {
     value: Array<T>;
     options: Array<ITreeNode<T>>;

package/react/components/TreeSelect/TreeSelect.js

@@ -109,9 +109,9 @@ var TreeSelect = /** @class */ (function (_super) {
         };
         _this.onMouseDown = function (event) {
             var _a, _b;
-            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                && (((_b = _this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
-                && _this.state.openDropdown) {
+            if (((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true &&
+                ((_b = _this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true &&
+                _this.state.openDropdown) {
                 _this.setState({
                     openDropdown: false,
                     searchFieldValue: '',
@@ -142,9 +142,9 @@ var TreeSelect = /** @class */ (function (_super) {
         };
         _this.componentDidMount = function () {
             _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", _this.onMouseDown);
-            document.addEventListener("keydown", _this.onKeyDown);
-            document.addEventListener("keydown", _this.onPressEsc);
+            document.addEventListener('mousedown', _this.onMouseDown);
+            document.addEventListener('keydown', _this.onKeyDown);
+            document.addEventListener('keydown', _this.onPressEsc);
             if (_this.props.dropdownInitiallyOpen) {
                 _this.setState({ openDropdown: true });
             }
@@ -188,9 +188,9 @@ var TreeSelect = /** @class */ (function (_super) {
         return _this;
     }
     TreeSelect.prototype.componentWillUnmount = function () {
-        document.removeEventListener("mousedown", this.onMouseDown);
-        document.removeEventListener("keydown", this.onKeyDown);
-        document.addEventListener("keydown", this.onPressEsc);
+        document.removeEventListener('mousedown', this.onMouseDown);
+        document.removeEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keydown', this.onPressEsc);
     };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a, _b;
@@ -212,9 +212,9 @@ var TreeSelect = /** @class */ (function (_super) {
             this.toggleMenu();
         }
         if (this.props.kind === 'synchronous') {
-            if ((prevState.activeTree !== this.state.activeTree)
-                || (prevState.filterArr !== this.state.filterArr)
-                || (prevState.options !== this.state.options)) {
+            if (prevState.activeTree !== this.state.activeTree ||
+                prevState.filterArr !== this.state.filterArr ||
+                prevState.options !== this.state.options) {
                 (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
             }
         }
@@ -380,8 +380,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 else {
                     var filteredItems_2 = [];
                     option.children.forEach(function (item) {
-                        if (!_this.state.value.includes(item.value)
-                            && !item.children) {
+                        if (!_this.state.value.includes(item.value) && !item.children) {
                             filteredItems_2.push(item.value);
                         }
                     });
@@ -433,7 +432,8 @@ var TreeSelect = /** @class */ (function (_super) {
         if (this.props.kind === 'synchronous') {
             var filteredArr = arr.filter(function (item) {
                 if (_this.state.searchFieldValue) {
-                    if (_this.props.getLabel(item.value)
+                    if (_this.props
+                        .getLabel(item.value)
                         .toLowerCase()
                         .includes(_this.state.searchFieldValue.toLowerCase())) {
                         return item.value;
@@ -451,31 +451,27 @@ var TreeSelect = /** @class */ (function (_super) {
             }
             else {
                 return filteredArr.map(function (option, i) {
-                    var selectedItem = _this.state.value.some(function (obj) {
-                        return _this.props.getId(obj) === _this.props.getId(option.value);
-                    });
-                    return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onClick: function () { return _this.setState({
-                            searchFieldValue: '',
-                        }); } }));
+                    var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
+                    return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onClick: function () {
+                            return _this.setState({
+                                searchFieldValue: '',
+                            });
+                        } }));
                 });
             }
         }
         else if (this.props.kind === 'asynchronous') {
             if (this.state.options.length > 0) {
                 return this.state.options.map(function (item, i) {
-                    var selectedItem = _this.state.value.some(function (obj) {
-                        return _this.props.getId(obj) === _this.props.getId(item.value);
-                    });
-                    return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
+                    var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(item.value); });
+                    return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
                             _this.handleValue(event, item);
                         } },
-                        React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
-                            ? _this.props.optionTemplate(item.value)
-                            : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
+                        React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate ? (_this.props.optionTemplate(item.value)) : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
                 });
             }
             else {
-                return React.createElement("li", { className: "suggestion-item--nothing-found" }, (_a = this.props.noResultsFoundMessage) !== null && _a !== void 0 ? _a : 'Nothing found');
+                return (React.createElement("li", { className: "suggestion-item--nothing-found" }, (_a = this.props.noResultsFoundMessage) !== null && _a !== void 0 ? _a : 'Nothing found'));
             }
         }
         else {
@@ -503,14 +499,12 @@ var TreeSelect = /** @class */ (function (_super) {
                 }
             });
         });
-        var selectedButton = this.state.value.some(function (obj) {
-            return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
-        });
+        var selectedButton = this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(buttonValue.value); });
         if (!selectedButton) {
-            return (React.createElement("button", { className: 'autocomplete__button autocomplete__button--multi-select', ref: this.categoryButtonRef, onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category"));
+            return (React.createElement("button", { className: "autocomplete__button autocomplete__button--multi-select", ref: this.categoryButtonRef, onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category"));
         }
         else {
-            return (React.createElement("button", { className: 'autocomplete__button autocomplete__button--multi-select autocomplete__button--disabled' }, "Category selected"));
+            return (React.createElement("button", { className: "autocomplete__button autocomplete__button--multi-select autocomplete__button--disabled" }, "Category selected"));
         }
     };
     TreeSelect.prototype.handleDebounce = function () {
@@ -542,8 +536,8 @@ var TreeSelect = /** @class */ (function (_super) {
         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));
+        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;
@@ -581,71 +575,65 @@ var TreeSelect = /** @class */ (function (_super) {
                 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: this.props.fullWidth, "data-test-id": this.props['data-test-id'], inputWrapper: this.props.inputWrapper },
-            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
-                        || React.createElement("button", { ref: this.openDropdownRef, className: "\n                                        tags-input__add-button\n                                        ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
-                                e.stopPropagation();
-                                if (!_this.props.disabled) {
-                                    _this.setState({
-                                        openDropdown: !_this.state.openDropdown,
-                                        searchFieldValue: '',
-                                    });
-                                }
-                            }, "data-test-id": "open-popover", "aria-haspopup": "tree", "aria-expanded": this.state.openDropdown },
-                            React.createElement("i", { className: "icon-plus-large" })),
-                    React.createElement(ListWrapper, null, this.state.value.map(function (item, i) {
-                        var Wrapper = function (_a) {
-                            var backgroundColor = _a.backgroundColor, children = _a.children;
-                            return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor, draggable: _this.props.sortable }, children));
-                        };
-                        var itemId = _this.props.getId(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)
-                            || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
-                                    e.stopPropagation();
-                                    _this.setState({ value: [] });
-                                } },
-                                React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
-                        : null)
-                : React.createElement("div", { className: "tags-input__tags" },
-                    this.props.readOnly
-                        || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
-                                _this.setState({ openDropdown: !_this.state.openDropdown });
-                            } }),
-                    this.state.value.length < 1
-                        && React.createElement("span", { className: 'tags-input__single-item'
-                                + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
-                            React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
-                    this.state.value.map(function (item, i) {
-                        var Wrapper = function (_a) {
-                            var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
-                            return (React.createElement("span", { className: 'tags-input__single-item'
-                                    + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
-                                _this.props.getBorderColor
-                                    && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
-                                            ? { backgroundColor: borderColor }
-                                            : { backgroundColor: _this.props.getBorderColor(item) } }),
-                                React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, helpers_1.getTextColor)(backgroundColor) } },
-                                    React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 }, "data-test-id": "item" }, children),
-                                    (_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.renderItemContent(item, Wrapper));
-                    }))),
+            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 || (React.createElement("button", { ref: this.openDropdownRef, className: "\n                                        tags-input__add-button\n                                        ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
+                        e.stopPropagation();
+                        if (!_this.props.disabled) {
+                            _this.setState({
+                                openDropdown: !_this.state.openDropdown,
+                                searchFieldValue: '',
+                            });
+                        }
+                    }, "data-test-id": "open-popover", "aria-haspopup": "tree", "aria-expanded": this.state.openDropdown },
+                    React.createElement("i", { className: "icon-plus-large" }))),
+                React.createElement(ListWrapper, null, this.state.value.map(function (item, i) {
+                    var Wrapper = function (_a) {
+                        var backgroundColor = _a.backgroundColor, children = _a.children;
+                        return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor, draggable: _this.props.sortable }, children));
+                    };
+                    var itemId = _this.props.getId(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 || (React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
+                            e.stopPropagation();
+                            _this.setState({ value: [] });
+                        } },
+                        React.createElement(Icon_1.Icon, { name: "remove-sign" })))
+                    : null)) : (React.createElement("div", { className: "tags-input__tags" },
+                this.props.readOnly || (React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
+                        _this.setState({ openDropdown: !_this.state.openDropdown });
+                    } })),
+                this.state.value.length < 1 && (React.createElement("span", { className: 'tags-input__single-item' +
+                        (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
+                    React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder))),
+                this.state.value.map(function (item, i) {
+                    var Wrapper = function (_a) {
+                        var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
+                        return (React.createElement("span", { className: 'tags-input__single-item' +
+                                (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
+                            _this.props.getBorderColor && (React.createElement("div", { className: "item-border item-border-selected", style: borderColor
+                                    ? { backgroundColor: borderColor }
+                                    : { backgroundColor: _this.props.getBorderColor(item) } })),
+                            React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, helpers_1.getTextColor)(backgroundColor) } },
+                                React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 }, "data-test-id": "item" }, children),
+                                _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.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: {
+                React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
+                        (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
                         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__header" },
                         React.createElement("div", { className: "autocomplete__icon" },
                             React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
-                        React.createElement("div", { className: 'autocomplete__filter' },
+                        React.createElement("div", { className: "autocomplete__filter" },
                             React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
                                     var _a, _b;
                                     if (_this.props.kind === 'synchronous') {
@@ -668,39 +656,29 @@ var TreeSelect = /** @class */ (function (_super) {
                                         return;
                                     }
                                 }, "data-test-id": "filter-input" }))),
-                    (this.state.activeTree.length > 0 && this.state.buttonValue != null)
-                        && React.createElement("div", { className: 'autocomplete__category-header' },
-                            React.createElement("div", { className: "autocomplete__icon", onClick: function () {
-                                    _this.backButton();
-                                } },
-                                React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
-                            React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
-                                    ? this.props.optionTemplate(this.state.buttonValue.value)
-                                    : this.props.getLabel(this.state.buttonValue.value)),
-                                this.props.selectBranchWithChildren
-                                    && this.branchButton(this.state.buttonValue))),
-                    this.state.loading
-                        ? React.createElement("ul", { className: "suggestion-list--loader" },
-                            React.createElement(Loader_1.Loader, { overlay: true }))
-                        : this.state.searchFieldValue === ''
-                            ? this.props.getOptions
-                                ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: 'tree', "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
-                                    var selectedItem = _this.state.value.some(function (obj) {
-                                        return _this.props.getId(obj) === _this.props.getId(option.value);
-                                    });
-                                    return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, parentCategory: _this.state.buttonValue == null
-                                            ? undefined
-                                            : _this.props.getLabel(_this.state.buttonValue.value), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, getLabel: _this.props.getLabel, optionTemplate: _this.props.optionTemplate, onKeyDown: function () { return _this.setState({
-                                            buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
-                                                _this.props.getId(option.value),
-                                            ], false),
-                                        }); } }));
-                                }))
-                                : null
-                            : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
-                                ? this.state.options
-                                : this.state.filterArr))))));
+                    this.state.activeTree.length > 0 && this.state.buttonValue != null && (React.createElement("div", { className: "autocomplete__category-header" },
+                        React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                _this.backButton();
+                            } },
+                            React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
+                        React.createElement("div", { className: "autocomplete__filter" },
+                            React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
+                                ? this.props.optionTemplate(this.state.buttonValue.value)
+                                : this.props.getLabel(this.state.buttonValue.value)),
+                            this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
+                    this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
+                        React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
+                        var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
+                        return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, parentCategory: _this.state.buttonValue == null
+                                ? undefined
+                                : _this.props.getLabel(_this.state.buttonValue.value), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, getLabel: _this.props.getLabel, optionTemplate: _this.props.optionTemplate, onKeyDown: function () {
+                                return _this.setState({
+                                    buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
+                                        _this.props.getId(option.value),
+                                    ], false),
+                                });
+                            } }));
+                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
     };
     return TreeSelect;
 }(React.Component));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 import { ITreeNode } from './TreeSelect';
 export declare function getPrefixedItemId(id: string): string;
 interface IProps<T> {

package/react/components/TreeSelect/TreeSelectItem.js

@@ -63,7 +63,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
     }
     TreeSelectItem.prototype.render = function () {
         var _this = this;
-        return (React.createElement("li", { className: 'suggestion-item suggestion-item--multi-select', role: 'none', onClick: function (event) {
+        return (React.createElement("li", { className: "suggestion-item suggestion-item--multi-select", role: "none", onClick: function (event) {
                 var _a, _b;
                 if (!_this.props.disabledItem) {
                     (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -74,19 +74,17 @@ var TreeSelectItem = /** @class */ (function (_super) {
             } },
             React.createElement("button", { 
                 // the className is generated in order to focus the element later
-                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value)))
-                    + (this.props.disabledItem ? ' suggestion-item--disabled' : ''), onKeyDown: function (event) {
+                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value))) +
+                    (this.props.disabledItem ? ' suggestion-item--disabled' : ''), onKeyDown: function (event) {
                     var _a, _b;
                     if (event.key === 'Enter' && _this.props.option.children) {
                         (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
-                }, disabled: this.props.disabledItem, "data-test-id": "option", role: 'treeitem', "aria-selected": this.props.selectedItem === true, "aria-disabled": this.props.disabledItem === true },
-                (this.props.getBorderColor && !this.props.allowMultiple)
-                    && React.createElement("div", { className: "item-border", style: {
-                            backgroundColor: this.props.getBorderColor(this.props.option.value),
-                        } }),
-                React.createElement("span", { className: 'suggestion-item--bgcolor'
-                        + (this.props.selectedItem ? ' suggestion-item--selected' : ''), style: (this.props.getBackgroundColor && this.props.option.value)
+                }, disabled: this.props.disabledItem, "data-test-id": "option", role: "treeitem", "aria-selected": this.props.selectedItem === true, "aria-disabled": this.props.disabledItem === true },
+                this.props.getBorderColor && !this.props.allowMultiple && (React.createElement("div", { className: "item-border", style: {
+                        backgroundColor: this.props.getBorderColor(this.props.option.value),
+                    } })),
+                React.createElement("span", { className: 'suggestion-item--bgcolor' + (this.props.selectedItem ? ' suggestion-item--selected' : ''), style: this.props.getBackgroundColor && this.props.option.value
                         ? {
                             backgroundColor: this.props.getBackgroundColor(this.props.option.value),
                             color: (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.option.value)),
@@ -94,9 +92,8 @@ var TreeSelectItem = /** @class */ (function (_super) {
                         : undefined }, this.props.optionTemplate
                     ? this.props.optionTemplate(this.props.option.value)
                     : this.props.getLabel(this.props.option.value)),
-                this.props.option.children
-                    && React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true", "data-test-id": "children-indicator" },
-                        React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
+                this.props.option.children && (React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true", "data-test-id": "children-indicator" },
+                    React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))))));
     };
     return TreeSelectItem;
 }(React.Component));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 interface IProps<T> {
     item: T;
     readOnly?: boolean;

package/react/components/TreeSelect/TreeSelectPill.js

@@ -70,20 +70,19 @@ var TreeSelectPill = /** @class */ (function (_super) {
         });
         return (React.createElement("li", { className: classes, style: this.props.valueTemplate
                 ? { backgroundColor: this.props.backgroundColor }
-                : this.props.getBackgroundColor
-                    && { backgroundColor: this.props.getBackgroundColor(this.props.item) }, "data-test-id": "item" },
-            this.props.draggable && (React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: '3', dotRows: '4' })),
+                : this.props.getBackgroundColor && {
+                    backgroundColor: this.props.getBackgroundColor(this.props.item),
+                }, "data-test-id": "item" },
+            this.props.draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
             React.createElement("span", { className: "tags-input__helper-box", style: {
                     color: this.props.backgroundColor
                         ? (0, helpers_1.getTextColor)(this.props.backgroundColor)
-                        : this.props.getBackgroundColor
-                            && (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
+                        : this.props.getBackgroundColor &&
+                            (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
                 } },
                 this.props.children,
-                !this.props.readOnly
-                    && React.createElement("button", { className: "tags-input__remove-button", "data-test-id": "remove", onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
-                            && _this.props.onRemove(); } },
-                        React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                !this.props.readOnly && (React.createElement("button", { className: "tags-input__remove-button", "data-test-id": "remove", onClick: function () { return !_this.props.readOnly && !_this.props.disabled && _this.props.onRemove(); } },
+                    React.createElement(Icon_1.Icon, { name: "close-small" }))))));
     };
     return TreeSelectPill;
 }(React.Component));