superdesk-ui-framework 3.1.3 → 3.1.5

package/app/fonts/sd_big-icons.svg

@@ -7,6 +7,16 @@
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<<<<<<< HEAD
+<glyph unicode="&#xe600;" glyph-name="dashboard" d="M275.692 78.769h157.538v236.308h157.538v-236.308h157.538v315.077h157.538l-362.575 381.44c-7.632 7.626-18.172 12.342-29.814 12.342s-22.182-4.716-29.814-12.343v0l-365.489-381.44h157.538v-315.077z" />
+<glyph unicode="&#xe601;" glyph-name="view" d="M512 787.693c-310.863 0-512-354.462-512-354.462s197.474-354.462 512-354.462c292.588 0 512 354.462 512 354.462s-215.788 354.462-512 354.462zM512 196.923c-130.509 0-236.308 105.799-236.308 236.308s105.799 236.308 236.308 236.308c130.509 0 236.308-105.799 236.308-236.308v0c0-130.509-105.799-236.308-236.308-236.308v0zM630.154 433.231c0-65.255-52.899-118.154-118.154-118.154s-118.154 52.899-118.154 118.154c0 65.255 52.899 118.154 118.154 118.154s118.154-52.899 118.154-118.154z" />
+<glyph unicode="&#xe602;" glyph-name="tasks" d="M748.308 787.693v-78.769h-157.538v78.769h-157.538v-78.769h-157.538v78.769h-118.154c-0.297 0.008-0.647 0.013-0.998 0.013-20.504 0-37.192-16.339-37.755-36.707l-0.001-0.052q0-0.985 0-2.009v-672.571c-0.017-0.407-0.026-0.884-0.026-1.363 0-19.223 15.218-34.892 34.264-35.617l0.066-0.002h713.098c0.52-0.026 1.13-0.040 1.743-0.040 20.138 0 36.587 15.793 37.638 35.669l0.004 0.094q0 1.221 0 2.442v673.201c0.021 0.454 0.033 0.987 0.033 1.522 0 19.103-15.112 34.677-34.033 35.419l-0.067 0.002h-123.195zM787.692 157.539h-551.385v472.615h551.385v-472.615zM344.734 866.462h19.456c16.379 0 29.657-13.278 29.657-29.657v-58.841c0-16.379-13.278-29.657-29.657-29.657h-19.456c-16.379 0-29.657 13.278-29.657 29.657v58.841c0 16.379 13.278 29.657 29.657 29.657zM659.81 866.462h19.456c16.379 0 29.657-13.278 29.657-29.657v-58.841c0-16.379-13.278-29.657-29.657-29.657h-19.456c-16.379 0-29.657 13.278-29.657 29.657v58.841c0 16.379 13.278 29.657 29.657 29.657zM433.231 315.077l-77.942 90.585-40.212-41.118 118.154-128.236 275.692 274.747-39.385 40.33z" />
+<glyph unicode="&#xe603;" glyph-name="calendar" d="M787.692 787.693v-78.769h-157.538v78.769h-236.308v-78.769h-157.538v78.769h-118.784c-0.297 0.008-0.647 0.013-0.998 0.013-20.86 0-37.77-16.91-37.77-37.77 0-0.351 0.005-0.701 0.014-1.049l-0.001 0.051v-672.61c-0.015-0.388-0.024-0.843-0.024-1.3 0-19.624 15.859-35.544 35.461-35.643h791.403c0.577-0.032 1.253-0.050 1.933-0.050 20.816 0 37.691 16.875 37.691 37.691 0 0.184-0.001 0.367-0.004 0.55v-0.028 673.201c0.015 0.388 0.024 0.843 0.024 1.3 0 19.624-15.859 35.544-35.461 35.643h-122.101zM866.462 118.154h-708.923v472.615h708.923v-472.615zM319.37 748.308h-8.586c-19.372 0.022-35.069 15.72-35.092 35.090v47.972c0.067 19.395 15.805 35.092 35.21 35.092 0.083 0 0.166 0 0.249-0.001h8.612c19.206-0.2 34.698-15.816 34.698-35.051 0-0.014 0-0.029 0-0.043v0.002-48.010c-0.089-19.378-15.819-35.053-35.209-35.053-0.083 0-0.166 0-0.249 0.001h0.367zM713.216 748.308h-8.625c-19.355 0.045-35.030 15.734-35.052 35.090v47.972c0.067 19.395 15.805 35.092 35.21 35.092 0.083 0 0.166 0 0.249-0.001h8.612c19.206-0.2 34.698-15.816 34.698-35.051 0-0.014 0-0.029 0-0.043v0.002-48.010c-0.089-19.378-15.819-35.053-35.209-35.053-0.083 0-0.166 0-0.249 0.001h0.367zM236.308 512h196.923v-196.923h-196.923v196.923z" />
+<glyph unicode="&#xe604;" glyph-name="marked-star" d="M512 827.077l107.087-266.398 286.759-19.417-220.554-184.084 70.105-278.41-243.397 152.655-243.397-152.655 70.105 278.41-220.554 184.084 286.759 19.417 107.087 266.398z" />
+<glyph unicode="&#xe605;" glyph-name="archive" d="M787.692 748.308h-551.385v-275.692h551.385v275.692zM590.769 590.769h-157.538v39.385h157.538v-39.385zM787.692 433.231h-551.385v-275.692h551.385v275.692zM590.769 275.693h-157.538v39.385h157.538v-39.385zM866.462 866.462h-708.923c-21.752 0-39.385-17.633-39.385-39.385v0-748.308c0-21.752 17.633-39.385 39.385-39.385v0h708.923c21.752 0 39.385 17.633 39.385 39.385v0 748.308c0 21.752-17.633 39.385-39.385 39.385v0zM827.077 748.308v-630.154h-630.154v669.538h630.154v-39.385zM236.308 39.385h157.538v-39.385h-157.538v39.385zM630.154 39.385h157.538v-39.385h-157.538v39.385z" />
+<glyph unicode="&#xe606;" glyph-name="spike" d="M236.308 630.154v-512c0.134-43.449 35.32-78.635 78.756-78.769h393.859c43.449 0.134 78.635 35.32 78.769 78.756v512.013h-551.385zM393.846 118.154h-78.769v433.231h78.769v-433.231zM551.385 118.154h-78.769v433.231h78.769v-433.231zM708.923 118.154h-78.769v433.231h78.769v-433.231zM787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005z" />
+<glyph unicode="&#xe607;" glyph-name="unspike" d="M787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005zM293.022 630.154c-0.007 0-0.016 0-0.024 0-3.959 0-7.168-3.209-7.168-7.168 0-1.985 0.807-3.782 2.111-5.080v0l66.521-66.521h39.385v-39.385l78.769-78.769v118.154h78.769v-196.923l78.769-78.769v275.692h78.769v-354.462l64.866-64.866c1.474-1.467 3.506-2.373 5.75-2.373 4.503 0 8.153 3.65 8.153 8.153 0 0.004 0 0.007 0 0.011v-0.001 492.308h-494.671zM776.35 27.373l-591.518 591.478c-7.056 7.055-16.803 11.419-27.569 11.419s-20.513-4.364-27.569-11.419l-0.197-0.197c-7.055-7.056-11.419-16.803-11.419-27.569s4.364-20.513 11.419-27.569v0l106.811-106.654v-338.708c0.134-43.449 35.32-78.635 78.756-78.769h338.721l67.348-67.348c7.056-7.055 16.803-11.419 27.569-11.419s20.513 4.364 27.569 11.419l0.197 0.197c7.020 7.050 11.36 16.773 11.36 27.51 0 10.796-4.387 20.567-11.477 27.627l-0.001 0.001zM315.077 118.154v259.938l78.769-78.769v-181.169h-78.769zM551.385 118.154h-78.769v102.4l78.769-78.769v-23.631z" />
+=======
 <glyph unicode="&#xe600;" glyph-name="unspike" d="M787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005zM293.022 630.154c-0.007 0-0.016 0-0.024 0-3.959 0-7.168-3.209-7.168-7.168 0-1.985 0.807-3.782 2.111-5.080v0l66.521-66.521h39.385v-39.385l78.769-78.769v118.154h78.769v-196.923l78.769-78.769v275.692h78.769v-354.462l64.866-64.866c1.474-1.467 3.506-2.373 5.75-2.373 4.503 0 8.153 3.65 8.153 8.153 0 0.004 0 0.007 0 0.011v-0.001 492.308h-494.671zM776.35 27.373l-591.518 591.478c-7.056 7.055-16.803 11.419-27.569 11.419s-20.513-4.364-27.569-11.419l-0.197-0.197c-7.055-7.056-11.419-16.803-11.419-27.569s4.364-20.513 11.419-27.569v0l106.811-106.654v-338.708c0.134-43.449 35.32-78.635 78.756-78.769h338.721l67.348-67.348c7.056-7.055 16.803-11.419 27.569-11.419s20.513 4.364 27.569 11.419l0.197 0.197c7.020 7.050 11.36 16.773 11.36 27.51 0 10.796-4.387 20.567-11.477 27.627l-0.001 0.001zM315.077 118.154v259.938l78.769-78.769v-181.169h-78.769zM551.385 118.154h-78.769v102.4l78.769-78.769v-23.631z" />
 <glyph unicode="&#xe601;" glyph-name="dashboard" d="M275.692 78.769h157.538v236.308h157.538v-236.308h157.538v315.077h157.538l-362.575 381.44c-7.632 7.626-18.172 12.342-29.814 12.342s-22.182-4.716-29.814-12.343v0l-365.489-381.44h157.538v-315.077z" />
 <glyph unicode="&#xe602;" glyph-name="view" d="M512 787.693c-310.863 0-512-354.462-512-354.462s197.474-354.462 512-354.462c292.588 0 512 354.462 512 354.462s-215.788 354.462-512 354.462zM512 196.923c-130.509 0-236.308 105.799-236.308 236.308s105.799 236.308 236.308 236.308c130.509 0 236.308-105.799 236.308-236.308v0c0-130.509-105.799-236.308-236.308-236.308v0zM630.154 433.231c0-65.255-52.899-118.154-118.154-118.154s-118.154 52.899-118.154 118.154c0 65.255 52.899 118.154 118.154 118.154s118.154-52.899 118.154-118.154z" />
