superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/react/components/Dropdown.js

@@ -24,16 +24,14 @@ var React = __importStar(require("react"));
 var ReactDOM = __importStar(require("react-dom"));
 var core_1 = require("@popperjs/core");
 var react_id_generator_1 = require("react-id-generator");
+var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
-    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
+    var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align, onChange = _a.onChange;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
     var menuID = (0, react_id_generator_1.useId)()[0];
-    var DROPDOWN_ID = "react-placeholder";
     var ref = React.useRef(null);
-    var refSubMenu = React.useRef(null);
     var buttonRef = React.useRef(null);
-    var refButtonSubMenu = React.useRef(null);
     var headerElements = header === null || header === void 0 ? void 0 : header.map(function (el, index) {
         return each(el, index);
     });
@@ -44,11 +42,10 @@ var Dropdown = function (_a) {
         return each(el, index);
     });
     React.useEffect(function () {
-        var existingElement = document.getElementById(DROPDOWN_ID);
+        var existingElement = document.getElementById(DROPDOWN_ID_CONTAINER);
         if (!existingElement) {
             var el = document.createElement("div");
-            el.id = DROPDOWN_ID;
-            // style placeholder
+            el.id = DROPDOWN_ID_CONTAINER;
             el.style.position = 'absolute';
             el.style.top = '0';
             el.style.left = '0';
@@ -63,7 +60,6 @@ var Dropdown = function (_a) {
         }
         setChange(true);
     }, [open]);
-    // structure for append menu
     function createAppendMenu() {
         if (header && footer) {
             return (React.createElement("div", { className: 'dropdown__menu dropdown__menu--has-head-foot', id: menuID, role: 'menu', ref: ref },
@@ -85,7 +81,6 @@ var Dropdown = function (_a) {
             return (React.createElement("ul", { className: 'dropdown__menu ', id: menuID, role: 'menu', ref: ref }, dropdownElements));
         }
     }
-    // toggle menu
     function toggleDisplay() {
         if (!open) {
             var menuRef_1;
@@ -134,15 +129,14 @@ var Dropdown = function (_a) {
         }
     }
     function addInPlaceholder() {
-        var placeholder = document.getElementById(DROPDOWN_ID);
+        var placeholder = document.getElementById(DROPDOWN_ID_CONTAINER);
         var menu = createAppendMenu();
         if (open) {
             return ReactDOM.render(menu, placeholder);
         }
         else {
-            var menuDOM = document.getElementById(menuID);
-            if (menuDOM) {
-                menuDOM.style.display = 'none';
+            if (placeholder) {
+                ReactDOM.unmountComponentAtNode(placeholder);
             }
         }
     }
@@ -152,20 +146,7 @@ var Dropdown = function (_a) {
             item['items'].forEach(function (el, key) {
                 submenuItems_1.push(each(el, key));
             });
-            return (React.createElement("li", { key: index },
-                React.createElement("div", { className: 'dropdown' },
-                    React.createElement("button", { ref: refButtonSubMenu, className: 'dropdown__toggle dropdown-toggle', "aria-haspopup": "menu", tabIndex: 0, onMouseOver: function () {
-                            var subMenuRef = refSubMenu.current;
-                            var subToggleRef = refButtonSubMenu.current;
-                            if (subMenuRef && subToggleRef) {
-                                (0, core_1.createPopper)(subToggleRef, subMenuRef, {
-                                    placement: 'right-start',
-                                });
-                            }
-                        }, onClick: item['onSelect'] },
-                        item['icon'] ? React.createElement("i", { className: 'icon-' + item['icon'] }) : null,
-                        item['label']),
-                    React.createElement("ul", { ref: refSubMenu, role: 'menu', className: 'dropdown__menu' }, submenuItems_1))));
+            return (React.createElement(DropdownItemWithSubmenu, { key: index, index: index, item: item, menuID: menuID, subMenuItems: submenuItems_1, onChange: onChange }));
         }
         else if (item['type'] === 'group') {
             var groupItems_1 = [];
@@ -181,7 +162,7 @@ var Dropdown = function (_a) {
             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'] }));
+            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' : '') },
@@ -223,9 +204,55 @@ var Dropdown = function (_a) {
 };
 exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
-    var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
+    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: onSelect },
+        React.createElement("button", { tabIndex: 0, role: 'menuitem', onClick: function () {
+                setTimeout(function () {
+                    onSelect();
+                });
+                if (onChange) {
+                    onChange();
+                }
+            } },
             React.createElement("i", { className: icon ? ('icon-' + icon) : '' }),
             label)));
 };
+var DropdownItemWithSubmenu = function (_a) {
+    var index = _a.index, item = _a.item, menuID = _a.menuID, subMenuItems = _a.subMenuItems, onChange = _a.onChange;
+    var _b = React.useState(undefined), open = _b[0], setOpen = _b[1];
+    var refButtonSubMenu = React.useRef(null);
+    var refSubMenu = React.useRef(null);
+    var placeholder = document.getElementById(menuID);
+    React.useEffect(function () {
+        var subMenuRef = refSubMenu.current;
+        var subToggleRef = refButtonSubMenu.current;
+        if (open === true) {
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.appendChild(subMenuRef);
+            subMenuRef.style.display = 'block';
+        }
+        else if (open === false) {
+            placeholder === null || placeholder === void 0 ? void 0 : placeholder.removeChild(subMenuRef);
+            subMenuRef.style.display = 'none';
+        }
+        if (subMenuRef && subToggleRef) {
+            (0, core_1.createPopper)(subToggleRef, subMenuRef, {
+                placement: 'right-start',
+            });
+        }
+    }, [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 () {
+                    if (item.onSelect) {
+                        setTimeout(function () {
+                            item.onSelect();
+                        });
+                    }
+                    if (onChange) {
+                        onChange();
+                    }
+                }, 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))));
+};

package/react/components/DurationInput.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+interface IProps {
+    hours?: number;
+    minutes?: number;
+    seconds?: number;
+    disabled?: boolean;
+    inlineLabel?: boolean;
+    required?: boolean;
+    fullWidth?: boolean;
+    invalid?: boolean;
+    labelHidden?: boolean;
+    tabindex?: number;
+    label?: string;
+    info?: string;
+    error?: string;
+    onChange(e: number): void;
+}
+interface IState {
+    hours?: any;
+    minutes?: any;
+    seconds?: any;
+    blink?: string;
+}
+export declare class DurationInput extends React.PureComponent<IProps, IState> {
+    hourRef: React.RefObject<HTMLInputElement>;
+    minuteRef: React.RefObject<HTMLInputElement>;
+    secondRef: React.RefObject<HTMLInputElement>;
+    private htmlId;
+    constructor(props: IProps);
+    stateUpdate(state: string, parametar1?: number, parametar2?: number, parametar3?: number): string | number;
+    componentDidUpdate(prevProps: any, prevState: IState): void;
+    valueUpdate(): void;
+    handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    handleKeyValue(event: React.KeyboardEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    zeroPad(value: number | string): string | number;
+    handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    handleFocus(ref: HTMLInputElement | null, state: 'hours' | 'minutes' | 'seconds'): void;
+    handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
+    render(): JSX.Element;
+}
+export declare function getDurationString(seconds: number, minSections?: 1 | 2 | 3): string;
+export {};

package/react/components/DurationInput.js

@@ -0,0 +1,364 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDurationString = exports.DurationInput = void 0;
+var React = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var moment_1 = __importDefault(require("moment"));
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
+var DurationInput = /** @class */ (function (_super) {
+    __extends(DurationInput, _super);
+    function DurationInput(props) {
+        var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
+        _this.state = {
+            hours: _this.stateUpdate('hours', _this.props.hours, _this.props.minutes, _this.props.seconds),
+            minutes: _this.stateUpdate('minutes', _this.props.minutes, _this.props.seconds),
+            seconds: _this.stateUpdate('seconds', _this.props.seconds),
+            blink: '',
+        };
+        _this.hourRef = React.createRef();
+        _this.minuteRef = React.createRef();
+        _this.secondRef = React.createRef();
+        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+        _this.zeroPad = _this.zeroPad.bind(_this);
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleFocusOnKeyUp = _this.handleFocusOnKeyUp.bind(_this);
+        _this.handleKeyValue = _this.handleKeyValue.bind(_this);
+        _this.valueUpdate = _this.valueUpdate.bind(_this);
+        _this.stateUpdate = _this.stateUpdate.bind(_this);
+        return _this;
+    }
+    DurationInput.prototype.stateUpdate = function (state, parametar1, parametar2, parametar3) {
+        var value;
+        if (state === 'hours') {
+            value = parametar1
+                ? parametar1 + Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600)
+                : Math.floor((parametar2 || 0) / 60) + Math.floor((parametar3 || 0) / 3600);
+        }
+        else if (state === 'minutes') {
+            value = parametar1
+                ? (parametar1 % 60) + Math.floor((parametar2 || 0) % 3600 / 60)
+                : Math.floor((parametar2 || 0) % 3600 / 60);
+        }
+        else {
+            value = parametar1 ? parametar1 % 60 : 0;
+        }
+        return this.zeroPad(value);
+    };
+    DurationInput.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
+        if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
+            return;
+        }
+        if (this.state.hours !== prevState.hours) {
+            if (Number(this.hourRef.current.value) > 99) {
+                this.setState({
+                    hours: this.zeroPad(99),
+                });
+            }
+        }
+        if (this.state.minutes !== prevState.minutes) {
+            if (Number(this.minuteRef.current.value) > 59) {
+                this.setState({
+                    hours: this.zeroPad(Number(this.state.hours) + 1),
+                    minutes: this.zeroPad(this.state.minutes % 60),
+                });
+                this.setState({ blink: 'hour' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+            if (Number(this.minuteRef.current.value) < 0) {
+                this.setState({
+                    hours: this.zeroPad(Number(this.state.hours)) > 0
+                        ? this.zeroPad(Number(this.state.hours) - 1)
+                        : this.zeroPad(Number(this.state.hours)),
+                    minutes: 59,
+                });
+                this.setState({ blink: 'hour' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+        }
+        if (this.state.seconds !== prevState.seconds) {
+            if (Number(this.secondRef.current.value) > 59) {
+                this.setState({
+                    minutes: this.zeroPad(Number(this.state.minutes) + 1),
+                    seconds: this.zeroPad(this.state.seconds % 60),
+                });
+                this.setState({ blink: 'minute' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 500);
+            }
+            if (Number(this.secondRef.current.value) < 0) {
+                this.setState({
+                    minutes: this.zeroPad(Number(this.state.minutes) - 1),
+                    seconds: 59,
+                });
+                this.setState({ blink: 'minute' });
+                setTimeout(function () {
+                    _this.setState({ blink: '' });
+                }, 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)) {
+                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),
+                    seconds: this.stateUpdate('seconds', this.props.seconds),
+                });
+            }
+        }
+    };
+    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());
+        }
+    };
+    DurationInput.prototype.handleKeyDown = function (event) {
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        if (event.target.id === 'hours') {
+            if (event.key === 'ArrowRight') {
+                if (event.target.selectionEnd === event.target.value.length) {
+                    this.handleFocus(this.minuteRef.current, event.target.id);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                if (event.target.selectionStart === 0) {
+                    this.handleFocus(this.secondRef.current, event.target.id);
+                }
+            }
+        }
+        if (event.target.id === 'minutes') {
+            if (event.key === 'ArrowRight') {
+                if (event.target.selectionEnd === event.target.value.length) {
+                    this.handleFocus(this.secondRef.current, event.target.id);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                if (event.target.selectionStart === 0) {
+                    this.handleFocus(this.hourRef.current, event.target.id);
+                }
+            }
+        }
+        if (event.target.id === 'seconds') {
+            if (event.key === 'ArrowRight') {
+                if (event.target.selectionEnd === event.target.value.length) {
+                    this.handleFocus(this.hourRef.current, event.target.id);
+                }
+            }
+            if (event.key === 'ArrowLeft') {
+                if (event.target.selectionStart === 0) {
+                    this.handleFocus(this.minuteRef.current, event.target.id);
+                }
+            }
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+            this.handleKeyValue(event, event.target.id);
+            setTimeout(this.valueUpdate);
+        }
+        if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') {
+            if (!this.state.hours || !this.state.minutes || !this.state.seconds) {
+                setTimeout(this.valueUpdate);
+            }
+        }
+    };
+    DurationInput.prototype.handleKeyValue = function (event, state) {
+        if (!(event.target instanceof HTMLInputElement)) {
+            return;
+        }
+        if (!this.state[state]) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        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);
+            }
+            else {
+                stateClone[state] = this.zeroPad(Number(this.state[state]) + 1);
+            }
+        }
+        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);
+            }
+            else {
+                stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
+            }
+        }
+        this.setState(stateClone);
+    };
+    DurationInput.prototype.zeroPad = function (value) {
+        if (value.toString().length === 1 || value === 0) {
+            return "0".concat(value);
+        }
+        else if (!value) {
+            return '00';
+        }
+        else {
+            return value;
+        }
+    };
+    DurationInput.prototype.handleChange = function (event, state) {
+        var stateClone = {};
+        if (event.target.value.length > 2) {
+            if (event.target.selectionStart === 1) {
+                stateClone[state] = event.target.value.slice(0, 1);
+            }
+            else if (event.target.selectionStart === 2) {
+                stateClone[state] = event.target.value.slice(1, 2);
+            }
+            else {
+                stateClone[state] = event.target.value.slice(2, 3);
+            }
+        }
+        else {
+            stateClone[state] = event.target.value;
+        }
+        this.setState(stateClone);
+        setTimeout(this.valueUpdate);
+    };
+    DurationInput.prototype.handleFocus = function (ref, state) {
+        ref === null || ref === void 0 ? void 0 : ref.focus();
+        setTimeout(function () {
+            ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
+        });
+        var stateClone = {};
+        stateClone[state] = this.zeroPad(this.state[state]);
+        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.keyCode > 46 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106)) {
+                var target = event.target;
+                if (target.value.length >= 2) {
+                    ref === null || ref === void 0 ? void 0 : ref.focus();
+                    setTimeout(function () {
+                        ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
+                    });
+                }
+            }
+        }
+    };
+    DurationInput.prototype.render = function () {
+        var _this = this;
+        var InputClasses = (0, classnames_1.default)('sd-input__duration-input');
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.props.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+            React.createElement("div", { className: InputClasses },
+                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) {
+                        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) {
+                        if (!/[0-9]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    } }),
+                React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
+    };
+    return DurationInput;
+}(React.PureComponent));
+exports.DurationInput = DurationInput;
+function getDurationString(seconds, minSections) {
+    if (minSections === void 0) { minSections = 1; }
+    function zeroPad(value) {
+        if (value.toString().length === 1 || value === 0) {
+            return "0".concat(value);
+        }
+        else if (!value) {
+            return '00';
+        }
+        else {
+            return value;
+        }
+    }
+    var hour = zeroPad(Math.floor(seconds / 3600));
+    var minute = zeroPad(Math.floor((seconds % 3600) / 60));
+    var second = zeroPad(Math.floor(seconds % 60));
+    if (minSections === 3) {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
+    else if (minSections === 2) {
+        if (Number(hour) > 0) {
+            return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+        }
+        else {
+            return "".concat(minute, "m ").concat(second, "s");
+        }
+    }
+    else {
+        if (Number(hour) === 0 && Number(minute) === 0) {
+            return "".concat(second, "s");
+        }
+        else if (Number(hour) === 0 && Number(minute) > 0) {
+            return "".concat(minute, "m ").concat(second, "s");
+        }
+        else {
+            return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+        }
+    }
+}
+exports.getDurationString = getDurationString;

package/react/components/EmptyState.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     size?: 'small' | 'large';
     title: string;
     description?: string;
+    absolutePositioned?: boolean;
 }
 export declare class EmptyState extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/EmptyState.js

