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

package/dist/vendor.bundle.js

@@ -7,7 +7,7 @@
 		var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_7__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -28264,7 +28264,7 @@ __webpack_require__(541);
 
 __webpack_require__(0);
 
-__webpack_require__(7);
+__webpack_require__(9);
 
 /***/ }),
 
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 7:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_7__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
 
 /***/ })
 

package/examples/index.js

@@ -418,10 +418,6 @@ export default angular.module('ui-docs', [
             'core-layout': {
                 name: 'Core Layout',
                 component: 'CoreLayout'
-            },
-            'multiedit': {
-                name: 'Multiedit',
-                component: 'Multiedit'
             }
         }
     }))

package/examples/pages/playgrounds/react-playgrounds/Index.tsx

@@ -4,7 +4,6 @@ export { TestGround } from './TestGround';
 export { UiPlayground } from './UiPlayground';
 export { PageLayoutTest } from './PageLayoutTest';
 export { EditorTest } from './EditorTest';
-export { Multiedit } from './Multiedit';
 export { RundownEditor } from './RundownEditor';
 export { PersonalProfile } from './PersonalProfile';
 export { Rundowns } from './Rundowns';

package/examples/pages/react/TableList.tsx

@@ -98,7 +98,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Markup.ReactMarkupPreview>
                         <TableList
                             dragAndDrop
