superdesk-ui-framework 3.0.43 → 3.0.45

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_7__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_8__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 569);
+/******/ 	return __webpack_require__(__webpack_require__.s = 571);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -17296,7 +17296,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(52)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(53)(module)))
 
 /***/ }),
 
@@ -17328,7 +17328,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 42:
+/***/ 43:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28217,7 +28217,7 @@ return jQuery;
 
 /***/ }),
 
-/***/ 52:
+/***/ 53:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 569:
+/***/ 571:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28254,21 +28254,21 @@ module.exports = function(module) {
 
 __webpack_require__(21);
 
-__webpack_require__(42);
-
-__webpack_require__(570);
+__webpack_require__(43);
 
 __webpack_require__(572);
 
 __webpack_require__(574);
 
+__webpack_require__(576);
+
 __webpack_require__(0);
 
-__webpack_require__(7);
+__webpack_require__(8);
 
 /***/ }),
 
-/***/ 570:
+/***/ 572:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42), __webpack_require__(571) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(43), __webpack_require__(573) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 571:
+/***/ 573:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(42) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(43) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 572:
+/***/ 574:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(573);
+__webpack_require__(575);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 573:
+/***/ 575:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65672,20 +65672,20 @@ $provide.value("$locale", {
 })(window);
 
 !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(42)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(43)))
 
 /***/ }),
 
-/***/ 574:
+/***/ 576:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(575);
+__webpack_require__(577);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 575:
+/***/ 577:
 /***/ (function(module, exports) {
 
 /**
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 7:
+/***/ 8:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
 
 /***/ })
 

package/examples/pages/react/TreeSelect.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as Markup from '../../js/react';
 import { PropsList, Prop } from '../../../app-typescript';
 import { MultiSelect } from '../../../app-typescript/components/MultiSelect';
-import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect';
+import { ITreeNode, TreeSelect } from '../../../app-typescript/components/TreeSelect/TreeSelect';
 
 interface IState {
     value: any;

package/package.json

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

package/react/components/Menu.js

@@ -42,7 +42,7 @@ exports.Menu = void 0;
 var React = __importStar(require("react"));
 var tieredmenu_1 = require("@superdesk/primereact/tieredmenu");
 var helpers_1 = require("../helpers");
-var superdeskTopBarZIndex = 1030;
+var superdeskTopBarZIndex = 1050;
 function isSeparator(item) {
     return item['separator'] === true;
 }

package/react/components/{TreeSelect.d.ts → TreeSelect/TreeSelect.d.ts}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IInputWrapper } from './Form/InputWrapper';
+import { IInputWrapper } from '../Form/InputWrapper';
 interface IState<T> {
     value: Array<T>;
     options: Array<ITreeNode<T>>;
@@ -54,6 +54,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private inputRef;
     private categoryButtonRef;
     private openDropdownRef;
+    private treeSelectRef;
     private htmlId;
     private popperInstance;
     constructor(props: IProps<T>);
@@ -73,7 +74,6 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     handleBranchValue(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, item: ITreeNode<T>): void;
     handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): void;
     backButton(): void;
-    backButtonValue: () => void;
     recursion(arr: Array<ITreeNode<T>>): void;
     filteredItem(arr: Array<ITreeNode<T>>): JSX.Element | JSX.Element[] | undefined;
     branchButton(buttonValue: ITreeNode<T>): JSX.Element;

package/react/components/{TreeSelect.js → TreeSelect/TreeSelect.js}

@@ -52,15 +52,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeSelect = void 0;
 var React = __importStar(require("react"));
