superdesk-ui-framework 3.0.65 → 3.0.67

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

@@ -12,7 +12,7 @@ import {SelectPreview} from '../SelectPreview';
 import {TreeSelectPill} from './TreeSelectPill';
 import {getPrefixedItemId, TreeSelectItem} from './TreeSelectItem';
 import {keyboardNavigation} from './KeyboardNavigation';
-import {createPortal} from 'react-dom';
+import {WithPortal} from '../WithPortal';
 
 interface IState<T> {
     value: Array<T>;
@@ -35,7 +35,7 @@ interface IPropsBase<T> extends IInputWrapper {
     value?: Array<T>;
     selectBranchWithChildren?: boolean;
     readOnly?: boolean;
-    popoverWidth?: 'medium' | 'match-input';
+    width?: 'medium' | 'match-input';
     inputWidth?: '100%';
     allowMultiple?: boolean;
     loading?: boolean;
@@ -43,6 +43,7 @@ interface IPropsBase<T> extends IInputWrapper {
     placeholder?: string;
     searchPlaceholder?: string;
     zIndex?: number;
+    'data-test-id'?: string;
     getLabel(item: T): string;
     getId(item: T): string;
     getBackgroundColor?(item: T): string;
@@ -50,7 +51,6 @@ interface IPropsBase<T> extends IInputWrapper {
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
     valueTemplate?(item: T, Wrapper: React.ElementType): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
-    'data-test-id'?: string;
 }
 
 interface IPropsSync<T> extends IPropsBase<T> {
@@ -111,6 +111,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.toggleMenu = this.toggleMenu.bind(this);
         this.onMouseDown = this.onMouseDown.bind(this);
         this.onKeyDown = this.onKeyDown.bind(this);
+        this.onPressEsc = this.onPressEsc.bind(this);
+
         this.dropdownRef = React.createRef();
         this.ref = React.createRef();
         this.inputRef = React.createRef();
@@ -139,7 +141,10 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             && (this.treeSelectRef.current?.contains(event.target as HTMLElement) !== true)
             && this.state.openDropdown
         ) {
-            this.setState({openDropdown: false});
+            this.setState({
+                openDropdown: false,
+                searchFieldValue: '',
+            });
         }
     }
 
@@ -165,16 +170,27 @@ export class TreeSelect<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 {
@@ -203,17 +219,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
     toggleMenu() {
         if (this.state.openDropdown) {
-            if (this.openDropdownRef.current && this.dropdownRef.current) {
-                this.popperInstance = createPopper(this.openDropdownRef.current, this.dropdownRef.current, {
+            if (this.treeSelectRef.current && this.dropdownRef.current) {
+                this.popperInstance = createPopper(this.treeSelectRef.current, this.dropdownRef.current, {
                     placement: 'bottom-start',
-                    modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: [-4, 4],
-                            },
-                        },
-                    ],
                 });
             }
 
@@ -632,7 +640,10 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                 data-test-id={this.props['data-test-id']}
             >
                 <div
-                    className={`tags-input sd-input__input tags-input--${this.props.allowMultiple ? 'multi-select' : 'single-select'}`}
+                    className={`
+                        tags-input sd-input__input
+                        tags-input--${this.props.allowMultiple ? 'multi-select' : 'single-select'}`
+                    }
                     ref={this.treeSelectRef}
                     data-test-id={this.props.allowMultiple ? undefined : 'open-popover'}
                 >
@@ -641,12 +652,18 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                             {this.props.readOnly
                                 || <button
                                     ref={this.openDropdownRef}
-                                    className={`tags-input__add-button ${this.props.disabled ? 'tags-input__add-button--disabled' : ''}`}
+                                    className={`
+                                        tags-input__add-button
+                                        ${this.props.disabled ? 'tags-input__add-button--disabled' : ''}`
+                                    }
                                     onClick={(e) => {
                                         e.stopPropagation();
 
                                         if (!this.props.disabled) {
-                                            this.setState({openDropdown: !this.state.openDropdown});
+                                            this.setState({
+                                                openDropdown: !this.state.openDropdown,
+                                                searchFieldValue: '',
+                                            });
                                         }
                                     }}
                                     data-test-id="open-popover"
@@ -760,7 +777,10 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
                                             {
                                                 (this.props.readOnly !== true && this.props.required !== true) && (
-                                                    <span className="tags-input__remove-button" data-test-id="clear-value">
+                                                    <span
+                                                        className="tags-input__remove-button"
+                                                        data-test-id="clear-value"
+                                                    >
                                                         <Icon name='remove-sign'></Icon>
                                                     </span>
                                                 )
@@ -784,136 +804,132 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                     }
                 </div>
 
-                {createPortal(
-                    this.state.openDropdown
-                        && <div data-test-id="tree-select-popover">
+                <WithPortal active={this.state.openDropdown} data-test-id="tree-select-popover">
+                    <div
+                        className={
+                            "autocomplete autocomplete--multi-select"
+                            + (this.props.width === 'medium' ? ' autocomplete--fixed-width' : '')
+                        }
+                        style={{
+                            zIndex: this.props.zIndex,
+                            width: this.treeSelectRef.current?.offsetWidth,
+                        }}
+                        ref={this.dropdownRef}
+                    >
+                        <div className='autocomplete__header'>
                             <div
-                                className={
-                                    "autocomplete autocomplete--multi-select"
-                                    + (this.props.popoverWidth === 'medium' ? ' autocomplete--fixed-width' : '')
-                                }
-                                style={{
-                                    zIndex: this.props.zIndex,
-                                    width: this.treeSelectRef.current?.offsetWidth,
+                                className="autocomplete__icon"
+                                onClick={() => {
+                                    this.backButton();
                                 }}
-                                ref={this.dropdownRef}
                             >
-                                <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) => {
-                                                if (this.props.kind === 'synchronous') {
-                                                    this.setState({searchFieldValue: event.target.value});
-                                                    this.popperInstance?.update();
-                                                } else if (this.props.kind === 'asynchronous') {
-                                                    if (this.ICancelFn) {
-                                                        this.ICancelFn();
-                                                    }
-
-                                                    this.setState({searchFieldValue: event.target.value, options: []});
-                                                    this.popperInstance?.update();
-                                                    this.debounceFn();
-                                                } else {
-                                                    return;
-                                                }
-                                            }}
-                                            data-test-id="filter-input"
-                                        />
-                                    </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) => {
+                                        if (this.props.kind === 'synchronous') {
+                                            this.setState({searchFieldValue: event.target.value});
+                                            this.popperInstance?.update();
+                                        } else if (this.props.kind === 'asynchronous') {
+                                            if (this.ICancelFn) {
+                                                this.ICancelFn();
+                                            }
+
+                                            this.setState({searchFieldValue: event.target.value, options: []});
+                                            this.popperInstance?.update();
+                                            this.debounceFn();
+                                        } else {
+                                            return;
+                                        }
+                                    }}
+                                    data-test-id="filter-input"
+                                />
+                            </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 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>
 
-                                            {this.props.selectBranchWithChildren
-                                                && this.branchButton(this.state.buttonValue)
-                                            }
-                                        </div>
-                                    </div>
-                                }
-
-                                {this.state.loading
-                                    ? <ul className="suggestion-list--loader"><Loader overlay={true}></Loader></ul>
-                                    : this.state.searchFieldValue === ''
-                                        ? this.props.getOptions
-                                            ? <ul
-                                                className="suggestion-list suggestion-list--multi-select"
-                                                ref={this.ref}
-                                                data-test-id="options"
-                                            >
-                                                {this.state.options.map((option, i: React.Key | undefined) => {
-                                                    let selectedItem = this.state.value.some((obj) =>
-                                                        this.props.getId(obj) === this.props.getId(option.value),
-                                                    );
-
-                                                    return (
-                                                        <TreeSelectItem
-                                                            key={i}
-                                                            option={option}
-                                                            handleTree={this.handleTree}
-                                                            selectedItem={selectedItem}
-                                                            allowMultiple={this.props.allowMultiple}
-                                                            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>
-                                }
+                                    {this.props.selectBranchWithChildren
+                                        && this.branchButton(this.state.buttonValue)
+                                    }
+                                </div>
                             </div>
-                        </div>,
-                    document.body,
-                )}
+                        }
+
+                        {this.state.loading
+                            ? <ul className="suggestion-list--loader"><Loader overlay={true}></Loader></ul>
+                            : this.state.searchFieldValue === ''
+                                ? this.props.getOptions
+                                    ? <ul
+                                        className="suggestion-list suggestion-list--multi-select"
+                                        ref={this.ref}
+                                        data-test-id="options"
+                                    >
+                                        {this.state.options.map((option, i: React.Key | undefined) => {
+                                            let selectedItem = this.state.value.some((obj) =>
+                                                this.props.getId(obj) === this.props.getId(option.value),
+                                            );
+
+                                            return (
+                                                <TreeSelectItem
+                                                    key={i}
+                                                    option={option}
+                                                    handleTree={this.handleTree}
+                                                    selectedItem={selectedItem}
+                                                    allowMultiple={this.props.allowMultiple}
+                                                    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>
             </InputWrapper>
         );
     }

package/app-typescript/components/WithPortal.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import {createPortal} from 'react-dom';
+
+interface IProps {
+    active: boolean;
+    'data-test-id'?: string;
+}
+
+export function findParent(
+    element: HTMLElement | null,
+) {
+    let dataTheme = element;
+
+    while (dataTheme != null && dataTheme?.getAttribute('data-theme') == null) {
+        dataTheme = dataTheme.parentElement ?? null;
+    }
+
+    return dataTheme;
+}
+
+export class WithPortal extends React.Component<IProps> {
+    private ref: React.RefObject<HTMLDivElement>;
+    private dataTheme: string | undefined;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.ref = React.createRef();
+    }
+
+    componentDidMount(): void {
+        this.dataTheme = findParent(this.ref.current)?.getAttribute('data-theme') ?? undefined;
+    }
+
+    render() {
+        return (
+            <div ref={this.ref}>
+                {this.props.active && (
+                    createPortal(
+                        <div data-theme={this.dataTheme} data-test-id={this.props['data-test-id']}>
+                            {this.props.children}
+                        </div>,
+                        document.body,
+                    )
+                )}
+            </div>
+        );
+    }
+}

package/app-typescript/components/avatar/avatar-image.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {IPropsBase} from './interfaces';
+// tslint:disable-next-line:max-line-length
 
 interface IPropsImageAvatar extends IPropsBase {
     imageUrl?: string | null; // defaults to a placeholder image
@@ -24,6 +25,7 @@ export class AvatarContentImage extends React.PureComponent<IPropsImageAvatar> {
                 >
                     <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <circle cx="100" cy="100" r="100" fill="white" fillOpacity="0.01"/>
+                        {/* tslint:disable-next-line:max-line-length */}
                         <path fillRule="evenodd" clipRule="evenodd" d="M40 153V145.384C40 141.557 41.16 137.981 43.16 135C49.14 126.057 66.24 119.711 77.14 118C82.74 117.115 90.16 116.538 100 116.538C109.84 116.538 117.26 117.115 122.86 118C133.76 119.711 150.86 126.057 156.84 135C158.84 137.981 160 141.557 160 145.384V153C150 165 130 180 100 180C70 180 50 165 40 153ZM100 30C122.08 30 140 47.2307 140 68.4614C140 89.6922 122.08 106.923 100 106.923C77.92 106.923 60 89.6922 60 68.4614C60 47.2307 77.92 30 100 30Z" fill="var(--sd-colour-avatar-dummy)" fillOpacity="1"/>
                     </svg>
                 </span>);

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

@@ -46,7 +46,8 @@ export class Avatar extends React.PureComponent<IPropsAvatar> {
             customContent,
         } = this.props;
 
-        const tooltipCombined = [displayName, this.props.tooltip].filter((str) => (str ?? '').trim().length > 0).join('\n');
+        const tooltipCombined = [displayName, this.props.tooltip]
+            .filter((str) => (str ?? '').trim().length > 0).join('\n');
 
         return (
             <AvatarWrapper