superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/ResizeObserverComponent.tsx

@@ -49,11 +49,7 @@ export class ResizeObserverComponent extends React.PureComponent<IProps, IState>
                     this.el = el;
                 }}
             >
-                {
-                    dimensions === 'not-initialized'
-                        ? null
-                        : this.props.children(dimensions)
-                }
+                {dimensions === 'not-initialized' ? null : this.props.children(dimensions)}
             </div>
         );
     }

package/app-typescript/components/SearchBar.tsx

@@ -40,67 +40,75 @@ export class SearchBar extends React.PureComponent<IProps, IState> {
     }
 
     componentDidMount = () => {
-        document.addEventListener("mousedown", (event) => {
+        document.addEventListener('mousedown', (event) => {
             if (this.inputRef.current && !this.inputRef.current.contains(event.target)) {
                 this.setState({focused: false});
             }
         });
-    }
+    };
 
     render() {
         let classes = classNames('sd-searchbar', {
-            [`sd-searchbar--${this.state.type}`] : this.props.type,
+            [`sd-searchbar--${this.state.type}`]: this.props.type,
             'sd-searchbar--expanded': this.state.type === 'expanded' || this.props.type === undefined,
-            'sd-searchbar--focused' : this.state.focused,
+            'sd-searchbar--focused': this.state.focused,
             'sd-searchbar--boxed': this.state.boxed,
         });
         return (
             <div className={classes} ref={this.inputRef}>
                 {this.props.children}
                 <label className="sd-searchbar__icon"></label>
-                <input id="search-input"
-                ref={(input: any) => (input && this.props.focused) && input.focus()}
-                className="sd-searchbar__input"
-                type="text"
-                placeholder={this.props.placeholder}
-                value={this.state.inputValue}
-                onKeyPress={(event) => {
-                    if (event.key === 'Enter') {
-                        if (this.props.onSubmit) {
-                            this.props.onSubmit(this.state.inputValue);
+                <input
+                    id="search-input"
+                    ref={(input: any) => input && this.props.focused && input.focus()}
+                    className="sd-searchbar__input"
+                    type="text"
+                    placeholder={this.props.placeholder}
+                    value={this.state.inputValue}
+                    onKeyPress={(event) => {
+                        if (event.key === 'Enter') {
+                            if (this.props.onSubmit) {
+                                this.props.onSubmit(this.state.inputValue);
+                            }
+                            this.setState({keyDown: true});
                         }
-                        this.setState({keyDown: true});
-                    }
-                }}
-                onKeyUp={(event) => {
-                    if (event.key === 'Enter') {
-                        this.setState({keyDown: false});
-                    }
-                }}
-                onChange={(event) => this.setState({inputValue: event.target.value})}
-                onFocus={() => this.setState({focused: true})} />
-                {this.state.inputValue &&
-                <button className="sd-searchbar__cancel" onClick={() => {
-                    this.setState({inputValue: ''});
-                    setTimeout(() => {
-                        if (this.props.onSubmit) {
-                            this.props.onSubmit(this.state.inputValue);
+                    }}
+                    onKeyUp={(event) => {
+                        if (event.key === 'Enter') {
+                            this.setState({keyDown: false});
                         }
-                    });
-                }}>
-                    <Icon name='remove-sign' />
-                </button>}
-                {this.state.inputValue &&
-                <button
-                id="sd-searchbar__search-btn"
-                className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
-                onClick={() => {
-                    if (this.props.onSubmit) {
-                        this.props.onSubmit(this.state.inputValue);
-                    }
-                }}>
-                    <Icon name='chevron-right-thin' />
-                </button>}
+                    }}
+                    onChange={(event) => this.setState({inputValue: event.target.value})}
+                    onFocus={() => this.setState({focused: true})}
+                />
+                {this.state.inputValue && (
+                    <button
+                        className="sd-searchbar__cancel"
+                        onClick={() => {
+                            this.setState({inputValue: ''});
+                            setTimeout(() => {
+                                if (this.props.onSubmit) {
+                                    this.props.onSubmit(this.state.inputValue);
+                                }
+                            });
+                        }}
+                    >
+                        <Icon name="remove-sign" />
+                    </button>
+                )}
+                {this.state.inputValue && (
+                    <button
+                        id="sd-searchbar__search-btn"
+                        className={`sd-searchbar__search-btn ${this.state.keyDown ? 'sd-searchbar__search-btn--active' : ''}`}
+                        onClick={() => {
+                            if (this.props.onSubmit) {
+                                this.props.onSubmit(this.state.inputValue);
+                            }
+                        }}
+                    >
+                        <Icon name="chevron-right-thin" />
+                    </button>
+                )}
             </div>
         );
     }

package/app-typescript/components/Select.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import nextId from "react-id-generator";
-import { InputWrapper } from './Form';
+import nextId from 'react-id-generator';
+import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 
 interface ISelect extends IInputWrapper {
@@ -46,9 +46,9 @@ class Select extends React.Component<ISelect> {
                 tabindex={this.props.tabindex}
                 inputWrapper={this.props.inputWrapper}
             >
-                <span className='sd-input__select-caret-wrapper'>
+                <span className="sd-input__select-caret-wrapper">
                     <select
-                        className='sd-input__select'
+                        className="sd-input__select"
                         id={this.htmlId}
                         value={this.props.value}
                         aria-describedby={this.htmlId + 'label'}
@@ -71,10 +71,8 @@ interface IOption {
 
 class Option extends React.PureComponent<IOption> {
     render() {
-        return (
-            <option value={this.props.value}>{this.props.children}</option>
-        );
+        return <option value={this.props.value}>{this.props.children}</option>;
     }
 }
 
-export { Select, Option };
+export {Select, Option};

package/app-typescript/components/SelectGrid.tsx

@@ -1,7 +1,7 @@
-import * as  React from 'react';
-import nextId from "react-id-generator";
-import { OverlayPanel } from '@superdesk/primereact/overlaypanel';
-import { Loader } from "./Loader";
+import * as React from 'react';
+import nextId from 'react-id-generator';
+import {OverlayPanel} from '@superdesk/primereact/overlaypanel';
+import {Loader} from './Loader';
 
 /**
  * @ngdoc react
@@ -18,8 +18,8 @@ export interface IItem {
 interface IProps {
     getItems(searchString: string | null): Promise<Array<IItem>>;
     onChange(value: IItem): void;
-    itemTemplate: React.ComponentType<{ item: IItem | null }>;
-    triggerTemplate: React.ComponentType<{onClick: (e: React.SyntheticEvent) => void; }>;
+    itemTemplate: React.ComponentType<{item: IItem | null}>;
+    triggerTemplate: React.ComponentType<{onClick: (e: React.SyntheticEvent) => void}>;
     label: string;
     filterPlaceholder?: string;
 }
@@ -43,7 +43,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
     constructor(props: IProps) {
         super(props);
 
-        this.state = { items: [], loading: true };
+        this.state = {items: [], loading: true};
 
         this.buttonContainer = React.createRef();
         this.overlayPanel = React.createRef();
@@ -53,7 +53,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
 
     componentDidMount() {
         this.props.getItems(null).then((items) => {
-            this.setState({ items, loading: false });
+            this.setState({items, loading: false});
         });
     }
 
@@ -69,27 +69,29 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
         }
 
         document.addEventListener('keydown', this.handleKeydown);
-        setTimeout(() => { this.searchInput.current?.focus(); });
+        setTimeout(() => {
+            this.searchInput.current?.focus();
+        });
         this.loadItems();
-    }
+    };
 
     search = (event: React.ChangeEvent<HTMLInputElement>) => {
         const searchString: string = event.target.value.toLowerCase();
         this.loadItems(searchString);
-    }
+    };
 
     loadItems = (searchString: string | null = null) => {
-        this.setState({ loading: true });
+        this.setState({loading: true});
         this.props.getItems(searchString).then((items) => {
-            this.setState({ items, loading: false });
+            this.setState({items, loading: false});
         });
-    }
+    };
 
     hidePopupAndRefocus = () => {
         document.removeEventListener('keydown', this.handleKeydown);
         this.overlayPanel.current?.hide();
         this.buttonContainer.current?.querySelector('button')?.focus();
-    }
+    };
 
     select = (item: IItem) => {
         this.props.onChange(item);
@@ -97,34 +99,26 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
 
         // trigger component update
         this.forceUpdate();
-    }
+    };
 
     getItemElement = (index: number): HTMLDivElement | null | undefined => {
         return this.gridContainer.current?.querySelector(`[data-item-index="${index}"]`);
-    }
+    };
 
     handleKeydown = (event: KeyboardEvent) => {
-        const navKeys = [
-            "Enter",
-            "ArrowRight",
-            "ArrowLeft",
-            "ArrowUp",
-            "ArrowDown",
-            "PageDown",
-            "PageUp",
-        ];
+        const navKeys = ['Enter', 'ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'PageDown', 'PageUp'];
         const activeElement = document.activeElement;
 
-        if (event.code === "Escape") {
+        if (event.code === 'Escape') {
             event.preventDefault();
             event.stopPropagation();
 
             this.hidePopupAndRefocus();
         } else if (activeElement === this.searchInput?.current) {
-            if (event.code === "ArrowDown") {
+            if (event.code === 'ArrowDown') {
                 event.preventDefault();
                 this.getItemElement(0)?.focus();
-            } else if (event.code === "Enter" && this.state.items.length === 1) {
+            } else if (event.code === 'Enter' && this.state.items.length === 1) {
                 event.preventDefault();
                 this.select(this.state.items[0]);
             }
@@ -133,25 +127,25 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
 
             event.preventDefault(); // Prevent scrolling, etc.
 
-            if (event.code === "Enter") {
+            if (event.code === 'Enter') {
                 this.select(this.state.items[itemIndex]);
                 return;
-            } else if (event.code === "ArrowRight") {
+            } else if (event.code === 'ArrowRight') {
                 itemIndex += 1;
-            } else if (event.code === "ArrowLeft") {
+            } else if (event.code === 'ArrowLeft') {
                 itemIndex -= 1;
-            } else if (event.code === "ArrowDown") {
+            } else if (event.code === 'ArrowDown') {
                 itemIndex += GRID_COLS;
-            } else if (event.code === "ArrowUp") {
+            } else if (event.code === 'ArrowUp') {
                 if (itemIndex < GRID_COLS) {
                     this.searchInput?.current?.focus();
                     return;
                 }
 
                 itemIndex -= GRID_COLS;
-            } else if (event.code === "PageDown") {
+            } else if (event.code === 'PageDown') {
                 itemIndex += PAGE_SIZE;
-            } else if (event.code === "PageUp") {
+            } else if (event.code === 'PageUp') {
                 itemIndex -= PAGE_SIZE;
             }
 
@@ -163,7 +157,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
 
             this.getItemElement(itemIndex)?.focus();
         }
-    }
+    };
 
     render() {
         const ItemTemplate = this.props.itemTemplate;
@@ -177,9 +171,7 @@ export class SelectGrid extends React.PureComponent<IProps, IState> {
                     aria-label={this.props.label}
                     key={this.props.label}
                 >
-                    <label className="sd-input__label">
-                        {this.props.label}
-                    </label>
+                    <label className="sd-input__label">{this.props.label}</label>
                     <TriggerTemplate onClick={this.mountPopup} />
                 </div>
                 <OverlayPanel

package/app-typescript/components/SelectPreview.tsx

@@ -4,11 +4,15 @@ import {getTextColor} from '../helpers';
 
 interface IProps<T> {
     items: Array<T>;
-    kind: {
-        mode: 'single-select'; getBorderColor?(item: T): string;
-    } | {
-        mode: 'multi-select'; getBackgroundColor?(item: T): string;
-    };
+    kind:
+        | {
+              mode: 'single-select';
+              getBorderColor?(item: T): string;
+          }
+        | {
+              mode: 'multi-select';
+              getBackgroundColor?(item: T): string;
+          };
     getLabel(item: T): string;
     valueTemplate?(item: T, Wrapper?: React.ElementType): React.ComponentType<T> | JSX.Element | undefined;
 }
@@ -19,14 +23,16 @@ export class SelectPreview<T> extends React.Component<IProps<T>> {
             <div className="tags-preview">
                 <ul className="tags-preview__tag-list">
                     {this.props.items.map((item, i: number) => {
-                        const Wrapper: React.ComponentType<{backgroundColor?: string, borderColor?: string}>
-                        = ({backgroundColor, borderColor, children}) => {
+                        const Wrapper: React.ComponentType<{backgroundColor?: string; borderColor?: string}> = ({
+                            backgroundColor,
+                            borderColor,
+                            children,
+                        }) => {
                             let classes = classNames('tags-preview__tag-item', {
                                 'tags-preview__tag-item--single-select': this.props.kind.mode === 'single-select',
-                                'tags-preview__tag-item--border': (
-                                    this.props.kind.mode === 'single-select' && this.props.kind.getBorderColor
-                                    )
-                                    || borderColor,
+                                'tags-preview__tag-item--border':
+                                    (this.props.kind.mode === 'single-select' && this.props.kind.getBorderColor) ||
+                                    borderColor,
                             });
 
                             return (
@@ -37,15 +43,15 @@ export class SelectPreview<T> extends React.Component<IProps<T>> {
                                             return {backgroundColor, borderColor};
                                         } else {
                                             if (
-                                                this.props.kind.mode === 'multi-select'
-                                                && this.props.kind.getBackgroundColor != null
+                                                this.props.kind.mode === 'multi-select' &&
+                                                this.props.kind.getBackgroundColor != null
                                             ) {
                                                 return {
                                                     backgroundColor: this.props.kind.getBackgroundColor(item),
                                                 };
                                             } else if (
-                                                this.props.kind.mode === 'single-select'
-                                                && this.props.kind.getBorderColor != null
+                                                this.props.kind.mode === 'single-select' &&
+                                                this.props.kind.getBorderColor != null
                                             ) {
                                                 return {
                                                     borderLeftColor: this.props.kind.getBorderColor(item),
@@ -63,12 +69,12 @@ export class SelectPreview<T> extends React.Component<IProps<T>> {
                                                 return {color: getTextColor(backgroundColor)};
                                             } else {
                                                 if (
-                                                    this.props.kind.mode === 'multi-select'
-                                                    && this.props.kind.getBackgroundColor != null
+                                                    this.props.kind.mode === 'multi-select' &&
+                                                    this.props.kind.getBackgroundColor != null
                                                 ) {
-                                                    return {color: getTextColor(
-                                                        this.props.kind.getBackgroundColor(item),
-                                                    )};
+                                                    return {
+                                                        color: getTextColor(this.props.kind.getBackgroundColor(item)),
+                                                    };
                                                 } else {
                                                     return undefined;
                                                 }
@@ -83,15 +89,15 @@ export class SelectPreview<T> extends React.Component<IProps<T>> {
 
                         return (
                             <React.Fragment key={i}>
-                                {this.props.valueTemplate
-                                    ? this.props.valueTemplate(item, Wrapper)
-                                    : <Wrapper>
+                                {this.props.valueTemplate ? (
+                                    this.props.valueTemplate(item, Wrapper)
+                                ) : (
+                                    <Wrapper>
                                         <span>{this.props.getLabel(item)}</span>
                                     </Wrapper>
-                                }
+                                )}
                             </React.Fragment>
                         );
-
                     })}
                 </ul>
             </div>

package/app-typescript/components/SelectWithTemplate.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {Dropdown} from '@superdesk/primereact/dropdown';
-import nextId from "react-id-generator";
-import { InputWrapper } from './Form';
+import nextId from 'react-id-generator';
+import {InputWrapper} from './Form';
 import {IInputWrapper} from './Form/InputWrapper';
 
-interface IProps<T>  extends IInputWrapper {
+interface IProps<T> extends IInputWrapper {
     // Don't forget to cancel unfinished requests every the prop is called.
     getItems(searchString: string | null): Promise<Array<T>>;
     value: T;
@@ -82,9 +82,10 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
         }
 
         const optionsInternal = options.map((option) => toInternalStructure(option));
-        const valueInternal = value == null
-            ? null
-            : optionsInternal?.find(({original}) => areEqual(original, value)) ?? toInternalStructure(value);
+        const valueInternal =
+            value == null
+                ? null
+                : (optionsInternal?.find(({original}) => areEqual(original, value)) ?? toInternalStructure(value));
 
         // This is regarding the placeholder for selected value.
         // itemTemplate will be used to render it, but a non-empty value
@@ -122,12 +123,10 @@ export class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>>
                     showClear={!required}
                     emptyFilterMessage={emptyFilterMessage}
                     itemTemplate={(option) => <ItemTemplate option={option?.original ?? null} />}
-                    valueTemplate={(option) => ValueTemplate != null
-                        ? (
+                    valueTemplate={(option) =>
+                        ValueTemplate != null ? (
                             <ValueTemplate option={option?.original ?? null} />
-
-                        )
-                        : (
+                        ) : (
                             <ItemTemplate option={option?.original ?? null} />
                         )
                     }

package/app-typescript/components/ShowPopup.tsx

@@ -1,4 +1,3 @@
-
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 import {createPopper, Instance as PopperInstance, Placement, Modifier} from '@popperjs/core';
@@ -11,6 +10,7 @@ interface IPropsPopupPositioner {
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;
+    'data-test-id'?: string;
 }
 
 export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner> {
@@ -34,8 +34,8 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         }
 
         if (
-            this.props.getReferenceElement().contains(event.target as Node) !== true
-            && this.wrapperEl.contains(event.target as Node) !== true
+            this.props.getReferenceElement().contains(event.target as Node) !== true &&
+            this.wrapperEl.contains(event.target as Node) !== true
         ) {
             this.props.onClose();
         }
@@ -90,17 +90,10 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
              */
             setTimeout(() => {
                 if (this.wrapperEl != null) {
-                    this.popper = createPopper(
-                        this.props.getReferenceElement(),
-                        this.wrapperEl,
-                        {
-                            placement: this.props.placement,
-                            modifiers: [
-                                maxSize,
-                                applyMaxSize,
-                            ],
-                        },
-                    );
+                    this.popper = createPopper(this.props.getReferenceElement(), this.wrapperEl, {
+                        placement: this.props.placement,
+                        modifiers: [maxSize, applyMaxSize],
+                    });
                 }
             }, 50);
         }
@@ -121,26 +114,23 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
     render() {
         return (
             <>
-                {
-                    ReactDOM.createPortal(
-                        (
-                            <div
-                                ref={(el) => {
-                                    this.wrapperEl = el;
-                                }}
-                                style={{
-                                    position: 'absolute',
-                                    left: '-100vw',
-                                    display: 'flex',
-                                    zIndex: this.zIndex,
-                                }}
-                            >
-                                {this.props.children}
-                            </div>
-                        ),
-                        document.body,
-                    )
-            }
+                {ReactDOM.createPortal(
+                    <div
+                        ref={(el) => {
+                            this.wrapperEl = el;
+                        }}
+                        style={{
+                            position: 'absolute',
+                            left: '-100vw',
+                            display: 'flex',
+                            zIndex: this.zIndex,
+                        }}
+                        data-test-id={this.props['data-test-id']}
+                    >
+                        {this.props.children}
+                    </div>,
+                    document.body,
+                )}
             </>
         );
     }
@@ -167,18 +157,14 @@ export function showPopup(
     };
 
     ReactDOM.render(
-        (
-            <PopupPositioner
-                getReferenceElement={() => referenceElement}
-                placement={placement}
-                onClose={closeFn}
-                closeOnHoverEnd={closeOnHoverEnd || false}
-            >
-                <Component
-                    closePopup={closeFn}
-                />
-            </PopupPositioner>
-        ),
+        <PopupPositioner
+            getReferenceElement={() => referenceElement}
+            placement={placement}
+            onClose={closeFn}
+            closeOnHoverEnd={closeOnHoverEnd || false}
+        >
+            <Component closePopup={closeFn} />
+        </PopupPositioner>,
         el,
     );