superdesk-ui-framework 3.0.1-beta.26 → 3.0.1-beta.27

package/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "cSpell.words": [
+        "qcode"
+    ]
+}

package/app/styles/_sd-tag-input.scss

@@ -276,7 +276,6 @@ tags-input,
             }
         }
         .suggestion-item {
-            position: relative;
             padding: 0.5rem 1rem;
             cursor: pointer;
             white-space: nowrap;
@@ -313,20 +312,6 @@ tags-input,
             justify-content: space-between;
             align-items: center;
         }
-        .suggestion-item--bgcolor {
-            min-height: 1.5em;
-            min-width: 1.5em;
-            padding: 4px 0;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            border-radius: 99px;
-            white-space: nowrap;
-
-            &[style] {
-                padding-inline: 8px;
-            }
-        }
         .suggestion-item--disabled {
             opacity: 0.5;
         }
@@ -508,11 +493,6 @@ tags-input,
     }
 }
 
-.tags-input--single-select {
-    display: grid !important;
-    align-items: center !important;
-}
-
 .tags-input--multi-select,
 .tags-input--single-select {
     position: relative;
@@ -566,7 +546,7 @@ tags-input,
     .tags-input__remove-button {
         display: flex;
         align-items: center;
-        align-self: center;
+        align-self: flex-end;
         margin-inline-start: auto;
         z-index: 2;
         cursor: pointer;
@@ -581,18 +561,3 @@ tags-input,
         font-weight: 300;
     }
 }
-
-.item-border {
-    width: 5px;
-    z-index: 2;
-    position: absolute;
-    inset-block: 7px;
-    inset-inline-start: 3px;
-    border-radius: 2px;
-
-    &-selected {
-        inset-block: 5px;   
-    }
-}
-
-

package/app/styles/_table-list.scss

@@ -6,7 +6,6 @@
     flex-direction: column;
     align-self: stretch;
     overflow: hidden !important;
-    padding: 1px;
     //gap: $sd-base-increment * 1.5;
     &--comfortable {
         gap: $sd-base-increment * 2;

package/app/styles/primereact/_pr-dialog.scss

@@ -43,10 +43,6 @@
     overflow-y: auto;
 }
 
-.p-dialog-flex {
-    display: flex;
-}
-
 .p-dialog-header {
     display: flex;
     align-items: center;

package/app-typescript/components/Label.tsx

@@ -78,15 +78,11 @@ export class Label extends React.PureComponent<IProps> {
     }
 }
 
