superdesk-ui-framework 3.0.35 → 3.0.38

package/react/components/Input.d.ts

@@ -1,18 +1,7 @@
 import * as React from 'react';
-interface IPropsBase {
-    label?: string;
+import { IInputCommon } from './Form/InputWrapper';
+interface IPropsBase extends IInputCommon {
     maxLength?: number;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    boxedStyle?: boolean;
-    boxedLable?: boolean;
     placeholder?: string;
     size?: 'medium' | 'large' | 'x-large';
 }
@@ -32,15 +21,10 @@ interface IPropsNumber extends IPropsBase {
     onChange(newValue: number): void;
 }
 type IProps = IPropsText | IPropsNumber | IPropsPassword;
-interface IState {
-    value: string | number;
-    invalid: boolean;
-}
-export declare class Input extends React.Component<IProps, IState> {
+export declare class Input extends React.Component<IProps> {
     constructor(props: IProps);
     htmlId: string;
     handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
-    componentDidUpdate(prevProps: any): void;
     render(): JSX.Element;
 }
 export {};

package/react/components/Input.js

@@ -43,45 +43,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
 var React = __importStar(require("react"));
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
-var Form_1 = require("./Form");
+var InputWrapper_1 = require("./Form/InputWrapper");
 var Input = /** @class */ (function (_super) {
     __extends(Input, _super);
     function Input(props) {
-        var _this = this;
-        var _a, _b;
-        _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            value: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
-            invalid: (_b = _this.props.invalid) !== null && _b !== void 0 ? _b : false,
-        };
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
     Input.prototype.handleChange = function (event) {
-        this.setState({ value: event.target.value });
         if (this.props.type === 'number') {
             this.props.onChange(Number(event.target.value));
         }
         else {
             this.props.onChange(event.target.value);
         }
-        if (this.props.maxLength && !this.props.invalid) {
-            this.setState({ invalid: event.target.value.length > this.props.maxLength });
-        }
-    };
-    Input.prototype.componentDidUpdate = function (prevProps) {
-        var _a;
-        if (prevProps.value !== this.props.value) {
-            this.setState({ value: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
-        }
     };
     Input.prototype.render = function () {
         var _a, _b;
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, value: this.state.value, invalid: this.props.invalid, 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 },
-            React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
+        if (this.props.preview) {
+            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, invalid: this.props.error != null ? true : false, error: this.props.error, 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 },
+            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 })));
     };
     return Input;
 }(React.Component));

package/react/components/MultiSelect.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-interface IProps<T> {
+import { IInputWrapper } from './Form/InputWrapper';
+interface IProps<T> extends IInputWrapper {
     value: Array<T>;
     options: Array<T>;
     placeholder?: string;
@@ -14,19 +15,9 @@ interface IProps<T> {
     showSelectAll?: boolean;
     zIndex?: number;
     optionLabel: (option: T) => string;
-    itemTemplate?(item: any): JSX.Element | undefined;
-    selectedItemTemplate?(value: any): JSX.Element | undefined;
+    itemTemplate?(item: T): JSX.Element | undefined;
+    selectedItemTemplate?(value: T): JSX.Element | undefined;
     onChange(newValue: Array<T>): void;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    label?: string;
-    disabled?: boolean;
 }
 interface IState<T> {
     options: Array<T>;

package/react/components/MultiSelect.js

@@ -47,13 +47,14 @@ var multiselect_1 = require("@superdesk/primereact/multiselect");
 var classnames_1 = __importDefault(require("classnames"));
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
+var SelectPreview_1 = require("./SelectPreview");
 var MultiSelect = /** @class */ (function (_super) {
     __extends(MultiSelect, _super);
     function MultiSelect(props) {
         var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
-            value: [],
+            value: _this.props.value != null ? _this.props.value : [],
             options: [],
             invalid: _this.props.invalid ? _this.props.invalid : false,
         };
@@ -66,7 +67,10 @@ var MultiSelect = /** @class */ (function (_super) {
             'showSelectAll': this.props.showSelectAll,
             'showFilter': this.props.filter,
         });
-        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 },
+        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, 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 },
             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.d.ts

@@ -1,22 +1,10 @@
 import * as React from 'react';
-interface ISelect {
+import { IInputWrapper } from './Form/InputWrapper';
+interface ISelect extends IInputWrapper {
     value?: string;
-    label: string;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
     onChange(newValue: string): void;
 }
-interface IState {
-    invalid: boolean;
-}
-declare class Select extends React.Component<ISelect, IState> {
+declare class Select extends React.Component<ISelect> {
     private htmlId;
     constructor(props: ISelect);
     handleChange(event: React.ChangeEvent<HTMLSelectElement>): void;

package/react/components/Select.js

@@ -48,13 +48,8 @@ var Form_1 = require("./Form");
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
-        var _this = this;
-        var _a;
-        _this = _super.call(this, props) || this;
+        var _this = _super.call(this, props) || this;
         _this.htmlId = (0, react_id_generator_1.default)();
-        _this.state = {
-            invalid: (_a = _this.props.invalid) !== null && _a !== void 0 ? _a : false,
-        };
         _this.handleChange = _this.handleChange.bind(_this);
         return _this;
     }
@@ -62,8 +57,12 @@ var Select = /** @class */ (function (_super) {
         this.props.onChange(event.target.value);
     };
     Select.prototype.render = function () {
-        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 },
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
+        if (this.props.preview) {
+            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, 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 },
+            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children)));
     };
     return Select;
 }(React.Component));

