superdesk-ui-framework 4.0.47 → 4.0.49

package/app-typescript/components/Switch.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
-import { Tooltip } from './Tooltip';
+import nextId from 'react-id-generator';
+import {Tooltip} from './Tooltip';
 
 interface ILabel {
     content: string | ((id: string) => React.ReactNode);
@@ -37,8 +37,8 @@ export class Switch extends React.PureComponent<IProps> {
 
     render() {
         let classes = classNames('sd-switch', {
-            'checked': this.props.value,
-            'disabled': this.props.disabled,
+            checked: this.props.value,
+            disabled: this.props.disabled,
         });
 
         const checkboxInput = (
@@ -58,20 +58,22 @@ export class Switch extends React.PureComponent<IProps> {
         // if external label is used it can't be hidden
         if (this.props.label.hidden && typeof this.props.label.content === 'string') {
             return (
-                <Tooltip
-                    text={this.props.label.content}
-                    flow={this.props.toolTipFlow}
-                >
+                <Tooltip text={this.props.label.content} flow={this.props.toolTipFlow}>
                     <span className="sd-switch__wrapper" tabIndex={-1}>
                         {checkboxInput}
-                        <label className='a11y-only' htmlFor={this.htmlId}>{this.props.label.content}</label>
+                        <label className="a11y-only" htmlFor={this.htmlId}>
+                            {this.props.label.content}
+                        </label>
                     </span>
                 </Tooltip>
             );
         } else {
-            const labelContent = typeof this.props.label.content === 'string'
-                ? <label htmlFor={this.htmlId}>{this.props.label.content}</label>
-                : this.props.label.content(this.htmlId);
+            const labelContent =
+                typeof this.props.label.content === 'string' ? (
+                    <label htmlFor={this.htmlId}>{this.props.label.content}</label>
+                ) : (
+                    this.props.label.content(this.htmlId)
+                );
 
             return (
                 <span className="sd-switch__wrapper" tabIndex={-1}>

package/app-typescript/components/SwitchGroup.tsx

@@ -10,16 +10,16 @@ interface IProps {
 
 export class SwitchGroup extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('sd-switch__group', {
-            [`sd-switch__group--vertical`]: this.props.orientation !== 'horizontal',
-            [`sd-switch__group--horizontal`]: this.props.orientation === 'horizontal',
-            [`sd-switch__group--right`]: this.props.align === 'right',
-        }, this.props.className);
-
-        return (
-            <div className={classes}>
-                {this.props.children}
-            </div>
+        let classes = classNames(
+            'sd-switch__group',
+            {
+                [`sd-switch__group--vertical`]: this.props.orientation !== 'horizontal',
+                [`sd-switch__group--horizontal`]: this.props.orientation === 'horizontal',
+                [`sd-switch__group--right`]: this.props.align === 'right',
+            },
+            this.props.className,
         );
+
+        return <div className={classes}>{this.props.children}</div>;
     }
 }

package/app-typescript/components/TabCustom.tsx

@@ -27,9 +27,7 @@ interface ITabPanel {
 }
 
 export const TabLabel = ({label}: ITabLabel) => {
-    return (
-        <span>{label}</span>
-    );
+    return <span>{label}</span>;
 };
 
 export const Tabs = (props: ITabs) => {
@@ -53,24 +51,22 @@ export const Tabs = (props: ITabs) => {
     return (
         <div
             className={classes}
-            role='tablist'
+            role="tablist"
             aria-label={ariaLabel ? ariaLabel : 'tabs'}
             data-test-id={props['data-test-id']}
         >
-            {
-                children.map((item, i) => (
-                    <button
-                        key={i}
-                        aria-controls={'tabpanel-' + i}
-                        className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
-                        onClick={() => handleSelected(i)}
-                        role='tab'
-                        aria-selected={index === i ? 'true' : 'false'}
-                    >
-                        {item}
-                    </button>
-                ))
-            }
+            {children.map((item, i) => (
+                <button
+                    key={i}
+                    aria-controls={'tabpanel-' + i}
+                    className={'sd-nav-tabs__tab' + (index === i ? ' sd-nav-tabs__tab--active' : '')}
+                    onClick={() => handleSelected(i)}
+                    role="tab"
+                    aria-selected={index === i ? 'true' : 'false'}
+                >
+                    {item}
+                </button>
+            ))}
         </div>
     );
 };
@@ -78,26 +74,23 @@ export const Tabs = (props: ITabs) => {
 export const TabContent = ({theme, children, activePanel}: ITabContent) => {
     return (
         <div className={'sd-nav-tabs__content' + (theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
-            {
-                children.map((panel: any, i: number) => panel.props.indexValue === activePanel && (
-                    <div
-                        className='sd-nav-tabs__pane'
-                        role='tabpanel'
-                        aria-labelledby={'tab-' + activePanel}
-                        key={i}
-                    >
-                        {panel}
-                    </div>
-                ))
-            }
+            {children.map(
+                (panel: any, i: number) =>
+                    panel.props.indexValue === activePanel && (
+                        <div
+                            className="sd-nav-tabs__pane"
+                            role="tabpanel"
+                            aria-labelledby={'tab-' + activePanel}
+                            key={i}
+                        >
+                            {panel}
+                        </div>
+                    ),
+            )}
         </div>
     );
 };
 
 export const TabPanel = ({children, indexValue}: ITabPanel) => {
-    return (
-        <React.Fragment key={indexValue}>
-            {children}
-        </React.Fragment>
-    );
+    return <React.Fragment key={indexValue}>{children}</React.Fragment>;
 };

package/app-typescript/components/TabList.tsx

@@ -18,7 +18,7 @@ interface ITab {
 class Tab extends React.PureComponent<ITab> {
     render() {
         return (
-            <div className='sd-nav-tabs__pane' role='tabpanel'>
+            <div className="sd-nav-tabs__pane" role="tabpanel">
                 {this.props.children}
             </div>
         );
@@ -56,23 +56,26 @@ class TabList extends React.PureComponent<ITabList, IState> {
 
         return (
             <React.Fragment>
-                <div className={classes} role='tablist'>
-                    {this.props.children.map((item, index) =>
+                <div className={classes} role="tablist">
+                    {this.props.children.map((item, index) => (
                         <button
                             key={index}
                             onClick={() => this.handleChange(index)}
-                            role='tab'
+                            role="tab"
                             aria-selected={this.state.index === index ? 'true' : 'false'}
                             className={
-                                'sd-nav-tabs__tab'
-                                + (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')
+                                'sd-nav-tabs__tab' + (this.state.index === index ? ' sd-nav-tabs__tab--active' : '')
                             }
                         >
                             <span>{item.props.label}</span>
-                        </button>)}
+                        </button>
+                    ))}
                 </div>
-                <div className={'sd-nav-tabs__content' +
-                    (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')}>
+                <div
+                    className={
+                        'sd-nav-tabs__content' + (this.props.theme === 'dark' ? ' sd-nav-tabs__content--ui-dark' : '')
+                    }
+                >
                     {this.props.children[this.state.index]}
                 </div>
             </React.Fragment>
@@ -80,4 +83,4 @@ class TabList extends React.PureComponent<ITabList, IState> {
     }
 }
 
-export { Tab, TabList };
+export {Tab, TabList};

package/app-typescript/components/Tag.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { DragHandle } from './DragHandle';
+import {DragHandle} from './DragHandle';
 
 interface IProps {
     text: string;
@@ -13,7 +13,7 @@ interface IProps {
     onClick(): void;
 }
 
-export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label, draggable }: IProps) => {
+export const Tag = ({text, keyValue, shade, shape, readOnly, onClick, label, draggable}: IProps) => {
     let classes = classNames('tag-label', {
         [`tag-label--${shade}`]: shade && shade !== 'light',
         'tag-label--square': shape === 'square',
@@ -21,33 +21,30 @@ export const Tag = ({ text, keyValue, shade, shape, readOnly, onClick, label, dr
     });
     return (
         <>
-            {label
-                ?
+            {label ? (
                 <span className={classes} key={keyValue}>
-                    {draggable && <DragHandle blank={true} dotsInRow='3' dotRows='4' />}
-                    <span className='tag-label--text-wrapper'>
-                        <span className='tag-label--text-label'>
-                            {label}:
-                        </span>
-                        <span className='tag-label--text'>
-                            {text}
-                        </span>
+                    {draggable && <DragHandle blank={true} dotsInRow="3" dotRows="4" />}
+                    <span className="tag-label--text-wrapper">
+                        <span className="tag-label--text-label">{label}:</span>
+                        <span className="tag-label--text">{text}</span>
                     </span>
-                    {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
-                        <i className='icon-close-small'></i>
-                    </button> : null}
+                    {!readOnly ? (
+                        <button className="tag-label__remove" onClick={onClick}>
+                            <i className="icon-close-small"></i>
+                        </button>
+                    ) : null}
                 </span>
-                :
+            ) : (
                 <span className={classes} key={keyValue}>
-                    {draggable && <DragHandle blank={true} dotsInRow='3' dotRows='4' />}
-                    <span className='tag-label--text'>
-                        {text}
-                    </span>
-                    {!readOnly ? <button className='tag-label__remove' onClick={onClick}>
-                        <i className='icon-close-small'></i>
-                    </button> : null}
+                    {draggable && <DragHandle blank={true} dotsInRow="3" dotRows="4" />}
+                    <span className="tag-label--text">{text}</span>
+                    {!readOnly ? (
+                        <button className="tag-label__remove" onClick={onClick}>
+                            <i className="icon-close-small"></i>
+                        </button>
+                    ) : null}
                 </span>
-            }
+            )}
         </>
     );
 };

package/app-typescript/components/TagInput.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { Chips } from '@superdesk/primereact/chips';
+import {Chips} from '@superdesk/primereact/chips';
 import {InputWrapper} from './Form';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 import {IInputWrapper} from './Form/InputWrapper';
 import {SelectPreview} from './SelectPreview';
 
@@ -18,13 +18,7 @@ export class TagInput extends React.Component<IProps> {
         const {onChange, value, placeholder} = this.props;
 
         if (this.props.preview) {
-            return (
-                <SelectPreview
-                    kind={{mode: 'multi-select'}}
-                    items={this.props.value}
-                    getLabel={(item) => item}
-                />
-            );
+            return <SelectPreview kind={{mode: 'multi-select'}} items={this.props.value} getLabel={(item) => item} />;
         }
 
         return (
@@ -44,8 +38,7 @@ export class TagInput extends React.Component<IProps> {
                 <Chips
                     className={`
                         tags-input--multi-select sd-input__input
-                        ${this.props.disabled ? ' tags-input__padding-disabled' : ''}`
-                    }
+                        ${this.props.disabled ? ' tags-input__padding-disabled' : ''}`}
                     allowDuplicate={false}
                     separator=","
                     onChange={(event) => onChange(event.value)}

package/app-typescript/components/Text/Heading.tsx

@@ -14,54 +14,34 @@ interface IProps {
 
 export class Heading extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('sd-heading', {
-            'sd-text--italic': this.props.style === 'italic',
-            [`sd-text--${this.props.weight}`]: this.props.weight,
-            'sd-text-align--left': this.props.align === undefined,
-            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
-            'sd-text--sans': this.props.fontStyle === undefined,
-            [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
-            [`sd-heading--${this.props.type}`]: this.props.type,
-            '': this.props.color === undefined,
-            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
-        }, this.props.className);
+        let classes = classNames(
+            'sd-heading',
+            {
+                'sd-text--italic': this.props.style === 'italic',
+                [`sd-text--${this.props.weight}`]: this.props.weight,
+                'sd-text-align--left': this.props.align === undefined,
+                [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+                'sd-text--sans': this.props.fontStyle === undefined,
+                [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
+                [`sd-heading--${this.props.type}`]: this.props.type,
+                '': this.props.color === undefined,
+                [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+            },
+            this.props.className,
+        );
         switch (this.props.type) {
             case 'h1':
-                return (
-                    <h1 className={classes}>
-                        {this.props.children}
-                    </h1>
-                );
+                return <h1 className={classes}>{this.props.children}</h1>;
             case 'h2':
-                return (
-                    <h2 className={classes}>
-                        {this.props.children}
-                    </h2>
-                );
+                return <h2 className={classes}>{this.props.children}</h2>;
             case 'h3':
-                return (
-                    <h3 className={classes}>
-                        {this.props.children}
-                    </h3>
-                );
+                return <h3 className={classes}>{this.props.children}</h3>;
             case 'h4':
-                return (
-                    <h4 className={classes}>
-                        {this.props.children}
-                    </h4>
-                );
+                return <h4 className={classes}>{this.props.children}</h4>;
             case 'h5':
-                return (
-                    <h5 className={classes}>
-                        {this.props.children}
-                    </h5>
-                );
+                return <h5 className={classes}>{this.props.children}</h5>;
             case 'h6':
-                return (
-                    <h6 className={classes}>
-                        {this.props.children}
-                    </h6>
-                );
+                return <h6 className={classes}>{this.props.children}</h6>;
         }
     }
 }

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

@@ -15,18 +15,22 @@ interface IProps {
 
 export class Text extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('sd-text', {
-            'sd-text--italic': this.props.style === 'italic',
-            'sd-text--normal': this.props.weight === undefined,
-            [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
-            'sd-text-align--left': this.props.align === undefined,
-            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
-            [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'small',
-            'sd-text--sans': this.props.fontStyle === undefined,
-            [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
-            '': this.props.color === undefined,
-            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
-        }, this.props.className);
+        let classes = classNames(
+            'sd-text',
+            {
+                'sd-text--italic': this.props.style === 'italic',
+                'sd-text--normal': this.props.weight === undefined,
+                [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
+                'sd-text-align--left': this.props.align === undefined,
+                [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+                [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'small',
+                'sd-text--sans': this.props.fontStyle === undefined,
+                [`sd-text--${this.props.fontStyle}`]: this.props.fontStyle && this.props.fontStyle !== 'sans',
+                '': this.props.color === undefined,
+                [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+            },
+            this.props.className,
+        );
 
         const styles: React.CSSProperties = {};
 

package/app-typescript/components/Text/Time.tsx

@@ -14,16 +14,20 @@ interface IProps {
 
 export class Time extends React.PureComponent<IProps> {
     render() {
-        let classes = classNames('sd-time', {
-            'sd-text--italic': this.props.style === 'italic',
-            'sd-text--normal': this.props.weight === undefined,
-            [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
-            'sd-text-align--left': this.props.align === undefined,
-            [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
-            [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'x-small',
-            '': this.props.color === undefined,
-            [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
-        }, this.props.className);
+        let classes = classNames(
+            'sd-time',
+            {
+                'sd-text--italic': this.props.style === 'italic',
+                'sd-text--normal': this.props.weight === undefined,
+                [`sd-text--${this.props.weight}`]: this.props.weight || this.props.weight !== undefined,
+                'sd-text-align--left': this.props.align === undefined,
+                [`sd-text-align--${this.props.align}`]: this.props.align && this.props.align !== 'start',
+                [`sd-font-size--${this.props.size}`]: this.props.size && this.props.size !== 'x-small',
+                '': this.props.color === undefined,
+                [`sd-text-color--${this.props.color}`]: this.props.color && this.props.color !== 'normal',
+            },
+            this.props.className,
+        );
 
         return (
             <time dateTime={this.props.datetime} className={classes}>

package/app-typescript/components/ThemeSelector.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import nextId from "react-id-generator";
+import nextId from 'react-id-generator';
 interface IProps {
     value?: string;
     size?: 'small' | 'medium' | 'large'; // defaults to small
     options: Array<{
-        label: string,
-        value: string,
+        label: string;
+        value: string;
         theme: 'light' | 'dark' | 'contrast-light'; // changes the thumb preview based on the selected theme.
-        disabled?: boolean
+        disabled?: boolean;
         checked?: boolean;
     }>;
     required?: boolean;
@@ -34,12 +34,9 @@ export class ThemeSelector extends React.Component<IProps> {
             [`sd-theme-selector__list--${this.props.size}`]: this.props.size,
         });
         return (
-            <div className={classes}>{
-                this.props.options.map((item: any, index: number) => (
-
-                    <div className='sd-theme-selector__item'
-                        key={index}
-                        tabIndex={-1}>
+            <div className={classes}>
+                {this.props.options.map((item: any, index: number) => (
+                    <div className="sd-theme-selector__item" key={index} tabIndex={-1}>
                         <figure
                             className="sd-theme-selector__item-thumb"
                             data-theme={item.theme + '-ui'}
@@ -102,7 +99,9 @@ export class ThemeSelector extends React.Component<IProps> {
                             </svg>
                         </figure>
                         <div className="sd-theme-selector__item-action">
-                            <input type="radio" className="sd-theme-selector__input"
+                            <input
+                                type="radio"
+                                className="sd-theme-selector__input"
                                 id={this.htmlId + index}
                                 tabIndex={0}
                                 name={this.htmlId}
@@ -114,11 +113,13 @@ export class ThemeSelector extends React.Component<IProps> {
                             <label className="sd-theme-selector__label" htmlFor={this.htmlId + index}>
                                 {item.label}
                             </label>
-                            <span className="sd-theme-selector__label-text" aria-hidden="true">{item.label}</span>
+                            <span className="sd-theme-selector__label-text" aria-hidden="true">
+                                {item.label}
+                            </span>
                         </div>
                     </div>
-                ))
-            }</div>
+                ))}
+            </div>
         );
     }
 }

package/app-typescript/components/TimePicker.tsx

@@ -1,17 +1,35 @@
 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';
+import {TimePickerPopover} from './TimePickerPopover';
+import {PopupPositioner} from './ShowPopup';
 
 interface IProps extends IInputWrapper {
-    value: string; // will output time as ISO8601 time string(e.g. 16:55) or an empty string if there's no value
+    value: string | null; // ISO8601 time string(e.g. 16:55) or null if there's no value
     onChange(valueNext: string): void;
     allowSeconds?: boolean;
+    headerTemplate?: React.ReactNode;
+    footerTemplate?: React.ReactNode;
     'data-test-id'?: string;
 }
 
-export class TimePicker extends React.PureComponent<IProps> {
+interface IState {
+    popupOpen: boolean;
+}
+
+export class TimePicker extends React.PureComponent<IProps, IState> {
     private htmlId = nextId();
+    private timeInputRef: React.RefObject<HTMLInputElement>;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.timeInputRef = React.createRef();
+        this.state = {
+            popupOpen: false,
+        };
+    }
 
     render() {
         if (this.props.preview) {
@@ -34,11 +52,47 @@ export class TimePicker extends React.PureComponent<IProps> {
                 labelHidden={this.props.labelHidden}
                 htmlId={this.htmlId}
                 tabindex={this.props.tabindex}
-                inputWrapper={this.props.inputWrapper}
             >
+                {this.state.popupOpen && (
+                    <PopupPositioner
+                        getReferenceElement={() => this.timeInputRef.current as HTMLElement}
+                        placement="bottom-start"
+                        onClose={() => {
+                            this.setState({
+                                popupOpen: false,
+                            });
+                        }}
+                        data-test-id="time-picker-popover"
+                    >
+                        <TimePickerPopover
+                            value={this.props.value}
+                            onChange={this.props.onChange}
+                            closePopup={() => {
+                                this.setState({
+                                    popupOpen: false,
+                                });
+                            }}
+                            allowSeconds={this.props.allowSeconds}
+                            headerTemplate={this.props.headerTemplate}
+                            footerTemplate={this.props.footerTemplate}
+                        />
+                    </PopupPositioner>
+                )}
                 <input
-                    value={this.props.value}
+                    style={{
+                        cursor: 'pointer',
+                    }}
+                    ref={this.timeInputRef}
+                    value={this.props.value ?? undefined}
                     type="time"
+                    onClick={(e) => {
+                        // don't show default popup
+                        e.preventDefault();
+
+                        this.setState({
+                            popupOpen: true,
+                        });
+                    }}
                     className="sd-input__input"
                     id={this.htmlId}
                     aria-labelledby={this.htmlId + 'label'}