superdesk-ui-framework 4.0.46 → 4.0.48

package/react/components/TreeSelect/TreeSelect.js

@@ -109,9 +109,9 @@ var TreeSelect = /** @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.treeSelectRef.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.treeSelectRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true &&
+                _this.state.openDropdown) {
                 _this.setState({
                     openDropdown: false,
                     searchFieldValue: '',
@@ -142,9 +142,9 @@ var TreeSelect = /** @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);
             if (_this.props.dropdownInitiallyOpen) {
                 _this.setState({ openDropdown: true });
             }
@@ -188,9 +188,9 @@ var TreeSelect = /** @class */ (function (_super) {
         return _this;
     }
     TreeSelect.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);
     };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a, _b;
@@ -212,9 +212,9 @@ var TreeSelect = /** @class */ (function (_super) {
             this.toggleMenu();
         }
         if (this.props.kind === 'synchronous') {
-            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) {
                 (_b = this.popperInstance) === null || _b === void 0 ? void 0 : _b.update();
             }
         }
@@ -380,8 +380,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 else {
                     var filteredItems_2 = [];
                     option.children.forEach(function (item) {
-                        if (!_this.state.value.includes(item.value)
-                            && !item.children) {
+                        if (!_this.state.value.includes(item.value) && !item.children) {
                             filteredItems_2.push(item.value);
                         }
                     });
@@ -433,7 +432,8 @@ var TreeSelect = /** @class */ (function (_super) {
         if (this.props.kind === 'synchronous') {
             var filteredArr = arr.filter(function (item) {
                 if (_this.state.searchFieldValue) {
-                    if (_this.props.getLabel(item.value)
+                    if (_this.props
+                        .getLabel(item.value)
                         .toLowerCase()
                         .includes(_this.state.searchFieldValue.toLowerCase())) {
                         return item.value;
@@ -451,31 +451,27 @@ var TreeSelect = /** @class */ (function (_super) {
             }
             else {
                 return filteredArr.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, onClick: function () { return _this.setState({
-                            searchFieldValue: '',
-                        }); } }));
+                    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, onClick: function () {
+                            return _this.setState({
+                                searchFieldValue: '',
+                            });
+                        } }));
                 });
             }
         }
         else if (this.props.kind === 'asynchronous') {
             if (this.state.options.length > 0) {
                 return this.state.options.map(function (item, i) {
-                    var selectedItem = _this.state.value.some(function (obj) {
-                        return _this.props.getId(obj) === _this.props.getId(item.value);
-                    });
-                    return (React.createElement("li", { key: i, className: 'suggestion-item suggestion-item--multi-select', onClick: function (event) {
+                    var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(item.value); });
+                    return (React.createElement("li", { key: i, className: "suggestion-item suggestion-item--multi-select", onClick: function (event) {
                             _this.handleValue(event, item);
                         } },
-                        React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate
-                            ? _this.props.optionTemplate(item.value)
-                            : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
+                        React.createElement("button", { className: "suggestion-item--btn", "data-test-id": "option" }, _this.props.optionTemplate ? (_this.props.optionTemplate(item.value)) : (React.createElement("span", { className: selectedItem ? 'suggestion-item--selected' : undefined }, _this.props.getLabel(item.value))))));
                 });
             }
             else {
-                return React.createElement("li", { className: "suggestion-item--nothing-found" }, (_a = this.props.noResultsFoundMessage) !== null && _a !== void 0 ? _a : 'Nothing found');
+                return (React.createElement("li", { className: "suggestion-item--nothing-found" }, (_a = this.props.noResultsFoundMessage) !== null && _a !== void 0 ? _a : 'Nothing found'));
             }
         }
         else {
@@ -503,14 +499,12 @@ var TreeSelect = /** @class */ (function (_super) {
                 }
             });
         });
-        var selectedButton = this.state.value.some(function (obj) {
-            return _this.props.getId(obj) === _this.props.getId(buttonValue.value);
-        });
+        var selectedButton = this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(buttonValue.value); });
         if (!selectedButton) {
-            return (React.createElement("button", { className: 'autocomplete__button autocomplete__button--multi-select', ref: this.categoryButtonRef, onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category"));
+            return (React.createElement("button", { className: "autocomplete__button autocomplete__button--multi-select", ref: this.categoryButtonRef, onMouseOver: function () { return _this.setState({ buttonMouseEvent: true }); }, onMouseOut: function () { return _this.setState({ buttonMouseEvent: false }); }, onClick: function (event) { return _this.handleBranchValue(event, buttonValue); } }, "Choose entire category"));
         }
         else {
-            return (React.createElement("button", { className: 'autocomplete__button autocomplete__button--multi-select autocomplete__button--disabled' }, "Category selected"));
+            return (React.createElement("button", { className: "autocomplete__button autocomplete__button--multi-select autocomplete__button--disabled" }, "Category selected"));
         }
     };
     TreeSelect.prototype.handleDebounce = function () {
@@ -542,8 +536,8 @@ var TreeSelect = /** @class */ (function (_super) {
         if (this.props.valueTemplate) {
             return this.props.valueTemplate(item, Wrapper);
         }
-        var content = (_c = (_b = (_a = this.props).optionTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : (React.createElement("span", null, this.props.getLabel(item)));
-        return (React.createElement(Wrapper, null, content));
+        var content = (_c = (_b = (_a = this.props).optionTemplate) === null || _b === void 0 ? void 0 : _b.call(_a, item)) !== null && _c !== void 0 ? _c : React.createElement("span", null, this.props.getLabel(item));
+        return React.createElement(Wrapper, null, content);
     };
     TreeSelect.prototype.render = function () {
         var _this = this;
@@ -581,71 +575,65 @@ var TreeSelect = /** @class */ (function (_super) {
                 return React.createElement(React.Fragment, null, children);
             };
         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: this.props.fullWidth, "data-test-id": this.props['data-test-id'], inputWrapper: this.props.inputWrapper },
-            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: "\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,
-                                        searchFieldValue: '',
-                                    });
-                                }
-                            }, "data-test-id": "open-popover", "aria-haspopup": "tree", "aria-expanded": this.state.openDropdown },
-                            React.createElement("i", { className: "icon-plus-large" })),
-                    React.createElement(ListWrapper, null, this.state.value.map(function (item, i) {
-                        var Wrapper = function (_a) {
-                            var backgroundColor = _a.backgroundColor, children = _a.children;
-                            return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor, draggable: _this.props.sortable }, children));
-                        };
-                        var itemId = _this.props.getId(item);
-                        return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.renderItemContent(item, Wrapper)));
-                    })),
-                    this.state.value.length > 0
-                        ? (this.props.readOnly || this.props.disabled)
-                            || React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
-                                    e.stopPropagation();
-                                    _this.setState({ value: [] });
-                                } },
-                                React.createElement(Icon_1.Icon, { name: 'remove-sign' }))
-                        : null)
-                : React.createElement("div", { className: "tags-input__tags" },
-                    this.props.readOnly
-                        || React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
-                                _this.setState({ openDropdown: !_this.state.openDropdown });
-                            } }),
-                    this.state.value.length < 1
-                        && React.createElement("span", { className: 'tags-input__single-item'
-                                + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
-                            React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder)),
-                    this.state.value.map(function (item, i) {
-                        var Wrapper = function (_a) {
-                            var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
-                            return (React.createElement("span", { className: 'tags-input__single-item'
-                                    + (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
-                                _this.props.getBorderColor
-                                    && 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, 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' }))))));
-                        };
-                        return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
-                    }))),
+            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: "\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,
+                                searchFieldValue: '',
+                            });
+                        }
+                    }, "data-test-id": "open-popover", "aria-haspopup": "tree", "aria-expanded": this.state.openDropdown },
+                    React.createElement("i", { className: "icon-plus-large" }))),
+                React.createElement(ListWrapper, null, this.state.value.map(function (item, i) {
+                    var Wrapper = function (_a) {
+                        var backgroundColor = _a.backgroundColor, children = _a.children;
+                        return (React.createElement(TreeSelectPill_1.TreeSelectPill, { item: item, readOnly: _this.props.readOnly, disabled: _this.props.disabled, valueTemplate: _this.props.valueTemplate, backgroundColor: backgroundColor, onRemove: function () { return _this.removeClick(i); }, getBackgroundColor: _this.props.getBackgroundColor, draggable: _this.props.sortable }, children));
+                    };
+                    var itemId = _this.props.getId(item);
+                    return (React.createElement(ItemWrapper, { itemId: itemId, key: itemId, i: i }, _this.renderItemContent(item, Wrapper)));
+                })),
+                this.state.value.length > 0
+                    ? this.props.readOnly ||
+                        this.props.disabled || (React.createElement("button", { className: "tags-input__remove-value", style: { position: 'relative', bottom: '2px' }, onClick: function (e) {
+                            e.stopPropagation();
+                            _this.setState({ value: [] });
+                        } },
+                        React.createElement(Icon_1.Icon, { name: "remove-sign" })))
+                    : null)) : (React.createElement("div", { className: "tags-input__tags" },
+                this.props.readOnly || (React.createElement("button", { className: "tags-input__overlay-button", ref: this.openDropdownRef, onClick: function () {
+                        _this.setState({ openDropdown: !_this.state.openDropdown });
+                    } })),
+                this.state.value.length < 1 && (React.createElement("span", { className: 'tags-input__single-item' +
+                        (this.props.readOnly ? ' tags-input__tag-item--readonly' : '') },
+                    React.createElement("span", { className: "tags-input__placeholder" }, this.props.placeholder))),
+                this.state.value.map(function (item, i) {
+                    var Wrapper = function (_a) {
+                        var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
+                        return (React.createElement("span", { className: 'tags-input__single-item' +
+                                (_this.props.readOnly ? ' tags-input__tag-item--readonly' : ''), onClick: function () { return !_this.props.readOnly && _this.removeClick(i); } },
+                            _this.props.getBorderColor && (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, 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" }))))));
+                    };
+                    return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
+                })))),
             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: {
+                React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
+                        (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
                         width: (_a = this.treeSelectRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth,
                         minWidth: '300px',
                     }, ref: this.dropdownRef },
-                    React.createElement("div", { className: 'autocomplete__header' },
+                    React.createElement("div", { className: "autocomplete__header" },
                         React.createElement("div", { className: "autocomplete__icon" },
                             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, _b;
                                     if (_this.props.kind === 'synchronous') {
@@ -668,39 +656,29 @@ var TreeSelect = /** @class */ (function (_super) {
                                         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", role: 'tree', "aria-multiselectable": this.props.allowMultiple }, 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, parentCategory: _this.state.buttonValue == null
-                                            ? undefined
-                                            : _this.props.getLabel(_this.state.buttonValue.value), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, getLabel: _this.props.getLabel, optionTemplate: _this.props.optionTemplate, 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.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", role: "tree", "aria-multiselectable": this.props.allowMultiple }, 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, parentCategory: _this.state.buttonValue == null
+                                ? undefined
+                                : _this.props.getLabel(_this.state.buttonValue.value), getBorderColor: _this.props.getBorderColor, getBackgroundColor: _this.props.getBackgroundColor, getId: _this.props.getId, getLabel: _this.props.getLabel, optionTemplate: _this.props.optionTemplate, 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/TreeSelect/TreeSelectItem.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 import { ITreeNode } from './TreeSelect';
 export declare function getPrefixedItemId(id: string): string;
 interface IProps<T> {

package/react/components/TreeSelect/TreeSelectItem.js

@@ -63,7 +63,7 @@ var TreeSelectItem = /** @class */ (function (_super) {
     }
     TreeSelectItem.prototype.render = function () {
         var _this = this;
-        return (React.createElement("li", { className: 'suggestion-item suggestion-item--multi-select', role: 'none', onClick: function (event) {
+        return (React.createElement("li", { className: "suggestion-item suggestion-item--multi-select", role: "none", onClick: function (event) {
                 var _a, _b;
                 if (!_this.props.disabledItem) {
                     (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -74,19 +74,17 @@ var TreeSelectItem = /** @class */ (function (_super) {
             } },
             React.createElement("button", { 
                 // the className is generated in order to focus the element later
-                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value)))
-                    + (this.props.disabledItem ? ' suggestion-item--disabled' : ''), onKeyDown: function (event) {
+                className: "suggestion-item--btn ".concat(getPrefixedItemId(this.props.getId(this.props.option.value))) +
+                    (this.props.disabledItem ? ' suggestion-item--disabled' : ''), onKeyDown: function (event) {
                     var _a, _b;
                     if (event.key === 'Enter' && _this.props.option.children) {
                         (_b = (_a = _this.props).onKeyDown) === null || _b === void 0 ? void 0 : _b.call(_a);
                     }
-                }, disabled: this.props.disabledItem, "data-test-id": "option", role: 'treeitem', "aria-selected": this.props.selectedItem === true, "aria-disabled": this.props.disabledItem === true },
-                (this.props.getBorderColor && !this.props.allowMultiple)
-                    && React.createElement("div", { className: "item-border", style: {
-                            backgroundColor: this.props.getBorderColor(this.props.option.value),
-                        } }),
-                React.createElement("span", { className: 'suggestion-item--bgcolor'
-                        + (this.props.selectedItem ? ' suggestion-item--selected' : ''), style: (this.props.getBackgroundColor && this.props.option.value)
+                }, disabled: this.props.disabledItem, "data-test-id": "option", role: "treeitem", "aria-selected": this.props.selectedItem === true, "aria-disabled": this.props.disabledItem === true },
+                this.props.getBorderColor && !this.props.allowMultiple && (React.createElement("div", { className: "item-border", style: {
+                        backgroundColor: this.props.getBorderColor(this.props.option.value),
+                    } })),
+                React.createElement("span", { className: 'suggestion-item--bgcolor' + (this.props.selectedItem ? ' suggestion-item--selected' : ''), style: this.props.getBackgroundColor && this.props.option.value
                         ? {
                             backgroundColor: this.props.getBackgroundColor(this.props.option.value),
                             color: (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.option.value)),
@@ -94,9 +92,8 @@ var TreeSelectItem = /** @class */ (function (_super) {
                         : undefined }, this.props.optionTemplate
                     ? this.props.optionTemplate(this.props.option.value)
                     : this.props.getLabel(this.props.option.value)),
-                this.props.option.children
-                    && React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true", "data-test-id": "children-indicator" },
-                        React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
+                this.props.option.children && (React.createElement("span", { className: "suggestion-item__icon", "aria-hidden": "true", "data-test-id": "children-indicator" },
+                    React.createElement(Icon_1.Icon, { name: "chevron-right-thin" }))))));
     };
     return TreeSelectItem;
 }(React.Component));

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

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 interface IProps<T> {
     item: T;
     readOnly?: boolean;

package/react/components/TreeSelect/TreeSelectPill.js

@@ -70,20 +70,19 @@ var TreeSelectPill = /** @class */ (function (_super) {
         });
         return (React.createElement("li", { className: classes, style: this.props.valueTemplate
                 ? { backgroundColor: this.props.backgroundColor }
-                : this.props.getBackgroundColor
-                    && { backgroundColor: this.props.getBackgroundColor(this.props.item) }, "data-test-id": "item" },
-            this.props.draggable && (React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: '3', dotRows: '4' })),
+                : this.props.getBackgroundColor && {
+                    backgroundColor: this.props.getBackgroundColor(this.props.item),
+                }, "data-test-id": "item" },
+            this.props.draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
             React.createElement("span", { className: "tags-input__helper-box", style: {
                     color: this.props.backgroundColor
                         ? (0, helpers_1.getTextColor)(this.props.backgroundColor)
-                        : this.props.getBackgroundColor
-                            && (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
+                        : this.props.getBackgroundColor &&
+                            (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
                 } },
                 this.props.children,
-                !this.props.readOnly
-                    && React.createElement("button", { className: "tags-input__remove-button", "data-test-id": "remove", onClick: function () { return (!_this.props.readOnly && !_this.props.disabled)
-                            && _this.props.onRemove(); } },
-                        React.createElement(Icon_1.Icon, { name: "close-small" })))));
+                !this.props.readOnly && (React.createElement("button", { className: "tags-input__remove-button", "data-test-id": "remove", onClick: function () { return !_this.props.readOnly && !_this.props.disabled && _this.props.onRemove(); } },
+                    React.createElement(Icon_1.Icon, { name: "close-small" }))))));
     };
     return TreeSelectPill;
 }(React.Component));

package/react/components/WithPagination.js

@@ -72,25 +72,22 @@ function getPagination(currentPage, totalPages) {
         currentPage + 1,
         currentPage + 2,
     ].filter(function (page) { return page >= 1 && page <= totalPages; });
-    if (!basePages.includes(1)) { // include first and maybe dots
+    if (!basePages.includes(1)) {
+        // include first and maybe dots
         var firstInCurrentList = basePages[0];
         if (firstInCurrentList !== 1) {
-            basePages = __spreadArray([
-                'dots'
-            ], basePages, true);
+            basePages = __spreadArray(['dots'], basePages, true);
         }
-        basePages = __spreadArray([
-            1
-        ], basePages, true);
+        basePages = __spreadArray([1], basePages, true);
     }
-    if (!basePages.includes(totalPages)) { // include last and maybe dots
+    if (!basePages.includes(totalPages)) {
+        // include last and maybe dots
         var lastInCurrentList = basePages[basePages.length - 1];
-        if (lastInCurrentList !== totalPages - 1) { // add dots if we're skipping some numbers
+        if (lastInCurrentList !== totalPages - 1) {
+            // add dots if we're skipping some numbers
             basePages = basePages.concat('dots');
         }
-        basePages = __spreadArray(__spreadArray([], basePages, true), [
-            totalPages,
-        ], false);
+        basePages = __spreadArray(__spreadArray([], basePages, true), [totalPages], false);
     }
     return basePages;
 }
@@ -161,7 +158,7 @@ var WithPagination = /** @class */ (function (_super) {
         }
         var pageElements = getPagination(this.state.currentPage, this.pageCount).map(function (el, i) {
             if (el === 'dots') {
-                return (React.createElement("span", { "data-test-id": "more-pages", className: 'sd-pagination__item sd-pagination__item--more' }, "..."));
+                return (React.createElement("span", { "data-test-id": "more-pages", className: "sd-pagination__item sd-pagination__item--more" }, "..."));
             }
             else {
                 return (React.createElement("button", { "data-test-id": "page-button-".concat(i), className: _this.state.currentPage === el
@@ -170,15 +167,15 @@ var WithPagination = /** @class */ (function (_super) {
             }
         });
         pageElements.unshift(React.createElement(React.Fragment, null,
-            React.createElement("button", { "data-test-id": "btn-1", className: 'sd-pagination__item sd-pagination__item--start', disabled: this.state.currentPage === 1, onClick: function () { return _this.switchPage(1); } },
-                React.createElement(Icon_1.Icon, { name: 'backward-thin' })),
-            React.createElement("button", { "data-test-id": "btn-2", className: 'sd-pagination__item sd-pagination__item--start', disabled: this.state.currentPage <= 1, onClick: function () { return _this.switchPage(_this.state.currentPage - 1); } },
-                React.createElement(Icon_1.Icon, { name: 'chevron-left-thin' }))));
+            React.createElement("button", { "data-test-id": "btn-1", className: "sd-pagination__item sd-pagination__item--start", disabled: this.state.currentPage === 1, onClick: function () { return _this.switchPage(1); } },
+                React.createElement(Icon_1.Icon, { name: "backward-thin" })),
+            React.createElement("button", { "data-test-id": "btn-2", className: "sd-pagination__item sd-pagination__item--start", disabled: this.state.currentPage <= 1, onClick: function () { return _this.switchPage(_this.state.currentPage - 1); } },
+                React.createElement(Icon_1.Icon, { name: "chevron-left-thin" }))));
         pageElements.push(React.createElement(React.Fragment, null,
-            React.createElement("button", { "data-test-id": "btn-3", className: 'sd-pagination__item sd-pagination__item--forward', onClick: function () { return _this.switchPage(_this.state.currentPage + 1); }, disabled: this.state.currentPage === this.pageCount },
-                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' })),
-            React.createElement("button", { "data-test-id": "btn-4", className: 'sd-pagination__item sd-pagination__item--end', onClick: function () { return _this.switchPage(_this.pageCount); }, disabled: this.state.currentPage === this.pageCount },
-                React.createElement(Icon_1.Icon, { name: 'forward-thin' }))));
+            React.createElement("button", { "data-test-id": "btn-3", className: "sd-pagination__item sd-pagination__item--forward", onClick: function () { return _this.switchPage(_this.state.currentPage + 1); }, disabled: this.state.currentPage === this.pageCount },
+                React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })),
+            React.createElement("button", { "data-test-id": "btn-4", className: "sd-pagination__item sd-pagination__item--end", onClick: function () { return _this.switchPage(_this.pageCount); }, disabled: this.state.currentPage === this.pageCount },
+                React.createElement(Icon_1.Icon, { name: "forward-thin" }))));
         var StyledPagination = function () { return (React.createElement("div", { style: {
                 display: 'flex',
                 flexDirection: 'row',

package/react/components/WithPortal.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 interface IProps {
     active: boolean;
     'data-test-id'?: string;

package/react/components/WithPortal.js

@@ -72,7 +72,8 @@ var WithPortal = /** @class */ (function (_super) {
         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 (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));

package/react/components/WithSizeObserver.js

@@ -100,9 +100,7 @@ var WithSizeObserver = /** @class */ (function (_super) {
         return (React.createElement("div", { ref: function (el) {
                 _this.el = el;
             }, style: __assign({ position: 'relative', width: '100%', height: '100%' }, this.props.style) },
-            React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }, dimensions === 'not-initialized'
-                ? null
-                : this.props.children(dimensions))));
+            React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' } }, dimensions === 'not-initialized' ? null : this.props.children(dimensions))));
     };
     return WithSizeObserver;
 }(React.PureComponent));

package/react/components/_Positioner.js

@@ -91,7 +91,7 @@ var PopperWrapper = /** @class */ (function (_super) {
         var viewportHeight = document.documentElement.clientHeight;
         var viewportWidth = document.documentElement.clientWidth;
         var availableSpaceTop = rect.top - padding;
-        var availableSpaceBottom = (viewportHeight - rect.bottom) - padding;
+        var availableSpaceBottom = viewportHeight - rect.bottom - padding;
         var availableSpaceLeft = rect.left;
         var availableSpaceRight = viewportWidth - rect.right;
         this.wrapper.style.maxHeight = Math.max(availableSpaceBottom, availableSpaceTop) + 'px';
@@ -123,7 +123,7 @@ var PopperWrapper = /** @class */ (function (_super) {
                 if (w != null) {
                     _this.wrapper = w;
                 }
-            }, tabIndex: 0, role: 'dialog', "aria-labelledby": 'popoverTitle', onKeyDown: function (event) {
+            }, tabIndex: 0, role: "dialog", "aria-labelledby": "popoverTitle", onKeyDown: function (event) {
                 if (event.key === 'Escape') {
                     event.preventDefault();
                     _this.props.close();
@@ -182,13 +182,13 @@ var Positioner = /** @class */ (function (_super) {
     };
     // arguments are in a different order, because the method is bound
     Positioner.prototype.closeDropdownOnOutsideClick = function (wrapper, event) {
-        if (this.state.open === true
-            && event != null
-            && event.target !== this.triggerElement
-            && event.target != null
-            && event.target instanceof Node // wrapper.contains accepts only Node type
-            && wrapper != null
-            && !wrapper.contains(event.target)) {
+        if (this.state.open === true &&
+            event != null &&
+            event.target !== this.triggerElement &&
+            event.target != null &&
+            event.target instanceof Node && // wrapper.contains accepts only Node type
+            wrapper != null &&
+            !wrapper.contains(event.target)) {
             this.setState({
                 open: false,
             });
@@ -197,9 +197,9 @@ var Positioner = /** @class */ (function (_super) {
     Positioner.prototype.componentDidUpdate = function () {
         var _this = this;
         if (this.state.open === true) {
-            ReactDOM.render((React.createElement(PopperWrapper, __assign({}, this.props, { handleCloseOthers: this.handleCloseOthers, closeDropdownOnOutsideClick: this.closeDropdownOnOutsideClick, triggerElement: this.triggerElement, close: function () {
+            ReactDOM.render(React.createElement(PopperWrapper, __assign({}, this.props, { handleCloseOthers: this.handleCloseOthers, closeDropdownOnOutsideClick: this.closeDropdownOnOutsideClick, triggerElement: this.triggerElement, close: function () {
                     _this.setState({ open: false });
-                } }))), this.elementForPositioner);
+                } })), this.elementForPositioner);
         }
         else {
             ReactDOM.unmountComponentAtNode(this.elementForPositioner);