superdesk-ui-framework 3.0.5 → 3.0.7

package/dist/examples.bundle.js

@@ -63497,31 +63497,52 @@ var TreeSelect = /** @class */ (function (_super) {
     function TreeSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
+        _this.inputFocus = function () {
+            var _a;
+            (_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        _this.listNavigation = function () {
+            var element = document.querySelector('.suggestion-item--btn');
+            element.focus();
+        };
+        _this.buttonFocus = function () {
+            var _a;
+            (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         _this.componentDidMount = function () {
             _this.recursion(_this.state.options);
             document.addEventListener("mousedown", function (event) {
+                if (!(event.target instanceof HTMLInputElement)) {
+                    return;
+                }
                 if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
                     && (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
                     _this.setState({ openDropdown: false });
                 }
             });
+            document.addEventListener("keydown", 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') {
+                        _this.backButton();
+                        var buttonTarget = _this.state.buttonTarget;
+                        var className = buttonTarget.pop();
+                        if (className != null) {
+                            var element = document.getElementsByClassName(className)[0];
+                            element.focus();
+                        }
+                    }
+                }
+            });
         };
-        _this.backButton = function () {
-            if (_this.state.activeTree.length > 0) {
+        _this.backButtonValue = function () {
+            var item = _this.state.buttonTree.pop();
+            if (item != null) {
                 _this.setState({
-                    options: _this.state.activeTree.pop(),
+                    buttonValue: item,
                 });
-                return;
-            }
-            else {
-                return false;
             }
         };
-        _this.backButtonValue = function () {
-            _this.setState({
-                buttonValue: _this.state.buttonTree.pop(),
-            });
-        };
         _this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
         _this.state = {
             value: _this.props.value ? _this.props.value : [],
@@ -63531,11 +63552,11 @@ var TreeSelect = /** @class */ (function (_super) {
             filterArr: [],
             searchFieldValue: '',
             buttonTree: [],
-            buttonValue: [],
+            buttonValue: null,
             buttonMouseEvent: false,
             openDropdown: false,
             loading: false,
-            // provera: false
+            buttonTarget: [],
         };
         _this.removeClick = _this.removeClick.bind(_this);
         _this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
@@ -63544,14 +63565,19 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.backButtonValue = _this.backButtonValue.bind(_this);
         _this.handleTree = _this.handleTree.bind(_this);
         _this.filteredItem = _this.filteredItem.bind(_this);
-        _this.banchButton = _this.banchButton.bind(_this);
+        _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
         _this.dropdownRef = React.createRef();
+        _this.ref = React.createRef();
+        _this.inputRef = React.createRef();
+        _this.categoryButtonRef = React.createRef();
         _this.openDropdownRef = React.createRef();
+        _this.popperInstance = null;
         return _this;
     }
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
             this.props.onChange(this.state.value);
         }
@@ -63565,11 +63591,13 @@ var TreeSelect = /** @class */ (function (_super) {
             if ((prevState.activeTree !== this.state.activeTree)
                 || (prevState.filterArr !== this.state.filterArr)
                 || (prevState.options !== this.state.options)) {
-                this.popperInstance.update();
+                (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
             }
         }
     };
     TreeSelect.prototype.toggleMenu = function () {
+        var _this = this;
+        var _a, _b;
         if (this.state.openDropdown) {
             if (this.openDropdownRef.current && this.dropdownRef.current) {
                 this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
@@ -63584,6 +63612,30 @@ var TreeSelect = /** @class */ (function (_super) {
                     ],
                 });
             }
+            (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (_this.categoryButtonRef.current) {
+                        _this.buttonFocus();
+                    }
+                    else {
+                        setTimeout(function () {
+                            _this.listNavigation();
+                        });
+                    }
+                }
+            });
+            if (this.inputRef.current) {
+                this.inputFocus();
+            }
+            else {
+                var element = document.querySelector('.suggestion-item--btn');
+                element.focus();
+            }
+        }
+        else {
+            (_b = this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.focus();
         }
     };
     TreeSelect.prototype.removeClick = function (i) {
@@ -63603,8 +63655,12 @@ var TreeSelect = /** @class */ (function (_super) {
         }
     };
     TreeSelect.prototype.handleButton = function (item) {
+        var buttonTreeNext = this.state.buttonTree;
+        if (this.state.buttonValue != null) {
+            buttonTreeNext = buttonTreeNext.concat(this.state.buttonValue);
+        }
         this.setState({
-            buttonTree: __spreadArray(__spreadArray([], this.state.buttonTree, true), [this.state.buttonValue], false),
+            buttonTree: buttonTreeNext,
             buttonValue: item,
         });
     };
@@ -63619,10 +63675,15 @@ var TreeSelect = /** @class */ (function (_super) {
             }
             if (!event.ctrlKey) {
                 if (this.props.getOptions) {
-                    this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                    this.setState({
+                        options: this.state.firstBranchOptions,
+                        activeTree: [],
+                        buttonTarget: [],
+                        openDropdown: false,
+                    });
                 }
                 else {
-                    this.setState({ activeTree: [], openDropdown: false });
+                    this.setState({ activeTree: [], buttonTarget: [], openDropdown: false });
                 }
             }
             this.setState({ buttonMouseEvent: false });
@@ -63635,7 +63696,12 @@ var TreeSelect = /** @class */ (function (_super) {
                 this.setState({ value: [item.value] });
             }
             if (!event.ctrlKey) {
-                this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                this.setState({
+                    options: this.state.firstBranchOptions,
+                    activeTree: [],
+                    buttonTarget: [],
+                    openDropdown: false,
+                });
             }
             this.setState({ buttonMouseEvent: false });
         }
@@ -63651,7 +63717,12 @@ var TreeSelect = /** @class */ (function (_super) {
                     this.setState({ value: __spreadArray(__spreadArray([], this.state.value, true), [item.value], false) });
                 }
                 if (!event.ctrlKey) {
-                    this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                    this.setState({
+                        options: this.state.firstBranchOptions,
+                        activeTree: [],
+                        buttonTarget: [],
+                        openDropdown: false,
+                    });
                 }
                 this.setState({ buttonMouseEvent: false });
             }
@@ -63665,7 +63736,12 @@ var TreeSelect = /** @class */ (function (_super) {
                     this.setState({ value: [item.value] });
                 }
                 if (!event.ctrlKey) {
-                    this.setState({ options: this.state.firstBranchOptions, activeTree: [], openDropdown: false });
+                    this.setState({
+                        options: this.state.firstBranchOptions,
+                        activeTree: [],
+                        buttonTarget: [],
+                        openDropdown: false,
+                    });
                 }
                 this.setState({ buttonMouseEvent: false });
             }
@@ -63689,6 +63765,7 @@ var TreeSelect = /** @class */ (function (_super) {
                         options: this.state.firstBranchOptions,
                         openDropdown: false,
                         activeTree: [],
+                        buttonTarget: [],
                     });
                 }
                 else {
@@ -63705,6 +63782,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             options: this.state.firstBranchOptions,
                             openDropdown: false,
                             activeTree: [],
+                            buttonTarget: [],
                         });
                     }
                 }
@@ -63716,6 +63794,16 @@ var TreeSelect = /** @class */ (function (_super) {
                 this.setState({ openDropdown: false });
             }
         }
+        var element = document.querySelector('.suggestion-item--btn');
+        element.focus();
+    };
+    TreeSelect.prototype.backButton = function () {
+        var items = this.state.activeTree.pop();
+        if (items != null) {
+            this.setState({
+                options: items,
+            });
+        }
     };
     TreeSelect.prototype.recursion = function (arr) {
         var _this = this;
@@ -63751,7 +63839,7 @@ 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) {
+                    return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
                             _this.setState({
                                 searchFieldValue: '',
                             }),
@@ -63759,17 +63847,19 @@ var TreeSelect = /** @class */ (function (_super) {
                             event.stopPropagation();
                             _this.handleTree(event, option);
                         } },
-                        _this.props.getBorderColor
-                            && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
-                        React.createElement("span", { style: _this.props.getBackgroundColor
-                                ? { backgroundColor: _this.props.getBackgroundColor(option.value),
-                                    color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
-                                : undefined, className: 'suggestion-item--bgcolor'
-                                + (selectedItem ? ' suggestion-item--disabled' : '') }, _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" })));
+                        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", { style: _this.props.getBackgroundColor
+                                    ? { backgroundColor: _this.props.getBackgroundColor(option.value),
+                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
+                                    : undefined, className: 'suggestion-item--bgcolor'
+                                    + (selectedItem ? ' suggestion-item--disabled' : '') }, _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" })))));
                 });
             }
         }
