superdesk-ui-framework 4.0.46 → 4.0.48

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

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { Icon } from "../Icon";
+import * as React from 'react';
+import {Icon} from '../Icon';
 import {getTextColor} from '../../helpers';
 import {ITreeNode} from './TreeSelect';
 
@@ -27,8 +27,8 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
     render() {
         return (
             <li
-                className='suggestion-item suggestion-item--multi-select'
-                role='none'
+                className="suggestion-item suggestion-item--multi-select"
+                role="none"
                 onClick={(event) => {
                     if (!this.props.disabledItem) {
                         this.props.onClick?.();
@@ -41,8 +41,8 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                 <button
                     // the className is generated in order to focus the element later
                     className={
-                        `suggestion-item--btn ${getPrefixedItemId(this.props.getId(this.props.option.value))}`
-                        + (this.props.disabledItem ? ' suggestion-item--disabled' : '')
+                        `suggestion-item--btn ${getPrefixedItemId(this.props.getId(this.props.option.value))}` +
+                        (this.props.disabledItem ? ' suggestion-item--disabled' : '')
                     }
                     onKeyDown={(event) => {
                         if (event.key === 'Enter' && this.props.option.children) {
@@ -51,46 +51,42 @@ export class TreeSelectItem<T> extends React.Component<IProps<T>> {
                     }}
                     disabled={this.props.disabledItem}
                     data-test-id="option"
-                    role='treeitem'
+                    role="treeitem"
                     aria-selected={this.props.selectedItem === true}
                     aria-disabled={this.props.disabledItem === true}
                 >
-                    {(this.props.getBorderColor && !this.props.allowMultiple)
-                        && <div
+                    {this.props.getBorderColor && !this.props.allowMultiple && (
+                        <div
                             className="item-border"
                             style={{
                                 backgroundColor: this.props.getBorderColor(this.props.option.value),
                             }}
-                        >
-                        </div>
-                    }
+                        ></div>
+                    )}
 
                     <span
                         className={
-                            'suggestion-item--bgcolor'
-                            + (this.props.selectedItem ? ' suggestion-item--selected' : '')
+                            'suggestion-item--bgcolor' + (this.props.selectedItem ? ' suggestion-item--selected' : '')
                         }
                         style={
-                            (this.props.getBackgroundColor && this.props.option.value)
+                            this.props.getBackgroundColor && this.props.option.value
                                 ? {
-                                    backgroundColor: this.props.getBackgroundColor(this.props.option.value),
-                                    color: getTextColor(this.props.getBackgroundColor(this.props.option.value),
-                                    ),
-                                }
+                                      backgroundColor: this.props.getBackgroundColor(this.props.option.value),
+                                      color: getTextColor(this.props.getBackgroundColor(this.props.option.value)),
+                                  }
                                 : undefined
                         }
                     >
                         {this.props.optionTemplate
                             ? this.props.optionTemplate(this.props.option.value)
-                            : this.props.getLabel(this.props.option.value)
-                        }
+                            : this.props.getLabel(this.props.option.value)}
                     </span>
 
-                    {this.props.option.children
-                        && <span className="suggestion-item__icon" aria-hidden="true" data-test-id="children-indicator">
+                    {this.props.option.children && (
+                        <span className="suggestion-item__icon" aria-hidden="true" data-test-id="children-indicator">
                             <Icon name="chevron-right-thin"></Icon>
                         </span>
-                    }
+                    )}
                 </button>
             </li>
         );

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
-import * as React from "react";
+import * as React from 'react';
 import {DragHandle} from '../DragHandle';
-import {Icon} from "../Icon";
+import {Icon} from '../Icon';
 import {getTextColor} from '../../helpers';
 
 interface IProps<T> {
@@ -28,36 +28,33 @@ export class TreeSelectPill<T> extends React.Component<IProps<T>> {
                 style={
                     this.props.valueTemplate
                         ? {backgroundColor: this.props.backgroundColor}
-                        : this.props.getBackgroundColor
-                            && {backgroundColor: this.props.getBackgroundColor(this.props.item)}
+                        : this.props.getBackgroundColor && {
+                              backgroundColor: this.props.getBackgroundColor(this.props.item),
+                          }
                 }
                 data-test-id="item"
             >
-                {this.props.draggable && (
-                    <DragHandle blank={true} dotsInRow='3' dotRows='4' />
-                )}
+                {this.props.draggable && <DragHandle blank={true} dotsInRow="3" dotRows="4" />}
                 <span
                     className="tags-input__helper-box"
                     style={{
                         color: this.props.backgroundColor
                             ? getTextColor(this.props.backgroundColor)
-                            : this.props.getBackgroundColor
-                                &&  getTextColor(this.props.getBackgroundColor(this.props.item)),
+                            : this.props.getBackgroundColor &&
+                              getTextColor(this.props.getBackgroundColor(this.props.item)),
                     }}
                 >
                     {this.props.children}
 
-                    {!this.props.readOnly
-                        && <button
+                    {!this.props.readOnly && (
+                        <button
                             className="tags-input__remove-button"
                             data-test-id="remove"
-                            onClick={() => (!this.props.readOnly && !this.props.disabled)
-                                && this.props.onRemove()
-                            }
+                            onClick={() => !this.props.readOnly && !this.props.disabled && this.props.onRemove()}
                         >
                             <Icon name="close-small"></Icon>
                         </button>
-                    }
+                    )}
                 </span>
             </li>
         );

package/app-typescript/components/WithPagination.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {Icon} from '../components/Icon';
 
 interface IProps<T> {
-    getItems(pageNo: number, pageSize: number, signal: AbortSignal): Promise<{items: Array<T>, itemCount: number}>;
+    getItems(pageNo: number, pageSize: number, signal: AbortSignal): Promise<{items: Array<T>; itemCount: number}>;
     children: (items: Array<T>) => JSX.Element;
     pageSize?: number;
 }
@@ -25,33 +25,27 @@ export function getPagination(currentPage: number, totalPages: number): Array<nu
         currentPage + 2,
     ].filter((page) => page >= 1 && page <= totalPages);
 
-    if (!basePages.includes(1)) { // include first and maybe dots
+    if (!basePages.includes(1)) {
+        // include first and maybe dots
         const firstInCurrentList = basePages[0];
 
         if (firstInCurrentList !== 1) {
-            basePages = [
-                'dots',
-                ...basePages,
-            ];
+            basePages = ['dots', ...basePages];
         }
 
-        basePages = [
-            1,
-            ...basePages,
-        ];
+        basePages = [1, ...basePages];
     }
 
-    if (!basePages.includes(totalPages)) { // include last and maybe dots
+    if (!basePages.includes(totalPages)) {
+        // include last and maybe dots
         const lastInCurrentList = basePages[basePages.length - 1];
 
-        if (lastInCurrentList !== totalPages - 1) { // add dots if we're skipping some numbers
+        if (lastInCurrentList !== totalPages - 1) {
+            // add dots if we're skipping some numbers
             basePages = basePages.concat('dots');
         }
 
-        basePages = [
-            ...basePages,
-            totalPages,
-        ];
+        basePages = [...basePages, totalPages];
     }
 
     return basePages;
@@ -111,9 +105,10 @@ export class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>>
             this.inProgress = false;
             this.setState({items: res.items, currentPage: page}, () => {
                 const scrollableEl = getScrollParent(this.ref);
-                const diff = scrollableEl != null && this.ref?.scrollHeight != null
-                    ? scrollableEl.offsetHeight - this.ref.scrollHeight
-                    : null;
+                const diff =
+                    scrollableEl != null && this.ref?.scrollHeight != null
+                        ? scrollableEl.offsetHeight - this.ref.scrollHeight
+                        : null;
 
                 if (scrollableEl != null) {
                     scrollableEl.scrollTop = diff != null ? diff : 0;
@@ -137,7 +132,9 @@ export class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>>
         const pageElements = getPagination(this.state.currentPage, this.pageCount).map((el, i) => {
             if (el === 'dots') {
                 return (
-                    <span data-test-id="more-pages" className='sd-pagination__item sd-pagination__item--more'>...</span>
+                    <span data-test-id="more-pages" className="sd-pagination__item sd-pagination__item--more">
+                        ...
+                    </span>
                 );
             } else {
                 return (
@@ -160,19 +157,19 @@ export class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>>
             <>
                 <button
                     data-test-id="btn-1"
-                    className='sd-pagination__item sd-pagination__item--start'
+                    className="sd-pagination__item sd-pagination__item--start"
                     disabled={this.state.currentPage === 1}
                     onClick={() => this.switchPage(1)}
                 >
-                    <Icon name='backward-thin' />
+                    <Icon name="backward-thin" />
                 </button>
                 <button
                     data-test-id="btn-2"
-                    className='sd-pagination__item sd-pagination__item--start'
+                    className="sd-pagination__item sd-pagination__item--start"
                     disabled={this.state.currentPage <= 1}
                     onClick={() => this.switchPage(this.state.currentPage - 1)}
                 >
-                    <Icon name='chevron-left-thin' />
+                    <Icon name="chevron-left-thin" />
                 </button>
             </>,
         );
@@ -181,19 +178,19 @@ export class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>>
             <>
                 <button
                     data-test-id="btn-3"
-                    className='sd-pagination__item sd-pagination__item--forward'
+                    className="sd-pagination__item sd-pagination__item--forward"
                     onClick={() => this.switchPage(this.state.currentPage + 1)}
                     disabled={this.state.currentPage === this.pageCount}
                 >
-                    <Icon name='chevron-right-thin' />
+                    <Icon name="chevron-right-thin" />
                 </button>
                 <button
                     data-test-id="btn-4"
-                    className='sd-pagination__item sd-pagination__item--end'
+                    className="sd-pagination__item sd-pagination__item--end"
                     onClick={() => this.switchPage(this.pageCount)}
                     disabled={this.state.currentPage === this.pageCount}
                 >
-                    <Icon name='forward-thin' />
+                    <Icon name="forward-thin" />
                 </button>
             </>,
         );
@@ -222,17 +219,15 @@ export class WithPagination<T> extends React.PureComponent<IProps<T>, IState<T>>
                     this.ref = element;
                 }}
             >
-                {
-                    this.pageCount > 1 ? (
-                        <>
-                            <StyledPagination />
-                            {this.props.children(this.state.items)}
-                            <StyledPagination />
-                        </>
-                    ) : (
-                        this.props.children(this.state.items)
-                    )
-                }
+                {this.pageCount > 1 ? (
+                    <>
+                        <StyledPagination />
+                        {this.props.children(this.state.items)}
+                        <StyledPagination />
+                    </>
+                ) : (
+                    this.props.children(this.state.items)
+                )}
             </div>
         );
     }

package/app-typescript/components/WithPopover.tsx

@@ -1,4 +1,3 @@
-
 import * as React from 'react';
 import {Placement} from '@popperjs/core';
 import {showPopup} from './ShowPopup';

package/app-typescript/components/WithPortal.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 import {createPortal} from 'react-dom';
 
 interface IProps {
@@ -6,9 +6,7 @@ interface IProps {
     'data-test-id'?: string;
 }
 
-export function findParent(
-    element: HTMLElement | null,
-) {
+export function findParent(element: HTMLElement | null) {
     let dataTheme = element;
 
     while (dataTheme != null && dataTheme?.getAttribute('data-theme') == null) {
@@ -35,14 +33,13 @@ export class WithPortal extends React.Component<IProps> {
     render() {
         return (
             <div ref={this.ref}>
-                {this.props.active && (
+                {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/WithSizeObserver.tsx

@@ -74,13 +74,9 @@ export class WithSizeObserver extends React.PureComponent<IProps, IState> {
                  * but if parent of `ResizeObserverComponent` is resized down,
                  * it would include its own size(which is based on the initial result from this component),
                  * including children, into calculation and would produce a wrong result.
-                */}
+                 */}
                 <div style={{position: 'absolute', top: 0, left: 0, width: '100%', height: '100%'}}>
-                    {
-                        dimensions === 'not-initialized'
-                            ? null
-                            : this.props.children(dimensions)
-                    }
+                    {dimensions === 'not-initialized' ? null : this.props.children(dimensions)}
                 </div>
             </div>
         );

package/app-typescript/components/_Positioner.tsx

@@ -52,7 +52,7 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
         const viewportWidth = document.documentElement.clientWidth;
 
         const availableSpaceTop = rect.top - padding;
-        const availableSpaceBottom = (viewportHeight - rect.bottom) - padding;
+        const availableSpaceBottom = viewportHeight - rect.bottom - padding;
 
         const availableSpaceLeft = rect.left;
         const availableSpaceRight = viewportWidth - rect.right;
@@ -92,8 +92,8 @@ class PopperWrapper extends React.Component<IPropsPopperWrapper> {
                     }
                 }}
                 tabIndex={0}
-                role='dialog'
-                aria-labelledby='popoverTitle'
+                role="dialog"
+                aria-labelledby="popoverTitle"
                 onKeyDown={(event) => {
                     if (event.key === 'Escape') {
                         event.preventDefault();
@@ -168,11 +168,13 @@ export class Positioner extends React.Component<IPropsPositioner, IStatePosition
         // the toggle button. Even if the toggle button is inside the list item.
         e.stopPropagation();
 
-        window.dispatchEvent(new CustomEvent(eventCloseOthers, {
-            detail: {
-                triggerElement: this.triggerElement,
-            },
-        }));
+        window.dispatchEvent(
+            new CustomEvent(eventCloseOthers, {
+                detail: {
+                    triggerElement: this.triggerElement,
+                },
+            }),
+        );
 
         this.setState({open: !this.state.open});
     }
@@ -180,13 +182,13 @@ export class Positioner extends React.Component<IPropsPositioner, IStatePosition
     // arguments are in a different order, because the method is bound
     closeDropdownOnOutsideClick(wrapper: HTMLElement, event: MouseEvent) {
         if (
-            this.state.open === true
-            && event != null
-            && event.target !== this.triggerElement
-            && event.target != null
-            && event.target instanceof Node // wrapper.contains accepts only Node type
-            && wrapper != null
-            && !wrapper.contains(event.target)
+            this.state.open === true &&
+            event != null &&
+            event.target !== this.triggerElement &&
+            event.target != null &&
+            event.target instanceof Node && // wrapper.contains accepts only Node type
+            wrapper != null &&
+            !wrapper.contains(event.target)
         ) {
             this.setState({
                 open: false,
@@ -197,17 +199,15 @@ export class Positioner extends React.Component<IPropsPositioner, IStatePosition
     componentDidUpdate() {
         if (this.state.open === true) {
             ReactDOM.render(
-                (
-                    <PopperWrapper
-                        {...this.props}
-                        handleCloseOthers={this.handleCloseOthers}
-                        closeDropdownOnOutsideClick={this.closeDropdownOnOutsideClick}
-                        triggerElement={this.triggerElement}
-                        close={() => {
-                            this.setState({open: false});
-                        }}
-                    />
-                ),
+                <PopperWrapper
+                    {...this.props}
+                    handleCloseOthers={this.handleCloseOthers}
+                    closeDropdownOnOutsideClick={this.closeDropdownOnOutsideClick}
+                    triggerElement={this.triggerElement}
+                    close={() => {
+                        this.setState({open: false});
+                    }}
+                />,
                 this.elementForPositioner,
             );
         } else {

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

@@ -8,12 +8,7 @@ interface IProps extends IPropsBase {
 export class AvatarContentAdd extends React.PureComponent<IProps> {
     render() {
         if (this.props.onClick == null) {
-            return (
-                <span
-                    className="sd-avatar-content sd-avatar-content--add-item"
-                    title={this.props.tooltipText}
-                />
-            );
+            return <span className="sd-avatar-content sd-avatar-content--add-item" title={this.props.tooltipText} />;
         } else {
             return (
                 <button

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

@@ -12,7 +12,7 @@ export type IAvatarPlaceholderInGroup = Omit<IPropsAvatarPlaceholder, 'size'>;
 
 export type IAvatarGroupItem = IAvatarInGroup | IAvatarPlaceholderInGroup;
 
-type IGap = 'none' | 'small'| 'medium'| 'large';
+type IGap = 'none' | 'small' | 'medium' | 'large';
 
 export interface IPropsAvatarGroup {
     size: IPropsAvatar['size'];
@@ -37,9 +37,9 @@ function isAvatar(item: IAvatarInGroup | IAvatarPlaceholderInGroup): item is IAv
 export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
     render() {
         const {size, items} = this.props;
-        const someIconsHaveExtraElements = items.filter(isAvatar).some(
-            ({icon, administratorIndicator}) => icon != null || administratorIndicator != null,
-        );
+        const someIconsHaveExtraElements = items
+            .filter(isAvatar)
+            .some(({icon, administratorIndicator}) => icon != null || administratorIndicator != null);
         const gap: IGap = someIconsHaveExtraElements ? 'medium' : 'none';
 
         const max: number = (() => {
@@ -64,7 +64,7 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
                             }
                         }}
                     >
-                       {children}
+                        {children}
                     </button>
                 );
             } else {
@@ -76,49 +76,42 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
 
         return (
             <WithPopover
-                placement='bottom-end'
+                placement="bottom-end"
                 component={() => (
                     <div className="avatar-popup">
                         {this.props.items.map((item, index) => {
-                            return (
-                                someHaveDisplayName
-                                    ? <Spacer h alignItems='center' gap='16' noGrow key={index}>
-                                        {
-                                            isAvatar(item)
-                                                && item.displayName
-                                        }
+                            return someHaveDisplayName ? (
+                                <Spacer h alignItems="center" gap="16" noGrow key={index}>
+                                    {isAvatar(item) && item.displayName}
 
-                                        {
-                                            isAvatar(item)
-                                                ? (
-                                                    <Avatar
-                                                        size='small'
-                                                        imageUrl={item.imageUrl}
-                                                        initials={item.initials}
-                                                        displayName={item.displayName}
-                                                        icon={item.icon}
-                                                        statusDot={item.statusDot}
-                                                    />
-                                                )
-                                                : (
-                                                    <AvatarPlaceholder
-                                                        kind='plus-button'
-                                                        size='small'
-                                                        icon={item.icon}
-                                                        onClick={item.onClick}
-                                                    />
-                                                )
-                                        }
-                                    </Spacer>
-                                    : <div>
+                                    {isAvatar(item) ? (
+                                        <Avatar
+                                            size="small"
+                                            imageUrl={item.imageUrl}
+                                            initials={item.initials}
+                                            displayName={item.displayName}
+                                            icon={item.icon}
+                                            statusDot={item.statusDot}
+                                        />
+                                    ) : (
                                         <AvatarPlaceholder
-                                            kind='plus-button'
-                                            size='small'
+                                            kind="plus-button"
+                                            size="small"
                                             icon={item.icon}
-                                            onClick={isAvatar(item) ? undefined : item.onClick}
-                                            key={index}
+                                            onClick={item.onClick}
                                         />
-                                    </div>
+                                    )}
+                                </Spacer>
+                            ) : (
+                                <div>
+                                    <AvatarPlaceholder
+                                        kind="plus-button"
+                                        size="small"
+                                        icon={item.icon}
+                                        onClick={isAvatar(item) ? undefined : item.onClick}
+                                        key={index}
+                                    />
+                                </div>
                             );
                         })}
                     </div>
@@ -131,36 +124,24 @@ export class AvatarGroup extends React.PureComponent<IPropsAvatarGroup> {
                             'sd-avatar-group--stacked',
                             `sd-avatar-group--stacked--gap-${gap}`,
                         )}
-                        role='group'
+                        role="group"
                         onClick={this.props.onClick}
                     >
-                        {
-                            items.slice(0, max).map((item, index) => {
-                                if (isAvatar(item)) {
-                                    return (
-                                        <Avatar {...item} key={index} size={size} />
-                                    );
-                                } else {
-                                    return (
-                                        <AvatarPlaceholder
-                                            {...item}
-                                            key={index}
-                                            size={this.props.size}
-                                        />
-                                    );
-                                }
-                            })
-                        }
+                        {items.slice(0, max).map((item, index) => {
+                            if (isAvatar(item)) {
+                                return <Avatar {...item} key={index} size={size} />;
+                            } else {
+                                return <AvatarPlaceholder {...item} key={index} size={this.props.size} />;
+                            }
+                        })}
 
-                        {
-                            itemsOverLimit > 0 && (
-                                <PlusButtonWrapper onToggle={onToggle}>
-                                    <AvatarWrapper size={size}>
-                                        <AvatarContentNumber number={`${itemsOverLimit}`} />
-                                    </AvatarWrapper>
-                                </PlusButtonWrapper>
-                            )
-                        }
+                        {itemsOverLimit > 0 && (
+                            <PlusButtonWrapper onToggle={onToggle}>
+                                <AvatarWrapper size={size}>
+                                    <AvatarContentNumber number={`${itemsOverLimit}`} />
+                                </AvatarWrapper>
+                            </PlusButtonWrapper>
+                        )}
                     </div>
                 )}
             </WithPopover>