superdesk-ui-framework 4.0.35 → 4.0.37

package/app-typescript/components/DatePicker.tsx

@@ -164,6 +164,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <Calendar
                     className='sd-input__input'

package/app-typescript/components/DateTimePicker.tsx

@@ -75,6 +75,7 @@ export class DateTimePicker extends React.PureComponent<IProps> {
         htmlId={this.htmlId}
         tabindex={this.props.tabindex}
         fullWidth={this.props.fullWidth}
+        inputWrapper={this.props.inputWrapper}
         data-test-id={this.props["data-test-id"]}
         ref={this.props.ref}
       >

package/app-typescript/components/DurationInput.tsx

@@ -312,6 +312,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <div className={'sd-input__duration-input'}>
                     <input

package/app-typescript/components/Form/InputWrapper.tsx

@@ -25,9 +25,14 @@ export interface IInputCommon {
 
 export interface IInputWrapper extends IInputCommon {
     invalid?: boolean;
+
+    inputWrapper?: {
+        kind: 'custom'; // added to allow union types later
+        component: React.ComponentType<{label: string; input: React.ReactNode}>;
+    };
 }
 
-interface IPropsBase extends IInputWrapper {
+interface IProps extends IInputWrapper {
     children: React.ReactNode;
     maxLength?: number;
     value?: string | number;
@@ -40,8 +45,8 @@ interface IState {
     value: string | number;
 }
 
-export class InputWrapper extends React.Component<IPropsBase, IState> {
-    constructor(props: IPropsBase) {
+export class InputWrapper extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
         super(props);
 
         this.state = {
@@ -50,6 +55,14 @@ export class InputWrapper extends React.Component<IPropsBase, IState> {
     }
 
     render() {
+        if (this.props.inputWrapper?.kind === 'custom') {
+            const Component = this.props.inputWrapper.component;
+
+            return (
+                <Component input={this.props.children} label={this.props.label ?? ''} />
+            );
+        }
+
         const fullWidth = this.props.fullWidth ?? true;
 
         const classes = classNames('sd-input', {

package/app-typescript/components/FormLabel.tsx

@@ -5,6 +5,7 @@ interface IProps {
     text: string;
     style?: 'normal' | 'light'; // defaults to normal
     noMinHeight?: boolean;
+    noMinWidth?: boolean;
 }
 
 export class FormLabel extends React.PureComponent<IProps> {
@@ -14,10 +15,20 @@ export class FormLabel extends React.PureComponent<IProps> {
 
         });
 
+        const style: React.CSSProperties = {};
+
+        if (this.props.noMinWidth) {
+            style.minWidth = 'auto';
+        }
+
+        if (this.props.noMinHeight) {
+            style.minHeight = 'auto';
+        }
+
         return (
             <label
                 className={classes}
-                style={this.props.noMinHeight === true ? {minHeight: 'auto'} : undefined}
+                style={style}
             >
                 {this.props.text}
             </label>

package/app-typescript/components/Input.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import nextId from "react-id-generator";
-import {IInputCommon, InputWrapper} from './Form/InputWrapper';
+import {IInputCommon, IInputWrapper, InputWrapper} from './Form/InputWrapper';
 
 interface IPropsBase extends IInputCommon {
     maxLength?: number;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large'; // default: 'medium'
     'data-test-id'?: string;
+    inputWrapper?: IInputWrapper['inputWrapper'];
 }
 
 interface IPropsText extends IPropsBase {
@@ -73,6 +74,7 @@ export class Input extends React.Component<IProps> {
                 boxedStyle={this.props.boxedStyle}
                 boxedLable={this.props.boxedLable}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <input
                     className='sd-input__input'

package/app-typescript/components/MultiSelect.tsx

@@ -74,6 +74,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <PrimeMultiSelect
                     panelClassName={classes}

package/app-typescript/components/Select.tsx

@@ -44,6 +44,7 @@ class Select extends React.Component<ISelect> {
                 fullWidth={this.props.fullWidth}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <span className='sd-input__select-caret-wrapper'>
                     <select

package/app-typescript/components/SelectWithTemplate.tsx

@@ -94,57 +94,60 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
 
         return (
             <InputWrapper
-            label={this.props.label}
-            error={this.props.error}
-            required={this.props.required}
-            disabled={this.props.disabled}
-            invalid={this.state.invalid}
-            info={this.props.info}
-            inlineLabel={this.props.inlineLabel}
-            labelHidden={this.props.labelHidden}
-            fullWidth={this.props.fullWidth}
-            htmlId={this.htmlId}
-            tabindex={this.props.tabindex}>
+                label={this.props.label}
+                error={this.props.error}
+                required={this.props.required}
+                disabled={this.props.disabled}
+                invalid={this.state.invalid}
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                fullWidth={this.props.fullWidth}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
+            >
                 <Dropdown
-                inputId={this.htmlId}
-                ariaLabelledBy={this.htmlId + 'label'}
-                value={valueInternal}
-                options={optionsInternal}
-                onChange={(e) => {
-                    onChange(e.value == null ? null : e.value.original);
-                }}
-                placeholder={fakePlaceholderWithNonBreakingSpace}
-                filterPlaceholder={filterPlaceholder}
-                filter
-                filterBy={labelKey}
-                showClear={!required}
-                emptyFilterMessage={emptyFilterMessage}
-                itemTemplate={(option) => <ItemTemplate option={option?.original ?? null} />}
-                valueTemplate={(option) => ValueTemplate != null
-                    ? (
-                        <ValueTemplate option={option?.original ?? null} />
+                    inputId={this.htmlId}
+                    ariaLabelledBy={this.htmlId + 'label'}
+                    value={valueInternal}
+                    options={optionsInternal}
+                    onChange={(e) => {
+                        onChange(e.value == null ? null : e.value.original);
+                    }}
+                    placeholder={fakePlaceholderWithNonBreakingSpace}
+                    filterPlaceholder={filterPlaceholder}
+                    filter
+                    filterBy={labelKey}
+                    showClear={!required}
+                    emptyFilterMessage={emptyFilterMessage}
+                    itemTemplate={(option) => <ItemTemplate option={option?.original ?? null} />}
+                    valueTemplate={(option) => ValueTemplate != null
+                        ? (
+                            <ValueTemplate option={option?.original ?? null} />
 
-                    )
-                    : (
-                        <ItemTemplate option={option?.original ?? null} />
-                    )
-                }
-                disabled={disabled}
-                required={required}
-                autoFocus={autoFocus}
-                appendTo={document.body}
-                loading={loading}
-                onFilterInputChange={(searchString) => {
-                    this.setState({loading: true});
-                    getItems(searchString).then((_options) => {
-                        this.setState({options: _options, loading: false});
-                    });
-                }}
-                zIndex={zIndex}
-                style={width === '100%' ? {display: 'flex', width: '100%'} : {}}
-                ref={(componentRef) => {
-                    this.componentRef = componentRef;
-                }}/>
+                        )
+                        : (
+                            <ItemTemplate option={option?.original ?? null} />
+                        )
+                    }
+                    disabled={disabled}
+                    required={required}
+                    autoFocus={autoFocus}
+                    appendTo={document.body}
+                    loading={loading}
+                    onFilterInputChange={(searchString) => {
+                        this.setState({loading: true});
+                        getItems(searchString).then((_options) => {
+                            this.setState({options: _options, loading: false});
+                        });
+                    }}
+                    zIndex={zIndex}
+                    style={width === '100%' ? {display: 'flex', width: '100%'} : {}}
+                    ref={(componentRef) => {
+                        this.componentRef = componentRef;
+                    }}
+                />
             </InputWrapper>
         );
     }

package/app-typescript/components/TagInput.tsx

@@ -39,6 +39,7 @@ export class TagInput extends React.Component<IProps> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <Chips
                     className={`

package/app-typescript/components/TimePicker.tsx

@@ -34,6 +34,7 @@ export class TimePicker extends React.PureComponent<IProps> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <input
                     value={this.props.value}

package/app-typescript/components/TimePickerV2.tsx

@@ -147,6 +147,7 @@ export class TimePickerV2 extends React.PureComponent<IProps> {
                 inlineLabel={this.props.inlineLabel}
                 labelHidden={this.props.labelHidden}
                 tabindex={this.props.tabindex}
+                inputWrapper={this.props.inputWrapper}
             >
                 <div className='sd__input__time-picker-v2' data-test-id={this.props['data-test-id']}>
                     <div className='input-wrapper__time-picker-v2'>

package/app-typescript/components/TreeMenu.tsx

@@ -180,7 +180,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         document.addEventListener("keydown", this.onPressEsc);
     }
 
-    componentDidUpdate(_prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
         if (prevState.openDropdown !== this.state.openDropdown) {
             this.toggleMenu();
         }
@@ -192,6 +192,18 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         ) {
             this.popperInstance?.update();
         }
+
+        // Update options when getOptions prop is updated
+        if (this.props.getOptions && prevProps.getOptions !== this.props.getOptions) {
+            const newOptions = this.props.getOptions();
+            this.setState({
+                options: newOptions,
+                firstBranchOptions: newOptions,
+                filterArr: [],
+            }, () => {
+                this.recursion(newOptions);
+            });
+        }
     }
 
     toggleMenu() {

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -725,6 +725,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 tabindex={this.props.tabindex}
                 fullWidth={this.props.fullWidth}
                 data-test-id={this.props['data-test-id']}
+                inputWrapper={this.props.inputWrapper}
             >
                 <div
                     className={`

package/dist/examples.bundle.js

@@ -28282,7 +28282,7 @@ var DatePicker = /** @class */ (function (_super) {
         var showClearButton = this.props.required === true
             ? false
             : this.props.hideClearButton !== 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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(calendar_1.Calendar, { className: 'sd-input__input', footerTemplate: showClearButton ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
                     React.createElement(Button_1.Button, { onClick: function () {
                             _this.props.onChange(null);
@@ -43586,7 +43586,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", 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)) {
@@ -43717,7 +43717,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 }, "data-test-id": this.props['data-test-id'] })));
@@ -44796,8 +44796,12 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b, _c;
-        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
+        var _b, _c, _d, _e;
+        if (((_b = this.props.inputWrapper) === null || _b === void 0 ? void 0 : _b.kind) === 'custom') {
+            var Component = this.props.inputWrapper.component;
+            return (React.createElement(Component, { input: this.props.children, label: (_c = this.props.label) !== null && _c !== void 0 ? _c : '' }));
+        }
+        var fullWidth = (_d = this.props.fullWidth) !== null && _d !== void 0 ? _d : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
@@ -44819,8 +44823,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
-                    _c.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_e = this.props.value) === null || _e === void 0 ? void 0 :
+                    _e.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },
@@ -78167,7 +78171,7 @@ var TimePickerV2 = /** @class */ (function (_super) {
     TimePickerV2.prototype.render = function () {
         var _this = this;
         var timeUnitValuesArray = this.updatedTimeUnit();
-        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, tabindex: this.props.tabindex },
+        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, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
                 React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
                     React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {
@@ -78273,7 +78277,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(chips_1.Chips, { className: "\n                        tags-input--multi-select sd-input__input\n                        ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;
@@ -79144,7 +79148,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        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'] },
+        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'], inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly
@@ -79448,7 +79452,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 +79463,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;
@@ -84164,7 +84180,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled, "data-test-id": this.props['data-test-id'] })));
     };
     return Input;
@@ -84240,7 +84256,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
                 React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
@@ -84905,7 +84921,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         // needs to be passed to prime react component
         // or it will not be displayed at all, even if returned by itemTemplate
         var fakePlaceholderWithNonBreakingSpace = ' ';
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
                 }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
@@ -125808,7 +125824,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         var convertedTimeValue = this.props.value != null
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
             : "";
-        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 },
+        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, inputWrapper: this.props.inputWrapper, "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) {
@@ -125887,7 +125903,14 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("label", { className: classes, style: this.props.noMinHeight === true ? { minHeight: 'auto' } : undefined }, this.props.text));
+        var style = {};
+        if (this.props.noMinWidth) {
+            style.minWidth = 'auto';
+        }
+        if (this.props.noMinHeight) {
+            style.minHeight = 'auto';
+        }
+        return (React.createElement("label", { className: classes, style: style }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));
@@ -156388,7 +156411,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);
@@ -186344,7 +186367,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 938 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.35","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.37","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 */

package/dist/superdesk-ui.bundle.js

@@ -27786,7 +27786,7 @@ var DatePicker = /** @class */ (function (_super) {
         var showClearButton = this.props.required === true
             ? false
             : this.props.hideClearButton !== 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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(calendar_1.Calendar, { className: 'sd-input__input', footerTemplate: showClearButton ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
                     React.createElement(Button_1.Button, { onClick: function () {
                             _this.props.onChange(null);
@@ -43090,7 +43090,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", 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)) {
@@ -43221,7 +43221,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 }, "data-test-id": this.props['data-test-id'] })));
@@ -44300,8 +44300,12 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b, _c;
-        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
+        var _b, _c, _d, _e;
+        if (((_b = this.props.inputWrapper) === null || _b === void 0 ? void 0 : _b.kind) === 'custom') {
+            var Component = this.props.inputWrapper.component;
+            return (React.createElement(Component, { input: this.props.children, label: (_c = this.props.label) !== null && _c !== void 0 ? _c : '' }));
+        }
+        var fullWidth = (_d = this.props.fullWidth) !== null && _d !== void 0 ? _d : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
@@ -44323,8 +44327,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
-                    _c.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_e = this.props.value) === null || _e === void 0 ? void 0 :
+                    _e.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },
@@ -77288,7 +77292,7 @@ var TimePickerV2 = /** @class */ (function (_super) {
     TimePickerV2.prototype.render = function () {
         var _this = this;
         var timeUnitValuesArray = this.updatedTimeUnit();
-        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, tabindex: this.props.tabindex },
+        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, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
                 React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
                     React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {
@@ -77394,7 +77398,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(chips_1.Chips, { className: "\n                        tags-input--multi-select sd-input__input\n                        ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;
@@ -78265,7 +78269,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        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'] },
+        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'], inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly
@@ -78569,7 +78573,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 +78584,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;
@@ -83285,7 +83301,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled, "data-test-id": this.props['data-test-id'] })));
     };
     return Input;
@@ -83361,7 +83377,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
                 React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };
@@ -84026,7 +84042,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         // needs to be passed to prime react component
         // or it will not be displayed at all, even if returned by itemTemplate
         var fakePlaceholderWithNonBreakingSpace = ' ';
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
                 }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {
@@ -124929,7 +124945,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         var convertedTimeValue = this.props.value != null
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
             : "";
-        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 },
+        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, inputWrapper: this.props.inputWrapper, "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) {
@@ -125008,7 +125024,14 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("label", { className: classes, style: this.props.noMinHeight === true ? { minHeight: 'auto' } : undefined }, this.props.text));
+        var style = {};
+        if (this.props.noMinWidth) {
+            style.minWidth = 'auto';
+        }
+        if (this.props.noMinHeight) {
+            style.minHeight = 'auto';
+        }
+        return (React.createElement("label", { className: classes, style: style }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));
@@ -155509,7 +155532,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);

package/package.json

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

package/react/components/DatePicker.js

@@ -140,7 +140,7 @@ var DatePicker = /** @class */ (function (_super) {
         var showClearButton = this.props.required === true
             ? false
             : this.props.hideClearButton !== 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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(calendar_1.Calendar, { className: 'sd-input__input', footerTemplate: showClearButton ? function () { return (React.createElement("div", { className: 'd-flex justify-end' },
                     React.createElement(Button_1.Button, { onClick: function () {
                             _this.props.onChange(null);

package/react/components/DateTimePicker.js

@@ -84,7 +84,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         var convertedTimeValue = this.props.value != null
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
             : "";
-        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 },
+        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, inputWrapper: this.props.inputWrapper, "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) {

package/react/components/DurationInput.js

@@ -316,7 +316,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", 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)) {

package/react/components/Form/InputWrapper.d.ts

@@ -20,8 +20,15 @@ export interface IInputCommon {
 }
 export interface IInputWrapper extends IInputCommon {
     invalid?: boolean;
+    inputWrapper?: {
+        kind: 'custom';
+        component: React.ComponentType<{
+            label: string;
+            input: React.ReactNode;
+        }>;
+    };
 }
-interface IPropsBase extends IInputWrapper {
+interface IProps extends IInputWrapper {
     children: React.ReactNode;
     maxLength?: number;
     value?: string | number;
@@ -32,8 +39,8 @@ interface IPropsBase extends IInputWrapper {
 interface IState {
     value: string | number;
 }
-export declare class InputWrapper extends React.Component<IPropsBase, IState> {
-    constructor(props: IPropsBase);
+export declare class InputWrapper extends React.Component<IProps, IState> {
+    constructor(props: IProps);
     render(): JSX.Element;
 }
 export {};

package/react/components/Form/InputWrapper.js

@@ -57,8 +57,12 @@ var InputWrapper = /** @class */ (function (_super) {
     }
     InputWrapper.prototype.render = function () {
         var _a;
-        var _b, _c;
-        var fullWidth = (_b = this.props.fullWidth) !== null && _b !== void 0 ? _b : true;
+        var _b, _c, _d, _e;
+        if (((_b = this.props.inputWrapper) === null || _b === void 0 ? void 0 : _b.kind) === 'custom') {
+            var Component = this.props.inputWrapper.component;
+            return (React.createElement(Component, { input: this.props.children, label: (_c = this.props.label) !== null && _c !== void 0 ? _c : '' }));
+        }
+        var fullWidth = (_d = this.props.fullWidth) !== null && _d !== void 0 ? _d : true;
         var classes = (0, classnames_1.default)('sd-input', (_a = {
                 'sd-input--inline-label': this.props.inlineLabel,
                 'sd-input--required': this.props.required,
@@ -80,8 +84,8 @@ var InputWrapper = /** @class */ (function (_super) {
             React.createElement("label", { className: labelClasses, htmlFor: this.props.htmlId, id: this.props.htmlId + 'label', tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
             React.createElement("div", { className: "sd-input__input-container" }, this.props.children),
             this.props.maxLength
-                && React.createElement("div", { className: 'sd-input__char-count' }, (_c = this.props.value) === null || _c === void 0 ? void 0 :
-                    _c.toString().length,
+                && React.createElement("div", { className: 'sd-input__char-count' }, (_e = this.props.value) === null || _e === void 0 ? void 0 :
+                    _e.toString().length,
                     " / ",
                     this.props.maxLength),
             React.createElement("div", { className: 'sd-input__message-box' },

package/react/components/FormLabel.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     text: string;
     style?: 'normal' | 'light';
     noMinHeight?: boolean;
+    noMinWidth?: boolean;
 }
 export declare class FormLabel extends React.PureComponent<IProps> {
     render(): JSX.Element;

package/react/components/FormLabel.js

@@ -53,7 +53,14 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("label", { className: classes, style: this.props.noMinHeight === true ? { minHeight: 'auto' } : undefined }, this.props.text));
+        var style = {};
+        if (this.props.noMinWidth) {
+            style.minWidth = 'auto';
+        }
+        if (this.props.noMinHeight) {
+            style.minHeight = 'auto';
+        }
+        return (React.createElement("label", { className: classes, style: style }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));

package/react/components/Input.d.ts

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { IInputCommon } from './Form/InputWrapper';
+import { IInputCommon, IInputWrapper } from './Form/InputWrapper';
 interface IPropsBase extends IInputCommon {
     maxLength?: number;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large';
     'data-test-id'?: string;
+    inputWrapper?: IInputWrapper['inputWrapper'];
 }
 interface IPropsText extends IPropsBase {
     type: 'text';

package/react/components/Input.js

@@ -67,7 +67,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, 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 },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, 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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled, "data-test-id": this.props['data-test-id'] })));
     };
     return Input;

package/react/components/MultiSelect.js

@@ -72,7 +72,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);

package/react/components/Select.js

@@ -61,7 +61,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        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, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
                 React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly, "data-test-id": this.props['data-test-id'] }, this.props.children))));
     };

package/react/components/SelectWithTemplate.js

@@ -99,7 +99,7 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         // needs to be passed to prime react component
         // or it will not be displayed at all, even if returned by itemTemplate
         var fakePlaceholderWithNonBreakingSpace = ' ';
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, invalid: this.state.invalid, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
                     onChange(e.value == null ? null : e.value.original);
                 }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, itemTemplate: function (option) { var _a; return React.createElement(ItemTemplate, { option: (_a = option === null || option === void 0 ? void 0 : option.original) !== null && _a !== void 0 ? _a : null }); }, valueTemplate: function (option) {

package/react/components/TagInput.js

@@ -59,7 +59,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement(chips_1.Chips, { className: "\n                        tags-input--multi-select sd-input__input\n                        ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;

package/react/components/TimePicker.js

@@ -58,7 +58,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        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 },
+        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, inputWrapper: this.props.inputWrapper },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 }, "data-test-id": this.props['data-test-id'] })));

package/react/components/TimePickerV2.js

@@ -149,7 +149,7 @@ var TimePickerV2 = /** @class */ (function (_super) {
     TimePickerV2.prototype.render = function () {
         var _this = this;
         var timeUnitValuesArray = this.updatedTimeUnit();
-        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, tabindex: this.props.tabindex },
+        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, tabindex: this.props.tabindex, inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: 'sd__input__time-picker-v2', "data-test-id": this.props['data-test-id'] },
                 React.createElement("div", { className: 'input-wrapper__time-picker-v2' },
                     React.createElement("select", { className: 'sd-input__select', value: timeUnitValuesArray[0], onChange: function (_a) {

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;

package/react/components/TreeSelect/TreeSelect.js

@@ -570,7 +570,7 @@ var TreeSelect = /** @class */ (function (_super) {
                 var children = _a.children;
                 return React.createElement(React.Fragment, null, children);
             };
-        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'] },
+        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'], inputWrapper: this.props.inputWrapper },
             React.createElement("div", { className: "\n                        tags-input sd-input__input\n                        tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef, "data-test-id": this.props.allowMultiple ? undefined : 'open-popover' }, this.props.allowMultiple
                 ? React.createElement("div", { className: "tags-input__tags" },
                     this.props.readOnly