@@ -63780,26 +63870,47 @@ var TreeSelect = /** @class */ (function (_super) {
                 });
                 return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
                         _this.handleValue(event, item);
-                    } }, _this.props.optionTemplate
-                    ? _this.props.optionTemplate(item.value)
-                    : React.createElement("span", { className: selectedItem
-                            ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(item.value))));
+                    } },
+                    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)))));
             });
         }
         else {
             return;
         }
     };
-    TreeSelect.prototype.banchButton = function () {
+    TreeSelect.prototype.branchButton = function (buttonValue) {
         var _this = this;
+        setTimeout(function () {
+            var _a;
+            (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
+                var _a;
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setTimeout(function () {
+                        var element = document.querySelector('.suggestion-item--btn');
+                        element.focus();
+                    });
+                }
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    (_a = _this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+            });
+        });
         var selectedButton = this.state.value.some(function (obj) {
-            return _this.props.getId(obj) === _this.props.getId(_this.state.buttonValue.value);
+            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' : ''), onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, value: this.state.buttonValue, onClick: function (event) { return _this.handleBranchValue(event, _this.state.buttonValue); } }, "Choose entire category");
+            return React.createElement("button", { ref: this.categoryButtonRef, className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : ''), 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', value: this.state.buttonValue }, "Category selected");
+            return React.createElement("button", { className: 'autocomplete__button'
+                    + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled' }, "Category selected");
         }
     };
     TreeSelect.prototype.handleDebounce = function () {
@@ -63809,15 +63920,11 @@ var TreeSelect = /** @class */ (function (_super) {
             if (this.state.searchFieldValue) {
                 this.setState({
                     loading: true,
-                    // provera: false
                 });
                 this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, function (items) {
-                    // if (items.length === 0) {
-                    //     this.setState({provera: true, loading: false})
-                    // } else {
+                    var _a;
                     _this.setState({ options: items, loading: false });
-                    _this.popperInstance.update();
-                    // }
+                    (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
                 });
             }
         }
@@ -63855,13 +63962,15 @@ var TreeSelect = /** @class */ (function (_super) {
                         this.state.value.length > 0
                             ? this.props.readOnly
                                 || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
-                                    React.createElement(Icon_1.Icon, { name: 'remove-sign' })) : null)
+                                    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 }); } }),
-                        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.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;
@@ -63891,27 +64000,25 @@ var TreeSelect = /** @class */ (function (_super) {
                                 } },
                                 React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
                             React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: function (input) { return input && input.focus(); }, value: this.state.searchFieldValue, onChange: function (event) {
+                                React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
+                                        var _a, _b;
                                         if (_this.props.kind === 'synchronous') {
                                             _this.setState({ searchFieldValue: event.target.value });
-                                            _this.popperInstance.update();
+                                            (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
                                         }
                                         else if (_this.props.kind === 'asynchronous') {
                                             if (_this.ICancelFn) {
                                                 _this.ICancelFn();
                                             }
                                             _this.setState({ searchFieldValue: event.target.value, options: [] });
-                                            _this.popperInstance.update();
+                                            (_b = _this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
                                             _this.debounceFn();
                                         }
                                         else {
                                             return;
                                         }
-                                        // if(!this.state.searchFieldValue) {
-                                        //     this.setState({provera: false});
-                                        // }
                                     } }))),
