superdesk-ui-framework 3.0.65 → 3.0.67

package/app-typescript/components/TreeMenu.tsx

@@ -4,6 +4,7 @@ import { createPopper, Instance } from '@popperjs/core';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelect/TreeSelectItem';
 import {keyboardNavigation} from './TreeSelect/KeyboardNavigation';
 import {createPortal} from 'react-dom';
+import {WithPortal} from './WithPortal';
 
 interface IState<T> {
     options: Array<ITreeMenuNode<T>>;
@@ -23,6 +24,7 @@ interface IProps<T> {
     zIndex?: number;
     searchPlaceholder?: string;
     singleLevelSearch?: boolean;
+    'data-test-id'?: string;
     getOptions?(): Array<ITreeMenuNode<T>>;
     getLabel(item: T): string;
     getId(item: T): string;
@@ -57,7 +59,7 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
     private dropdownRef: React.RefObject<HTMLInputElement>;
     private ref: React.RefObject<HTMLUListElement>;
     private openDropdownRef: React.RefObject<HTMLDivElement>;
-    private treeSelectRef: React.RefObject<HTMLDivElement>;
+    private treeMenuRef: React.RefObject<HTMLDivElement>;
     private inputRef: React.RefObject<HTMLInputElement>;
     private popperInstance: Instance | null;
 
@@ -80,14 +82,15 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         this.handleButton = this.handleButton.bind(this);
         this.handleTree = this.handleTree.bind(this);
         this.toggleMenu = this.toggleMenu.bind(this);
+        this.toggle = this.toggle.bind(this);
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
-        this.toggle = this.toggle.bind(this);
+        this.onPressEsc = this.onPressEsc.bind(this);
 
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.openDropdownRef = React.createRef();
-        this.treeSelectRef = React.createRef();
+        this.treeMenuRef = React.createRef();
         this.inputRef = React.createRef();
 
         this.popperInstance = null;
@@ -105,10 +108,13 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
     onMouseDown = (event: MouseEvent) => {
         if (
             (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
-            && (this.treeSelectRef.current?.contains(event.target as HTMLElement) !== true)
+            && (this.treeMenuRef.current?.contains(event.target as HTMLElement) !== true)
             && this.state.openDropdown
         ) {
-            this.setState({openDropdown: false});
+            this.setState({
+                openDropdown: false,
+                searchFieldValue: '',
+            });
         }
     }
 
@@ -134,16 +140,27 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
         }
     }
 
+    onPressEsc = (event: KeyboardEvent) => {
+        if (event.key === 'Escape' && this.state.openDropdown) {
+            this.setState({
+                openDropdown: false,
+                searchFieldValue: '',
+            });
+        }
+    }
+
     componentDidMount = () => {
         this.recursion(this.state.options);
 
         document.addEventListener("mousedown", this.onMouseDown);
         document.addEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keydown", this.onPressEsc);
     }
 
     componentWillUnmount(): void {
         document.removeEventListener("mousedown", this.onMouseDown);
         document.removeEventListener("keydown", this.onKeyDown);
+        document.addEventListener("keydown", this.onPressEsc);
     }
 
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
@@ -165,14 +182,6 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
             if (this.openDropdownRef.current && this.dropdownRef.current) {
                 this.popperInstance = createPopper(this.openDropdownRef.current, this.dropdownRef.current, {
                     placement: 'bottom-start',
-                    modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: [-4, 4],
-                            },
-                        },
-                    ],
                 });
             }
 
@@ -335,125 +344,121 @@ export class TreeMenu<T> extends React.Component<IProps<T>, IState<T>> {
 
     render() {
         return (
-            <div ref={this.treeSelectRef}>
+            <div ref={this.treeMenuRef}>
                 <div ref={this.openDropdownRef}>
                     {this.props.children(this.toggle)}
                 </div>
 
-                {createPortal(
-                    this.state.openDropdown
-                        && <div id='TREEMENU_DROPDOWN'>
+                <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.props.zIndex,
+                        }}
+                    >
+                        <div className='autocomplete__header'>
                             <div
-                                ref={this.dropdownRef}
-                                className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
-                                style={{
-                                    zIndex: this.props.zIndex,
+                                className="autocomplete__icon"
+                                onClick={() => {
+                                    this.backButton();
                                 }}
                             >
-                                <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>
+                                <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'>
+                                <div
+                                    className="autocomplete__icon"
+                                    onClick={() => {
+                                        this.backButton();
+                                    }}
+                                >
+                                    <Icon name="arrow-left" className="arrow-left"></Icon>
                                 </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>
-                                        </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"
-                                        >
-                                            {this.state.options.map((option, i: React.Key | undefined) => {
-                                                const onSelect = (item) => {
-                                                    if (nodeCanBeSelected(item)) {
-                                                        return item.onSelect;
-                                                    }
-                                                };
-
-                                                const disabledItem = (item) => {
-                                                    if (nodeCanBeSelected(item)) {
-                                                        return item.disabled;
-                                                    }
-                                                };
-
-                                                return (
-                                                    <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>
-                                }
+                                <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>
-                        </div>,
-                    document.body,
-                )}
+                        }
+
+                        {this.state.searchFieldValue === '' ?
+                            this.props.getOptions ?
+                                <ul
+                                    ref={this.ref}
+                                    className="suggestion-list suggestion-list--multi-select"
+                                >
+                                    {this.state.options.map((option, i: React.Key | undefined) => {
+                                        const onSelect = (item) => {
+                                            if (nodeCanBeSelected(item)) {
+                                                return item.onSelect;
+                                            }
+                                        };
+
+                                        const disabledItem = (item) => {
+                                            if (nodeCanBeSelected(item)) {
+                                                return item.disabled;
+                                            }
+                                        };
+
+                                        return (
+                                            <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>
+                        }
+                    </div>
+                </WithPortal>
             </div>
         );
     }