superdesk-ui-framework 4.0.47 → 4.0.49

package/react/components/Divider.js

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

package/react/components/DonutChart.js

@@ -57,7 +57,7 @@ var DonutChart = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DonutChart.prototype.render = function () {
-        return React.createElement(chart_1.Chart, { type: "doughnut", width: this.props.width, height: this.props.height, data: this.props.data, options: this.props.options });
+        return (React.createElement(chart_1.Chart, { type: "doughnut", width: this.props.width, height: this.props.height, data: this.props.data, options: this.props.options }));
     };
     return DonutChart;
 }(React.Component));

package/react/components/DragHandle.js

@@ -69,7 +69,7 @@ var DragHandle = /** @class */ (function (_super) {
             _a['drag-handle-wrapper--blank'] = this.props.blank,
             _a), this.props.className);
         var calcSize = function (numberOfDots) {
-            return Number(numberOfDots) * dotSize - (dotSize / 2);
+            return Number(numberOfDots) * dotSize - dotSize / 2;
         };
         return (React.createElement("div", { className: classes },
             React.createElement(DragHandleDots_1.DragHandleDots, { style: { width: calcSize((_b = this.props.dotsInRow) !== null && _b !== void 0 ? _b : '2'), height: calcSize((_c = this.props.dotRows) !== null && _c !== void 0 ? _c : '4') }, color: this.props.dotColor })));

package/react/components/DragHandleDots.js

@@ -64,7 +64,7 @@ var DragHandleDots = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('drag-handle-dots', (_a = {},
             _a["drag-handle-dots--".concat(this.props.color)] = this.props.color,
             _a));
-        return (React.createElement("div", { style: this.props.style, className: classes }));
+        return React.createElement("div", { style: this.props.style, className: classes });
     };
     return DragHandleDots;
 }(React.PureComponent));

package/react/components/DropZone.js

@@ -95,14 +95,12 @@ var DropZone = /** @class */ (function (_super) {
             _a["sd-dropzone__drop-target--".concat(this.props.type)] = this.props.type,
             _a), this.props.className);
         return (React.createElement("div", { className: classes, onDragLeave: function (event) { return _this.dragLeave(event); }, onDragEnter: function (event) { return _this.dragEnter(event); }, onDragOver: function (event) { return _this.dragOver(event); }, onDrop: function (event) { return _this.drop(event); }, onDragStart: function () { return false; }, onDragEnd: function () { return false; } },
-            React.createElement("div", { className: 'sd-dropzone__target-border' }),
-            React.createElement("input", { type: "file", className: 'sd-dropzone__input' }),
-            this.props.icon ?
-                React.createElement("figure", { className: 'sd-dropzone__icon', "aria-hidden": 'true' },
-                    React.createElement(Icon_1.Icon, { name: 'upload-alt', size: 'big' })) : null,
-            this.props.heading ?
-                React.createElement("h4", { className: 'sd-dropzone__heading' }, this.props.heading) : null,
-            React.createElement("p", { className: 'sd-dropzone__description' }, this.props.text)));
+            React.createElement("div", { className: "sd-dropzone__target-border" }),
+            React.createElement("input", { type: "file", className: "sd-dropzone__input" }),
+            this.props.icon ? (React.createElement("figure", { className: "sd-dropzone__icon", "aria-hidden": "true" },
+                React.createElement(Icon_1.Icon, { name: "upload-alt", size: "big" }))) : null,
+            this.props.heading ? React.createElement("h4", { className: "sd-dropzone__heading" }, this.props.heading) : null,
+            React.createElement("p", { className: "sd-dropzone__description" }, this.props.text)));
     };
     return DropZone;
 }(React.PureComponent));

package/react/components/Dropdown.d.ts

@@ -26,5 +26,5 @@ interface IMenu {
     onChange?(event?: any): void;
     maxHeight?: number;
 }
-export declare const Dropdown: ({ items, header, footer, children, align, onChange, maxHeight, }: IMenu) => JSX.Element;
+export declare const Dropdown: ({ items, header, footer, children, align, onChange, maxHeight }: IMenu) => JSX.Element;
 export {};