-                        this.state.activeTree.length > 0
+                        (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();
@@ -63919,16 +64026,17 @@ var TreeSelect = /** @class */ (function (_super) {
                                     } },
                                     React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
                                 React.createElement("div", { className: 'autocomplete__filter' },
-                                    React.createElement("button", { className: 'autocomplete__category-title', value: this.state.buttonValue }, this.props.optionTemplate
+                                    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.banchButton())),
+                                    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" }, this.state.options
+                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.state.options
                                         .map(function (option, i) {
                                         var selectedItem = _this.state.value.some(function (obj) {
                                             return _this.props.getId(obj) === _this.props.getLabel(option.value);
@@ -63938,23 +64046,90 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            (_this.props.getBorderColor && !_this.props.allowMultiple) && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
-                                            React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
-                                                    ? { backgroundColor: _this.props.getBackgroundColor(option.value),
-                                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
-                                                    : undefined, className: 'suggestion-item--bgcolor'
-                                                    + (selectedItem ? ' suggestion-item--disabled' : '') }, _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" }))));
-                                    })) : null
-                                : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
+                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), 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", { style: (_this.props.getBackgroundColor && option.value)
+                                                        ? {
+                                                            backgroundColor: _this.props.getBackgroundColor(option.value),
+                                                            color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)),
+                                                        }
+                                                        : undefined, className: 'suggestion-item--bgcolor'
+                                                        + (selectedItem ? ' suggestion-item--disabled' : '') }, _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" })))));
+                                    }))
+                                    : 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));
 exports.TreeSelect = TreeSelect;
+var getButtonList = function (menuRef) {
+    var _a;
+    var list = Array.from((_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.querySelectorAll(':scope > li')) !== null && _a !== void 0 ? _a : []);
+    var buttons = [];
+    if (list != null) {
+        __spreadArray([], list, true).filter(function (item) {
+            if (item.querySelectorAll('.suggestion-item--btn').length > 0) {
+                buttons.push(item.querySelector('.suggestion-item--btn'));
+            }
+        });
+    }
+    return buttons;
+};
+var keyboardNavigation = function (e, menuRef, ref) {
+    var buttons = getButtonList(menuRef);
+    var currentElement = document.activeElement;
+    var currentIndex = Array.prototype.indexOf.call(buttons, currentElement);
+    if (document.activeElement != null && buttons.includes(document.activeElement)) {
+        if ((e === null || e === void 0 ? void 0 : e.key) === 'ArrowDown') {
+            nextElement(buttons, currentIndex, e);
+        }
+        else if ((e === null || e === void 0 ? void 0 : e.key) === 'ArrowUp') {
+            prevElement(buttons, currentIndex, e, ref);
+        }
+    }
+};
+var nextElement = function (buttons, currentIndex, e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (buttons[currentIndex + 1]) {
+        buttons[currentIndex + 1].focus();
+    }
+    else {
+        buttons[0].focus();
+    }
+};
+var prevElement = function (buttons, currentIndex, e, ref) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (buttons[currentIndex - 1]) {
+        buttons[currentIndex - 1].focus();
+    }
+    else if (currentIndex === 0) {
+        if (ref) {
+            ref();
+        }
+    }
+    else {
+        buttons[buttons.length - 1].focus();
+    }
+};
 
 
 /***/ }),
