superdesk-ui-framework 4.0.46 → 4.0.48

package/react/components/SelectGrid.js

@@ -73,7 +73,10 @@ var SelectGrid = /** @class */ (function (_super) {
                 (_b = _this.overlayPanel.current) === null || _b === void 0 ? void 0 : _b.toggle(event);
             }
             document.addEventListener('keydown', _this.handleKeydown);
-            setTimeout(function () { var _a; (_a = _this.searchInput.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+            setTimeout(function () {
+                var _a;
+                (_a = _this.searchInput.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
             _this.loadItems();
         };
         _this.search = function (event) {
@@ -105,27 +108,19 @@ var SelectGrid = /** @class */ (function (_super) {
         };
         _this.handleKeydown = function (event) {
             var _a, _b, _c, _d, _e, _f;
-            var navKeys = [
-                "Enter",
-                "ArrowRight",
-                "ArrowLeft",
-                "ArrowUp",
-                "ArrowDown",
-                "PageDown",
-                "PageUp",
-            ];
+            var navKeys = ['Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'PageDown', 'PageUp'];
             var activeElement = document.activeElement;
-            if (event.code === "Escape") {
+            if (event.code === 'Escape') {
                 event.preventDefault();
                 event.stopPropagation();
                 _this.hidePopupAndRefocus();
             }
             else if (activeElement === ((_a = _this.searchInput) === null || _a === void 0 ? void 0 : _a.current)) {
-                if (event.code === "ArrowDown") {
+                if (event.code === 'ArrowDown') {
                     event.preventDefault();
                     (_b = _this.getItemElement(0)) === null || _b === void 0 ? void 0 : _b.focus();
                 }
-                else if (event.code === "Enter" && _this.state.items.length === 1) {
+                else if (event.code === 'Enter' && _this.state.items.length === 1) {
                     event.preventDefault();
                     _this.select(_this.state.items[0]);
                 }
@@ -133,30 +128,30 @@ var SelectGrid = /** @class */ (function (_super) {
             else if (((_c = document.activeElement) === null || _c === void 0 ? void 0 : _c.getAttribute('data-item-index')) && navKeys.includes(event.code)) {
                 var itemIndex = parseInt(activeElement === null || activeElement === void 0 ? void 0 : activeElement.getAttribute('data-item-index'), 10);
                 event.preventDefault(); // Prevent scrolling, etc.
-                if (event.code === "Enter") {
+                if (event.code === 'Enter') {
                     _this.select(_this.state.items[itemIndex]);
                     return;
                 }
-                else if (event.code === "ArrowRight") {
+                else if (event.code === 'ArrowRight') {
                     itemIndex += 1;
                 }
-                else if (event.code === "ArrowLeft") {
+                else if (event.code === 'ArrowLeft') {
                     itemIndex -= 1;
                 }
-                else if (event.code === "ArrowDown") {
+                else if (event.code === 'ArrowDown') {
                     itemIndex += GRID_COLS;
                 }
-                else if (event.code === "ArrowUp") {
+                else if (event.code === 'ArrowUp') {
                     if (itemIndex < GRID_COLS) {
                         (_e = (_d = _this.searchInput) === null || _d === void 0 ? void 0 : _d.current) === null || _e === void 0 ? void 0 : _e.focus();
                         return;
                     }
                     itemIndex -= GRID_COLS;
                 }
-                else if (event.code === "PageDown") {
+                else if (event.code === 'PageDown') {
                     itemIndex += PAGE_SIZE;
                 }
-                else if (event.code === "PageUp") {
+                else if (event.code === 'PageUp') {
                     itemIndex -= PAGE_SIZE;
                 }
                 if (itemIndex < 0) {

package/react/components/SelectPreview.js

@@ -68,22 +68,22 @@ var SelectPreview = /** @class */ (function (_super) {
                     var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
                     var classes = (0, classnames_1.default)('tags-preview__tag-item', {
                         'tags-preview__tag-item--single-select': _this.props.kind.mode === 'single-select',
-                        'tags-preview__tag-item--border': (_this.props.kind.mode === 'single-select' && _this.props.kind.getBorderColor)
-                            || borderColor,
+                        'tags-preview__tag-item--border': (_this.props.kind.mode === 'single-select' && _this.props.kind.getBorderColor) ||
+                            borderColor,
                     });
                     return (React.createElement("li", { className: classes, style: (function () {
                             if (_this.props.valueTemplate != null) {
                                 return { backgroundColor: backgroundColor, borderColor: borderColor };
                             }
                             else {
-                                if (_this.props.kind.mode === 'multi-select'
-                                    && _this.props.kind.getBackgroundColor != null) {
+                                if (_this.props.kind.mode === 'multi-select' &&
+                                    _this.props.kind.getBackgroundColor != null) {
                                     return {
                                         backgroundColor: _this.props.kind.getBackgroundColor(item),
                                     };
                                 }
-                                else if (_this.props.kind.mode === 'single-select'
-                                    && _this.props.kind.getBorderColor != null) {
+                                else if (_this.props.kind.mode === 'single-select' &&
+                                    _this.props.kind.getBorderColor != null) {
                                     return {
                                         borderLeftColor: _this.props.kind.getBorderColor(item),
                                     };
@@ -98,9 +98,11 @@ var SelectPreview = /** @class */ (function (_super) {
                                     return { color: (0, helpers_1.getTextColor)(backgroundColor) };
                                 }
                                 else {
-                                    if (_this.props.kind.mode === 'multi-select'
-                                        && _this.props.kind.getBackgroundColor != null) {
-                                        return { color: (0, helpers_1.getTextColor)(_this.props.kind.getBackgroundColor(item)) };
+                                    if (_this.props.kind.mode === 'multi-select' &&
+                                        _this.props.kind.getBackgroundColor != null) {
+                                        return {
+                                            color: (0, helpers_1.getTextColor)(_this.props.kind.getBackgroundColor(item)),
+                                        };
                                     }
                                     else {
                                         return undefined;
@@ -108,10 +110,8 @@ var SelectPreview = /** @class */ (function (_super) {
                                 }
                             })() }, children)));
                 };
-                return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
-                    ? _this.props.valueTemplate(item, Wrapper)
-                    : React.createElement(Wrapper, null,
-                        React.createElement("span", null, _this.props.getLabel(item)))));
+                return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate ? (_this.props.valueTemplate(item, Wrapper)) : (React.createElement(Wrapper, null,
+                    React.createElement("span", null, _this.props.getLabel(item))))));
             }))));
     };
     return SelectPreview;

package/react/components/SelectWithTemplate.js

@@ -100,10 +100,10 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         var optionsInternal = options.map(function (option) { return toInternalStructure(option); });
         var valueInternal = value == null
             ? null
-            : (_a = optionsInternal === null || optionsInternal === void 0 ? void 0 : optionsInternal.find(function (_a) {
+            : ((_a = optionsInternal === null || optionsInternal === void 0 ? void 0 : optionsInternal.find(function (_a) {
                 var original = _a.original;
                 return areEqual(original, value);
-            })) !== null && _a !== void 0 ? _a : toInternalStructure(value);
+            })) !== null && _a !== void 0 ? _a : toInternalStructure(value));
         // This is regarding the placeholder for selected value.
         // itemTemplate will be used to render it, but a non-empty value
         // needs to be passed to prime react component
@@ -114,9 +114,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
                     onChange(e.value == null ? null : e.value.original);
                 }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
                     var _a, _b;
-                    return ValueTemplate != null
-                        ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }))
-                        : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
+                    return ValueTemplate != null ? (React.createElement(ValueTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null })) : (React.createElement(ItemTemplate, { option: (_b = option === null || option === void 0 ? void 0 : option.original) !== null && _b !== void 0 ? _b : null }));
                 }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
                     _this.setState({ loading: true });
                     getItems(searchString).then(function (_options) {

package/react/components/ShowPopup.js

@@ -75,8 +75,8 @@ var PopupPositioner = /** @class */ (function (_super) {
         if (this.wrapperEl == null) {
             return;
         }
-        if (this.props.getReferenceElement().contains(event.target) !== true
-            && this.wrapperEl.contains(event.target) !== true) {
+        if (this.props.getReferenceElement().contains(event.target) !== true &&
+            this.wrapperEl.contains(event.target) !== true) {
             this.props.onClose();
         }
     };
@@ -125,10 +125,7 @@ var PopupPositioner = /** @class */ (function (_super) {
                 if (_this.wrapperEl != null) {
                     _this.popper = (0, core_1.createPopper)(_this.props.getReferenceElement(), _this.wrapperEl, {
                         placement: _this.props.placement,
-                        modifiers: [
-                            popper_max_size_modifier_1.default,
-                            applyMaxSize,
-                        ],
+                        modifiers: [popper_max_size_modifier_1.default, applyMaxSize],
                     });
                 }
             }, 50);
@@ -146,14 +143,14 @@ var PopupPositioner = /** @class */ (function (_super) {
     };
     PopupPositioner.prototype.render = function () {
         var _this = this;
-        return (React.createElement(React.Fragment, null, react_dom_1.default.createPortal((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)), document.body)));
+            } }, this.props.children), document.body)));
     };
     return PopupPositioner;
 }(React.PureComponent));
@@ -169,7 +166,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, { getReferenceElement: function () { return referenceElement; }, placement: placement, onClose: closeFn, closeOnHoverEnd: closeOnHoverEnd || false },
-        React.createElement(Component, { closePopup: closeFn }))), el);
+    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/Skeleton.js

@@ -73,7 +73,7 @@ var Skeleton = /** @class */ (function (_super) {
             'p-skeleton-none': this.props.animation === 'none',
         }, this.props.className);
         var style = this.skeletonStyle();
-        return (React.createElement("div", { style: style, className: skeletonClassName }));
+        return React.createElement("div", { style: style, className: skeletonClassName });
     };
     Skeleton.defaultProps = {
         shape: 'rectangle',

package/react/components/SlidingToolbar.js

@@ -66,7 +66,7 @@ var SlidingToolbar = /** @class */ (function (_super) {
             },
             _a["sliding-toolbar--".concat(this.props.side)] = this.props.side || this.props.side !== undefined,
             _a));
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return React.createElement("div", { className: classes }, this.props.children);
     };
     return SlidingToolbar;
 }(React.PureComponent));

package/react/components/Spinner.js

@@ -60,7 +60,7 @@ var LoadingOverlay = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     LoadingOverlay.prototype.render = function () {
-        return (React.createElement("div", { className: "sd-loading-overlay--plain" }, this.props.children));
+        return React.createElement("div", { className: "sd-loading-overlay--plain" }, this.props.children);
     };
     return LoadingOverlay;
 }(React.PureComponent));

package/react/components/StrechBar.js

@@ -56,7 +56,7 @@ var StrechBar = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     StrechBar.prototype.render = function () {
-        return (React.createElement("div", { className: 'subnav__stretch-bar' }, this.props.children));
+        return React.createElement("div", { className: "subnav__stretch-bar" }, this.props.children);
     };
     return StrechBar;
 }(React.PureComponent));

package/react/components/SubNav.js

@@ -66,7 +66,7 @@ var SubNavDivider = /** @class */ (function (_super) {
             },
             _a["subnav__divider--".concat(this.props.width)] = this.props.width || this.props.width !== undefined,
             _a));
-        return (React.createElement("div", { className: classes }));
+        return React.createElement("div", { className: classes });
     };
     return SubNavDivider;
 }(React.PureComponent));

