superdesk-ui-framework 3.0.1-beta.8 → 3.0.1

package/react/components/TimePicker.d.ts

@@ -14,12 +14,8 @@ interface IProps {
     info?: string;
     error?: string;
 }
-interface IState {
-    invalid: boolean;
-}
-export declare class TimePicker extends React.PureComponent<IProps, IState> {
+export declare class TimePicker extends React.PureComponent<IProps> {
     private htmlId;
-    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};

package/react/components/TimePicker.js

@@ -39,22 +39,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(require("react"));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
-    function TimePicker(props) {
-        var _this = _super.call(this, props) || this;
+    function TimePicker() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            invalid: _this.props.invalid ? _this.props.invalid : false,
-        };
         return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("input", { id: this.htmlId, "aria-labelledby": this.htmlId + 'label', type: "time", step: this.props.allowSeconds ? 1 : undefined, className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));

package/react/components/TreeSelect.d.ts

@@ -11,7 +11,6 @@ interface IState<T> {
     buttonValue: any;
     buttonMouseEvent: boolean;
     loading: boolean;
-    invalid: boolean;
 }
 interface IPropsBase<T> {
     value?: Array<T>;
@@ -22,6 +21,7 @@ interface IPropsBase<T> {
     loading?: boolean;
     singleLevelSearch?: boolean;
     placeholder?: string;
+    searchPlaceholder?: string;
     invalid?: boolean;
     inlineLabel?: boolean;
     labelHidden?: boolean;
@@ -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> {
@@ -56,7 +58,11 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private dropdownRef;
     private openDropdownRef;
     private htmlId;
+    private popperInstance;
     constructor(props: IProps<T>);
+    componentDidMount: () => void;
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
+    toggleMenu(): void;
     removeClick(i: number): void;
     handleMultiLevel(item: ITreeNode<T>): void;
     handleButton(item: ITreeNode<T>): void;
@@ -66,10 +72,11 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     backButton: () => false | undefined;
     backButtonValue: () => void;
     recursion(arr: Array<ITreeNode<T>>): void;
-    componentDidMount: () => void;
-    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
-    filteredItem(arr: Array<ITreeNode<T>>): JSX.Element[] | undefined;
+    filteredItem(arr: Array<ITreeNode<T>>): JSX.Element | JSX.Element[] | undefined;
     banchButton(): JSX.Element;
+    private debounceFn;
+    private ICancelFn;
+    handleDebounce(): void;
     render(): JSX.Element;
 }
 export {};

package/react/components/TreeSelect.js

@@ -50,13 +50,26 @@ exports.TreeSelect = void 0;
 var React = __importStar(require("react"));
 var Icon_1 = require("./Icon");
 var Loader_1 = require("./Loader");
-var classnames_1 = __importDefault(require("classnames"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+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) {
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", function (event) {
+                if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
+                    && (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
+                    _this.setState({ openDropdown: false });
+                }
+            });
+        };
         _this.backButton = function () {
             if (_this.state.activeTree.length > 0) {
                 _this.setState({
@@ -73,15 +86,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 buttonValue: _this.state.buttonTree.pop(),
             });
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                if ((_this.dropdownRef.current && !_this.dropdownRef.current.contains(event.target))
-                    && (_this.openDropdownRef.current && !_this.openDropdownRef.current.contains(event.target))) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-        };
+        _this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
         _this.state = {
             value: _this.props.value ? _this.props.value : [],
             options: _this.props.getOptions ? _this.props.getOptions() : [],
@@ -93,8 +98,8 @@ var TreeSelect = /** @class */ (function (_super) {
             buttonValue: [],
             buttonMouseEvent: false,
             openDropdown: false,
-            loading: _this.props.loading ? _this.props.loading : false,
-            invalid: _this.props.invalid ? _this.props.invalid : false,
+            loading: false,
+            // provera: false
         };
         _this.removeClick = _this.removeClick.bind(_this);
         _this.handleMultiLevel = _this.handleMultiLevel.bind(_this);
@@ -104,10 +109,47 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.handleTree = _this.handleTree.bind(_this);
         _this.filteredItem = _this.filteredItem.bind(_this);
         _this.banchButton = _this.banchButton.bind(_this);
+        _this.handleDebounce = _this.handleDebounce.bind(_this);
+        _this.toggleMenu = _this.toggleMenu.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.openDropdownRef = React.createRef();
         return _this;
     }
+    TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
+        if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
+            this.props.onChange(this.state.value);
+        }
+        else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
+            this.props.onChange(this.state.value);
+        }
+        if (prevState.openDropdown !== this.state.openDropdown) {
+            this.toggleMenu();
+        }
+        if (this.props.kind === 'synchronous') {
+            if ((prevState.activeTree !== this.state.activeTree)
+                || (prevState.filterArr !== this.state.filterArr)
+                || (prevState.options !== this.state.options)) {
+                this.popperInstance.update();
+            }
+        }
+    };
+    TreeSelect.prototype.toggleMenu = function () {
+        if (this.state.openDropdown) {
+            if (this.openDropdownRef.current && this.dropdownRef.current) {
+                this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
+                    placement: 'bottom-start',
+                    modifiers: [
+                        {
+                            name: 'offset',
+                            options: {
+                                offset: [-4, 4],
+                            },
+                        },
+                    ],
+                });
+            }
+        }
+    };
     TreeSelect.prototype.removeClick = function (i) {
         var newTags = this.state.value;
         newTags === null || newTags === void 0 ? void 0 : newTags.splice(i, 1);
@@ -248,18 +290,10 @@ var TreeSelect = /** @class */ (function (_super) {
             }
         });
     };
