superdesk-ui-framework 4.0.46 → 4.0.48

package/react/components/ToastWrapper.js

@@ -89,8 +89,7 @@ var ToastWrapper = /** @class */ (function (_super) {
             var isTop = position === 'top';
             _this.setState(function (prev) {
                 var _a;
-                return __assign(__assign({}, prev), (_a = {}, _a[position] = isTop
-                    ? __spreadArray([toast], prev[position], true) : __spreadArray(__spreadArray([], prev[position], true), [toast], false), _a));
+                return __assign(__assign({}, prev), (_a = {}, _a[position] = isTop ? __spreadArray([toast], prev[position], true) : __spreadArray(__spreadArray([], prev[position], true), [toast], false), _a));
             });
             return { id: toast.id, position: toast.position };
         };
@@ -122,9 +121,8 @@ var ToastWrapper = /** @class */ (function (_super) {
         return Object.keys(this.state).map(function (position) {
             var pos = position;
             var toasts = _this.state[pos];
-            return (React.createElement("div", { key: position, className: "sd-toast__container sd-toast__container--" + pos }, (pos === 'top' ?
-                toasts : __spreadArray([], toasts, true).reverse()).map(function (toast) {
-                return React.createElement(ToastMessage_1.ToastMessage, { position: pos, type: toast.type, icon: toast.icon, closeElement: _this.requestClose, duration: toast.duration, key: toast.id, id: toast.id, message: toast.message, size: toast.size });
+            return (React.createElement("div", { key: position, className: 'sd-toast__container sd-toast__container--' + pos }, (pos === 'top' ? toasts : __spreadArray([], toasts, true).reverse()).map(function (toast) {
+                return (React.createElement(ToastMessage_1.ToastMessage, { position: pos, type: toast.type, icon: toast.icon, closeElement: _this.requestClose, duration: toast.duration, key: toast.id, id: toast.id, message: toast.message, size: toast.size }));
             })));
         });
     };

package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IPropsCustomHeader } from "../ToggleBox/index";
+import { IPropsCustomHeader } from '../ToggleBox/index';
 interface IState {
     isOpen: boolean;
     wasOpened: boolean;

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -78,7 +78,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
                             _this.handleAnimationEnd();
                             resolve(_this.state.isOpen);
                         };
-                        _this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
+                        _this.contentRef.current.addEventListener('animationend', handleAnimation, { once: true });
                     }
                     else {
                         reject();
@@ -116,12 +116,12 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
             'new-collapse-box--open': this.state.isOpen,
         });
         var isOpen = this.state.isOpen;
-        return (React.createElement("div", { className: classes, "aria-expanded": isOpen, "data-test-id": 'toggle-box' },
-            React.createElement("div", { className: 'new-collapse-box__header' },
-                React.createElement("div", { className: 'new-collapse-box__header-inner' }, this.props.header),
-                React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
-                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
-            React.createElement("div", { className: 'new-collapse-box__content' },
+        return (React.createElement("div", { className: classes, "aria-expanded": isOpen, "data-test-id": "toggle-box" },
+            React.createElement("div", { className: "new-collapse-box__header" },
+                React.createElement("div", { className: "new-collapse-box__header-inner" }, this.props.header),
+                React.createElement("button", { className: "new-collapse-box__divider", onClick: this.toggle, "aria-controls": this.htmlId },
+                    React.createElement("span", { className: "label label--translucent new-collapse-box__divider-label" }, this.props.getToggleButtonLabel(isOpen)))),
+            React.createElement("div", { className: "new-collapse-box__content" },
                 React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
                         'toggle-box__content--animation': this.state.isAnimating,
                     }) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true

package/react/components/ToggleBox/SimpleToggleBox.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { IPropsSimple } from "../ToggleBox/index";
+import { IPropsSimple } from '../ToggleBox/index';
 interface IState {
     isOpen: boolean;
     isAnimating: boolean;

package/react/components/ToggleBox/SimpleToggleBox.js

@@ -68,13 +68,13 @@ var SimpleToggleBox = /** @class */ (function (_super) {
         _this.htmlId = (0, react_id_generator_1.default)('togglebox-');
         _this.contentRef = React.createRef();
         _this.handleKeyDown = function (event) {
-            if (event.key === "ArrowRight" && !_this.state.isOpen) {
+            if (event.key === 'ArrowRight' && !_this.state.isOpen) {
                 _this.setState({ isOpen: true });
             }
-            else if (event.key === "ArrowLeft" && _this.state.isOpen) {
+            else if (event.key === 'ArrowLeft' && _this.state.isOpen) {
                 _this.setState({ isOpen: false });
             }
-            else if (event.key === "Enter") {
+            else if (event.key === 'Enter') {
                 _this.toggle();
             }
         };
@@ -122,8 +122,8 @@ var SimpleToggleBox = /** @class */ (function (_super) {
                 'toggle-box--circle': this.props.circledChevron
             },
             _a["toggle-box--margin-".concat(this.props.margin)] = this.props.margin,
-            _a['hidden'] = !this.state.isOpen,
-            _a['open'] = this.state.isOpen,
+            _a.hidden = !this.state.isOpen,
+            _a.open = this.state.isOpen,
             _a), this.props.className);
         var _b = this.props, title = _b.title, children = _b.children, badge = _b.badge;
         var isOpen = this.state.isOpen;

package/react/components/ToggleBox/index.js

@@ -69,11 +69,11 @@ var ToggleBox = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     ToggleBox.prototype.render = function () {
-        if (this.props.variant === "simple") {
-            return (React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
+        if (this.props.variant === 'simple') {
+            return React.createElement(SimpleToggleBox_1.SimpleToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props));
         }
         else {
-            return (React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props)));
+            return React.createElement(CustomHeaderToggleBox_1.CustomHeaderToggleBox, __assign({ ref: this.props.toggleBoxRef }, this.props));
         }
     };
     return ToggleBox;

package/react/components/TreeMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 interface IState<T> {
     options: Array<ITreeMenuNode<T>>;
     openDropdown: boolean;

package/react/components/TreeMenu.js

@@ -110,9 +110,9 @@ var TreeMenu = /** @class */ (function (_super) {
         };
         _this.onMouseDown = function (event) {
             var _a, _b;
-            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                && (((_b = _this.treeMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)
-                && _this.state.openDropdown) {
+            if (((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true &&
+                ((_b = _this.treeMenuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true &&
+                _this.state.openDropdown) {
                 _this.setState({
                     openDropdown: false,
                     searchFieldValue: '',
@@ -143,9 +143,9 @@ var TreeMenu = /** @class */ (function (_super) {
         };
         _this.componentDidMount = function () {
             _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", _this.onMouseDown);
-            document.addEventListener("keydown", _this.onKeyDown);
-            document.addEventListener("keydown", _this.onPressEsc);
+            document.addEventListener('mousedown', _this.onMouseDown);
+            document.addEventListener('keydown', _this.onKeyDown);
+            document.addEventListener('keydown', _this.onPressEsc);
         };
         _this.state = {
             options: _this.props.getOptions ? _this.props.getOptions() : [],
@@ -176,9 +176,9 @@ var TreeMenu = /** @class */ (function (_super) {
         return _this;
     }
     TreeMenu.prototype.componentWillUnmount = function () {
-        document.removeEventListener("mousedown", this.onMouseDown);
-        document.removeEventListener("keydown", this.onKeyDown);
-        document.addEventListener("keydown", this.onPressEsc);
+        document.removeEventListener('mousedown', this.onMouseDown);
+        document.removeEventListener('keydown', this.onKeyDown);
+        document.addEventListener('keydown', this.onPressEsc);
     };
     TreeMenu.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _this = this;
@@ -186,9 +186,9 @@ var TreeMenu = /** @class */ (function (_super) {
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
         }
-        if ((prevState.activeTree !== this.state.activeTree)
-            || (prevState.filterArr !== this.state.filterArr)
-            || (prevState.options !== this.state.options)) {
+        if (prevState.activeTree !== this.state.activeTree ||
+            prevState.filterArr !== this.state.filterArr ||
+            prevState.options !== this.state.options) {
             (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
         }
         // Update options when getOptions prop is updated
@@ -220,8 +220,9 @@ var TreeMenu = /** @class */ (function (_super) {
                         var _a;
                         (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.setOptions({
                             placement: state.placement,
-                            modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) { return (modifier.name === 'flip'
-                                ? __assign(__assign({}, modifier), { enabled: false }) : modifier); }),
+                            modifiers: _this.popperInstance.state.options.modifiers.map(function (modifier) {
+                                return modifier.name === 'flip' ? __assign(__assign({}, modifier), { enabled: false }) : modifier;
+                            }),
                         });
                     },
                 });
@@ -314,9 +315,7 @@ var TreeMenu = /** @class */ (function (_super) {
         var _this = this;
         var filteredArr = arr.filter(function (item) {
             if (_this.state.searchFieldValue) {
-                if (_this.props.getLabel(item.value)
-                    .toLowerCase()
-                    .includes(_this.state.searchFieldValue.toLowerCase())) {
+                if (_this.props.getLabel(item.value).toLowerCase().includes(_this.state.searchFieldValue.toLowerCase())) {
                     return item.value;
                 }
                 else {
@@ -349,42 +348,37 @@ var TreeMenu = /** @class */ (function (_super) {
                 React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
                         zIndex: this.zIndex,
                     } },
-                    React.createElement("div", { className: 'autocomplete__header' },
+                    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("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;
                                     _this.setState({ searchFieldValue: event.target.value });
                                     (_a = _this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
                                 } }))),
-                    (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.state.searchFieldValue === '' ?
-                        this.props.getOptions ?
-                            React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select", role: 'tree' }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, onClick: function () {
-                                    onSelect(option);
-                                }, disabledItem: disabledItem(option), getBorderColor: _this.props.getBorderColor, parentCategory: _this.state.buttonValue == null
-                                    ? undefined
-                                    : _this.props.getLabel(_this.state.buttonValue.value), 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))))));
+                    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.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { ref: this.ref, className: "suggestion-list suggestion-list--multi-select", role: "tree" }, this.state.options.map(function (option, i) { return (React.createElement(TreeSelectItem_1.TreeSelectItem, { key: i, option: option, handleTree: _this.handleTree, onClick: function () {
+                            onSelect(option);
+                        }, disabledItem: disabledItem(option), getBorderColor: _this.props.getBorderColor, parentCategory: _this.state.buttonValue == null
+                            ? undefined
+                            : _this.props.getLabel(_this.state.buttonValue.value), 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 TreeMenu;
 }(React.Component));

package/react/components/TreeSelect/TreeSelect.d.ts

@@ -1,6 +1,6 @@
-import * as React from "react";
+import * as React from 'react';
 import { IInputWrapper } from '../Form/InputWrapper';
-import { DropResult } from "react-beautiful-dnd";
+import { DropResult } from 'react-beautiful-dnd';
 interface IState<T> {
     value: Array<T>;
     options: Array<ITreeNode<T>>;