superdesk-ui-framework 3.0.55 → 3.0.57

package/app/styles/_sd-tag-input.scss

@@ -371,7 +371,7 @@ tags-input,
             outline: none;
         }
 
-        &:hover {
+        &:hover:not([disabled]) {
             background-color: var(--sd-colour-interactive--alpha-10) !important;
         }
     }
@@ -384,15 +384,20 @@ tags-input,
         justify-content: center;
         align-items: center;
         border-radius: 99px;
-        white-space: nowrap;
+        white-space: normal;
 
         &[style*="background-color"] {
             padding-inline: 8px;
         }
     }
 
+    .suggestion-item--selected {
+        opacity: 0.5;
+    }
+
     .suggestion-item--disabled {
         opacity: 0.5;
+        cursor: default;
     }
 
     .suggestion-item--nothing-found {

package/app-typescript/components/Button.tsx

@@ -42,7 +42,7 @@ export class Button extends React.PureComponent<IPropsButton> {
                 id={this.props.id}
                 className={classes}
                 tabIndex={0}
-                disabled={this.props.isLoading}
+                disabled={this.props.disabled || this.props.isLoading}
                 data-loading={this.props.isLoading}
                 onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
                 aria-label={this.props.iconOnly ? this.props.text : ''}

package/app-typescript/components/RadioButtonGroup.tsx

@@ -70,8 +70,12 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                     disabled={item.disabled}
                                     required={this.props.required}
                                     checked={item.value === this.props.value} />
-                                <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}
-                                    aria-label={item.labelHidden ? item.label : undefined}>
+                                <label
+                                    className="sd-check-button__text-label"
+                                    htmlFor={this.htmlId + index}
+                                    aria-label={item.labelHidden ? item.label : undefined}
+                                    data-test-id="item"
+                                >
 
                                     { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
                                     { !item.labelHidden || !item.icon ?

package/app-typescript/components/TreeMenu.tsx

@@ -0,0 +1,460 @@
+import * as React from "react";
+import { Icon } from "./Icon";
+import { createPopper, Instance } from '@popperjs/core';
+import {getPrefixedItemId, TreeSelectItem} from './TreeSelect/TreeSelectItem';
+import {keyboardNavigation} from './TreeSelect/KeyboardNavigation';
+import {createPortal} from 'react-dom';
+
+interface IState<T> {
+    options: Array<ITreeMenuNode<T>>;
+    openDropdown: boolean;
+    activeTree: Array<Array<ITreeMenuNode<T>>>;
+    buttonTree: Array<ITreeMenuNode<T>>;
+    buttonValue: ITreeMenuNode<T> | null;
+    filterArr: Array<ITreeMenuNode<T>>;
+    searchFieldValue: string;
+    firstBranchOptions: Array<ITreeMenuNode<T>>;
+
+    // array of classNames; used to focus an item after returning for another level
+    buttonTarget: Array<string>;
+}
+
+interface IProps<T> {
+    zIndex?: number;
+    searchPlaceholder?: string;
+    singleLevelSearch?: boolean;
+    getOptions?(): Array<ITreeMenuNode<T>>;
+    getLabel(item: T): string;
+    getId(item: T): string;
+    getBackgroundColor?(item: T): string;
+    getBorderColor?(item: T): string;
+    optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
+    children: (toggle: (event: React.SyntheticEvent) => void) => JSX.Element;
+}
+
+interface IParent<T> {
+    value: T;
+    children: Array<ITreeMenuNode<T>>;
+}
+
+interface IChildren<T> {
+    value: T;
+    disabled?: boolean;
+    onSelect(): void;
+}
+
+export type ITreeMenuNode<T> = IParent<T> | IChildren<T>;
+
+function nodeHasChildren<T>(item: IParent<T> | IChildren<T>): item is IParent<T> {
+    return item['children'] != null;
+}
+
+function nodeCanBeSelected<T>(item: IParent<T> | IChildren<T>): item is IChildren<T> {
+    return item['onSelect'] != null;
+}
+
+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 inputRef: React.RefObject<HTMLInputElement>;
+    private popperInstance: Instance | null;
+
+    constructor(props: IProps<T>) {
+        super(props);
+        this.state = {
+            options: this.props.getOptions ? this.props.getOptions() : [],
+            firstBranchOptions: this.props.getOptions ? this.props.getOptions() : [],
+            searchFieldValue: '',
+            activeTree: [],
+            buttonTree: [],
+            buttonTarget: [],
+            filterArr: [],
+            buttonValue: null,
+            openDropdown: false,
+        };
+
+        this.handleMultiLevel = this.handleMultiLevel.bind(this);
+        this.backButton = this.backButton.bind(this);
+        this.handleButton = this.handleButton.bind(this);
+        this.handleTree = this.handleTree.bind(this);
+        this.toggleMenu = this.toggleMenu.bind(this);
+        this.onMouseDown = this.onMouseDown.bind(this);
+        this.onKeyDown = this.onKeyDown.bind(this);
+        this.toggle = this.toggle.bind(this);
+
+        this.dropdownRef = React.createRef();
+        this.ref = React.createRef();
+        this.openDropdownRef = React.createRef();
+        this.treeSelectRef = React.createRef();
+        this.inputRef = React.createRef();
+
+        this.popperInstance = null;
+    }
+
+    inputFocus = () => {
+        this.inputRef.current?.focus();
+    }
+
+    listNavigation = () => {
+        const element: HTMLElement = document.querySelector('.suggestion-item--btn:not([disabled])') as HTMLElement;
+        element.focus();
+    }
+
+    onMouseDown = (event: MouseEvent) => {
+        if (
+            (this.dropdownRef.current?.contains(event.target as HTMLElement) !== true)
+            && (this.treeSelectRef.current?.contains(event.target as HTMLElement) !== true)
+            && this.state.openDropdown
+        ) {
+            this.setState({openDropdown: false});
+        }
+    }
+
+    onKeyDown = (e: KeyboardEvent) => {
+        if (this.state.openDropdown && this.ref.current) {
+            keyboardNavigation(
+                e,
+                this.ref.current,
+                this.inputFocus,
+            );
+
+            if (e.key === 'Backspace' && this.state.activeTree.length > 0) {
+                this.backButton();
+
+                const lastElement = this.state.buttonTarget.pop();
+
+                if (lastElement != null) {
+                    const className = getPrefixedItemId(lastElement);
+                    const element: HTMLElement = document.getElementsByClassName(className)[0] as HTMLElement;
+                    element.focus();
+                }
+            }
+        }
+    }
+
+    componentDidMount = () => {
+        this.recursion(this.state.options);
+
+        document.addEventListener("mousedown", this.onMouseDown);
+        document.addEventListener("keydown", this.onKeyDown);
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener("mousedown", this.onMouseDown);
+        document.removeEventListener("keydown", this.onKeyDown);
+    }
+
+    componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
+        if (prevState.openDropdown !== this.state.openDropdown) {
+            this.toggleMenu();
+        }
+
+        if (
+            (prevState.activeTree !== this.state.activeTree)
+            || (prevState.filterArr !== this.state.filterArr)
+            || (prevState.options !== this.state.options)
+        ) {
+            this.popperInstance?.update();
+        }
+    }
+
+    toggleMenu() {
+        if (this.state.openDropdown) {
+            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],
+                            },
+                        },
+                    ],
+                });
+            }
+
+            this.inputRef.current?.addEventListener('keydown', (e: KeyboardEvent) => {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    setTimeout(() => {
+                        this.listNavigation();
+                    });
+                }
+            });
+
+            if (this.inputRef.current) {
+                this.inputFocus();
+            } else {
+                const element: HTMLElement
+                    = document.querySelector('.suggestion-item--btn:not([disabled])') as HTMLElement;
+                element.focus();
+            }
+        } else {
+            this.openDropdownRef.current?.focus();
+        }
+    }
+
+    toggle(event) {
+        event.stopPropagation();
+
+        this.setState({
+            openDropdown: !this.state.openDropdown,
+        });
+    }
+
+    handleMultiLevel(item: ITreeMenuNode<T>) {
+        if (nodeHasChildren(item)) {
+            this.setState({
+                activeTree: [...this.state.activeTree, this.state.options],
+                options: item.children,
+            });
+        }
+    }
+
+    handleButton(item: ITreeMenuNode<T>) {
+        let buttonTreeNext: Array<ITreeMenuNode<T>> = this.state.buttonTree;
+
+        if (this.state.buttonValue != null) {
+            buttonTreeNext = buttonTreeNext.concat(this.state.buttonValue);
+        }
+
+        this.setState({
+            buttonTree: buttonTreeNext,
+            buttonValue: item,
+        });
+    }
+
+    handleTree(event: React.MouseEvent<HTMLLIElement, MouseEvent>, option: ITreeMenuNode<T>) {
+        if (nodeHasChildren(option)) {
+            this.handleButton(option);
+            this.handleMultiLevel(option);
+        } else {
+            this.setState({
+                openDropdown: false,
+                options: this.state.firstBranchOptions,
+                activeTree: [],
+                buttonTarget: [],
+            });
+        }
+
+        setTimeout(() => {
+            const element: HTMLElement
+                = document.querySelectorAll('.suggestion-item--btn:not([disabled])')[0] as HTMLButtonElement;
+            element.focus();
+        });
+    }
+
+    backButton(): void {
+        const items = this.state.activeTree.pop();
+
+        if (items != null) {
+            this.setState({
+                options: items,
+            });
+        }
+
+        const item = this.state.buttonTree.pop();
+
+        if (item != null) {
+            this.setState({
+                buttonValue: item,
+            });
+        }
+    }
+
+    recursion(arr: Array<ITreeMenuNode<T>>) {
+        arr.map((item) => {
+            this.state.filterArr.push(item);
+
+            if (nodeHasChildren(item)) {
+                this.recursion(item.children);
+            }
+        });
+    }
+
+    filteredItem(arr: Array<ITreeMenuNode<T>>) {
+        let filteredArr = arr.filter((item) => {
+            if (this.state.searchFieldValue) {
+                if (this.props.getLabel(item.value)
+                    .toLowerCase()
+                    .includes(this.state.searchFieldValue.toLowerCase())
+                ) {
+                    return item.value;
+                } else {
+                    return;
+                }
+            } else {
+                return item.value;
+            }
+        });
+
+        if (filteredArr.length === 0) {
+            return <li className="suggestion-item--nothing-found">Nothing found</li>;
+        } else {
+            return filteredArr.map((option, i) => {
+                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}
+                        disabledItem={disabledItem(option)}
+                        getBorderColor={this.props.getBorderColor}
+                        getBackgroundColor={this.props.getBackgroundColor}
+                        getId={this.props.getId}
+                        optionTemplate={this.props.optionTemplate}
+                        getLabel={this.props.getLabel}
+                        onClick={() => {
+                            onSelect(option);
+
+                            this.setState({
+                                searchFieldValue: '',
+                            });
+                        }}
+                    />
+                );
+            });
+        }
+    }
+
+    render() {
+        return (
+            <div ref={this.treeSelectRef}>
+                <div ref={this.openDropdownRef}>
+                    {this.props.children(this.toggle)}
+                </div>
+
+                {createPortal(
+                    this.state.openDropdown
+                        && <div id='TREEMENU_DROPDOWN'>
+                            <div
+                                ref={this.dropdownRef}
+                                className="autocomplete autocomplete--multi-select autocomplete--fixed-width"
+                                style={{
+                                    zIndex: this.props.zIndex,
+                                }}
+                            >
+                                <div className='autocomplete__header'>
+                                    <div
+                                        className="autocomplete__icon"
+                                        onClick={() => {
+                                            this.backButton();
+                                        }}
+                                    >
+                                        <Icon name="search" className="search"></Icon>
+                                    </div>
+
+                                    <div className='autocomplete__filter'>
+                                        <input
+                                            className="autocomplete__input"
+                                            type="text"
+                                            placeholder={this.props.searchPlaceholder}
+                                            ref={this.inputRef}
+                                            value={this.state.searchFieldValue}
+                                            onChange={(event) => {
+                                                this.setState({searchFieldValue: event.target.value});
+                                                this.popperInstance?.update();
+                                            }}
+                                        />
+                                    </div>
+                                </div>
+
+                                {(this.state.activeTree.length > 0 && this.state.buttonValue != null)
+                                    && <div className='autocomplete__category-header'>
+                                        <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>
+                        </div>,
+                    document.body,
+                )}
+            </div>
+        );
+    }
+}

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

