superdesk-ui-framework 3.0.32 → 3.0.36

package/app/styles/components/_theme-selector.scss

@@ -96,7 +96,7 @@
                 box-shadow: var(--sd-shadow--z1);
                 border-color: var(--sd-colour-line--strong);
             }
-            
+
         }
     }
     input:checked {
@@ -145,6 +145,10 @@
 }
 
 [data-theme="dark-ui"] {
+    input[type="time"]::-webkit-calendar-picker-indicator {
+        filter: invert(1);
+    }
+
     figure[data-theme="dark-ui"] {
         --color-text:                      hsla(0, 0%, 96%, 1);
         --color-text-light:                hsla(214, 13%, 96%, 0.75);
@@ -173,7 +177,7 @@
         --sd-colour--shadow-line:          hsla(214, 13%, 70%, 0);
         --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.2);
 
-        
+
     }
     figure[data-theme="contrast-light-ui"] {
         --color-text:                      hsla(0, 0%, 0%, 1);
@@ -186,4 +190,4 @@
         --sd-colour--shadow-line:          hsla(214, 13%, 60%, 0);
         --sd-colour-line--medium:          hsla(214, 13%, 20%, 0.4);
     }
-}
+}

package/app/styles/form-elements/_inputs.scss

@@ -653,11 +653,16 @@
         grid-row: 2/3;
         grid-column: 2/4;
     }
+
     .sd-input__input-container {
         grid-row: 2/3;
         grid-column: 2/4;
     }
 
