superdesk-ui-framework 3.1.3 → 3.1.5

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_8__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_9__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
 /******/ 	__webpack_require__.p = "";
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 576);
+/******/ 	return __webpack_require__(__webpack_require__.s = 798);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -82,7 +82,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 /***/ }),
 
-/***/ 21:
+/***/ 24:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(global, module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(53)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(40), __webpack_require__(56)(module)))
 
 /***/ }),
 
-/***/ 35:
+/***/ 40:
 /***/ (function(module, exports) {
 
 var g;
@@ -17328,7 +17328,36 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 44:
+/***/ 56:
+/***/ (function(module, exports) {
+
+module.exports = function(module) {
+	if(!module.webpackPolyfill) {
+		module.deprecate = function() {};
+		module.paths = [];
+		// module.parent = undefined by default
+		if(!module.children) module.children = [];
+		Object.defineProperty(module, "loaded", {
+			enumerable: true,
+			get: function() {
+				return module.l;
+			}
+		});
+		Object.defineProperty(module, "id", {
+			enumerable: true,
+			get: function() {
+				return module.i;
+			}
+		});
+		module.webpackPolyfill = 1;
+	}
+	return module;
+};
+
+
+/***/ }),
+
+/***/ 57:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28217,58 +28246,29 @@ return jQuery;
 
 /***/ }),
 
-/***/ 53:
-/***/ (function(module, exports) {
-
-module.exports = function(module) {
-	if(!module.webpackPolyfill) {
-		module.deprecate = function() {};
-		module.paths = [];
-		// module.parent = undefined by default
-		if(!module.children) module.children = [];
-		Object.defineProperty(module, "loaded", {
-			enumerable: true,
-			get: function() {
-				return module.l;
-			}
-		});
-		Object.defineProperty(module, "id", {
-			enumerable: true,
-			get: function() {
-				return module.i;
-			}
-		});
-		module.webpackPolyfill = 1;
-	}
-	return module;
-};
-
-
-/***/ }),
-
-/***/ 576:
+/***/ 798:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
 
-__webpack_require__(21);
+__webpack_require__(24);
 
-__webpack_require__(44);
+__webpack_require__(57);
 
-__webpack_require__(577);
+__webpack_require__(799);
 
-__webpack_require__(579);
+__webpack_require__(801);
 
-__webpack_require__(581);
+__webpack_require__(803);
 
 __webpack_require__(0);
 
-__webpack_require__(8);
+__webpack_require__(9);
 
 /***/ }),
 
-/***/ 577:
+/***/ 799:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44), __webpack_require__(578) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57), __webpack_require__(800) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29030,7 +29030,7 @@ return $.widget;
 
 /***/ }),
 
-/***/ 578:
+/***/ 800:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(44) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
 
 /***/ }),
 
-/***/ 579:
+/***/ 801:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(580);
+__webpack_require__(802);
 module.exports = angular;
 
 
 /***/ }),
 
-/***/ 580:
+/***/ 802:
 /***/ (function(module, exports, __webpack_require__) {
 
 /* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
@@ -65672,20 +65672,20 @@ $provide.value("$locale", {
 })(window);
 
 !window.angular.$$csp().noInlineStyle && window.angular.element(document.head).prepend(window.angular.element('<style>').text('@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}'));
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(44)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(57)))
 
 /***/ }),
 
-/***/ 581:
+/***/ 803:
 /***/ (function(module, exports, __webpack_require__) {
 
-__webpack_require__(582);
+__webpack_require__(804);
 module.exports = 'ngAnimate';
 
 
 /***/ }),
 
-/***/ 582:
+/***/ 804:
 /***/ (function(module, exports) {
 
 /**
@@ -69964,10 +69964,10 @@ angular.module('ngAnimate', [], function initAngularHelpers() {
 
 /***/ }),
 
-/***/ 8:
+/***/ 9:
 /***/ (function(module, exports) {
 
-module.exports = __WEBPACK_EXTERNAL_MODULE_8__;
+module.exports = __WEBPACK_EXTERNAL_MODULE_9__;
 
 /***/ })
 

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