@@ -0,0 +1,63 @@
+const getButtonList = (menuRef: HTMLUListElement | undefined): Array<HTMLButtonElement> => {
+    let list = Array.from(menuRef?.querySelectorAll(':scope > li') ?? []);
+    let buttons: Array<HTMLButtonElement> = [];
+
+    if (list != null) {
+        [...list].filter((item) => {
+            if (item.querySelectorAll('.suggestion-item--btn:not([disabled])').length > 0) {
+                buttons.push(item.querySelector('.suggestion-item--btn') as HTMLButtonElement);
+            }
+        });
+    }
+
+    return buttons;
+};
+
+const nextElement = (
+    buttons: Array<HTMLButtonElement>,
+    currentIndex: number,
+    e: KeyboardEvent,
+) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (buttons[currentIndex + 1]) {
+        buttons[currentIndex + 1].focus();
+    } else {
+        buttons[0].focus();
+    }
+};
+
+const prevElement = (
+    buttons: Array<HTMLButtonElement>,
+    currentIndex: number,
+    e: KeyboardEvent,
+    ref: (() => void) | undefined,
+) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (buttons[currentIndex - 1]) {
+        buttons[currentIndex - 1].focus();
+    } else if (currentIndex === 0) {
+        if (ref) {
+            ref();
+        }
+    } else {
+        buttons[buttons.length - 1].focus();
+    }
+};
+
+export const keyboardNavigation = (e?: KeyboardEvent, menuRef?: HTMLUListElement, ref?: () => void) => {
+    let buttons = getButtonList(menuRef);
+    const currentElement = document.activeElement;
+    const currentIndex = Array.prototype.indexOf.call(buttons, currentElement);
+
+    if (document.activeElement != null && buttons.includes(document.activeElement as HTMLButtonElement)) {
+        if (e?.key === 'ArrowDown') {
+            nextElement(buttons, currentIndex, e);
+        } else if (e?.key === 'ArrowUp') {
+            prevElement(buttons, currentIndex, e, ref);
+        }
+    }
+};

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

