superdesk-ui-framework 3.0.5 → 3.0.7

package/dist/superdesk-ui.bundle.js

@@ -63114,31 +63114,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 : [],
@@ -63148,11 +63169,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);
@@ -63161,14 +63182,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);
         }
@@ -63182,11 +63208,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, {
@@ -63201,6 +63229,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) {
@@ -63220,8 +63272,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,
         });
     };
@@ -63236,10 +63292,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 });
@@ -63252,7 +63313,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 });
         }
@@ -63268,7 +63334,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 });
             }
@@ -63282,7 +63353,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 });
             }
@@ -63306,6 +63382,7 @@ var TreeSelect = /** @class */ (function (_super) {
                         options: this.state.firstBranchOptions,
                         openDropdown: false,
                         activeTree: [],
+                        buttonTarget: [],
                     });
                 }
                 else {
@@ -63322,6 +63399,7 @@ var TreeSelect = /** @class */ (function (_super) {
                             options: this.state.firstBranchOptions,
                             openDropdown: false,
                             activeTree: [],
+                            buttonTarget: [],
                         });
                     }
                 }
@@ -63333,6 +63411,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;
@@ -63368,7 +63456,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: '',
                             }),
@@ -63376,17 +63464,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" })))));
                 });
             }
         }
@@ -63397,26 +63487,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 () {
@@ -63426,15 +63537,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();
                 });
             }
         }
@@ -63472,13 +63579,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;
@@ -63508,27 +63617,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();
@@ -63536,16 +63643,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);
@@ -63555,23 +63663,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();
+    }
+};
 
 
 /***/ }),
@@ -102385,13 +102560,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 () {
@@ -102403,7 +102577,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'] })),
@@ -114377,7 +114551,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));
@@ -114940,21 +115114,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",
@@ -115019,13 +115197,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
@@ -115040,17 +115218,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);
               }
             }));
           });
@@ -115084,7 +115262,7 @@ var MultiSelect = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderClearIcon",
     value: function renderClearIcon() {
-      var _this8 = this;
+      var _this9 = this;
 
       var empty = this.isEmpty();
 
@@ -115092,7 +115270,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);
           }
         });
       }
@@ -115102,7 +115280,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();
@@ -115113,7 +115291,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", {
@@ -115123,19 +115301,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,
@@ -115147,7 +115325,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',
@@ -115169,17 +115347,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) {
@@ -115196,14 +115374,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,
@@ -115235,7 +115413,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,
@@ -115298,8 +115476,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,