superdesk-ui-framework 4.0.27 → 4.0.29

package/dist/vendor.bundle.js

@@ -17296,11 +17296,11 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(41), __webpack_require__(58)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(42), __webpack_require__(59)(module)))
 
 /***/ }),
 
-/***/ 41:
+/***/ 42:
 /***/ (function(module, exports) {
 
 var g;
@@ -17328,7 +17328,7 @@ module.exports = g;
 
 /***/ }),
 
-/***/ 58:
+/***/ 59:
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -17357,7 +17357,7 @@ module.exports = function(module) {
 
 /***/ }),
 
-/***/ 74:
+/***/ 75:
 /***/ (function(module, exports, __webpack_require__) {
 
 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
@@ -28254,7 +28254,7 @@ return jQuery;
 
 __webpack_require__(18);
 
-__webpack_require__(74);
+__webpack_require__(75);
 
 __webpack_require__(804);
 
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(74), __webpack_require__(805) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(75), __webpack_require__(805) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
@@ -29039,7 +29039,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
 	if ( true ) {
 
 		// AMD. Register as an anonymous module.
-		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(74) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
+		!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(75) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
 				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
 				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
 				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));

package/examples/pages/components/Buttons.tsx

@@ -17,7 +17,7 @@ export default class ButtonsDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                     <div className="docs-page__content-row">
-                        <Button text="default" onClick={()=> false} />
+                        <Button text="default" onClick={()=> false} tooltip="test tooltip" />
                         <Button text="primary" type="primary" onClick={()=> false} />
                     </div>
                     <p className="docs-page__paragraph">// Other colour options</p>
@@ -101,8 +101,8 @@ export default class ButtonsDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Sizing</h3>
                 <p className="docs-page__paragraph">
-                    For the default button, no size has to be specified. 
-                    To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>. 
+                    For the default button, no size has to be specified.
+                    To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
                     For the button to take the full width of the container add <code>expand={'{true}'}</code>.
                 </p>
                 <Markup.ReactMarkup>
@@ -120,7 +120,7 @@ export default class ButtonsDoc extends React.Component {
                     </div>
                     <div className="docs-page__content-row">
                         <Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
-                    </div>                    
+                    </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Button text="button large" size="large" onClick={()=> false} />
@@ -201,7 +201,7 @@ export default class ButtonsDoc extends React.Component {
                         <Button text="success" type="success" icon="ok" onClick={()=> false} />
                         <Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
                         <Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
-                        
+
                         <Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
                         <Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
                         <Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
@@ -217,7 +217,7 @@ export default class ButtonsDoc extends React.Component {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Buttons with icon font only</h3>
-                <p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>. 
+                <p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
                 The specified text value will be used for the <code>aria-label</code>.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>

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

@@ -2031,7 +2031,7 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <div className="sd-check__group-new sd-check-button__group--left">
                             <RadioButtonGroup
-                                value={this.state.value3}
+                                value={this.state.value3 ?? ''}
                                 options={[
                                     {label: "RadioButton with an icon", value: "somevalue4", icon: "th-list"},
                                     {label: "RadioButton with no visible text, only an icon", value: "somevalue5", icon: "th", labelHidden: true},

package/package.json

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

package/react/components/Alert.d.ts

@@ -7,6 +7,7 @@ interface IProps {
     icon?: string;
     banner?: boolean;
     margin?: 'none' | 'small' | 'normal' | 'large';
+    fullWidth?: boolean;
 }
 interface IState {
     open: boolean;

package/react/components/Alert.js

@@ -77,7 +77,11 @@ var Alert = /** @class */ (function (_super) {
             _b["sd-alert__info-btn--".concat(this.props.type)] = this.props.type,
             _b['sd-alert__info-btn--hidden'] = this.state.open,
             _b));
-        return (React.createElement("div", { className: 'sd-alert__container' },
+        var styles = {};
+        if (this.props.fullWidth) {
+            styles.width = '100%';
+        }
+        return (React.createElement("div", { className: 'sd-alert__container', style: styles },
             React.createElement("div", { className: classesAlert },
                 this.props.icon ?
                     React.createElement("span", { className: "sd-alert__icon" },

package/react/components/Button.d.ts

@@ -17,6 +17,7 @@ interface IPropsButton {
     icon?: string;
     disabled?: boolean;
     iconOnly?: boolean;
+    noMargin?: boolean;
     'data-test-id'?: string;
 }
 export declare class Button extends React.PureComponent<IPropsButton> {

package/react/components/Button.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -46,6 +57,7 @@ var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = require("./Icon");
 var Spinner_1 = require("./Spinner");
+var Tooltip_1 = require("./Tooltip");
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button() {
@@ -67,11 +79,30 @@ var Button = /** @class */ (function (_super) {
             _a['sd-flex-justify-start'] = this.props.textAlign === 'start',
             _a['sd-flex-justify-end'] = this.props.textAlign === 'end',
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.disabled || this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip },
-            this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
-            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
-            this.props.iconOnly ? null : this.props.text));
+        return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
+            var attributes = _a.attributes;
+            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": _this.props.iconOnly ? _this.props.text : '', "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
+                _this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
+                _this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
+                _this.props.iconOnly ? null : _this.props.text));
+        }));
     };
     return Button;
 }(React.PureComponent));
 exports.Button = Button;
+var TooltipWrapper = /** @class */ (function (_super) {
+    __extends(TooltipWrapper, _super);
+    function TooltipWrapper() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TooltipWrapper.prototype.render = function () {
+        var _a = this.props, tooltipText = _a.tooltipText, children = _a.children;
+        return (tooltipText !== null && tooltipText !== void 0 ? tooltipText : '').length > 0
+            ? (React.createElement(Tooltip_1.WithTooltip, { text: tooltipText }, function (_a) {
+                var attributes = _a.attributes;
+                return children({ attributes: attributes });
+            }))
+            : (React.createElement(React.Fragment, null, children({ attributes: {} })));
+    };
+    return TooltipWrapper;
+}(React.PureComponent));

package/react/components/FormLabel.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 interface IProps {
     text: string;
     style?: 'normal' | 'light';
+    noMinHeight?: boolean;
 }
 export declare class FormLabel extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/FormLabel.js

@@ -53,7 +53,7 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("label", { className: classes }, this.props.text));
+        return (React.createElement("label", { className: classes, style: this.props.noMinHeight === true ? { minHeight: 'auto' } : undefined }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));

package/react/components/Label.d.ts

@@ -13,5 +13,4 @@ interface IProps {
 export declare class Label extends React.PureComponent<IProps> {
     render(): JSX.Element;
 }
-export declare function getTextColor(backgroundColor: string): 'black' | 'white' | undefined;
 export {};

package/react/components/Label.js

@@ -41,9 +41,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextColor = exports.Label = void 0;
+exports.Label = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
+var helpers_1 = require("../helpers");
 var Label = /** @class */ (function (_super) {
     __extends(Label, _super);
     function Label() {
@@ -79,7 +80,7 @@ var Label = /** @class */ (function (_super) {
             }
             else {
                 return (React.createElement("span", { className: classes, style: this.props.hexColor
-                        ? { backgroundColor: this.props.hexColor, color: getTextColor(this.props.hexColor) }
+                        ? { backgroundColor: this.props.hexColor, color: (0, helpers_1.getTextColor)(this.props.hexColor) }
                         : undefined }, this.props.text));
             }
         }
@@ -87,16 +88,3 @@ var Label = /** @class */ (function (_super) {
     return Label;
 }(React.PureComponent));
 exports.Label = Label;
-function getTextColor(backgroundColor) {
-    if (backgroundColor) {
-        var r = parseInt(backgroundColor.substr(1, 2), 16);
-        var g = parseInt(backgroundColor.substr(3, 2), 16);
-        var b = parseInt(backgroundColor.substr(5, 2), 16);
-        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
-        return (yiq >= 128) ? 'black' : 'white';
-    }
-    else {
-        return;
-    }
-}
-exports.getTextColor = getTextColor;

package/react/components/RadioButtonGroup.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 interface IProps {
-    value?: string;
+    value: string;
+    onChange(nextValue: string): void;
+    disabled?: boolean;
     group?: {
         orientation?: 'horizontal' | 'vertical';
         grid?: boolean;
@@ -18,7 +20,6 @@ interface IProps {
     }>;
     required?: boolean;
     tabindex?: number;
-    onChange(nextValue: string): void;
     'data-test-id'?: string;
 }
 export declare class RadioButtonGroup extends React.Component<IProps> {

package/react/components/RadioButtonGroup.js

@@ -55,7 +55,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
         return _this;
     }
     RadioButtonGroup.prototype.handleChange = function (item) {
-        if (!item.disabled) {
+        if (this.props.disabled !== true && item.disabled !== true) {
             this.props.onChange(item.value);
         }
     };
@@ -79,7 +79,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
         return (React.createElement(React.Fragment, null,
             !((_j = this.props.group) === null || _j === void 0 ? void 0 : _j.groupLabel) ?
                 React.createElement("div", { role: "radiogroup", className: classes, "aria-labelledby": (_k = this.props.group) === null || _k === void 0 ? void 0 : _k.groupLabelledBy, "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: _this.props.tabindex === undefined ? undefined : -1 },
-                    React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
+                    React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: _this.props.tabindex, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: _this.props.disabled || item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
                     React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined, "data-test-id": "item" },
                         item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
                         !item.labelHidden || !item.icon ?
@@ -89,7 +89,7 @@ var RadioButtonGroup = /** @class */ (function (_super) {
                 React.createElement("div", { className: 'sd-check-button__group-wrapper', "data-test-id": this.props['data-test-id'], "data-test-value": selectedOption == null ? undefined : selectedOption.label },
                     React.createElement(FormLabel_1.FormLabel, { forId: this.htmlId + 'group', text: this.props.group.groupLabel }),
                     React.createElement("div", { role: "radiogroup", id: this.htmlId + 'group', className: classes }, this.props.options.map(function (item, index) { return (React.createElement("span", { className: "sd-check-button sd-check-button--native", key: index, tabIndex: -1 },
-                        React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
+                        React.createElement("input", { type: "radio", className: "sd-check-button__input", id: _this.htmlId + index, tabIndex: 0, name: _this.htmlId, onChange: function () { return _this.handleChange(item); }, disabled: _this.props.disabled || item.disabled, required: _this.props.required, checked: item.value === _this.props.value }),
                         React.createElement("label", { className: "sd-check-button__text-label", htmlFor: _this.htmlId + index, "aria-label": item.labelHidden ? item.label : undefined },
                             item.icon ? React.createElement("i", { className: "icon-".concat(item.icon), "aria-hidden": "true" }) : null,
                             !item.labelHidden || !item.icon ?

package/react/components/SelectPreview.js

@@ -44,7 +44,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectPreview = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var React = __importStar(require("react"));
-var Label_1 = require("./Label");
+var helpers_1 = require("../helpers");
 var SelectPreview = /** @class */ (function (_super) {
     __extends(SelectPreview, _super);
     function SelectPreview() {
@@ -85,12 +85,12 @@ var SelectPreview = /** @class */ (function (_super) {
                         })() },
                         React.createElement("span", { className: "tags-input__helper-box", style: (function () {
                                 if (backgroundColor != null) {
-                                    return { color: (0, Label_1.getTextColor)(backgroundColor) };
+                                    return { color: (0, helpers_1.getTextColor)(backgroundColor) };
                                 }
                                 else {
                                     if (_this.props.kind.mode === 'multi-select'
                                         && _this.props.kind.getBackgroundColor != null) {
-                                        return { color: (0, Label_1.getTextColor)(_this.props.kind.getBackgroundColor(item)) };
+                                        return { color: (0, helpers_1.getTextColor)(_this.props.kind.getBackgroundColor(item)) };
                                     }
                                     else {
                                         return undefined;

package/react/components/ShowPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Placement } from '@popperjs/core';
 interface IPropsPopupPositioner {
-    referenceElement: HTMLElement;
+    getReferenceElement(): HTMLElement;
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;

package/react/components/ShowPopup.js

@@ -64,7 +64,7 @@ var PopupPositioner = /** @class */ (function (_super) {
         if (this.wrapperEl == null) {
             return;
         }
-        if (this.props.referenceElement.contains(event.target) !== true
+        if (this.props.getReferenceElement().contains(event.target) !== true
             && this.wrapperEl.contains(event.target) !== true) {
             this.props.onClose();
         }
@@ -90,7 +90,7 @@ var PopupPositioner = /** @class */ (function (_super) {
         window.addEventListener('click', this.closeOnClick, { capture: true });
         window.addEventListener('scroll', this.closeOnScroll, true);
         if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
-            this.props.referenceElement.addEventListener('mouseleave', this.closeOnMouseLeave);
+            this.props.getReferenceElement().addEventListener('mouseleave', this.closeOnMouseLeave);
             this.wrapperEl.addEventListener('mouseleave', this.closeOnMouseLeave);
         }
         var applyMaxSize = {
@@ -112,7 +112,7 @@ var PopupPositioner = /** @class */ (function (_super) {
              */
             setTimeout(function () {
                 if (_this.wrapperEl != null) {
-                    _this.popper = (0, core_1.createPopper)(_this.props.referenceElement, _this.wrapperEl, {
+                    _this.popper = (0, core_1.createPopper)(_this.props.getReferenceElement(), _this.wrapperEl, {
                         placement: _this.props.placement,
                         modifiers: [
                             popper_max_size_modifier_1.default,
@@ -128,21 +128,21 @@ var PopupPositioner = /** @class */ (function (_super) {
         window.removeEventListener('click', this.closeOnClick);
         window.removeEventListener('scroll', this.closeOnScroll, true);
         if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
-            this.props.referenceElement.removeEventListener('mouseleave', this.closeOnMouseLeave);
+            this.props.getReferenceElement().removeEventListener('mouseleave', this.closeOnMouseLeave);
             this.wrapperEl.removeEventListener('mouseleave', this.closeOnMouseLeave);
         }
         (_b = (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
     };
     PopupPositioner.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { ref: function (el) {
+        return (React.createElement(React.Fragment, null, react_dom_1.default.createPortal((React.createElement("div", { ref: function (el) {
                 _this.wrapperEl = el;
             }, style: {
                 position: 'absolute',
                 left: '-100vw',
                 display: 'flex',
                 zIndex: this.zIndex,
-            } }, this.props.children));
+            } }, this.props.children)), document.body)));
     };
     return PopupPositioner;
 }(React.PureComponent));
@@ -158,7 +158,7 @@ function showPopup(referenceElement, placement, Component, closeOnHoverEnd, onCl
         el.remove();
         onClose === null || onClose === void 0 ? void 0 : onClose();
     };
-    react_dom_1.default.render((React.createElement(PopupPositioner, { referenceElement: referenceElement, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
+    react_dom_1.default.render((React.createElement(PopupPositioner, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
         React.createElement(Component, { closePopup: closeFn }))), el);
     return { close: closeFn };
 }

package/react/components/Tooltip.d.ts

@@ -2,14 +2,22 @@ import * as React from 'react';
 interface IProps {
     text: string | undefined | null;
     flow?: 'top' | 'left' | 'right' | 'down';
+    children(options: {
+        attributes: {
+            [name: string]: string;
+        };
+    }): React.ReactNode;
 }
-export declare class Tooltip extends React.PureComponent<IProps> {
+export declare class WithTooltip extends React.PureComponent<IProps> {
     private id;
     private instance;
     constructor(props: IProps);
     private setupTooltip;
     componentDidMount(): void;
     componentDidUpdate(): void;
+    render(): React.ReactNode;
+}
+export declare class Tooltip extends React.PureComponent<Omit<IProps, 'children'>> {
     render(): JSX.Element;
 }
 export {};

package/react/components/Tooltip.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -41,8 +52,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.Tooltip = exports.WithTooltip = void 0;
 var React = __importStar(require("react"));
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var tippy_js_1 = __importDefault(require("tippy.js"));
 var helpers_1 = require("../helpers");
 function flowToPlacement(flow) {
@@ -61,20 +73,22 @@ function flowToPlacement(flow) {
             return (0, helpers_1.assertNever)(flow);
     }
 }
-var Tooltip = /** @class */ (function (_super) {
-    __extends(Tooltip, _super);
-    function Tooltip(props) {
+var tooltipAttributeName = 'data-with-tooltip';
+var getTooltipSelector = function (value) { return "[".concat(tooltipAttributeName, "=").concat(value, "]"); };
+var WithTooltip = /** @class */ (function (_super) {
+    __extends(WithTooltip, _super);
+    function WithTooltip(props) {
         var _this = _super.call(this, props) || this;
-        _this.id = 'tooltip-' + Math.random().toString().slice(2);
+        _this.id = (0, react_id_generator_1.default)();
         _this.instance = null;
         return _this;
     }
-    Tooltip.prototype.setupTooltip = function () {
+    WithTooltip.prototype.setupTooltip = function () {
         var _a;
         var placement = flowToPlacement((_a = this.props.flow) !== null && _a !== void 0 ? _a : 'top');
         var content = this.props.text;
         if (this.instance == null) {
-            this.instance = (0, tippy_js_1.default)('#' + this.id, {
+            this.instance = (0, tippy_js_1.default)(getTooltipSelector(this.id), {
                 placement: placement,
             })[0];
             if (this.instance == null) {
@@ -106,14 +120,30 @@ var Tooltip = /** @class */ (function (_super) {
             this.instance.show();
         }
     };
-    Tooltip.prototype.componentDidMount = function () {
+    WithTooltip.prototype.componentDidMount = function () {
         this.setupTooltip();
     };
-    Tooltip.prototype.componentDidUpdate = function () {
+    WithTooltip.prototype.componentDidUpdate = function () {
         this.setupTooltip();
     };
+    WithTooltip.prototype.render = function () {
+        var _a;
+        return this.props.children({ attributes: (_a = {}, _a[tooltipAttributeName] = this.id, _a) });
+    };
+    return WithTooltip;
+}(React.PureComponent));
+exports.WithTooltip = WithTooltip;
+var Tooltip = /** @class */ (function (_super) {
+    __extends(Tooltip, _super);
+    function Tooltip() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
     Tooltip.prototype.render = function () {
-        return (React.createElement("div", { id: this.id, style: { display: 'inline-flex' } }, this.props.children));
+        var _this = this;
+        return (React.createElement(WithTooltip, { text: this.props.text, flow: this.props.flow }, function (_a) {
+            var attributes = _a.attributes;
+            return (React.createElement("div", __assign({}, attributes, { style: { display: 'inline-flex' } }), _this.props.children));
+        }));
     };
     return Tooltip;
 }(React.PureComponent));

package/react/components/TreeSelect/TreeSelect.js

@@ -70,7 +70,7 @@ var debounce_1 = __importDefault(require("lodash/debounce"));
 var Form_1 = require("../Form");
 var core_1 = require("@popperjs/core");
 var lodash_1 = require("lodash");
-var Label_1 = require("../Label");
+var helpers_1 = require("../../helpers");
 var SelectPreview_1 = require("../SelectPreview");
 var TreeSelectPill_1 = require("./TreeSelectPill");
 var TreeSelectItem_1 = require("./TreeSelectItem");
@@ -78,12 +78,7 @@ var KeyboardNavigation_1 = require("./KeyboardNavigation");
 var WithPortal_1 = require("../WithPortal");
 var react_beautiful_dnd_1 = require("react-beautiful-dnd");
 var zIndex_1 = require("../../zIndex");
-var reorder = function (list, startIndex, endIndex) {
-    var result = Array.from(list);
-    var removed = result.splice(startIndex, 1)[0];
-    result.splice(endIndex, 0, removed);
-    return result;
-};
+var common_1 = require("@superdesk/common");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -250,12 +245,9 @@ var TreeSelect = /** @class */ (function (_super) {
         }
     };
     TreeSelect.prototype.removeClick = function (i) {
-        var newTags = this.state.value;
-        newTags === null || newTags === void 0 ? void 0 : newTags.splice(i, 1);
         this.setState({
-            value: newTags,
+            value: this.state.value.filter(function (_item, index) { return index !== i; }),
         });
-        this.props.onChange(this.state.value);
     };
     TreeSelect.prototype.handleMultiLevel = function (item) {
         if (item.children) {
@@ -531,9 +523,8 @@ var TreeSelect = /** @class */ (function (_super) {
         if (!result.destination) {
             return;
         }
-        var value = reorder(this.state.value, result.source.index, result.destination.index);
         this.setState({
-            value: value,
+            value: (0, common_1.arrayMove)(this.state.value, result.source.index, result.destination.index),
         });
     };
     TreeSelect.prototype.render = function () {
@@ -622,7 +613,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     && React.createElement("div", { className: "item-border item-border-selected", style: borderColor
                                             ? { backgroundColor: borderColor }
                                             : { backgroundColor: _this.props.getBorderColor(item) } }),
-                                React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, Label_1.getTextColor)(backgroundColor) } },
+                                React.createElement("span", { className: "tags-input__helper-box", style: { color: backgroundColor && (0, helpers_1.getTextColor)(backgroundColor) } },
                                     React.createElement("span", { className: backgroundColor && "tags-input__tag-item", style: { backgroundColor: backgroundColor, margin: 0 }, "data-test-id": "item" }, children),
                                     (_this.props.readOnly !== true && _this.props.required !== true) && (React.createElement("span", { className: "tags-input__remove-button", "data-test-id": "clear-value" },
                                         React.createElement(Icon_1.Icon, { name: 'remove-sign' }))))));

package/react/components/TreeSelect/TreeSelectItem.js

@@ -41,7 +41,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeSelectItem = exports.getPrefixedItemId = void 0;
 var React = __importStar(require("react"));
 var Icon_1 = require("../Icon");
-var Label_1 = require("../Label");
+var helpers_1 = require("../../helpers");
 function getPrefixedItemId(id) {
     return id + '-focus';
 }
@@ -82,7 +82,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
                         + (this.props.selectedItem ? ' suggestion-item--selected' : ''), style: (this.props.getBackgroundColor && this.props.option.value)
                         ? {
                             backgroundColor: this.props.getBackgroundColor(this.props.option.value),
-                            color: (0, Label_1.getTextColor)(this.props.getBackgroundColor(this.props.option.value)),
+                            color: (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.option.value)),
                         }
                         : undefined, "aria-label": ariaLabel }, this.props.optionTemplate
                     ? this.props.optionTemplate(this.props.option.value)