-    TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (prevState.value !== this.state.value) {
-            this.props.onChange(this.state.value);
-        }
-        else if (prevProps.value !== this.props.value) {
-            this.props.onChange(this.state.value);
-        }
-    };
     TreeSelect.prototype.filteredItem = function (arr) {
         var _this = this;
         if (this.props.kind === 'synchronous') {
-            return arr.filter(function (item) {
+            var filteredArr = arr.filter(function (item) {
                 if (_this.state.searchFieldValue) {
                     if (_this.props.getLabel(item.value)
                         .toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
@@ -272,25 +306,36 @@ var TreeSelect = /** @class */ (function (_super) {
                 else {
                     return item.value;
                 }
-            }).map(function (option, i) {
-                var selectedItem = _this.state.value.some(function (obj) {
-                    return _this.props.getId(obj) === _this.props.getId(option.value);
-                });
-                return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
-                        _this.setState({
-                            searchFieldValue: '',
-                        }),
-                            event.preventDefault();
-                        event.stopPropagation();
-                        _this.handleTree(event, option);
-                    } },
-                    _this.props.optionTemplate
-                        ? _this.props.optionTemplate(option.value)
-                        : React.createElement("span", { className: selectedItem
-                                ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
-                    option.children && React.createElement("span", { className: "suggestion-item__icon" },
-                        React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
             });
+            if (filteredArr.length === 0) {
+                return React.createElement("li", { className: "suggestion-item--nothing-found" }, "Nothing fonud");
+            }
+            else {
+                return filteredArr.map(function (option, i) {
+                    var selectedItem = _this.state.value.some(function (obj) {
+                        return _this.props.getId(obj) === _this.props.getId(option.value);
+                    });
+                    return React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
+                            _this.setState({
+                                searchFieldValue: '',
+                            }),
+                                event.preventDefault();
+                            event.stopPropagation();
+                            _this.handleTree(event, option);
+                        } },
+                        _this.props.getBorderColor
+                            && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
+                        React.createElement("span", { style: _this.props.getBackgroundColor
+                                ? { backgroundColor: _this.props.getBackgroundColor(option.value),
+                                    color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
+                                : undefined, className: 'suggestion-item--bgcolor'
+                                + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                            ? _this.props.optionTemplate(option.value)
+                            : _this.props.getLabel(option.value)),
+                        option.children && React.createElement("span", { className: "suggestion-item__icon" },
+                            React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })));
+                });
+            }
         }
         else if (this.props.kind === 'asynchronous') {
             return this.state.options.map(function (item, i) {
@@ -321,20 +366,29 @@ var TreeSelect = /** @class */ (function (_super) {
             return React.createElement("button", { className: 'autocomplete__button' + (this.props.selectBranchWithChildren ? ' autocomplete__button--multi-select' : '') + ' autocomplete__button--disabled', value: this.state.buttonValue }, "Category selected");
         }
     };
+    TreeSelect.prototype.handleDebounce = function () {
+        var _this = this;
+        this.setState({ options: [] });
+        if (this.props.kind === 'asynchronous') {
+            if (this.state.searchFieldValue) {
+                this.setState({
+                    loading: true,
+                    // provera: false
+                });
+                this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, function (items) {
+                    // if (items.length === 0) {
+                    //     this.setState({provera: true, loading: false})
+                    // } else {
+                    _this.setState({ options: items, loading: false });
+                    _this.popperInstance.update();
+                    // }
+                });
+            }
+        }
+    };
     TreeSelect.prototype.render = function () {
         var _this = this;
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        var classesLabel = (0, classnames_1.default)('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-        return (React.createElement("div", { className: classesLabel },
-            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, id: this.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("div", { className: "tags-input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select', " sd-input__input") },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
@@ -342,40 +396,58 @@ 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: [] }); } },
+                        this.state.value.length > 0
+                            ? this.props.readOnly
+                                || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function () { return _this.setState({ value: [] }); } },
                                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })) : null)
                     : React.createElement("div", { className: "tags-input__tags" },
-                        React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
+                        this.props.readOnly
+                            || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () { return _this.setState({ openDropdown: !_this.state.openDropdown }); } }),
                         this.state.value.length < 1 && React.createElement("span", { className: 'tags-input__single-item'
                                 + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
                             React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
                         this.state.value.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 },
+                this.state.openDropdown
+                    && React.createElement("div", { className: "autocomplete autocomplete--multi-select" + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), ref: this.dropdownRef },
                         React.createElement("div", { className: 'autocomplete__header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                     _this.backButtonValue();
@@ -383,23 +455,28 @@ var TreeSelect = /** @class */ (function (_super) {
                                 } },
                                 React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
                             React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("input", { placeholder: this.props.singleLevelSearch ? 'Search this category...' : 'Search...', type: "text", className: "autocomplete__input", ref: function (input) { return input && input.focus(); }, value: this.state.searchFieldValue, onChange: function (event) {
-                                        var value = event.target.value;
-                                        if (_this.props.kind === 'asynchronous') {
-                                            _this.setState({
-                                                searchFieldValue: value,
-                                                loading: true,
-                                            }),
-                                                _this.props.searchOptions(value, function (items) {
-                                                    _this.setState({ options: items, loading: false });
-                                                });
+                                React.createElement("input", { placeholder: this.props.searchPlaceholder, type: "text", className: "autocomplete__input", ref: function (input) { return input && input.focus(); }, value: this.state.searchFieldValue, onChange: function (event) {
+                                        if (_this.props.kind === 'synchronous') {
+                                            _this.setState({ searchFieldValue: event.target.value });
+                                            _this.popperInstance.update();
+                                        }
+                                        else if (_this.props.kind === 'asynchronous') {
+                                            if (_this.ICancelFn) {
+                                                _this.ICancelFn();
+                                            }
+                                            _this.setState({ searchFieldValue: event.target.value, options: [] });
+                                            _this.popperInstance.update();
+                                            _this.debounceFn();
                                         }
-                                        else if (_this.props.kind === 'synchronous') {
-                                            _this.setState({ searchFieldValue: value });
+                                        else {
+                                            return;
                                         }
+                                        // if(!this.state.searchFieldValue) {
+                                        //     this.setState({provera: false});
+                                        // }
                                     } }))),
-                        this.state.activeTree.length > 0 &&
-                            React.createElement("div", { className: 'autocomplete__category-header' },
+                        this.state.activeTree.length > 0
+                            && React.createElement("div", { className: 'autocomplete__category-header' },
                                 React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                         _this.backButtonValue();
                                         _this.backButton();
@@ -413,35 +490,31 @@ var TreeSelect = /** @class */ (function (_super) {
                         this.state.loading
                             ? React.createElement("ul", { className: "suggestion-list--loader" },
                                 React.createElement(Loader_1.Loader, { overlay: true }))
-                            :
-                                this.state.searchFieldValue === ''
-                                    ? this.props.getOptions ?
-                                        React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
-                                            .map(function (option, i) {
-                                            var selectedItem = _this.state.value.some(function (obj) {
-                                                return _this.props.getId(obj) === _this.props.getLabel(option.value);
-                                            });
-                                            return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
-                                                    event.preventDefault();
-                                                    event.stopPropagation();
-                                                    _this.handleTree(event, option);
-                                                } },
-                                                _this.props.optionTemplate
-                                                    ? _this.props.optionTemplate(option.value)
-                                                    : React.createElement("span", { className: selectedItem
-                                                            ? 'suggestion-item--disabled' : undefined }, _this.props.getLabel(option.value)),
-                                                option.children && React.createElement("span", { className: "suggestion-item__icon" },
-                                                    React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
-                                        })) : null
-                                    :
-                                        React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
-                                            ? this.state.options : this.state.filterArr)))),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+                            : this.state.searchFieldValue === ''
+                                ? this.props.getOptions
+                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.state.options
+                                        .map(function (option, i) {
+                                        var selectedItem = _this.state.value.some(function (obj) {
+                                            return _this.props.getId(obj) === _this.props.getLabel(option.value);
+                                        });
+                                        return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
+                                                event.preventDefault();
+                                                event.stopPropagation();
+                                                _this.handleTree(event, option);
+                                            } },
+                                            (_this.props.getBorderColor && !_this.props.allowMultiple) && React.createElement("div", { className: "item-border", style: { backgroundColor: _this.props.getBorderColor(option.value) } }),
+                                            React.createElement("span", { style: (_this.props.getBackgroundColor && option.value)
+                                                    ? { backgroundColor: _this.props.getBackgroundColor(option.value),
+                                                        color: (0, Label_1.getTextColor)(_this.props.getBackgroundColor(option.value)) }
+                                                    : undefined, className: 'suggestion-item--bgcolor'
+                                                    + (selectedItem ? ' suggestion-item--disabled' : '') }, _this.props.optionTemplate
+                                                ? _this.props.optionTemplate(option.value)
+                                                : _this.props.getLabel(option.value)),
+                                            option.children && React.createElement("span", { className: "suggestion-item__icon" },
+                                                React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))));
+                                    })) : null
+                                : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select" }, this.filteredItem(this.props.singleLevelSearch
+                                    ? this.state.options : this.state.filterArr))))));
     };
     return TreeSelect;
 }(React.Component));

