superdesk-ui-framework 3.0.1-beta.3 → 3.0.1-beta.30

package/react/components/MultiSelect.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+interface IProps<T> {
+    value: Array<T>;
+    options: Array<T>;
+    placeholder?: string;
+    optionLabel: string;
+    emptyFilterMessage?: string;
+    filterPlaceholder?: string;
+    maxSelectedLabels?: number;
+    selectedItemsLabel?: string;
+    ariaLabelledBy?: string;
+    tabIndex?: string | any;
+    filter?: boolean;
+    showClear?: boolean;
+    showSelectAll?: boolean;
+    itemTemplate?(item: any): JSX.Element | undefined;
+    selectedItemTemplate?(value: any): JSX.Element | undefined;
+    onChange(newValue: string): 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>;
+    value: Array<T>;
+    invalid: boolean;
+}
+export declare class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private htmlId;
+    constructor(props: IProps<T>);
+    render(): JSX.Element;
+}
+export {};

package/react/components/MultiSelect.js

@@ -0,0 +1,70 @@
+"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;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.MultiSelect = void 0;
+var React = __importStar(require("react"));
+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 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: [],
+            options: [],
+            invalid: _this.props.invalid ? _this.props.invalid : false,
+        };
+        return _this;
+    }
+    MultiSelect.prototype.render = function () {
+        var _this = this;
+        var _a;
+        var classes = (0, classnames_1.default)({
+            '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 },
+            React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (e) { return _this.props.onChange(e); }, display: "chip", filter: this.props.filter, filterBy: this.props.optionLabel, appendTo: document.body, placeholder: this.props.placeholder, optionLabel: this.props.optionLabel, emptyFilterMessage: this.props.emptyFilterMessage, filterPlaceholder: this.props.filterPlaceholder, itemTemplate: this.props.itemTemplate, selectedItemTemplate: this.props.selectedItemTemplate, maxSelectedLabels: (_a = this.props.maxSelectedLabels) !== null && _a !== void 0 ? _a : 4, selectedItemsLabel: this.props.selectedItemsLabel, ariaLabelledBy: this.htmlId + 'label', tabIndex: this.props.tabIndex ? this.props.tabIndex : '0', showClear: this.props.showClear, disabled: this.props.disabled, inputId: this.htmlId })));
+    };
+    return MultiSelect;
+}(React.Component));
+exports.MultiSelect = MultiSelect;

package/react/components/NavButton.d.ts

