superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.16

package/dist/superdesk-ui.bundle.js

@@ -5769,7 +5769,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
 })));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(49)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(50)(module)))
 
 /***/ }),
 /* 2 */
@@ -5860,7 +5860,7 @@ exports.TableListItem = exports.TableList = exports.TreeSelect = exports.BottomN
 exports.ContentListItem = void 0;
 var HelloWorld_1 = __webpack_require__(277);
 Object.defineProperty(exports, "HelloWorld", { enumerable: true, get: function () { return HelloWorld_1.HelloWorld; } });
-var Button_1 = __webpack_require__(51);
+var Button_1 = __webpack_require__(52);
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Input_1 = __webpack_require__(278);
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
@@ -5891,15 +5891,15 @@ var IconLabel_1 = __webpack_require__(306);
 Object.defineProperty(exports, "IconLabel", { enumerable: true, get: function () { return IconLabel_1.IconLabel; } });
 var Tooltip_1 = __webpack_require__(36);
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
-var DurationInput_1 = __webpack_require__(56);
+var DurationInput_1 = __webpack_require__(75);
 Object.defineProperty(exports, "DurationInput", { enumerable: true, get: function () { return DurationInput_1.DurationInput; } });
-var DurationInput_2 = __webpack_require__(56);
+var DurationInput_2 = __webpack_require__(75);
 Object.defineProperty(exports, "getDurationString", { enumerable: true, get: function () { return DurationInput_2.getDurationString; } });
-var DatePicker_1 = __webpack_require__(57);
+var DatePicker_1 = __webpack_require__(56);
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
-var DatePicker_2 = __webpack_require__(57);
+var DatePicker_2 = __webpack_require__(56);
 Object.defineProperty(exports, "DatePickerISO", { enumerable: true, get: function () { return DatePicker_2.DatePickerISO; } });
-var DatePicker_3 = __webpack_require__(57);
+var DatePicker_3 = __webpack_require__(56);
 Object.defineProperty(exports, "DatePickerLocaleSettings", { enumerable: true, get: function () { return DatePicker_3.DatePickerLocaleSettings; } });
 var TimePicker_1 = __webpack_require__(264);
 Object.defineProperty(exports, "TimePicker", { enumerable: true, get: function () { return TimePicker_1.TimePicker; } });
@@ -5911,7 +5911,7 @@ var SwitchGroup_1 = __webpack_require__(339);
 Object.defineProperty(exports, "SwitchGroup", { enumerable: true, get: function () { return SwitchGroup_1.SwitchGroup; } });
 var ButtonGroup_1 = __webpack_require__(340);
 Object.defineProperty(exports, "ButtonGroup", { enumerable: true, get: function () { return ButtonGroup_1.ButtonGroup; } });
-var Loader_1 = __webpack_require__(60);
+var Loader_1 = __webpack_require__(59);
 Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_1.Loader; } });
 var RadioGroup_1 = __webpack_require__(341);
 Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return RadioGroup_1.RadioGroup; } });
@@ -5983,7 +5983,7 @@ var TagInputTest_1 = __webpack_require__(417);
 Object.defineProperty(exports, "TagInputTest", { enumerable: true, get: function () { return TagInputTest_1.TagInputTest; } });
 var GridList_1 = __webpack_require__(418);
 Object.defineProperty(exports, "GridList", { enumerable: true, get: function () { return GridList_1.GridList; } });
-var GridItem_1 = __webpack_require__(72);
+var GridItem_1 = __webpack_require__(71);
 Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return GridItem_1.GridItem; } });
 Object.defineProperty(exports, "GridItemContent", { enumerable: true, get: function () { return GridItem_1.GridItemContent; } });
 Object.defineProperty(exports, "GridItemMedia", { enumerable: true, get: function () { return GridItem_1.GridItemMedia; } });
@@ -6025,7 +6025,7 @@ var Skeleton_1 = __webpack_require__(246);
 Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return Skeleton_1.Skeleton; } });
 var ListItemLoader_1 = __webpack_require__(479);
 Object.defineProperty(exports, "ListItemLoader", { enumerable: true, get: function () { return ListItemLoader_1.ListItemLoader; } });
-var Spinner_1 = __webpack_require__(52);
+var Spinner_1 = __webpack_require__(53);
 Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
 Object.defineProperty(exports, "LoadingOverlay", { enumerable: true, get: function () { return Spinner_1.LoadingOverlay; } });
 var Text_1 = __webpack_require__(480);
@@ -7363,7 +7363,7 @@ var FormItem_1 = __webpack_require__(281);
 Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
 var FormText_1 = __webpack_require__(282);
 Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
-var FormLabel_1 = __webpack_require__(53);
+var FormLabel_1 = __webpack_require__(49);
 Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
 var InputWrapper_1 = __webpack_require__(283);
 Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
@@ -25899,7 +25899,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
   }
 }.call(this));
 
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(49)(module)))
+/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(35), __webpack_require__(50)(module)))
 
 /***/ }),
 /* 34 */
@@ -37665,6 +37665,75 @@ if (process.env.NODE_ENV === 'production') {
 
 /***/ }),
 /* 49 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"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.FormLabel = void 0;
+var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
+var FormLabel = /** @class */ (function (_super) {
+    __extends(FormLabel, _super);
+    function FormLabel() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FormLabel.prototype.render = function () {
+        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;
+}(React.PureComponent));
+exports.FormLabel = FormLabel;
+
+
+/***/ }),
+/* 50 */
 /***/ (function(module, exports) {
 
 module.exports = function(module) {
@@ -37692,7 +37761,7 @@ module.exports = function(module) {
 
 
 /***/ }),
-/* 50 */
+/* 51 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -37711,7 +37780,7 @@ module.exports = ReactPropTypesSecret;
 
 
 /***/ }),
