superdesk-ui-framework 4.0.26 → 4.0.28

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/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.26",
+  "version": "4.0.28",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

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

@@ -67,7 +67,7 @@ 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 },
+        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, 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));

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/Select.d.ts

@@ -3,6 +3,7 @@ import { IInputWrapper } from './Form/InputWrapper';
 interface ISelect extends IInputWrapper {
     value?: string;
     onChange(newValue: string): void;
+    'data-test-id'?: string;
 }
 declare class Select extends React.Component<ISelect> {
     private htmlId;

package/react/components/Select.js

@@ -63,7 +63,7 @@ var Select = /** @class */ (function (_super) {
         }
         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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
-                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
     return Select;
 }(React.Component));

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/TreeMenu.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);
@@ -177,6 +188,20 @@ var TreeMenu = /** @class */ (function (_super) {
             if (this.openDropdownRef.current && this.dropdownRef.current) {
                 this.popperInstance = (0, core_1.createPopper)(this.openDropdownRef.current, this.dropdownRef.current, {
                     placement: 'bottom-start',
+                    modifiers: [
+                        {
+                            name: 'flip',
+                            enabled: true,
+                        },
+                    ],
+                    onFirstUpdate: function (state) {
+                        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); }),
+                        });
+                    },
                 });
             }
             (_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', function (e) {

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)

package/react/components/TreeSelect/TreeSelectPill.js

@@ -46,7 +46,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var React = __importStar(require("react"));
 var DragHandle_1 = require("../DragHandle");
 var Icon_1 = require("../Icon");
-var Label_1 = require("../Label");
+var helpers_1 = require("../../helpers");
 var TreeSelectPill = /** @class */ (function (_super) {
     __extends(TreeSelectPill, _super);
     function TreeSelectPill() {
@@ -65,9 +65,9 @@ var TreeSelectPill = /** @class */ (function (_super) {
             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, Label_1.getTextColor)(this.props.backgroundColor)
+                        ? (0, helpers_1.getTextColor)(this.props.backgroundColor)
                         : this.props.getBackgroundColor
-                            && (0, Label_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
+                            && (0, helpers_1.getTextColor)(this.props.getBackgroundColor(this.props.item)),
                 } },
                 this.props.children,
                 !this.props.readOnly

package/react/helpers.d.ts

@@ -1,2 +1,3 @@
 export declare function assertNever(x: never): never;
 export declare function nameof<T>(name: keyof T): string;
+export declare function getTextColor(backgroundColor: string): 'black' | 'white' | undefined;

package/react/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.nameof = exports.assertNever = void 0;
+exports.getTextColor = exports.nameof = exports.assertNever = void 0;
 function assertNever(x) {
     throw new Error('Unexpected object: ' + x);
 }
@@ -9,3 +9,16 @@ function nameof(name) {
     return name.toString();
 }
 exports.nameof = nameof;
+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/index.d.ts

@@ -99,5 +99,6 @@ export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 export { CalendarWeekDayItem } from './components/Lists/CalendarWeekDayItem';
+export { getTextColor } from './helpers';
 export declare const ToggleBoxNext: any;
 export declare const reactToAngular1: any;

package/react/index.js

@@ -18,7 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = exports.Prop = exports.PropsList = exports.StrechBar = exports.SlidingToolbar = exports.SubNavDivider = exports.SubNav = exports.LeftMenu = exports.TabList = exports.Tab = exports.NavButton = exports.CheckButtonGroup = exports.CheckGroup = exports.CheckboxButton = exports.RadioButtonGroup = exports.Checkbox = exports.RadioGroup = exports.Loader = exports.ButtonGroup = exports.SwitchGroup = exports.Switch = exports.FormLabel = exports.TimePickerV2 = exports.TimePicker = exports.DatePickerISO = exports.DateTimePicker = exports.DatePicker = exports.getDurationString = exports.DurationInput = exports.Tooltip = exports.IconLabel = exports.IconButton = exports.Rotate = exports.AvatarPlaceholder = exports.Avatar = exports.AvatarGroup = exports.AvatarContentImage = exports.AvatarContentText = exports.AvatarWrapper = exports.Alert = exports.Badge = exports.Label = exports.Popover = exports.WithPagination = exports.SelectWithTemplate = exports.Option = exports.Select = exports.Input = exports.Button = exports.HelloWorld = void 0;
 exports.Text = exports.LoadingOverlay = exports.Spinner = exports.ListItemLoader = exports.Skeleton = exports.IllustrationButton = exports.SvgIconIllustration = exports.WithSizeObserver = exports.SearchBar = exports.CreateButton = exports.DropZone = exports.ThemeSelector = exports.IconPicker = exports.SelectGrid = exports.ToggleBox = exports.Menu = exports.toasted = exports.GridItemCheckWrapper = exports.GridItemTopActions = exports.GridItemFooterActions = exports.GridItemFooterBlock = exports.GridItemSlug = exports.GridItemText = exports.GridItemTitle = exports.GridItemTime = exports.GridItemContentBlock = exports.GridItemFooter = exports.GridItemMedia = exports.GridItemContent = exports.GridItem = exports.GridList = exports.Modal = exports.Carousel = exports.DonutChart = exports.Autocomplete = exports.EmptyState = exports.Tabs = exports.TabContent = exports.TabPanel = exports.TabLabel = exports.TagInput = exports.Tag = exports.Dropdown = exports.DropdownDivider = exports.DropdownLabel = exports.DropdownItem = exports.DropdownFirst = exports.HeadingText = exports.ContentDivider = exports.Divider = void 0;
-exports.CalendarWeekDayItem = exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.showPopup = exports.PopupPositioner = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = void 0;
+exports.getTextColor = exports.CalendarWeekDayItem = exports.DragHandle = exports.DragHandleDots = exports.ResizeObserverComponent = exports.SpacerBlock = exports.Spacer = exports.showPopup = exports.PopupPositioner = exports.WithPopover = exports.ResizablePanels = exports.MultiSelect = exports.ContentListItem = exports.TableListItem = exports.TableList = exports.TreeMenu = exports.TreeSelect = exports.BottomNav = exports.Heading = exports.Time = void 0;
 var HelloWorld_1 = require("./components/HelloWorld");
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
 var Button_1 = require("./components/Button");
@@ -238,3 +238,5 @@ var DragHandle_1 = require("./components/DragHandle");
 Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return DragHandle_1.DragHandle; } });
 var CalendarWeekDayItem_1 = require("./components/Lists/CalendarWeekDayItem");
 Object.defineProperty(exports, "CalendarWeekDayItem", { enumerable: true, get: function () { return CalendarWeekDayItem_1.CalendarWeekDayItem; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "getTextColor", { enumerable: true, get: function () { return helpers_1.getTextColor; } });