superdesk-ui-framework 3.0.66 → 3.0.68

package/react/components/TreeSelect/TreeSelect.js

@@ -64,7 +64,7 @@ var SelectPreview_1 = require("../SelectPreview");
 var TreeSelectPill_1 = require("./TreeSelectPill");
 var TreeSelectItem_1 = require("./TreeSelectItem");
 var KeyboardNavigation_1 = require("./KeyboardNavigation");
-var react_dom_1 = require("react-dom");
+var WithPortal_1 = require("../WithPortal");
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
     function TreeSelect(props) {
@@ -87,7 +87,10 @@ var TreeSelect = /** @class */ (function (_super) {
             if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
                 && (((_b = _this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
                 && _this.state.openDropdown) {
-                _this.setState({ openDropdown: false });
+                _this.setState({
+                    openDropdown: false,
+                    searchFieldValue: '',
+                });
             }
         };
         _this.onKeyDown = function (e) {
@@ -104,10 +107,19 @@ var TreeSelect = /** @class */ (function (_super) {
                 }
             }
         };
+        _this.onPressEsc = function (event) {
+            if (event.key === 'Escape' && _this.state.openDropdown) {
+                _this.setState({
+                    openDropdown: false,
+                    searchFieldValue: '',
+                });
+            }
+        };
         _this.componentDidMount = function () {
             _this.recursion(_this.state.options);
             document.addEventListener("mousedown", _this.onMouseDown);
             document.addEventListener("keydown", _this.onKeyDown);
+            document.addEventListener("keydown", _this.onPressEsc);
         };
         _this.debounceFn = (0, debounce_1.default)(_this.handleDebounce, 500);
         _this.state = {
@@ -135,6 +147,7 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.toggleMenu = _this.toggleMenu.bind(_this);
         _this.onMouseDown = _this.onMouseDown.bind(_this);
         _this.onKeyDown = _this.onKeyDown.bind(_this);
+        _this.onPressEsc = _this.onPressEsc.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -147,6 +160,7 @@ var TreeSelect = /** @class */ (function (_super) {
     TreeSelect.prototype.componentWillUnmount = function () {
         document.removeEventListener("mousedown", this.onMouseDown);
         document.removeEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keydown", this.onPressEsc);
     };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a, _b;
@@ -173,17 +187,9 @@ var TreeSelect = /** @class */ (function (_super) {
         var _this = this;
         var _a, _b;
         if (this.state.openDropdown) {
-            if (this.openDropdownRef.current && this.dropdownRef.current) {
-                this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
+            if (this.treeSelectRef.current && this.dropdownRef.current) {
+                this.popperInstance = (0, core_1.createPopper)(this.treeSelectRef.current, this.dropdownRef.current, {
                     placement: 'bottom-start',
-                    modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: [-4, 4],
-                            },
-                        },
-                    ],
                 });
             }
             (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {
@@ -501,13 +507,16 @@ var TreeSelect = /** @class */ (function (_super) {
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: (_a = this.props.inputWidth === '100%') !== null && _a !== void 0 ? _a : false, "data-test-id": this.props['data-test-id'] },
-            React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
+            React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly
-                        || React.createElement("button", { ref: this.openDropdownRef, className: "tags-input__add-button ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
+                        || React.createElement("button", { ref: this.openDropdownRef, className: "\n                                        tags-input__add-button\n                                        ".concat(this.props.disabled ? 'tags-input__add-button--disabled' : ''), onClick: function (e) {
                                 e.stopPropagation();
                                 if (!_this.props.disabled) {
-                                    _this.setState({ openDropdown: !_this.state.openDropdown });
+                                    _this.setState({
+                                        openDropdown: !_this.state.openDropdown,
+                                        searchFieldValue: '',
+                                    });
                                 }
                             }, "data-test-id": "open-popover" },
                             React.createElement("i", { className: "icon-plus-large" })),
@@ -557,68 +566,67 @@ var TreeSelect = /** @class */ (function (_super) {
                             : (React.createElement(Wrapper, null,
                                 React.createElement("span", null, _this.props.getLabel(item)))));
                     }))),
-            (0, react_dom_1.createPortal)(this.state.openDropdown
-                && React.createElement("div", { "data-test-id": "tree-select-popover" },
-                    React.createElement("div", { className: "autocomplete autocomplete--multi-select"
-                            + (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
-                            zIndex: this.props.zIndex,
-                            width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
-                        }, ref: this.dropdownRef },
-                        React.createElement("div", { className: 'autocomplete__header' },
+            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
+                React.createElement("div", { className: "autocomplete autocomplete--multi-select"
+                        + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
+                        zIndex: this.props.zIndex,
+                        width: (_b = this.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth,
+                    }, ref: this.dropdownRef },
+                    React.createElement("div", { className: 'autocomplete__header' },
+                        React.createElement("div", { className: "autocomplete__icon", onClick: function () {
+                                _this.backButton();
+                            } },
+                            React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
+                        React.createElement("div", { className: 'autocomplete__filter' },
+                            React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
+                                    var _a, _b;
+                                    if (_this.props.kind === 'synchronous') {
+                                        _this.setState({ searchFieldValue: event.target.value });
+                                        (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
+                                    }
+                                    else if (_this.props.kind === 'asynchronous') {
+                                        if (_this.ICancelFn) {
+                                            _this.ICancelFn();
+                                        }
+                                        _this.setState({ searchFieldValue: event.target.value, options: [] });
+                                        (_b = _this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
+                                        _this.debounceFn();
+                                    }
+                                    else {
+                                        return;
+                                    }
+                                }, "data-test-id": "filter-input" }))),
+                    (this.state.activeTree.length > 0 && this.state.buttonValue != null)
+                        && React.createElement("div", { className: 'autocomplete__category-header' },
                             React.createElement("div", { className: "autocomplete__icon", onClick: function () {
                                     _this.backButton();
                                 } },
-                                React.createElement(Icon_1.Icon, { name: "search", className: "search" })),
+                                React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
                             React.createElement("div", { className: 'autocomplete__filter' },
-                                React.createElement("input", { className: "autocomplete__input", type: "text", placeholder: this.props.searchPlaceholder, ref: this.inputRef, value: this.state.searchFieldValue, onChange: function (event) {
-                                        var _a, _b;
-                                        if (_this.props.kind === 'synchronous') {
-                                            _this.setState({ searchFieldValue: event.target.value });
-                                            (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
-                                        }
-                                        else if (_this.props.kind === 'asynchronous') {
-                                            if (_this.ICancelFn) {
-                                                _this.ICancelFn();
-                                            }
-                                            _this.setState({ searchFieldValue: event.target.value, options: [] });
-                                            (_b = _this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
-                                            _this.debounceFn();
-                                        }
-                                        else {
-                                            return;
-                                        }
-                                    }, "data-test-id": "filter-input" }))),
-                        (this.state.activeTree.length > 0 && this.state.buttonValue != null)
-                            && React.createElement("div", { className: 'autocomplete__category-header' },
-                                React.createElement("div", { className: "autocomplete__icon", onClick: function () {
-                                        _this.backButton();
-                                    } },
-                                    React.createElement(Icon_1.Icon, { name: "arrow-left", className: "arrow-left" })),
-                                React.createElement("div", { className: 'autocomplete__filter' },
-                                    React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
-                                        ? this.props.optionTemplate(this.state.buttonValue.value)
-                                        : this.props.getLabel(this.state.buttonValue.value)),
-                                    this.props.selectBranchWithChildren
-                                        && this.branchButton(this.state.buttonValue))),
-                        this.state.loading
-                            ? React.createElement("ul", { className: "suggestion-list--loader" },
-                                React.createElement(Loader_1.Loader, { overlay: true }))
-                            : this.state.searchFieldValue === ''
-                                ? this.props.getOptions
-                                    ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options" }, this.state.options.map(function (option, i) {
-                                        var selectedItem = _this.state.value.some(function (obj) {
-                                            return _this.props.getId(obj) === _this.props.getId(option.value);
-                                        });
-                                        return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onKeyDown: function () { return _this.setState({
-                                                buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
-                                                    _this.props.getId(option.value),
-                                                ], false),
-                                            }); } }));
-                                    }))
-                                    : null
-                                : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
-                                    ? this.state.options
-                                    : this.state.filterArr)))), document.body)));
+                                React.createElement("button", { className: 'autocomplete__category-title' }, this.props.optionTemplate
+                                    ? this.props.optionTemplate(this.state.buttonValue.value)
+                                    : this.props.getLabel(this.state.buttonValue.value)),
+                                this.props.selectBranchWithChildren
+                                    && this.branchButton(this.state.buttonValue))),
+                    this.state.loading
+                        ? React.createElement("ul", { className: "suggestion-list--loader" },
+                            React.createElement(Loader_1.Loader, { overlay: true }))
+                        : this.state.searchFieldValue === ''
+                            ? this.props.getOptions
+                                ? React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options" }, this.state.options.map(function (option, i) {
+                                    var selectedItem = _this.state.value.some(function (obj) {
+                                        return _this.props.getId(obj) === _this.props.getId(option.value);
+                                    });
+                                    return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, selectedItem: selectedItem, allowMultiple: _this.props.allowMultiple, getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, optionTemplate: _this.props.optionTemplate, getLabel: _this.props.getLabel, onKeyDown: function () { return _this.setState({
+                                            buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
+                                                _this.props.getId(option.value),
+                                            ], false),
+                                        }); } }));
+                                }))
+                                : null
+                            : React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch
+                                ? this.state.options
+                                : this.state.filterArr))))));
     };
     return TreeSelect;
 }(React.Component));