package/react/components/Dropdown.js

@@ -50,7 +50,7 @@ var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
 var zIndex_1 = require("./../zIndex");
-var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
+var DROPDOWN_ID_CONTAINER = 'sd-dropdown-constainer';
 var Dropdown = function (_a) {
     var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, align = _a.align, onChange = _a.onChange, maxHeight = _a.maxHeight;
     var _b = React.useState(-1), zIndex = _b[0], setZIndex = _b[1];
@@ -75,7 +75,7 @@ var Dropdown = function (_a) {
     React.useEffect(function () {
         var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
-            var el = document.createElement("div");
+            var el = document.createElement('div');
             el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
@@ -94,23 +94,23 @@ var Dropdown = function (_a) {
     }, [open]);
     function createAppendMenu() {
         if (header && footer) {
-            return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
-                React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
-                React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
+            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
+                React.createElement("ul", { className: "dropdown__menu-header" }, headerElements),
+                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements),
+                React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list " }, footerElements)));
         }
         else if (header) {
-            return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: 'dropdown__menu-header' }, headerElements),
-                React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements)));
+            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
+                React.createElement("ul", { className: "dropdown__menu-header" }, headerElements),
+                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements)));
         }
         else if (footer) {
-            return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref, style: { zIndex: zIndex } },
-                React.createElement("ul", { className: 'dropdown__menu-body' }, dropdownElements),
-                React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list ' }, footerElements)));
+            return (React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", id: menuID, role: "menu", ref: ref, style: { zIndex: zIndex } },
+                React.createElement("ul", { className: "dropdown__menu-body" }, dropdownElements),
+                React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list " }, footerElements)));
         }
         else {
-            return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
+            return (React.createElement("ul", { className: "dropdown__menu ", id: menuID, role: "menu", ref: ref, style: __assign({ zIndex: zIndex, overflowY: 'auto' }, maxHeightStyle) }, dropdownElements));
         }
     }
     function toggleDisplay() {
@@ -180,36 +180,32 @@ var Dropdown = function (_a) {
                 groupItems_1));
         }
         else if (item === 'divider') {
-            return (React.createElement("li", { className: "dropdown__menu-divider", key: index }));
+            return React.createElement("li", { className: "dropdown__menu-divider", key: index });
         }
         else {
             return (React.createElement(DropdownItem, { key: index, label: item['label'], icon: item['icon'], active: item['active'], onSelect: item['onSelect'], onChange: onChange }));
         }
     }
-    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') }, typeof children === 'object'
-        ? (React.isValidElement(children)
-            ? React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
-                var attrs = {
-                    className: children.props.className
-                        ? (children.props.className + ' dropdown__toggle dropdown-toggle')
-                        : 'dropdown__toggle dropdown-toggle',
-                    'aria-haspopup': "menu",
-                    'aria-expanded': open,
-                    onClick: toggleDisplay,
-                    ref: buttonRef,
-                };
-                return React.cloneElement(children, attrs);
-            })())
-            : null)
-        : React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: ' dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
-            children,
-            React.createElement("span", { className: "dropdown__caret" }))));
+    return (React.createElement("div", { className: 'dropdown ' + (open ? 'open' : '') }, typeof children === 'object' ? (React.isValidElement(children) ? (React.createElement("div", { ref: buttonRef, style: { display: 'content' } }, (function () {
+        var attrs = {
+            className: children.props.className
+                ? children.props.className + ' dropdown__toggle dropdown-toggle'
+                : 'dropdown__toggle dropdown-toggle',
+            'aria-haspopup': 'menu',
+            'aria-expanded': open,
+            onClick: toggleDisplay,
+            ref: buttonRef,
+        };
+        return React.cloneElement(children, attrs);
+    })())) : null) : (React.createElement("button", { style: { whiteSpace: 'nowrap' }, ref: buttonRef, className: " dropdown__toggle dropdown-toggle", "aria-haspopup": "menu", tabIndex: 0, "aria-expanded": open, onClick: toggleDisplay },
+        children,
+        React.createElement("span", { className: "dropdown__caret" })))));
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
     var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect, onChange = _a.onChange;