package/react/components/Switch.js

@@ -72,8 +72,8 @@ var Switch = /** @class */ (function (_super) {
     };
     Switch.prototype.render = function () {
         var classes = (0, classnames_1.default)('sd-switch', {
-            'checked': this.props.value,
-            'disabled': this.props.disabled,
+            checked: this.props.value,
+            disabled: this.props.disabled,
         });
         var checkboxInput = (React.createElement("span", { role: "checkbox", id: this.htmlId, className: classes, "aria-checked": this.props.value, "aria-disabled": this.props.disabled, tabIndex: 0, onClick: this.onClick },
             React.createElement("span", { className: "inner" })));
@@ -82,12 +82,10 @@ var Switch = /** @class */ (function (_super) {
             return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow },
                 React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
                     checkboxInput,
-                    React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));
+                    React.createElement("label", { className: "a11y-only", htmlFor: this.htmlId }, this.props.label.content))));
         }
         else {
-            var labelContent = typeof this.props.label.content === 'string'
-                ? React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)
-                : this.props.label.content(this.htmlId);
+            var labelContent = typeof this.props.label.content === 'string' ? (React.createElement("label", { htmlFor: this.htmlId }, this.props.label.content)) : (this.props.label.content(this.htmlId));
             return (React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
                 this.props.label.side === 'left' ? labelContent : null,
                 checkboxInput,

package/react/components/SwitchGroup.js

@@ -66,7 +66,7 @@ var SwitchGroup = /** @class */ (function (_super) {
             _a["sd-switch__group--horizontal"] = this.props.orientation === 'horizontal',
             _a["sd-switch__group--right"] = this.props.align === 'right',
             _a), this.props.className);
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return React.createElement("div", { className: classes }, this.props.children);
     };
     return SwitchGroup;
 }(React.PureComponent));