package/react/components/WithPortal.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface IProps {
+    active: boolean;
+    'data-test-id'?: string;
+}
+export declare function findParent(element: HTMLElement | null): HTMLElement | null;
+export declare class WithPortal extends React.Component<IProps> {
+    private ref;
+    private dataTheme;
+    constructor(props: IProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

package/react/components/WithPortal.js

@@ -0,0 +1,69 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithPortal = exports.findParent = void 0;
+var React = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+function findParent(element) {
+    var _a;
+    var dataTheme = element;
+    while (dataTheme != null && (dataTheme === null || dataTheme === void 0 ? void 0 : dataTheme.getAttribute('data-theme')) == null) {
+        dataTheme = (_a = dataTheme.parentElement) !== null && _a !== void 0 ? _a : null;
+    }
+    return dataTheme;
+}
+exports.findParent = findParent;
+var WithPortal = /** @class */ (function (_super) {
+    __extends(WithPortal, _super);
+    function WithPortal(props) {
+        var _this = _super.call(this, props) || this;
+        _this.ref = React.createRef();
+        return _this;
+    }
+    WithPortal.prototype.componentDidMount = function () {
+        var _a, _b;
+        this.dataTheme = (_b = (_a = findParent(this.ref.current)) === null || _a === void 0 ? void 0 : _a.getAttribute('data-theme')) !== null && _b !== void 0 ? _b : undefined;
+    };
+    WithPortal.prototype.render = function () {
+        return (React.createElement("div", { ref: this.ref }, this.props.active && ((0, react_dom_1.createPortal)(React.createElement("div", { "data-theme": this.dataTheme, "data-test-id": this.props['data-test-id'] }, this.props.children), document.body))));
+    };
+    return WithPortal;
+}(React.Component));
+exports.WithPortal = WithPortal;

package/react/components/avatar/avatar.js

@@ -50,7 +50,8 @@ var Avatar = /** @class */ (function (_super) {
     }
     Avatar.prototype.render = function () {
         var _a = this.props, imageUrl = _a.imageUrl, initials = _a.initials, size = _a.size, statusIndicator = _a.statusIndicator, administratorIndicator = _a.administratorIndicator, icon = _a.icon, displayName = _a.displayName, customContent = _a.customContent;
-        var tooltipCombined = [displayName, this.props.tooltip].filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
+        var tooltipCombined = [displayName, this.props.tooltip]
+            .filter(function (str) { return (str !== null && str !== void 0 ? str : '').trim().length > 0; }).join('\n');
         return (React.createElement(avatar_wrapper_1.AvatarWrapper, { size: size, statusIndicator: statusIndicator ? { status: statusIndicator, tooltipText: '' } : undefined, administratorIndicator: administratorIndicator ? { enabled: true, tooltipText: '' } : undefined, icon: icon, isEmpty: false }, (function () {
             if (customContent != null) {
                 return customContent;