-                            append
                             addItem
                             array={this.state.array}
                             itemsDropdown={(index) => [
@@ -136,7 +135,6 @@ export default class TableListDoc extends React.Component<IProps, IState> {
                     <Prop name='className' isRequired={false} type='string' default='false' description='Add class on TableList container.' />
                     <Prop name='showDragHandle' isRequired={false} type='string' default='always' description='"always" | "onHover" | "none".' />
                     <Prop name='readOnly' isRequired={false} type='boolean' default='false' description='When specified, component changes are not enabled.' />
-                    <Prop name='append' isRequired={false} type='boolean' default='false' description='Set append to body on individual item while draging.' />
                     <Prop name='onDrag' isRequired={false} type='function' default='false' description='Returns start and end position of draggable item' />
                     <Prop name='onAddItem' isRequired={false} type='function' default='false' description='Returns index of draggable item.' />
                     <Prop name='itemsDropdown' isRequired={false} type='function' default='false' description='Dropdown for adding items in the list. Returns index of draggable item.' />

package/examples/pages/react/TreeSelect.tsx

@@ -13,79 +13,51 @@ interface IState {
     arr: any;
 }
 
-let options = [
+let itemArr = [
     {
-        value: {name: 'Category1'},
+        value: 'Category1',
         children: [
             {
-                value: {name: 'Sub-category1'},
+                value: 'Sub-Category1',
                 children: [
-                    {value: {name: 'Item20'}}
+                    {value: 'Item10'}
                 ]
             },
             {
-                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'},
+                value: 'Sub-Category2',
                 children: [
-                    {value: {name: 'Item24'}}
-                ]
-            }
-            ,
-            {
-                value: {name: 'Sub-category6'},
-                children: [
-                    {value: {name: 'Item25'}}
+                    {value: 'Item11'}
                 ]
             }
         ]
     },
     {
-        value: {name: 'Category2'},
+        value: 'Category2',
         children: [
             {
-                value: {name: 'Item8'}
+                value: 'Sub-Category3'
             },
             {
-                value: {name: 'Item9'}
+                value: 'Sub-Category4'
             }
         ]
     },
     {
-        value: {name: 'Category3', bgColor: 'red'},
+        value: 'Category3',
         children: [
             {
-                value: {name: 'Item10'}
+                value: 'Sub-Category5'
             },
             {
-                value: {name: 'Item11'}
+                value: 'Sub-Category6'
             }
         ]
     },
 ]
 
-let options2 = [
+let itemArr2 = [
     {
-        value: {name: 'Category1', border: 'red'},
+        value: {name: 'Category1'},
         children: [
             {
                 value: {name: 'Sub-category1'},
@@ -130,7 +102,7 @@ let options2 = [
         ]
     },
     {
-        value: {name: 'Category2', border: 'green'},
+        value: {name: 'Category2'},
         children: [
             {
                 value: {name: 'Item8'}
@@ -141,7 +113,7 @@ let options2 = [
         ]
     },
     {
-        value: {name: 'Category3', border: 'yellow'},
+        value: {name: 'Category3'},
         children: [
             {
                 value: {name: 'Item10'}
@@ -153,6 +125,37 @@ let options2 = [
     },
 ]
 
+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
 );
@@ -183,8 +186,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         this.state = {
             value: [],
             value2: [],
-            options: options,
-            options2: options,
+            options: itemArr2,
+            options2: itemArr2,
             inputValue: '',
             arr: []
         }
@@ -225,29 +228,21 @@ 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}
-                                    getBackgroundColor={(item: any) => item.bgColor}
+                                    getOptions={() => itemArr2}
+                                    value={[{name: 'Item1'}, {name: 'Item2'}]}
                                     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>
@@ -255,29 +250,21 @@ 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}
-                            getBackgroundColor={(item: any) => item.bgColor}
+                            getOptions={() => {
+                                return itemArr2
+                            }}
+                            value={[{name: 'Item1'}, {name: 'Item2'}]}
                             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>
                     
@@ -299,6 +286,7 @@ 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>
@@ -329,23 +317,20 @@ 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'
-                                    selectBranchWithChildren={true}
-                                    onChange={(e) => false}
+                                    getOptions={() => this.state.options}
+                                    kind={'synchronous'}
+                                    onChange={(e) => console.log(e)}
                                     optionTemplate={(item: any) => {
                                         return <div>Label: {item.name}</div>
                                     }}
-                                    valueTemplate={(item: any, Wrapper) => {
-                                        return <Wrapper borderColor={item.border}>
-                                            <span>{item.name}</span>
-                                        </Wrapper>
+                                    valueTemplate={(item: any) => {
+                                        return <span>Label: {item.name}</span>
                                     }}
+                                    //allowMultiple
+                                    //readOnly
                                 />
                             </div>
                         </div>
@@ -353,22 +338,17 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
 
                     <Markup.ReactMarkupCode>{`
                         <TreeSelect
-                            getOptions={() => options2}
-                            kind={'synchronous'}
                             getId={(item) => item.name}
                             getLabel={(item) => item.name}
-                            getBackgroundColor={(item) => item.bgColor}
-                            getBorderColor={(item) => item.border}
-                            placeholder='Select one'
-                            selectBranchWithChildren={true}
-                            onChange={(e) => false}
+                            value={[{name: 'Item4'}, {name: 'Item10'}]}
+                            getOptions={() => this.state.options}
+                            kind={'synchronous'}
+                            onChange={(e) => console.log(e)}
                             optionTemplate={(item: any) => {
                                 return <div>Label: {item.name}</div>
                             }}
-                            valueTemplate={(item: any, Wrapper) => {
-                                return <Wrapper borderColor={item.border}>
-                                    <span>{item.name}</span>
-                                </Wrapper>
+                            valueTemplate={(item: any) => {
+                                return <span>Label: {item.name}</span>
                             }}
                         />
                     `}</Markup.ReactMarkupCode>
@@ -390,10 +370,8 @@ 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='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='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='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.26",
+  "version": "3.0.1-beta.27",
   "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' | undefined;
+export declare function getTextColor(backgroundColor: string): 'black' | 'white';
 export {};

package/react/components/Label.js

@@ -84,15 +84,10 @@ var Label = /** @class */ (function (_super) {
 }(React.PureComponent));
 exports.Label = Label;
 function getTextColor(backgroundColor) {
-    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;
-    }
+    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';
 }
 exports.getTextColor = getTextColor;

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

@@ -3,7 +3,6 @@ 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, { closed: this.props.sideBarClosed }, this.props.sideBar)),
+            this.props.sideBar && (React.createElement(_1.AuthoringFrameRightBar, null, this.props.sideBar)),
             this.props.overlayPanel && (React.createElement(_1.AuthoringFrameOverlay, null, this.props.overlayPanel))));
     };
     return AuthoringFrame;

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

@@ -1,15 +1,8 @@
 import * as React from 'react';
 interface IProps {
     children?: React.ReactNode;
-    closed?: boolean;
 }
-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 declare class AuthoringFrameRightBar extends React.PureComponent<IProps> {
+    render(): JSX.Element;
 }
 export {};

package/react/components/Layouts/AuthoringFrameRightBar.js

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

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

@@ -8,7 +8,6 @@ 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,7 +55,6 @@ 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];
@@ -115,18 +114,13 @@ 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, 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.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.props.itemsDropdown(index)
-                                    : []; } })
-                            : 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 }))); })); }),
+                                    : []; }, 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" },
@@ -212,25 +206,3 @@ 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/TreeSelect.d.ts

@@ -34,10 +34,8 @@ 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, Wrapper: any): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 interface IPropsSync<T> extends IPropsBase<T> {