@@ -4,7 +4,7 @@ import * as Layout from '../../../../app-typescript/components/Layouts';
 import * as Form from '../../../../app-typescript/components/Form';
 import * as Nav from '../../../../app-typescript/components/Navigation';
 import { BoxedList, BoxedListItem, BoxedListContentRow } from '../../../../app-typescript/components/Lists';
-import { Spacer } from '../../../../app-typescript/components/Spacer';
+import { Spacer } from '@superdesk/common';
 
 interface IProps {
     children?: React.ReactNode;

package/examples/pages/react/TreeSelect.tsx

@@ -252,7 +252,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     label='TreeSelect Label'
                                     info='Info Message'
                                     searchPlaceholder='Search...'
-                                    getBackgroundColor={(item: any) => item.bgColor} 
+                                    getBackgroundColor={(item: any) => item.bgColor}
                                     valueTemplate={(item, Wrapper) => {
                                         return (
                                             <Wrapper backgroundColor={item.bgColor}>
@@ -278,7 +278,65 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             label='TreeSelect Label'
                             info='Info Message'
                             searchPlaceholder='Search...'
-                            getBackgroundColor={(item: any) => item.bgColor} 
+                            getBackgroundColor={(item: any) => item.bgColor}
+                            valueTemplate={(item, Wrapper) => {
+                                return (
+                                    <Wrapper backgroundColor={item.bgColor}>
+                                        <span>{item.name}</span>
+                                    </Wrapper>
+                                );
+                            }}
+                            onChange={(e) => false}
+                        />
+                    `}</Markup.ReactMarkupCode>
+
+                </Markup.ReactMarkup>
+
+                <p className='docs-page__paragraph'>Sortable mode in TreeSelect.</p>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className='docs-page__content-row docs-page__content-row--no-margin'>
+                            <div className='form__row'>
+                                <TreeSelect
+                                    kind='synchronous'
+                                    value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
+                                    getOptions={() => options}
+                                    getId={(item) => item.name}
+                                    getLabel={(item) => item.name}
+                                    selectBranchWithChildren
+                                    allowMultiple
+                                    sortable
+                                    label='TreeSelect Label'
+                                    info='Info Message'
+                                    searchPlaceholder='Search...'
+                                    getBackgroundColor={(item: any) => item.bgColor}
+                                    valueTemplate={(item, Wrapper) => {
+                                        return (
+                                            <Wrapper backgroundColor={item.bgColor}>
+                                                <span>{item.name}</span>
+                                            </Wrapper>
+                                        );
+                                    }}
+                                    onChange={(e) => false}
+                                />
+                            </div>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+
+                    <Markup.ReactMarkupCode>{`
+                        <TreeSelect
+                            kind='synchronous'
+                            value={[{name: 'Category1'}]}
+                            getOptions={() => options}
+                            getId={(item) => item.name}
+                            getLabel={(item) => item.name}
+                            selectBranchWithChildren
+                            allowMultiple
+                            sortable
+                            label='TreeSelect Label'
+                            info='Info Message'
+                            searchPlaceholder='Search...'
+                            getBackgroundColor={(item: any) => item.bgColor}
                             valueTemplate={(item, Wrapper) => {
                                 return (
                                     <Wrapper backgroundColor={item.bgColor}>
@@ -401,6 +459,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <Prop name='loading' isRequired={false} type='boolean' default='false' description='Adds a loading indicator in dropdown.'/>
                     <Prop name='allowMultiple' isRequired={false} type='boolean' default='/' description='Enable multi-select mode.'/>
                     <Prop name='singleLevelSearch' isRequired={false} type='boolean' default='/' description='Limit search to only the level that is displayed.'/>
+                    <Prop name='sortable' isRequired={false} type='boolean' default='/' description='Enable drag & drop functionality.'/>
                     <Prop name='placeholder' isRequired={false} type='string' default='/' description='Placeholder of component in single select mode.'/>
                     <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.'/>
@@ -409,7 +468,6 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                     <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='Label of component.' />
                     <Prop name='inlineLabel' isRequired={false} type='boolean' default='false' description='Position labels as inline.' />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -92,6 +92,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.4.0",
+    "@superdesk/common": "0.0.28",
     "@superdesk/primereact": "^5.0.2-12",
     "@superdesk/react-resizable-panels": "0.0.39",
     "@types/enzyme-adapter-react-16": "^1.0.6",

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { IInputWrapper } from '../Form/InputWrapper';
+import { DropResult } from "react-beautiful-dnd";
 interface IState<T> {
     value: Array<T>;
     options: Array<ITreeNode<T>>;
@@ -25,7 +26,10 @@ interface IPropsBase<T> extends IInputWrapper {
     singleLevelSearch?: boolean;
     placeholder?: string;
     searchPlaceholder?: string;
+    noResultsFoundMessage?: string;
+    dropdownInitiallyOpen?: boolean;
     zIndex?: number;
+    sortable?: boolean;
     'data-test-id'?: string;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -83,6 +87,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private debounceFn;
     private ICancelFn;
     handleDebounce(): void;
+    onDragEnd(result: DropResult): void;
     render(): JSX.Element;
 }
 export {};

package/react/components/TreeSelect/TreeSelect.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -65,6 +76,13 @@ var TreeSelectPill_1 = require("./TreeSelectPill");
 var TreeSelectItem_1 = require("./TreeSelectItem");
 var KeyboardNavigation_1 = require("./KeyboardNavigation");
 var WithPortal_1 = require("../WithPortal");
+var react_beautiful_dnd_1 = require("react-beautiful-dnd");
+var reorder = function (list, startIndex, endIndex) {
+    var result = Array.from(list);
+    var removed = result.splice(startIndex, 1)[0];
+    result.splice(endIndex, 0, removed);
+    return result;
+};
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -120,6 +138,9 @@ var TreeSelect = /** @class */ (function (_super) {
             document.addEventListener("mousedown", _this.onMouseDown);
             document.addEventListener("keydown", _this.onKeyDown);
             document.addEventListener("keydown", _this.onPressEsc);
+            if (_this.props.dropdownInitiallyOpen) {
+                _this.setState({ openDropdown: true });
+            }
         };
         _this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
         _this.state = {
@@ -155,6 +176,7 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.openDropdownRef = React.createRef();
         _this.treeSelectRef = React.createRef();
         _this.popperInstance = null;
+        _this.onDragEnd = _this.onDragEnd.bind(_this);
         return _this;
     }
     TreeSelect.prototype.componentWillUnmount = function () {
@@ -398,6 +420,7 @@ var TreeSelect = /** @class */ (function (_super) {
     };
     TreeSelect.prototype.filteredItem = function (arr) {
         var _this = this;
+        var _a;
         if (this.props.kind === 'synchronous') {
             var filteredArr = arr.filter(function (item) {
                 if (_this.state.searchFieldValue) {
@@ -429,17 +452,22 @@ var TreeSelect = /** @class */ (function (_super) {
             }
         }
         else if (this.props.kind === 'asynchronous') {
-            return this.state.options.map(function (item, i) {
-                var selectedItem = _this.state.value.some(function (obj) {
-                    return _this.props.getId(obj) === _this.props.getId(item.value);
+            if (this.state.options.length > 0) {
+                return this.state.options.map(function (item, i) {
+                    var selectedItem = _this.state.value.some(function (obj) {
+                        return _this.props.getId(obj) === _this.props.getId(item.value);
+                    });
+                    return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
+                            _this.handleValue(event, item);
+                        } },
+                        React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
+                            ? _this.props.optionTemplate(item.value)
+                            : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
                 });
-                return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
-                        _this.handleValue(event, item);
-                    } },
-                    React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
-                        ? _this.props.optionTemplate(item.value)
-                        : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
-            });
+            }
+            else {
+                return React.createElement("li", { className: "suggestion-item--nothing-found" }, (_a = this.props.noResultsFoundMessage) !== null && _a !== void 0 ? _a : 'Nothing found');
+            }
         }
         else {
             return;
@@ -481,17 +509,26 @@ var TreeSelect = /** @class */ (function (_super) {
         this.setState({ options: [] });
         if (this.props.kind === 'asynchronous') {
             if (this.state.searchFieldValue) {
-                this.setState({
-                    loading: true,
-                });
                 this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, function (items) {
                     var _a;
                     _this.setState({ options: items, loading: false });
                     (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
                 });
             }
+            else {
+                this.setState({ options: this.state.firstBranchOptions, loading: false });
+            }
         }
     };
+    TreeSelect.prototype.onDragEnd = function (result) {
+        if (!result.destination) {
+            return;
+        }
+        var value = reorder(this.state.value, result.source.index, result.destination.index);
+        this.setState({
+            value: value,
+        });
+    };
     TreeSelect.prototype.render = function () {
         var _this = this;
         var _a, _b;
@@ -506,6 +543,27 @@ var TreeSelect = /** @class */ (function (_super) {
                         getBorderColor: this.props.getBorderColor,
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
+        var ListWrapper = this.props.sortable
+            ? function (_a) {
+                var children = _a.children;
+                return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: _this.onDragEnd },
+                    React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable", direction: "horizontal" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: "tags-input__tag-list", ref: provided.innerRef }, provided.droppableProps),
+                        children,
+                        provided.placeholder)); })));
+            }
+            : function (_a) {
+                var children = _a.children;
+                return React.createElement("ul", { className: "tags-input__tag-list" }, children);
+            };
+        var ItemWrapper = this.props.sortable
+            ? function (_a) {
+                var children = _a.children, itemId = _a.itemId, i = _a.i;
+                return (React.createElement(react_beautiful_dnd_1.Draggable, { draggableId: itemId, index: i }, function (provided2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps), children)); }));
+            }
+            : function (_a) {
+                var children = _a.children;
+                return React.createElement(React.Fragment, null, children);
+            };
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
@@ -520,12 +578,13 @@ var TreeSelect = /** @class */ (function (_super) {
                                 }
                             }, "data-test-id": "open-popover" },
                             React.createElement("i", { className: "icon-plus-large" })),
-                    React.createElement("ul", { className: "tags-input__tag-list" }, this.state.value.map(function (item, i) {
+                    React.createElement(ListWrapper, null, this.state.value.map(function (item, i) {
                         var Wrapper = function (_a) {
                             var backgroundColor = _a.backgroundColor, children = _a.children;
-                            return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor }, children));
+                            return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor, draggable: _this.props.sortable }, children));
                         };
-                        return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                        var itemId = _this.props.getId(item);
+                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.props.valueTemplate
                             ? _this.props.valueTemplate(item, Wrapper)
                             : (React.createElement(Wrapper, null,
                                 React.createElement("span", null, _this.props.getLabel(item))))));
@@ -588,7 +647,11 @@ var TreeSelect = /** @class */ (function (_super) {
                                         if (_this.ICancelFn) {
                                             _this.ICancelFn();
                                         }
-                                        _this.setState({ searchFieldValue: event.target.value, options: [] });
+                                        _this.setState({
+                                            searchFieldValue: event.target.value,
+                                            options: [],
+                                            loading: true,
+                                        });
                                         (_b = _this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
                                         _this.debounceFn();
                                     }

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

@@ -7,6 +7,7 @@ interface IProps<T> {
     onRemove(): void;
     valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
     getBackgroundColor?(item: T): string;
+    draggable?: boolean;
 }
 export declare class TreeSelectPill<T> extends React.Component<IProps<T>> {
     render(): JSX.Element;

package/react/components/TreeSelect/TreeSelectPill.js

@@ -37,9 +37,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeSelectPill = void 0;
+var classnames_1 = __importDefault(require("classnames"));
 var React = __importStar(require("react"));
+var DragHandle_1 = require("../DragHandle");
 var Icon_1 = require("../Icon");
 var Label_1 = require("../Label");
 var TreeSelectPill = /** @class */ (function (_super) {
@@ -49,12 +54,15 @@ var TreeSelectPill = /** @class */ (function (_super) {
     }
     TreeSelectPill.prototype.render = function () {
         var _this = this;
-        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.props.disabled)
-                && _this.props.onRemove(); }, style: this.props.valueTemplate
+        var classes = (0, classnames_1.default)('tags-input__tag-item tags-input__tag-item--multi-select', {
+            'tags-input__tag-item--readonly': this.props.readOnly,
+            'tags-input__tag-item--draggable': this.props.draggable,
+        });
+        return (React.createElement("li", { className: classes, style: this.props.valueTemplate
                 ? { backgroundColor: this.props.backgroundColor }
                 : this.props.getBackgroundColor
                     && { backgroundColor: this.props.getBackgroundColor(this.props.item) }, "data-test-id": "item" },
+            this.props.draggable && (React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: '3', dotRows: '4' })),
             React.createElement("span", { className: "tags-input__helper-box", style: {
                     color: this.props.backgroundColor
                         ? (0, Label_1.getTextColor)(this.props.backgroundColor)
@@ -63,7 +71,8 @@ var TreeSelectPill = /** @class */ (function (_super) {
                 } },
                 this.props.children,
                 !this.props.readOnly
-                    && React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "remove" },
+                    && React.createElement("button", { className: "tags-input__remove-button", "data-test-id": "remove", onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
+                            && _this.props.onRemove(); } },
                         React.createElement(Icon_1.Icon, { name: "close-small" })))));
     };
     return TreeSelectPill;

package/react/components/avatar/avatar-group.js

@@ -59,7 +59,7 @@ var avatar_1 = require("./avatar");
 var avatar_wrapper_1 = require("./avatar-wrapper");
 var avatar_number_1 = require("./avatar-number");
 var avatar_placeholder_1 = require("./avatar-placeholder");
-var Spacer_1 = require("../Spacer");
+var common_1 = require("@superdesk/common");
 var WithPopover_1 = require("../WithPopover");
 function isAvatar(item) {
     return item['kind'] == null;
@@ -106,7 +106,7 @@ var AvatarGroup = /** @class */ (function (_super) {
         var someHaveDisplayName = this.props.items.some(function (item) { return isAvatar(item) && item.displayName.length > 0; });
         return (React.createElement(WithPopover_1.WithPopover, { zIndex: (_a = this.props.zIndex) !== null && _a !== void 0 ? _a : 101, placement: 'bottom-end', component: function () { return (React.createElement("div", { className: "avatar-popup" }, _this.props.items.map(function (item, index) {
                 return (someHaveDisplayName
-                    ? React.createElement(Spacer_1.Spacer, { h: true, alignItems: 'center', gap: '16', noGrow: true, key: index },
+                    ? React.createElement(common_1.Spacer, { h: true, alignItems: 'center', gap: '16', noGrow: true, key: index },
                         isAvatar(item)
                             && item.displayName,
                         isAvatar(item)

package/react/index.d.ts

@@ -91,7 +91,7 @@ export { ContentListItem } from './components/Lists/ContentList';
 export { MultiSelect } from './components/MultiSelect';
 export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
-export { Spacer, SpacerBlock } from './components/Spacer';
+export { Spacer, SpacerBlock } from '@superdesk/common';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';

package/react/index.js

@@ -220,9 +220,9 @@ var ResizablePanels_1 = require("./components/ResizablePanels");
 Object.defineProperty(exports, "ResizablePanels", { enumerable: true, get: function () { return ResizablePanels_1.ResizablePanels; } });
 var WithPopover_1 = require("./components/WithPopover");
 Object.defineProperty(exports, "WithPopover", { enumerable: true, get: function () { return WithPopover_1.WithPopover; } });
-var Spacer_1 = require("./components/Spacer");
-Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return Spacer_1.Spacer; } });
-Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return Spacer_1.SpacerBlock; } });
+var common_1 = require("@superdesk/common");
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return common_1.Spacer; } });
+Object.defineProperty(exports, "SpacerBlock", { enumerable: true, get: function () { return common_1.SpacerBlock; } });
 var ResizeObserverComponent_1 = require("./components/ResizeObserverComponent");
 Object.defineProperty(exports, "ResizeObserverComponent", { enumerable: true, get: function () { return ResizeObserverComponent_1.ResizeObserverComponent; } });
 var DragHandleDots_1 = require("./components/DragHandleDots");