superdesk-ui-framework 3.0.1-beta.15 → 3.0.1-beta.16

package/.vscode/settings.json

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

package/app/styles/_table-list.scss

@@ -84,6 +84,10 @@ $table-list-palette: $sd-basic-palette;
             }
         }
     }
+    &--locked {
+        border-color: hsla(350, 70%, 60%, 0.75);
+        border-left-color: hsla(350, 70%, 60%, 0.75) !important;
+    }
     &.table-list__item--selected.table-list__item--clickable {
         &:hover {
             box-shadow: var(--sd-shadow__item--selected-thin);

package/app/styles/layout/_editor.scss

@@ -365,6 +365,7 @@
         overflow-y: auto;
         width: auto;
         min-width: 45vw;
+        max-width: 45vw;
         &.sd-editor__container--large {
             min-width: 52vw;
         }

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

@@ -16,7 +16,7 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
         super(props);
 
         this.state = {
-            collapsed: false,
+            collapsed: this.props.collapsed ? this.props.collapsed : false,
         };
     }
 

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

@@ -31,8 +31,10 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                 )}
                 <AuthoringMainContent>
                     {this.props.authoringHeader && (
-                        <AuthoringInnerHeader headerPadding={this.props.headerPadding}>
-                        {this.props.authoringHeader}
+                        <AuthoringInnerHeader
+                        headerPadding={this.props.headerPadding}
+                        collapsed={this.props.headerCollapsed}>
+                            {this.props.authoringHeader}
                     </AuthoringInnerHeader>
                     )}
                     {this.props.authoringBookmarks && (

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

@@ -49,7 +49,11 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
     });
 
         return (
-                <div className={classes} onClick={this.onSingleClick} onDoubleClick={this.onDoubleClick}>
+                <div
+                role='listitem'
+                className={classes}
+                onClick={this.onSingleClick}
+                onDoubleClick={this.onDoubleClick}>
                     {this.props.locked
                     ? <div className="sd-list-item__border sd-list-item__border--locked"></div>
                     : <div className="sd-list-item__border"></div>}
@@ -100,7 +104,7 @@ class ContentList extends React.PureComponent<IProps> {
     render() {
         let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
         return (
-            <ul className={classes}>
+            <div role='list' className={classes}>
                 {this.props.items.map((item, index) => {
                     return <ContentListItem
                     key={index}
@@ -114,7 +118,7 @@ class ContentList extends React.PureComponent<IProps> {
                     onClick={item.onClick}
                     onDoubleClick={item.onDoubleClick} />;
                 })}
-            </ul>
+            </div>
         );
     }
 }

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

@@ -25,6 +25,8 @@ export interface IPropsArrayItem {
     hexColor?: string;
     onClick?(): void;
     onDoubleClick?(): void;
+    locked?: boolean;
+    positionLocked?: boolean;
 }
 
 interface IState {
@@ -113,7 +115,8 @@ class TableList extends React.PureComponent<IProps, IState> {
                     ? <DragDropContext onDragEnd={this.onDragEnd}>
                         <Droppable droppableId="droppable">
                             {(provided, _snapshot) => (
-                                <ul
+                                <div
+                                    role='list'
                                     className={classes}
                                     ref={provided.innerRef}
                                     {...provided.droppableProps} >
@@ -139,6 +142,8 @@ class TableList extends React.PureComponent<IProps, IState> {
                                                             ? this.props.itemsDropdown(index)
                                                             : []}
                                                         hexColor={item.hexColor}
+                                                        locked={item.locked}
+                                                        positionLocked={item.positionLocked}
                                                         onAddItem={() => this.props.onAddItem
                                                             && this.props.onAddItem(index, item)}
                                                         showDragHandle={this.props.showDragHandle}
@@ -149,19 +154,19 @@ class TableList extends React.PureComponent<IProps, IState> {
                                     ))}
                                     {provided.placeholder}
                                     {(this.props.addItem && !this.props.readOnly) &&
-                                        <li className={`table-list__add-item table-list__item--margin`}>
+                                        <div className={`table-list__add-item table-list__item--margin`}>
                                             <Tooltip text='Add item' flow='top' appendToBody={true}>
                                                 <div className='table-list__add-item--container sd-margin-x--auto'>
                                                     {this.dropDown()}
                                                 </div>
                                             </Tooltip>
-                                        </li>
+                                        </div>
                                     }
-                                </ul>
+                                </div>
                             )}
                         </Droppable>
                     </DragDropContext>
-                    : <ul className={classes}>
+                    : <div role='list' className={classes}>
                         {this.state.items.map((item: IPropsArrayItem, index: number) => (
                             <TableListItem
                                 key={index}
@@ -176,29 +181,31 @@ class TableList extends React.PureComponent<IProps, IState> {
                                 addItem={this.props.addItem}
                                 itemsDropdown={() => this.props.itemsDropdown ? this.props.itemsDropdown(index) : []}
                                 hexColor={item.hexColor}
+                                locked={item.locked}
+                                positionLocked={item.positionLocked}
                                 onAddItem={() => this.props.onAddItem
                                     && this.props.onAddItem(index, item)}
                             />
                         ))}
                         {(this.props.addItem && !this.props.readOnly) &&
-                            <li className={`table-list__add-item table-list__item--margin`}>
+                            <div className={`table-list__add-item table-list__item--margin`}>
                                 <Tooltip text='Add item' flow='top' appendToBody={true}>
                                     <div className='table-list__add-item--container sd-margin-x--auto'>
                                         {this.dropDown()}
                                     </div>
                                 </Tooltip>
-                            </li>
+                            </div>
                         }
-                    </ul>
-                : (this.props.addItem && !this.props.readOnly) ? <ul className={classes}>
-                    <li className={`table-list__add-item table-list__item--margin`}>
+                    </div>
+                : (this.props.addItem && !this.props.readOnly) ? <div role='list' className={classes}>
+                    <div className={`table-list__add-item table-list__item--margin`}>
                         <Tooltip text='Add item' flow='top' appendToBody={true}>
                             <div className='table-list__add-item--container sd-margin-x--auto'>
                                 {this.dropDown()}
                             </div>
                         </Tooltip>
-                    </li>
-                </ul>
+                    </div>
+                </div>
                 : null
         );
     }
@@ -213,6 +220,8 @@ export interface IPropsItem {
     dragAndDrop?: boolean;
     hexColor?: string;
     showDragHandle?: 'always' | 'onHover' | 'none';
+    locked?: boolean;
+    positionLocked?: boolean;
     onClick?(): void;
     onDoubleClick?(): void;
     onSelect?(): void;
@@ -251,14 +260,17 @@ class TableListItem extends React.PureComponent<IPropsItem> {
         let classes = classNames('table-list__item', {
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
+            'table-list__item--locked': this.props.locked,
+            'table-list__item--position-locked': this.props.positionLocked,
             'table-list__item--drag-handles-always': !this.props.showDragHandle,
             'table-list__item--drag-handles-none': this.props.showDragHandle === 'none',
         });
 
         return (
             this.props.addItem ?
-                <li className='table-list__item-container'>
+                <div className='table-list__item-container'>
                     <div
+                        role='listitem'
                         onClick={() => this.onSingleClick()}
                         onDoubleClick={() => this.onDoubleClick()}
                         className={classes}>
@@ -297,8 +309,9 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                             </div>
                         </Tooltip>
                     </div>
-                </li>
-                : <li
+                </div>
+                : <div
+                    role='listitem'
                     className={`${classes} table-list__item--margin`}
                     onClick={() => this.onSingleClick()}
                     onDoubleClick={() => this.onDoubleClick()}>
@@ -317,7 +330,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                     {this.props.action && <div className='table-list__slide-in-actions'>
                         {this.props.action}
                     </div>}
-                </li>
+                </div>
         );
     }
 }

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 {};

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

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

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { LocaleSettings, CalendarProps } from '@superdesk/primereact/calendar';
+export declare type DatePickerLocaleSettings = Omit<LocaleSettings, 'today' | 'clear'>;
+interface IDatePickerBase {
+    disabled?: boolean;
+    dateFormat: string;
+    shortcuts?: Array<{
+        days: number;
+        label: string;
+    }>;
+    locale?: DatePickerLocaleSettings;
+}
+interface IDatePicker extends IDatePickerBase {
+    value: Date | null;
+    onChange(valueNext: Date | null): void;
+}
+interface IState {
+    value: CalendarProps['value'];
+    valid: boolean;
+}
+export declare class DatePicker extends React.PureComponent<IDatePicker, IState> {
+    private instance;
+    hidePopupOnScroll: () => void;
+    constructor(props: IDatePicker);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: IDatePicker): void;
+    render(): JSX.Element;
+}
+interface IDatePickerISO extends IDatePickerBase {
+    value: string;
+    onChange(value: string): void;
+}
+export declare class DatePickerISO extends React.PureComponent<IDatePickerISO> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    border?: boolean;
+}
+export declare class Divider extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChartData, ChartOptions } from 'chart.js';
+interface IProps {
+    data: ChartData;
+    options: ChartOptions;
+    width: string;
+    height: string;
+}
+export declare class DonutChart extends React.Component<IProps, {}> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface IMenuItem {
+    label: string;
+    icon?: string;
+    onSelect(): void;
+}
+export interface ISubmenu {
+    type: 'submenu';
+    label: string;
+    icon?: string;
+    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+}
+export interface IMenuGroup {
+    type: 'group';
+    label?: string;
+    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+}
+interface IMenu {
+    label?: string;
+    align?: 'left' | 'right';
+    items: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    header?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    footer?: Array<IMenuItem | ISubmenu | IMenuGroup | 'divider'>;
+    append?: boolean;
+    children: React.ReactNode;
+}
+export declare const Dropdown: ({ items, header, footer, children, append, align, }: IMenu) => JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+interface IProps {
+    name: string;
+    align?: 'left' | 'right';
+    side?: 'left' | 'right';
+    icon?: string;
+    navDropdown?: boolean;
+    level?: boolean;
+    headerFooter?: boolean;
+    children: React.ReactNode;
+}
+interface IPropsItem {
+    text: string;
+    noLink?: boolean;
+    icon?: string;
+    onSelect(): void;
+    children?: never;
+}
+interface IPropsLabel {
+    text: string;
+    children?: never;
+}
+interface IPropsMenu {
+    title: string;
+    children: React.ReactNode;
+}
+export declare const DropdownFirst: {
+    ({ name, align, side, level, icon, headerFooter, navDropdown, children, }: IProps): JSX.Element;
+    Item: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+    Divider: ({}: {}) => JSX.Element;
+    Label: ({ text, }: IPropsLabel) => JSX.Element;
+    Header: ({ title, children, }: IPropsMenu) => JSX.Element;
+    Body: ({ title, children, }: IPropsMenu) => JSX.Element;
+    Footer: ({ title, children, }: IPropsMenu) => JSX.Element;
+};
+export declare const DropdownItem: ({ text, icon, noLink, onSelect, }: IPropsItem) => JSX.Element;
+export declare const DropdownDivider: ({}: {}) => JSX.Element;
+export declare const DropdownLabel: ({ text, }: IPropsLabel) => JSX.Element;
+export declare const DropdownHeader: ({ title, children, }: IPropsMenu) => JSX.Element;
+export declare const DropdownBody: ({ title, children, }: IPropsMenu) => JSX.Element;
+export declare const DropdownFooter: ({ title, children, }: IPropsMenu) => JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    illustration?: string;
+    size?: 'small' | 'large';
+    title: string;
+    description?: string;
+}
+export declare class EmptyState extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    style?: 'normal' | 'light';
+}
+export declare class FormLabel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IProps<T> {
+    val: T;
+}
+export declare class Genie<T extends string> extends React.PureComponent<IProps<T>> {
+    render(): JSX.Element;
+}
+export {};
+
+
+interface Id {
+    prop<T>: Genie<T>;
+}