package/react/components/SelectPreview.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IProps<T> {
+    items: Array<T>;
+    kind: {
+        mode: 'single-select';
+        getBorderColor?(item: T): string;
+    } | {
+        mode: 'multi-select';
+        getBackgroundColor?(item: T): string;
+    };
+    getLabel(item: T): string;
+    valueTemplate?(item: T, Wrapper?: React.ElementType): React.ComponentType<T> | JSX.Element | undefined;
+}
+export declare class SelectPreview<T> extends React.Component<IProps<T>> {
+    render(): JSX.Element;
+}
+export {};

package/react/components/SelectPreview.js

@@ -0,0 +1,109 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectPreview = void 0;
+var classnames_1 = __importDefault(require("classnames"));
+var React = __importStar(require("react"));
+var Label_1 = require("./Label");
+var SelectPreview = /** @class */ (function (_super) {
+    __extends(SelectPreview, _super);
+    function SelectPreview() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    SelectPreview.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { className: "tags-preview" },
+            React.createElement("ul", { className: "tags-preview__tag-list" }, this.props.items.map(function (item, i) {
+                var Wrapper = function (_a) {
+                    var backgroundColor = _a.backgroundColor, borderColor = _a.borderColor, children = _a.children;
+                    var classes = (0, classnames_1.default)('tags-preview__tag-item', {
+                        'tags-preview__tag-item--single-select': _this.props.kind.mode === 'single-select',
+                        'tags-preview__tag-item--border': (_this.props.kind.mode === 'single-select' && _this.props.kind.getBorderColor)
+                            || borderColor,
+                    });
+                    return (React.createElement("li", { className: classes, style: (function () {
+                            if (_this.props.valueTemplate != null) {
+                                return { backgroundColor: backgroundColor, borderColor: borderColor };
+                            }
+                            else {
+                                if (_this.props.kind.mode === 'multi-select'
+                                    && _this.props.kind.getBackgroundColor != null) {
+                                    return {
+                                        backgroundColor: _this.props.kind.getBackgroundColor(item),
+                                    };
+                                }
+                                else if (_this.props.kind.mode === 'single-select'
+                                    && _this.props.kind.getBorderColor != null) {
+                                    return {
+                                        borderLeftColor: _this.props.kind.getBorderColor(item),
+                                    };
+                                }
+                                else {
+                                    return undefined;
+                                }
+                            }
+                        })() },
+                        React.createElement("span", { className: "tags-input__helper-box", style: (function () {
+                                if (backgroundColor != null) {
+                                    return { color: (0, Label_1.getTextColor)(backgroundColor) };
+                                }
+                                else {
+                                    if (_this.props.kind.mode === 'multi-select'
+                                        && _this.props.kind.getBackgroundColor != null) {
+                                        return { color: (0, Label_1.getTextColor)(_this.props.kind.getBackgroundColor(item)) };
+                                    }
+                                    else {
+                                        return undefined;
+                                    }
+                                }
+                            })() }, children)));
+                };
+                return (React.createElement(React.Fragment, { key: i }, _this.props.valueTemplate
+                    ? _this.props.valueTemplate(item, Wrapper)
+                    : React.createElement(Wrapper, null,
+                        React.createElement("span", null, _this.props.getLabel(item)))));
+            }))));
+    };
+    return SelectPreview;
+}(React.Component));
+exports.SelectPreview = SelectPreview;