@@ -103124,13 +103299,12 @@ var SideBarTabs = /** @class */ (function (_super) {
             this.props.onActiveTabChange(activeItem.id);
         }
     };
-    SideBarTabs.prototype.handleClick = function (item, event) {
+    SideBarTabs.prototype.handleClick = function (item) {
         if (this.props.activeTab === item.id) {
             this.props.onActiveTabChange(null);
         }
         else {
             this.props.onActiveTabChange(item.id);
-            item.onClick(event);
         }
     };
     SideBarTabs.prototype.render = function () {
@@ -103142,7 +103316,7 @@ var SideBarTabs = /** @class */ (function (_super) {
                 }
                 else {
                     return (React.createElement("li", { key: index, "data-sd-tooltip": item.tooltip, "data-flow": 'left' },
-                        React.createElement("a", { role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab }), onClick: function (event) { return _this.handleClick(item, event); } },
+                        React.createElement("a", { role: 'button', "aria-label": item.tooltip, className: (0, classnames_1.default)('sd-sidetab-menu__btn', { 'sd-sidetab-menu__btn--active': item.id === _this.props.activeTab }), onClick: function () { return _this.handleClick(item); } },
                             item.badgeValue != null && (React.createElement(Badge_1.Badge, { text: item['badgeValue'], type: 'primary' })),
                             React.createElement("span", { className: 'sd-sidetab-menu__main-icon ' },
                                 React.createElement(Icon_1.Icon, { size: item['size'], name: item['icon'] })),
@@ -115116,7 +115290,7 @@ var MultiSelect = /** @class */ (function (_super) {
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);
-                }, display: "chip", zIndex: this.props.zIndex, filter: this.props.filter, filterBy: this.props.optionLabel, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: this.props.optionLabel, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
+                }, display: "chip", zIndex: this.props.zIndex, filter: this.props.filter, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: function (option) { return _this.props.optionLabel(option); }, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
     };
     return MultiSelect;
 }(React.Component));
@@ -115679,21 +115853,25 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "filterOptions",
     value: function filterOptions(options) {
+      var _this7 = this;
+
       if (options) {
         var filterValue = this.state.filter.trim().toLocaleLowerCase(this.props.filterLocale);
-        var searchFields = this.props.filterBy ? this.props.filterBy.split(',') : [this.props.optionLabel || 'label'];
-        return _FilterUtils.default.filter(options, searchFields, filterValue, this.props.filterMatchMode, this.props.filterLocale);
+        var filterOptions = options.filter(function (option) {
+          return _this7.props.optionLabel(option).trim().toLowerCase().includes(filterValue);
+        });
+        return filterOptions;
       }
     }
   }, {
     key: "getOptionLabel",
     value: function getOptionLabel(option) {
-      return this.props.optionLabel ? _ObjectUtils.default.resolveFieldData(option, this.props.optionLabel) : option && option['label'] !== undefined ? option['label'] : option;
+      return this.props.optionLabel != null ? this.props.optionLabel(option) : option && option['label'] !== undefined ? option['label'] : option;
     }
   }, {
     key: "getOptionValue",
     value: function getOptionValue(option) {
-      return this.props.optionValue ? _ObjectUtils.default.resolveFieldData(option, this.props.optionValue) : option && option['value'] !== undefined ? option['value'] : option;
+      return this.props.optionValue != null ? this.props.optionValue(option) : option && option['value'] !== undefined ? option['value'] : option;
     }
   }, {
     key: "isEmpty",
@@ -115758,13 +115936,13 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "getLabelContent",
     value: function getLabelContent() {
-      var _this7 = this;
+      var _this8 = this;
 
       if (this.props.selectedItemTemplate) {
         if (!this.isEmpty()) {
           if (this.props.value.length <= this.props.maxSelectedLabels) {
             return this.props.value.map(function (val, index) {
-              var item = _ObjectUtils.default.getJSXElement(_this7.props.selectedItemTemplate, val);
+              var item = _ObjectUtils.default.getJSXElement(_this8.props.selectedItemTemplate, val);
 
               return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
                 key: index
@@ -115779,17 +115957,17 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       } else {
         if (this.props.display === 'chip' && !this.isEmpty()) {
           return this.props.value.map(function (val) {
-            var label = _this7.getLabelByValue(val);
+            var label = _this8.getLabelByValue(val);
 
             return /*#__PURE__*/_react.default.createElement("div", {
               className: "p-multiselect-token",
               key: label
             }, /*#__PURE__*/_react.default.createElement("span", {
               className: "p-multiselect-token-label"
-            }, label), !_this7.props.disabled && /*#__PURE__*/_react.default.createElement("span", {
+            }, label), !_this8.props.disabled && /*#__PURE__*/_react.default.createElement("span", {
               className: "p-multiselect-token-icon pi pi-times-circle",
               onClick: function onClick(e) {
-                return _this7.removeChip(e, val);
+                return _this8.removeChip(e, val);
               }
             }));
           });
@@ -115823,7 +116001,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderClearIcon",
     value: function renderClearIcon() {
-      var _this8 = this;
+      var _this9 = this;
 
       var empty = this.isEmpty();
 
@@ -115831,7 +116009,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/_react.default.createElement("i", {
           className: "p-multiselect-clear-icon pi pi-times",
           onClick: function onClick(e) {
-            return _this8.updateModel(e, null);
+            return _this9.updateModel(e, null);
           }
         });
       }
@@ -115841,7 +116019,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderLabel",
     value: function renderLabel() {
-      var _this9 = this;
+      var _this10 = this;
 
       var empty = this.isEmpty();
       var content = this.getLabelContent();
@@ -115852,7 +116030,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
       });
       return /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(el) {
-          return _this9.label = el;
+          return _this10.label = el;
         },
         className: "p-multiselect-label-container"
       }, /*#__PURE__*/_react.default.createElement("div", {
@@ -115862,19 +116040,19 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderHiddenSelect",
     value: function renderHiddenSelect() {
-      var _this10 = this;
+      var _this11 = this;
 
       var selectedOptions = this.props.value ? this.props.value.map(function (option, index) {
         return /*#__PURE__*/_react.default.createElement("option", {
-          key: _this10.getOptionLabel(option) + '_' + index,
-          value: _this10.getOptionValue(option)
+          key: _this11.getOptionLabel(option) + '_' + index,
+          value: _this11.getOptionValue(option)
         });
       }) : null;
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "p-hidden-accessible p-multiselect-hidden-select"
       }, /*#__PURE__*/_react.default.createElement("select", {
         ref: function ref(el) {
-          return _this10.nativeSelect = el;
+          return _this11.nativeSelect = el;
         },
         required: this.props.required,
         name: this.props.name,
@@ -115886,7 +116064,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this11 = this;
+      var _this12 = this;
 
       var className = (0, _ClassNames.classNames)('p-multiselect p-component p-inputwrapper', {
         'p-multiselect-chip': this.props.display === 'chip',
@@ -115908,17 +116086,17 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
 
       if (items && items.length) {
         items = items.map(function (option, index) {
-          var optionLabel = _this11.getOptionLabel(option);
+          var optionLabel = _this12.getOptionLabel(option);
 
           return /*#__PURE__*/_react.default.createElement(_MultiSelectItem.MultiSelectItem, {
             key: optionLabel + '_' + index,
             label: optionLabel,
             option: option,
-            template: _this11.props.itemTemplate,
-            selected: _this11.isSelected(option),
-            onClick: _this11.onOptionClick,
-            onKeyDown: _this11.onOptionKeyDown,
-            tabIndex: _this11.props.tabIndex
+            template: _this12.props.itemTemplate,
+            selected: _this12.isSelected(option),
+            onClick: _this12.onOptionClick,
+            onKeyDown: _this12.onOptionKeyDown,
+            tabIndex: _this12.props.tabIndex
           });
         });
       } else if (hasFilter) {
@@ -115935,14 +116113,14 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         className: className,
         onClick: this.onClick,
         ref: function ref(el) {
-          return _this11.container = el;
+          return _this12.container = el;
         },
         style: this.props.style
       }, hiddenSelect, /*#__PURE__*/_react.default.createElement("div", {
         className: "p-hidden-accessible"
       }, /*#__PURE__*/_react.default.createElement("input", {
         ref: function ref(el) {
-          return _this11.focusInput = el;
+          return _this12.focusInput = el;
         },
         id: this.props.inputId,
         readOnly: true,
@@ -115974,7 +116152,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
         onExited: this.onOverlayExited
       }, /*#__PURE__*/_react.default.createElement(_MultiSelectPanel.MultiSelectPanel, {
         ref: function ref(el) {
-          return _this11.panel = el;
+          return _this12.panel = el;
         },
         header: header,
         appendTo: this.props.appendTo,
@@ -116037,8 +116215,8 @@ _defineProperty(MultiSelect, "propTypes", {
   name: _propTypes.default.string,
   value: _propTypes.default.any,
   options: _propTypes.default.array,
-  optionLabel: _propTypes.default.string,
-  optionValue: _propTypes.default.string,
+  optionLabel: _propTypes.default.func,
+  optionValue: _propTypes.default.func,
   display: _propTypes.default.string,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
@@ -131501,13 +131679,13 @@ var DropdownDoc = /** @class */ (function (_super) {
     DropdownDoc.prototype.render = function () {
         return (React.createElement("section", { className: "docs-page__container" },
             React.createElement("h2", { className: "docs-page__h2" }, "Dropdown"),
-            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <Dropdown\n                        items={[\n                            { label: 'Action 1', onSelect: () => 1 },\n                            { label: 'Action 2', onSelect: () => 1 },\n                            { label: 'Action 3', onSelect: () => 1 },\n                        ]}>\n                       Toogle button\n                    </Dropdown>\n                    \n                "),
+            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <Dropdown\n                        items={[\n                            { label: 'Action 1', onSelect: () => 1 },\n                            { label: 'Action 2', onSelect: () => 1 },\n                            { label: 'Action 3', onSelect: () => 1 },\n                        ]}>\n                       Toogle button\n                    </Dropdown>\n\n                "),
             React.createElement("p", { className: 'docs-page__paragraph' },
                 "By default dropdown menu is positioned left comparing to dropdown toggle button element. For right positioned menu (second example) add prop value ",
                 React.createElement("code", null, "align = 'right'")),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
-                    React.createElement(app_typescript_1.Dropdown, { items: [
+                    React.createElement(app_typescript_1.Dropdown, { append: true, items: [
                             { label: 'Action 1', onSelect: function () { return 1; } },
                             { label: 'Action 2', onSelect: function () { return 1; } },
                             { label: 'Action 3', onSelect: function () { return 1; } },
@@ -131542,7 +131720,7 @@ var DropdownDoc = /** @class */ (function (_super) {
                                                 items: [
                                                     {
                                                         type: 'submenu',
-                                                        label: 'Show 1',
+                                                        label: 'Show 2',
                                                         icon: 'plus-sign',
                                                         items: []
                                                     }
@@ -131550,7 +131728,7 @@ var DropdownDoc = /** @class */ (function (_super) {
                                             },
                                             {
                                                 type: 'submenu',
-                                                label: 'Show 2',
+                                                label: 'Show 1',
                                                 icon: 'plus-sign',
                                                 items: [],
                                             },
@@ -131857,7 +132035,7 @@ var DropdownDoc = /** @class */ (function (_super) {
                                     {
                                         icon: 'rundown',
                                         label: 'Create new Show',
-                                        onSelect: function () { return console.log('aaa'); },
+                                        onSelect: function () { return false; },
                                     },
                                 ],
                             },
@@ -131898,6 +132076,52 @@ var DropdownDoc = /** @class */ (function (_super) {
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement(app_typescript_1.Dropdown, { items: [
+                            {
+                                type: 'group',
+                                label: 'Create new',
+                                items: [
+                                    {
+                                        type: 'submenu',
+                                        label: 'Rundown',
+                                        icon: 'plus-sign',
+                                        items: [
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 1',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Show 3',
+                                                        icon: 'plus-sign',
+                                                        items: []
+                                                    }
+                                                ],
+                                            },
+                                            {
+                                                type: 'submenu',
+                                                label: 'Show 2',
+                                                icon: 'plus-sign',
+                                                items: [
+                                                    {
+                                                        type: 'submenu',
+                                                        label: 'Show 4',
+                                                        icon: 'plus-sign',
+                                                        items: [
+                                                            {
+                                                                type: 'submenu',
+                                                                label: 'Show 5',
+                                                                icon: 'plus-sign',
+                                                                items: []
+                                                            }
+                                                        ],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
                             {
                                 type: 'group', label: 'actions', items: [
                                     'divider',
@@ -131935,7 +132159,7 @@ var DropdownDoc = /** @class */ (function (_super) {
                                 ]
                             }
                         ] }, "Submenu on the left")),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <Dropdown\n                            items={[\n                                {\n                                    type: 'group', label: 'actions', items: [\n                                        'divider',\n                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },\n                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },\n                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },\n                                        'divider',\n                                    ]\n                                },\n                                {\n                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [\n                                        { label: 'Action 1', onSelect: () => 1 },\n                                        { label: 'Action 2', onSelect: () => 1 },\n                                        { label: 'Action 3', onSelect: () => 1 },\n                                        { label: 'Action 4', onSelect: () => 1 },\n                                    ]\n                                }]}>\n                            Multilevel dropdown\n                        </Dropdown>\n                        <Dropdown\n                            items={[\n                                {\n                                    type: 'group', label: 'actions', items: [\n                                        'divider',\n                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },\n                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },\n                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },\n                                        'divider',\n                                    ]\n                                },\n                                {\n                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [\n                                        { label: 'Action 1', onSelect: () => 1 },\n                                        { label: 'Action 2', onSelect: () => 1 },\n                                        { label: 'Action 3', onSelect: () => 1 },\n                                        { label: 'Action 4', onSelect: () => 1 },\n                                    ]\n                                }]}>\n                            Submenu on the left\n                        </Dropdown>    \n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <Dropdown\n                            items={[\n                                {\n                                    type: 'group', label: 'actions', items: [\n                                        'divider',\n                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },\n                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },\n                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },\n                                        'divider',\n                                    ]\n                                },\n                                {\n                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [\n                                        { label: 'Action 1', onSelect: () => 1 },\n                                        { label: 'Action 2', onSelect: () => 1 },\n                                        { label: 'Action 3', onSelect: () => 1 },\n                                        { label: 'Action 4', onSelect: () => 1 },\n                                    ]\n                                }]}>\n                            Multilevel dropdown\n                        </Dropdown>\n                        <Dropdown\n                            items={[\n                                {\n                                    type: 'group', label: 'actions', items: [\n                                        'divider',\n                                        { label: 'Edit', icon: 'pencil', onSelect: () => 1 },\n                                        { label: 'Copy', icon: 'copy', onSelect: () => 1 },\n                                        { label: 'Delete', icon: 'trash', onSelect: () => 1 },\n                                        'divider',\n                                    ]\n                                },\n                                {\n                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [\n                                        { label: 'Action 1', onSelect: () => 1 },\n                                        { label: 'Action 2', onSelect: () => 1 },\n                                        { label: 'Action 3', onSelect: () => 1 },\n                                        { label: 'Action 4', onSelect: () => 1 },\n                                    ]\n                                }]}>\n                            Submenu on the left\n                        </Dropdown>\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Navigation dropdown"),
             React.createElement("p", { className: 'docs-page__paragraph' }, "Example of a dropdown inside a subnavigation element."),
             React.createElement(Markup.ReactMarkup, null,
@@ -131946,7 +132170,7 @@ var DropdownDoc = /** @class */ (function (_super) {
                         //align='right'
                         , { 
                             //align='right'
-                            header: [
+                            append: true, header: [
                                 {
                                     type: 'group', label: 'actions', items: [
                                         'divider',
@@ -131965,23 +132189,23 @@ var DropdownDoc = /** @class */ (function (_super) {
                                     ]
                                 }
                             ], items: [
-                            // {
-                            //     type: 'group', label: 'actions', items: [
-                            //         'divider',
-                            //         { label: 'Edit', icon: 'pencil', onSelect: () => 1 },
-                            //         { label: 'Copy', icon: 'copy', onSelect: () => 1 },
-                            //         { label: 'Delete', icon: 'trash', onSelect: () => 1 },
-                            //         'divider',
-                            //     ]
-                            // },
-                            // {
-                            //     type: 'submenu', label: 'Second level actions', icon: 'star', items: [
-                            //         { label: 'Action 1', onSelect: () => 1 },
-                            //         { label: 'Action 2', onSelect: () => 1 },
-                            //         { label: 'Action 3', onSelect: () => 1 },
-                            //         { label: 'Action 4', onSelect: () => 1 },
-                            //     ]
-                            // }
+                                {
+                                    type: 'group', label: 'actions', items: [
+                                        'divider',
+                                        { label: 'Edit', icon: 'pencil', onSelect: function () { return 1; } },
+                                        { label: 'Copy', icon: 'copy', onSelect: function () { return 1; } },
+                                        { label: 'Delete', icon: 'trash', onSelect: function () { return 1; } },
+                                        'divider',
+                                    ]
+                                },
+                                {
+                                    type: 'submenu', label: 'Second level actions', icon: 'star', items: [
+                                        { label: 'Action 1', onSelect: function () { return 1; } },
+                                        { label: 'Action 2', onSelect: function () { return 1; } },
+                                        { label: 'Action 3', onSelect: function () { return 1; } },
+                                        { label: 'Action 4', onSelect: function () { return 1; } },
+                                    ]
+                                }
                             ], footer: [
                                 {
                                     type: 'submenu', label: 'Second level actions', icon: 'star', items: [
@@ -132018,7 +132242,7 @@ var DropdownDoc = /** @class */ (function (_super) {
                                                     items: [
                                                         {
                                                             type: 'submenu',
-                                                            label: 'Show 1',
+                                                            label: 'Show 3',
                                                             items: []
                                                         }
                                                     ],
@@ -138299,14 +138523,14 @@ var MultiselectDocs = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_2.MultiSelect, { value: this.state.value, options: ItemArr, onChange: function (e) { return _this.setState({ value: e }); }, filter: true, showSelectAll: true, zIndex: 2000, placeholder: 'Select a color', optionLabel: 'name', required: true, tabindex: 1, label: 'This is Label', info: 'This is info' })))),
+                            React.createElement(app_typescript_2.MultiSelect, { value: this.state.value, options: ItemArr, onChange: function (e) { return _this.setState({ value: e }); }, filter: true, showSelectAll: true, zIndex: 2000, placeholder: 'Select a color', optionLabel: function (option) { return "".concat(option.name, " :: ").concat(option.colorCode); }, required: true, tabindex: 1, label: 'This is Label', info: 'This is info' })))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <MultiSelect\n                            value={this.state.value}\n                            options={ItemArr}\n                            onChange={(e: any) => this.setState({value: e.value})}\n                            filter\n                            showSelectAll\n                            placeholder='Select a color'\n                            optionLabel='name'\n                            required\n                            tabindex={1}\n                            label={'This is Label'}\n                            info={'This is info'}\n                        />\n                    ")),
             React.createElement("p", { className: 'docs-page__paragraph' }, "MultiSelect with custom template."),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_2.MultiSelect, { value: this.state.value2, options: ItemArr, onChange: function (e) { return _this.setState({ value2: e }); }, filter: true, showSelectAll: true, optionLabel: 'name', itemTemplate: function (option) {
+                            React.createElement(app_typescript_2.MultiSelect, { value: this.state.value2, options: ItemArr, optionLabel: function (option) { return "".concat(option.name, " :: ").concat(option.colorCode); }, onChange: function (e) { return _this.setState({ value2: e }); }, filter: true, showSelectAll: true, itemTemplate: function (option) {
                                     if (option) {
                                         return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                                             React.createElement("div", { style: { width: 10, height: 10, marginInlineEnd: 10, backgroundColor: option.colorCode } }),
@@ -138400,37 +138624,52 @@ var options = [
             {
                 value: { name: 'Sub-category1' },
                 children: [
-                    { value: { name: 'Item20' } }
+                    { value: { name: 'Item31' } },
+                    // {value: {name: 'Item32'}},
+                    // {value: {name: 'Item33'}},
+                    // {value: {name: 'Item34'}},
                 ]
             },
             {
                 value: { name: 'Sub-category2' },
                 children: [
-                    { value: { name: 'Item21' } }
+                    { value: { name: 'Item41' } },
+                    { value: { name: 'Item42' } },
+                    { value: { name: 'Item43' } }
                 ]
             },
             {
                 value: { name: 'Sub-category3' },
                 children: [
-                    { value: { name: 'Item22' } }
+                    { value: { name: 'Item50' } },
+                    { value: { name: 'Item51' } },
+                    { value: { name: 'Item53' } }
                 ]
             },
             {
                 value: { name: 'Sub-category4' },
                 children: [
-                    { value: { name: 'Item23' } }
+                    { value: { name: 'Item23' } },
+                    { value: { name: 'Item41' } },
+                    { value: { name: 'Item42' } },
+                    { value: { name: 'Item43' } }
                 ]
             },
             {
                 value: { name: 'Sub-category5' },
                 children: [
-                    { value: { name: 'Item24' } }
+                    { value: { name: 'Item24' } },
+                    { value: { name: 'Item41' } },
+                    { value: { name: 'Item42' } },
+                    { value: { name: 'Item43' } }
                 ]
             },
             {
                 value: { name: 'Sub-category6' },
                 children: [
-                    { value: { name: 'Item25' } }
+                    { value: { name: 'Item50' } },
+                    { value: { name: 'Item51' } },
+                    { value: { name: 'Item52' } }
                 ]
             }
         ]
@@ -138441,9 +138680,9 @@ var options = [
             {
                 value: { name: 'Item8' }
             },
-            {
-                value: { name: 'Item9' }
-            }
+            // {
+            //     value: {name: 'Item9'}
+            // }
         ]
     },
     {
@@ -138568,11 +138807,13 @@ var TreeSelectDocs = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(TreeSelect_1.TreeSelect, { value: [{ name: 'Item1' }, { name: 'Item2' }], getOptions: function () { return options; }, kind: 'synchronous', getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, getBackgroundColor: function (item) { return item.bgColor; }, selectBranchWithChildren: true, allowMultiple: true, fullWidth: true, singleLevelSearch: true, required: true, info: 'Info Message', error: 'Error Message', label: 'TreeSelect Label', searchPlaceholder: 'Search...', onChange: function (e) { return false; }, valueTemplate: function (item, Wrapper) {
+                            React.createElement(TreeSelect_1.TreeSelect, { value: [{ name: 'Item1' }, { name: 'Item2' }], getOptions: function () { return options; }, kind: 'synchronous', getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, getBackgroundColor: function (item) { return item.bgColor; }, selectBranchWithChildren: true, allowMultiple: true, fullWidth: true, 
+                                //singleLevelSearch
+                                required: true, info: 'Info Message', error: 'Error Message', label: 'TreeSelect Label', searchPlaceholder: 'Search...', onChange: function (e) { return false; }, valueTemplate: function (item, Wrapper) {
                                     return (React.createElement(Wrapper, { backgroundColor: item.bgColor },
                                         React.createElement("span", null, item.name)));
                                 } })))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            value={[{name: 'Item1'}, {name: 'Item2'}]}\n                            getOptions={() => options}\n                            kind={'synchronous'}\n                            getId={(item) => item.name}\n                            getLabel={(item) => item.name}\n                            getBackgroundColor={(item: any) => item.bgColor}\n                            selectBranchWithChildren={true}\n                            allowMultiple\n                            fullWidth\n                            singleLevelSearch\n                            required\n                            info={'Info Message'}\n                            error={'Error Message'}\n                            label={'TreeSelect Label'}\n                            searchPlaceholder='Search...'\n                            onChange={(e) => false}\n                            valueTemplate={(item, Wrapper) => {\n                                return (\n                                    <Wrapper backgroundColor={item.bgColor}>\n                                        <span>{item.name}</span>\n                                    </Wrapper>\n                                );\n                            }}    \n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            value={[{name: 'Item1'}, {name: 'Item2'}]}\n                            getOptions={() => options}\n                            kind={'synchronous'}\n                            getId={(item) => item.name}\n                            getLabel={(item) => item.name}\n                            getBackgroundColor={(item: any) => item.bgColor}\n                            selectBranchWithChildren={true}\n                            allowMultiple\n                            fullWidth\n                            singleLevelSearch\n                            required\n                            info={'Info Message'}\n                            error={'Error Message'}\n                            label={'TreeSelect Label'}\n                            searchPlaceholder='Search...'\n                            onChange={(e) => false}\n                            valueTemplate={(item, Wrapper) => {\n                                return (\n                                    <Wrapper backgroundColor={item.bgColor}>\n                                        <span>{item.name}</span>\n                                    </Wrapper>\n                                );\n                            }}\n                        />\n                    ")),
             React.createElement("p", { className: 'docs-page__paragraph' }, "Asynchronous mode in TreeSelect component."),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
@@ -139035,7 +139276,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 652 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.5","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@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.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-8","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.7","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@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.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 653 */