superdesk-ui-framework 4.0.47 → 4.0.49

package/react/components/ResizablePanels.js

@@ -81,9 +81,7 @@ var ResizablePanels = /** @class */ (function (_super) {
     ResizablePanels.prototype.render = function () {
         var _this = this;
         var _a = this.props, direction = _a.direction, primarySize = _a.primarySize, secondarySize = _a.secondarySize, children = _a.children;
-        var separatorDimensions = direction === 'horizontal'
-            ? { width: 3, height: '100%' }
-            : { height: 3, width: '100%' };
+        var separatorDimensions = direction === 'horizontal' ? { width: 3, height: '100%' } : { height: 3, width: '100%' };
         // Sometimes second panel is conditional. Checking here is more convenient.
         if (children.some(function (child) { return child === false || child == null; })) {
             return children;

package/react/components/ResizeObserverComponent.js

@@ -48,9 +48,7 @@ var ResizeObserverComponent = /** @class */ (function (_super) {
         var dimensions = this.state.dimensions;
         return (react_1.default.createElement("div", { ref: function (el) {
                 _this.el = el;
-            } }, dimensions === 'not-initialized'
-            ? null
-            : this.props.children(dimensions)));
+            } }, dimensions === 'not-initialized' ? null : this.props.children(dimensions)));
     };
     return ResizeObserverComponent;
 }(react_1.default.PureComponent));

package/react/components/SearchBar.js

@@ -60,7 +60,7 @@ var SearchBar = /** @class */ (function (_super) {
     function SearchBar(props) {
         var _this = _super.call(this, props) || this;
         _this.componentDidMount = function () {
-            document.addEventListener("mousedown", function (event) {
+            document.addEventListener('mousedown', function (event) {
                 if (_this.inputRef.current && !_this.inputRef.current.contains(event.target)) {
                     _this.setState({ focused: false });
                 }
@@ -93,7 +93,7 @@ var SearchBar = /** @class */ (function (_super) {
         return (React.createElement("div", { className: classes, ref: this.inputRef },
             this.props.children,
             React.createElement("label", { className: "sd-searchbar__icon" }),
-            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
+            React.createElement("input", { id: "search-input", ref: function (input) { return input && _this.props.focused && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
                     if (event.key === 'Enter') {
                         if (_this.props.onSubmit) {
                             _this.props.onSubmit(_this.state.inputValue);
@@ -105,23 +105,21 @@ var SearchBar = /** @class */ (function (_super) {
                         _this.setState({ keyDown: false });
                     }
                 }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
-            this.state.inputValue &&
-                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
-                        _this.setState({ inputValue: '' });
-                        setTimeout(function () {
-                            if (_this.props.onSubmit) {
-                                _this.props.onSubmit(_this.state.inputValue);
-                            }
-                        });
-                    } },
-                    React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
-            this.state.inputValue &&
-                React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+            this.state.inputValue && (React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
+                    _this.setState({ inputValue: '' });
+                    setTimeout(function () {
                         if (_this.props.onSubmit) {
                             _this.props.onSubmit(_this.state.inputValue);
                         }
-                    } },
-                    React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
+                    });
+                } },
+                React.createElement(Icon_1.Icon, { name: "remove-sign" }))),
+            this.state.inputValue && (React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+                    if (_this.props.onSubmit) {
+                        _this.props.onSubmit(_this.state.inputValue);
+                    }
+                } },
+                React.createElement(Icon_1.Icon, { name: "chevron-right-thin" })))));
     };
     return SearchBar;
 }(React.PureComponent));

package/react/components/Select.js

@@ -72,8 +72,8 @@ var Select = /** @class */ (function (_super) {
                 React.createElement("span", null, this.props.value)));
         }
         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, inputWrapper: this.props.inputWrapper },
-            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 + 'label', 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))));
+            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 + 'label', 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));
@@ -84,7 +84,7 @@ var Option = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     Option.prototype.render = function () {
-        return (React.createElement("option", { value: this.props.value }, this.props.children));
+        return React.createElement("option", { value: this.props.value }, this.props.children);
     };
     return Option;
 }(React.PureComponent));

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

@@ -5,6 +5,7 @@ interface IPropsPopupPositioner {
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;
+    'data-test-id'?: string;
 }
 export declare class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
     private wrapperEl;

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)));
+            }, "data-test-id": this.props['data-test-id'] }, 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/TimePicker.d.ts

@@ -1,13 +1,20 @@
 import * as React from 'react';
 import { IInputWrapper } from './Form/InputWrapper';
 interface IProps extends IInputWrapper {
-    value: string;
+    value: string | null;
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
     'data-test-id'?: string;
 }
-export declare class TimePicker extends React.PureComponent<IProps> {
+interface IState {
+    popupOpen: boolean;
+}
+export declare class TimePicker extends React.PureComponent<IProps, IState> {
     private htmlId;
+    private timeInputRef;
+    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};