superdesk-ui-framework 5.1.4 → 5.1.6

package/app-typescript/components/DatePicker.tsx

@@ -337,6 +337,13 @@ export class DatePickerISO extends React.PureComponent<IDatePickerISO> {
     }
 }
 
+function getOptionLabel(options: Array<{id: string; label?: string}>, id: string | null | undefined): string {
+    if (id == null) {
+        return '';
+    }
+    return options.find((option) => option.id === id)?.label ?? id;
+}
+
 const MonthNavigator = ({
     value,
     options,
@@ -346,7 +353,7 @@ const MonthNavigator = ({
         kind="synchronous"
         value={[value]}
         getOptions={() => options.map((option) => ({value: option.id}))}
-        getLabel={(option) => options[parseInt(option, 10)].label}
+        getLabel={(optionId) => getOptionLabel(options, optionId)}
         getId={(option) => option}
         onChange={(selected) => {
             onChange(selected[0]);
@@ -355,7 +362,7 @@ const MonthNavigator = ({
         labelHidden
         valueTemplate={(item) => (
             <div className="sd-datepicker__navigator-value sd-datepicker__navigator-month">
-                <div>{options[parseInt(item, 10)].label}</div>
+                <div>{getOptionLabel(options, item)}</div>
                 <Icon name="chevron-down-thin" />
             </div>
         )}

package/app-typescript/components/TreeMenu.tsx

@@ -374,102 +374,104 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
             <div ref={this.treeMenuRef}>
                 <div ref={this.openDropdownRef}>{this.props.children(this.toggle)}</div>
 
-                <WithPortal active={this.state.openDropdown} data-test-id="tree-menu-popover">
-                    <div
-                        ref={this.dropdownRef}
-                        className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
-                        style={{
-                            zIndex: this.zIndex,
-                        }}
-                    >
-                        <div className="autocomplete__header">
-                            <div
-                                className="autocomplete__icon"
-                                onClick={() => {
-                                    this.backButton();
-                                }}
-                            >
-                                <Icon name="search" className="search"></Icon>
-                            </div>
-
-                            <div className="autocomplete__filter">
-                                <input
-                                    className="autocomplete__input"
-                                    type="text"
-                                    placeholder={this.props.searchPlaceholder}
-                                    ref={this.inputRef}
-                                    value={this.state.searchFieldValue}
-                                    onChange={(event) => {
-                                        this.setState({searchFieldValue: event.target.value});
-                                        this.popperInstance?.update();
-                                    }}
-                                />
-                            </div>
-                        </div>
-
-                        {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
-                            <div className="autocomplete__category-header">
+                {this.state.openDropdown && (
+                    <WithPortal active={this.state.openDropdown} data-test-id="tree-menu-popover">
+                        <div
+                            ref={this.dropdownRef}
+                            className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
+                            style={{
+                                zIndex: this.zIndex,
+                            }}
+                        >
+                            <div className="autocomplete__header">
                                 <div
                                     className="autocomplete__icon"
                                     onClick={() => {
                                         this.backButton();
                                     }}
                                 >
-                                    <Icon name="arrow-left" className="arrow-left"></Icon>
+                                    <Icon name="search" className="search"></Icon>
                                 </div>
 
                                 <div className="autocomplete__filter">
-                                    <button className="autocomplete__category-title">
-                                        {this.props.optionTemplate
-                                            ? this.props.optionTemplate(this.state.buttonValue.value)
-                                            : this.props.getLabel(this.state.buttonValue.value)}
-                                    </button>
+                                    <input
+                                        className="autocomplete__input"
+                                        type="text"
+                                        placeholder={this.props.searchPlaceholder}
+                                        ref={this.inputRef}
+                                        value={this.state.searchFieldValue}
+                                        onChange={(event) => {
+                                            this.setState({searchFieldValue: event.target.value});
+                                            this.popperInstance?.update();
+                                        }}
+                                    />
                                 </div>
                             </div>
-                        )}
-
-                        {this.state.searchFieldValue === '' ? (
-                            this.props.getOptions ? (
-                                <ul
-                                    ref={this.ref}
-                                    className="suggestion-list suggestion-list--multi-select"
-                                    role="tree"
-                                >
-                                    {this.state.options.map((option, i: React.Key | undefined) => (
-                                        <TreeSelectItem
-                                            key={i}
-                                            option={option}
-                                            handleTree={this.handleTree}
-                                            onClick={() => {
-                                                onSelect(option);
-                                            }}
-                                            disabledItem={disabledItem(option)}
-                                            getBorderColor={this.props.getBorderColor}
-                                            getBackgroundColor={this.props.getBackgroundColor}
-                                            getId={this.props.getId}
-                                            optionTemplate={this.props.optionTemplate}
-                                            getLabel={this.props.getLabel}
-                                            onKeyDown={() =>
-                                                this.setState({
-                                                    buttonTarget: [
-                                                        ...this.state.buttonTarget,
-                                                        this.props.getId(option.value),
-                                                    ],
-                                                })
-                                            }
-                                        />
-                                    ))}
+
+                            {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
+                                <div className="autocomplete__category-header">
+                                    <div
+                                        className="autocomplete__icon"
+                                        onClick={() => {
+                                            this.backButton();
+                                        }}
+                                    >
+                                        <Icon name="arrow-left" className="arrow-left"></Icon>
+                                    </div>
+
+                                    <div className="autocomplete__filter">
+                                        <button className="autocomplete__category-title">
+                                            {this.props.optionTemplate
+                                                ? this.props.optionTemplate(this.state.buttonValue.value)
+                                                : this.props.getLabel(this.state.buttonValue.value)}
+                                        </button>
+                                    </div>
+                                </div>
+                            )}
+
+                            {this.state.searchFieldValue === '' ? (
+                                this.props.getOptions ? (
+                                    <ul
+                                        ref={this.ref}
+                                        className="suggestion-list suggestion-list--multi-select"
+                                        role="tree"
+                                    >
+                                        {this.state.options.map((option, i: React.Key | undefined) => (
+                                            <TreeSelectItem
+                                                key={i}
+                                                option={option}
+                                                handleTree={this.handleTree}
+                                                onClick={() => {
+                                                    onSelect(option);
+                                                }}
+                                                disabledItem={disabledItem(option)}
+                                                getBorderColor={this.props.getBorderColor}
+                                                getBackgroundColor={this.props.getBackgroundColor}
+                                                getId={this.props.getId}
+                                                optionTemplate={this.props.optionTemplate}
+                                                getLabel={this.props.getLabel}
+                                                onKeyDown={() =>
+                                                    this.setState({
+                                                        buttonTarget: [
+                                                            ...this.state.buttonTarget,
+                                                            this.props.getId(option.value),
+                                                        ],
+                                                    })
+                                                }
+                                            />
+                                        ))}
+                                    </ul>
+                                ) : null
+                            ) : (
+                                <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
+                                    {this.filteredItem(
+                                        this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
+                                    )}
                                 </ul>
-                            ) : null
-                        ) : (
-                            <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
-                                {this.filteredItem(
-                                    this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
-                                )}
-                            </ul>
-                        )}
-                    </div>
-                </WithPortal>
+                            )}
+                        </div>
+                    </WithPortal>
+                )}
             </div>
         );
     }

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

@@ -147,6 +147,26 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.changesFromOutside = false;
     }
 
+    shouldComponentUpdate(nextProps: Readonly<IProps<T>>, nextState: Readonly<IState<T>>): boolean {
+        if (!isEqual(this.state, nextState)) {
+            return true;
+        }
+
+        const propKeys = Object.keys(nextProps) as Array<keyof IProps<T>>;
+
+        for (const key of propKeys) {
+            if (typeof this.props[key] === 'function') {
+                continue;
+            }
+
+            if (!isEqual(this.props[key], nextProps[key])) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     inputFocus = () => {
         this.inputRef.current?.focus();
     };
@@ -897,131 +917,134 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                     )}
                 </div>
 
-                <WithPortal active={this.state.openDropdown} data-test-id="tree-select-popover">
-                    <div
-                        className={
-                            'autocomplete autocomplete--multi-select' +
-                            (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
-                        }
-                        style={{
-                            zIndex: this.zIndex,
-                            width: this.treeSelectRef.current?.offsetWidth,
-                            minWidth: '300px',
-                        }}
-                        ref={this.dropdownRef}
-                    >
-                        <div className="autocomplete__header">
-                            <div className="autocomplete__icon">
-                                <Icon name="search" className="search"></Icon>
-                            </div>
-
-                            <div className="autocomplete__filter">
-                                <input
-                                    className="autocomplete__input"
-                                    type="text"
-                                    placeholder={this.props.searchPlaceholder}
-                                    ref={this.inputRef}
-                                    value={this.state.searchFieldValue}
-                                    onChange={(event) => {
-                                        if (this.props.kind === 'synchronous') {
-                                            this.setState({searchFieldValue: event.target.value});
-                                            this.popperInstance?.update();
-                                        } else if (this.props.kind === 'asynchronous') {
-                                            if (this.ICancelFn) {
-                                                this.ICancelFn();
-                                            }
-
-                                            this.setState({
-                                                searchFieldValue: event.target.value,
-                                                options: [],
-                                                loading: true,
-                                            });
-                                            this.popperInstance?.update();
-                                            this.debounceFn();
-                                        } else {
-                                            return;
-                                        }
-                                    }}
-                                    data-test-id="filter-input"
-                                />
-                            </div>
-                        </div>
-
-                        {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
-                            <div className="autocomplete__category-header">
-                                <div
-                                    className="autocomplete__icon"
-                                    onClick={() => {
-                                        this.backButton();
-                                    }}
-                                >
-                                    <Icon name="arrow-left" className="arrow-left"></Icon>
+                {this.state.openDropdown && (
+                    <WithPortal active={this.state.openDropdown} data-test-id="tree-select-popover">
+                        <div
+                            className={
+                                'autocomplete autocomplete--multi-select' +
+                                (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
+                            }
+                            style={{
+                                zIndex: this.zIndex,
+                                width: this.treeSelectRef.current?.offsetWidth,
+                                minWidth: '300px',
+                            }}
+                            ref={this.dropdownRef}
+                        >
+                            <div className="autocomplete__header">
+                                <div className="autocomplete__icon">
+                                    <Icon name="search" className="search"></Icon>
                                 </div>
 
                                 <div className="autocomplete__filter">
-                                    <button className="autocomplete__category-title">
-                                        {this.props.optionTemplate
-                                            ? this.props.optionTemplate(this.state.buttonValue.value)
-                                            : this.props.getLabel(this.state.buttonValue.value)}
-                                    </button>
+                                    <input
+                                        className="autocomplete__input"
+                                        type="text"
+                                        placeholder={this.props.searchPlaceholder}
+                                        ref={this.inputRef}
+                                        value={this.state.searchFieldValue}
+                                        onChange={(event) => {
+                                            if (this.props.kind === 'synchronous') {
+                                                this.setState({searchFieldValue: event.target.value});
+                                                this.popperInstance?.update();
+                                            } else if (this.props.kind === 'asynchronous') {
+                                                if (this.ICancelFn) {
+                                                    this.ICancelFn();
+                                                }
 
-                                    {this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)}
+                                                this.setState({
+                                                    searchFieldValue: event.target.value,
+                                                    options: [],
+                                                    loading: true,
+                                                });
+                                                this.popperInstance?.update();
+                                                this.debounceFn();
+                                            } else {
+                                                return;
+                                            }
+                                        }}
+                                        data-test-id="filter-input"
+                                    />
                                 </div>
                             </div>
-                        )}
-
-                        {this.state.loading ? (
-                            <ul className="suggestion-list--loader">
-                                <Loader overlay={true}></Loader>
-                            </ul>
-                        ) : this.state.searchFieldValue === '' ? (
-                            this.props.getOptions ? (
-                                <ul
-                                    className="suggestion-list suggestion-list--multi-select"
-                                    ref={this.ref}
-                                    data-test-id="options"
-                                    role="tree"
-                                    aria-multiselectable={this.props.allowMultiple}
-                                >
-                                    {this.state.options.map((option, i: React.Key | undefined) => {
-                                        let selectedItem = this.state.value.some(
-                                            (obj) => this.props.getId(obj) === this.props.getId(option.value),
-                                        );
-
-                                        return (
-                                            <TreeSelectItem
-                                                key={i}
-                                                option={option}
-                                                handleTree={this.handleTree}
-                                                selectedItem={selectedItem}
-                                                allowMultiple={this.props.allowMultiple}
-                                                getBorderColor={this.props.getBorderColor}
-                                                getBackgroundColor={this.props.getBackgroundColor}
-                                                getId={this.props.getId}
-                                                getLabel={this.props.getLabel}
-                                                optionTemplate={this.props.optionTemplate}
-                                                onKeyDown={() =>
-                                                    this.setState({
-                                                        buttonTarget: [
-                                                            ...this.state.buttonTarget,
-                                                            this.props.getId(option.value),
-                                                        ],
-                                                    })
-                                                }
-                                            />
-                                        );
-                                    })}
+
+                            {this.state.activeTree.length > 0 && this.state.buttonValue != null && (
+                                <div className="autocomplete__category-header">
+                                    <div
+                                        className="autocomplete__icon"
+                                        onClick={() => {
+                                            this.backButton();
+                                        }}
+                                    >
+                                        <Icon name="arrow-left" className="arrow-left"></Icon>
+                                    </div>
+
+                                    <div className="autocomplete__filter">
+                                        <button className="autocomplete__category-title">
+                                            {this.props.optionTemplate
+                                                ? this.props.optionTemplate(this.state.buttonValue.value)
+                                                : this.props.getLabel(this.state.buttonValue.value)}
+                                        </button>
+
+                                        {this.props.selectBranchWithChildren &&
+                                            this.branchButton(this.state.buttonValue)}
+                                    </div>
+                                </div>
+                            )}
+
+                            {this.state.loading ? (
+                                <ul className="suggestion-list--loader">
+                                    <Loader overlay={true}></Loader>
                                 </ul>
-                            ) : null
-                        ) : (
-                            <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
-                                {this.filteredItem(
-                                    this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
-                                )}
-                            </ul>
-                        )}
-                    </div>
-                </WithPortal>
+                            ) : this.state.searchFieldValue === '' ? (
+                                this.props.getOptions ? (
+                                    <ul
+                                        className="suggestion-list suggestion-list--multi-select"
+                                        ref={this.ref}
+                                        data-test-id="options"
+                                        role="tree"
+                                        aria-multiselectable={this.props.allowMultiple}
+                                    >
+                                        {this.state.options.map((option, i: React.Key | undefined) => {
+                                            let selectedItem = this.state.value.some(
+                                                (obj) => this.props.getId(obj) === this.props.getId(option.value),
+                                            );
+
+                                            return (
+                                                <TreeSelectItem
+                                                    key={i}
+                                                    option={option}
+                                                    handleTree={this.handleTree}
+                                                    selectedItem={selectedItem}
+                                                    allowMultiple={this.props.allowMultiple}
+                                                    getBorderColor={this.props.getBorderColor}
+                                                    getBackgroundColor={this.props.getBackgroundColor}
+                                                    getId={this.props.getId}
+                                                    getLabel={this.props.getLabel}
+                                                    optionTemplate={this.props.optionTemplate}
+                                                    onKeyDown={() =>
+                                                        this.setState({
+                                                            buttonTarget: [
+                                                                ...this.state.buttonTarget,
+                                                                this.props.getId(option.value),
+                                                            ],
+                                                        })
+                                                    }
+                                                />
+                                            );
+                                        })}
+                                    </ul>
+                                ) : null
+                            ) : (
+                                <ul className="suggestion-list suggestion-list--multi-select" ref={this.ref}>
+                                    {this.filteredItem(
+                                        this.props.singleLevelSearch ? this.state.options : this.state.filterArr,
+                                    )}
+                                </ul>
+                            )}
+                        </div>
+                    </WithPortal>
+                )}
             </InputWrapper>
         );
     }

package/dist/examples.bundle.js

@@ -60620,12 +60620,19 @@ var DatePickerISO = /** @class */ (function (_super) {
     return DatePickerISO;
 }(React.PureComponent));
 exports.DatePickerISO = DatePickerISO;
+function getOptionLabel(options, id) {
+    var _a, _b;
+    if (id == null) {
+        return '';
+    }
+    return (_b = (_a = options.find(function (option) { return option.id === id; })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : id;
+}
 var MonthNavigator = function (_a) {
     var value = _a.value, options = _a.options, onChange = _a.onChange;
-    return (React.createElement(TreeSelect_1.TreeSelect, { kind: "synchronous", value: [value], getOptions: function () { return options.map(function (option) { return ({ value: option.id }); }); }, getLabel: function (option) { return options[parseInt(option, 10)].label; }, getId: function (option) { return option; }, onChange: function (selected) {
+    return (React.createElement(TreeSelect_1.TreeSelect, { kind: "synchronous", value: [value], getOptions: function () { return options.map(function (option) { return ({ value: option.id }); }); }, getLabel: function (optionId) { return getOptionLabel(options, optionId); }, getId: function (option) { return option; }, onChange: function (selected) {
             onChange(selected[0]);
         }, clearable: false, labelHidden: true, valueTemplate: function (item) { return (React.createElement("div", { className: "sd-datepicker__navigator-value sd-datepicker__navigator-month" },
-            React.createElement("div", null, options[parseInt(item, 10)].label),
+            React.createElement("div", null, getOptionLabel(options, item)),
             React.createElement(Icon_1.Icon, { name: "chevron-down-thin" }))); }, inputWrapper: {
             kind: 'custom',
             component: function (_a) {
@@ -62345,6 +62352,22 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.changesFromOutside = false;
         return _this;
     }
+    TreeSelect.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!(0, lodash_1.isEqual)(this.state, nextState)) {
+            return true;
+        }
+        var propKeys = Object.keys(nextProps);
+        for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {
+            var key = propKeys_1[_i];
+            if (typeof this.props[key] === 'function') {
+                continue;
+            }
+            if (!(0, lodash_1.isEqual)(this.props[key], nextProps[key])) {
+                return true;
+            }
+        }
+        return false;
+    };
     TreeSelect.prototype.componentWillUnmount = function () {
         document.removeEventListener('mousedown', this.onMouseDown);
         document.removeEventListener('keydown', this.onKeyDown);
@@ -62796,7 +62819,7 @@ var TreeSelect = /** @class */ (function (_super) {
                     };
                     return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
                 })))),
-            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
+            this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
                         (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
@@ -62838,7 +62861,8 @@ var TreeSelect = /** @class */ (function (_super) {
                             React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
                                 ? this.props.optionTemplate(this.state.buttonValue.value)
                                 : this.props.getLabel(this.state.buttonValue.value)),
-                            this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
+                            this.props.selectBranchWithChildren &&
+                                this.branchButton(this.state.buttonValue)))),
                     this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
                         React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
                         var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
@@ -62849,7 +62873,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     ], false),
                                 });
                             } }));
