superdesk-ui-framework 3.0.72 → 3.0.74

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

@@ -143,6 +143,7 @@ tags-input,
                     display: flex;
                     flex-direction: row;
                     align-items: center;
+                    gap: var(--space--2);
 
                     span {
                         flex-grow: 1;
@@ -467,6 +468,7 @@ tags-input,
     .tags-input__helper-box {
         display: flex;
         align-items: center;
+        gap: var(--space--2);
     }
 }
 
@@ -661,6 +663,7 @@ tags-input,
         display: flex;
         width: 100%;
         align-items: center;
+        gap: var(--space--2);
     }
 
     .tags-input__remove-button {

package/app/styles/components/_sd-searchbar.scss

@@ -89,13 +89,28 @@
             padding-inline: var(--space--1-5);
         }
     }
+    .sd-input {
+        height: 100%;
+        border-inline-end: 1px solid var(--color-border-line--medium);
+        z-index: 1;
+        position: relative;
+        background-color: var(--sd-colour-bg__searchbar);
+        border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+        transition: box-shadow 0.2s ease-out;
+        .sd-input__input {
+            background-color: transparent;
+            border: none;
+        }
+    }
     &.sd-searchbar--focused,
     &:focus-within {
-        .dropdown {
+        .dropdown,
+        .sd-input {
             border-inline-end-color: var(--sd-colour-interactive--alpha-50);
             box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10);
         }
     }