@@ -15,6 +25,7 @@
 <glyph unicode="&#xe605;" glyph-name="marked-star" d="M512 827.077l107.087-266.398 286.759-19.417-220.554-184.084 70.105-278.41-243.397 152.655-243.397-152.655 70.105 278.41-220.554 184.084 286.759 19.417 107.087 266.398z" />
 <glyph unicode="&#xe606;" glyph-name="archive" d="M787.692 748.308h-551.385v-275.692h551.385v275.692zM590.769 590.769h-157.538v39.385h157.538v-39.385zM787.692 433.231h-551.385v-275.692h551.385v275.692zM590.769 275.693h-157.538v39.385h157.538v-39.385zM866.462 866.462h-708.923c-21.752 0-39.385-17.633-39.385-39.385v0-748.308c0-21.752 17.633-39.385 39.385-39.385v0h708.923c21.752 0 39.385 17.633 39.385 39.385v0 748.308c0 21.752-17.633 39.385-39.385 39.385v0zM827.077 748.308v-630.154h-630.154v669.538h630.154v-39.385zM236.308 39.385h157.538v-39.385h-157.538v39.385zM630.154 39.385h157.538v-39.385h-157.538v39.385z" />
 <glyph unicode="&#xe607;" glyph-name="spike" d="M236.308 630.154v-512c0.134-43.449 35.32-78.635 78.756-78.769h393.859c43.449 0.134 78.635 35.32 78.769 78.756v512.013h-551.385zM393.846 118.154h-78.769v433.231h78.769v-433.231zM551.385 118.154h-78.769v433.231h78.769v-433.231zM708.923 118.154h-78.769v433.231h78.769v-433.231zM787.692 748.308h-165.415c-16.187 46.218-59.431 78.769-110.277 78.769s-94.089-32.552-110.027-77.952l-0.25-0.817h-165.415c-0.668 0.043-1.448 0.067-2.233 0.067-20.555 0-37.218-16.663-37.218-37.218 0-0.786 0.024-1.566 0.072-2.339l-0.005 0.106v-39.385h630.154v39.385c0.043 0.668 0.067 1.448 0.067 2.233 0 20.555-16.663 37.218-37.218 37.218-0.786 0-1.566-0.024-2.339-0.072l0.106 0.005z" />