-                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
+                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
     };
     return TreeSelect;
 }(React.Component));
@@ -99718,7 +99742,7 @@ var TreeMenu = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement("div", { ref: this.treeMenuRef },
             React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
-            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
+            this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
                 React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
                         zIndex: this.zIndex,
                     } },
@@ -99750,7 +99774,7 @@ var TreeMenu = /** @class */ (function (_super) {
                                     _this.props.getId(option.value),
                                 ], false),
                             });
-                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
+                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
     };
     return TreeMenu;
 }(React.Component));
@@ -196537,7 +196561,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 1055 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"5.1.4","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","Konstantin Markov","Helmy Giacoman"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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","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","prettier":"3.5.3","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":"^5.8.3","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","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.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","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"5.1.6","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","Konstantin Markov","Helmy Giacoman"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","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","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","prettier":"3.5.3","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":"^5.8.3","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","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-16","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.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","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
 
 /***/ }),
 /* 1056 */

package/dist/superdesk-ui.bundle.js

@@ -60350,12 +60350,19 @@ var DatePickerISO = /** @class */ (function (_super) {
     return DatePickerISO;
 }(React.PureComponent));
 exports.DatePickerISO = DatePickerISO;
+function getOptionLabel(options, id) {
+    var _a, _b;
+    if (id == null) {
+        return '';
+    }
+    return (_b = (_a = options.find(function (option) { return option.id === id; })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : id;
+}
 var MonthNavigator = function (_a) {
     var value = _a.value, options = _a.options, onChange = _a.onChange;
-    return (React.createElement(TreeSelect_1.TreeSelect, { kind: "synchronous", value: [value], getOptions: function () { return options.map(function (option) { return ({ value: option.id }); }); }, getLabel: function (option) { return options[parseInt(option, 10)].label; }, getId: function (option) { return option; }, onChange: function (selected) {
+    return (React.createElement(TreeSelect_1.TreeSelect, { kind: "synchronous", value: [value], getOptions: function () { return options.map(function (option) { return ({ value: option.id }); }); }, getLabel: function (optionId) { return getOptionLabel(options, optionId); }, getId: function (option) { return option; }, onChange: function (selected) {
             onChange(selected[0]);
         }, clearable: false, labelHidden: true, valueTemplate: function (item) { return (React.createElement("div", { className: "sd-datepicker__navigator-value sd-datepicker__navigator-month" },
-            React.createElement("div", null, options[parseInt(item, 10)].label),
+            React.createElement("div", null, getOptionLabel(options, item)),
             React.createElement(Icon_1.Icon, { name: "chevron-down-thin" }))); }, inputWrapper: {
             kind: 'custom',
             component: function (_a) {
@@ -62075,6 +62082,22 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.changesFromOutside = false;
         return _this;
     }
+    TreeSelect.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!(0, lodash_1.isEqual)(this.state, nextState)) {
+            return true;
+        }
+        var propKeys = Object.keys(nextProps);
+        for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {
+            var key = propKeys_1[_i];
+            if (typeof this.props[key] === 'function') {
+                continue;
+            }
+            if (!(0, lodash_1.isEqual)(this.props[key], nextProps[key])) {
+                return true;
+            }
+        }
+        return false;
+    };
     TreeSelect.prototype.componentWillUnmount = function () {
         document.removeEventListener('mousedown', this.onMouseDown);
         document.removeEventListener('keydown', this.onKeyDown);
@@ -62526,7 +62549,7 @@ var TreeSelect = /** @class */ (function (_super) {
                     };
                     return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
                 })))),
-            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
+            this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
                         (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
@@ -62568,7 +62591,8 @@ var TreeSelect = /** @class */ (function (_super) {
                             React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
                                 ? this.props.optionTemplate(this.state.buttonValue.value)
                                 : this.props.getLabel(this.state.buttonValue.value)),
-                            this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
+                            this.props.selectBranchWithChildren &&
+                                this.branchButton(this.state.buttonValue)))),
                     this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
                         React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
                         var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
@@ -62579,7 +62603,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     ], false),
                                 });
                             } }));