@@ -5,7 +5,7 @@ interface IProps {
     text?: string;
     iconSize?: 'small' | 'big';
     theme?: 'light' | 'dark';
-    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    type?: 'default' | 'primary' | 'highlight' | 'darker' | 'dark';
     state?: 'normal' | 'active';
     value?: 'button' | 'submit' | 'reset';
     onClick(): void;

package/react/components/Navigation/BottomNav.d.ts

@@ -8,6 +8,7 @@ interface IItem {
     active?: boolean;
     title: string;
     onClick(event: any): void;
+    onRemove(event: any): void;
 }
 interface IState {
     index: number;

package/react/components/Navigation/BottomNav.js

@@ -71,7 +71,7 @@ var BottomNav = /** @class */ (function (_super) {
     };
     BottomNav.prototype.render = function () {
         var _this = this;
-        return (React.createElement("ul", { className: 'sd-bottom-nav-list' }, this.state.items.map(function (item, index) {
+        return (React.createElement("ul", { className: 'sd-bottom-nav-list' }, this.props.items.map(function (item, index) {
             return (React.createElement("li", { key: index, className: 'sd-bottom-nav-list__item' + (item['active'] ? ' sd-bottom-nav-list__item--active' : (index === _this.state.index ? ' sd-bottom-nav-list__item--active' : '')) },
                 React.createElement("a", { className: 'sd-bottom-nav-list__item-title', onClick: function (event) {
                         _this.handleClick(index);
@@ -80,7 +80,7 @@ var BottomNav = /** @class */ (function (_super) {
                     item['icon'] &&
                         React.createElement(Icon_1.Icon, { name: item['icon'] }),
                     React.createElement("span", null, item.title)),
-                React.createElement(IconButton_1.IconButton, { size: 'small', icon: "close-small", ariaValue: 'Delete', onClick: function () { return _this.handleDelete(index); } })));
+                React.createElement(IconButton_1.IconButton, { size: 'small', icon: "close-small", ariaValue: 'Delete', onClick: function () { return item.onRemove(index); } })));
         })));
     };
     return BottomNav;

package/react/components/SearchBar.d.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
 interface IProps {
-    value?: string | number;
+    value?: string;
     type?: 'expanded' | 'collapsed' | 'boxed';
     placeholder: string;
     focused?: boolean;
     boxed?: boolean;
-    onSubmit?(): void;
+    onSubmit?(value: string | number): void;
 }
 interface IState {
     inputValue: any;
     type: string;
     focused: boolean;
     boxed?: boolean;
+    keyDown?: boolean;
 }
 export declare class SearchBar extends React.PureComponent<IProps, IState> {
     private inputRef;

package/react/components/SearchBar.js

@@ -57,6 +57,7 @@ var SearchBar = /** @class */ (function (_super) {
             focused: _this.props.focused ? _this.props.focused : false,
             type: _this.props.type ? _this.props.type : 'expanded',
             boxed: _this.props.boxed ? _this.props.boxed : false,
+            keyDown: false,
         };
         _this.inputRef = React.createRef();
         return _this;
@@ -77,12 +78,35 @@ var SearchBar = /** @class */ (function (_super) {
             _a));
         return (React.createElement("div", { className: classes, ref: this.inputRef },
             React.createElement("label", { className: "sd-searchbar__icon" }),
-            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onChange: function (e) { return _this.setState({ inputValue: e.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
+            React.createElement("input", { id: "search-input", ref: function (input) { return (input && _this.props.focused) && input.focus(); }, className: "sd-searchbar__input", type: "text", placeholder: this.props.placeholder, value: this.state.inputValue, onKeyPress: function (event) {
+                    if (event.key === 'Enter') {
+                        if (_this.props.onSubmit) {
+                            _this.props.onSubmit(_this.state.inputValue);
+                        }
+                        _this.setState({ keyDown: true });
+                    }
+                }, onKeyUp: function (event) {
+                    if (event.key === 'Enter') {
+                        _this.setState({ keyDown: false });
+                    }
+                }, onChange: function (event) { return _this.setState({ inputValue: event.target.value }); }, onFocus: function () { return _this.setState({ focused: true }); } }),
             this.state.inputValue &&
-                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () { return _this.setState({ inputValue: '' }); } },
+                React.createElement("button", { className: "sd-searchbar__cancel", onClick: function () {
+                        _this.setState({ inputValue: '' });
+                        setTimeout(function () {
+                            if (_this.props.onSubmit) {
+                                _this.props.onSubmit(_this.state.inputValue);
+                            }
+                        });
+                    } },
                     React.createElement(Icon_1.Icon, { name: 'remove-sign' })),
-            React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn", onSubmit: function () { return _this.props.onSubmit; } },
-                React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
+            this.state.inputValue &&
+                React.createElement("button", { id: "sd-searchbar__search-btn", className: "sd-searchbar__search-btn ".concat(this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''), onClick: function () {
+                        if (_this.props.onSubmit) {
+                            _this.props.onSubmit(_this.state.inputValue);
+                        }
+                    } },
+                    React.createElement(Icon_1.Icon, { name: 'chevron-right-thin' }))));
     };
     return SearchBar;
 }(React.PureComponent));

package/react/components/Select.d.ts

@@ -22,8 +22,8 @@ interface IState {
     invalid: boolean;
 }
 declare class Select extends React.Component<ISelect, IState> {
+    private htmlId;
     constructor(props: ISelect);
-    htmlId: string;
     handleChange(event: React.ChangeEvent<HTMLSelectElement>): void;
     render(): JSX.Element;
 }

package/react/components/Select.js

@@ -39,8 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Option = exports.Select = void 0;
 var React = __importStar(require("react"));
-var classnames_1 = __importDefault(require("classnames"));
+// import classNames from 'classnames';
 var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var Select = /** @class */ (function (_super) {
     __extends(Select, _super);
     function Select(props) {
@@ -59,31 +60,8 @@ var Select = /** @class */ (function (_super) {
         this.props.onChange(event.target.value);
     };
     Select.prototype.render = function () {
-        var _a;
-        var classes = (0, classnames_1.default)('sd-input sd-input--is-select', (_a = {
-                'sd-input--inline-label': this.props.inlineLabel,
-                'sd-input--required': this.props.required,
-                'sd-input--disabled': this.props.disabled,
-                'sd-input--full-width': this.props.fullWidth,
-                'sd-input--invalid': this.props.invalid || this.state.invalid,
-                'sd-input--medium': this.props.size === undefined
-            },
-            _a["sd-input--".concat(this.props.size)] = this.props.size || this.props.size !== undefined,
-            _a['sd-input--boxed-style'] = this.props.boxedStyle,
-            _a['sd-input--boxed-label'] = this.props.boxedLable,
-            _a));
-        var labelClasses = (0, classnames_1.default)('sd-input__label', {
-            'a11y-only': this.props.labelHidden,
-        });
-        return (React.createElement("div", { className: classes },
-            React.createElement("label", { className: labelClasses, htmlFor: this.htmlId, tabIndex: this.props.tabindex === undefined ? undefined : -1 }, this.props.label),
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children),
-            React.createElement("div", { className: 'sd-input__message-box' },
-                this.props.info && !this.props.invalid && !this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__hint' }, this.props.info) : null,
-                this.props.invalid || this.state.invalid ?
-                    React.createElement("div", { className: 'sd-input__message' }, this.props.error)
-                    : null)));
+        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.state.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled }, this.props.children)));
     };
     return Select;
 }(React.Component));

package/react/components/SelectWithTemplate.d.ts

@@ -12,19 +12,29 @@ interface IProps<T> {
     noResultsFoundMessage: string;
     filterPlaceholder?: string;
     disabled?: boolean;
-    required?: 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>;
     loading: boolean;
+    invalid: boolean;
 }
 export declare class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
     componentRef: Dropdown | null;
+    private htmlId;
     constructor(props: IProps<T>);
     componentDidMount(): void;
     render(): JSX.Element;

package/react/components/SelectWithTemplate.js

@@ -33,18 +33,26 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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';
 var SelectWithTemplate = /** @class */ (function (_super) {
     __extends(SelectWithTemplate, _super);
     function SelectWithTemplate(props) {
         var _this = _super.call(this, props) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
         _this.state = {
             options: [],
             loading: false,
+            invalid: _this.props.invalid ? _this.props.invalid : false,
         };
         _this.componentRef = null;
         return _this;
@@ -84,16 +92,17 @@ var SelectWithTemplate = /** @class */ (function (_super) {
         // needs to be passed to prime react component
         // or it will not be displayed at all, even if returned by itemTemplate
         var fakePlaceholderWithNonBreakingSpace = ' ';
-        return (React.createElement(dropdown_1.Dropdown, { value: valueInternal, options: optionsInternal, onChange: function (e) {
-                onChange(e.value == null ? null : e.value.original);
-            }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
-                _this.setState({ loading: true });
-                getItems(searchString).then(function (_options) {
-                    _this.setState({ options: _options, loading: false });
-                });
-            }, zIndex: zIndex, style: width === '100%' ? { display: 'flex', width: '100%' } : {}, ref: function (componentRef) {
-                _this.componentRef = componentRef;
-            } }));
+        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(dropdown_1.Dropdown, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', value: valueInternal, options: optionsInternal, onChange: function (e) {
+                    onChange(e.value == null ? null : e.value.original);
+                }, placeholder: fakePlaceholderWithNonBreakingSpace, filterPlaceholder: filterPlaceholder, filter: true, filterBy: labelKey, showClear: !required, emptyFilterMessage: emptyFilterMessage, valueTemplate: function (option) { return React.createElement(ItemTemplate, { option: option == null ? null : option.original }); }, itemTemplate: function (option) { return React.createElement(ItemTemplate, { option: option.original }); }, disabled: disabled, required: required, autoFocus: autoFocus, appendTo: document.body, loading: loading, onFilterInputChange: function (searchString) {
+                    _this.setState({ loading: true });
+                    getItems(searchString).then(function (_options) {
+                        _this.setState({ options: _options, loading: false });
+                    });
+                }, zIndex: zIndex, style: width === '100%' ? { display: 'flex', width: '100%' } : {}, ref: function (componentRef) {
+                    _this.componentRef = componentRef;
+                } })));
     };
     return SelectWithTemplate;
 }(React.Component));

package/react/components/TimePicker.d.ts

@@ -2,10 +2,20 @@ import * as React from 'react';
 interface IProps {
     value: string;
     onChange(valueNext: string): void;
-    required?: boolean;
+    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;
     render(): JSX.Element;
 }
 export {};

package/react/components/TimePicker.js

@@ -33,18 +33,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimePicker = void 0;
 var React = __importStar(require("react"));
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
+var Form_1 = require("./Form");
 var TimePicker = /** @class */ (function (_super) {
     __extends(TimePicker, _super);
     function TimePicker() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.htmlId = (0, react_id_generator_1.default)();
+        return _this;
     }
     TimePicker.prototype.render = function () {
         var _this = this;
-        return (React.createElement("div", { className: "sd-input sd-input--no-label sd-input--no-margin", style: { display: 'inline-flex' } },
-            React.createElement("input", { type: "time", className: "sd-input__input", value: this.props.value, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
+        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) {
                     _this.props.onChange(event.target.value);
                 } })));
     };

package/react/components/TreeSelect.d.ts

@@ -0,0 +1,82 @@
+import * as React from "react";
+interface IState<T> {
+    value: Array<T>;
+    options: Array<ITreeNode<T>>;
+    firstBranchOptions: Array<any>;
+    openDropdown: boolean;
+    activeTree: Array<any>;
+    filterArr: Array<any>;
+    searchFieldValue: string;
+    buttonTree: Array<any>;
+    buttonValue: any;
+    buttonMouseEvent: boolean;
+    loading: boolean;
+}
+interface IPropsBase<T> {
+    value?: Array<T>;
+    selectBranchWithChildren?: boolean;
+    readOnly?: boolean;
+    width?: string;
+    allowMultiple?: boolean;
+    loading?: boolean;
+    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;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T, Wrapper: any): React.ComponentType<T> | JSX.Element;
+    onChange(e: Array<T>): void;
+}
+interface IPropsSync<T> extends IPropsBase<T> {
+    kind: 'synchronous';
+    getOptions(): Array<ITreeNode<T>>;
+}
+interface IPropsAsync<T> extends IPropsBase<T> {
+    kind: 'asynchronous';
+    getOptions?(): Array<ITreeNode<T>>;
+    searchOptions(term: string, callback?: (options: Array<ITreeNode<T>>) => void): any;
+}
+declare type IProps<T> = IPropsSync<T> | IPropsAsync<T>;
+export interface ITreeNode<T> {
+    value: T;
+    children?: Array<ITreeNode<T>>;
+}
+export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
+    private dropdownRef;
+    private openDropdownRef;
+    private htmlId;
+    private popperInstance;
+    constructor(props: IProps<T>);
+    componentDidMount: () => void;
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void;
+    toggleMenu(): void;
+    removeClick(i: number): void;
+    handleMultiLevel(item: ITreeNode<T>): void;
+    handleButton(item: ITreeNode<T>): void;
+    handleValue(event: React.MouseEvent<HTMLLIElement, MouseEvent>, item: ITreeNode<T>): void;
+    handleBranchValue(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, item: ITreeNode<T>): void;
+    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeNode<T>): void;
+    backButton: () => false | undefined;
+    backButtonValue: () => void;
+    recursion(arr: Array<ITreeNode<T>>): void;
+    filteredItem(arr: Array<ITreeNode<T>>): JSX.Element | JSX.Element[] | undefined;
+    banchButton(): JSX.Element;
+    private debounceFn;
+    private ICancelFn;
+    handleDebounce(): void;
+    render(): JSX.Element;
+}
+export {};