+>>>>>>> a08c0d67188170f83c5a6467642c6a78cfde8f31
 <glyph unicode="&#xe608;" glyph-name="personal" d="M945.231-0h-196.923c-21.752 0-39.385 17.633-39.385 39.385v0 157.538c0 21.752 17.633 39.385 39.385 39.385v0h196.923c0.346 0.011 0.752 0.018 1.16 0.018 21.121 0 38.242-17.122 38.242-38.242 0-0.408-0.006-0.814-0.019-1.219l0.001 0.059v-157.538c0.043-0.668 0.067-1.448 0.067-2.233 0-20.555-16.663-37.218-37.218-37.218-0.786 0-1.566 0.024-2.339 0.072l0.106-0.005zM708.923 236.308v118.154s1.221 78.769 39.385 78.769c15.754 8.192 78.769 9.886 78.769 39.385 0 195.764-158.698 354.462-354.462 354.462s-354.462-158.698-354.462-354.462v0c-0.058-2.458-0.090-5.353-0.090-8.257 0-125.955 61.699-237.5 156.523-306.059l1.105-0.761v78.769c0.332 43.369 35.4 78.437 78.737 78.769h260.325c0.165 0.002 0.359 0.003 0.554 0.003 29.952 0 54.233-24.281 54.233-54.233 0-0.195-0.001-0.39-0.003-0.584v0.030zM477.538 354.462c-77.448 5.673-138.133 69.901-138.133 148.303 0 3.249 0.104 6.474 0.31 9.672l-0.022-0.436c-0.183 2.762-0.287 5.987-0.287 9.236 0 78.402 60.685 142.63 137.646 148.274l0.487 0.029c77.465-5.8 138.119-70.077 138.119-148.522 0-3.172-0.099-6.321-0.295-9.444l0.021 0.427c0.21-2.952 0.33-6.397 0.33-9.87 0-78.614-61.323-142.905-138.743-147.648l-0.417-0.020h0.985zM846.769 433.231c-53.327 0-98.462-41.236-98.462-118.154v-118.154h196.923v118.154c0 78.769-47.262 118.154-98.462 118.154zM905.846 236.308h-118.154v78.769c0 34.304 9.019 78.769 59.077 78.769 60.298 0 59.077-43.323 59.077-78.769v-78.769z" />
 <glyph unicode="&#xe609;" glyph-name="global-search" d="M78.769 787.693h866.462v-39.385h-866.462zM78.769 669.539h196.923v-39.385h-196.923zM748.308 669.539h196.923v-39.385h-196.923zM827.077 551.385h118.154v-39.385h-118.154zM78.769 551.385h118.154v-39.385h-118.154zM78.769 433.231h118.154v-39.385h-118.154zM866.462 433.231h78.769v-39.385h-78.769zM590.769 315.077h-157.538l-39.385 78.769h236.308l-39.385-78.769zM630.154 472.616h-236.308l39.385 78.769h157.538l39.385-78.769zM512 708.923c-152.261 0-275.692-123.432-275.692-275.692s123.432-275.692 275.692-275.692c152.261 0 275.692 123.432 275.692 275.692v0c0 152.261-123.432 275.692-275.692 275.692v0zM512 236.308c-108.758 0-196.923 88.165-196.923 196.923s88.165 196.923 196.923 196.923c108.758 0 196.923-88.165 196.923-196.923v0c0-108.758-88.165-196.923-196.923-196.923v0zM708.923 315.077l-78.769-78.769 236.308-236.308c0.094 0 0.205-0.001 0.316-0.001 43.218 0 78.275 34.946 78.453 78.123v0.647z" />
 <glyph unicode="&#xe60a;" glyph-name="analytics" d="M433.231 787.693h157.538v-708.923h-157.538v708.923zM196.923 393.846h157.538v-315.077h-157.538v315.077zM669.538 551.385h157.538v-472.615h-157.538v472.615z" />