package/react/components/TabCustom.js

@@ -41,7 +41,7 @@ var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var TabLabel = function (_a) {
     var label = _a.label;
-    return (React.createElement("span", null, label));
+    return React.createElement("span", null, label);
 };
 exports.TabLabel = TabLabel;
 var Tabs = function (props) {
@@ -59,16 +59,18 @@ var Tabs = function (props) {
         _a["sd-nav-tabs--".concat(size)] = size && size !== undefined,
         _a['sd-nav-tabs--ui-dark'] = theme === 'dark',
         _a));
-    return (React.createElement("div", { className: classes, role: 'tablist', "aria-label": ariaLabel ? ariaLabel : 'tabs', "data-test-id": props['data-test-id'] }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: 'tab', "aria-selected": index === i ? 'true' : 'false' }, item)); })));
+    return (React.createElement("div", { className: classes, role: "tablist", "aria-label": ariaLabel ? ariaLabel : 'tabs', "data-test-id": props['data-test-id'] }, children.map(function (item, i) { return (React.createElement("button", { key: i, "aria-controls": 'tabpanel-' + i, className: 'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : ''), onClick: function () { return handleSelected(i); }, role: "tab", "aria-selected": index === i ? 'true' : 'false' }, item)); })));
 };
 exports.Tabs = Tabs;
 var TabContent = function (_a) {
     var theme = _a.theme, children = _a.children, activePanel = _a.activePanel;
-    return (React.createElement("div", { className: 'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) { return panel.props.indexValue === activePanel && (React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel', "aria-labelledby": 'tab-' + activePanel, key: i }, panel)); })));
+    return (React.createElement("div", { className: 'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, children.map(function (panel, i) {
+        return panel.props.indexValue === activePanel && (React.createElement("div", { className: "sd-nav-tabs__pane", role: "tabpanel", "aria-labelledby": 'tab-' + activePanel, key: i }, panel));
+    })));
 };
 exports.TabContent = TabContent;
 var TabPanel = function (_a) {
     var children = _a.children, indexValue = _a.indexValue;
-    return (React.createElement(React.Fragment, { key: indexValue }, children));
+    return React.createElement(React.Fragment, { key: indexValue }, children);
 };
 exports.TabPanel = TabPanel;

package/react/components/TabList.js

@@ -60,7 +60,7 @@ var Tab = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Tab.prototype.render = function () {
-        return (React.createElement("div", { className: 'sd-nav-tabs__pane', role: 'tabpanel' }, this.props.children));
+        return (React.createElement("div", { className: "sd-nav-tabs__pane", role: "tabpanel" }, this.props.children));
     };
     return Tab;
 }(React.PureComponent));