-/* 51 */
+/* 52 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -37758,7 +37827,7 @@ exports.Button = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var Icon_1 = __webpack_require__(7);
-var Spinner_1 = __webpack_require__(52);
+var Spinner_1 = __webpack_require__(53);
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button() {
@@ -37789,7 +37858,7 @@ exports.Button = Button;
 
 
 /***/ }),
-/* 52 */
+/* 53 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -37866,69 +37935,6 @@ var Spinner = /** @class */ (function (_super) {
 exports.Spinner = Spinner;
 
 
-/***/ }),
-/* 53 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"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.FormLabel = void 0;
-var React = __importStar(__webpack_require__(0));
-var classnames_1 = __importDefault(__webpack_require__(2));
-var FormLabel = /** @class */ (function (_super) {
-    __extends(FormLabel, _super);
-    function FormLabel() {
-        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',
-        });
-        return (React.createElement("label", { htmlFor: this.props.forId, className: classes }, this.props.text));
-    };
-    return FormLabel;
-}(React.PureComponent));
-exports.FormLabel = FormLabel;
-
-
 /***/ }),
 /* 54 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -38594,366 +38600,6 @@ Transition.EXITING = EXITING;
 
 "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(__webpack_require__(0));
-var classnames_1 = __importDefault(__webpack_require__(2));
-var moment_1 = __importDefault(__webpack_require__(1));
-var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(14);
-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.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 && event.target.selectionEnd === 1) {
-                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
-            }
-            else {
-                stateClone[state] = event.target.value.slice(0, 2);
-            }
-        }
-        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', 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', 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', 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, zero) {
-    function zeroPad(value) {
-        if (value.toString().length === 1 || value === 0) {
-            return "0".concat(value);
-        }
-        else if (!value) {
-            return '00';
-        }
-        else {
-            return value;
-        }
-    }
-    var hour;
-    var minute;
-    var second;
-    if (zero) {
-        hour = zeroPad(Math.floor(seconds / 3600));
-        minute = zeroPad(Math.floor((seconds % 3600) / 60));
-        second = zeroPad(Math.floor(seconds % 60));
-    }
-    else {
-        hour = Math.floor(seconds / 3600);
-        minute = Math.floor((seconds % 3600) / 60);
-        second = Math.floor(seconds % 60);
-    }
-    if (Number(hour) === 0 && Number(minute) > 0) {
-        return "".concat(minute, "m ").concat(second, "s");
-    }
-    else if (Number(hour) === 0 && Number(minute) === 0) {
-        return "".concat(second, "s");
-    }
-    else {
-        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
-    }
-}
-exports.getDurationString = getDurationString;
-
-
-/***/ }),
-/* 57 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -39139,7 +38785,7 @@ exports.DatePickerISO = DatePickerISO;
 
 
 /***/ }),
-/* 58 */
+/* 57 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39163,7 +38809,7 @@ function startOfUTCISOWeek(dirtyDate) {
 }
 
 /***/ }),
-/* 59 */
+/* 58 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39198,7 +38844,7 @@ function startOfUTCWeek(dirtyDate, dirtyOptions) {
 }
 
 /***/ }),
-/* 60 */
+/* 59 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -39259,7 +38905,7 @@ exports.Loader = Loader;
 
 
 /***/ }),
-/* 61 */
+/* 60 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39299,7 +38945,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "offset", function() { return __WEBPACK_IMPORTED_MODULE_1__modifiers_index_js__["g"]; });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "popperOffsets", function() { return __WEBPACK_IMPORTED_MODULE_1__modifiers_index_js__["h"]; });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "preventOverflow", function() { return __WEBPACK_IMPORTED_MODULE_1__modifiers_index_js__["i"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__createPopper_js__ = __webpack_require__(71);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__createPopper_js__ = __webpack_require__(70);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "popperGenerator", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["c"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "detectOverflow", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["b"]; });
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "createPopperBase", function() { return __WEBPACK_IMPORTED_MODULE_2__createPopper_js__["a"]; });
@@ -39317,7 +38963,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 /***/ }),
-/* 62 */
+/* 61 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39409,7 +39055,7 @@ function effect(_ref2) {
 });
 
 /***/ }),
-/* 63 */
+/* 62 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39442,7 +39088,7 @@ function getLayoutRect(element) {
 }
 
 /***/ }),
-/* 64 */
+/* 63 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39452,7 +39098,7 @@ function getMainAxisFromPlacement(placement) {
 }
 
 /***/ }),
-/* 65 */
+/* 64 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39649,7 +39295,7 @@ function computeStyles(_ref5) {
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)))
 
 /***/ }),
-/* 66 */
+/* 65 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39705,14 +39351,14 @@ function effect(_ref) {
 });
 
 /***/ }),
-/* 67 */
+/* 66 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getWindowScrollBarX;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getBoundingClientRect_js__ = __webpack_require__(37);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getDocumentElement_js__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScroll_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScroll_js__ = __webpack_require__(67);
 
 
 
@@ -39728,7 +39374,7 @@ function getWindowScrollBarX(element) {
 }
 
 /***/ }),
-/* 68 */
+/* 67 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39746,7 +39392,7 @@ function getWindowScroll(node) {
 }
 
 /***/ }),
-/* 69 */
+/* 68 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39764,7 +39410,7 @@ function isScrollParent(element) {
 }
 
 /***/ }),
-/* 70 */
+/* 69 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -39796,14 +39442,14 @@ function popperOffsets(_ref) {
 });
 
 /***/ }),