package/react/components/SelectWithTemplate.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Dropdown } from '@superdesk/primereact/dropdown';
-interface IProps<T> {
+import { IInputWrapper } from './Form/InputWrapper';
+interface IProps<T> extends IInputWrapper {
     getItems(searchString: string | null): Promise<Array<T>>;
     value: T;
     getLabel(option: T): string;
@@ -11,21 +12,11 @@ interface IProps<T> {
     }>;
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
-    disabled?: boolean;
     autoFocus?: boolean;
     autoOpen?: boolean;
     width?: 'min' | '100%';
     zIndex?: number;
     'data-test-id'?: string;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
 }
 interface IState<T> {
     options: Array<T>;

package/react/components/SelectWithTemplate.js

@@ -44,7 +44,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectWithTemplate = void 0;
 var React = __importStar(require("react"));
 var dropdown_1 = require("@superdesk/primereact/dropdown");
-// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var Form_1 = require("./Form");
 var labelKey = 'label';

package/react/components/TagInput.d.ts

@@ -1,18 +1,9 @@
 import * as React from 'react';
-interface IProps {
+import { IInputWrapper } from './Form/InputWrapper';
+interface IProps extends IInputWrapper {
     value: Array<string>;
     onChange(value: Array<string>): void;
-    placeholder: string;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    label?: string;
-    disabled?: boolean;
+    placeholder?: string;
 }
 export declare class TagInput extends React.Component<IProps> {
     private htmlId;

package/react/components/TagInput.js

@@ -46,6 +46,7 @@ var React = __importStar(require("react"));
 var chips_1 = require("@superdesk/primereact/chips");
 var Form_1 = require("./Form");
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var SelectPreview_1 = require("./SelectPreview");
 var TagInput = /** @class */ (function (_super) {
     __extends(TagInput, _super);
     function TagInput() {
@@ -55,8 +56,11 @@ var TagInput = /** @class */ (function (_super) {
     }
     TagInput.prototype.render = function () {
         var _a = this.props, onChange = _a.onChange, value = _a.value, placeholder = _a.placeholder;
-        return (React.createElement(Form_1.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 },
-            React.createElement(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: placeholder, disabled: this.props.disabled })));
+        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, 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 },
+            React.createElement(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".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;
 }(React.Component));

package/react/components/TimePicker.d.ts

@@ -1,18 +1,9 @@
 import * as React from 'react';
-interface IProps {
+import { IInputWrapper } from './Form/InputWrapper';
+interface IProps extends IInputWrapper {
     value: string;
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
-    disabled?: boolean;
-    inlineLabel?: boolean;
-    required?: boolean;
-    fullWidth?: boolean;
-    invalid?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    label?: string;
-    info?: string;
-    error?: string;
 }
 export declare class TimePicker extends React.PureComponent<IProps> {
     private htmlId;

package/react/components/TimePicker.js

@@ -54,8 +54,12 @@ var TimePicker = /** @class */ (function (_super) {
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement(Form_1.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 },
-            React.createElement("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: function (event) {
+        if (this.props.preview) {
+            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, 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 },
+            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);
                 } })));
     };

package/react/components/TreeSelect.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { IInputWrapper } from './Form/InputWrapper';
 interface IState<T> {
     value: Array<T>;
     options: Array<ITreeNode<T>>;
@@ -13,7 +14,7 @@ interface IState<T> {
     loading: boolean;
     buttonTarget: Array<string>;
 }
-interface IPropsBase<T> {
+interface IPropsBase<T> extends IInputWrapper {
     value?: Array<T>;
     selectBranchWithChildren?: boolean;
     readOnly?: boolean;
@@ -23,16 +24,6 @@ interface IPropsBase<T> {
     singleLevelSearch?: boolean;
     placeholder?: string;
     searchPlaceholder?: string;
-    invalid?: boolean;
-    inlineLabel?: boolean;
-    labelHidden?: boolean;
-    tabindex?: number;
-    fullWidth?: boolean;
-    info?: string;
-    error?: string;
-    required?: boolean;
-    label?: string;
-    disabled?: boolean;
     zIndex?: number;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -69,7 +60,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;