@@ -95,13 +95,9 @@ var TabList = /** @class */ (function (_super) {
             _a['sd-nav-tabs--ui-dark'] = this.props.theme === 'dark',
             _a));
         return (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: classes, role: 'tablist' }, this.props.children.map(function (item, index) {
-                return React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: 'tab', "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab'
-                        + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
-                    React.createElement("span", null, item.props.label));
-            })),
-            React.createElement("div", { className: 'sd-nav-tabs__content' +
-                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.children[this.state.index])));
+            React.createElement("div", { className: classes, role: "tablist" }, this.props.children.map(function (item, index) { return (React.createElement("button", { key: index, onClick: function () { return _this.handleChange(index); }, role: "tab", "aria-selected": _this.state.index === index ? 'true' : 'false', className: 'sd-nav-tabs__tab' + (_this.state.index === index ? ' sd-nav-tabs__tab--active' : '') },
+                React.createElement("span", null, item.props.label))); })),
+            React.createElement("div", { className: 'sd-nav-tabs__content' + (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '') }, this.props.children[this.state.index])));
     };
     return TabList;
 }(React.PureComponent));

package/react/components/Tag.js

@@ -48,22 +48,18 @@ var Tag = function (_a) {
         _b['tag-label--square'] = shape === 'square',
         _b['tag-label--draggable'] = draggable === true,
         _b));