-                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
+                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
     };
     return TreeSelect;
 }(React.Component));
@@ -99065,7 +99089,7 @@ var TreeMenu = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement("div", { ref: this.treeMenuRef },
             React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
-            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
+            this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
                 React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
                         zIndex: this.zIndex,
                     } },
@@ -99097,7 +99121,7 @@ var TreeMenu = /** @class */ (function (_super) {
                                     _this.props.getId(option.value),
                                 ], false),
                             });
-                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
+                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
     };
     return TreeMenu;
 }(React.Component));

package/package.json

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

package/react/components/DatePicker.js

@@ -264,12 +264,19 @@ var DatePickerISO = /** @class */ (function (_super) {
     return DatePickerISO;
 }(React.PureComponent));
 exports.DatePickerISO = DatePickerISO;
+function getOptionLabel(options, id) {
+    var _a, _b;
+    if (id == null) {
+        return '';
+    }
+    return (_b = (_a = options.find(function (option) { return option.id === id; })) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : id;
+}
 var MonthNavigator = function (_a) {
     var value = _a.value, options = _a.options, onChange = _a.onChange;
-    return (React.createElement(TreeSelect_1.TreeSelect, { kind: "synchronous", value: [value], getOptions: function () { return options.map(function (option) { return ({ value: option.id }); }); }, getLabel: function (option) { return options[parseInt(option, 10)].label; }, getId: function (option) { return option; }, onChange: function (selected) {
+    return (React.createElement(TreeSelect_1.TreeSelect, { kind: "synchronous", value: [value], getOptions: function () { return options.map(function (option) { return ({ value: option.id }); }); }, getLabel: function (optionId) { return getOptionLabel(options, optionId); }, getId: function (option) { return option; }, onChange: function (selected) {
             onChange(selected[0]);
         }, clearable: false, labelHidden: true, valueTemplate: function (item) { return (React.createElement("div", { className: "sd-datepicker__navigator-value sd-datepicker__navigator-month" },
-            React.createElement("div", null, options[parseInt(item, 10)].label),
+            React.createElement("div", null, getOptionLabel(options, item)),
             React.createElement(Icon_1.Icon, { name: "chevron-down-thin" }))); }, inputWrapper: {
             kind: 'custom',
             component: function (_a) {

package/react/components/TreeMenu.js

@@ -344,7 +344,7 @@ var TreeMenu = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement("div", { ref: this.treeMenuRef },
             React.createElement("div", { ref: this.openDropdownRef }, this.props.children(this.toggle)),
-            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
+            this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-menu-popover" },
                 React.createElement("div", { ref: this.dropdownRef, className: "autocomplete autocomplete--multi-select autocomplete--fixed-width", style: {
                         zIndex: this.zIndex,
                     } },
@@ -376,7 +376,7 @@ var TreeMenu = /** @class */ (function (_super) {
                                     _this.props.getId(option.value),
                                 ], false),
                             });
-                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
+                        } })); }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
     };
     return TreeMenu;
 }(React.Component));

package/react/components/TreeSelect/TreeSelect.d.ts

@@ -73,6 +73,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     private zIndex;
     private changesFromOutside;
     constructor(props: IProps<T>);
+    shouldComponentUpdate(nextProps: Readonly<IProps<T>>, nextState: Readonly<IState<T>>): boolean;
     inputFocus: () => void;
     listNavigation: () => void;
     buttonFocus: () => void;

package/react/components/TreeSelect/TreeSelect.js

@@ -188,6 +188,22 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.changesFromOutside = false;
         return _this;
     }
+    TreeSelect.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        if (!(0, lodash_1.isEqual)(this.state, nextState)) {
+            return true;
+        }
+        var propKeys = Object.keys(nextProps);
+        for (var _i = 0, propKeys_1 = propKeys; _i < propKeys_1.length; _i++) {
+            var key = propKeys_1[_i];
+            if (typeof this.props[key] === 'function') {
+                continue;
+            }
+            if (!(0, lodash_1.isEqual)(this.props[key], nextProps[key])) {
+                return true;
+            }
+        }
+        return false;
+    };
     TreeSelect.prototype.componentWillUnmount = function () {
         document.removeEventListener('mousedown', this.onMouseDown);
         document.removeEventListener('keydown', this.onKeyDown);
@@ -639,7 +655,7 @@ var TreeSelect = /** @class */ (function (_super) {
                     };
                     return React.createElement(React.Fragment, { key: i }, _this.renderItemContent(item, Wrapper));
                 })))),
