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

package/dist/superdesk-ui.bundle.js

@@ -6014,8 +6014,8 @@ var SearchBar_1 = __webpack_require__(418);
 Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return SearchBar_1.SearchBar; } });
 var WithSizeObserver_1 = __webpack_require__(250);
 Object.defineProperty(exports, "WithSizeObserver", { enumerable: true, get: function () { return WithSizeObserver_1.WithSizeObserver; } });
-__exportStar(__webpack_require__(15), exports);
 __exportStar(__webpack_require__(16), exports);
+__exportStar(__webpack_require__(15), exports);
 __exportStar(__webpack_require__(72), exports);
 __exportStar(__webpack_require__(239), exports);
 var Skeleton_1 = __webpack_require__(240);
@@ -7407,6 +7407,32 @@ function toDate(argument) {
 
 "use strict";
 
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
+var FormRow_1 = __webpack_require__(263);
+Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
+var FormGroup_1 = __webpack_require__(264);
+Object.defineProperty(exports, "FormGroup", { enumerable: true, get: function () { return FormGroup_1.FormGroup; } });
+var FormItem_1 = __webpack_require__(265);
+Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
+var FormText_1 = __webpack_require__(266);
+Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
+var FormLabel_1 = __webpack_require__(51);
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
+var InputWrapper_1 = __webpack_require__(267);
+Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
+var InputBase_1 = __webpack_require__(268);
+Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
+var InputNew_1 = __webpack_require__(269);
+Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
+
+
+/***/ }),
+/* 16 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationPanel = exports.MainMenu = exports.BottomBarAction = exports.HamburgerButton = exports.CoreLayoutOverlay = exports.CoreLayoutFooter = exports.CoreLayoutSlideInMenu = exports.CoreLayoutMain = exports.CoreLayoutTopMenu = exports.CoreLayoutContainer = exports.CoreLayout = exports.AuthorinInnerSideBar = exports.AuthoringInnerBody = exports.AuthoringInnerHeader = exports.AuthoringMainContent = exports.AuthoringMainToolBar = exports.AuthoringMainContainer = exports.AuthoringMain = exports.AuthoringFrame = exports.AuthoringFrameOverlay = exports.AuthoringFrameSidePanelOverlay = exports.AuthoringFrameSidePanel = exports.AuthoringFrameRightBar = exports.AuthoringFrameLeftBar = exports.AuthoringFrameNavBar = exports.AuthoringFrameMain = exports.AuthoringFrameContainer = exports.Container = exports.PageLayout = exports.ContentSplitter = exports.AuthoringContainer = exports.OverlayPanel = exports.RightPanel = exports.LeftPanel = exports.IMainPanelProps = exports.MainPanel = exports.HeaderPanel = exports.LayoutContainer = exports.Layout = exports.PanelHeaderSlidingToolbar = exports.PanelFooter = exports.PanelContentBlock = exports.PanelContent = exports.PanelHeader = exports.Panel = void 0;
 var Panel_1 = __webpack_require__(238);
@@ -7495,32 +7521,6 @@ var NotificationPanel_1 = __webpack_require__(456);
 Object.defineProperty(exports, "NotificationPanel", { enumerable: true, get: function () { return NotificationPanel_1.NotificationPanel; } });
 
 
-/***/ }),
-/* 16 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
-var FormRow_1 = __webpack_require__(263);
-Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
-var FormGroup_1 = __webpack_require__(264);
-Object.defineProperty(exports, "FormGroup", { enumerable: true, get: function () { return FormGroup_1.FormGroup; } });
-var FormItem_1 = __webpack_require__(265);
-Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
-var FormText_1 = __webpack_require__(266);
-Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
-var FormLabel_1 = __webpack_require__(51);
-Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
-var InputWrapper_1 = __webpack_require__(267);
-Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
-var InputBase_1 = __webpack_require__(268);
-Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
-var InputNew_1 = __webpack_require__(269);
-Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
-
-
 /***/ }),
 /* 17 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -38537,7 +38537,7 @@ var calendar_1 = __webpack_require__(316);
 var lodash_1 = __webpack_require__(33);
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
 };
@@ -40338,59 +40338,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DurationInput = void 0;
+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__(15);
 var DurationInput = /** @class */ (function (_super) {
     __extends(DurationInput, _super);
     function DurationInput(props) {
-        var _a;
         var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
-            hours: _this.props.hours ? _this.zerPad(_this.props.hours) : _this.zerPad(0),
-            minutes: _this.props.minutes ? _this.zerPad(_this.props.minutes) : _this.zerPad(0),
-            seconds: _this.props.seconds ? _this.zerPad(_this.props.seconds) : _this.zerPad(0),
-            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
+            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),
         };
         _this.hourRef = React.createRef();
         _this.minuteRef = React.createRef();
         _this.secondRef = React.createRef();
         _this.handleKeyDown = _this.handleKeyDown.bind(_this);
-        _this.zerPad = _this.zerPad.bind(_this);
+        _this.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.componentDidUpdate = function (_, prevState) {
-        if (this.props.onChange) {
-            this.props.onChange(moment_1.default.duration("".concat(this.state.hours, ":").concat(this.state.minutes, ":").concat(this.state.seconds))
-                .asSeconds());
+    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 (_, prevState) {
         if (!this.hourRef.current || !this.minuteRef.current || !this.secondRef.current) {
             return;
         }
         if (this.state.hours !== prevState.hours) {
             if (Number(this.hourRef.current.value) > 99) {
                 this.setState({
-                    hours: this.zerPad(99),
+                    hours: this.zeroPad(99),
                 });
             }
         }
         if (this.state.minutes !== prevState.minutes) {
             if (Number(this.minuteRef.current.value) > 59) {
                 this.setState({
-                    hours: this.zerPad(Number(this.state.hours) + 1),
-                    minutes: this.zerPad(0),
+                    hours: this.zeroPad(Number(this.state.hours) + 1),
+                    minutes: this.zeroPad(this.state.minutes % 60),
                 });
             }
             if (Number(this.minuteRef.current.value) < 0) {
                 this.setState({
-                    hours: this.zerPad(Number(this.state.hours)) > 0
-                        ? this.zerPad(Number(this.state.hours) - 1)
-                        : this.zerPad(Number(this.state.hours)),
+                    hours: this.zeroPad(Number(this.state.hours)) > 0
+                        ? this.zeroPad(Number(this.state.hours) - 1)
+                        : this.zeroPad(Number(this.state.hours)),
                     minutes: 59,
                 });
             }
@@ -40398,18 +40413,24 @@ var DurationInput = /** @class */ (function (_super) {
         if (this.state.seconds !== prevState.seconds) {
             if (Number(this.secondRef.current.value) > 59) {
                 this.setState({
-                    minutes: this.zerPad(Number(this.state.minutes) + 1),
-                    seconds: this.zerPad(0),
+                    minutes: this.zeroPad(Number(this.state.minutes) + 1),
+                    seconds: this.zeroPad(this.state.seconds % 60),
                 });
             }
             if (Number(this.secondRef.current.value) < 0) {
                 this.setState({
-                    minutes: this.zerPad(Number(this.state.minutes) - 1),
+                    minutes: this.zeroPad(Number(this.state.minutes) - 1),
                     seconds: 59,
                 });
             }
         }
     };
+    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;
@@ -40452,6 +40473,12 @@ var DurationInput = /** @class */ (function (_super) {
         }
         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) {
@@ -40467,24 +40494,26 @@ var DurationInput = /** @class */ (function (_super) {
         if (event.key === 'ArrowUp') {
             if (event.target.id === 'hours') {
                 stateClone[state] = this.state[state] < 99
-                    ? this.zerPad(Number(this.state[state]) + 1)
-                    : this.zerPad(99);
+                    ? this.zeroPad(Number(this.state[state]) + 1)
+                    : this.zeroPad(99);
             }
             else {
-                stateClone[state] = this.zerPad(Number(this.state[state]) + 1);
+                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.zerPad(Number(this.state[state]) - 1) : this.zerPad(0);
+                stateClone[state] = this.state[state] > 0
+                    ? this.zeroPad(Number(this.state[state]) - 1)
+                    : this.zeroPad(0);
             }
             else {
-                stateClone[state] = this.zerPad(Number(this.state[state]) - 1);
+                stateClone[state] = this.zeroPad(Number(this.state[state]) - 1);
             }
         }
         this.setState(stateClone);
     };
-    DurationInput.prototype.zerPad = function (value) {
+    DurationInput.prototype.zeroPad = function (value) {
         if (value.toString().length === 1 || value === 0) {
             return "0".concat(value);
         }
@@ -40504,6 +40533,7 @@ var DurationInput = /** @class */ (function (_super) {
             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();
@@ -40511,65 +40541,53 @@ var DurationInput = /** @class */ (function (_super) {
             ref === null || ref === void 0 ? void 0 : ref.setSelectionRange(0, 2);
         });
         var stateClone = {};
-        stateClone[state] = this.zerPad(this.state[state]);
+        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') {
-            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);
-                });
+            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');
-        var classes = (0, classnames_1.default)('sd-input', {
-            'sd-input--inline-label': this.props.inlineLabel,
-            'sd-input--required': this.props.required,
-            'sd-input--disabled': this.props.disabled,
-            'sd-input--full-width': this.props.fullWidth,
-            'sd-input--invalid': this.props.invalid || this.state.invalid,
-        });
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        var htmlId = (0, react_id_generator_1.default)();
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: htmlId, id: htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
+        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', type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: 'duration-input', type: 'text', id: 'hours', max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.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', type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                React.createElement("input", { className: 'duration-input', type: 'text', id: 'minutes', ref: this.minuteRef, value: this.state.minutes, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.secondRef.current); }, onChange: function (event) { _this.handleChange(event, 'minutes'); }, onBlur: function (event) { return _this.setState({ minutes: _this.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.zerPad(event.target.value) }); }, onKeyPress: function (event) {
+                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")),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+                React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
     };
     return DurationInput;
 }(React.PureComponent));
 exports.DurationInput = DurationInput;
+function getDurationString(seconds) {
+    return moment_1.default.utc(seconds * 1000).format("HH:mm:ss");
+}
+exports.getDurationString = getDurationString;
 
 
 /***/ }),
@@ -60954,7 +60972,7 @@ exports.TimePicker = void 0;
 var React = __importStar(__webpack_require__(0));
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker(props) {
@@ -63104,7 +63122,7 @@ exports.Input = void 0;
 var React = __importStar(__webpack_require__(0));
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var Input = /** @class */ (function (_super) {
     __extends(Input, _super);
     function Input(props) {
@@ -63629,7 +63647,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputNew = void 0;
 var React = __importStar(__webpack_require__(0));
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var _1 = __webpack_require__(16);
+var _1 = __webpack_require__(15);
 var InputNew = /** @class */ (function (_super) {
     __extends(InputNew, _super);
     function InputNew(props) {
@@ -63653,7 +63671,9 @@ var InputNew = /** @class */ (function (_super) {
         return (React.createElement(_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, value: this.state.value, invalid: this.state.invalid, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
             React.createElement(_1.InputBase, { type: "text", onChange: function (value) {
                     _this.setState({ value: value });
-                    _this.setState({ invalid: _this.props.maxLength ? value.length > _this.props.maxLength : false });
+                    _this.setState({ invalid: _this.props.maxLength
+                            ? value.length > _this.props.maxLength
+                            : false });
                     _this.props.onChange(value);
                 }, disabled: this.props.disabled, htmlId: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, placeholder: this.props.placeholder })));
     };
@@ -63710,7 +63730,7 @@ exports.Option = exports.Select = void 0;
 var React = __importStar(__webpack_require__(0));
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
@@ -63797,7 +63817,7 @@ var React = __importStar(__webpack_require__(0));
 var dropdown_1 = __webpack_require__(272);
 // import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(__webpack_require__(8));
-var Form_1 = __webpack_require__(16);
+var Form_1 = __webpack_require__(15);
 var labelKey = 'label';
 var SelectWithTemplate = /** @class */ (function (_super) {
     __extends(SelectWithTemplate, _super);
@@ -94844,7 +94864,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
         this.setState({
           maskVisible: true
         }, function () {
-          _this5.mask.style.zIndex = String(_this5.zIndex);
+          _this5.mask.style.zIndex = String(this.zIndex);
         });
       }
 
@@ -98491,7 +98511,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
 // External Modules
 var React = __importStar(__webpack_require__(0));
-var Layouts_1 = __webpack_require__(15);
+var Layouts_1 = __webpack_require__(16);
 var PageLayout = /** @class */ (function (_super) {
     __extends(PageLayout, _super);
     function PageLayout() {
@@ -99088,7 +99108,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthoringFrame = void 0;
 // External Modules
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
 var AuthoringFrame = /** @class */ (function (_super) {
     __extends(AuthoringFrame, _super);
     function AuthoringFrame() {
@@ -99152,7 +99172,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AuthoringMain = void 0;
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
 var AuthoringMain = /** @class */ (function (_super) {
     __extends(AuthoringMain, _super);
     function AuthoringMain() {
@@ -99576,7 +99596,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayout = void 0;
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
 var CoreLayout = /** @class */ (function (_super) {
     __extends(CoreLayout, _super);
     function CoreLayout() {
@@ -99694,8 +99714,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CoreLayoutTopMenu = void 0;
 var React = __importStar(__webpack_require__(0));
-var _1 = __webpack_require__(15);
-var _2 = __webpack_require__(15);
+var _1 = __webpack_require__(16);
+var _2 = __webpack_require__(16);
 var CoreLayoutTopMenu = /** @class */ (function (_super) {
     __extends(CoreLayoutTopMenu, _super);
     function CoreLayoutTopMenu() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.4",
+  "version": "3.0.1-beta.5",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/patches/@superdesk+primereact+5.0.2-4.patch

@@ -12,7 +12,7 @@ index 80b0f8e..5343abf 100644
      blockScroll?: boolean;
      ariaCloseIconLabel?: string;
 diff --git a/node_modules/@superdesk/primereact/components/dialog/Dialog.js b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
-index 2e243f2..c40162e 100644
+index 2e243f2..e7ce643 100644
 --- a/node_modules/@superdesk/primereact/components/dialog/Dialog.js
 +++ b/node_modules/@superdesk/primereact/components/dialog/Dialog.js
 @@ -148,7 +148,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
@@ -24,6 +24,15 @@ index 2e243f2..c40162e 100644
      }
    }, {
      key: "maximized",
+@@ -301,7 +301,7 @@ var Dialog = /*#__PURE__*/function (_Component) {
+         this.setState({
+           maskVisible: true
+         }, function () {
+-          _this5.mask.style.zIndex = String(_this5.zIndex);
++          _this5.mask.style.zIndex = String(this.zIndex);
+         });
+       }
+ 
 @@ -501,7 +501,7 @@ _defineProperty(Dialog, "defaultProps", {
    maskClassName: null,
    showHeader: true,

package/react/components/DurationInput.d.ts

@@ -19,20 +19,23 @@ interface IState {
     hours?: any;
     minutes?: any;
     seconds?: any;
-    invalid?: any;
 }
 export declare class DurationInput extends React.PureComponent<IProps, IState> {
     hourRef: React.RefObject<HTMLInputElement>;
     minuteRef: React.RefObject<HTMLInputElement>;
     secondRef: React.RefObject<HTMLInputElement>;
+    private htmlId;
     constructor(props: IProps);
+    stateUpdate(state: string, parametar1?: number, parametar2?: number, parametar3?: number): string | number;
     componentDidUpdate(_: any, prevState: IState): void;
+    valueUpdate(): void;
     handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
     handleKeyValue(event: React.KeyboardEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
-    zerPad(value: number | string): string | number;
+    zeroPad(value: number | string): string | number;
     handleChange(event: React.ChangeEvent<HTMLInputElement>, state: 'hours' | 'minutes' | 'seconds'): void;
     handleFocus(ref: HTMLInputElement | null, state: 'hours' | 'minutes' | 'seconds'): void;
     handleFocusOnKeyUp(event: React.KeyboardEvent<HTMLInputElement>, ref: HTMLInputElement | null): void;
     render(): JSX.Element;
 }
+export declare function getDurationString(seconds: number): string;
 export {};