-    return (React.createElement(React.Fragment, null, label
-        ?
-            React.createElement("span", { className: classes, key: keyValue },
-                draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: '3', dotRows: '4' }),
-                React.createElement("span", { className: 'tag-label--text-wrapper' },
-                    React.createElement("span", { className: 'tag-label--text-label' },
-                        label,
-                        ":"),
-                    React.createElement("span", { className: 'tag-label--text' }, text)),
-                !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
-                    React.createElement("i", { className: 'icon-close-small' })) : null)
-        :
-            React.createElement("span", { className: classes, key: keyValue },
-                draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: '3', dotRows: '4' }),
-                React.createElement("span", { className: 'tag-label--text' }, text),
-                !readOnly ? React.createElement("button", { className: 'tag-label__remove', onClick: onClick },
-                    React.createElement("i", { className: 'icon-close-small' })) : null)));
+    return (React.createElement(React.Fragment, null, label ? (React.createElement("span", { className: classes, key: keyValue },
+        draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
+        React.createElement("span", { className: "tag-label--text-wrapper" },
+            React.createElement("span", { className: "tag-label--text-label" },
+                label,
+                ":"),
+            React.createElement("span", { className: "tag-label--text" }, text)),
+        !readOnly ? (React.createElement("button", { className: "tag-label__remove", onClick: onClick },
+            React.createElement("i", { className: "icon-close-small" }))) : null)) : (React.createElement("span", { className: classes, key: keyValue },
+        draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
+        React.createElement("span", { className: "tag-label--text" }, text),
+        !readOnly ? (React.createElement("button", { className: "tag-label__remove", onClick: onClick },
+            React.createElement("i", { className: "icon-close-small" }))) : null))));
 };
 exports.Tag = Tag;

package/react/components/TagInput.js