-/* 71 */
+/* 70 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony export (immutable) */ __webpack_exports__["c"] = popperGenerator;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__dom_utils_getCompositeRect_js__ = __webpack_require__(382);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(62);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_listScrollParents_js__ = __webpack_require__(235);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__dom_utils_getOffsetParent_js__ = __webpack_require__(38);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__dom_utils_getComputedStyle_js__ = __webpack_require__(34);
@@ -40079,7 +39725,7 @@ var createPopper = /*#__PURE__*/popperGenerator(); // eslint-disable-next-line i
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)))
 
 /***/ }),
-/* 72 */
+/* 71 */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -40301,7 +39947,7 @@ exports.default = GridItem;
 
 
 /***/ }),
-/* 73 */
+/* 72 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40435,7 +40081,7 @@ function createSubscription(store, parentSub) {
 }
 
 /***/ }),
-/* 74 */
+/* 73 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40454,7 +40100,7 @@ function createSubscription(store, parentSub) {
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? __WEBPACK_IMPORTED_MODULE_0_react__["useLayoutEffect"] : __WEBPACK_IMPORTED_MODULE_0_react__["useEffect"];
 
 /***/ }),
-/* 75 */
+/* 74 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -40477,6 +40123,361 @@ function invariant(condition, message) {
 
 /* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(4)))
 
+/***/ }),
+/* 75 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"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(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
+var moment_1 = __importDefault(__webpack_require__(1));
+var react_id_generator_1 = __importDefault(__webpack_require__(8));
+var Form_1 = __webpack_require__(14);
+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.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 && event.target.selectionEnd === 1) {
+                stateClone[state] = event.target.value.slice(0, 1) + event.target.value.slice(2, 3);
+            }
+            else {
+                stateClone[state] = event.target.value.slice(0, 2);
+            }
+        }
+        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', 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', 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', 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, zero) {
+    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 (zero) {
+        return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+    }
+    else {
+        if (Number(hour) === 0 && Number(minute) > 0) {
+            return "".concat(minute, "m ").concat(second, "s");
+        }
+        else if (Number(hour) === 0 && Number(minute) === 0) {
+            return "".concat(second, "s");
+        }
+        else {
+            return "".concat(hour, "h ").concat(minute, "m ").concat(second, "s");
+        }
+    }
+}
+exports.getDurationString = getDurationString;
+
+
 /***/ }),
 /* 76 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -40733,7 +40734,7 @@ var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var react_beautiful_dnd_1 = __webpack_require__(494);
 var Tooltip_1 = __webpack_require__(36);
-var Button_1 = __webpack_require__(51);
+var Button_1 = __webpack_require__(52);
 var Dropdown_1 = __webpack_require__(226);
 var reorder = function (list, startIndex, endIndex) {
     var result = Array.from(list);
@@ -40793,30 +40794,30 @@ var TableList = /** @class */ (function (_super) {
         return (this.state.items.length > 0
             ? this.props.dragAndDrop
                 ? React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: this.onDragEnd },
-                    React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("ul", __assign({ className: classes, ref: provided.innerRef }, provided.droppableProps),
+                    React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "droppable" }, function (provided, _snapshot) { return (React.createElement("div", __assign({ role: 'list', className: classes, ref: provided.innerRef }, provided.droppableProps),
                         _this.state.items.map(function (item, index) { return (React.createElement(react_beautiful_dnd_1.Draggable, { key: index, draggableId: "".concat(index), index: index }, function (provided2, _snapshot2) { return (React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
                             React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
                                     ? item.onDoubleClick
                                     : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown
                                     ? _this.props.itemsDropdown(index)
-                                    : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                                    : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
                                     && _this.props.onAddItem(index, item); }, showDragHandle: _this.props.showDragHandle }))); })); }),
                         provided.placeholder,
                         (_this.props.addItem && !_this.props.readOnly) &&
-                            React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                            React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
                                 React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
-                : React.createElement("ul", { className: classes },
+                : React.createElement("div", { role: 'list', className: classes },
                     this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick ? item.onClick : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
-                            : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, onAddItem: function () { return _this.props.onAddItem
+                            : undefined, addItem: _this.props.addItem, itemsDropdown: function () { return _this.props.itemsDropdown ? _this.props.itemsDropdown(index) : []; }, hexColor: item.hexColor, locked: item.locked, positionLocked: item.positionLocked, onAddItem: function () { return _this.props.onAddItem
                             && _this.props.onAddItem(index, item); } })); }),
                     (this.props.addItem && !this.props.readOnly) &&
-                        React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+                        React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
                             React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                 React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
