superdesk-ui-framework 3.0.56 → 3.0.57

package/dist/vendor.bundle.js

@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 572);
+/******/ 	return __webpack_require__(__webpack_require__.s = 573);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -17328,7 +17328,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 43:
+/***/ 44:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28246,7 +28246,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 572:
+/***/ 573:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -28254,13 +28254,13 @@ module.exports = function(module) {
 
 __webpack_require__(21);
 
-__webpack_require__(43);
+__webpack_require__(44);
 
-__webpack_require__(573);
+__webpack_require__(574);
 
-__webpack_require__(575);
+__webpack_require__(576);
 
-__webpack_require__(577);
+__webpack_require__(578);
 
 __webpack_require__(0);
 
@@ -28268,7 +28268,7 @@ __webpack_require__(8);
 
 /***/ }),
 
-/***/ 573:
+/***/ 574:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(43), __webpack_require__(574) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(575) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 574:
+/***/ 575:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(43) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 575:
+/***/ 576:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(576);
+__webpack_require__(577);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 576:
+/***/ 577:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65672,20 +65672,20 @@ $provide.value("$locale", {
 })(window);
 
 !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(43)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(44)))
 
 /***/ }),
 
-/***/ 577:
+/***/ 578:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(578);
+__webpack_require__(579);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 578:
+/***/ 579:
 /***/ (function(module, exports) {
 
 /**

package/examples/pages/react/Index.tsx

@@ -62,6 +62,7 @@ import * as Playgrounds from '../playgrounds/react-playgrounds/Index';
 import { SelectWithTemplateDocs } from './SelectWithTemplate';
 import { MultiselectDocs } from './MultiSelect';
 import { TreeSelectDocs } from './TreeSelect';
+import { TreeMenuDocs } from './TreeMenu';
 import DurationInputDoc from './DurationInput';
 import {WithPaginationDocs} from './WithPaginationDocs';
 import { PopoverDoc } from './Popover';
@@ -124,6 +125,9 @@ const pages = {
             'menu': {
                 name: 'Menu',
             },
+            'treemenu': {
+                name: 'TreeMenu',
+            },
             "drag-handle": {
                 name: 'Drag handle'
             }
@@ -353,6 +357,7 @@ class ReactDoc extends React.Component<IProps, IState> {
                         <Route path="/react/with-size-observer" component={WithSizeObserverDocs} />
                         <Route path="/react/multiselect" component={MultiselectDocs} />
                         <Route path="/react/treeselect" component={TreeSelectDocs} />
+                        <Route path="/react/treemenu" component={TreeMenuDocs} />
                         <Route path="/react/duration-input" component={DurationInputDoc} />
                         <Route path="/react/with-pagination" component={WithPaginationDocs} />
                         <Route path="/react/popover" component={PopoverDoc} />

package/examples/pages/react/TreeMenu.tsx

@@ -0,0 +1,277 @@
+import * as React from 'react';
+import * as Markup from '../../js/react';
+import { PropsList, Prop, Button, Icon } from '../../../app-typescript';
+import {ITreeMenuNode, TreeMenu} from '../../../app-typescript/components/TreeMenu';
+
+let options: Array<ITreeMenuNode<{name: string, bgColor?: string}>> = [
+    {
+        value: {name: 'Category1'},
+        children: [
+            {
+                value: {name: 'Sub-category1'},
+                children: [
+                    {value: {name: 'Item5'}, onSelect: () => false},
+                    {value: {name: 'Item6'}, onSelect: () => false},
+                    {value: {name: 'Item7'}, onSelect: () => false},
+                    {value: {name: 'Item8'}, onSelect: () => false},
+
+                ]
+            },
+            {
+                value: {name: 'Sub-category2'},
+                children: [
+                    {value: {name: 'Item9'}, onSelect: () => false},
+                    {value: {name: 'Item10'}, onSelect: () => false},
+                    {value: {name: 'Item11'}, onSelect: () => false},
+                    {value: {name: 'Item12'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category3'},
+                children: [
+                    {value: {name: 'Item13'}, onSelect: () => false},
+                    {value: {name: 'Item14'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category4'},
+                children: [
+                    {value: {name: 'Item15'}, onSelect: () => false},
+                    {value: {name: 'Item16'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category5'},
+                children: [
+                    {value: {name: 'Item17'}, onSelect: () => false},
+                    {value: {name: 'Item18'}, onSelect: () => false},
+                    {value: {name: 'Item19'}, onSelect: () => false},
+                    {value: {name: 'Item20'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item21'}, onSelect: () => false},
+                    {value: {name: 'Item22'}, onSelect: () => false},
+                    {value: {name: 'Item23'}, onSelect: () => false},
+                    {value: {name: 'Item24'}, onSelect: () => false},
+                ]
+            }
+        ]
+    },
+    {
+        value: {name: 'Category2'},
+        children: [
+            {value: {name: 'Item1'}, onSelect: () => false},
+            {value: {name: 'Item2'}, onSelect: () => false},
+        ]
+    },
+    {
+        value: {name: 'Category3', bgColor: 'red'},
+        children: [
+            {value: {name: 'Item3'}, onSelect: () => false},
+            {value: {name: 'Item4'}, onSelect: () => false},
+        ]
+    },
+]
+
+let options2: Array<ITreeMenuNode<{name: string, icon?: any}>>= [
+    {
+        value: {name: 'Category1', icon: <Icon name='text' />},
+        children: [
+            {
+                value: {name: 'Sub-category1'},
+                children: [
+                    {value: {name: 'Item5'}, onSelect: () => false},
+                    {value: {name: 'Item6'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category2'},
+                children: [
+                    {value: {name: 'Item7'}, onSelect: () => false},
+                    {value: {name: 'Item8'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category3'},
+                children: [
+                    {value: {name: 'Item9'}, onSelect: () => false},
+                    {value: {name: 'Item10'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category4'},
+                children: [
+                    {value: {name: 'Item11'}, onSelect: () => false},
+                    {value: {name: 'Item12'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category5'},
+                children: [
+                    {value: {name: 'Item13'}, onSelect: () => false},
+                    {value: {name: 'Item14'}, onSelect: () => false},
+                ]
+            },
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item15'}, onSelect: () => false},
+                    {value: {name: 'Item16'}, onSelect: () => false},
+                ]
+            }
+        ]
+    },
+    {
+        value: {name: 'Category2', icon: <Icon name='photo' />},
+        children: [
+            {value: {name: 'Item1'}, onSelect: () => false},
+            {value: {name: 'Item2'}, onSelect: () => false},
+        ]
+    },
+    {
+        value: {name: 'Category3', icon: <Icon name='video' />},
+        children: [
+            {value: {name: 'Item3'}, onSelect: () => false},
+            {value: {name: 'Item4'}, onSelect: () => false},
+        ]
+    },
+]
+
+export class TreeMenuDocs extends React.Component<{}, {}> {
+    constructor(props) {
+        super(props);
+
+        this.handleChange = this.handleChange.bind(this);
+    }
+
+    handleChange(e, option) {
+        if(option.item) {
+            e.stopPropagation();
+            e.preventDefault();
+
+            this.setState({
+                options: option.item
+            })
+        }
+    }
+
+    render() {
+        return (
+            <section className='docs-page__container'>
+                <h2 className='docs-page__h2'>TreeMenu</h2>
+
+                <Markup.ReactMarkupCodePreview>{`
+                    <TreeSelect
+                        getOptions={() => this.state.options}
+                        getId={(item) => item.name}
+                        getLabel={(item) => item.name}
+                    />
+                `}
+                </Markup.ReactMarkupCodePreview>
+
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <TreeMenu
+                                getOptions={() => options}
+                                getId={(item) => item.name}
+                                getLabel={(item) => item.name}
+                                getBackgroundColor={(item: any) => item.bgColor}
+                            >
+                                {(toggle) => (
+                                    <Button text="Open TreeMenu" onClick={toggle} />
+                                )}
+                            </TreeMenu>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeMenu
+                            getOptions={() => options}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            getBackgroundColor={(item: any) => item.bgColor}
+                        >
+                            {(toggle) => (
+                                <Button text="Open TreeMenu" onClick={toggle} />
+                            )}
+                        </TreeMenu>
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>TreeMenu with custom template:</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <TreeMenu
+                                getOptions={() => options2}
+                                getId={(item) => item.name}
+                                getLabel={(item) => item.name}
+                                optionTemplate={(item: any) => {
+                                    return (
+                                        <div 
+                                            style={{
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: '4px'
+                                            }}
+                                        >
+                                            {item.icon}
+                                            {item.name}
+                                        </div>
+                                    )
+                                }}
+                            >
+                                {(toggle) => (
+                                    <Button text="Open TreeMenu" onClick={toggle} />
+                                )}
+                            </TreeMenu>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeMenu
+                            getOptions={() => options2}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            optionTemplate={(item: any) => {
+                                return (
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '4px'
+                                        }}
+                                    >
+                                        {item.icon}
+                                        {item.name}
+                                    </div>
+                                )
+                            }}
+                        >
+                            {(toggle) => (
+                                <Button text="Open TreeMenu" onClick={toggle} />
+                            )}
+                        </TreeMenu>
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <h3 className="docs-page__h3">Props</h3>
+                <PropsList>
+                    <Prop name='getOptions' isRequired={true} type='Function' default='/' description='An array of selectitems to display as the available options.'/>
+                    <Prop name='width' isRequired={false} type='medium | full-width (100%)' default='100%' description='Dropdown width.'/>
+                    <Prop name='getLabel' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop name='getId' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
+                    <Prop name='getBackgroundColor' isRequired={true} type='Function' default='/' description='Function to return background color of individual item in options.'/>
+                    <Prop name='getBorderColor' isRequired={true} type='Function' default='/' description='Function to return border color of individual item in options in single-select mode.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
+                </PropsList>
+            </section>
+        )
+    }
+}

package/package.json

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

package/react/components/Button.js

@@ -65,7 +65,7 @@ var Button = /** @class */ (function (_super) {
             _a['btn--ui-dark'] = this.props.theme === 'dark',
             _a['btn--icon-only-circle'] = this.props.shape === 'round' && this.props.iconOnly,
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
+        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.disabled || this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
             this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
             this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { name: this.props.icon }) : null,
             this.props.iconOnly ? null : this.props.text));

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

@@ -0,0 +1 @@
+export declare const keyboardNavigation: (e?: KeyboardEvent, menuRef?: HTMLUListElement, ref?: () => void) => void;

package/react/components/TreeSelect/KeyboardNavigation.js

@@ -0,0 +1,64 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyboardNavigation = void 0;
+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:not([disabled])').length > 0) {
+                buttons.push(item.querySelector('.suggestion-item--btn'));
+            }
+        });
+    }
+    return buttons;
+};
+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();
+    }
+};
+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);
+        }
+    }
+};
+exports.keyboardNavigation = keyboardNavigation;

