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

package/.vscode/settings.json

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

package/app-typescript/components/Menu.tsx

@@ -131,7 +131,7 @@ export class Menu extends React.Component<IProps, {}> {
 
     render() {
         return (
-            <div>
+            <React.Fragment>
                 {
                     this.props.children(this.toggle)
                 }
@@ -167,7 +167,7 @@ export class Menu extends React.Component<IProps, {}> {
                         baseZIndex={this.props.zIndex ?? superdeskTopBarZIndex}
                     />
                 </div>
-            </div>
+            </React.Fragment>
         );
     }
 }

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

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

@@ -0,0 +1,69 @@
+import * as React from 'react';
+declare class GridItemMedia extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemContent extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemContentBlock extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemFooter extends React.PureComponent {
+    render(): JSX.Element;
+}
+interface IPropsFooterBlock {
+    align?: 'left' | 'right';
+}
+declare class GridItemFooterBlock extends React.PureComponent<IPropsFooterBlock> {
+    static defaultProps: {
+        align: string;
+    };
+    render(): JSX.Element;
+}
+interface IPropsFooterActions {
+    autohide?: boolean;
+}
+declare class GridItemFooterActions extends React.PureComponent<IPropsFooterActions> {
+    static defaultProps: {
+        autohide: boolean;
+    };
+    render(): JSX.Element;
+}
+interface IPropsTime {
+    time: string;
+}
+declare class GridItemTime extends React.PureComponent<IPropsTime> {
+    render(): JSX.Element;
+}
+declare class GridItemTitle extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemSlug extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemText extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemTopActions extends React.PureComponent {
+    render(): JSX.Element;
+}
+declare class GridItemCheckWrapper extends React.PureComponent {
+    render(): JSX.Element;
+}
+interface IProps {
+    locked?: boolean;
+    fetched?: boolean;
+    onClick?(): void;
+    itemtype?: 'audio' | 'composite' | 'file' | 'graphic' | 'photo' | 'slideshow' | 'text' | 'video' | string;
+    status?: Array<'actioning' | 'selected' | 'activated' | string>;
+}
+export default class GridItem extends React.PureComponent<IProps> {
+    static defaultProps: {
+        locked: boolean;
+        fetched: boolean;
+        itemtype: string;
+        status: never[];
+    };
+    render(): JSX.Element;
+}
+export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper };

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'x-small' | 'small' | 'medium' | 'large';
+    margin?: '0' | '1' | '2' | '3';
+    gap?: 'small' | 'medium' | 'large' | 'x-large';
+}
+export declare class GridList extends React.PureComponent<IProps> {
+    static defaultProps: {
+        size: string;
+        gap: string;
+    };
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    heading: string;
+    text: string;
+    timestamp?: Date;
+}
+export declare class HeadingText extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    message: string;
+}
+export declare class HelloWorld extends React.Component<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    name?: string;
+    size?: 'small' | 'big';
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'light';
+    className?: string;
+    ariaHidden?: boolean;
+}
+export declare class Icon extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    id?: string;
+    icon?: string;
+    ariaValue: string;
+    size?: 'small';
+    onClick(event: React.MouseEvent): void;
+}
+export declare class IconButton extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    icon?: string;
+    style?: 'basic' | 'translucent';
+}
+export declare class IconLabel extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+interface IProps {
+    value?: string;
+    label?: string;
+    maxLength?: number;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    onChange(newValue: string): void;
+}
+interface IState {
+    value: string;
+    invalid: boolean;
+}
+export declare class Input extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    htmlId: string;
+    handleChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    link?: string;
+    type?: 'default' | 'primary' | 'success' | 'warning' | 'alert' | 'highlight' | 'sd-green';
+    color?: string;
+    size?: 'small' | 'normal' | 'large';
+    onClick?(): void;
+    noTransform?: boolean;
+    style?: 'filled' | 'hollow' | 'translucent';
+}
+export declare class Label extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+interface IMenuItem {
+    id: string;
+    label: string;
+    route?: string;
+}
+interface IMenuGroup {
+    label: string;
+    items: Array<IMenuItem>;
+}
+interface IMenu {
+    navClass?: string;
+    groups: Array<IMenuGroup>;
+    activeItemId: string;
+    ariaLabel?: string;
+    onSelect(id: string, route: string): void;
+}
+interface IState {
+    active: string;
+}
+export declare class LeftMenu extends React.PureComponent<IMenu, IState> {
+    constructor(props: IMenu);
+    handleClick(id: string, route: string): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    overlay?: boolean;
+}
+export declare class Loader extends React.Component<IProps> {
+    render(): JSX.Element | null;
+}
+export {};

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    id?: string;
+    icon?: string;
+    text?: string;
+    iconSize?: 'small' | 'big';
+    theme?: 'light' | 'dark';
+    type?: 'default' | 'primary' | 'highlight' | 'darker';
+    value?: 'button' | 'submit' | 'reset';
+    onClick(): void;
+}
+export declare class NavButton extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,13 @@
+import { PopperOptions } from 'popper.js';
+import * as React from 'react';
+interface IProps {
+    title: string;
+    triggerSelector: string;
+    displayCloseButton?: boolean;
+    placement?: PopperOptions['placement'];
+    zIndex?: number;
+}
+export declare class Popover extends React.Component<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+interface IProps {
+    name: string;
+    isRequered: boolean;
+    type: string;
+    default: string;
+    description: string;
+}
+declare class Prop extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+declare class PropsList extends React.PureComponent {
+    render(): JSX.Element;
+}
+export { Prop, PropsList };

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+interface IProps {
+    value?: string;
+    options: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+    labelSide?: 'left' | 'right';
+    required?: boolean;
+    onChange(nextValue: string): void;
+}
+export declare class Radio extends React.Component<IProps> {
+    htmlId: string;
+    constructor(props: IProps);
+    handleChange(item: any): void;
+    render(): JSX.Element[];
+}
+export {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+interface IProps {
+    value?: string;
+    options: Array<{
+        label: string;
+        value: string;
+        icon?: string;
+        labelHidden?: boolean;
+        disabled?: boolean;
+    }>;
+    required?: boolean;
+    onChange(nextValue: string): void;
+}
+export declare class RadioButton extends React.Component<IProps> {
+    htmlId: string;
+    constructor(props: IProps);
+    handleChange(item: any): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+interface ISelect {
+    value?: string;
+    label?: string;
+    info?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    inlineLabel?: boolean;
+    onChange(newValue: string): void;
+}
+interface IState {
+    value: string;
+    invalid: boolean;
+}
+declare class Select extends React.Component<ISelect, IState> {
+    constructor(props: ISelect);
+    htmlId: string;
+    handleChange(event: React.ChangeEvent<HTMLSelectElement>): void;
+    render(): JSX.Element;
+}
+interface IOption {
+    value?: string;
+}
+declare class Option extends React.PureComponent<IOption> {
+    render(): JSX.Element;
+}
+export { Select, Option };

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Dropdown } from '@superdesk/primereact/dropdown';
+interface IProps<T> {
+    getItems(searchString: string | null): Promise<Array<T>>;
+    value: T;
+    getLabel(option: T): string;
+    onChange(value: T): void;
+    areEqual(a: T, b: T): boolean;
+    itemTemplate: React.ComponentType<{
+        option: T | null;
+    }>;
+    noResultsFoundMessage: string;
+    filterPlaceholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    autoFocus?: boolean;
+    autoOpen?: boolean;
+    width?: 'min' | '100%';
+    zIndex?: number;
+    'data-test-id'?: string;
+}
+interface IState<T> {
+    options: Array<T>;
+    loading: boolean;
+}
+export declare class SelectWithTemplate<T> extends React.Component<IProps<T>, IState<T>> {
+    componentRef: Dropdown | null;
+    constructor(props: IProps<T>);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface IProps {
+    multi: boolean;
+}
+export declare class SlidingToolbar extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare class StrechBar extends React.PureComponent {
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    color?: 'light' | 'darker' | 'blueGrey' | 'blueGreyDarker' | 'darkUi';
+    zIndex?: number;
+    theme?: 'light' | 'dark';
+}
+export declare class SubNav extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface IProps {
+    value: boolean;
+    disabled?: boolean;
+    onChange(nextValue: boolean): void;
+}
+export declare class Switch extends React.PureComponent<IProps> {
+    constructor(props: IProps);
+    onClick(): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,25 @@
+interface ITabs {
+    size?: 'normal' | 'large' | 'small';
+    theme?: 'light' | 'dark';
+    ariaLabel?: string;
+    children: Array<any>;
+    onClick(i: number): void;
+}
+interface ITabLabel {
+    label: string;
+    indexValue: number;
+}
+interface ITabContent {
+    theme?: 'light' | 'dark';
+    children: any;
+    activePanel: number;
+}
+interface ITabPanel {
+    indexValue: number;
+    children: any;
+}
+export declare const TabLabel: ({ label }: ITabLabel) => JSX.Element;
+export declare const Tabs: ({ size, theme, ariaLabel, children, onClick }: ITabs) => JSX.Element;
+export declare const TabContent: ({ theme, children, activePanel }: ITabContent) => JSX.Element;
+export declare const TabPanel: ({ children, indexValue }: ITabPanel) => JSX.Element;
+export {};

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+interface ITabList {
+    size?: 'normal' | 'large' | 'small';
+    theme?: 'light' | 'dark';
+    children: Array<any>;
+}
+interface IState {
+    index: number;
+}
+interface ITab {
+    label: string;
+}
+declare class Tab extends React.PureComponent<ITab> {
+    render(): JSX.Element;
+}
+declare class TabList extends React.PureComponent<ITabList, IState> {
+    constructor(props: ITabList);
+    private handleChange;
+    goTo(label: string): void;
+    render(): JSX.Element;
+}
+export { Tab, TabList };

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

@@ -0,0 +1,9 @@
+interface IProps {
+    text: string;
+    keyValue?: number;
+    shade?: 'light' | 'darker' | 'highlight1' | 'highlight2';
+    shape?: 'round' | 'square';
+    onClick(): void;
+}
+export declare const Tag: ({ text, keyValue, shade, shape, onClick }: IProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+interface ITagInput {
+    items?: Array<any>;
+    label: string;
+    freetype?: boolean;
+}
+export declare const TagInput: ({ items, label, freetype }: ITagInput) => JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+interface IProps {
+    items: Array<any>;
+    keyValue: string;
+    minLength?: number;
+}
+interface IState {
+    selectedItem: any;
+    filteredItems: any;
+}
+export declare class TagInputTest extends React.Component<IProps, IState> {
+    constructor(props: IProps);
+    searchItem(event: any): void;
+    itemTemplate(item: any): JSX.Element;
+    handleItem(e: any): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    value: string;
+    onChange(valueNext: string): void;
+    required?: boolean;
+    disabled?: boolean;
+}
+export declare class TimePicker extends React.PureComponent<IProps> {
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface IProps {
+    text: string;
+    flow?: 'top' | 'left' | 'right' | 'down';
+}
+export declare class Tooltip extends React.PureComponent<IProps> {
+    htmlId: string;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { PopperOptions } from 'popper.js';
+declare type ICloseOthersEvent = CustomEvent<{
+    triggerElement: HTMLElement;
+}>;
+interface IPropsPositioner {
+    triggerSelector: string;
+    placement: PopperOptions['placement'];
+    zIndex?: number;
+    className?: string;
+}
+interface IStatePositioner {
+    open: boolean;
+}
+export declare class Positioner extends React.Component<IPropsPositioner, IStatePositioner> {
+    elementForPositioner: HTMLDivElement;
+    triggerElement: HTMLElement;
+    constructor(props: IPropsPositioner);
+    handleCloseOthers(event: ICloseOthersEvent): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    toggleDropdown(e: MouseEvent): void;
+    closeDropdownOnOutsideClick(wrapper: HTMLElement, event: MouseEvent): void;
+    componentDidUpdate(): void;
+    render(): null;
+}
+export {};

package/app-typescript/dist/index.d.ts

@@ -0,0 +1,56 @@
+export { HelloWorld } from './components/HelloWorld';
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Select, Option } from './components/Select';
+export { SelectWithTemplate } from './components/SelectWithTemplate';
+export { Popover } from './components/Popover';
+export { Label } from './components/Label';
+export { Badge } from './components/Badge';
+export { Alert } from './components/Alert';
+export { AvatarWrapper } from './components/Avatar';
+export { AvatarContentText } from './components/Avatar';
+export { AvatarContentImage } from './components/Avatar';
+export { IconButton } from './components/IconButton';
+export { IconLabel } from './components/IconLabel';
+export { Tooltip } from './components/Tooltip';
+export { DatePicker } from './components/DatePicker';
+export { DatePickerISO } from './components/DatePicker';
+export { DatePickerLocaleSettings } from './components/DatePicker';
+export { TimePicker } from './components/TimePicker';
+export { FormLabel } from './components/FormLabel';
+export { Switch } from './components/Switch';
+export { ButtonGroup } from './components/ButtonGroup';
+export { Loader } from './components/Loader';
+export { Radio } from './components/Radio';
+export { Checkbox } from './components/Checkbox';
+export { RadioButton } from './components/RadioButton';
+export { CheckboxButton } from './components/CheckboxButton';
+export { CheckGroup } from './components/CheckGroup';
+export { CheckButtonGroup } from './components/CheckButtonGroup';
+export { NavButton } from './components/NavButton';
+export { Tab, TabList } from './components/TabList';
+export { LeftMenu } from './components/LeftMenu';
+export { SubNav } from './components/SubNav';
+export { SlidingToolbar } from './components/SlidingToolbar';
+export { StrechBar } from './components/StrechBar';
+export { PropsList, Prop } from './components/PropsList';
+export { Icon } from './components/Icon';
+export { Divider } from './components/Divider';
+export { HeadingText } from './components/HeadingText';
+export { DropdownFirst } from './components/DropdownFirst';
+export { DropdownItem } from './components/DropdownFirst';
+export { DropdownLabel } from './components/DropdownFirst';
+export { DropdownDivider } from './components/DropdownFirst';
+export { Dropdown } from './components/Dropdown';
+export { Tag } from './components/Tag';
+export { TabLabel, TabPanel, TabContent, Tabs } from './components/TabCustom';
+export { EmptyState } from './components/EmptyState';
+export { Autocomplete } from './components/Autocomplete';
+export { DonutChart } from './components/DonutChart';
+export { TagInput } from './components/TagInput';
+export { TagInputTest } from './components/TagInputTest';
+export { Genie } from './components/Genie';
+export { GridList } from './components/GridList';
+export { GridItem, GridItemContent, GridItemMedia, GridItemFooter, GridItemContentBlock, GridItemTime, GridItemTitle, GridItemText, GridItemSlug, GridItemFooterBlock, GridItemFooterActions, GridItemTopActions, GridItemCheckWrapper } from './components/GridItem';
+export declare const ToggleBoxNext: any;
+export declare const reactToAngular1: any;

package/dist/examples.bundle.js

@@ -98219,7 +98219,7 @@ var Menu = /** @class */ (function (_super) {
     Menu.prototype.render = function () {
         var _this = this;
         var _a;
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
                     if (event.key === 'Escape') {
@@ -137927,7 +137927,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
 /* 649 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.25","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.27","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 650 */

package/dist/superdesk-ui.bundle.js

@@ -97480,7 +97480,7 @@ var Menu = /** @class */ (function (_super) {
     Menu.prototype.render = function () {
         var _this = this;
         var _a;
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
                     if (event.key === 'Escape') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "3.0.1-beta.25",
+  "version": "3.0.1-beta.27",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Menu.js

@@ -104,7 +104,7 @@ var Menu = /** @class */ (function (_super) {
     Menu.prototype.render = function () {
         var _this = this;
         var _a;
-        return (React.createElement("div", null,
+        return (React.createElement(React.Fragment, null,
             this.props.children(this.toggle),
             React.createElement("div", { onKeyDown: function (event) {
                     if (event.key === 'Escape') {

package/yarn-error.log

@@ -0,0 +1,111 @@
+Arguments: 
+  /usr/local/bin/node /usr/local/bin/yarn install
+
+PATH: 
+  /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
+
+Yarn version: 
+  1.21.1
+
+Node version: 
+  12.14.1
+
+Platform: 
+  linux x64
+
+Trace: 
+  Error: getaddrinfo EAI_AGAIN registry.yarnpkg.com
+      at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:60:26)
+
+npm manifest: 
+  {
+    "name": "superdesk-ui-framework",
+    "version": "2.1.11",
+    "license": "AGPL-3.0",
+    "repository": {
+      "type": "git",
+      "url": "https://github.com/superdesk/superdesk-ui-framework.git"
+    },
+    "main": "dist/superdesk-ui.bundle.js",
+    "types": "app-typescript/dist/index.d.ts",
+    "contributors": [
+      "Nemanja Pavlovic",
+      "Vladimir Stefanovic",
+      "Darko Tomic",
+      "Aleksandar Jelicic",
+      "Tomas Kikutis"
+    ],
+    "scripts": {
+      "start": "webpack-dev-server --config tasks/webpack.dev.js",
+      "server": "webpack --watch",
+      "build": "webpack && npm run lint && tsc",
+      "lint": "eslint app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'",
+      "prepublishOnly": "npm run build",
+      "prepublish": "patch-package"
+    },
+    "devDependencies": {
+      "@types/classnames": "^2.2.9",
+      "@types/lodash": "4.14.149",
+      "@types/react": "16.8.23",
+      "@types/react-dom": "16.8.0",
+      "@types/react-router-dom": "^5.1.2",
+      "angular": "^1.7.9",
+      "angular-animate": "^1.7.9",
+      "angular-route": "^1.7.9",
+      "babel-core": "^6.26.0",
+      "babel-loader": "^7.1.2",
+      "babel-plugin-transform-object-rest-spread": "^6.26.0",
+      "babel-preset-es2015": "^6.24.1",
+      "babel-preset-react": "^6.24.1",
+      "classnames": "^2.2.5",
+      "clean-webpack-plugin": "^1.0.0",
+      "code-prettify": "^0.1.0",
+      "copy-webpack-plugin": "^4.6.0",
+      "css-loader": "^2.1.1",
+      "eslint": "^4.6.1",
+      "eslint-loader": "^1.9.0",
+      "eslint-plugin-angular": "^3.1.1",
+      "eslint-plugin-react": "^7.3.0",
+      "extract-text-webpack-plugin": "^3.0.2",
+      "file-loader": "^0.11.2",
+      "html-loader": "^0.5.1",
+      "html-webpack-plugin": "^2.30.1",
+      "jquery": "^3.1.1",
+      "jquery-ui": "^1.12.1",
+      "lodash": "4.17.15",
+      "node-sass": "^4.5.3",
+      "patch-package": "6.2.0",
+      "prismjs": "^1.17.1",
+      "prop-types": "^15.6.0",
+      "react": "16.8.6",
+      "react-bootstrap": "^0.31.2",
+      "react-dom": "16.8.6",
+      "react-redux": "^5.0.6",
+      "react-router-dom": "^5.1.2",
+      "redux": "^3.7.2",
+      "redux-form": "^7.0.4",
+      "sass-loader": "^6.0.6",
+      "style-loader": "^0.18.2",
+      "superdesk-code-style": "^1.1.2",
+      "ts-loader": "^6.0.2",
+      "tslint": "^5.18.0",
+      "typescript": "^3.5.1",
+      "url-loader": "^1.1.2",
+      "webpack": "^3.5.5",
+      "webpack-cli": "3.3.10",
+      "webpack-dev-server": "2.11.1",
+      "webpack-merge": "^4.2.1"
+    },
+    "dependencies": {
+      "date-fns": "2.7.0",
+      "popper.js": "1.14.4",
+      "primeicons": "2.0.0",
+      "primereact": "3.3.2"
+    }
+  }
+
+yarn manifest: 
+  No manifest
+
+Lockfile: 
+  No lockfile