-            : (this.props.addItem && !this.props.readOnly) ? React.createElement("ul", { className: classes },
-                React.createElement("li", { className: "table-list__add-item table-list__item--margin" },
+            : (this.props.addItem && !this.props.readOnly) ? React.createElement("div", { role: 'list', className: classes },
+                React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
                     React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                         React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
                 : null);
@@ -40856,12 +40857,14 @@ var TableListItem = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('table-list__item', {
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--locked': this.props.locked,
+            'table-list__item--position-locked': this.props.positionLocked,
             'table-list__item--drag-handles-always': !this.props.showDragHandle,
             'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
         });
         return (this.props.addItem ?
-            React.createElement("li", { className: 'table-list__item-container' },
-                React.createElement("div", { onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
+            React.createElement("div", { className: 'table-list__item-container' },
+                React.createElement("div", { role: 'listitem', onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); }, className: classes },
                     React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                     React.createElement("div", { className: 'table-list__item-content' },
                         React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -40873,7 +40876,7 @@ var TableListItem = /** @class */ (function (_super) {
                         React.createElement("div", { className: 'table-list__add-bar' },
                             React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
                                 React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))
-            : React.createElement("li", { className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
+            : React.createElement("div", { role: 'listitem', className: "".concat(classes, " table-list__item--margin"), onClick: function () { return _this.onSingleClick(); }, onDoubleClick: function () { return _this.onDoubleClick(); } },
                 React.createElement("div", { className: 'table-list__item-border', style: { backgroundColor: this.props.hexColor } }),
                 React.createElement("div", { className: 'table-list__item-content' },
                     React.createElement("div", { className: 'table-list__item-content-block' }, this.props.start && this.props.start),
@@ -56360,7 +56363,7 @@ function addLeadingZeros(number, targetLength) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(57);
 
  // This function will be a part of public API when UTC function will be implemented.
 // See issue: https://github.com/date-fns/date-fns/issues/376
@@ -56398,7 +56401,7 @@ function getUTCISOWeekYear(dirtyDate) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toInteger_index_js__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(59);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(58);
 
 
  // This function will be a part of public API when UTC function will be implemented.
@@ -57038,7 +57041,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dropdown = void 0;
 var React = __importStar(__webpack_require__(0));
 var ReactDOM = __importStar(__webpack_require__(9));
-var core_1 = __webpack_require__(61);
+var core_1 = __webpack_require__(60);
 var react_id_generator_1 = __webpack_require__(8);
 var DROPDOWN_ID_CONTAINER = "sd-dropdown-constainer";
 var Dropdown = function (_a) {
@@ -57275,13 +57278,13 @@ var DropdownItemWithSubmenu = function (_a) {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__applyStyles_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__applyStyles_js__ = __webpack_require__(61);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return __WEBPACK_IMPORTED_MODULE_0__applyStyles_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__arrow_js__ = __webpack_require__(228);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_1__arrow_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__computeStyles_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__computeStyles_js__ = __webpack_require__(64);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return __WEBPACK_IMPORTED_MODULE_2__computeStyles_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__eventListeners_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__eventListeners_js__ = __webpack_require__(65);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return __WEBPACK_IMPORTED_MODULE_3__eventListeners_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__flip_js__ = __webpack_require__(234);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return __WEBPACK_IMPORTED_MODULE_4__flip_js__["a"]; });
@@ -57289,7 +57292,7 @@ var DropdownItemWithSubmenu = function (_a) {
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return __WEBPACK_IMPORTED_MODULE_5__hide_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__offset_js__ = __webpack_require__(239);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return __WEBPACK_IMPORTED_MODULE_6__offset_js__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__popperOffsets_js__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__popperOffsets_js__ = __webpack_require__(69);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return __WEBPACK_IMPORTED_MODULE_7__popperOffsets_js__["a"]; });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__preventOverflow_js__ = __webpack_require__(240);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return __WEBPACK_IMPORTED_MODULE_8__preventOverflow_js__["a"]; });
@@ -57309,10 +57312,10 @@ var DropdownItemWithSubmenu = function (_a) {
 
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_getBasePlacement_js__ = __webpack_require__(21);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getLayoutRect_js__ = __webpack_require__(62);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_contains_js__ = __webpack_require__(229);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__dom_utils_getOffsetParent_js__ = __webpack_require__(38);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_getMainAxisFromPlacement_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_getMainAxisFromPlacement_js__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_within_js__ = __webpack_require__(230);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_mergePaddingObject_js__ = __webpack_require__(231);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_expandToHashMap_js__ = __webpack_require__(233);
@@ -57678,7 +57681,7 @@ function flip(_ref) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getScrollParent_js__ = __webpack_require__(379);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getParentNode_js__ = __webpack_require__(46);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindow_js__ = __webpack_require__(19);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isScrollParent_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__isScrollParent_js__ = __webpack_require__(68);
 
 
 
@@ -57729,7 +57732,7 @@ function rectToClientRect(rect) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = computeOffsets;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getBasePlacement_js__ = __webpack_require__(21);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getVariation_js__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getMainAxisFromPlacement_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getMainAxisFromPlacement_js__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__enums_js__ = __webpack_require__(11);
 
 
@@ -57941,10 +57944,10 @@ function offset(_ref2) {
 "use strict";
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(11);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_getBasePlacement_js__ = __webpack_require__(21);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getMainAxisFromPlacement_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getMainAxisFromPlacement_js__ = __webpack_require__(63);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_getAltAxis_js__ = __webpack_require__(381);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_within_js__ = __webpack_require__(230);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__dom_utils_getLayoutRect_js__ = __webpack_require__(63);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__dom_utils_getLayoutRect_js__ = __webpack_require__(62);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__dom_utils_getOffsetParent_js__ = __webpack_require__(38);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_detectOverflow_js__ = __webpack_require__(40);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__utils_getVariation_js__ = __webpack_require__(39);
@@ -58100,11 +58103,11 @@ function preventOverflow(_ref) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
 /* unused harmony export defaultModifiers */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(71);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(66);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(70);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(65);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(61);
 /* unused harmony reexport popperGenerator */
 /* unused harmony reexport detectOverflow */
 
@@ -58176,7 +58179,7 @@ exports.SelectGrid = void 0;
 var React = __importStar(__webpack_require__(0));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
 var overlaypanel_1 = __webpack_require__(429);
-var Loader_1 = __webpack_require__(60);
+var Loader_1 = __webpack_require__(59);
 var SelectGrid = /** @class */ (function (_super) {
     __extends(SelectGrid, _super);
     function SelectGrid(props) {
@@ -58383,7 +58386,7 @@ exports.PanelTools = exports.PanelHeaderSlidingToolbar = exports.PanelFooter = e
 var React = __importStar(__webpack_require__(0));
 var Icon_1 = __webpack_require__(7);
 var IconButton_1 = __webpack_require__(44);
-var Spinner_1 = __webpack_require__(52);
+var Spinner_1 = __webpack_require__(53);
 var classnames_1 = __importDefault(__webpack_require__(2));
 var Panel = /** @class */ (function (_super) {
     __extends(Panel, _super);
@@ -58710,8 +58713,8 @@ var getBatch = function getBatch() {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_is__ = __webpack_require__(501);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react_is___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_react_is__);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_Subscription__ = __webpack_require__(73);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_useIsomorphicLayoutEffect__ = __webpack_require__(74);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_Subscription__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_useIsomorphicLayoutEffect__ = __webpack_require__(73);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__Context__ = __webpack_require__(30);
 
 
@@ -59422,7 +59425,7 @@ var ContentListItem = /** @class */ (function (_super) {
             'fetched': this.props.archived,
             'actioning': this.props.loading,
         });
-        return (React.createElement("div", { className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
+        return (React.createElement("div", { role: 'listitem', className: classes, onClick: this.onSingleClick, onDoubleClick: this.onDoubleClick },
             this.props.locked
                 ? React.createElement("div", { className: "sd-list-item__border sd-list-item__border--locked" })
                 : React.createElement("div", { className: "sd-list-item__border" }),
@@ -59445,7 +59448,7 @@ var ContentList = /** @class */ (function (_super) {
     }
     ContentList.prototype.render = function () {
         var classes = (0, classnames_1.default)('sd-list-item-group sd-list-item-group--space-between-items');
-        return (React.createElement("ul", { className: classes }, this.props.items.map(function (item, index) {
+        return (React.createElement("div", { role: 'list', className: classes }, this.props.items.map(function (item, index) {
             return React.createElement(ContentListItem, { key: index, itemColum: item.itemColum, locked: item.locked, action: item.action, loading: item.loading, activated: item.activated, selected: item.selected, archived: item.archived, onClick: item.onClick, onDoubleClick: item.onDoubleClick });
         })));
     };
@@ -62872,11 +62875,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeSelect = void 0;
 var React = __importStar(__webpack_require__(0));
 var Icon_1 = __webpack_require__(7);
-var Loader_1 = __webpack_require__(60);
+var Loader_1 = __webpack_require__(59);
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
 var debounce_1 = __importDefault(__webpack_require__(483));
 var Form_1 = __webpack_require__(14);
-var core_1 = __webpack_require__(61);
+var core_1 = __webpack_require__(60);
 var lodash_1 = __webpack_require__(33);
 var TreeSelect = /** @class */ (function (_super) {
     __extends(TreeSelect, _super);
@@ -63561,7 +63564,7 @@ exports.typeOf = typeOf;
 var ReactIs = __webpack_require__(48);
 var assign = __webpack_require__(274);
 
-var ReactPropTypesSecret = __webpack_require__(50);
+var ReactPropTypesSecret = __webpack_require__(51);
 var has = __webpack_require__(79);
 var checkPropTypes = __webpack_require__(275);
 
@@ -64276,7 +64279,7 @@ module.exports = shouldUseNative() ? Object.assign : function (target, source) {
 var printWarning = function() {};
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactPropTypesSecret = __webpack_require__(50);
+  var ReactPropTypesSecret = __webpack_require__(51);
   var loggedTypeFailures = {};
   var has = __webpack_require__(79);
 
@@ -64384,7 +64387,7 @@ module.exports = checkPropTypes;
 
 
 
-var ReactPropTypesSecret = __webpack_require__(50);
+var ReactPropTypesSecret = __webpack_require__(51);
 
 function emptyFunction() {}
 function emptyFunctionWithReset() {}
@@ -64986,9 +64989,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.InputBase = void 0;
 var React = __importStar(__webpack_require__(0));
+var classnames_1 = __importDefault(__webpack_require__(2));
 var InputBase = /** @class */ (function (_super) {
     __extends(InputBase, _super);
     function InputBase(props) {
@@ -65018,7 +65025,17 @@ var InputBase = /** @class */ (function (_super) {
     };
     InputBase.prototype.render = function () {
         var _a;
-        return (React.createElement("input", { className: 'sd-input__input', type: (_a = this.props.type) !== null && _a !== void 0 ? _a : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
+        var _b;
+        var classes = (0, classnames_1.default)('sd-input__input', (_a = {
+                'sd-input__input--boxed-style': this.props.boxedStyle,
+                'sd-input__input--required': this.props.required,
+                'sd-input__input--invalid': this.props.invalid,
+                'sd-input__input--disabled': this.props.disabled,
+                'sd-input__input--medium': this.props.size === undefined
+            },
+            _a["sd-input__input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
+            _a));
+        return (React.createElement("input", { className: classes, type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.props.htmlId, value: this.state.value, "aria-describedby": this.props.htmlId + 'label', tabIndex: this.props.tabIndex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled }));
     };
     return InputBase;
 }(React.Component));
@@ -70704,7 +70721,7 @@ function getUTCDayOfYear(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCISOWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(57);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCISOWeekYear_index_js__ = __webpack_require__(327);
 
 
@@ -70732,7 +70749,7 @@ function getUTCISOWeek(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfUTCISOWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getUTCISOWeekYear_index_js__ = __webpack_require__(220);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(58);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCISOWeek_index_js__ = __webpack_require__(57);
 
  // This function will be a part of public API when UTC function will be implemented.
 // See issue: https://github.com/date-fns/date-fns/issues/376
@@ -70757,7 +70774,7 @@ function startOfUTCISOWeekYear(dirtyDate) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getUTCWeek;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toDate_index_js__ = __webpack_require__(15);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(59);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__startOfUTCWeek_index_js__ = __webpack_require__(58);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeekYear_index_js__ = __webpack_require__(329);
 
 
@@ -70786,7 +70803,7 @@ function getUTCWeek(dirtyDate, options) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = startOfUTCWeekYear;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__toInteger_index_js__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getUTCWeekYear_index_js__ = __webpack_require__(221);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(59);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__startOfUTCWeek_index_js__ = __webpack_require__(58);
 
 
  // This function will be a part of public API when UTC function will be implemented.
@@ -75076,7 +75093,7 @@ exports.RadioButtonGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var FormLabel_1 = __webpack_require__(53);
+var FormLabel_1 = __webpack_require__(49);
 var RadioButtonGroup = /** @class */ (function (_super) {
     __extends(RadioButtonGroup, _super);
     function RadioButtonGroup(props) {
@@ -75311,7 +75328,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckButtonGroup = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
-var FormLabel_1 = __webpack_require__(53);
+var FormLabel_1 = __webpack_require__(49);
 var CheckButtonGroup = /** @class */ (function (_super) {
     __extends(CheckButtonGroup, _super);
     function CheckButtonGroup() {
@@ -76572,7 +76589,7 @@ function getClippingRect(element, boundary, rootBoundary) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getViewportRect;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindow_js__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getDocumentElement_js__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(66);
 
 
 
@@ -76622,8 +76639,8 @@ function getViewportRect(element) {
 /* harmony export (immutable) */ __webpack_exports__["a"] = getDocumentRect;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getDocumentElement_js__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getComputedStyle_js__ = __webpack_require__(34);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(67);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getWindowScroll_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getWindowScrollBarX_js__ = __webpack_require__(66);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getWindowScroll_js__ = __webpack_require__(67);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_math_js__ = __webpack_require__(29);
 
 
@@ -76662,7 +76679,7 @@ function getDocumentRect(element) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getScrollParent;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getParentNode_js__ = __webpack_require__(46);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isScrollParent_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__isScrollParent_js__ = __webpack_require__(68);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getNodeName_js__ = __webpack_require__(28);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(13);
 
@@ -76761,9 +76778,9 @@ function getAltAxis(axis) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getNodeScroll_js__ = __webpack_require__(383);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getNodeName_js__ = __webpack_require__(28);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__instanceOf_js__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__getWindowScrollBarX_js__ = __webpack_require__(67);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__getWindowScrollBarX_js__ = __webpack_require__(66);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__getDocumentElement_js__ = __webpack_require__(22);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__isScrollParent_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__isScrollParent_js__ = __webpack_require__(68);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_math_js__ = __webpack_require__(29);
 
 
@@ -76830,7 +76847,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getNodeScroll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindowScroll_js__ = __webpack_require__(68);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getWindowScroll_js__ = __webpack_require__(67);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getWindow_js__ = __webpack_require__(19);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__instanceOf_js__ = __webpack_require__(13);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getHTMLElementScroll_js__ = __webpack_require__(384);
@@ -77085,11 +77102,11 @@ function mergeByName(modifiers) {
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return createPopper; });
 /* unused harmony export defaultModifiers */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(71);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(66);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(70);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(65);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(62);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__createPopper_js__ = __webpack_require__(70);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__modifiers_eventListeners_js__ = __webpack_require__(65);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__modifiers_popperOffsets_js__ = __webpack_require__(69);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__modifiers_computeStyles_js__ = __webpack_require__(64);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__modifiers_applyStyles_js__ = __webpack_require__(61);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__modifiers_offset_js__ = __webpack_require__(239);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__modifiers_flip_js__ = __webpack_require__(234);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__modifiers_preventOverflow_js__ = __webpack_require__(240);
@@ -96643,7 +96660,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagInput = void 0;
 var React = __importStar(__webpack_require__(0));
 var classnames_1 = __importDefault(__webpack_require__(2));
-var core_1 = __webpack_require__(61);
+var core_1 = __webpack_require__(60);
 var lodash_1 = __webpack_require__(33);
 var TagInput = function (_a) {
     var items = _a.items, label = _a.label, freetype = _a.freetype;
@@ -97470,7 +97487,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TieredMenu = exports.LocationRetrieved = void 0;
+exports.TieredMenu = void 0;
 
 var _react = _interopRequireWildcard(__webpack_require__(0));
 
@@ -97496,8 +97513,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -97518,97 +97533,27 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-// interface IProps {
-//     children(args: {direction: 'left' | 'right'}): JSX.Element;
-// }
-// interface IState {
-//     direction: 'left' | 'right' | null;
-// }
-
-/**
- * Checks whether there is more space on the left or right,
- * in order to choose which direction submenus open to.
- */
-var LocationRetrieved = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(LocationRetrieved, _React$PureComponent);
-
-  var _super = _createSuper(LocationRetrieved);
-
-  // <IProps, IState>
-  function LocationRetrieved(props) {
-    var _this;
-
-    _classCallCheck(this, LocationRetrieved);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      direction: null
-    };
-    _this.recompute = _this.recompute.bind(_assertThisInitialized(_this));
-    return _this;
-  }
-
-  _createClass(LocationRetrieved, [{
-    key: "recompute",
-    value: function recompute(callback) {
-      // public, used in TieredMenu#show
-      this.setState({
-        direction: null
-      });
-      setTimeout(callback, 0);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      if (this.state.direction == null) {
-        return /*#__PURE__*/_react.default.createElement("span", {
-          ref: function ref(el) {
-            if (el != null) {
-              var rect = el.getBoundingClientRect();
-              var left = rect.left;
-              var availableSpaceH = document.body.offsetWidth;
-              var direction = left < availableSpaceH / 2 ? 'right' : 'left';
-
-              _this2.setState({
-                direction: direction
-              });
-            }
-          }
-        });
-      } else {
-        return this.props.children({
-          direction: this.state.direction
-        });
-      }
-    }
-  }]);
-
-  return LocationRetrieved;
-}(_react.default.PureComponent);
-
-exports.LocationRetrieved = LocationRetrieved;
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var TieredMenu = /*#__PURE__*/function (_Component) {
   _inherits(TieredMenu, _Component);
 
-  var _super2 = _createSuper(TieredMenu);
+  var _super = _createSuper(TieredMenu);
 
   function TieredMenu(props) {
-    var _this3;
+    var _this;
 
     _classCallCheck(this, TieredMenu);
 
-    _this3 = _super2.call(this, props);
-    _this3.state = {
+    _this = _super.call(this, props);
+    _this.state = {
       visible: !props.popup
     };
-    _this3.onEnter = _this3.onEnter.bind(_assertThisInitialized(_this3));
-    _this3.onEntered = _this3.onEntered.bind(_assertThisInitialized(_this3));
-    _this3.onExit = _this3.onExit.bind(_assertThisInitialized(_this3));
-    _this3.id = _this3.props.id || (0, _UniqueComponentId.default)();
-    return _this3;
+    _this.onEnter = _this.onEnter.bind(_assertThisInitialized(_this));
+    _this.onEntered = _this.onEntered.bind(_assertThisInitialized(_this));
+    _this.onExit = _this.onExit.bind(_assertThisInitialized(_this));
+    _this.id = _this.props.id || (0, _UniqueComponentId.default)();
+    return _this;
   }
 
   _createClass(TieredMenu, [{
@@ -97621,31 +97566,29 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "show",
     value: function show(event) {
-      var _this4 = this;
+      var _this2 = this;
 
       this.target = event.currentTarget;
       var currentEvent = event;
-      this.locator.recompute(function () {
-        _this4.setState({
-          visible: true
-        }, function () {
-          if (_this4.props.onShow) {
-            _this4.props.onShow(currentEvent);
-          }
-        });
+      this.setState({
+        visible: true
+      }, function () {
+        if (_this2.props.onShow) {
+          _this2.props.onShow(currentEvent);
+        }
       });
     }
   }, {
     key: "hide",
     value: function hide(event) {
-      var _this5 = this;
+      var _this3 = this;
 
       var currentEvent = event;
       this.setState({
         visible: false
       }, function () {
-        if (_this5.props.onHide) {
-          _this5.props.onHide(currentEvent);
+        if (_this3.props.onHide) {
+          _this3.props.onHide(currentEvent);
         }
       });
     }
@@ -97686,12 +97629,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindDocumentClickListener",
     value: function bindDocumentClickListener() {
-      var _this6 = this;
+      var _this4 = this;
 
       if (!this.documentClickListener) {
         this.documentClickListener = function (event) {
-          if (_this6.props.popup && _this6.state.visible && !_this6.container.contains(event.target)) {
-            _this6.hide(event);
+          if (_this4.props.popup && _this4.state.visible && !_this4.container.contains(event.target)) {
+            _this4.hide(event);
           }
         };
 
@@ -97709,12 +97652,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindDocumentResizeListener",
     value: function bindDocumentResizeListener() {
-      var _this7 = this;
+      var _this5 = this;
 
       if (!this.documentResizeListener) {
         this.documentResizeListener = function (event) {
-          if (_this7.state.visible) {
-            _this7.hide(event);
+          if (_this5.state.visible) {
+            _this5.hide(event);
           }
         };
 
@@ -97732,12 +97675,12 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "bindScrollListener",
     value: function bindScrollListener() {
-      var _this8 = this;
+      var _this6 = this;
 
       if (!this.scrollHandler) {
         this.scrollHandler = new _ConnectedOverlayScrollHandler.default(this.target, function (event) {
-          if (_this8.state.visible) {
-            _this8.hide(event);
+          if (_this6.state.visible) {
+            _this6.hide(event);
           }
         });
       }
@@ -97763,8 +97706,8 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderElement",
-    value: function renderElement(direction) {
-      var _this9 = this;
+    value: function renderElement() {
+      var _this7 = this;
 
       var className = (0, _ClassNames.classNames)('p-tieredmenu p-component', {
         'p-tieredmenu-overlay': this.props.popup
@@ -97782,7 +97725,7 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
         onExit: this.onExit
       }, /*#__PURE__*/_react.default.createElement("div", {
         ref: function ref(el) {
-          return _this9.container = el;
+          return _this7.container = el;
         },
         id: this.id,
         className: className,
@@ -97791,28 +97734,14 @@ var TieredMenu = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement(_TieredMenuSub.TieredMenuSub, {
         model: this.props.model,
         root: true,
-        popup: this.props.popup,
-        direction: direction
+        popup: this.props.popup
       })));
     }
   }, {
     key: "render",
     value: function render() {
-      var _this10 = this;
-
-      return /*#__PURE__*/_react.default.createElement(LocationRetrieved, {
-        ref: function ref(instance) {
-          if (instance != null) {
-            _this10.locator = instance;
-          }
-        }
-      }, function (_ref) {
-        var direction = _ref.direction;
-
-        var element = _this10.renderElement(direction);
-
-        if (_this10.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, _this10.props.appendTo);else return element;
-      });
+      var element = this.renderElement();
+      if (this.props.appendTo) return /*#__PURE__*/_reactDom.default.createPortal(element, this.props.appendTo);else return element;
     }
   }]);
 
@@ -97976,8 +97905,6 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "onItemClick",
     value: function onItemClick(event, item) {
-      var _item$items$length, _item$items;
-
       if (item.disabled) {
         event.preventDefault();
         return;
@@ -97994,27 +97921,21 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
         });
       }
 
-      if (((_item$items$length = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length) !== null && _item$items$length !== void 0 ? _item$items$length : 0) > 0) {
-        if (this.state.activeItem && item === this.state.activeItem) {
-          this.setState({
-            activeItem: null
-          });
-        } else {
-          this.setState({
-            activeItem: item
-          });
+      if (this.props.root) {
+        if (item.items) {
+          if (this.state.activeItem && item === this.state.activeItem) {
+            this.setState({
+              activeItem: null
+            });
+          } else {
+            this.setState({
+              activeItem: item
+            });
+          }
         }
       }
 
-      var target = event.target;
-      var isKeyboardEvent = event.clientX === 0 && event.clientY === 0;
-
-      if (isKeyboardEvent) {
-        setTimeout(function () {
-          var el = target.parentElement.querySelectorAll('.p-submenu-list > .p-menuitem')[0].querySelector('button');
-          el.focus();
-        }, 0);
-      } else if (!item.items) {
+      if (!item.items) {
         this.onLeafClick();
       }
     }
@@ -98071,10 +97992,8 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
   }, {
     key: "onChildItemKeyDown",
     value: function onChildItemKeyDown(event, childListItem) {
-      var leftArrow = event.which === 37;
-      var escape = event.which === 27;
-
-      if (leftArrow || escape) {
+      //left
+      if (event.which === 37) {
         this.setState({
           activeItem: null
         });
@@ -98146,8 +98065,7 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
           onLeafClick: this.onLeafClick,
           popup: this.props.popup,
           onKeyDown: this.onChildItemKeyDown,
-          parentActive: item === this.state.activeItem,
-          direction: this.props.direction
+          parentActive: item === this.state.activeItem
         });
       }
 
@@ -98175,8 +98093,10 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
           return _this3.onItemMouseEnter(event, item);
         },
         role: "none"
-      }, /*#__PURE__*/_react.default.createElement("button", {
+      }, /*#__PURE__*/_react.default.createElement("a", {
+        href: item.url || '#',
         className: linkClassName,
+        target: item.target,
         role: "menuitem",
         "aria-haspopup": item.items != null,
         onClick: function onClick(event) {
@@ -98222,10 +98142,7 @@ var TieredMenuSub = /*#__PURE__*/function (_Component) {
         },
         className: className,
         role: this.props.root ? 'menubar' : 'menu',
-        "aria-orientation": "horizontal",
-        style: {
-          left: this.props.direction === 'left' ? '-100%' : '100%'
-        }
+        "aria-orientation": "horizontal"
       }, submenu);
     }
   }]);
@@ -98252,8 +98169,7 @@ _defineProperty(TieredMenuSub, "propTypes", {
   popup: _propTypes.default.bool,
   onLeafClick: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
-  parentActive: _propTypes.default.bool,
-  direction: _propTypes.default.string
+  parentActive: _propTypes.default.bool
 });
 
 /***/ }),
@@ -98802,7 +98718,7 @@ exports.IconPicker = void 0;
 var React = __importStar(__webpack_require__(0));
 // @ts-ignore
 var iconFont = __importStar(__webpack_require__(265));
-var Button_1 = __webpack_require__(51);
+var Button_1 = __webpack_require__(52);
 var Icon_1 = __webpack_require__(7);
 var SelectGrid_1 = __webpack_require__(243);
 var IconPicker = /** @class */ (function (_super) {
@@ -100716,7 +100632,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, null, this.props.children))));
     };
@@ -100953,7 +100869,7 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
     function AuthoringInnerHeader(props) {
         var _this = _super.call(this, props) || this;
         _this.state = {
-            collapsed: false,
+            collapsed: _this.props.collapsed ? _this.props.collapsed : false,
         };
         return _this;
     }
@@ -112665,8 +112581,8 @@ Object(__WEBPACK_IMPORTED_MODULE_2__utils_batch__["b" /* setBatch */])(__WEBPACK
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types__ = __webpack_require__(5);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_prop_types__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Context__ = __webpack_require__(30);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_Subscription__ = __webpack_require__(73);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_useIsomorphicLayoutEffect__ = __webpack_require__(74);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_Subscription__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_useIsomorphicLayoutEffect__ = __webpack_require__(73);
 
 
 
@@ -113440,8 +113356,8 @@ var useDispatch = /*#__PURE__*/createDispatchHook();
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__useReduxContext__ = __webpack_require__(257);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_Subscription__ = __webpack_require__(73);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_useIsomorphicLayoutEffect__ = __webpack_require__(74);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_Subscription__ = __webpack_require__(72);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_useIsomorphicLayoutEffect__ = __webpack_require__(73);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__components_Context__ = __webpack_require__(30);
 
 
@@ -113685,7 +113601,7 @@ var useCallback = useCallbackOne;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return offset; });
 /* unused harmony export shrink */
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return withScroll; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tiny_invariant__ = __webpack_require__(75);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tiny_invariant__ = __webpack_require__(74);
 
 
 var getRect = function getRect(_ref) {
@@ -114191,7 +114107,7 @@ var ToggleBoxNext = exports.ToggleBoxNext = function (_React$Component) {
             var isOpen = this.state.isOpen;
 
 
-            var classNames = ['toggle-box toggle-box--' + style, mode];
+            var classNames = ['toggle-box toggle-box--margin-normal toggle-box--' + style, mode];
 
             if (!isOpen) {
                 classNames.push('hidden');