superdesk-ui-framework 4.0.34 → 4.0.36

package/dist/superdesk-ui.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);
@@ -6576,6 +6576,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";
@@ -6635,34 +6663,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__) {
@@ -25140,7 +25140,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];
@@ -26231,7 +26231,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"]; });
@@ -26503,7 +26503,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);
@@ -27706,7 +27706,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',
@@ -39290,7 +39290,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);
@@ -39648,7 +39648,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"]; });
 
 
@@ -42819,7 +42819,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) {
@@ -43207,7 +43207,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() {
@@ -43433,7 +43433,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);
 
 
@@ -43636,7 +43636,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);
 
 
@@ -43847,7 +43847,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);
 
 
 
@@ -43924,7 +43924,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);
 
 
@@ -43995,7 +43995,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
 
@@ -44056,7 +44056,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);
@@ -77179,7 +77179,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);
@@ -77379,7 +77379,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) {
@@ -77762,7 +77762,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);
@@ -78569,7 +78569,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();
@@ -78579,6 +78580,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;
@@ -82568,7 +82580,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);
@@ -82778,7 +82790,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);
 
@@ -82954,7 +82966,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) {
@@ -83029,7 +83041,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';
@@ -83344,7 +83356,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) {
@@ -83806,7 +83818,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) {
@@ -83972,7 +83984,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
@@ -124882,6 +124894,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));
@@ -124890,13 +124905,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);
@@ -124915,27 +124934,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));
@@ -155477,7 +155495,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) {

package/examples/pages/components/DateTimePicker.tsx

@@ -14,10 +14,12 @@ class DateTimePickerExample extends React.PureComponent<{}, {dateTime: Date | nu
     render() {
         return (
             <DateTimePicker
-                label={{text: "Planning date"}}
+                label="Planning date"
+                labelHidden
+                inlineLabel
                 value={this.state.dateTime}
                 dateFormat="YYYY-MM-DD"
-                width="100%"
+                fullWidth
                 onChange={(val) => {
                     const parsedVal = val != null ? new Date(val) : null;
 
@@ -49,11 +51,14 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                 <h2 className="docs-page__h2">Date picker</h2>
                 <Markup.ReactMarkupCodePreview>{`
                     <DateTimePicker
-                        label="Planning datetime"
-                        value={this.state.date}
+                        label="Planning date"
+                        value={this.state.dateTime}
                         dateFormat="YYYY-MM-DD"
-                        onChange={(date) => {
-                            this.setState({date});
+                        fullWidth
+                        onChange={(val) => {
+                            const parsedVal = val != null ? new Date(val) : null;
+
+                            this.setState({dateTime: parsedVal});
                         }}
                     />
                 `}</Markup.ReactMarkupCodePreview>
@@ -65,11 +70,15 @@ export default class DateTimePickerDoc extends React.Component<{}, IState> {
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <DateTimePicker
-                            value={this.state.date}
-                            onChange={(date) => {
-                                this.setState({date});
-                            }}
+                            label="Planning date"
+                            value={this.state.dateTime}
                             dateFormat="YYYY-MM-DD"
+                            fullWidth
+                            onChange={(val) => {
+                                const parsedVal = val != null ? new Date(val) : null;
+
+                                this.setState({dateTime: parsedVal});
+                            }}
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.34",
+  "version": "4.0.36",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/DateTimePicker.d.ts

@@ -1,20 +1,20 @@
-import * as React from 'react';
-interface IProps {
+import * as React from "react";
+import { InputWrapper } from "./Form";
+import { IInputWrapper } from "./Form/InputWrapper";
+interface IProps extends IInputWrapper {
     value: Date | null;
-    label: {
-        text: string;
-        hidden?: boolean;
-    };
     dateFormat: string;
     onChange: (value: Date | null) => void;
     preview?: boolean;
     fullWidth?: boolean;
     allowSeconds?: boolean;
     required?: boolean;
-    width?: React.CSSProperties['width'];
     disabled?: boolean;
+    ref?: React.LegacyRef<InputWrapper>;
+    'data-test-id'?: string;
 }
 export declare class DateTimePicker extends React.PureComponent<IProps> {
+    private htmlId;
     handleTimeChange: (time: string) => void;
     handleDateChange: (date: Date | null) => void;
     prepareFormat(unitOfTime: number): string;

package/react/components/DateTimePicker.js

@@ -37,6 +37,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(require("react"));
@@ -45,13 +48,17 @@ var common_1 = require("@superdesk/common");
 var lodash_1 = require("lodash");
 var TimePicker_1 = require("./TimePicker");
 var IconButton_1 = require("./IconButton");
-var MIN_WIDTH = 348;
+var Form_1 = require("./Form");
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
 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);
@@ -70,27 +77,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));

package/react/components/TreeMenu.d.ts

@@ -48,7 +48,7 @@ export declare class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
     onPressEsc: (event: KeyboardEvent) => void;
     componentDidMount: () => void;
     componentWillUnmount(): void;
-    componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
     toggleMenu(): void;
     toggle(event: React.SyntheticEvent): void;
     handleMultiLevel(item: ITreeMenuNode<T>): void;

package/react/components/TreeMenu.js

@@ -170,7 +170,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();
@@ -180,6 +181,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;