+    .sd-input__input-container:has(input[type="time"]) {
+        min-width: 110px;
+    }
+
     textarea {
         &.sd-input__input {
             height: auto;

package/app/styles/primereact/_pr-datepicker.scss

@@ -29,7 +29,6 @@
             transition: all 0.2s ease-out, color 0.1s ease-out;
             &:hover {
                 background-color: hsla(214, 13%, 55%, 0.2);
-                
             }
             &:active {
                 background-color: hsla(214, 13%, 55%, 0.3);
@@ -154,7 +153,7 @@
 .p-calendar {
     @include pr-input-item-base;
     .p-inputtext {
-        color: inherit;
+        color: var(--color-text);
         height: $height-input--default;
         background-color: transparent;
         border: none;
@@ -178,7 +177,7 @@
         margin: 0 4px 0 0;
         [class^="icon-"],
         [class*=" icon-"] {
-            color: inherit;
+            color: var(--color-text);
             margin-top: -2px;
             opacity: 0.75;
         }
@@ -193,4 +192,4 @@
 }
 .p-datepicker-calendar {
     margin-bottom: 8px;
-}
+}

package/app-typescript/components/TimePicker.tsx

@@ -24,29 +24,31 @@ export class TimePicker extends React.PureComponent<IProps> {
     render() {
         return (
             <InputWrapper
-            label={this.props.label}
-            error={this.props.error}
-            required={this.props.required}
-            disabled={this.props.disabled}
-            invalid={this.props.invalid}
-            info={this.props.info}
-            inlineLabel={this.props.inlineLabel}
-            labelHidden={this.props.labelHidden}
-            fullWidth={this.props.fullWidth}
-            htmlId={this.htmlId}
-            tabindex={this.props.tabindex}>
-                <input
-                id={this.htmlId}
-                aria-labelledby={this.htmlId + 'label'}
-                type="time"
-                step={this.props.allowSeconds ? 1 : undefined}
-                className="sd-input__input"
-                value={this.props.value}
+                label={this.props.label}
+                error={this.props.error}
                 required={this.props.required}
                 disabled={this.props.disabled}
-                onChange={(event) => {
-                    this.props.onChange(event.target.value);
-                }}/>
+                invalid={this.props.invalid}
+                info={this.props.info}
+                inlineLabel={this.props.inlineLabel}
+                labelHidden={this.props.labelHidden}
+                fullWidth={this.props.fullWidth}
+                htmlId={this.htmlId}
+                tabindex={this.props.tabindex}
+            >
+                <input
+                    id={this.htmlId}
+                    aria-labelledby={this.htmlId + 'label'}
+                    type="time"
+                    step={this.props.allowSeconds ? 1 : undefined}
+                    className="sd-input__input"
+                    value={this.props.value}
+                    required={this.props.required}
+                    disabled={this.props.disabled}
+                    onChange={(event) => {
+                        this.props.onChange(event.target.value);
+                    }}
+                />
             </InputWrapper>
         );
     }

package/app-typescript/components/TreeSelect.tsx

@@ -109,6 +109,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.branchButton = this.branchButton.bind(this);
         this.handleDebounce = this.handleDebounce.bind(this);
         this.toggleMenu = this.toggleMenu.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.inputRef = React.createRef();
@@ -129,38 +131,47 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.categoryButtonRef.current?.focus();
     }
 
-    componentDidMount = () => {
-        this.recursion(this.state.options);
-        document.addEventListener("mousedown", (event) => {
-            if (
-                (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
-                && (this.openDropdownRef.current?.contains(event.target as HTMLElement) !== true)
-            ) {
-                this.setState({openDropdown: false});
+    onMouseDown = (event: MouseEvent) => {
+        if (
+            (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
+            && (this.openDropdownRef.current?.contains(event.target as HTMLElement) !== true)
+        ) {
+            this.setState({openDropdown: false});
+        }
+    }
+
+    onKeyDown = (e: KeyboardEvent) => {
+        if (this.state.openDropdown && this.ref.current) {
+            keyboardNavigation(
+                e,
+                this.ref.current,
+                this.categoryButtonRef.current ? this.buttonFocus : this.inputFocus,
+            );
+            if (e.key === 'Backspace') {
+                this.backButton();
+                this.backButtonValue();
+
+                const {buttonTarget} = this.state;
+                const className = buttonTarget.pop();
+
+                if (className != null) {
+                    const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
+                    element.focus();
+                }
             }
-        });
+        }
+    }
 
-        document.addEventListener("keydown", (e: KeyboardEvent) => {
-            if (this.state.openDropdown && this.ref.current) {
-                keyboardNavigation(
-                    e,
-                    this.ref.current,
-                    this.categoryButtonRef.current ? this.buttonFocus : this.inputFocus,
-                );
-                if (e.key === 'Backspace') {
-                    this.backButton();
-                    this.backButtonValue();
+    componentDidMount = () => {
+        this.recursion(this.state.options);
 
-                    const {buttonTarget} = this.state;
-                    const className = buttonTarget.pop();
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
 
-                    if (className != null) {
-                        const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
-                        element.focus();
-                    }
-                }
-            }
-        });
+    componentWillUnmount(): void {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
     }
 
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
@@ -793,7 +804,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                                         }}
                                                     >
                                                         <button
-                                                            className={`suggestion-item--btn ${this.props.getId(option.value)}`}
+                                                            className={`suggestion-item--btn z${this.props.getId(option.value)}z`}
                                                             onKeyDown={(event) => {
                                                                 if (event.key === 'Enter' && option.children) {
                                                                     this.setState({

package/dist/examples.bundle.js

@@ -64238,30 +64238,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = buttonTarget.pop();
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -64296,6 +64298,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -64304,6 +64308,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -64774,7 +64782,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [
@@ -142949,7 +142957,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 681 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.32","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","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","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/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","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","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.36","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","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/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","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","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-10","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 682 */

package/dist/superdesk-ui.bundle.css

@@ -47269,6 +47269,9 @@ textarea.sd-media-carousel__media-title {
     opacity: 0.4;
     border-color: var(--color-checkbox-border) !important; }
 
+[data-theme="dark-ui"] input[type="time"]::-webkit-calendar-picker-indicator {
+  filter: invert(1); }
+
 [data-theme="dark-ui"] figure[data-theme="dark-ui"] {
   --color-text:                      hsla(0, 0%, 96%, 1);
   --color-text-light:                hsla(214, 13%, 96%, 0.75);
@@ -48982,6 +48985,8 @@ textarea.sd-media-carousel__media-title {
   .sd-input .sd-input__input-container {
     grid-row: 2/3;
     grid-column: 2/4; }
+  .sd-input .sd-input__input-container:has(input[type="time"]) {
+    min-width: 110px; }
   .sd-input textarea.sd-input__input {
     height: auto;
     min-height: 3.2rem; }
@@ -63083,7 +63088,7 @@ i.sd-sidetab-menu__helper-icon {
     box-shadow: 0 1px 0 0 var(--sd-colour-interactive);
     border-color: var(--sd-colour-interactive); }
   .p-calendar .p-inputtext, .p-calendar .p-datepicker-trigger {
-    color: inherit;
+    color: var(--color-text);
     height: 3.2rem;
     background-color: transparent;
     border: none;
@@ -63102,7 +63107,7 @@ i.sd-sidetab-menu__helper-icon {
     margin: 0 4px 0 0; }
     .p-calendar-w-btn .p-datepicker-trigger [class^="icon-"],
     .p-calendar-w-btn .p-datepicker-trigger [class*=" icon-"] {
-      color: inherit;
+      color: var(--color-text);
       margin-top: -2px;
       opacity: 0.75; }
     .p-calendar-w-btn .p-datepicker-trigger:hover [class^="icon-"],

package/dist/superdesk-ui.bundle.js

@@ -63855,30 +63855,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = buttonTarget.pop();
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -63913,6 +63915,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -63921,6 +63925,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -64391,7 +64399,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [

package/package.json

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

package/react/components/TreeSelect.d.ts

@@ -69,7 +69,10 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
     inputFocus: () => void;
     listNavigation: () => void;
     buttonFocus: () => void;
+    onMouseDown: (event: MouseEvent) => void;
+    onKeyDown: (e: KeyboardEvent) => void;
     componentDidMount: () => void;
+    componentWillUnmount(): void;
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
     toggleMenu(): void;
     removeClick(i: number): void;

package/react/components/TreeSelect.js

@@ -77,30 +77,32 @@ var TreeSelect = /** @class */ (function (_super) {
             var _a;
             (_a = _this.categoryButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         };
-        _this.componentDidMount = function () {
-            _this.recursion(_this.state.options);
-            document.addEventListener("mousedown", function (event) {
-                var _a, _b;
-                if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
-                    && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
-                    _this.setState({ openDropdown: false });
-                }
-            });
-            document.addEventListener("keydown", function (e) {
-                if (_this.state.openDropdown && _this.ref.current) {
-                    keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
-                    if (e.key === 'Backspace') {
-                        _this.backButton();
-                        _this.backButtonValue();
-                        var buttonTarget = _this.state.buttonTarget;
-                        var className = buttonTarget.pop();
-                        if (className != null) {
-                            var element = document.getElementsByClassName(className)[0];
-                            element.focus();
-                        }
+        _this.onMouseDown = function (event) {
+            var _a, _b;
+            if ((((_a = _this.dropdownRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) !== true)
+                && (((_b = _this.openDropdownRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target)) !== true)) {
+                _this.setState({ openDropdown: false });
+            }
+        };
+        _this.onKeyDown = function (e) {
+            if (_this.state.openDropdown && _this.ref.current) {
+                keyboardNavigation(e, _this.ref.current, _this.categoryButtonRef.current ? _this.buttonFocus : _this.inputFocus);
+                if (e.key === 'Backspace') {
+                    _this.backButton();
+                    _this.backButtonValue();
+                    var buttonTarget = _this.state.buttonTarget;
+                    var className = buttonTarget.pop();
+                    if (className != null) {
+                        var element = document.getElementsByClassName(className)[0];
+                        element.focus();
                     }
                 }
-            });
+            }
+        };
+        _this.componentDidMount = function () {
+            _this.recursion(_this.state.options);
+            document.addEventListener("mousedown", _this.onMouseDown);
+            document.addEventListener("keydown", _this.onKeyDown);
         };
         _this.backButtonValue = function () {
             var item = _this.state.buttonTree.pop();
@@ -135,6 +137,8 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.branchButton = _this.branchButton.bind(_this);
         _this.handleDebounce = _this.handleDebounce.bind(_this);
         _this.toggleMenu = _this.toggleMenu.bind(_this);
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onKeyDown = _this.onKeyDown.bind(_this);
         _this.dropdownRef = React.createRef();
         _this.ref = React.createRef();
         _this.inputRef = React.createRef();
@@ -143,6 +147,10 @@ var TreeSelect = /** @class */ (function (_super) {
         _this.popperInstance = null;
         return _this;
     }
+    TreeSelect.prototype.componentWillUnmount = function () {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    };
     TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
         if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
@@ -613,7 +621,7 @@ var TreeSelect = /** @class */ (function (_super) {
                                                 event.stopPropagation();
                                                 _this.handleTree(event, option);
                                             } },
-                                            React.createElement("button", { className: "suggestion-item--btn ".concat(_this.props.getId(option.value)), onKeyDown: function (event) {
+                                            React.createElement("button", { className: "suggestion-item--btn z".concat(_this.props.getId(option.value), "z"), onKeyDown: function (event) {
                                                     if (event.key === 'Enter' && option.children) {
                                                         _this.setState({
                                                             buttonTarget: __spreadArray(__spreadArray([], _this.state.buttonTarget, true), [