+
 }
 
 .sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {

package/app-typescript/components/ListItemLoader.tsx

@@ -4,7 +4,7 @@ import { Skeleton } from './Skeleton';
 export class ListItemLoader extends React.Component<{}> {
     render() {
         return (
-            <div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover">
+            <div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover" data-test-id="list-item-placeholder">
                 <div className="sd-list-item__border"></div>
                 <div className="sd-list-item__column">
                     <Skeleton shape="circle" size="2rem" />

package/app-typescript/components/Lists/TableList.tsx

@@ -28,6 +28,7 @@ export interface IPropsArrayItem {
     hexColor?: string;
     locked?: boolean;
     positionLocked?: boolean;
+    selected?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
 }
@@ -154,6 +155,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                                                             center={item.center}
                                                             end={item.end}
                                                             action={item.action}
+                                                            selected={item.selected}
                                                             onClick={
                                                                 item.onClick
                                                                     ? item.onClick
@@ -204,6 +206,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                                 center={item.center}
                                 end={item.end}
                                 action={item.action}
+                                selected={item.selected}
                                 onClick={
                                     item.onClick
                                         ? item.onClick
@@ -264,6 +267,7 @@ export interface IPropsItem {
     showDragHandle?: 'always' | 'onHover' | 'none';
     locked?: boolean;
     positionLocked?: boolean;
+    selected?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
     onSelect?(): void;
@@ -287,6 +291,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
 
     render() {
         let classes = classNames('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,

package/app-typescript/components/SingleAndDoubleClickFunction.tsx

@@ -5,7 +5,7 @@ export interface ICallbacks {
 
 export function setupSingleAndDoubleClick(): (event: React.MouseEvent, cb: ICallbacks) => void {
     let timer: number | undefined;
-    let delay: number;
+    let delay: number = 250;
 
     return (event, cb: ICallbacks) => {
         clearTimeout(timer);

package/dist/examples.bundle.js

@@ -40989,7 +40989,7 @@ var TableList = /** @class */ (function (_super) {
                                     ? _this.props.itemsDropdown(index)
                                     : []; } })
                             : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                                         ? item.onClick
                                         : undefined, onDoubleClick: item.onDoubleClick
                                         ? item.onDoubleClick
@@ -41003,7 +41003,7 @@ var TableList = /** @class */ (function (_super) {
                                 React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
                 : React.createElement("div", { role: 'list', className: classes },
-                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                             ? item.onClick
                             : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
@@ -41039,6 +41039,7 @@ var TableListItem = /** @class */ (function (_super) {
     TableListItem.prototype.render = function () {
         var _this = this;
         var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,
@@ -61094,7 +61095,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSingleAndDoubleClick = void 0;
 function setupSingleAndDoubleClick() {
     var timer;
-    var delay;
+    var delay = 250;
     return function (event, cb) {
         clearTimeout(timer);
         if (event.nativeEvent.detail === 1) {
@@ -105879,7 +105880,7 @@ var ListItemLoader = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ListItemLoader.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
+        return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
             React.createElement("div", { className: "sd-list-item__border" }),
             React.createElement("div", { className: "sd-list-item__column" },
                 React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
@@ -139810,6 +139811,17 @@ var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(43));
 var index_1 = __webpack_require__(3);
 var FormLabel_1 = __webpack_require__(51);
+var options2 = [
+    {
+        value: { name: 'A long category Category1' },
+    },
+    {
+        value: { name: 'Category2' },
+    },
+    {
+        value: { name: 'Category3' },
+    },
+];
 var TestGround = /** @class */ (function (_super) {
     __extends(TestGround, _super);
     function TestGround(props) {
@@ -139830,6 +139842,7 @@ var TestGround = /** @class */ (function (_super) {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            treeSelectValue: [],
         };
         return _this;
     }
@@ -139872,7 +139885,11 @@ var TestGround = /** @class */ (function (_super) {
                                 { label: 'Action 1', onSelect: function () { return 1; } },
                                 { label: 'Action 2', onSelect: function () { return 1; } },
                                 { label: 'Action 3', onSelect: function () { return 1; } },
-                            ] }, "Toogle button")),
+                            ] }, "With dropdown")),
+                    React.createElement("hr", null),
+                    React.createElement(index_1.SearchBar, { placeholder: 'Search', boxed: true },
+                        React.createElement(index_1.TreeSelect, { kind: 'synchronous', value: this.state.treeSelectValue, getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, onChange: function () { return false; }, placeholder: 'Select a desk', width: 'medium', inlineLabel: true, labelHidden: true }, "With TreeSelect")),
+                    React.createElement("hr", null),
                     React.createElement("hr", null),
                     React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
                     React.createElement("div", { className: 'sd-pagination' },
@@ -144250,7 +144267,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 693 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.72","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.74","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 694 */

package/dist/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
 interface IProps {
@@ -23,8 +23,21 @@ interface IState {
     date: any;
     time: string;
     modalPlanningTemplates: boolean;
+    treeSelectValue: any;
 }
 
+let options2 = [
+    {
+        value: {name: 'A long category Category1'},
+    },
+    {
+        value: {name: 'Category2'},
+    },
+    {
+        value: {name: 'Category3'},
+    },
+]
+
 export class TestGround extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            treeSelectValue: [],
         }
     }
 
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
                             </BoxedList>
 
                         </Modal>
+
                         <h3 className="docs-page__h3 ">Planning Templates</h3>
                         <SearchBar placeholder='Search' boxed={true}>
                             <Dropdown
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
                                     { label: 'Action 3', onSelect: () => 1 },
                                 ]}
                             >
-                                Toogle button
+                                With dropdown
                             </Dropdown>
                         </SearchBar>
+                        <hr />
+                        <SearchBar placeholder='Search' boxed={true}>
+                            <TreeSelect
+                                kind={'synchronous'}
+                                value={this.state.treeSelectValue}
+                                getOptions={() => options2}
+                                getLabel={(item) => item.name}
+                                getId={(item) => item.name}
+                                onChange={() => false}
+                                placeholder='Select a desk'
+                                width='medium'
+                                inlineLabel
+                                labelHidden
+                            >
+                                With TreeSelect
+                            </TreeSelect>
+                        </SearchBar>
 
+                        <hr />
                         <hr />
 
                         <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>

package/dist/superdesk-ui.bundle.css

@@ -35676,7 +35676,8 @@ tags-input,
         .tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box {
           display: flex;
           flex-direction: row;
-          align-items: center; }
+          align-items: center;
+          gap: var(--space--2); }
           tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span,
           .tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span {
             flex-grow: 1; }
@@ -35911,7 +35912,8 @@ tags-input,
       background-color: rgba(0, 0, 0, 0.1); }
   .tags-input .tags-input__helper-box {
     display: flex;
-    align-items: center; }
+    align-items: center;
+    gap: var(--space--2); }
 
 .autocomplete {
   position: absolute;
@@ -36058,7 +36060,8 @@ tags-input,
   .tags-input__single-item .tags-input__helper-box {
     display: flex;
     width: 100%;
-    align-items: center; }
+    align-items: center;
+    gap: var(--space--2); }
   .tags-input__single-item .tags-input__remove-button {
     display: flex;
     align-items: center;
@@ -43435,7 +43438,20 @@ a.text-link {
     .sd-searchbar--boxed .dropdown .dropdown__toggle {
       height: 100%;
       padding-inline: var(--space--1-5); }
-  .sd-searchbar--boxed.sd-searchbar--focused .dropdown, .sd-searchbar--boxed:focus-within .dropdown {
+  .sd-searchbar--boxed .sd-input {
+    height: 100%;
+    border-inline-end: 1px solid var(--color-border-line--medium);
+    z-index: 1;
+    position: relative;
+    background-color: var(--sd-colour-bg__searchbar);
+    border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+    transition: box-shadow 0.2s ease-out; }
+    .sd-searchbar--boxed .sd-input .sd-input__input {
+      background-color: transparent;
+      border: none; }
+  .sd-searchbar--boxed.sd-searchbar--focused .dropdown,
+  .sd-searchbar--boxed.sd-searchbar--focused .sd-input, .sd-searchbar--boxed:focus-within .dropdown,
+  .sd-searchbar--boxed:focus-within .sd-input {
     border-inline-end-color: var(--sd-colour-interactive--alpha-50);
     box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10); }
 

package/dist/superdesk-ui.bundle.js

@@ -40633,7 +40633,7 @@ var TableList = /** @class */ (function (_super) {
                                     ? _this.props.itemsDropdown(index)
                                     : []; } })
                             : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                                         ? item.onClick
                                         : undefined, onDoubleClick: item.onDoubleClick
                                         ? item.onDoubleClick
@@ -40647,7 +40647,7 @@ var TableList = /** @class */ (function (_super) {
                                 React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
                 : React.createElement("div", { role: 'list', className: classes },
-                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                             ? item.onClick
                             : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
@@ -40683,6 +40683,7 @@ var TableListItem = /** @class */ (function (_super) {
     TableListItem.prototype.render = function () {
         var _this = this;
         var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,
@@ -60738,7 +60739,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSingleAndDoubleClick = void 0;
 function setupSingleAndDoubleClick() {
     var timer;
-    var delay;
+    var delay = 250;
     return function (event, cb) {
         clearTimeout(timer);
         if (event.nativeEvent.detail === 1) {
@@ -105140,7 +105141,7 @@ var ListItemLoader = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ListItemLoader.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
+        return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
             React.createElement("div", { className: "sd-list-item__border" }),
             React.createElement("div", { className: "sd-list-item__column" },
                 React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
 interface IProps {
@@ -23,8 +23,21 @@ interface IState {
     date: any;
     time: string;
     modalPlanningTemplates: boolean;
+    treeSelectValue: any;
 }
 
+let options2 = [
+    {
+        value: {name: 'A long category Category1'},
+    },
+    {
+        value: {name: 'Category2'},
+    },
+    {
+        value: {name: 'Category3'},
+    },
+]
+
 export class TestGround extends React.Component<IProps, IState> {
     constructor(props: IProps) {
         super(props);
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            treeSelectValue: [],
         }
     }
 
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
                             </BoxedList>
 
                         </Modal>
+
                         <h3 className="docs-page__h3 ">Planning Templates</h3>
                         <SearchBar placeholder='Search' boxed={true}>
                             <Dropdown
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
                                     { label: 'Action 3', onSelect: () => 1 },
                                 ]}
                             >
-                                Toogle button
+                                With dropdown
                             </Dropdown>
                         </SearchBar>
+                        <hr />
+                        <SearchBar placeholder='Search' boxed={true}>
+                            <TreeSelect
+                                kind={'synchronous'}
+                                value={this.state.treeSelectValue}
+                                getOptions={() => options2}
+                                getLabel={(item) => item.name}
+                                getId={(item) => item.name}
+                                onChange={() => false}
+                                placeholder='Select a desk'
+                                width='medium'
+                                inlineLabel
+                                labelHidden
+                            >
+                                With TreeSelect
+                            </TreeSelect>
+                        </SearchBar>
 
+                        <hr />
                         <hr />
 
                         <h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.72",
+  "version": "3.0.74",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/ListItemLoader.js

@@ -47,7 +47,7 @@ var ListItemLoader = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ListItemLoader.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
+        return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
             React.createElement("div", { className: "sd-list-item__border" }),
             React.createElement("div", { className: "sd-list-item__column" },
                 React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),

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

@@ -21,6 +21,7 @@ export interface IPropsArrayItem {
     hexColor?: string;
     locked?: boolean;
     positionLocked?: boolean;
+    selected?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
 }
@@ -46,6 +47,7 @@ export interface IPropsItem {
     showDragHandle?: 'always' | 'onHover' | 'none';
     locked?: boolean;
     positionLocked?: boolean;
+    selected?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
     onSelect?(): void;

package/react/components/Lists/TableList.js

@@ -126,7 +126,7 @@ var TableList = /** @class */ (function (_super) {
                                     ? _this.props.itemsDropdown(index)
                                     : []; } })
                             : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                                         ? item.onClick
                                         : undefined, onDoubleClick: item.onDoubleClick
                                         ? item.onDoubleClick
@@ -140,7 +140,7 @@ var TableList = /** @class */ (function (_super) {
                                 React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
                 : React.createElement("div", { role: 'list', className: classes },
-                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                             ? item.onClick
                             : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
@@ -176,6 +176,7 @@ var TableListItem = /** @class */ (function (_super) {
     TableListItem.prototype.render = function () {
         var _this = this;
         var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,

package/react/components/SingleAndDoubleClickFunction.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSingleAndDoubleClick = void 0;
 function setupSingleAndDoubleClick() {
     var timer;
-    var delay;
+    var delay = 250;
     return function (event, cb) {
         clearTimeout(timer);
         if (event.nativeEvent.detail === 1) {