-    return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },
-        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+    return (React.createElement("li", { role: "none", className: active ? 'dropdown__menu-item--active' : '' },
+        React.createElement("button", { tabIndex: 0, role: "menuitem", onClick: function () {
                 setTimeout(function () {
                     onSelect();
                 });
@@ -217,7 +213,7 @@ var DropdownItem = function (_a) {
                     onChange();
                 }
             } },
-            React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
+            React.createElement("i", { className: icon ? 'icon-' + icon : '' }),
             label)));
 };
 var DropdownItemWithSubmenu = function (_a) {
@@ -244,8 +240,8 @@ var DropdownItemWithSubmenu = function (_a) {
         }
     }, [open]);
     return (React.createElement("li", { key: index, ref: refButtonSubMenu },
-        React.createElement("div", { className: 'dropdown', onMouseLeave: function () { return setOpen(false); } },
-            React.createElement("button", { className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
+        React.createElement("div", { className: "dropdown", onMouseLeave: function () { return setOpen(false); } },
+            React.createElement("button", { className: "dropdown__toggle dropdown-toggle", "aria-haspopup": "menu", tabIndex: 0, onClick: function () {
                     if (item.onSelect) {
                         setTimeout(function () {
                             item.onSelect();
@@ -257,5 +253,5 @@ var DropdownItemWithSubmenu = function (_a) {
                 }, onMouseOver: function () { return setOpen(true); } },
                 item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
                 item['label']),
-            React.createElement("ul", { role: 'menu', ref: refSubMenu, style: { display: 'none' }, className: 'dropdown__menu' }, subMenuItems))));
+            React.createElement("ul", { role: "menu", ref: refSubMenu, style: { display: 'none' }, className: "dropdown__menu" }, subMenuItems))));
 };

package/react/components/DropdownFirst.d.ts

@@ -25,18 +25,18 @@ interface IPropsMenu {
     children: React.ReactNode;
 }
 export declare const DropdownFirst: {
-    ({ name, align, side, level, icon, headerFooter, navDropdown, children, }: IProps): JSX.Element;
-    Item: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+    ({ name, align, side, level, icon, headerFooter, navDropdown, children }: IProps): JSX.Element;
+    Item: ({ text, icon, noLink, onSelect }: IPropsItem) => JSX.Element;
     Divider: ({}: {}) => JSX.Element;
-    Label: ({ text, }: IPropsLabel) => JSX.Element;
-    Header: ({ title, children, }: IPropsMenu) => JSX.Element;
-    Body: ({ title, children, }: IPropsMenu) => JSX.Element;
-    Footer: ({ title, children, }: IPropsMenu) => JSX.Element;
+    Label: ({ text }: IPropsLabel) => JSX.Element;
+    Header: ({ title, children }: IPropsMenu) => JSX.Element;
+    Body: ({ title, children }: IPropsMenu) => JSX.Element;
+    Footer: ({ title, children }: IPropsMenu) => JSX.Element;
 };
-export declare const DropdownItem: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+export declare const DropdownItem: ({ text, icon, noLink, onSelect }: IPropsItem) => JSX.Element;
 export declare const DropdownDivider: ({}: {}) => JSX.Element;
-export declare const DropdownLabel: ({ text, }: IPropsLabel) => JSX.Element;
-export declare const DropdownHeader: ({ title, children, }: IPropsMenu) => JSX.Element;
-export declare const DropdownBody: ({ title, children, }: IPropsMenu) => JSX.Element;
-export declare const DropdownFooter: ({ title, children, }: IPropsMenu) => JSX.Element;
+export declare const DropdownLabel: ({ text }: IPropsLabel) => JSX.Element;
+export declare const DropdownHeader: ({ title, children }: IPropsMenu) => JSX.Element;
+export declare const DropdownBody: ({ title, children }: IPropsMenu) => JSX.Element;
+export declare const DropdownFooter: ({ title, children }: IPropsMenu) => JSX.Element;
 export {};

package/react/components/DropdownFirst.js

@@ -50,7 +50,7 @@ var DropdownFirst = function (_a) {
         var number = getDimensions(ref.current);
         var second = screen.height;
         var heightEl = heightElement(ref.current);
-        if ((second - number.bottom) < (heightEl + 100) && (number.top > heightEl)) {
+        if (second - number.bottom < heightEl + 100 && number.top > heightEl) {
             setHeight(true);
         }
         else {
@@ -67,10 +67,10 @@ var DropdownFirst = function (_a) {
     React.useLayoutEffect(function () {
         var element = document.getElementsByClassName('dropdown')[0];
         var parentElement = getScrollParent(element);
-        parentElement.parentNode.addEventListener("scroll", debounce(50));
+        parentElement.parentNode.addEventListener('scroll', debounce(50));
         calculate();
         return function () {
-            parentElement.removeEventListener("scroll", debounce(50));
+            parentElement.removeEventListener('scroll', debounce(50));
             clearTimeout(inDebounce);
         };
     }, [open]);
@@ -119,12 +119,10 @@ var DropdownFirst = function (_a) {
         return (React.createElement("div", { className: classes },
             React.createElement("button", { className: navDropdown
                     ? 'dropdown__toggle navbtn dropdown-toggle'
-                    : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
-                (React.createElement("i", { className: "icon-" + icon })) :
-                (React.createElement(React.Fragment, null,
-                    name,
-                    React.createElement("span", { className: "dropdown__caret" })))),
-            React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', ref: ref }, children)));
+                    : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ? (React.createElement("i", { className: 'icon-' + icon })) : (React.createElement(React.Fragment, null,
+                name,
+                React.createElement("span", { className: "dropdown__caret" })))),
+            React.createElement("div", { className: "dropdown__menu dropdown__menu--has-head-foot", ref: ref }, children)));
     }
     else {
         if (level) {
@@ -133,21 +131,19 @@ var DropdownFirst = function (_a) {
                 _c));
             return (React.createElement("li", null,
                 React.createElement("div", { className: classes },
-                    React.createElement("button", { className: 'dropdown__toggle dropdown-toggle' },
-                        icon && level ? React.createElement("i", { className: icon ? ('icon-' + icon) : '' }) : null,
+                    React.createElement("button", { className: "dropdown__toggle dropdown-toggle" },
+                        icon && level ? React.createElement("i", { className: icon ? 'icon-' + icon : '' }) : null,
                         name),
-                    React.createElement("ul", { className: classesMenu, ref: ref, role: 'menu' }, children))));
+                    React.createElement("ul", { className: classesMenu, ref: ref, role: "menu" }, children))));
         }
         else {
             return (React.createElement("div", { className: classes },
                 React.createElement("button", { className: navDropdown
                         ? 'dropdown__toggle navbtn dropdown-toggle'
-                        : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ?
-                    (React.createElement("i", { className: "icon-" + icon })) :
-                    (React.createElement(React.Fragment, null,
-                        name,
-                        React.createElement("span", { className: "dropdown__caret" })))),
-                React.createElement("ul", { className: 'dropdown__menu', ref: ref }, children)));
+                        : 'dropdown__toggle nav-btn dropdown-toggle', onClick: isOpen }, icon ? (React.createElement("i", { className: 'icon-' + icon })) : (React.createElement(React.Fragment, null,
+                    name,
+                    React.createElement("span", { className: "dropdown__caret" })))),
+                React.createElement("ul", { className: "dropdown__menu", ref: ref }, children)));
         }
     }
 };