package/react/index.d.ts

@@ -82,5 +82,6 @@ export { BottomNav } from './components/Navigation/BottomNav';
 export { TreeSelect } from './components/TreeSelect';
 export { TableList, TableListItem } from './components/Lists/TableList';
 export { ContentListItem } from './components/Lists/ContentList';
+export { MultiSelect } from './components/MultiSelect';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -14,6 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePicker = exports.DatePickerISO = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.TagInputTest = exports.TagInput = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.Tag = exports.Dropdown = exports.DropdownDivider = void 0;
+exports.MultiSelect = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -197,3 +198,5 @@ Object.defineProperty(exports, "TableList", { enumerable: true, get: function ()
 Object.defineProperty(exports, "TableListItem", { enumerable: true, get: function () { return TableList_1.TableListItem; } });
 var ContentList_1 = require("./components/Lists/ContentList");
 Object.defineProperty(exports, "ContentListItem", { enumerable: true, get: function () { return ContentList_1.ContentListItem; } });
+var MultiSelect_1 = require("./components/MultiSelect");
+Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return MultiSelect_1.MultiSelect; } });

package/patches/@superdesk+primereact+5.0.2-4.patch

@@ -1,66 +0,0 @@
-diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts b/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
-index 80b0f8e..5343abf 100644
---- a/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
-+++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.d.ts
-@@ -18,7 +18,7 @@ interface DialogProps {
-     maskClassName?: string;
-     showHeader?: boolean;
-     appendTo?: HTMLElement;
--    baseZIndex?: number;
-+    zIndex?: number;
-     maximizable?: boolean;
-     blockScroll?: boolean;
-     ariaCloseIconLabel?: string;
-diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.js b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
-index 2e243f2..e7ce643 100644
---- a/node_modules/@superdesk/primereact/components/dialog/Dialog.js
-+++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
-@@ -148,7 +148,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
-   }, {
-     key: "zIndex",
-     get: function get() {
--      return this.props.baseZIndex + _DomHandler.default.generateZIndex();
-+      return this.props.zIndex;
-     }
-   }, {
-     key: "maximized",
-@@ -301,7 +301,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
-         this.setState({
-           maskVisible: true
-         }, function () {
--          _this5.mask.style.zIndex = String(_this5.zIndex);
-+          _this5.mask.style.zIndex = String(this.zIndex);
-         });
-       }
- 
-@@ -501,7 +501,7 @@ _defineProperty(Dialog, "defaultProps", {
-   maskClassName: null,
-   showHeader: true,
-   appendTo: null,
--  baseZIndex: 0,
-+  zIndex: 0,
-   maximizable: false,
-   blockScroll: false,
-   icons: null,
-@@ -531,7 +531,7 @@ _defineProperty(Dialog, "propTypes", {
-   maskClassName: _propTypes.default.string,
-   showHeader: _propTypes.default.bool,
-   appendTo: _propTypes.default.object,
--  baseZIndex: _propTypes.default.number,
-+  zIndex: _propTypes.default.number,
-   maximizable: _propTypes.default.bool,
-   blockScroll: _propTypes.default.bool,
-   icons: _propTypes.default.any,
-diff --git a/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts b/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts
-index a91da27..3dd7822 100644
---- a/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts
-+++ b/node_modules/@superdesk/primereact/components/tieredmenu/TieredMenu.d.ts
-@@ -9,7 +9,7 @@ interface TieredMenuProps {
-     style?: object;
-     className?: string;
-     autoZIndex?: boolean;
--    bazeZIndex?: number;
-+    baseZIndex?: number;
-     appendTo?: any;
-     onShow?(e: Event): void;
-     onHide?(e: Event): void;