-var Icon_1 = require("./Icon");
-var Loader_1 = require("./Loader");
+var Icon_1 = require("../Icon");
+var Loader_1 = require("../Loader");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var debounce_1 = __importDefault(require("lodash/debounce"));
-var Form_1 = require("./Form");
+var Form_1 = require("../Form");
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
-var Label_1 = require("./Label");
-var SelectPreview_1 = require("./SelectPreview");
+var Label_1 = require("../Label");
+var SelectPreview_1 = require("../SelectPreview");
+var TreeSelectPill_1 = require("./TreeSelectPill");
+var TreeSelectItem_1 = require("./TreeSelectItem");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -79,21 +81,20 @@ var TreeSelect = /** @class */ (function (_super) {
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
         _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.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+            var _a;
+            if ((((_a = _this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && _this.state.openDropdown) {
                 _this.setState({ openDropdown: false });
             }
         };
         _this.onKeyDown = function (e) {
             if (_this.state.openDropdown && _this.ref.current) {
                 keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                if (e.key === 'Backspace') {
+                if (e.key === 'Backspace' && _this.state.activeTree.length > 0) {
                     _this.backButton();
-                    _this.backButtonValue();
-                    var buttonTarget = _this.state.buttonTarget;
-                    var className = "".concat(buttonTarget.pop(), "-focus");
-                    if (className != null) {
+                    var lastElement = _this.state.buttonTarget.pop();
+                    if (lastElement != null) {
+                        var className = (0, TreeSelectItem_1.getPrefixedItemId)(lastElement);
                         var element = document.getElementsByClassName(className)[0];
                         element.focus();
                     }
@@ -105,34 +106,25 @@ var TreeSelect = /** @class */ (function (_super) {
             document.addEventListener("mousedown", _this.onMouseDown);
             document.addEventListener("keydown", _this.onKeyDown);
         };
-        _this.backButtonValue = function () {
-            var item = _this.state.buttonTree.pop();
-            if (item != null) {
-                _this.setState({
-                    buttonValue: item,
-                });
-            }
-        };
         _this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
         _this.state = {
             value: _this.props.value ? _this.props.value : [],
             options: _this.props.getOptions ? _this.props.getOptions() : [],
             firstBranchOptions: _this.props.getOptions ? _this.props.getOptions() : [],
+            searchFieldValue: '',
             activeTree: [],
             filterArr: [],
-            searchFieldValue: '',
             buttonTree: [],
+            buttonTarget: [],
             buttonValue: null,
             buttonMouseEvent: false,
             openDropdown: false,
             loading: false,
-            buttonTarget: [],
         };
         _this.removeClick = _this.removeClick.bind(_this);
         _this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
         _this.backButton = _this.backButton.bind(_this);
         _this.handleButton = _this.handleButton.bind(_this);
-        _this.backButtonValue = _this.backButtonValue.bind(_this);
         _this.handleTree = _this.handleTree.bind(_this);
         _this.filteredItem = _this.filteredItem.bind(_this);
         _this.branchButton = _this.branchButton.bind(_this);
@@ -145,6 +137,7 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.inputRef = React.createRef();
         _this.categoryButtonRef = React.createRef();
         _this.openDropdownRef = React.createRef();
+        _this.treeSelectRef = React.createRef();
         _this.popperInstance = null;
         return _this;
     }
@@ -285,42 +278,38 @@ var TreeSelect = /** @class */ (function (_super) {
     TreeSelect.prototype.handleBranchValue = function (event, item) {
         var _this = this;
         if (this.props.allowMultiple) {
-            if (this.props.selectBranchWithChildren) {
-                var checkItem = this.state.value.find(function (valueItem) {
-                    return _this.props.getId(valueItem) === _this.props.getId(item.value);
+            var checkItem = this.state.value.find(function (valueItem) {
+                return _this.props.getId(valueItem) === _this.props.getId(item.value);
+            });
+            if (!checkItem) {
+                this.setState({ value: __spreadArray(__spreadArray([], this.state.value, true), [item.value], false) });
+            }
+            if (!event.ctrlKey) {
+                this.setState({
+                    options: this.state.firstBranchOptions,
+                    activeTree: [],
+                    buttonTarget: [],
+                    openDropdown: false,
                 });
-                if (!checkItem) {
-                    this.setState({ value: __spreadArray(__spreadArray([], this.state.value, true), [item.value], false) });
-                }
-                if (!event.ctrlKey) {
-                    this.setState({
-                        options: this.state.firstBranchOptions,
-                        activeTree: [],
-                        buttonTarget: [],
-                        openDropdown: false,
-                    });
-                }
-                this.setState({ buttonMouseEvent: false });
             }
+            this.setState({ buttonMouseEvent: false });
         }
         else {
-            if (this.props.selectBranchWithChildren) {
-                var checkItem = this.state.value.find(function (valueItem) {
-                    return _this.props.getId(valueItem) === _this.props.getId(item.value);
+            var checkItem = this.state.value.find(function (valueItem) {
+                return _this.props.getId(valueItem) === _this.props.getId(item.value);
+            });
+            if (!checkItem) {
+                this.setState({ value: [item.value] });
+            }
+            if (!event.ctrlKey) {
+                this.setState({
+                    options: this.state.firstBranchOptions,
+                    activeTree: [],
+                    buttonTarget: [],
+                    openDropdown: false,
                 });
-                if (!checkItem) {
-                    this.setState({ value: [item.value] });
-                }
-                if (!event.ctrlKey) {
-                    this.setState({
-                        options: this.state.firstBranchOptions,
-                        activeTree: [],
-                        buttonTarget: [],
-                        openDropdown: false,
-                    });
-                }
-                this.setState({ buttonMouseEvent: false });
             }
+            this.setState({ buttonMouseEvent: false });
         }
     };
     TreeSelect.prototype.handleTree = function (event, option) {
@@ -380,6 +369,12 @@ var TreeSelect = /** @class */ (function (_super) {
                 options: items,
             });
         }
+        var item = this.state.buttonTree.pop();
+        if (item != null) {
+            this.setState({
+                buttonValue: item,
+            });
+        }
     };
     TreeSelect.prototype.recursion = function (arr) {
         var _this = this;
@@ -396,7 +391,8 @@ var TreeSelect = /** @class */ (function (_super) {
             var filteredArr = arr.filter(function (item) {
                 if (_this.state.searchFieldValue) {
                     if (_this.props.getLabel(item.value)
-                        .toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
+                        .toLowerCase()
+                        .includes(_this.state.searchFieldValue.toLowerCase())) {
                         return item.value;
                     }
                     else {
@@ -408,38 +404,16 @@ var TreeSelect = /** @class */ (function (_super) {
                 }
             });
             if (filteredArr.length === 0) {
-                return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing fonud");
+                return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing found");
             }
             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("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
-                            _this.setState({
-                                searchFieldValue: '',
-                            }),
-                                event.preventDefault();
-                            event.stopPropagation();
-                            _this.handleTree(event, option);
-                        } },
-                        React.createElement("button", { className: "suggestion-item--btn" },
-                            _this.props.getBorderColor
-                                && React.createElement("div", { className: "item-border", style: {
-                                        backgroundColor: _this.props.getBorderColor(option.value),
-                                    } }),
-                            React.createElement("span", { className: 'suggestion-item--bgcolor'
-                                    + (selectedItem ? ' suggestion-item--disabled' : ''), style: _this.props.getBackgroundColor
-                                    ? {
-                                        backgroundColor: _this.props.getBackgroundColor(option.value),
-                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
-                                    }
-                                    : undefined }, _this.props.optionTemplate
-                                ? _this.props.optionTemplate(option.value)
-                                : _this.props.getLabel(option.value)),
-                            option.children
-                                && React.createElement("span", { className: "suggestion-item__icon" },
-                                    React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
+                    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: '',
+                        }); } }));
                 });
             }
         }
@@ -448,13 +422,12 @@ var TreeSelect = /** @class */ (function (_super) {
                 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) {
+                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" }, _this.props.optionTemplate
                         ? _this.props.optionTemplate(item.value)
-                        : React.createElement("span", { className: selectedItem
-                                ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(item.value)))));
+                        : (React.createElement("span", { className: selectedItem ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(item.value))))));
             });
         }
         else {
@@ -486,11 +459,10 @@ var TreeSelect = /** @class */ (function (_super) {
             return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
         });
         if (!selectedButton) {
-            return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' 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'
-                    + (this.props.selectBranchWithChildren ? ' 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 () {
@@ -523,11 +495,12 @@ var TreeSelect = /** @class */ (function (_super) {
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select') },
+            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
                         this.props.readOnly
-                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function () {
+                            || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
+                                    e.stopPropagation();
                                     if (!_this.props.disabled) {
                                         _this.setState({ openDropdown: !_this.state.openDropdown });
                                     }
@@ -536,35 +509,26 @@ var TreeSelect = /** @class */ (function (_super) {
                         React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
                             var Wrapper = function (_a) {
                                 var backgroundColor = _a.backgroundColor, children = _a.children;
-                                return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
-                                        && _this.removeClick(i); }, style: _this.props.valueTemplate
-                                        ? { backgroundColor: backgroundColor }
-                                        : _this.props.getBackgroundColor
-                                            && { backgroundColor: _this.props.getBackgroundColor(item) } },
-                                    React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor
-                                                ? (0, Label_1.getTextColor)(backgroundColor)
-                                                : _this.props.getBackgroundColor
-                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)),
-                                        } },
-                                        children,
-                                        !_this.props.readOnly
-                                            && React.createElement("span", { className: "tags-input__remove-button" },
-                                                React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                                return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor }, children));
                             };
                             return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
                                 ? _this.props.valueTemplate(item, Wrapper)
-                                : React.createElement(Wrapper, null,
-                                    React.createElement("span", null, _this.props.getLabel(item)))));
+                                : (React.createElement(Wrapper, null,
+                                    React.createElement("span", null, _this.props.getLabel(item))))));
                         })),
                         this.state.value.length > 0
                             ? (this.props.readOnly || this.props.disabled)
-                                || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
+                                || 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 () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
+                            || 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' : '') },
@@ -578,7 +542,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                         && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
                                                 ? { backgroundColor: borderColor }
                                                 : { backgroundColor: _this.props.getBorderColor(item) } }),