package/app/styles/_sd-tag-input.scss

@@ -82,7 +82,7 @@ tags-input,
             }
 
             &:hover {
-                cursor: pointer;
+                cursor: default;
             }
             .tags-input__remove-button {
                 height: 1.8rem;

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -13,6 +13,15 @@ import {TreeSelectPill} from './TreeSelectPill';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelectItem';
 import {keyboardNavigation} from './KeyboardNavigation';
 import {WithPortal} from '../WithPortal';
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+
+const reorder = (list: Array<any>, startIndex: number, endIndex: number) => {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+
+    return result;
+};
 
 interface IState<T> {
     value: Array<T>;
@@ -42,7 +51,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;
@@ -112,7 +124,6 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
         this.onPressEsc = this.onPressEsc.bind(this);
-
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.inputRef = React.createRef();
@@ -120,6 +131,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.openDropdownRef = React.createRef();
         this.treeSelectRef = React.createRef();
         this.popperInstance = null;
+        this.onDragEnd = this.onDragEnd.bind(this);
     }
 
     inputFocus = () => {
@@ -185,6 +197,10 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         document.addEventListener("mousedown", this.onMouseDown);
         document.addEventListener("keydown", this.onKeyDown);
         document.addEventListener("keydown", this.onPressEsc);
+
+        if (this.props.dropdownInitiallyOpen) {
+            this.setState({openDropdown: true});
+        }
     }
 
     componentWillUnmount(): void {
@@ -501,34 +517,39 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 });
             }
         } else if (this.props.kind === 'asynchronous') {
-            return this.state.options.map((item, i) => {
-                let selectedItem = this.state.value.some((obj) =>
-                    this.props.getId(obj) === this.props.getId(item.value),
-                );
+            if (this.state.options.length > 0) {
+                return this.state.options.map((item, i) => {
+                    let selectedItem = this.state.value.some((obj) =>
+                        this.props.getId(obj) === this.props.getId(item.value),
+                    );
 
-                return (
-                    <li
-                        key={i}
-                        className='suggestion-item suggestion-item--multi-select'
-                        onClick={(event) => {
-                            this.handleValue(event, item);
-                        }}
-                    >
-                        <button className="suggestion-item--btn" data-test-id="option">
-                            {this.props.optionTemplate
-                                ? this.props.optionTemplate(item.value)
-                                : (
-                                    <span
-                                        className={selectedItem ? 'suggestion-item--selected' : undefined}
-                                    >
-                                        {this.props.getLabel(item.value)}
-                                    </span>
-                                )
-                            }
-                        </button>
-                    </li>
-                );
-            });
+                    return (
+                        <li
+                            key={i}
+                            className='suggestion-item suggestion-item--multi-select'
+                            onClick={(event) => {
+                                this.handleValue(event, item);
+                            }}
+                        >
+                            <button className="suggestion-item--btn" data-test-id="option">
+                                {this.props.optionTemplate
+                                    ? this.props.optionTemplate(item.value)
+                                    : (
+                                        <span
+                                            className={selectedItem ? 'suggestion-item--selected' : undefined}
+                                        >
+                                            {this.props.getLabel(item.value)}
+                                        </span>
+                                    )
+                                }
+                            </button>
+                        </li>
+                    );
+                });
+
+            } else {
+                return <li className="suggestion-item--nothing-found">{this.props.noResultsFoundMessage ?? 'Nothing found'}</li>;
+            }
         } else {
             return;
         }
