superdesk-ui-framework 3.0.71 → 3.0.73

package/app/styles/_big-icon-font.scss

@@ -93,7 +93,7 @@ $sd-big-icon-font: (
     add-to-list: "\e61e",
     text: "\e61f",
     desk: "\e620",
-    chevron-inset-inline-start: "\e621",
+    chevron-left: "\e621",
     chevron-right: "\e622",
     dashboard-alt: "\e623",
     master: "\e624",

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/Dropdown.tsx

@@ -37,6 +37,7 @@ interface IMenu {
     children: React.ReactNode;
     zIndex?: number;
     onChange?(event?: any): void;
+    maxHeight?: number;
 }
 
 const DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
@@ -50,6 +51,7 @@ export const Dropdown = ({
     align,
     zIndex,
     onChange,
+    maxHeight,
 }: IMenu) => {
     const [open, setOpen] = React.useState(false);
     const [change, setChange] = React.useState(false);
@@ -59,6 +61,7 @@ export const Dropdown = ({
     const headerElements = header?.map((el, index) => {
         return each(el, index);
     });
+    const maxHeightStyle = maxHeight ? {maxHeight} : {};
 
     const dropdownElements = items.map((el, index) => {
         return each(el, index);
@@ -143,7 +146,7 @@ export const Dropdown = ({
                 <ul className='dropdown__menu '
                 id={menuID} role='menu'
                 ref={ref}
-                style={{zIndex: zIndex}}>
+                style={{...{zIndex: zIndex, overflowY: 'auto'}, ...maxHeightStyle}}>
                     {dropdownElements}
                 </ul>
             );
@@ -272,12 +275,15 @@ export const Dropdown = ({
                         })()}
                     </div> : null)
                 :
-                <button ref={buttonRef}
-                className=' dropdown__toggle dropdown-toggle'
-                aria-haspopup="menu"
-                tabIndex={0}
-                aria-expanded={open}
-                onClick={toggleDisplay}>
+                <button
+                    style={{whiteSpace: 'nowrap'}}
+                    ref={buttonRef}
+                    className=' dropdown__toggle dropdown-toggle'
+                    aria-haspopup="menu"
+                    tabIndex={0}
+                    aria-expanded={open}
+                    onClick={toggleDisplay}
+                >
                     {children}
                     <span className="dropdown__caret"></span>
                 </button>}

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/dist/examples.bundle.css

@@ -15426,35 +15426,35 @@ doc-react-playground {
 .big-icon--desk:before {
   content: ""; }
 
-.big-icon--chevron-inset-inline-start {
+.big-icon--chevron-left {
   content: ""; }
-  .big-icon--chevron-inset-inline-start.color--default {
+  .big-icon--chevron-left.color--default {
     color: #2c323a; }
-  .big-icon--chevron-inset-inline-start.color--primary {
+  .big-icon--chevron-left.color--primary {
     color: var(--sd-colour-primary) !important; }
-  .big-icon--chevron-inset-inline-start.color--success {
+  .big-icon--chevron-left.color--success {
     color: var(--sd-colour-success) !important; }
-  .big-icon--chevron-inset-inline-start.color--warning {
+  .big-icon--chevron-left.color--warning {
     color: var(--sd-colour-warning) !important; }
-  .big-icon--chevron-inset-inline-start.color--alert {
+  .big-icon--chevron-left.color--alert {
     color: var(--sd-colour-alert) !important; }
-  .big-icon--chevron-inset-inline-start.color--highlight {
+  .big-icon--chevron-left.color--highlight {
     color: var(--sd-colour-highlight) !important; }
-  .big-icon--chevron-inset-inline-start.color--light {
+  .big-icon--chevron-left.color--light {
     color: var(--color-text-lighter) !important; }
-  .big-icon--chevron-inset-inline-start.color--white {
+  .big-icon--chevron-left.color--white {
     color: #e2e5e9 !important; }
-  .big-icon--chevron-inset-inline-start.scale--2x {
+  .big-icon--chevron-left.scale--2x {
     --big-icon-size: 52px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--3x {
+  .big-icon--chevron-left.scale--3x {
     --big-icon-size: 78px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--4x {
+  .big-icon--chevron-left.scale--4x {
     --big-icon-size: 104px
         ; }
 
-.big-icon--chevron-inset-inline-start:before {
+.big-icon--chevron-left:before {
   content: ""; }
 
 .big-icon--chevron-right {

package/dist/examples.bundle.js

@@ -59586,6 +59586,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
 
 "use strict";
 
+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);
@@ -59617,7 +59628,7 @@ var core_1 = __webpack_require__(42);
 var react_id_generator_1 = __webpack_require__(9);
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -59626,6 +59637,7 @@ var Dropdown = function (_a) {
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
+    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
     var dropdownElements = items.map(function (el, index) {
         return each(el, index);
     });
@@ -59669,7 +59681,7 @@ var Dropdown = function (_a) {
                 React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
+            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -59772,7 +59784,7 @@ var Dropdown = function (_a) {
                     return React.cloneElement(children, attrs);
                 })()) : null)
             :
-                React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
                     children,
                     React.createElement("span", { className: "dropdown__caret" })),
         append ?
@@ -105867,7 +105879,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" })),
@@ -135551,7 +135563,7 @@ exports.default = BigIconFontDoc;
 /***/ (function(module, exports) {
 
 // removed by extract-text-webpack-plugin
-module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-inset-inline-start, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
+module.exports = {"icon":"dashboard, view, tasks, calendar, marked-star, archive, spike, unspike, personal, global-search, analytics, web, cog, send-to, info, find-replace, comments, history, package, create-package, add-to-package, fetch, fetch-as, macro, related, minimize, settings, multiedit, export, create-list, add-to-list, text, desk, chevron-left, chevron-right, dashboard-alt, master, attachment, upload-alt, document-default, document-pdf, document-doc, semantics, picture, manage-package, live, live-alt, meta-search, chat, annotation, suggestion, publisher, tag, rundown, checkmark-circle"};
 
 /***/ }),
 /* 645 */
@@ -139798,6 +139810,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) {
@@ -139818,6 +139841,7 @@ var TestGround = /** @class */ (function (_super) {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            treeSelectValue: [],
         };
         return _this;
     }
@@ -139860,7 +139884,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' },
@@ -144238,7 +144266,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 693 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.71","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.73","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

@@ -33496,35 +33496,35 @@ a.label {
 .big-icon--desk:before {
   content: ""; }
 
-.big-icon--chevron-inset-inline-start {
+.big-icon--chevron-left {
   content: ""; }
-  .big-icon--chevron-inset-inline-start.color--default {
+  .big-icon--chevron-left.color--default {
     color: var(--color-icon-default); }
-  .big-icon--chevron-inset-inline-start.color--primary {
+  .big-icon--chevron-left.color--primary {
     color: var(--sd-colour-primary) !important; }
-  .big-icon--chevron-inset-inline-start.color--success {
+  .big-icon--chevron-left.color--success {
     color: var(--sd-colour-success) !important; }
-  .big-icon--chevron-inset-inline-start.color--warning {
+  .big-icon--chevron-left.color--warning {
     color: var(--sd-colour-warning) !important; }
-  .big-icon--chevron-inset-inline-start.color--alert {
+  .big-icon--chevron-left.color--alert {
     color: var(--sd-colour-alert) !important; }
-  .big-icon--chevron-inset-inline-start.color--highlight {
+  .big-icon--chevron-left.color--highlight {
     color: var(--sd-colour-highlight) !important; }
-  .big-icon--chevron-inset-inline-start.color--light {
+  .big-icon--chevron-left.color--light {
     color: var(--color-text-lighter) !important; }
-  .big-icon--chevron-inset-inline-start.color--white {
+  .big-icon--chevron-left.color--white {
     color: #e2e5e9 !important; }
-  .big-icon--chevron-inset-inline-start.scale--2x {
+  .big-icon--chevron-left.scale--2x {
     --big-icon-size: 52px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--3x {
+  .big-icon--chevron-left.scale--3x {
     --big-icon-size: 78px
         ; }
-  .big-icon--chevron-inset-inline-start.scale--4x {
+  .big-icon--chevron-left.scale--4x {
     --big-icon-size: 104px
         ; }
 
-.big-icon--chevron-inset-inline-start:before {
+.big-icon--chevron-left:before {
   content: ""; }
 
 .big-icon--chevron-right {
@@ -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

@@ -59230,6 +59230,17 @@ module.exports = _assertThisInitialized, module.exports.__esModule = true, modul
 
 "use strict";
 
+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);
@@ -59261,7 +59272,7 @@ var core_1 = __webpack_require__(42);
 var react_id_generator_1 = __webpack_require__(9);
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -59270,6 +59281,7 @@ var Dropdown = function (_a) {
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
+    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
     var dropdownElements = items.map(function (el, index) {
         return each(el, index);
     });
@@ -59313,7 +59325,7 @@ var Dropdown = function (_a) {
                 React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
+            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -59416,7 +59428,7 @@ var Dropdown = function (_a) {
                     return React.cloneElement(children, attrs);
                 })()) : null)
             :
-                React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
                     children,
                     React.createElement("span", { className: "dropdown__caret" })),
         append ?
@@ -105128,7 +105140,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.71",
+  "version": "3.0.73",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Dropdown.d.ts

@@ -26,6 +26,7 @@ interface IMenu {
     children: React.ReactNode;
     zIndex?: number;
     onChange?(event?: any): void;
+    maxHeight?: number;
 }
-export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, append, align, zIndex, onChange, maxHeight, }: IMenu) => JSX.Element;
 export {};

package/react/components/Dropdown.js

@@ -1,4 +1,15 @@
 "use strict";
+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);
@@ -30,7 +41,7 @@ var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, zIndex = _a.zIndex, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
@@ -39,6 +50,7 @@ var Dropdown = function (_a) {
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
+    var maxHeightStyle = maxHeight ? { maxHeight: maxHeight } : {};
     var dropdownElements = items.map(function (el, index) {
         return each(el, index);
     });
@@ -82,7 +94,7 @@ var Dropdown = function (_a) {
                 React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } }, dropdownElements));
+            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -185,7 +197,7 @@ var Dropdown = function (_a) {
                     return React.cloneElement(children, attrs);
                 })()) : null)
             :
-                React.createElement("button", { ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+                React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
                     children,
                     React.createElement("span", { className: "dropdown__caret" })),
         append ?

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" })),