superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/NavButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from './Icon';
-import { Badge } from './Badge';
+import {Icon} from './Icon';
+import {Badge} from './Badge';
 interface IProps {
     id?: string;
     icon?: string;
@@ -25,17 +25,19 @@ export class NavButton extends React.PureComponent<IProps> {
         });
         const value = this.props.value === undefined ? 'button' : this.props.value;
         return (
-            <button type={value}
+            <button
+                type={value}
                 className={classes}
                 tabIndex={0}
                 onClick={this.props.onClick}
                 aria-label={this.props.text}
-                id={this.props.id}>
-                {this.props.badgeValue &&
-                    <Badge text={this.props.badgeValue} type='primary' />}
+                id={this.props.id}
+            >
+                {this.props.badgeValue && <Badge text={this.props.badgeValue} type="primary" />}
                 {this.props.icon ? <Icon name={this.props.icon} size={this.props.iconSize} /> : null}
-                {!this.props.icon && this.props.text ?
-                    <span className="sd-navbtn__text">{this.props.text}</span> : null}
+                {!this.props.icon && this.props.text ? (
+                    <span className="sd-navbtn__text">{this.props.text}</span>
+                ) : null}
             </button>
         );
     }

package/app-typescript/components/Navigation/BottomNav.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Icon } from '../Icon';
-import { IconButton } from '../IconButton';
-import { clone } from 'lodash';
+import {Icon} from '../Icon';
+import {IconButton} from '../IconButton';
+import {clone} from 'lodash';
 
 interface IProps {
     items: Array<IItem>;
@@ -55,32 +55,36 @@ export class BottomNav extends React.PureComponent<IProps, IState> {
 
     render() {
         return (
-            <ul className='sd-bottom-nav-list'>
+            <ul className="sd-bottom-nav-list">
                 {this.props.items.map((item, index) => {
                     return (
                         <li
                             key={index}
                             className={
-                                'sd-bottom-nav-list__item'
-                                + (item['active']
+                                'sd-bottom-nav-list__item' +
+                                (item['active']
                                     ? ' sd-bottom-nav-list__item--active'
-                                    : (index === this.state.index ? ' sd-bottom-nav-list__item--active' : ''))
+                                    : index === this.state.index
+                                      ? ' sd-bottom-nav-list__item--active'
+                                      : '')
                             }
                         >
-                            <a className='sd-bottom-nav-list__item-title' onClick={(event) => {
-                                this.handleClick(index);
-                                item.onClick(event);
-                            }}>
-                                {item['icon'] &&
-                                    <Icon name={item['icon']} />
-                                }
+                            <a
+                                className="sd-bottom-nav-list__item-title"
+                                onClick={(event) => {
+                                    this.handleClick(index);
+                                    item.onClick(event);
+                                }}
+                            >
+                                {item['icon'] && <Icon name={item['icon']} />}
                                 <span>{item.title}</span>
                             </a>
                             <IconButton
-                                size='small'
+                                size="small"
                                 icon="close-small"
-                                ariaValue='Delete'
-                                onClick={() => item.onRemove(index)} />
+                                ariaValue="Delete"
+                                onClick={() => item.onRemove(index)}
+                            />
                         </li>
                     );
                 })}

package/app-typescript/components/Navigation/QuickNavBar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '../Icon';
+import {Icon} from '../Icon';
 import Scrollspy from 'react-scrollspy';
 
 interface IProps {
@@ -45,45 +45,47 @@ export class QuickNavBar extends React.PureComponent<IProps, IState> {
         }
 
         if (item.id && this.props.scrollSpy) {
-            return document
-              .getElementById(item.id)
-              ?.scrollIntoView({ block: "nearest", behavior: "smooth" });
-          }
+            return document.getElementById(item.id)?.scrollIntoView({block: 'nearest', behavior: 'smooth'});
+        }
 
         if (item.onClick) {
             item.onClick(event);
         }
     }
     render() {
-
         let itemsArr: Array<string> = [];
-            this.props.items.map((item) => {
-                if (item !== 'divider') {
-                    itemsArr = [...itemsArr, `${item.id}`];
-                }
+        this.props.items.map((item) => {
+            if (item !== 'divider') {
+                itemsArr = [...itemsArr, `${item.id}`];
+            }
         });
         return (
-            <div className='sd-quickbar-menu'>
-                {this.props.scrollSpy
-                    ? <ul>
-                        <Scrollspy items={ itemsArr }
-                        currentClassName="sd-quickbar-menu__list-item--active"
-                        rootEl={this.props.scrollSpy}  offset={this.props.offset || 0}>
+            <div className="sd-quickbar-menu">
+                {this.props.scrollSpy ? (
+                    <ul>
+                        <Scrollspy
+                            items={itemsArr}
+                            currentClassName="sd-quickbar-menu__list-item--active"
+                            rootEl={this.props.scrollSpy}
+                            offset={this.props.offset || 0}
+                        >
                             {this.props.items.map((item, index) => {
                                 if (item === 'divider') {
-                                    return (
-                                        <li key={index} className='sd-quickbar__spacer'></li>
-                                        );
+                                    return <li key={index} className="sd-quickbar__spacer"></li>;
                                 } else {
                                     return (
                                         <li
                                             key={index}
                                             data-sd-tooltip={item['tooltip']}
-                                            data-flow='right'
+                                            data-flow="right"
                                             className="sd-quickbar-menu__list-item"
                                         >
-                                            <a role='button' aria-label={item['tooltip']} className={'sd-quickbar__btn'}
-                                                onClick={() => this.handleClick(item, index, event)}>
+                                            <a
+                                                role="button"
+                                                aria-label={item['tooltip']}
+                                                className={'sd-quickbar__btn'}
+                                                onClick={() => this.handleClick(item, index, event)}
+                                            >
                                                 <Icon size={'small'} name={item['icon']} />
                                             </a>
                                         </li>
@@ -92,30 +94,31 @@ export class QuickNavBar extends React.PureComponent<IProps, IState> {
                             })}
                         </Scrollspy>
                     </ul>
-                    : <ul>
+                ) : (
+                    <ul>
                         {this.props.items.map((item, index) => {
                             if (item === 'divider') {
-                                return (
-                                    <li key={index} className='sd-quickbar__spacer'></li>
-                                );
+                                return <li key={index} className="sd-quickbar__spacer"></li>;
                             } else {
                                 return (
-                                    <li key={index} data-sd-tooltip={item['tooltip']} data-flow='right'>
-                                        <a role='button'
+                                    <li key={index} data-sd-tooltip={item['tooltip']} data-flow="right">
+                                        <a
+                                            role="button"
                                             aria-label={item['tooltip']}
                                             className={
-                                                'sd-quickbar__btn'
-                                                +  (index === this.state.index ? ' sd-quickbar__btn--active' : '')
+                                                'sd-quickbar__btn' +
+                                                (index === this.state.index ? ' sd-quickbar__btn--active' : '')
                                             }
-                                            onClick={() => this.handleClick(item, index, event)}>
-                                                <Icon size={'small'} name={item['icon']} />
+                                            onClick={() => this.handleClick(item, index, event)}
+                                        >
+                                            <Icon size={'small'} name={item['icon']} />
                                         </a>
-                                    </li>);
-                                }
-                            },
-                        )}
+                                    </li>
+                                );
+                            }
+                        })}
                     </ul>
-                }
+                )}
             </div>
         );
     }

package/app-typescript/components/Navigation/SideBarMenu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '../Icon';
+import {Icon} from '../Icon';
 
 interface IProps {
     items: Array<IItem | 'divider'>;
@@ -54,26 +54,29 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
 
     render() {
         return (
-            <div className='sd-sidebar-menu sd-content-wrapper__left-tabs'>
+            <div className="sd-sidebar-menu sd-content-wrapper__left-tabs">
                 <ul className={'authoring-active'}>
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
-                            return (
-                                <li key={index} className='sd-sidebar-menu__spacer'></li>
-                            );
+                            return <li key={index} className="sd-sidebar-menu__spacer"></li>;
                         } else {
                             return (
-                                <li key={index}
-                                data-sd-tooltip={item['tooltip']}
-                                data-flow='right'
-                                className={item.hover ? 'authoring-active__item' : ''}>
+                                <li
+                                    key={index}
+                                    data-sd-tooltip={item['tooltip']}
+                                    data-flow="right"
+                                    className={item.hover ? 'authoring-active__item' : ''}
+                                >
                                     <a
-                                        className={'sd-sidebar-menu__btn'
-                                            + (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '')
-                                            + (item['active']
+                                        className={
+                                            'sd-sidebar-menu__btn' +
+                                            (this.state.hover ? ' sd-sidebar-menu__btn--closed ' : '') +
+                                            (item['active']
                                                 ? ' sd-sidebar-menu__btn--active'
-                                                : (index === this.state.index ? ' sd-sidebar-menu__btn--active' : '')
-                                        )}
+                                                : index === this.state.index
+                                                  ? ' sd-sidebar-menu__btn--active'
+                                                  : '')
+                                        }
                                         onClick={() => {
                                             this.handleClick(index);
                                             if (item.hover) {
@@ -84,12 +87,13 @@ export class SideBarMenu extends React.PureComponent<IProps, IState> {
                                             }
                                         }}
                                     >
-                                        <span className='sd-sidebar-menu__main-icon '>
+                                        <span className="sd-sidebar-menu__main-icon ">
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>
-                                        <i className='sd-sidebar-menu__helper-icon big-icon--chevron-left'></i>
+                                        <i className="sd-sidebar-menu__helper-icon big-icon--chevron-left"></i>
                                     </a>
-                                </li>);
+                                </li>
+                            );
                         }
                     })}
                 </ul>

package/app-typescript/components/Navigation/SideBarTabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Icon } from '../Icon';
-import { Badge } from '../Badge';
+import {Icon} from '../Icon';
+import {Badge} from '../Badge';
 import classNames from 'classnames';
 
 interface IProps {
@@ -45,39 +45,33 @@ export class SideBarTabs extends React.PureComponent<IProps> {
 
     render() {
         return (
-            <div className='sd-sidetab-menu sd-sidetab-menu--static' data-test-id={this.props['data-test-id']}>
+            <div className="sd-sidetab-menu sd-sidetab-menu--static" data-test-id={this.props['data-test-id']}>
                 <ul>
                     {this.props.items.map((item, index) => {
                         if (item === 'divider') {
-                            return (
-                                <li key={index} className='sd-sidetab-menu__spacer'></li>
-                            );
+                            return <li key={index} className="sd-sidetab-menu__spacer"></li>;
                         } else {
                             return (
-                                <li key={index} data-sd-tooltip={item.tooltip} data-flow='left'>
+                                <li key={index} data-sd-tooltip={item.tooltip} data-flow="left">
                                     <button
                                         disabled={this.props.disabled}
-                                        role='button'
+                                        role="button"
                                         aria-label={item.tooltip}
-                                        className={classNames(
-                                            'sd-sidetab-menu__btn',
-                                            {'sd-sidetab-menu__btn--active':
+                                        className={classNames('sd-sidetab-menu__btn', {
+                                            'sd-sidetab-menu__btn--active':
                                                 item.id === this.props.activeTab && this.props.disabled !== true,
-                                            },
-                                        )}
+                                        })}
                                         onClick={() => this.handleClick(item)}
-                                        data-test-id='widget-icon'
+                                        data-test-id="widget-icon"
                                         data-test-value={item.id}
                                     >
-                                        {item.badgeValue != null && (
-                                            <Badge text={item['badgeValue']} type='primary' />
-                                        )}
+                                        {item.badgeValue != null && <Badge text={item['badgeValue']} type="primary" />}
 
-                                        <span className='sd-sidetab-menu__main-icon '>
+                                        <span className="sd-sidetab-menu__main-icon ">
                                             <Icon size={item['size']} name={item['icon']} />
                                         </span>
 
-                                        <i className='sd-sidetab-menu__helper-icon icon-close-small'></i>
+                                        <i className="sd-sidetab-menu__helper-icon icon-close-small"></i>
                                     </button>
                                 </li>
                             );

package/app-typescript/components/Navigation/index.tsx

@@ -1,3 +1,3 @@
-export { SideBarMenu } from './SideBarMenu';
-export { SideBarTabs } from './SideBarTabs';
-export { QuickNavBar } from './QuickNavBar';
+export {SideBarMenu} from './SideBarMenu';
+export {SideBarTabs} from './SideBarTabs';
+export {QuickNavBar} from './QuickNavBar';

package/app-typescript/components/Popover.tsx

@@ -18,31 +18,29 @@ export class Popover extends React.Component<IProps> {
                 className="sd-popover"
             >
                 <div className="sd-popover__header">
-                    <h4 className="sd-popover__title" tabIndex={0} id='popoverTitle'>{this.props.title}</h4>
+                    <h4 className="sd-popover__title" tabIndex={0} id="popoverTitle">
+                        {this.props.title}
+                    </h4>
 
-                    {
-                        (this.props.displayCloseButton ?? true) && (
-                            <button
-                                className="icn-btn icn-btn--small sd-popover__close"
-                                tabIndex={0}
-                                aria-label={'Close dialog'}
-                                onClick={() => {
-                                    const el = document.querySelector(this.props.triggerSelector);
+                    {(this.props.displayCloseButton ?? true) && (
+                        <button
+                            className="icn-btn icn-btn--small sd-popover__close"
+                            tabIndex={0}
+                            aria-label={'Close dialog'}
+                            onClick={() => {
+                                const el = document.querySelector(this.props.triggerSelector);
 
-                                    if (el instanceof HTMLElement) {
-                                        el.click();
-                                    }
-                                }}
-                            >
-                                <i className="icon-close-small" />
-                            </button>
-                        )
-                    }
+                                if (el instanceof HTMLElement) {
+                                    el.click();
+                                }
+                            }}
+                        >
+                            <i className="icon-close-small" />
+                        </button>
+                    )}
                 </div>
 
-                <div className="sd-popover__content">
-                    {this.props.children}
-                </div>
+                <div className="sd-popover__content">{this.props.children}</div>
             </Positioner>
         );
     }

package/app-typescript/components/PropsList.tsx

@@ -37,12 +37,10 @@ class PropsList extends React.PureComponent {
                         <th>Description</th>
                     </tr>
                 </thead>
-                <tbody>
-                    {this.props.children}
-                </tbody>
+                <tbody>{this.props.children}</tbody>
             </table>
         );
     }
 }
 
-export { Prop, PropsList };
+export {Prop, PropsList};

package/app-typescript/components/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 import {FormLabel} from './Form/FormLabel';
 
 interface IProps {
@@ -16,11 +16,11 @@ interface IProps {
         groupLabelledBy?: string;
     };
     options: Array<{
-        label: string,
-        value: string,
+        label: string;
+        value: string;
         icon?: string;
-        labelHidden?: boolean,
-        disabled?: boolean
+        labelHidden?: boolean;
+        disabled?: boolean;
     }>;
     required?: boolean;
     tabindex?: number;
@@ -50,33 +50,36 @@ export class RadioButtonGroup extends React.Component<IProps> {
             [`sd-check-button__group--padded`]: this.props.group?.padded === true,
         });
 
-        const selectedOption = this.props.value == null
-            ? undefined
-            : this.props.options.find(({value}) => value === this.props.value);
+        const selectedOption =
+            this.props.value == null ? undefined : this.props.options.find(({value}) => value === this.props.value);
 
         return (
             <React.Fragment>
-                {!this.props.group?.groupLabel ?
+                {!this.props.group?.groupLabel ? (
                     <div
                         role="radiogroup"
                         className={classes}
                         aria-labelledby={this.props.group?.groupLabelledBy}
                         data-test-id={this.props['data-test-id']}
                         data-test-value={selectedOption == null ? undefined : selectedOption.label}
-                    >{
-                        this.props.options.map((item: any, index: number) => (
-                            <span className="sd-check-button sd-check-button--native"
+                    >
+                        {this.props.options.map((item: any, index: number) => (
+                            <span
+                                className="sd-check-button sd-check-button--native"
                                 key={index}
-                                tabIndex={this.props.tabindex === undefined ? undefined : -1}>
-
-                                <input type="radio" className="sd-check-button__input"
+                                tabIndex={this.props.tabindex === undefined ? undefined : -1}
+                            >
+                                <input
+                                    type="radio"
+                                    className="sd-check-button__input"
                                     id={this.htmlId + index}
                                     tabIndex={this.props.tabindex}
                                     name={this.htmlId}
                                     onChange={() => this.handleChange(item)}
                                     disabled={this.props.disabled || item.disabled}
                                     required={this.props.required}
-                                    checked={item.value === this.props.value} />
+                                    checked={item.value === this.props.value}
+                                />
                                 <label
                                     className="sd-check-button__text-label"
                                     htmlFor={this.htmlId + index}
@@ -84,51 +87,51 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                     data-test-id="item"
                                     data-test-value={item.label}
                                 >
-
-                                    { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
-                                    { !item.labelHidden || !item.icon ?
-                                        <span className="sd-check-button__text-label-inner">{item.label}</span> : null }
+                                    {item.icon ? <i className={`icon-${item.icon}`} aria-hidden="true" /> : null}
+                                    {!item.labelHidden || !item.icon ? (
+                                        <span className="sd-check-button__text-label-inner">{item.label}</span>
+                                    ) : null}
                                 </label>
                             </span>
-                        ))
-                    }</div>
-                : null }
-                {this.props.group?.groupLabel ?
+                        ))}
+                    </div>
+                ) : null}
+                {this.props.group?.groupLabel ? (
                     <div
-                        className='sd-check-button__group-wrapper'
+                        className="sd-check-button__group-wrapper"
                         data-test-id={this.props['data-test-id']}
                         data-test-value={selectedOption == null ? undefined : selectedOption.label}
                     >
-
                         <FormLabel forId={this.htmlId + 'group'} text={this.props.group.groupLabel} />
-                        <div role="radiogroup" id={this.htmlId + 'group'} className={classes}>{
-                            this.props.options.map((item: any, index: number) => (
-                                <span className="sd-check-button sd-check-button--native"
-                                    key={index}
-                                    tabIndex={-1}>
-
-                                    <input type="radio" className="sd-check-button__input"
+                        <div role="radiogroup" id={this.htmlId + 'group'} className={classes}>
+                            {this.props.options.map((item: any, index: number) => (
+                                <span className="sd-check-button sd-check-button--native" key={index} tabIndex={-1}>
+                                    <input
+                                        type="radio"
+                                        className="sd-check-button__input"
                                         id={this.htmlId + index}
                                         tabIndex={0}
                                         name={this.htmlId}
                                         onChange={() => this.handleChange(item)}
                                         disabled={this.props.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}>
-
-                                        { item.icon ?  <i className={`icon-${item.icon}`} aria-hidden="true" /> : null }
-                                        { !item.labelHidden || !item.icon ?
-                                            <span className="sd-check-button__text-label-inner">
-                                                {item.label}
-                                            </span> : null }
+                                        checked={item.value === this.props.value}
+                                    />
+                                    <label
+                                        className="sd-check-button__text-label"
+                                        htmlFor={this.htmlId + index}
+                                        aria-label={item.labelHidden ? item.label : undefined}
+                                    >
+                                        {item.icon ? <i className={`icon-${item.icon}`} aria-hidden="true" /> : null}
+                                        {!item.labelHidden || !item.icon ? (
+                                            <span className="sd-check-button__text-label-inner">{item.label}</span>
+                                        ) : null}
                                     </label>
                                 </span>
-                            ))
-                        }</div>
+                            ))}
+                        </div>
                     </div>
-                : null }
+                ) : null}
             </React.Fragment>
         );
     }

package/app-typescript/components/RadioGroup.tsx

@@ -40,13 +40,14 @@ export class RadioGroup extends React.Component<IProps> {
         });
 
         return (
-            <div className={classes} aria-labelledby={this.props.groupLabelledBy}>{
-                this.props.options.map((item: any, index: number) => (
-                    <span className="sd-check-new__wrapper"
+            <div className={classes} aria-labelledby={this.props.groupLabelledBy}>
+                {this.props.options.map((item: any, index: number) => (
+                    <span
+                        className="sd-check-new__wrapper"
                         key={index}
                         label-position={this.props.labelSide || null}
-                        tabIndex={this.props.tabindex === undefined ? undefined : -1}>
-
+                        tabIndex={this.props.tabindex === undefined ? undefined : -1}
+                    >
                         <input
                             type="radio"
                             className="sd-check-new__input"
@@ -60,10 +61,10 @@ export class RadioGroup extends React.Component<IProps> {
                         />
 
                         <span className="sd-radio-new"></span>
-                        <label htmlFor={this.htmlId + index} >{item.label}</label>
+                        <label htmlFor={this.htmlId + index}>{item.label}</label>
                     </span>
-                ))
-            }</div>
+                ))}
+            </div>
         );
     }
 }

package/app-typescript/components/ResizablePanels.tsx

@@ -44,9 +44,8 @@ export class ResizablePanels extends React.PureComponent<IProps> {
 
     render(): React.ReactNode {
         const {direction, primarySize, secondarySize, children} = this.props;
-        const separatorDimensions: React.CSSProperties = direction === 'horizontal'
-            ? {width: 3, height: '100%'}
-            : {height: 3, width: '100%'};
+        const separatorDimensions: React.CSSProperties =
+            direction === 'horizontal' ? {width: 3, height: '100%'} : {height: 3, width: '100%'};
 
         // Sometimes second panel is conditional. Checking here is more convenient.
         if (children.some((child) => child === false || child == null)) {