superdesk-ui-framework 3.0.1-beta.1 → 3.0.1-beta.4

package/react/components/DonutChart.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { ChartData, ChartOptions } from 'chart.js';
 interface IProps {
     data: ChartData;

package/react/components/DonutChart.js

@@ -3,21 +3,39 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DonutChart = void 0;
-var react_1 = __importDefault(require("react"));
+var React = __importStar(require("react"));
 var chart_1 = require("@superdesk/primereact/chart");
 var DonutChart = /** @class */ (function (_super) {
     __extends(DonutChart, _super);
@@ -25,8 +43,8 @@ var DonutChart = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DonutChart.prototype.render = function () {
-        return react_1.default.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_1.default.Component));
+}(React.Component));
 exports.DonutChart = DonutChart;

package/react/components/DropZone.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 interface IProps {
     icon?: boolean;
-    text: string;
-    actionText: string;
+    iconSmall?: boolean;
+    text?: string;
     heading?: string;
     className?: string;
     width?: 'auto' | 'full';

package/react/components/DropZone.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -72,15 +74,15 @@ var DropZone = /** @class */ (function (_super) {
     DropZone.prototype.render = function () {
         var _a;
         var _this = this;
-        var classes = classnames_1.default('sd-dropzone__drop-target', (_a = {
+        var classes = (0, classnames_1.default)('sd-dropzone__drop-target', (_a = {
                 'sd-dropzone__drop-target--ondragover': this.state.dragClass,
                 'sd-dropzone__drop-target--ondrop': this.state.dropClass
             },
-            _a["sd-dropzone__drop-target--" + this.props.type] = this.props.type,
+            _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' })),
+            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,

package/react/components/Dropdown.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -24,11 +24,11 @@ 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");
-exports.Dropdown = function (_a) {
+var Dropdown = function (_a) {
     var items = _a.items, header = _a.header, footer = _a.footer, children = _a.children, append = _a.append, align = _a.align;
     var _b = React.useState(false), open = _b[0], setOpen = _b[1];
     var _c = React.useState(false), change = _c[0], setChange = _c[1];
-    var menuID = react_id_generator_1.useId()[0];
+    var menuID = (0, react_id_generator_1.useId)()[0];
     var DROPDOWN_ID = "react-placeholder";
     var ref = React.useRef(null);
     var refSubMenu = React.useRef(null);
@@ -94,7 +94,7 @@ exports.Dropdown = function (_a) {
                 menuRef_1 = ref.current;
                 var toggleRef = buttonRef.current;
                 if (toggleRef && menuRef_1) {
-                    core_1.createPopper(toggleRef, menuRef_1, {
+                    (0, core_1.createPopper)(toggleRef, menuRef_1, {
                         placement: checkAlign() ? 'bottom-end' : 'bottom-start',
                     });
                 }
@@ -104,7 +104,7 @@ exports.Dropdown = function (_a) {
                     menuRef_1 = ref.current;
                     var toggleRef = buttonRef.current;
                     if (toggleRef && menuRef_1) {
-                        core_1.createPopper(toggleRef, menuRef_1, {
+                        (0, core_1.createPopper)(toggleRef, menuRef_1, {
                             placement: checkAlign() ? 'bottom-end' : 'bottom-start',
                             strategy: 'fixed',
                         });
@@ -158,7 +158,7 @@ exports.Dropdown = function (_a) {
                             var subMenuRef = refSubMenu.current;
                             var subToggleRef = refButtonSubMenu.current;
                             if (subMenuRef && subToggleRef) {
-                                core_1.createPopper(subToggleRef, subMenuRef, {
+                                (0, core_1.createPopper)(subToggleRef, subMenuRef, {
                                     placement: 'right-start',
                                 });
                             }
@@ -221,6 +221,7 @@ exports.Dropdown = function (_a) {
             }
         })()));
 };
+exports.Dropdown = Dropdown;
 var DropdownItem = function (_a) {
     var label = _a.label, icon = _a.icon, active = _a.active, onSelect = _a.onSelect;
     return (React.createElement("li", { role: 'none', className: active ? 'dropdown__menu-item--active' : '' },

package/react/components/DropdownFirst.js

@@ -14,7 +14,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -25,7 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownFooter = exports.DropdownBody = exports.DropdownHeader = exports.DropdownLabel = exports.DropdownDivider = exports.DropdownItem = exports.DropdownFirst = void 0;
 var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-exports.DropdownFirst = function (_a) {
+var DropdownFirst = function (_a) {
     var _b, _c;
     var name = _a.name, align = _a.align, side = _a.side, level = _a.level, icon = _a.icon, headerFooter = _a.headerFooter, navDropdown = _a.navDropdown, children = _a.children;
     var _d = React.useState(false), open = _d[0], setOpen = _d[1];
@@ -60,10 +60,10 @@ exports.DropdownFirst = function (_a) {
             clearTimeout(inDebounce);
         };
     }, [open]);
-    var classes = classnames_1.default('dropdown', (_b = {},
+    var classes = (0, classnames_1.default)('dropdown', (_b = {},
         _b['open'] = open,
         _b['dropdown--align-right'] = align === 'right',
-        _b["dropdown--drop" + side] = side,
+        _b["dropdown--drop".concat(side)] = side,
         _b['dropdown--dropup'] = height,
         _b));
     function isOpen() {
@@ -112,7 +112,7 @@ exports.DropdownFirst = function (_a) {
     }
     else {
         if (level) {
-            var classesMenu = classnames_1.default('dropdown__menu', (_c = {},
+            var classesMenu = (0, classnames_1.default)('dropdown__menu', (_c = {},
                 _c['dropdown__menu--submenu-left'] = align === 'left',
                 _c));
             return (React.createElement("li", null,
@@ -133,7 +133,8 @@ exports.DropdownFirst = function (_a) {
         }
     }
 };
-exports.DropdownItem = function (_a) {
+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);
@@ -145,32 +146,38 @@ exports.DropdownItem = function (_a) {
                 text)));
     }
 };
-exports.DropdownDivider = function (_a) {
+exports.DropdownItem = DropdownItem;
+var DropdownDivider = function (_a) {
     return (React.createElement("li", { className: "dropdown__menu-divider" }));
 };
-exports.DropdownLabel = function (_a) {
+exports.DropdownDivider = DropdownDivider;
+var DropdownLabel = function (_a) {
     var text = _a.text;
     return (React.createElement("li", null,
         React.createElement("div", { className: "dropdown__menu-label" }, text)));
 };
-exports.DropdownHeader = function (_a) {
+exports.DropdownLabel = DropdownLabel;
+var DropdownHeader = function (_a) {
     var title = _a.title, children = _a.children;
     return (React.createElement("ul", { className: 'dropdown__menu-header' },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
-exports.DropdownBody = function (_a) {
+exports.DropdownHeader = DropdownHeader;
+var DropdownBody = function (_a) {
     var title = _a.title, children = _a.children;
     return (React.createElement("ul", { className: 'dropdown__menu-body' },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
-exports.DropdownFooter = function (_a) {
+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' },
         React.createElement(exports.DropdownLabel, { text: title }),
         children));
 };
+exports.DropdownFooter = DropdownFooter;
 exports.DropdownFirst.Item = exports.DropdownItem;
 exports.DropdownFirst.Divider = exports.DropdownDivider;
 exports.DropdownFirst.Label = exports.DropdownLabel;

package/react/components/DurationInput.d.ts

@@ -0,0 +1,38 @@
+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;
+    invalid?: any;
+}
+export declare class DurationInput extends React.PureComponent<IProps, IState> {
+    hourRef: React.RefObject<HTMLInputElement>;
+    minuteRef: React.RefObject<HTMLInputElement>;
+    secondRef: React.RefObject<HTMLInputElement>;
+    constructor(props: IProps);
+    componentDidUpdate(_: any, prevState: IState): void;
+    handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    handleKeyValue(event: React.KeyboardEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
+    zerPad(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 {};

package/react/components/DurationInput.js

@@ -0,0 +1,271 @@
+"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.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 DurationInput = /** @class */ (function (_super) {
+    __extends(DurationInput, _super);
+    function DurationInput(props) {
+        var _a;
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            hours: _this.props.hours ? _this.zerPad(_this.props.hours) : _this.zerPad(0),
+            minutes: _this.props.minutes ? _this.zerPad(_this.props.minutes) : _this.zerPad(0),
+            seconds: _this.props.seconds ? _this.zerPad(_this.props.seconds) : _this.zerPad(0),
+            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
+        };
+        _this.hourRef = React.createRef();
+        _this.minuteRef = React.createRef();
+        _this.secondRef = React.createRef();
+        _this.handleKeyDown = _this.handleKeyDown.bind(_this);
+        _this.zerPad = _this.zerPad.bind(_this);
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleFocusOnKeyUp = _this.handleFocusOnKeyUp.bind(_this);
+        _this.handleKeyValue = _this.handleKeyValue.bind(_this);
+        return _this;
+    }
+    DurationInput.prototype.componentDidUpdate = function (_, prevState) {
+        if (this.props.onChange) {
+            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
+                .asSeconds());
+        }
+        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.zerPad(99),
+                });
+            }
+        }
+        if (this.state.minutes !== prevState.minutes) {
+            if (Number(this.minuteRef.current.value) > 59) {
+                this.setState({
+                    hours: this.zerPad(Number(this.state.hours) + 1),
+                    minutes: this.zerPad(0),
+                });
+            }
+            if (Number(this.minuteRef.current.value) < 0) {
+                this.setState({
+                    hours: this.zerPad(Number(this.state.hours)) > 0
+                        ? this.zerPad(Number(this.state.hours) - 1)
+                        : this.zerPad(Number(this.state.hours)),
+                    minutes: 59,
+                });
+            }
+        }
+        if (this.state.seconds !== prevState.seconds) {
+            if (Number(this.secondRef.current.value) > 59) {
+                this.setState({
+                    minutes: this.zerPad(Number(this.state.minutes) + 1),
+                    seconds: this.zerPad(0),
+                });
+            }
+            if (Number(this.secondRef.current.value) < 0) {
+                this.setState({
+                    minutes: this.zerPad(Number(this.state.minutes) - 1),
+                    seconds: 59,
+                });
+            }
+        }
+    };
+    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);
+        }
+    };
+    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.zerPad(Number(this.state[state]) + 1)
+                    : this.zerPad(99);
+            }
+            else {
+                stateClone[state] = this.zerPad(Number(this.state[state]) + 1);
+            }
+        }
+        else if (event.key === 'ArrowDown') {
+            if (event.target.id === 'hours') {
+                stateClone[state] = this.state[state] > 0 ? this.zerPad(Number(this.state[state]) - 1) : this.zerPad(0);
+            }
+            else {
+                stateClone[state] = this.zerPad(Number(this.state[state]) - 1);
+            }
+        }
+        this.setState(stateClone);
+    };
+    DurationInput.prototype.zerPad = 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) {
+            stateClone[state] = event.target.value.slice(0, 2);
+        }
+        else {
+            stateClone[state] = event.target.value;
+        }
+        this.setState(stateClone);
+    };
+    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.zerPad(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') {
+            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');
+        var classes = (0, classnames_1.default)('sd-input', {
+            'sd-input--inline-label': this.props.inlineLabel,
+            'sd-input--required': this.props.required,
+            'sd-input--disabled': this.props.disabled,
+            'sd-input--full-width': this.props.fullWidth,
+            'sd-input--invalid': this.props.invalid || this.state.invalid,
+        });
+        var labelClasses = (0, classnames_1.default)('sd-input__label', {
+            'a11y-only': this.props.labelHidden,
+        });
+        var htmlId = (0, react_id_generator_1.default)();
+        return (React.createElement("div", { className: classes },
+            React.createElement("label", { className: labelClasses, htmlFor: htmlId, id: htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
+            React.createElement("div", { className: InputClasses },
+                React.createElement("input", { className: 'duration-input', type: 'text', id: 'hours', 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.zerPad(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', type: 'text', id: 'minutes', 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.zerPad(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', 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.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                        if (!/[0-9]/.test(event.key)) {
+                            event.preventDefault();
+                        }
+                    } }),
+                React.createElement("span", { className: 'sd-input__suffix' }, "s")),
+            React.createElement("div", { className: 'sd-input__message-box' },
+                this.props.info && !this.props.invalid && !this.state.invalid ?
+                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
+                this.props.invalid || this.state.invalid ?
+                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
+                    : null)));
+    };
+    return DurationInput;
+}(React.PureComponent));
+exports.DurationInput = DurationInput;

package/react/components/EmptyState.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -45,12 +47,12 @@ var EmptyState = /** @class */ (function (_super) {
     }
     EmptyState.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('content-state__image', (_a = {
+        var classes = (0, classnames_1.default)('content-state__image', (_a = {
                 'content-state__image--small': this.props.size === undefined
             },
-            _a["content-state__image--" + this.props.size] = this.props.size || this.props.size !== undefined,
+            _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--" + (this.props.size ? this.props.size : 'small') + "-" + (this.props.illustration ? this.props.illustration : '1') + ".svg");
+        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' },
             React.createElement("div", { className: 'content-state__empty-info' },
                 React.createElement("figure", { className: classes },

package/react/components/Form/FormGroup.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -27,7 +29,7 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 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.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    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;
 };
@@ -45,13 +47,13 @@ var FormGroup = /** @class */ (function (_super) {
     }
     FormGroup.prototype.render = function () {
         var _a;
-        var classes = classnames_1.default('form__group', (_a = {
+        var classes = (0, classnames_1.default)('form__group', (_a = {
                 'form__group--rows': this.props.rows
             },
             _a["form__group--vertical"] = this.props.orientation === 'vertical',
             _a["form__group--default"] = this.props.spaces === undefined,
-            _a["form__group--" + this.props.spaces] = this.props.spaces,
-            _a["form__group--mb-" + this.props.marginBottom] = this.props.marginBottom,
+            _a["form__group--".concat(this.props.spaces)] = this.props.spaces,
+            _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));