@@ -155,18 +151,18 @@ exports.DropdownFirst = DropdownFirst;
 var DropdownItem = function (_a) {
     var text = _a.text, icon = _a.icon, noLink = _a.noLink, onSelect = _a.onSelect;
     if (noLink) {
-        return React.createElement("li", { className: 'dropdown__menu-item--no-link' }, text);
+        return React.createElement("li", { className: "dropdown__menu-item--no-link" }, text);
     }
     else {
         return (React.createElement("li", null,
             React.createElement("button", { onSelect: onSelect },
-                React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
+                React.createElement("i", { className: icon ? 'icon-' + icon : '' }),
                 text)));
     }
 };
 exports.DropdownItem = DropdownItem;
 var DropdownDivider = function (_a) {
-    return (React.createElement("li", { className: "dropdown__menu-divider" }));
+    return React.createElement("li", { className: "dropdown__menu-divider" });
 };
 exports.DropdownDivider = DropdownDivider;
 var DropdownLabel = function (_a) {
@@ -177,21 +173,21 @@ var DropdownLabel = function (_a) {
 exports.DropdownLabel = DropdownLabel;
 var DropdownHeader = function (_a) {
     var title = _a.title, children = _a.children;
-    return (React.createElement("ul", { className: 'dropdown__menu-header' },
+    return (React.createElement("ul", { className: "dropdown__menu-header" },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
 exports.DropdownHeader = DropdownHeader;
 var DropdownBody = function (_a) {
     var title = _a.title, children = _a.children;
-    return (React.createElement("ul", { className: 'dropdown__menu-body' },
+    return (React.createElement("ul", { className: "dropdown__menu-body" },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
 exports.DropdownBody = DropdownBody;
 var DropdownFooter = function (_a) {
     var title = _a.title, children = _a.children;
-    return (React.createElement("ul", { className: 'dropdown__menu-footer dropdown__menu-footer--has-list' },
+    return (React.createElement("ul", { className: "dropdown__menu-footer dropdown__menu-footer--has-list" },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };

package/react/components/DurationInput.js

@@ -89,8 +89,8 @@ var DurationInput = /** @class */ (function (_super) {
         }
         else if (state === 'minutes') {
             value = parametar1
-                ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
-                : Math.floor((parametar2 || 0) % 3600 / 60);
+                ? (parametar1 % 60) + Math.floor(((parametar2 || 0) % 3600) / 60)
+                : Math.floor(((parametar2 || 0) % 3600) / 60);
         }
         else {
             value = parametar1 ? parametar1 % 60 : 0;
@@ -155,12 +155,12 @@ var DurationInput = /** @class */ (function (_super) {
                 }, 500);
             }
         }
-        if (this.hourRef.current.value.length === 2
-            && this.minuteRef.current.value.length === 2
-            && this.secondRef.current.value.length === 2) {
-            if ((this.props.hours !== prevProps.hours)
-                || (this.props.minutes !== prevProps.minutes)
-                || (this.props.seconds !== prevProps.seconds)) {
+        if (this.hourRef.current.value.length === 2 &&
+            this.minuteRef.current.value.length === 2 &&
+            this.secondRef.current.value.length === 2) {
+            if (this.props.hours !== prevProps.hours ||
+                this.props.minutes !== prevProps.minutes ||
+                this.props.seconds !== prevProps.seconds) {
                 this.setState({
                     hours: this.stateUpdate('hours', this.props.hours, this.props.minutes, this.props.seconds),
                     minutes: this.stateUpdate('minutes', this.props.minutes, this.props.seconds),
@@ -171,8 +171,7 @@ var DurationInput = /** @class */ (function (_super) {
     };
     DurationInput.prototype.valueUpdate = function () {
         if (this.props.onChange) {
-            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
-                .asSeconds());
+            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds)).asSeconds());
         }
     };
     DurationInput.prototype.handleKeyDown = function (event) {
@@ -237,9 +236,8 @@ var DurationInput = /** @class */ (function (_super) {
         var stateClone = {};
         if (event.key === 'ArrowUp') {
             if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] < 99
-                    ? this.zeroPad(Number(this.state[state]) + 1)
-                    : this.zeroPad(99);
+                stateClone[state] =
+                    this.state[state] < 99 ? this.zeroPad(Number(this.state[state]) + 1) : this.zeroPad(99);
             }
             else {
                 stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
@@ -247,9 +245,8 @@ var DurationInput = /** @class */ (function (_super) {
         }
         else if (event.key === 'ArrowDown') {
             if (event.target.id === 'hours') {
-                stateClone[state] = this.state[state] > 0
-                    ? this.zeroPad(Number(this.state[state]) - 1)
-                    : this.zeroPad(0);
+                stateClone[state] =
+                    this.state[state] > 0 ? this.zeroPad(Number(this.state[state]) - 1) : this.zeroPad(0);
             }
             else {
                 stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
@@ -297,11 +294,11 @@ var DurationInput = /** @class */ (function (_super) {
         this.setState(stateClone);
     };
     DurationInput.prototype.handleFocusOnKeyUp = function (event, ref) {
-        if (event.key !== 'ArrowRight'
-            && event.key !== 'ArrowLeft'
-            && event.key !== 'ArrowUp'
-            && event.key !== 'ArrowDown'
-            && event.key !== 'Backspace') {
+        if (event.key !== 'ArrowRight' &&
+            event.key !== 'ArrowLeft' &&
+            event.key !== 'ArrowUp' &&
+            event.key !== 'ArrowDown' &&
+            event.key !== 'Backspace') {
             if ((event.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
                 var target = event.target;
                 if (target.value.length >= 2) {
@@ -316,37 +313,43 @@ var DurationInput = /** @class */ (function (_super) {
     DurationInput.prototype.render = function () {
         var _this = this;
         if (this.props.preview) {
-            return (React.createElement("div", { className: 'sd-input__duration-input-preview' },
+            return (React.createElement("div", { className: "sd-input__duration-input-preview" },
                 React.createElement("div", null,
-                    React.createElement("span", { className: 'duration-input-preview' }, this.state.hours),
-                    React.createElement("span", { className: 'sd-input__suffix' }, "h")),
+                    React.createElement("span", { className: "duration-input-preview" }, this.state.hours),
+                    React.createElement("span", { className: "sd-input__suffix" }, "h")),
                 React.createElement("div", null,
-                    React.createElement("span", { className: 'duration-input-preview' }, this.state.minutes),
-                    React.createElement("span", { className: 'sd-input__suffix' }, "m")),
+                    React.createElement("span", { className: "duration-input-preview" }, this.state.minutes),
+                    React.createElement("span", { className: "sd-input__suffix" }, "m")),
                 React.createElement("div", null,
-                    React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
-                    React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
+                    React.createElement("span", { className: "duration-input-preview" }, this.state.seconds),
+                    React.createElement("span", { className: "sd-input__suffix" }, "s"))));
         }
         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("div", { className: 'sd-input__duration-input' },
-                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: "text", id: "hours", autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) {
+                        _this.handleChange(event, 'hours');
+                    }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "h"),
-                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: 'text', id: 'minutes', autoComplete: "off", ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("span", { className: "sd-input__suffix" }, "h"),
+                React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'minute' ? 'blink_me' : ''), type: "text", id: "minutes", autoComplete: "off", ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) {
+                        _this.handleChange(event, 'minutes');
+                    }, onBlur: function (event) { return _this.setState({ minutes: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "m"),
-                React.createElement("input", { className: 'duration-input', type: 'text', id: 'seconds', autoComplete: "off", ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) { _this.handleChange(event, 'seconds'); }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("span", { className: "sd-input__suffix" }, "m"),
+                React.createElement("input", { className: "duration-input", type: "text", id: "seconds", autoComplete: "off", ref: this.secondRef, value: this.state.seconds, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.hourRef.current); }, onChange: function (event) {
+                        _this.handleChange(event, 'seconds');
+                    }, onBlur: function (event) { return _this.setState({ seconds: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
                             event.preventDefault();
                         }
                     } }),
-                React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
+                React.createElement("span", { className: "sd-input__suffix" }, "s"))));
     };
     return DurationInput;
 }(React.PureComponent));

package/react/components/EmptyState.js

@@ -67,13 +67,13 @@ var EmptyState = /** @class */ (function (_super) {
             _a["content-state__image--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
             _a));
         var image = require("../../app/img/empty_states/empty-state--".concat(this.props.size ? this.props.size : 'small', "-").concat(this.props.illustration ? this.props.illustration : '1', ".svg"));
-        return (React.createElement("div", { className: 'content-state--empty-container'
-                + (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '') },
-            React.createElement("div", { className: 'content-state__empty-info' },
+        return (React.createElement("div", { className: 'content-state--empty-container' +
+                (this.props.absolutePositioned ? ' content-state__empty-container--absolute' : '') },
+            React.createElement("div", { className: "content-state__empty-info" },
                 React.createElement("figure", { className: classes },
                     React.createElement("img", { src: image, alt: this.props.illustration })),
-                React.createElement("h3", { className: 'content-state__heading' }, this.props.title),
-                React.createElement("p", { className: 'content-state__description' }, this.props.description))));
+                React.createElement("h3", { className: "content-state__heading" }, this.props.title),
+                React.createElement("p", { className: "content-state__description" }, this.props.description))));
     };
     return EmptyState;
 }(React.PureComponent));

package/react/components/Form/FormGroup.js

@@ -70,7 +70,7 @@ var FormGroup = /** @class */ (function (_super) {
             _a["form__group--mb-".concat(this.props.marginBottom)] = this.props.marginBottom,
             _a['form__group--inline-label'] = this.props.inlineLabel,
             _a));
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return React.createElement("div", { className: classes }, this.props.children);
     };
     return FormGroup;
 }(React.PureComponent));

package/react/components/Form/FormItem.js

@@ -63,7 +63,7 @@ var FormItem = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form__item', {
             'form__item--auto-width': this.props.autoWidth,
         });
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return React.createElement("div", { className: classes }, this.props.children);
     };
     return FormItem;
 }(React.PureComponent));

package/react/components/Form/FormRow.js

@@ -71,7 +71,7 @@ var FormRow = /** @class */ (function (_super) {
             'form__row--bordered': this.props.bordered,
             'form__row--flex-NEW': this.props.flexNew,
         });
-        return (React.createElement("div", { className: classes }, this.props.children));
+        return React.createElement("div", { className: classes }, this.props.children);
     };
     return FormRow;
 }(React.PureComponent));

package/react/components/Form/FormRowNew.js

@@ -68,12 +68,12 @@ var FormRowNew = /** @class */ (function (_super) {
             _a['form__group-new--has_row-label'] = this.props.rowLabel,
             _a));
         if (this.props.rowLabel) {
-            return (React.createElement("div", { className: 'form__group-new__wrapper' },
-                React.createElement("label", { className: 'form__group-new__label', htmlFor: "form__group-new__label" }, this.props.rowLabel),
+            return (React.createElement("div", { className: "form__group-new__wrapper" },
+                React.createElement("label", { className: "form__group-new__label", htmlFor: "form__group-new__label" }, this.props.rowLabel),
                 React.createElement("div", { className: classes }, this.props.children)));
         }
         else {
-            return (React.createElement("div", { className: classes }, this.props.children));
+            return React.createElement("div", { className: classes }, this.props.children);
         }
     };
     return FormRowNew;

package/react/components/Form/FormText.js

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

package/react/components/Form/InputNew.js

@@ -78,9 +78,9 @@ var InputNew = /** @class */ (function (_super) {
         return (React.createElement(_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, value: this.state.value, invalid: this.state.invalid, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
             React.createElement(_1.InputBase, { type: "text", onChange: function (value) {
                     _this.setState({ value: value });
-                    _this.setState({ invalid: _this.props.maxLength
-                            ? value.length > _this.props.maxLength
-                            : false });
+                    _this.setState({
+                        invalid: _this.props.maxLength ? value.length > _this.props.maxLength : false,
+                    });
                     _this.props.onChange(value);
                 }, disabled: this.props.disabled, htmlId: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, placeholder: this.props.placeholder })));
     };