@@ -53,7 +53,7 @@ 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' },
+        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 })),

package/react/components/Form/FormLabel.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 interface IProps {
-    style?: 'normal' | 'light';
+    style?: 'normal' | 'light' | 'boxed';
+    state?: 'default' | 'focused' | 'warning';
     text: string;
     forId?: string;
+    required?: boolean;
+    invalid?: boolean;
 }
 export declare class FormLabel extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/Form/FormLabel.js

@@ -46,9 +46,15 @@ var FormLabel = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     FormLabel.prototype.render = function () {
-        var classes = (0, classnames_1.default)('form-label', {
-            'form-label--light': this.props.style === 'light',
-        });
+        var _a;
+        var classes = (0, classnames_1.default)('form-label', (_a = {
+                'form-label--light': this.props.style === 'light',
+                'form-label--boxed': this.props.style === 'boxed',
+                'form-label--required': this.props.required,
+                'form-label--invalid': this.props.invalid
+            },
+            _a["form-label--".concat(this.props.state)] = this.props.state !== 'default' && this.props.state !== undefined,
+            _a));
         return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
     };
     return FormLabel;

package/react/components/Form/FormRowNew.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    children: React.ReactNode;
+    spaces?: 'default' | 'condensed' | 'relaxed';
+    marginBottom?: '0' | '1' | '2' | '3' | '4';
+    inlineLabels?: boolean;
+    rowLabel?: string;
+}
+export declare class FormRowNew extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};