@@ -11,6 +11,7 @@ import {IInputWrapper} from '../Form/InputWrapper';
 import {SelectPreview} from '../SelectPreview';
 import {TreeSelectPill} from './TreeSelectPill';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelectItem';
+import {keyboardNavigation} from './KeyboardNavigation';
 import {createPortal} from 'react-dom';
 
 interface IState<T> {
@@ -509,7 +510,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 ? this.props.optionTemplate(item.value)
                                 : (
                                     <span
-                                        className={selectedItem ? 'suggestion-item--disabled' : undefined}
+                                        className={selectedItem ? 'suggestion-item--selected' : undefined}
                                     >
                                         {this.props.getLabel(item.value)}
                                     </span>
@@ -910,67 +911,3 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         );
     }
 }
-
-const getButtonList = (menuRef: HTMLUListElement | undefined): Array<HTMLButtonElement> => {
-    let list = Array.from(menuRef?.querySelectorAll(':scope > li') ?? []);
-    let buttons: Array<HTMLButtonElement> = [];
-
-    if (list != null) {
-        [...list].filter((item) => {
-            if (item.querySelectorAll('.suggestion-item--btn').length > 0) {
-                buttons.push(item.querySelector('.suggestion-item--btn') as HTMLButtonElement);
-            }
-        });
-    }
-
-    return buttons;
-};
-
-const keyboardNavigation = (e?: KeyboardEvent, menuRef?: HTMLUListElement, ref?: () => void) => {
-    let buttons = getButtonList(menuRef);
-    const currentElement = document.activeElement;
-    const currentIndex = Array.prototype.indexOf.call(buttons, currentElement);
-
-    if (document.activeElement != null && buttons.includes(document.activeElement as HTMLButtonElement)) {
-        if (e?.key === 'ArrowDown') {
-            nextElement(buttons, currentIndex, e);
-        } else if (e?.key === 'ArrowUp') {
-            prevElement(buttons, currentIndex, e, ref);
-        }
-    }
-};
-
-const nextElement = (
-    buttons: Array<HTMLButtonElement>,
-    currentIndex: number,
-    e: KeyboardEvent,
-) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (buttons[currentIndex + 1]) {
-        buttons[currentIndex + 1].focus();
-    } else {
-        buttons[0].focus();
-    }
-};
-
-const prevElement = (
-    buttons: Array<HTMLButtonElement>,
-    currentIndex: number,
-    e: KeyboardEvent,
-    ref: (() => void) | undefined,
-) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (buttons[currentIndex - 1]) {
-        buttons[currentIndex - 1].focus();
-    } else if (currentIndex === 0) {
-        if (ref) {
-            ref();
-        }
-    } else {
-        buttons[buttons.length - 1].focus();
-    }
-};