package/react/components/TreeSelect/TreeSelect.js

@@ -63,6 +63,7 @@ var Label_1 = require("../Label");
 var SelectPreview_1 = require("../SelectPreview");
 var TreeSelectPill_1 = require("./TreeSelectPill");
 var TreeSelectItem_1 = require("./TreeSelectItem");
+var KeyboardNavigation_1 = require("./KeyboardNavigation");
 var react_dom_1 = require("react-dom");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
@@ -91,7 +92,7 @@ var TreeSelect = /** @class */ (function (_super) {
         };
         _this.onKeyDown = function (e) {
             if (_this.state.openDropdown && _this.ref.current) {
-                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                (0, KeyboardNavigation_1.keyboardNavigation)(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
                 if (e.key === 'Backspace' && _this.state.activeTree.length > 0) {
                     _this.backButton();
                     var lastElement = _this.state.buttonTarget.pop();
@@ -431,7 +432,7 @@ var TreeSelect = /** @class */ (function (_super) {
                     } },
                     React.createElement("button", { className: "suggestion-item--btn" }, _this.props.optionTemplate
                         ? _this.props.optionTemplate(item.value)
-                        : (React.createElement("span", { className: selectedItem ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(item.value))))));
+                        : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
             });
         }
         else {
@@ -623,54 +624,3 @@ var TreeSelect = /** @class */ (function (_super) {
     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();
-    }
-};

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

@@ -3,7 +3,8 @@ import { ITreeNode } from './TreeSelect';
 export declare function getPrefixedItemId(id: string): string;
 interface IProps<T> {
     option: ITreeNode<T>;
-    selectedItem: boolean;
+    selectedItem?: boolean;
+    disabledItem?: boolean;
     allowMultiple?: boolean;
     handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): any;
     getLabel(item: T): string;

package/react/components/TreeSelect/TreeSelectItem.js

@@ -55,25 +55,28 @@ var TreeSelectItem = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement("li", { className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
                 var _a, _b;
-                (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-                event.preventDefault();
-                event.stopPropagation();
-                _this.props.handleTree(event, _this.props.option);
+                if (!_this.props.disabledItem) {
+                    (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    _this.props.handleTree(event, _this.props.option);
+                }
             } },
             React.createElement("button", { 
                 // the className is generated in order to focus the element later
-                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value))), onKeyDown: function (event) {
+                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value)))
+                    + (this.props.disabledItem ? ' suggestion-item--disabled' : ''), onKeyDown: function (event) {
                     var _a, _b;
                     if (event.key === 'Enter' && _this.props.option.children) {
                         (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
-                } },
+                }, disabled: this.props.disabledItem },
                 (this.props.getBorderColor && !this.props.allowMultiple)
                     && React.createElement("div", { className: "item-border", style: {
                             backgroundColor: this.props.getBorderColor(this.props.option.value),
                         } }),
                 React.createElement("span", { className: 'suggestion-item--bgcolor'
-                        + (this.props.selectedItem ? ' suggestion-item--disabled' : ''), style: (this.props.getBackgroundColor && this.props.option.value)
+                        + (this.props.selectedItem ? ' suggestion-item--selected' : ''), style: (this.props.getBackgroundColor && this.props.option.value)
                         ? {
                             backgroundColor: this.props.getBackgroundColor(this.props.option.value),
                             color: (0, Label_1.getTextColor)(this.props.getBackgroundColor(this.props.option.value)),