-            React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
+            this.state.openDropdown && (React.createElement(WithPortal_1.WithPortal, { active: this.state.openDropdown, "data-test-id": "tree-select-popover" },
                 React.createElement("div", { className: 'autocomplete autocomplete--multi-select' +
                         (this.props.width === 'medium' ? ' autocomplete--fixed-width' : ''), style: {
                         zIndex: this.zIndex,
@@ -681,7 +697,8 @@ var TreeSelect = /** @class */ (function (_super) {
                             React.createElement("button", { className: "autocomplete__category-title" }, this.props.optionTemplate
                                 ? this.props.optionTemplate(this.state.buttonValue.value)
                                 : this.props.getLabel(this.state.buttonValue.value)),
-                            this.props.selectBranchWithChildren && this.branchButton(this.state.buttonValue)))),
+                            this.props.selectBranchWithChildren &&
+                                this.branchButton(this.state.buttonValue)))),
                     this.state.loading ? (React.createElement("ul", { className: "suggestion-list--loader" },
                         React.createElement(Loader_1.Loader, { overlay: true }))) : this.state.searchFieldValue === '' ? (this.props.getOptions ? (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref, "data-test-id": "options", role: "tree", "aria-multiselectable": this.props.allowMultiple }, this.state.options.map(function (option, i) {
                         var selectedItem = _this.state.value.some(function (obj) { return _this.props.getId(obj) === _this.props.getId(option.value); });
@@ -692,7 +709,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                     ], false),
                                 });
                             } }));
-                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr)))))));
+                    }))) : null) : (React.createElement("ul", { className: "suggestion-list suggestion-list--multi-select", ref: this.ref }, this.filteredItem(this.props.singleLevelSearch ? this.state.options : this.state.filterArr))))))));
     };
     return TreeSelect;
 }(React.Component));