@@ -67,7 +67,7 @@ var TagInput = /** @class */ (function (_super) {
     TagInput.prototype.render = function () {
         var _a = this.props, onChange = _a.onChange, value = _a.value, placeholder = _a.placeholder;
         if (this.props.preview) {
-            return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
+            return React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } });
         }
         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, inputWrapper: this.props.inputWrapper },
             React.createElement(chips_1.Chips, { className: "\n                        tags-input--multi-select sd-input__input\n                        ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));

package/react/components/Text/Heading.js

@@ -75,17 +75,17 @@ var Heading = /** @class */ (function (_super) {
             _a), this.props.className);
         switch (this.props.type) {
             case 'h1':
-                return (React.createElement("h1", { className: classes }, this.props.children));
+                return React.createElement("h1", { className: classes }, this.props.children);
             case 'h2':
-                return (React.createElement("h2", { className: classes }, this.props.children));
+                return React.createElement("h2", { className: classes }, this.props.children);
             case 'h3':
-                return (React.createElement("h3", { className: classes }, this.props.children));
+                return React.createElement("h3", { className: classes }, this.props.children);
             case 'h4':
-                return (React.createElement("h4", { className: classes }, this.props.children));
+                return React.createElement("h4", { className: classes }, this.props.children);
             case 'h5':
-                return (React.createElement("h5", { className: classes }, this.props.children));
+                return React.createElement("h5", { className: classes }, this.props.children);
             case 'h6':
-                return (React.createElement("h6", { className: classes }, this.props.children));
+                return React.createElement("h6", { className: classes }, this.props.children);
         }
     };
     return Heading;

package/react/components/ThemeSelector.js

@@ -75,7 +75,7 @@ var ThemeSelector = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('sd-theme-selector__list ', (_a = {},
             _a["sd-theme-selector__list--".concat(this.props.size)] = this.props.size,
             _a));
-        return (React.createElement("div", { className: classes }, this.props.options.map(function (item, index) { return (React.createElement("div", { className: 'sd-theme-selector__item', key: index, tabIndex: -1 },
+        return (React.createElement("div", { className: classes }, this.props.options.map(function (item, index) { return (React.createElement("div", { className: "sd-theme-selector__item", key: index, tabIndex: -1 },
             React.createElement("figure", { className: "sd-theme-selector__item-thumb", "data-theme": item.theme + '-ui', "aria-hidden": "true" },
                 React.createElement("svg", { viewBox: "0 0 156 94", xmlns: "http://www.w3.org/2000/svg" },
                     React.createElement("g", { fill: "none", fillRule: "evenodd" },

package/react/components/TimePickerV2.js

@@ -142,13 +142,13 @@ var TimePickerV2 = /** @class */ (function (_super) {
         }
     };
     TimePickerV2.prototype.padValue = function (value) {
-        return (0, lodash_1.padStart)((value).toString(), 2, '0');
+        return (0, lodash_1.padStart)(value.toString(), 2, '0');
     };
     TimePickerV2.prototype.updatedTimeUnit = function () {
         var timeUnitValuesArray = this.props.value.split(':');
         /**
-        * updating the initial value from props
-        */
+         * updating the initial value from props
+         */
         if (this.is12HourFormat) {
             if (parseInt(timeUnitValuesArray[0], 10) > 12) {
                 timeUnitValuesArray[0] = this.padValue(parseInt(timeUnitValuesArray[0], 10) - 12);
@@ -160,27 +160,27 @@ var TimePickerV2 = /** @class */ (function (_super) {
         var _this = this;
         var timeUnitValuesArray = this.updatedTimeUnit();
         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, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
-            React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
-                React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {
+            React.createElement("div", { className: "sd__input__time-picker-v2", "data-test-id": this.props['data-test-id'] },
+                React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("select", { className: "sd-input__select", value: timeUnitValuesArray[0], onChange: function (_a) {
                             var target = _a.target;
                             _this.handleTimeChange(0, target.value);
                         } }, this.getOptionsForTimeUnit('hours').map(function (hour) { return (React.createElement("option", { value: hour, label: hour, key: hour })); })),
-                    React.createElement("span", { className: 'time-picker-v2-suffix' }, ":")),
-                React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[1], onChange: function (_a) {
+                    React.createElement("span", { className: "time-picker-v2-suffix" }, ":")),
+                React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("select", { className: "sd-input__select", value: timeUnitValuesArray[1], onChange: function (_a) {
                             var target = _a.target;
                             _this.handleTimeChange(1, target.value);
                         } }, this.getOptionsForTimeUnit('minutes').map(function (minute) { return (React.createElement("option", { value: minute, label: minute, key: minute })); })),
-                    this.props.allowSeconds && (React.createElement("span", { className: 'time-picker-v2-suffix' }, ":"))),
-                this.props.allowSeconds && (React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[2], onChange: function (_a) {
+                    this.props.allowSeconds && React.createElement("span", { className: "time-picker-v2-suffix" }, ":")),
+                this.props.allowSeconds && (React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("select", { className: "sd-input__select", value: timeUnitValuesArray[2], onChange: function (_a) {
                             var target = _a.target;
                             _this.handleTimeChange(2, target.value);
                         } }, this.getOptionsForTimeUnit('seconds').map(function (second) { return (React.createElement("option", { value: second, label: second, key: second })); })))),
-                this.is12HourFormat && (React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
-                    React.createElement("span", { className: 'time-picker-v2-suffix' }),
-                    React.createElement("select", { className: 'sd-input__select', value: (parseInt(this.props.value.split(':')[0], 10) >= 12) ? 'PM' : 'AM', onChange: function (_a) {
+                this.is12HourFormat && (React.createElement("div", { className: "input-wrapper__time-picker-v2" },
+                    React.createElement("span", { className: "time-picker-v2-suffix" }),
+                    React.createElement("select", { className: "sd-input__select", value: parseInt(this.props.value.split(':')[0], 10) >= 12 ? 'PM' : 'AM', onChange: function (_a) {
                             var target = _a.target;
                             var splitValue = _this.props.value.split(':');
                             if (target.value === 'PM') {
@@ -191,8 +191,8 @@ var TimePickerV2 = /** @class */ (function (_super) {
                             }
                             _this.props.onChange(splitValue.join(':'));
                         } },
-                        React.createElement("option", { value: 'AM', label: 'AM' }),
-                        React.createElement("option", { value: 'PM', label: 'PM' })))))));
+                        React.createElement("option", { value: "AM", label: "AM" }),
+                        React.createElement("option", { value: "PM", label: "PM" })))))));
     };
     return TimePickerV2;
 }(React.PureComponent));

package/react/components/Toast.js

@@ -40,7 +40,7 @@ exports.toasted = void 0;
 var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var ToastWrapper_1 = __importDefault(require("./ToastWrapper"));
-var TOAST_ID = "react-toast";
+var TOAST_ID = 'react-toast';
 var Toasted = /** @class */ (function () {
     function Toasted() {
         this.componentRef = null;
@@ -56,9 +56,9 @@ var Toasted = /** @class */ (function () {
             element = existingElement;
         }
         else {
-            var el = document.createElement("div");
+            var el = document.createElement('div');
             el.id = TOAST_ID;
-            el.className = "sd-toast__container sd-toast__container--top";
+            el.className = 'sd-toast__container sd-toast__container--top';
             document.body.appendChild(el);
             element = el;
         }

package/react/components/ToastMessage.d.ts

@@ -14,5 +14,5 @@ export interface IMessageOptions {
 interface IProps extends IMessageOptions {
     closeElement(id: string, position: Position): void;
 }
-export declare const ToastMessage: ({ id, message, type, icon, size, duration, position, closeElement, }: IProps) => JSX.Element;
+export declare const ToastMessage: ({ id, message, type, icon, size, duration, position, closeElement }: IProps) => JSX.Element;
 export {};

package/react/components/ToastMessage.js

@@ -47,7 +47,7 @@ var ToastMessage = function (_a) {
     var _d = React.useState(false), enter = _d[0], setEnter = _d[1];
     var timer;
     React.useEffect(function () { return setShow(true); }, []);
-    if (typeof duration === "number") {
+    if (typeof duration === 'number') {
         React.useEffect(function () {
             timer = window.setTimeout(function () {
                 close(id, position);

package/react/components/ToastText.js

@@ -39,18 +39,15 @@ var ToastText = function (_a) {
     var id = _a.id, title = _a.title, icon = _a.icon, onClose = _a.onClose;
     var ref = React.useRef(null);
     return (React.createElement(React.Fragment, null,
-        icon ?
-            React.createElement("div", { className: 'sd-toast__icon' },
-                React.createElement(Icon_1.Icon, { name: icon })) : null,
-        typeof title === 'string' ?
-            (React.createElement("span", { style: { width: '100%' }, ref: ref, id: id },
-                React.createElement("div", { className: 'sd-toast__message' }, title))) :
-            React.createElement("span", { style: { width: '100%', display: 'inherit' }, ref: ref, id: id }, title),
+        icon ? (React.createElement("div", { className: "sd-toast__icon" },
+            React.createElement(Icon_1.Icon, { name: icon }))) : null,
+        typeof title === 'string' ? (React.createElement("span", { style: { width: '100%' }, ref: ref, id: id },
+            React.createElement("div", { className: "sd-toast__message" }, title))) : (React.createElement("span", { style: { width: '100%', display: 'inherit' }, ref: ref, id: id }, title)),
         onClose && React.createElement(Close, { onClose: onClose })));
 };
 var Close = function (_a) {
     var onClose = _a.onClose;
     return (React.createElement("button", { className: "icn-btn sd-toast__actions", type: "button", "aria-label": "Close", onClick: onClose },
-        React.createElement(Icon_1.Icon, { name: 'close-small' })));
+        React.createElement(Icon_1.Icon, { name: "close-small" })));
 };
 exports.default = ToastText;