@@ -591,18 +612,31 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
         if (this.props.kind === 'asynchronous') {
             if (this.state.searchFieldValue) {
-                this.setState({
-                    loading: true,
-                });
-
                 this.ICancelFn = this.props.searchOptions(this.state.searchFieldValue, (items) => {
                     this.setState({options: items, loading: false});
                     this.popperInstance?.update();
                 });
+            } else {
+                this.setState({options: this.state.firstBranchOptions, loading: false});
             }
         }
     }
 
+    onDragEnd(result: DropResult) {
+        if (!result.destination) {
+            return;
+        }
+
+        const value = reorder(
+            this.state.value,
+            result.source.index,
+            result.destination.index,
+        );
+        this.setState({
+            value: value,
+        });
+    }
+
     render() {
         if (this.props.preview) {
             return (
@@ -624,6 +658,43 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             );
         }
 
+        const ListWrapper = this.props.sortable
+            ? ({children}: {children: React.ReactNode}) => (
+                <DragDropContext onDragEnd={this.onDragEnd}>
+                    <Droppable droppableId="droppable" direction="horizontal">
+                        {(provided, _snapshot) => (
+                            <ul
+                                className="tags-input__tag-list"
+                                ref={provided.innerRef}
+                                {...provided.droppableProps}
+                            >
+                                {children}
+                                {provided.placeholder}
+                            </ul>
+                        )}
+                    </Droppable>
+                </DragDropContext>
+            )
+            : ({children}: {children: React.ReactNode}) => <ul className="tags-input__tag-list">{children}</ul>;
+
+        const ItemWrapper = this.props.sortable
+            ? ({children, itemId, i}: {children: React.ReactNode, itemId: string, i: number}) => {
+                return (
+                    <Draggable draggableId={itemId} index={i}>
+                        {(provided2) => (
+                            <div
+                                ref={provided2.innerRef}
+                                {...provided2.draggableProps}
+                                {...provided2.dragHandleProps}
+                            >
+                                {children}
+                            </div>
+                        )}
+                    </Draggable>
+                );
+            }
+            : ({children}: {children: React.ReactNode}) => <React.Fragment>{children}</React.Fragment>;
+
         return (
             <InputWrapper
                 label={this.props.label}
@@ -672,7 +743,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 </button>
                             }
 
-                            <ul className="tags-input__tag-list">
+                            <ListWrapper>
                                 {this.state.value.map((item, i: number) => {
                                     const Wrapper: React.ComponentType<{backgroundColor?: string}>
                                     = ({backgroundColor, children}) => (
@@ -684,25 +755,30 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                             backgroundColor={backgroundColor}
                                             onRemove={() => this.removeClick(i)}
                                             getBackgroundColor={this.props.getBackgroundColor}
+                                            draggable={this.props.sortable}
                                         >
                                             {children}
                                         </TreeSelectPill>
                                     );
 
+                                    const itemId = this.props.getId(item);
+
                                     return (
-                                        <React.Fragment key={i}>
+                                        <ItemWrapper itemId={itemId} key={itemId} i={i}>
                                             {this.props.valueTemplate
                                                 ? this.props.valueTemplate(item, Wrapper)
                                                 : (
                                                     <Wrapper>
-                                                        <span>{this.props.getLabel(item)}</span>
+                                                        <span>
+                                                            {this.props.getLabel(item)}
+                                                        </span>
                                                     </Wrapper>
                                                 )
                                             }
-                                        </React.Fragment>
+                                        </ItemWrapper>
                                     );
                                 })}
-                            </ul>
+                            </ListWrapper>
 
                             {this.state.value.length > 0
                                 ? (this.props.readOnly || this.props.disabled)
@@ -842,7 +918,11 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                                 this.ICancelFn();
                                             }
 
-                                            this.setState({searchFieldValue: event.target.value, options: []});
+                                            this.setState({
+                                                searchFieldValue: event.target.value,
+                                                options: [],
+                                                loading: true,
+                                            });
                                             this.popperInstance?.update();
                                             this.debounceFn();
                                         } else {

package/app-typescript/components/TreeSelect/TreeSelectPill.tsx

@@ -1,4 +1,6 @@
+import classNames from 'classnames';
 import * as React from "react";
+import {DragHandle} from '../DragHandle';
 import {Icon} from "../Icon";
 import {getTextColor} from '../Label';
 
@@ -10,19 +12,19 @@ interface IProps<T> {
     onRemove(): void;
     valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
     getBackgroundColor?(item: T): string;
+    draggable?: boolean;
 }
 
 export class TreeSelectPill<T> extends React.Component<IProps<T>> {
     render() {
+        const classes = classNames('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 (
             <li
-                className={
-                    "tags-input__tag-item tags-input__tag-item--multi-select"
-                    + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')
-                }
-                onClick={() => (!this.props.readOnly && !this.props.disabled)
-                    && this.props.onRemove()
-                }
+                className={classes}
                 style={
                     this.props.valueTemplate
                         ? {backgroundColor: this.props.backgroundColor}
@@ -31,6 +33,9 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
                 }
                 data-test-id="item"
             >
+                {this.props.draggable && (
+                    <DragHandle blank={true} dotsInRow='3' dotRows='4' />
+                )}
                 <span
                     className="tags-input__helper-box"
                     style={{
@@ -43,9 +48,15 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
                     {this.props.children}
 
                     {!this.props.readOnly
-                        && <span className="tags-input__remove-button" data-test-id="remove">
+                        && <button
+                            className="tags-input__remove-button"
+                            data-test-id="remove"
+                            onClick={() => (!this.props.readOnly && !this.props.disabled)
+                                && this.props.onRemove()
+                            }
+                        >
                             <Icon name="close-small"></Icon>
-                        </span>
+                        </button>
                     }
                 </span>
             </li>

package/app-typescript/components/avatar/avatar-group.tsx

@@ -4,7 +4,7 @@ import {Avatar, IPropsAvatar} from './avatar';
 import {AvatarWrapper} from './avatar-wrapper';
 import {AvatarContentNumber} from './avatar-number';
 import {AvatarPlaceholder, IPropsAvatarPlaceholder} from './avatar-placeholder';
-import { Spacer } from '../Spacer';
+import {Spacer} from '@superdesk/common';
 import {WithPopover} from '../WithPopover';
 
 export type IAvatarInGroup = Omit<IPropsAvatar, 'size'>;

package/app-typescript/index.ts

@@ -99,7 +99,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';