superdesk-ui-framework 4.0.34 → 4.0.36

package/dist/examples.bundle.js

@@ -6116,7 +6116,7 @@ Object.defineProperty(exports, "SvgIconIllustration", { enumerable: true, get: f
 var IllustrationButton_1 = __webpack_require__(691);
 Object.defineProperty(exports, "IllustrationButton", { enumerable: true, get: function () { return IllustrationButton_1.IllustrationButton; } });
 __exportStar(__webpack_require__(17), exports);
-__exportStar(__webpack_require__(14), exports);
+__exportStar(__webpack_require__(13), exports);
 __exportStar(__webpack_require__(78), exports);
 __exportStar(__webpack_require__(119), exports);
 var Skeleton_1 = __webpack_require__(350);
@@ -7025,6 +7025,34 @@ function classNames() {
 
 /***/ }),
 /* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormRowNew = exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
+var FormRow_1 = __webpack_require__(413);
+Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
+var FormGroup_1 = __webpack_require__(414);
+Object.defineProperty(exports, "FormGroup", { enumerable: true, get: function () { return FormGroup_1.FormGroup; } });
+var FormItem_1 = __webpack_require__(415);
+Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
+var FormText_1 = __webpack_require__(416);
+Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
+var FormLabel_1 = __webpack_require__(77);
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
+var InputWrapper_1 = __webpack_require__(138);
+Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
+var InputBase_1 = __webpack_require__(417);
+Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
+var InputNew_1 = __webpack_require__(418);
+Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
+var FormRowNew_1 = __webpack_require__(419);
+Object.defineProperty(exports, "FormRowNew", { enumerable: true, get: function () { return FormRowNew_1.FormRowNew; } });
+
+
+/***/ }),
+/* 14 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -7084,34 +7112,6 @@ var write = 'write';
 var afterWrite = 'afterWrite';
 var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
 
-/***/ }),
-/* 14 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormRowNew = exports.InputNew = exports.InputBase = exports.InputWrapper = exports.FormLabel = exports.FormText = exports.FormItem = exports.FormGroup = exports.FormRow = void 0;
-var FormRow_1 = __webpack_require__(413);
-Object.defineProperty(exports, "FormRow", { enumerable: true, get: function () { return FormRow_1.FormRow; } });
-var FormGroup_1 = __webpack_require__(414);
-Object.defineProperty(exports, "FormGroup", { enumerable: true, get: function () { return FormGroup_1.FormGroup; } });
-var FormItem_1 = __webpack_require__(415);
-Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return FormItem_1.FormItem; } });
-var FormText_1 = __webpack_require__(416);
-Object.defineProperty(exports, "FormText", { enumerable: true, get: function () { return FormText_1.FormText; } });
-var FormLabel_1 = __webpack_require__(77);
-Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return FormLabel_1.FormLabel; } });
-var InputWrapper_1 = __webpack_require__(138);
-Object.defineProperty(exports, "InputWrapper", { enumerable: true, get: function () { return InputWrapper_1.InputWrapper; } });
-var InputBase_1 = __webpack_require__(417);
-Object.defineProperty(exports, "InputBase", { enumerable: true, get: function () { return InputBase_1.InputBase; } });
-var InputNew_1 = __webpack_require__(418);
-Object.defineProperty(exports, "InputNew", { enumerable: true, get: function () { return InputNew_1.InputNew; } });
-var FormRowNew_1 = __webpack_require__(419);
-Object.defineProperty(exports, "FormRowNew", { enumerable: true, get: function () { return FormRowNew_1.FormRowNew; } });
-
-
 /***/ }),
 /* 15 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -25589,7 +25589,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getBasePlacement;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
 
 function getBasePlacement(placement) {
   return placement.split('-')[0];
@@ -26680,7 +26680,7 @@ exports.Tooltip = Tooltip;
 
 "use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "top", function() { return __WEBPACK_IMPORTED_MODULE_0__enums_js__["u"]; });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "bottom", function() { return __WEBPACK_IMPORTED_MODULE_0__enums_js__["i"]; });
 /* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "right", function() { return __WEBPACK_IMPORTED_MODULE_0__enums_js__["s"]; });
@@ -26952,7 +26952,7 @@ function getVariation(placement) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_getBoundingClientRect_js__ = __webpack_require__(47);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__computeOffsets_js__ = __webpack_require__(133);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__rectToClientRect_js__ = __webpack_require__(132);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__dom_utils_instanceOf_js__ = __webpack_require__(16);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__mergePaddingObject_js__ = __webpack_require__(127);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__expandToHashMap_js__ = __webpack_require__(129);
@@ -28202,7 +28202,7 @@ var moment_1 = __importDefault(__webpack_require__(1));
 var calendar_1 = __webpack_require__(605);
 var lodash_1 = __webpack_require__(18);
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var Button_1 = __webpack_require__(60);
 var internalPrimereactClassnames = {
     overlayVisible: 'p-input-overlay-visible',
@@ -39786,7 +39786,7 @@ function getMainAxisFromPlacement(placement) {
 
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* unused harmony export mapToStyles */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__dom_utils_getOffsetParent_js__ = __webpack_require__(48);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__dom_utils_getWindow_js__ = __webpack_require__(22);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__dom_utils_getDocumentElement_js__ = __webpack_require__(28);
@@ -40144,7 +40144,7 @@ function popperOffsets(_ref) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__utils_mergeByName_js__ = __webpack_require__(409);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__utils_detectOverflow_js__ = __webpack_require__(50);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__dom_utils_instanceOf_js__ = __webpack_require__(16);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__enums_js__ = __webpack_require__(14);
 /* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return __WEBPACK_IMPORTED_MODULE_11__utils_detectOverflow_js__["a"]; });
 
 
@@ -43315,7 +43315,7 @@ exports.getDurationString = exports.DurationInput = void 0;
 var React = __importStar(__webpack_require__(0));
 var moment_1 = __importDefault(__webpack_require__(1));
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var DurationInput = /** @class */ (function (_super) {
     __extends(DurationInput, _super);
     function DurationInput(props) {
@@ -43703,7 +43703,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(__webpack_require__(0));
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker() {
@@ -43929,7 +43929,7 @@ module.exports = Function.call.bind(Object.prototype.hasOwnProperty);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__utils_within_js__ = __webpack_require__(126);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_mergePaddingObject_js__ = __webpack_require__(127);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__utils_expandToHashMap_js__ = __webpack_require__(129);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__dom_utils_instanceOf_js__ = __webpack_require__(16);
 
 
@@ -44132,7 +44132,7 @@ function expandToHashMap(value, keys) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getOppositeVariationPlacement_js__ = __webpack_require__(394);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_detectOverflow_js__ = __webpack_require__(50);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__utils_computeAutoPlacement_js__ = __webpack_require__(399);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__utils_getVariation_js__ = __webpack_require__(49);
 
 
@@ -44343,7 +44343,7 @@ function rectToClientRect(rect) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getBasePlacement_js__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getVariation_js__ = __webpack_require__(49);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getMainAxisFromPlacement_js__ = __webpack_require__(83);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__enums_js__ = __webpack_require__(14);
 
 
 
@@ -44420,7 +44420,7 @@ function computeOffsets(_ref) {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_detectOverflow_js__ = __webpack_require__(50);
 
 
@@ -44491,7 +44491,7 @@ function hide(_ref) {
 "use strict";
 /* unused harmony export distanceAndSkiddingToXY */
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__utils_getBasePlacement_js__ = __webpack_require__(27);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(14);
 
  // eslint-disable-next-line import/no-unused-modules
 
@@ -44552,7 +44552,7 @@ function offset(_ref2) {
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__utils_getBasePlacement_js__ = __webpack_require__(27);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__utils_getMainAxisFromPlacement_js__ = __webpack_require__(83);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__utils_getAltAxis_js__ = __webpack_require__(400);
@@ -78058,7 +78058,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePickerV2 = void 0;
 var React = __importStar(__webpack_require__(0));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var lodash_1 = __webpack_require__(18);
 var TimePickerV2 = /** @class */ (function (_super) {
     __extends(TimePickerV2, _super);
@@ -78258,7 +78258,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagInput = void 0;
 var React = __importStar(__webpack_require__(0));
 var chips_1 = __webpack_require__(646);
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
 var SelectPreview_1 = __webpack_require__(111);
 var TagInput = /** @class */ (function (_super) {
@@ -78641,7 +78641,7 @@ var Icon_1 = __webpack_require__(10);
 var Loader_1 = __webpack_require__(109);
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
 var debounce_1 = __importDefault(__webpack_require__(739));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var core_1 = __webpack_require__(44);
 var lodash_1 = __webpack_require__(18);
 var helpers_1 = __webpack_require__(23);
@@ -79448,7 +79448,8 @@ var TreeMenu = /** @class */ (function (_super) {
         document.removeEventListener("keydown", this.onKeyDown);
         document.addEventListener("keydown", this.onPressEsc);
     };
-    TreeMenu.prototype.componentDidUpdate = function (_prevProps, prevState) {
+    TreeMenu.prototype.componentDidUpdate = function (prevProps, prevState) {
+        var _this = this;
         var _a;
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
@@ -79458,6 +79459,17 @@ var TreeMenu = /** @class */ (function (_super) {
             || (prevState.options !== this.state.options)) {
             (_a = this.popperInstance) === null || _a === void 0 ? void 0 : _a.update();
         }
+        // Update options when getOptions prop is updated
+        if (this.props.getOptions && prevProps.getOptions !== this.props.getOptions) {
+            var newOptions_1 = this.props.getOptions();
+            this.setState({
+                options: newOptions_1,
+                firstBranchOptions: newOptions_1,
+                filterArr: [],
+            }, function () {
+                _this.recursion(newOptions_1);
+            });
+        }
     };
     TreeMenu.prototype.toggleMenu = function () {
         var _this = this;
@@ -83447,7 +83459,7 @@ function getOppositeVariationPlacement(placement) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = getClippingRect;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__getViewportRect_js__ = __webpack_require__(396);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__getDocumentRect_js__ = __webpack_require__(397);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__listScrollParents_js__ = __webpack_require__(131);
@@ -83657,7 +83669,7 @@ function getScrollParent(node) {
 "use strict";
 /* WEBPACK VAR INJECTION */(function(process) {/* harmony export (immutable) */ __webpack_exports__["a"] = computeAutoPlacement;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__getVariation_js__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(14);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__detectOverflow_js__ = __webpack_require__(50);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__getBasePlacement_js__ = __webpack_require__(27);
 
@@ -83833,7 +83845,7 @@ function getHTMLElementScroll(element) {
 
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = orderModifiers;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__enums_js__ = __webpack_require__(14);
  // source: https://stackoverflow.com/questions/49875255
 
 function order(modifiers) {
@@ -83908,7 +83920,7 @@ function debounce(fn) {
 "use strict";
 /* harmony export (immutable) */ __webpack_exports__["a"] = validateModifiers;
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__format_js__ = __webpack_require__(407);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(13);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__enums_js__ = __webpack_require__(14);
 
 
 var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
@@ -84223,7 +84235,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 var React = __importStar(__webpack_require__(0));
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
@@ -84685,7 +84697,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__(11));
-var _1 = __webpack_require__(14);
+var _1 = __webpack_require__(13);
 var InputNew = /** @class */ (function (_super) {
     __extends(InputNew, _super);
     function InputNew(props) {
@@ -84851,7 +84863,7 @@ exports.SelectWithTemplate = void 0;
 var React = __importStar(__webpack_require__(0));
 var dropdown_1 = __webpack_require__(421);
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var labelKey = 'label';
 /**
  * @deprecated use MultiSelect or TreeSelect
@@ -125761,6 +125773,9 @@ 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.DateTimePicker = void 0;
 var React = __importStar(__webpack_require__(0));
@@ -125769,13 +125784,17 @@ var common_1 = __webpack_require__(57);
 var lodash_1 = __webpack_require__(18);
 var TimePicker_1 = __webpack_require__(118);
 var IconButton_1 = __webpack_require__(56);
-var MIN_WIDTH = 348;
+var Form_1 = __webpack_require__(13);
+var react_id_generator_1 = __importDefault(__webpack_require__(11));
 var DateTimePicker = /** @class */ (function (_super) {
     __extends(DateTimePicker, _super);
     function DateTimePicker() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.handleTimeChange = function (time) {
-            var _a = time.split(':').map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1]; // handle NaN value
+            var _a = time
+                .split(":")
+                .map(function (x) { return (0, lodash_1.defaultTo)(parseInt(x, 10), 0); }), hours = _a[0], minutes = _a[1]; // handle NaN value
             var origDate = _this.props.value ? new Date(_this.props.value) : new Date();
             origDate.setHours(hours, minutes);
             _this.props.onChange(origDate);
@@ -125794,27 +125813,26 @@ var DateTimePicker = /** @class */ (function (_super) {
         return _this;
     }
     DateTimePicker.prototype.prepareFormat = function (unitOfTime) {
-        return unitOfTime.toString().padStart(2, '0');
+        return unitOfTime.toString().padStart(2, "0");
     };
     DateTimePicker.prototype.render = function () {
         var _this = this;
-        var _a, _b;
         var convertedTimeValue = this.props.value != null
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
-            : '';
-        return (React.createElement("div", { style: { width: this.props.width ? this.props.width : MIN_WIDTH } },
-            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end', noWrap: true },
+            : "";
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex, fullWidth: this.props.fullWidth, "data-test-id": this.props["data-test-id"], ref: this.props.ref },
+            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: "end", noWrap: true },
                 React.createElement("div", { style: { flexGrow: 1 } },
                     React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
                             _this.handleDateChange(val);
-                        }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth })),
+                        }, dateFormat: this.props.dateFormat, inlineLabel: true, labelHidden: true, fullWidth: this.props.fullWidth })),
                 React.createElement("div", { style: { flexGrow: 1 } },
                     React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
                             _this.handleTimeChange(val);
                         }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
-                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'remove-sign', onClick: function () {
+                this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: "remove-sign", onClick: function () {
                         _this.props.onChange(null);
-                    }, ariaValue: 'Clear' })))));
+                    }, ariaValue: "Clear" })))));
     };
     return DateTimePicker;
 }(React.PureComponent));
@@ -156356,7 +156374,7 @@ var React = __importStar(__webpack_require__(0));
 var multiselect_1 = __webpack_require__(775);
 var classnames_1 = __importDefault(__webpack_require__(3));
 var react_id_generator_1 = __importDefault(__webpack_require__(11));
-var Form_1 = __webpack_require__(14);
+var Form_1 = __webpack_require__(13);
 var SelectPreview_1 = __webpack_require__(111);
 var zIndex_1 = __webpack_require__(24);
 var MultiSelect = /** @class */ (function (_super) {
@@ -159457,7 +159475,7 @@ exports.RundownEditor = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var Nav = __importStar(__webpack_require__(78));
 var TableList_1 = __webpack_require__(115);
 var RundownEditor = /** @class */ (function (_super) {
@@ -172811,7 +172829,7 @@ var DateTimePickerExample = /** @class */ (function (_super) {
     }
     DateTimePickerExample.prototype.render = function () {
         var _this = this;
-        return (React.createElement(app_typescript_1.DateTimePicker, { label: { text: "Planning date" }, value: this.state.dateTime, dateFormat: "YYYY-MM-DD", width: "100%", onChange: function (val) {
+        return (React.createElement(app_typescript_1.DateTimePicker, { label: "Planning date", labelHidden: true, inlineLabel: true, value: this.state.dateTime, dateFormat: "YYYY-MM-DD", fullWidth: true, onChange: function (val) {
                 var parsedVal = val != null ? new Date(val) : null;
                 _this.setState({ dateTime: parsedVal });
             } }));
@@ -172831,12 +172849,12 @@ var DateTimePickerDoc = /** @class */ (function (_super) {
     DateTimePickerDoc.prototype.render = function () {
         return (React.createElement("section", { className: "docs-page__container" },
             React.createElement("h2", { className: "docs-page__h2" }, "Date picker"),
-            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <DateTimePicker\n                        label=\"Planning datetime\"\n                        value={this.state.date}\n                        dateFormat=\"YYYY-MM-DD\"\n                        onChange={(date) => {\n                            this.setState({date});\n                        }}\n                    />\n                "),
+            React.createElement(Markup.ReactMarkupCodePreview, null, "\n                    <DateTimePicker\n                        label=\"Planning date\"\n                        value={this.state.dateTime}\n                        dateFormat=\"YYYY-MM-DD\"\n                        fullWidth\n                        onChange={(val) => {\n                            const parsedVal = val != null ? new Date(val) : null;\n\n                            this.setState({dateTime: parsedVal});\n                        }}\n                    />\n                "),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement(DateTimePickerExample, null))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DateTimePicker\n                            value={this.state.date}\n                            onChange={(date) => {\n                                this.setState({date});\n                            }}\n                            dateFormat=\"YYYY-MM-DD\"\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DateTimePicker\n                            label=\"Planning date\"\n                            value={this.state.dateTime}\n                            dateFormat=\"YYYY-MM-DD\"\n                            fullWidth\n                            onChange={(val) => {\n                                const parsedVal = val != null ? new Date(val) : null;\n\n                                this.setState({dateTime: parsedVal});\n                            }}\n                        />\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'Date', default: 'null', description: 'Value of the component.' }),
@@ -178376,7 +178394,7 @@ exports.TestGround = void 0;
 var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(58));
 var index_1 = __webpack_require__(5);
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var FormLabel_1 = __webpack_require__(77);
 var CalendarWeekDayItem_1 = __webpack_require__(383);
 var options2 = [
@@ -179963,7 +179981,7 @@ exports.EditorTest = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var Nav = __importStar(__webpack_require__(78));
 var Lists_1 = __webpack_require__(119);
 var Lists_2 = __webpack_require__(119);
@@ -180237,7 +180255,7 @@ exports.Editor = exports.Multiedit = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var Nav = __importStar(__webpack_require__(78));
 var Lists_1 = __webpack_require__(119);
 var common_1 = __webpack_require__(57);
@@ -180436,7 +180454,7 @@ var React = __importStar(__webpack_require__(0));
 var Components = __importStar(__webpack_require__(58));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var PersonalProfile = /** @class */ (function (_super) {
     __extends(PersonalProfile, _super);
     function PersonalProfile(props) {
@@ -180792,7 +180810,7 @@ exports.Rundowns = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var RundownEditor_1 = __webpack_require__(794);
 var Nav = __importStar(__webpack_require__(78));
 var ContentList_1 = __webpack_require__(120);
@@ -181357,7 +181375,7 @@ exports.CoreLayout = void 0;
 var React = __importStar(__webpack_require__(0));
 var index_1 = __webpack_require__(5);
 var Layout = __importStar(__webpack_require__(17));
-var Form = __importStar(__webpack_require__(14));
+var Form = __importStar(__webpack_require__(13));
 var Nav = __importStar(__webpack_require__(78));
 var BottomNav_1 = __webpack_require__(380);
 var lodash_1 = __webpack_require__(18);
@@ -186338,7 +186356,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 938 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.34","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.36","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 939 */