superdesk-ui-framework 3.0.1-beta.25 → 3.0.1-beta.26

package/examples/pages/react/TreeSelect.tsx

@@ -13,51 +13,79 @@ interface IState {
     arr: any;
 }
 
-let itemArr = [
+let options = [
     {
-        value: 'Category1',
+        value: {name: 'Category1'},
         children: [
             {
-                value: 'Sub-Category1',
+                value: {name: 'Sub-category1'},
                 children: [
-                    {value: 'Item10'}
+                    {value: {name: 'Item20'}}
                 ]
             },
             {
-                value: 'Sub-Category2',
+                value: {name: 'Sub-category2'},
+                children: [
+                    {value: {name: 'Item21'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category3'},
+                children: [
+                    {value: {name: 'Item22'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category4'},
+                children: [
+                    {value: {name: 'Item23'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category5'},
                 children: [
-                    {value: 'Item11'}
+                    {value: {name: 'Item24'}}
+                ]
+            }
+            ,
+            {
+                value: {name: 'Sub-category6'},
+                children: [
+                    {value: {name: 'Item25'}}
                 ]
             }
         ]
     },
     {
-        value: 'Category2',
+        value: {name: 'Category2'},
         children: [
             {
-                value: 'Sub-Category3'
+                value: {name: 'Item8'}
             },
             {
-                value: 'Sub-Category4'
+                value: {name: 'Item9'}
             }
         ]
     },
     {
-        value: 'Category3',
+        value: {name: 'Category3', bgColor: 'red'},
         children: [
             {
-                value: 'Sub-Category5'
+                value: {name: 'Item10'}
             },
             {
-                value: 'Sub-Category6'
+                value: {name: 'Item11'}
             }
         ]
     },
 ]
 
-let itemArr2 = [
+let options2 = [
     {
-        value: {name: 'Category1'},
+        value: {name: 'Category1', border: 'red'},
         children: [
             {
                 value: {name: 'Sub-category1'},
@@ -102,7 +130,7 @@ let itemArr2 = [
         ]
     },
     {
-        value: {name: 'Category2'},
+        value: {name: 'Category2', border: 'green'},
         children: [
             {
                 value: {name: 'Item8'}
@@ -113,7 +141,7 @@ let itemArr2 = [
         ]
     },
     {
-        value: {name: 'Category3'},
+        value: {name: 'Category3', border: 'yellow'},
         children: [
             {
                 value: {name: 'Item10'}
@@ -125,37 +153,6 @@ let itemArr2 = [
     },
 ]
 
-const source = [
-    {
-        'name': 'Article (news)',
-        'qcode': 'Article (news)',
-    },
-    {
-        'name': 'Article',
-        'qcode': 'Article',
-    },
-    {
-        'name': 'Sidebar',
-        'qcode': 'Sidebar',
-    },
-    {
-        'name': 'Factbox',
-        'qcode': 'Factbox',
-    },
-    {
-        'name': 'Item',
-        'qcode': 'Item',
-    },
-    {
-        'name': 'Array',
-        'qcode': 'Array',
-    },
-    {
-        'name': 'Object',
-        'qcode': 'Object',
-    },
-];
-
 let fetchedArr = [];
 fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data
 );
@@ -186,8 +183,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         this.state = {
             value: [],
             value2: [],
-            options: itemArr2,
-            options2: itemArr2,
+            options: options,
+            options2: options,
             inputValue: '',
             arr: []
         }
@@ -228,21 +225,29 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
+                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
+                                    getOptions={() => options}
+                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
-                                    getOptions={() => itemArr2}
-                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
+                                    getBackgroundColor={(item: any) => item.bgColor}
                                     selectBranchWithChildren={true}
-                                    onChange={(e) => console.log(e)}
                                     allowMultiple
-                                    kind={'synchronous'}
                                     fullWidth
+                                    singleLevelSearch
+                                    required
                                     info={'Info Message'}
                                     error={'Error Message'}
-                                    required
                                     label={'TreeSelect Label'}
-                                    singleLevelSearch
                                     searchPlaceholder='Search...'
+                                    onChange={(e) => false}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}    
                                 />
                             </div>
                         </div>
@@ -250,21 +255,29 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
+                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            getOptions={() => options}
+                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getOptions={() => {
-                                return itemArr2
-                            }}
-                            value={[{name: 'Item1'}, {name: 'Item2'}]}
+                            getBackgroundColor={(item: any) => item.bgColor}
                             selectBranchWithChildren={true}
-                            onChange={(e) => console.log(e)}
                             allowMultiple
-                            kind={'synchronous'}
                             fullWidth
+                            singleLevelSearch
+                            required
                             info={'Info Message'}
                             error={'Error Message'}
-                            required
                             label={'TreeSelect Label'}
+                            searchPlaceholder='Search...'
+                            onChange={(e) => false}
+                            valueTemplate={(item, Wrapper) => {
+                                return (
+                                    <Wrapper backgroundColor={item.bgColor}>
+                                        <span>{item.name}</span>
+                                    </Wrapper>
+                                );
+                            }}    
                         />
                     `}</Markup.ReactMarkupCode>
                     
@@ -286,7 +299,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 }
                                 getId={({qcode}) => qcode.display_name}
                                 selectBranchWithChildren={false}
-                                //optionTemplate={(item) => <span style={{color: 'blue'}}>{item.display_name}</span>}
                                 allowMultiple={true}
                             />
                             </div>
@@ -317,20 +329,23 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <TreeSelect
+                                    getOptions={() => options2}
+                                    kind={'synchronous'}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
+                                    getBackgroundColor={(item) => item.bgColor}
+                                    getBorderColor={(item) => item.border}
                                     placeholder='Select one'
-                                    getOptions={() => this.state.options}
-                                    kind={'synchronous'}
-                                    onChange={(e) => console.log(e)}
+                                    selectBranchWithChildren={true}
+                                    onChange={(e) => false}
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
-                                    valueTemplate={(item: any) => {
-                                        return <span>Label: {item.name}</span>
+                                    valueTemplate={(item: any, Wrapper) => {
+                                        return <Wrapper borderColor={item.border}>
+                                            <span>{item.name}</span>
+                                        </Wrapper>
                                     }}
-                                    //allowMultiple
-                                    //readOnly
                                 />
                             </div>
                         </div>
@@ -338,17 +353,22 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
+                            getOptions={() => options2}
+                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            value={[{name: 'Item4'}, {name: 'Item10'}]}
-                            getOptions={() => this.state.options}
-                            kind={'synchronous'}
-                            onChange={(e) => console.log(e)}
+                            getBackgroundColor={(item) => item.bgColor}
+                            getBorderColor={(item) => item.border}
+                            placeholder='Select one'
+                            selectBranchWithChildren={true}
+                            onChange={(e) => false}
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>
                             }}
-                            valueTemplate={(item: any) => {
-                                return <span>Label: {item.name}</span>
+                            valueTemplate={(item: any, Wrapper) => {
+                                return <Wrapper borderColor={item.border}>
+                                    <span>{item.name}</span>
+                                </Wrapper>
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
@@ -370,8 +390,10 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='searchPlaceholder' isRequired={false} type='string' default='/' description='Filter input placeholder.'/>
                     <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='valueTemplate' isRequired={false} type='Function' default='/' description='Function that gets an item in the value and returns the content for it.'/>
-                    <Prop name='optionTemplate' isRequired={false} type='Function' default='/' description='Function that gets the option and returns the content for it.'/>
+                    <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='valueTemplate' isRequired={false} type='Function(item, Wrapper)' default='/' description='Function that gets an item in the value and returns the content for it.'/>
+                    <Prop name='optionTemplate' isRequired={false} type='Function(item)' default='/' description='Function that gets the option and returns the content for it.'/>
                     <Prop name='searchOptions' isRequired={false} type='Function' default='/' description='The function will be called when a search is initiated from UI in asynchronous mode.'/>
                     <Prop name='onChange' isRequired={true} type='Function' default='/' description='Callback to invoke when value changes.'/>
                     <Prop name='label' isRequired={false} type='string' default='/' description='Input label'/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.25",
+  "version": "3.0.1-beta.26",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Label.d.ts

@@ -13,5 +13,5 @@ interface IProps {
 export declare class Label extends React.PureComponent<IProps> {
     render(): JSX.Element;
 }
-export declare function getTextColor(backgroundColor: string): 'black' | 'white';
+export declare function getTextColor(backgroundColor: string): 'black' | 'white' | undefined;
 export {};

package/react/components/Label.js

@@ -84,10 +84,15 @@ var Label = /** @class */ (function (_super) {
 }(React.PureComponent));
 exports.Label = Label;
 function getTextColor(backgroundColor) {
-    var r = parseInt(backgroundColor.substr(1, 2), 16);
-    var g = parseInt(backgroundColor.substr(3, 2), 16);
-    var b = parseInt(backgroundColor.substr(5, 2), 16);
-    var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-    return (yiq >= 128) ? 'black' : 'white';
+    if (backgroundColor) {
+        var r = parseInt(backgroundColor.substr(1, 2), 16);
+        var g = parseInt(backgroundColor.substr(3, 2), 16);
+        var b = parseInt(backgroundColor.substr(5, 2), 16);
+        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+        return (yiq >= 128) ? 'black' : 'white';
+    }
+    else {
+        return;
+    }
 }
 exports.getTextColor = getTextColor;

package/react/components/Layouts/AuthoringFrame.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     header?: React.ReactNode;
     main?: React.ReactNode;
     sideBar?: React.ReactNode;
+    sideBarClosed?: boolean;
     sidePanel?: React.ReactNode;
     sideOverlay?: React.ReactNode;
     sideOverlayOpen?: boolean;

package/react/components/Layouts/AuthoringFrame.js

@@ -50,7 +50,7 @@ var AuthoringFrame = /** @class */ (function (_super) {
             this.props.main && (React.createElement(_1.AuthoringFrameMain, null, this.props.main)),
             this.props.sidePanel && (React.createElement(_1.AuthoringFrameSidePanel, { opened: this.props.sidePanelOpen, pinned: this.props.sidePanelPinned }, this.props.sidePanel)),
             this.props.sideOverlay && (React.createElement(_1.AuthoringFrameSidePanelOverlay, { opened: this.props.sideOverlayOpen }, this.props.sideOverlay)),
-            this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, null, this.props.sideBar)),
+            this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, { closed: this.props.sideBarClosed }, this.props.sideBar)),
             this.props.overlayPanel && (React.createElement(_1.AuthoringFrameOverlay, null, this.props.overlayPanel))));
     };
     return AuthoringFrame;

package/react/components/Layouts/AuthoringFrameRightBar.d.ts

@@ -1,8 +1,15 @@
 import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
+    closed?: boolean;
 }
-export declare class AuthoringFrameRightBar extends React.PureComponent<IProps> {
-    render(): JSX.Element;
+interface IState {
+    children?: React.ReactNode;
+    closed?: boolean;
+}
+export declare class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    componentDidUpdate(prevProps: Readonly<IProps>): void;
+    render(): false | JSX.Element;
 }
 export {};

package/react/components/Layouts/AuthoringFrameRightBar.js

@@ -38,11 +38,22 @@ exports.AuthoringFrameRightBar = void 0;
 var React = __importStar(require("react"));
 var AuthoringFrameRightBar = /** @class */ (function (_super) {
     __extends(AuthoringFrameRightBar, _super);
-    function AuthoringFrameRightBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function AuthoringFrameRightBar(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            closed: _this.props.closed ? _this.props.closed : false,
+        };
+        return _this;
     }
+    AuthoringFrameRightBar.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.closed !== this.props.closed) {
+            this.setState({
+                closed: this.props.closed,
+            });
+        }
+    };
     AuthoringFrameRightBar.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-editor-grid__sidetabs-bar" }, this.props.children));
+        return (!this.state.closed && React.createElement("div", { className: "sd-editor-grid__sidetabs-bar" }, this.props.children));
     };
     return AuthoringFrameRightBar;
 }(React.PureComponent));

package/react/components/Lists/TableList.d.ts

@@ -8,6 +8,7 @@ export interface IProps {
     className?: string;
     readOnly?: boolean;
     showDragHandle?: 'always' | 'onHover' | 'none';
+    append?: boolean;
     onDrag?(start: number, end: number): void;
     onAddItem?(index: number, item?: IPropsArrayItem): void;
     itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;

package/react/components/Lists/TableList.js

@@ -55,6 +55,7 @@ var react_beautiful_dnd_1 = require("react-beautiful-dnd");
 var Tooltip_1 = require("../Tooltip");
 var Button_1 = require("../Button");
 var Dropdown_1 = require("../Dropdown");
+var react_dom_1 = __importDefault(require("react-dom"));
 var reorder = function (list, startIndex, endIndex) {
     var result = Array.from(list);
     var removed = result.splice(startIndex, 1)[0];
@@ -114,13 +115,18 @@ var TableList = /** @class */ (function (_super) {
             ? this.props.dragAndDrop
                 ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
                     React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
-                        _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                            React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
-                                    ? item.onDoubleClick
-                                    : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
+                        _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, snapshot) { return (_this.props.append
+                            ? React.createElement(PortalItem, { provided: provided2, snapshot: snapshot, item: item, index: index, dragAndDrop: _this.props.dragAndDrop, showDragHandle: _this.props.showDragHandle, addItem: _this.props.addItem, onAddItem: function () { return _this.props.onAddItem
+                                    && _this.props.onAddItem(index, item); }, itemsDropdown: function () { return _this.props.itemsDropdown
                                     ? _this.props.itemsDropdown(index)
-                                    : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
-                                    && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
+                                    : []; } })
+                            : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
+                                        ? item.onDoubleClick
+                                        : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
+                                        ? _this.props.itemsDropdown(index)
+                                        : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
+                                        && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
                         provided.placeholder,
                         (_this.props.addItem && !_this.props.readOnly) &&
                             React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
@@ -206,3 +212,25 @@ var TableListItem = /** @class */ (function (_super) {
     return TableListItem;
 }(React.PureComponent));
 exports.TableListItem = TableListItem;
+var PortalItem = /** @class */ (function (_super) {
+    __extends(PortalItem, _super);
+    function PortalItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    PortalItem.prototype.render = function () {
+        var _this = this;
+        var provided = this.props.provided;
+        var snapshot = this.props.snapshot;
+        var usePortal = snapshot.isDragging;
+        var child = (React.createElement("div", __assign({ ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps),
+            React.createElement(TableListItem, { dragAndDrop: this.props.dragAndDrop, start: this.props.item.start, center: this.props.item.center, end: this.props.item.end, action: this.props.item.action, onClick: this.props.item.onClick ? this.props.item.onClick : undefined, onDoubleClick: this.props.item.onDoubleClick
+                    ? this.props.item.onDoubleClick
+                    : undefined, addItem: this.props.addItem, itemsDropdown: this.props.itemsDropdown, hexColor: this.props.item.hexColor, locked: this.props.item.locked, positionLocked: this.props.item.positionLocked, onAddItem: function () { return _this.props.onAddItem; }, showDragHandle: this.props.showDragHandle })));
+        if (!usePortal) {
+            return child;
+        }
+        // if dragging - put the item in a portal
+        return react_dom_1.default.createPortal(child, document.body);
+    };
+    return PortalItem;
+}(React.PureComponent));

package/react/components/Menu.js

@@ -104,7 +104,7 @@ var Menu = /** @class */ (function (_super) {
     Menu.prototype.render = function () {
         var _this = this;
         var _a;
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
                     if (event.key === 'Escape') {

package/react/components/TreeSelect.d.ts

@@ -34,8 +34,10 @@ interface IPropsBase<T> {
     disabled?: boolean;
     getLabel(item: T): string;
     getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T, Wrapper: any): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 interface IPropsSync<T> extends IPropsBase<T> {

package/react/components/TreeSelect.js

@@ -55,6 +55,7 @@ var debounce_1 = __importDefault(require("lodash/debounce"));
 var Form_1 = require("./Form");
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
+var Label_1 = require("./Label");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -322,10 +323,15 @@ var TreeSelect = /** @class */ (function (_super) {
                             event.stopPropagation();
                             _this.handleTree(event, option);
                         } },
-                        _this.props.optionTemplate
+                        _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)
-                            : React.createElement("span", { className: selectedItem
-                                    ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(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" })));
                 });
@@ -390,20 +396,29 @@ var TreeSelect = /** @class */ (function (_super) {
                             || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button", onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } },
                                 React.createElement("i", { className: "icon-plus-large" })),
                         React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
-                            return React.createElement(React.Fragment, { key: i },
-                                React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
-                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
-                                    React.createElement("span", { className: "tags-input__helper-box" },
-                                        _this.props.valueTemplate
-                                            ? _this.props.valueTemplate(item)
-                                            : React.createElement("span", null, _this.props.getLabel(item)),
-                                        _this.props.readOnly
-                                            || React.createElement("span", { className: "tags-input__remove-button" },
-                                                React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                            var Wrapper = function (_a) {
+                                var backgroundColor = _a.backgroundColor, children = _a.children;
+                                return (React.createElement("li", { className: "tags-input__tag-item tags-input__tag-item--multi-select"
+                                        + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); }, style: _this.props.valueTemplate
+                                        ? { backgroundColor: backgroundColor }
+                                        : _this.props.getBackgroundColor
+                                            && { backgroundColor: _this.props.getBackgroundColor(item) } },
+                                    React.createElement("span", { style: { color: backgroundColor
+                                                ? (0, Label_1.getTextColor)(backgroundColor)
+                                                : _this.props.getBackgroundColor
+                                                    && (0, Label_1.getTextColor)(_this.props.getBackgroundColor(item)) }, className: "tags-input__helper-box" },
+                                        children,
+                                        !_this.props.readOnly && React.createElement("span", { className: "tags-input__remove-button" },
+                                            React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                            };
+                            return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                                ? _this.props.valueTemplate(item, Wrapper)
+                                : React.createElement(Wrapper, null,
+                                    React.createElement("span", null, _this.props.getLabel(item)))));
                         })),
                         this.state.value.length > 0
                             ? this.props.readOnly
-                                || React.createElement("button", { className: "tags-input__remove-value", onClick: function () { return _this.setState({ value: [] }); } },
+                                || 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("div", { className: "tags-input__tags" },
                         this.props.readOnly
@@ -412,16 +427,24 @@ var TreeSelect = /** @class */ (function (_super) {
                                 + (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) {
-                            return React.createElement(React.Fragment, { key: i },
-                                React.createElement("span", { className: 'tags-input__single-item'
+                            var Wrapper = function (_a) {
+                                var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
+                                return (React.createElement("span", { className: 'tags-input__single-item'
                                         + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return _this.props.readOnly || _this.removeClick(i); } },
-                                    React.createElement("span", { className: "tags-input__helper-box" },
-                                        _this.props.valueTemplate
-                                            ? _this.props.valueTemplate(item)
-                                            : React.createElement("span", null, _this.props.getLabel(item)),
+                                    _this.props.getBorderColor
+                                        && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
+                                                ? { backgroundColor: borderColor }
+                                                : { backgroundColor: _this.props.getBorderColor(item) } }),
+                                    React.createElement("span", { style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) }, className: "tags-input__helper-box" },
+                                        React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 } }, children),
                                         _this.props.readOnly
                                             || React.createElement("span", { className: "tags-input__remove-button" },
                                                 React.createElement(Icon_1.Icon, { name: 'remove-sign' })))));
+                            };
+                            return React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                                ? _this.props.valueTemplate(item, Wrapper)
+                                : React.createElement(Wrapper, null,
+                                    React.createElement("span", null, _this.props.getLabel(item))));
                         })),
                 this.state.openDropdown
                     && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
@@ -479,10 +502,14 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            _this.props.optionTemplate
+                                            (_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)
-                                                : React.createElement("span", { className: selectedItem
-                                                        ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(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