-                                    React.createElement("span", { style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) }, className: "tags-input__helper-box" },
+                                    React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
                                         React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
                                         _this.props.readOnly
                                             || React.createElement("span", { className: "tags-input__remove-button" },
@@ -586,15 +550,14 @@ var TreeSelect = /** @class */ (function (_super) {
                             };
                             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))));
+                                : (React.createElement(Wrapper, null,
+                                    React.createElement("span", null, _this.props.getLabel(item)))));
                         })),
                 this.state.openDropdown
                     && React.createElement("div", { className: "autocomplete autocomplete--multi-select"
                             + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: { zIndex: this.props.zIndex }, ref: this.dropdownRef },
                         React.createElement("div", { className: 'autocomplete__header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
-                                    _this.backButtonValue();
                                     _this.backButton();
                                 } },
                                 React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
@@ -620,7 +583,6 @@ var TreeSelect = /** @class */ (function (_super) {
                         (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.backButtonValue();
                                         _this.backButton();
                                     } },
                                     React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
@@ -639,40 +601,16 @@ var TreeSelect = /** @class */ (function (_super) {
                                         var selectedItem = _this.state.value.some(function (obj) {
                                             return _this.props.getId(obj) === _this.props.getId(option.value);
                                         });
-                                        return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
-                                                event.preventDefault();
-                                                event.stopPropagation();
-                                                _this.handleTree(event, option);
-                                            } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value), "-focus"), onKeyDown: function (event) {
-                                                    if (event.key === 'Enter' && option.children) {
-                                                        _this.setState({
-                                                            buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
-                                                                _this.props.getId(option.value),
-                                                            ], false),
-                                                        });
-                                                    }
-                                                } },
-                                                (_this.props.getBorderColor && !_this.props.allowMultiple)
-                                                    && React.createElement("div", { className: "item-border", style: {
-                                                            backgroundColor: _this.props.getBorderColor(option.value),
-                                                        } }),
-                                                React.createElement("span", { className: 'suggestion-item--bgcolor'
-                                                        + (selectedItem ? ' suggestion-item--disabled' : ''), style: (_this.props.getBackgroundColor && option.value)
-                                                        ? {
-                                                            backgroundColor: _this.props.getBackgroundColor(option.value),
-                                                            color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
-                                                        }
-                                                        : undefined }, _this.props.optionTemplate
-                                                    ? _this.props.optionTemplate(option.value)
-                                                    : _this.props.getLabel(option.value)),
-                                                option.children
-                                                    && React.createElement("span", { className: "suggestion-item__icon" },
-                                                        React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
+                                        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, 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.options
+                                    : this.state.filterArr))))));
     };
     return TreeSelect;
 }(React.Component));

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { ITreeNode } from './TreeSelect';
+export declare function getPrefixedItemId(id: string): string;
+interface IProps<T> {
+    option: ITreeNode<T>;
+    selectedItem: boolean;
+    allowMultiple?: boolean;
+    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): any;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    onClick?: () => void;
+    onKeyDown?: () => void;
+}
+export declare class TreeSelectItem<T> extends React.Component<IProps<T>> {
+    render(): JSX.Element;
+}
+export {};