-export function getTextColor(backgroundColor: string): 'black' | 'white' | undefined {
-    if (backgroundColor) {
-        const r = parseInt(backgroundColor.substr(1, 2), 16);
-        const g = parseInt(backgroundColor.substr(3, 2), 16);
-        const b = parseInt(backgroundColor.substr(5, 2), 16);
-        const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
+export function getTextColor(backgroundColor: string): 'black' | 'white' {
+    const r = parseInt(backgroundColor.substr(1, 2), 16);
+    const g = parseInt(backgroundColor.substr(3, 2), 16);
+    const b = parseInt(backgroundColor.substr(5, 2), 16);
+    const yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
 
-        return (yiq >= 128) ? 'black' : 'white';
-    } else {
-        return;
-    }
+    return (yiq >= 128) ? 'black' : 'white';
 }

package/app-typescript/components/Layouts/AuthoringFrame.tsx

@@ -16,7 +16,6 @@ interface IProps {
     header?: React.ReactNode;
     main?: React.ReactNode;
     sideBar?: React.ReactNode;
-    sideBarClosed?: boolean;
     sidePanel?: React.ReactNode;
     sideOverlay?: React.ReactNode;
     sideOverlayOpen?: boolean;
@@ -57,7 +56,7 @@ export class AuthoringFrame extends React.PureComponent<IProps> {
                     </AuthoringFrameSidePanelOverlay>
                 )}
                 {this.props.sideBar && (
-                    <AuthoringFrameRightBar closed={this.props.sideBarClosed}>
+                    <AuthoringFrameRightBar>
                         {this.props.sideBar}
                     </AuthoringFrameRightBar>
                 )}

package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx

@@ -2,31 +2,12 @@ import * as React from 'react';
 
 interface IProps {
     children?: React.ReactNode;
-    closed?: boolean;
 }
 
-interface IState {
-    children?: React.ReactNode;
-    closed?: boolean;
-}
-
-export class AuthoringFrameRightBar extends React.PureComponent<IProps, IState> {
-    constructor(props: IProps) {
-        super(props);
-        this.state = {
-            closed: this.props.closed ? this.props.closed : false,
-        };
-    }
-    componentDidUpdate(prevProps: Readonly<IProps>): void {
-        if (prevProps.closed !== this.props.closed) {
-            this.setState({
-                closed: this.props.closed,
-            });
-        }
-    }
+export class AuthoringFrameRightBar extends React.PureComponent<IProps> {
     render() {
         return (
-            !this.state.closed && <div className="sd-editor-grid__sidetabs-bar">
+            <div className="sd-editor-grid__sidetabs-bar">
                 {this.props.children}
             </div>
         );

package/app-typescript/components/Lists/TableList.tsx

@@ -4,7 +4,6 @@ import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautif
 import { Tooltip } from '../Tooltip';
 import { Button } from '../Button';
 import { Dropdown, IMenuItem, ISubmenu, IMenuGroup } from '../Dropdown';
-import ReactDOM from 'react-dom';
 
 export interface IProps {
     array: Array<IPropsArrayItem>;
@@ -13,7 +12,6 @@ export interface IProps {
     className?: string;
     readOnly?: boolean;
     showDragHandle?: 'always' | 'onHover' | 'none'; // always default
-    append?: boolean;
     onDrag?(start: number, end: number): void;
     onAddItem?(index: number, item?: IPropsArrayItem ): void;
     itemsDropdown?(index?: number): Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
@@ -124,23 +122,8 @@ class TableList extends React.PureComponent<IProps, IState> {
                                     {...provided.droppableProps} >
                                     {this.state.items.map((item: IPropsArrayItem, index: number) => (
                                         <Draggable key={index} draggableId={`${index}`} index={index}>
-                                            {(provided2, snapshot) => (
-                                                this.props.append
-                                                ? <PortalItem
-                                                    provided={provided2}
-                                                    snapshot={snapshot}
-                                                    item={item}
-                                                    index={index}
-                                                    dragAndDrop={this.props.dragAndDrop}
-                                                    showDragHandle={this.props.showDragHandle}
-                                                    addItem={this.props.addItem}
-                                                    onAddItem={() => this.props.onAddItem
-                                                        && this.props.onAddItem(index, item)}
-                                                    itemsDropdown={() => this.props.itemsDropdown
-                                                        ? this.props.itemsDropdown(index)
-                                                        : []}
-                                                />
-                                                : <div
+                                            {(provided2, _snapshot2) => (
+                                                <div
                                                     ref={provided2.innerRef}
                                                     {...provided2.draggableProps}
                                                     {...provided2.dragHandleProps} >
@@ -352,49 +335,6 @@ class TableListItem extends React.PureComponent<IPropsItem> {
     }
 }
 
-class PortalItem extends React.PureComponent {
-    props: any;
-    render() {
-        const provided = this.props.provided;
-        const snapshot = this.props.snapshot;
-
-        const usePortal: boolean = snapshot.isDragging;
-
-        const child = (
-            <div
-                ref={provided.innerRef}
-                {...provided.draggableProps}
-                {...provided.dragHandleProps}>
-                <TableListItem
-                    dragAndDrop={this.props.dragAndDrop}
-                    start={this.props.item.start}
-                    center={this.props.item.center}
-                    end={this.props.item.end}
-                    action={this.props.item.action}
-                    onClick={this.props.item.onClick ? this.props.item.onClick : undefined}
-                    onDoubleClick={this.props.item.onDoubleClick
-                        ? this.props.item.onDoubleClick
-                        : undefined}
-                    addItem={this.props.addItem}
-                    itemsDropdown={this.props.itemsDropdown}
-                    hexColor={this.props.item.hexColor}
-                    locked={this.props.item.locked}
-                    positionLocked={this.props.item.positionLocked}
-                    onAddItem={() => this.props.onAddItem}
-                    showDragHandle={this.props.showDragHandle}
-                />
-            </div>
-        );
-
-        if (!usePortal) {
-            return child;
-        }
-
-        // if dragging - put the item in a portal
-        return ReactDOM.createPortal(child, document.body);
-    }
-}
-
 export {
     TableList, TableListItem
 };

package/app-typescript/components/Spacer.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 export interface IPropsSpacer {
     h?: boolean; // horizontal
     v?: boolean; // vertical
-    gap: '0' | '4' | '8' | '16' | '32' | '64';
+    gap: '4' | '8' | '16' | '32' | '64';
     justifyContent?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
     alignItems?: 'start' | 'end' | 'center' | 'stretch';
     noGrow?: boolean;

package/app-typescript/components/TreeSelect.tsx

@@ -6,7 +6,6 @@ import _debounce from 'lodash/debounce';
 import { InputWrapper } from "./Form";
 import { createPopper } from '@popperjs/core';
 import {isEqual} from 'lodash';
-import {getTextColor} from './Label';
 
 interface IState<T> {
     value: Array<T>;
@@ -45,10 +44,8 @@ interface IPropsBase<T> {
     disabled?: boolean;
     getLabel(item: T): string;
     getId(item: T): string;
-    getBackgroundColor?(item: T): string;
-    getBorderColor?(item: T): string;
     optionTemplate?(item: T): React.ComponentType<T> | JSX.Element;
-    valueTemplate?(item: T, Wrapper: any): React.ComponentType<T> | JSX.Element;
+    valueTemplate?(item: T): React.ComponentType<T> | JSX.Element;
     onChange(e: Array<T>): void;
 }
 
@@ -105,6 +102,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.toggleMenu = this.toggleMenu.bind(this);
         this.dropdownRef = React.createRef();
         this.openDropdownRef = React.createRef();
+
     }
 
     componentDidMount = () => {
@@ -341,24 +339,17 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                         event.stopPropagation();
                         this.handleTree(event, option);
                     }}>
-                        {this.props.getBorderColor
-                        && <div className="item-border"
-                        style={{backgroundColor: this.props.getBorderColor(option.value)}}></div>}
-                        <span
-                        style={this.props.getBackgroundColor
-                            ? {backgroundColor: this.props.getBackgroundColor(option.value),
-                            color: getTextColor(this.props.getBackgroundColor(option.value))}
-                            : undefined}
-                        className={'suggestion-item--bgcolor'
-                        + (selectedItem ? ' suggestion-item--disabled' : '')}
-                        >
-                            {this.props.optionTemplate
+                        {this.props.optionTemplate
                             ? this.props.optionTemplate(option.value)
-                            : this.props.getLabel(option.value)}
-                        </span>
-                        {option.children && <span className="suggestion-item__icon">
-                            <Icon name="chevron-right-thin"></Icon>
-                        </span>}
+                            : <span
+                            className={selectedItem
+                            ? 'suggestion-item--disabled' : undefined}
+                            >
+                                {this.props.getLabel(option.value)}
+                            </span>}
+                            {option.children && <span className="suggestion-item__icon">
+                                <Icon name="chevron-right-thin"></Icon>
+                            </span>}
                     </li>;
                 });
             }
@@ -460,46 +451,27 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                             </button>}
                             <ul className="tags-input__tag-list">
                                 {this.state.value.map((item, i: number) => {
-                                    const Wrapper: React.ComponentType<{backgroundColor?: string}>
-                                    = ({backgroundColor, children}) => (
+                                    return <React.Fragment key={i}>
                                         <li
                                         className={"tags-input__tag-item tags-input__tag-item--multi-select"
                                         + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
-                                        onClick={() => !this.props.readOnly && this.removeClick(i)}
-                                        style={this.props.valueTemplate
-                                        ? {backgroundColor}
-                                        : this.props.getBackgroundColor
-                                        && {backgroundColor: this.props.getBackgroundColor(item)}}>
-                                            <span
-                                            style={{color: backgroundColor
-                                            ? getTextColor(backgroundColor)
-                                            : this.props.getBackgroundColor
-                                            &&  getTextColor(this.props.getBackgroundColor(item))}}
-                                            className="tags-input__helper-box">
-                                                {children}
-                                                {!this.props.readOnly && <span className="tags-input__remove-button">
+                                        onClick={() => this.props.readOnly || this.removeClick(i)}>
+                                            <span className="tags-input__helper-box">
+                                                {this.props.valueTemplate
+                                                ? this.props.valueTemplate(item)
+                                                : <span>{this.props.getLabel(item)}</span>}
+                                                {this.props.readOnly
+                                                || <span className="tags-input__remove-button">
                                                     <Icon name="close-small"></Icon>
                                                 </span>}
                                             </span>
                                         </li>
-                                    );
-
-                                    return (
-                                        <React.Fragment key={i}>
-                                            {this.props.valueTemplate
-                                            ? this.props.valueTemplate(item, Wrapper)
-                                            : <Wrapper>
-                                                <span>{this.props.getLabel(item)}</span>
-                                            </Wrapper>
-                                            }
-                                        </React.Fragment>
-                                    );
+                                    </React.Fragment>;
                                 })}
                             </ul>
                             {this.state.value.length > 0
                                 ? this.props.readOnly
                                 || <button className="tags-input__remove-value"
-                                style={{position: 'relative', bottom: '2px'}}
                                 onClick={() => this.setState({value: []})}>
                                     <Icon name='remove-sign'></Icon>
                                 </button> : null}
@@ -518,40 +490,21 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                 </span>
                             </span>}
                             {this.state.value.map((item, i: number) => {
-                                const Wrapper: React.ComponentType<{backgroundColor?: string, borderColor?: string}>
-                                = ({backgroundColor, borderColor, children}) => (
+                                return <React.Fragment key={i}>
                                     <span
                                     className={ 'tags-input__single-item'
                                     + (this.props.readOnly ? ' tags-input__tag-item--readonly' : '')}
                                     onClick={() => this.props.readOnly || this.removeClick(i)}>
-                                        {this.props.getBorderColor
-                                        && <div className="item-border item-border-selected"
-                                        style={borderColor
-                                        ? {backgroundColor: borderColor}
-                                        : {backgroundColor: this.props.getBorderColor(item)}}></div>}
-                                        <span
-                                        style={{color: backgroundColor && getTextColor(backgroundColor)}}
-                                        className="tags-input__helper-box">
-                                            <span
-                                            className={backgroundColor && `tags-input__tag-item`}
-                                            style={{backgroundColor, margin: 0}}>
-                                                {children}
-                                            </span>
+                                        <span className="tags-input__helper-box">
+                                            {this.props.valueTemplate
+                                            ? this.props.valueTemplate(item)
+                                            : <span>{this.props.getLabel(item)}</span>}
                                             {this.props.readOnly
                                             || <span className="tags-input__remove-button">
                                                 <Icon name='remove-sign'></Icon>
                                             </span>}
                                         </span>
                                     </span>
-                                );
-
-                                return <React.Fragment key={i}>
-                                    {this.props.valueTemplate
-                                    ? this.props.valueTemplate(item, Wrapper)
-                                    : <Wrapper>
-                                        <span>{this.props.getLabel(item)}</span>
-                                    </Wrapper>
-                                    }
                                 </React.Fragment>;
                             })}
                        </div>
@@ -630,19 +583,14 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
                                             event.stopPropagation();
                                             this.handleTree(event, option);
                                         }}>
-                                            {(this.props.getBorderColor && !this.props.allowMultiple) && <div className="item-border" style={{backgroundColor: this.props.getBorderColor(option.value)}}></div>}
-                                            <span
-                                            style={(this.props.getBackgroundColor && option.value)
-                                                ? {backgroundColor: this.props.getBackgroundColor(option.value),
-                                                color: getTextColor(this.props.getBackgroundColor(option.value))}
-                                                : undefined}
-                                            className={'suggestion-item--bgcolor'
-                                            + (selectedItem ? ' suggestion-item--disabled' : '')}
+                                            {this.props.optionTemplate
+                                            ? this.props.optionTemplate(option.value)
+                                            : <span
+                                            className={selectedItem
+                                            ? 'suggestion-item--disabled' : undefined}
                                             >
-                                                {this.props.optionTemplate
-                                                ? this.props.optionTemplate(option.value)
-                                                : this.props.getLabel(option.value)}
-                                            </span>
+                                                {this.props.getLabel(option.value)}
+                                            </span>}
                                             {option.children && <span className="suggestion-item__icon">
                                                 <Icon name="chevron-right-thin"></Icon>
                                             </span>}

package/app-typescript/dist/components/Alert.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface IProps {
+    type?: 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    style?: 'filled' | 'hollow';
+    size?: 'normal' | 'small';
+    restoreIcon?: 'info' | 'help';
+}
+interface IState {
+    open: boolean;
+}
+export declare class Alert extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps);
+    onToggle(): void;
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Autocomplete.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+interface IProps {
+    items: Array<any>;
+    keyValue?: string;
+    minLength?: number;
+    value?: string | object;
+    label?: string;
+    placeholder?: string;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    isSearchField?: boolean;
+    listItemTemplate?(value: any): any;
+    search?(searhString: string, callback: (result: Array<any>) => void): {
+        cancel: () => void;
+    };
+    onChange(newValue: string): void;
+    onSelect?(suggestion: string): void;
+}
+interface IState {
+    selectedItem: any;
+    filteredItems: any;
+    invalid: boolean;
+    focused: boolean;
+}
+export declare class Autocomplete extends React.Component<IProps, IState> {
+    latestCall?: {
+        cancel: () => void;
+    };
+    constructor(props: IProps);
+    htmlId: string;
+    search(term: string): void;
+    searchItem(event: any): void;
+    handleChange(event: {
+        originalEvent: Event;
+        value: any;
+    }): void;
+    handleSelect(event: {
+        originalEvent: Event;
+        value: any;
+    }): void;
+    handleInputClear(): void;
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Avatar.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+interface IBase {
+    tooltipText?: string;
+}
+interface IImageAvatar extends IBase {
+    imageUrl?: string;
+}
+interface ITextAvatar extends IBase {
+    text: string;
+}
+export declare class AvatarContentText extends React.PureComponent<ITextAvatar> {
+    render(): JSX.Element;
+}
+export declare class AvatarContentImage extends React.PureComponent<IImageAvatar> {
+    render(): JSX.Element;
+}
+interface IPropsAvatarWrapper {
+    size?: 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+    statusIndicator?: {
+        status: 'online' | 'offline';
+        tooltipText?: string;
+    };
+    administratorIndicator?: {
+        enabled: boolean;
+        tooltipText?: string;
+    };
+    children: React.ReactNode;
+    'data-test-id'?: string;
+}
+export declare class AvatarWrapper extends React.PureComponent<IPropsAvatarWrapper> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Badge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps {
+    text?: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
+    color?: string;
+    shape?: 'round' | 'square';
+    children?: React.ReactNode;
+    'data-test-id'?: string;
+}
+export declare class Badge extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Button.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+interface IButtonBase {
+    id?: string;
+    theme?: 'light' | 'dark';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    size?: 'small' | 'normal' | 'large';
+    children?: never;
+    icon?: string;
+    disabled?: boolean;
+    iconOnly?: boolean;
+    onClick(): void;
+    'data-test-id'?: string;
+}
+interface IPropsButton extends IButtonBase {
+    text: string;
+    expand?: boolean;
+    style?: 'filled' | 'hollow' | 'text-only';
+    shape?: 'square' | 'round';
+}
+export declare class Button extends React.PureComponent<IPropsButton> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    orientation?: 'horizontal' | 'vertical';
+    spaces?: 'comfort' | 'compact';
+    align?: 'left' | 'right' | 'center' | 'inline';
+    padded?: boolean;
+    children: React.ReactNode;
+}
+export declare class ButtonGroup extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/CheckButtonGroup.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    orientation?: 'horizontal' | 'vertical';
+    grid?: boolean;
+    align?: 'left' | 'right' | 'center' | 'inline';
+    padded?: boolean;
+}
+export declare class CheckButtonGroup extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/CheckGroup.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    orientation?: 'horizontal' | 'vertical';
+    children: React.ReactNode;
+}
+export declare class CheckGroup extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

package/app-typescript/dist/components/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface IProps {
+    label: {
+        text: string;
+        side?: 'left' | 'right';
+        hidden?: boolean;
+    };
+    checked?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    onChange(nextValue: boolean): void;
+}
+export declare class Checkbox extends React.Component<IProps> {
+    htmlId: string;
+    constructor(props: IProps);
+    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};