superdesk-ui-framework 4.0.27 → 4.0.29

package/app-typescript/components/Alert.tsx

@@ -10,6 +10,7 @@ interface IProps {
     icon?: string;
     banner?: boolean;
     margin?: 'none' | 'small' | 'normal' | 'large';
+    fullWidth?: boolean;
 }
 
 interface IState {
@@ -47,8 +48,17 @@ export class Alert extends React.PureComponent<IProps, IState> {
             'sd-alert__info-btn--hidden': this.state.open,
         });
 
+        const styles: React.CSSProperties = {};
+
+        if (this.props.fullWidth) {
+            styles.width = '100%';
+        }
+
         return (
-            <div className='sd-alert__container'>
+            <div
+                className='sd-alert__container'
+                style={styles}
+            >
                 <div className={classesAlert}>
                     {this.props.icon ?
                         <span className="sd-alert__icon">

package/app-typescript/components/Button.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Icon } from './Icon';
-import { Spinner } from './Spinner';
+import {Icon} from './Icon';
+import {Spinner} from './Spinner';
+import {WithTooltip} from './Tooltip';
 
 interface IPropsButton {
     text: string;
@@ -22,6 +23,7 @@ interface IPropsButton {
     icon?: string;
     disabled?: boolean;
     iconOnly?: boolean;
+    noMargin?: boolean;
     'data-test-id'?: string;
 }
 
@@ -41,21 +43,49 @@ export class Button extends React.PureComponent<IPropsButton> {
         });
 
         return (
-            <button
-                id={this.props.id}
-                className={classes}
-                tabIndex={0}
-                disabled={this.props.disabled || this.props.isLoading}
-                data-loading={this.props.isLoading}
-                onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
-                aria-label={this.props.iconOnly ? this.props.text : ''}
-                data-test-id={this.props['data-test-id']}
-                title={this.props.tooltip}
-            >
-                {this.props.isLoading ? <Spinner size="mini" /> : null}
-                {this.props.icon && !this.props.isLoading ? <Icon ariaHidden name={this.props.icon} /> : null}
-                {this.props.iconOnly ? null : this.props.text}
-            </button>
+            <TooltipWrapper tooltipText={this.props.tooltip}>
+                {({attributes}) => (
+                    <button
+                        {...attributes}
+                        id={this.props.id}
+                        className={classes}
+                        tabIndex={0}
+                        disabled={this.props.disabled || this.props.isLoading}
+                        data-loading={this.props.isLoading}
+                        onClick={this.props.disabled ? () => false : (event) => this.props.onClick(event)}
+                        aria-label={this.props.iconOnly ? this.props.text : ''}
+                        data-test-id={this.props['data-test-id']}
+                        style={this.props.noMargin ? {margin: 0} : undefined}
+                    >
+                        {this.props.isLoading ? <Spinner size="mini" /> : null}
+                        {this.props.icon && !this.props.isLoading ? <Icon ariaHidden name={this.props.icon} /> : null}
+                        {this.props.iconOnly ? null : this.props.text}
+                    </button>
+                )}
+            </TooltipWrapper>
         );
     }
 }
+
+interface ITooltipWrapperProps {
+    tooltipText: string | null | undefined;
+    children: React.ComponentProps<typeof WithTooltip>['children'];
+}
+
+class TooltipWrapper extends React.PureComponent<ITooltipWrapperProps> {
+    render() {
+        const {tooltipText, children} = this.props;
+
+        return (tooltipText ?? '').length > 0
+            ? (
+                <WithTooltip text={tooltipText}>
+                    {({attributes}) => children({attributes})}
+                </WithTooltip>
+            )
+            : (
+                <>
+                    {children({attributes: {}})}
+                </>
+            );
+    }
+}

package/app-typescript/components/FormLabel.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 interface IProps {
     text: string;
     style?: 'normal' | 'light'; // defaults to normal
+    noMinHeight?: boolean;
 }
 
 export class FormLabel extends React.PureComponent<IProps> {
@@ -14,7 +15,12 @@ export class FormLabel extends React.PureComponent<IProps> {
         });
 
         return (
-            <label className={classes}>{this.props.text}</label>
+            <label
+                className={classes}
+                style={this.props.noMinHeight === true ? {minHeight: 'auto'} : undefined}
+            >
+                {this.props.text}
+            </label>
         );
     }
 }

package/app-typescript/components/Label.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import {getTextColor} from '../helpers';
+
 interface IProps {
     text: string;
     link?: string;
@@ -77,16 +79,3 @@ 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;
-
-        return (yiq >= 128) ? 'black' : 'white';
-    } else {
-        return;
-    }
-}

package/app-typescript/components/RadioButtonGroup.tsx

@@ -4,7 +4,9 @@ import nextId from "react-id-generator";
 import {FormLabel} from './Form/FormLabel';
 
 interface IProps {
-    value?: string;
+    value: string;
+    onChange(nextValue: string): void;
+    disabled?: boolean;
     group?: {
         orientation?: 'horizontal' | 'vertical'; // defaults to 'horizontal'
         grid?: boolean;
@@ -22,7 +24,6 @@ interface IProps {
     }>;
     required?: boolean;
     tabindex?: number;
-    onChange(nextValue: string): void;
     'data-test-id'?: string;
 }
 
@@ -35,7 +36,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
     }
 
     handleChange(item: any) {
-        if (!item.disabled) {
+        if (this.props.disabled !== true && item.disabled !== true) {
             this.props.onChange(item.value);
         }
     }
@@ -73,7 +74,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                     tabIndex={this.props.tabindex}
                                     name={this.htmlId}
                                     onChange={() => this.handleChange(item)}
-                                    disabled={item.disabled}
+                                    disabled={this.props.disabled || item.disabled}
                                     required={this.props.required}
                                     checked={item.value === this.props.value} />
                                 <label
@@ -110,7 +111,7 @@ export class RadioButtonGroup extends React.Component<IProps> {
                                         tabIndex={0}
                                         name={this.htmlId}
                                         onChange={() => this.handleChange(item)}
-                                        disabled={item.disabled}
+                                        disabled={this.props.disabled || item.disabled}
                                         required={this.props.required}
                                         checked={item.value === this.props.value} />
                                     <label className="sd-check-button__text-label" htmlFor={this.htmlId + index}

package/app-typescript/components/SelectPreview.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
-import {getTextColor} from './Label';
+import {getTextColor} from '../helpers';
 
 interface IProps<T> {
     items: Array<T>;

package/app-typescript/components/ShowPopup.tsx

@@ -7,7 +7,7 @@ import maxSize from 'popper-max-size-modifier';
 import {getNextZIndex} from '../zIndex';
 
 interface IPropsPopupPositioner {
-    referenceElement: HTMLElement;
+    getReferenceElement(): HTMLElement;
     placement: Placement;
     onClose(): void;
     closeOnHoverEnd?: boolean;
@@ -34,7 +34,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         }
 
         if (
-            this.props.referenceElement.contains(event.target as Node) !== true
+            this.props.getReferenceElement().contains(event.target as Node) !== true
             && this.wrapperEl.contains(event.target as Node) !== true
         ) {
             this.props.onClose();
@@ -66,7 +66,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         window.addEventListener('scroll', this.closeOnScroll, true);
 
         if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
-            this.props.referenceElement.addEventListener('mouseleave', this.closeOnMouseLeave);
+            this.props.getReferenceElement().addEventListener('mouseleave', this.closeOnMouseLeave);
             this.wrapperEl.addEventListener('mouseleave', this.closeOnMouseLeave);
         }
 
@@ -91,7 +91,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
             setTimeout(() => {
                 if (this.wrapperEl != null) {
                     this.popper = createPopper(
-                        this.props.referenceElement,
+                        this.props.getReferenceElement(),
                         this.wrapperEl,
                         {
                             placement: this.props.placement,
@@ -111,7 +111,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
         window.removeEventListener('scroll', this.closeOnScroll, true);
 
         if (this.props.closeOnHoverEnd && this.wrapperEl != null) {
-            this.props.referenceElement.removeEventListener('mouseleave', this.closeOnMouseLeave);
+            this.props.getReferenceElement().removeEventListener('mouseleave', this.closeOnMouseLeave);
             this.wrapperEl.removeEventListener('mouseleave', this.closeOnMouseLeave);
         }
 
@@ -120,19 +120,28 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
 
     render() {
         return (
-            <div
-                ref={(el) => {
-                    this.wrapperEl = el;
-                }}
-                style={{
-                    position: 'absolute',
-                    left: '-100vw',
-                    display: 'flex',
-                    zIndex: this.zIndex,
-                }}
-            >
-                {this.props.children}
-            </div>
+            <>
+                {
+                    ReactDOM.createPortal(
+                        (
+                            <div
+                                ref={(el) => {
+                                    this.wrapperEl = el;
+                                }}
+                                style={{
+                                    position: 'absolute',
+                                    left: '-100vw',
+                                    display: 'flex',
+                                    zIndex: this.zIndex,
+                                }}
+                            >
+                                {this.props.children}
+                            </div>
+                        ),
+                        document.body,
+                    )
+            }
+            </>
         );
     }
 }
@@ -160,7 +169,7 @@ export function showPopup(
     ReactDOM.render(
         (
             <PopupPositioner
-                referenceElement={referenceElement}
+                getReferenceElement={() => referenceElement}
                 placement={placement}
                 onClose={closeFn}
                 closeOnHoverEnd={closeOnHoverEnd || false}

package/app-typescript/components/Tooltip.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import nextId from "react-id-generator";
 import tippy, {Instance, Placement} from 'tippy.js';
 import {assertNever} from '../helpers';
 
 interface IProps {
     text: string | undefined | null;
     flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
+    children(options: {attributes: {[name: string]: string}}): React.ReactNode;
 }
 
 function flowToPlacement(flow: IProps['flow']): Placement | undefined {
@@ -24,14 +26,18 @@ function flowToPlacement(flow: IProps['flow']): Placement | undefined {
     }
 }
 
-export class Tooltip extends React.PureComponent<IProps> {
+const tooltipAttributeName = 'data-with-tooltip';
+const getTooltipSelector = (value: string) => `[${tooltipAttributeName}=${value}]`;
+
+export class WithTooltip extends React.PureComponent<IProps> {
     private id: string;
     private instance: Instance | null;
 
     constructor(props: IProps) {
         super(props);
 
-        this.id = 'tooltip-' + Math.random().toString().slice(2);
+        this.id = nextId();
+
         this.instance = null;
     }
 
@@ -40,7 +46,7 @@ export class Tooltip extends React.PureComponent<IProps> {
         const content = this.props.text;
 
         if (this.instance == null) {
-            this.instance = tippy('#' + this.id, {
+            this.instance = tippy(getTooltipSelector(this.id), {
                 placement: placement,
             })[0];
 
@@ -82,11 +88,21 @@ export class Tooltip extends React.PureComponent<IProps> {
         this.setupTooltip();
     }
 
+    render() {
+        return this.props.children({attributes: {[tooltipAttributeName]: this.id}});
+    }
+}
+
+export class Tooltip extends React.PureComponent<Omit<IProps, 'children'>> {
     render() {
         return (
-            <div id={this.id} style={{display: 'inline-flex'}}>
-                {this.props.children}
-            </div>
+            <WithTooltip text={this.props.text} flow={this.props.flow}>
+                {({attributes}) => (
+                    <div {...attributes} style={{display: 'inline-flex'}}>
+                        {this.props.children}
+                    </div>
+                )}
+            </WithTooltip>
         );
     }
 }

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

@@ -6,7 +6,7 @@ import _debounce from 'lodash/debounce';
 import { InputWrapper } from "../Form";
 import { createPopper, Instance } from '@popperjs/core';
 import {isEqual} from 'lodash';
-import {getTextColor} from '../Label';
+import {getTextColor} from '../../helpers';
 import {IInputWrapper} from '../Form/InputWrapper';
 import {SelectPreview} from '../SelectPreview';
 import {TreeSelectPill} from './TreeSelectPill';
@@ -15,14 +15,7 @@ import {keyboardNavigation} from './KeyboardNavigation';
 import {WithPortal} from '../WithPortal';
 import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 import {getNextZIndex} from '../../zIndex';
-
-const reorder = (list: Array<any>, startIndex: number, endIndex: number) => {
-    const result = Array.from(list);
-    const [removed] = result.splice(startIndex, 1);
-    result.splice(endIndex, 0, removed);
-
-    return result;
-};
+import {arrayMove} from '@superdesk/common';
 
 interface IState<T> {
     value: Array<T>;
@@ -282,14 +275,9 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
     }
 
     removeClick(i: number) {
-        let newTags = this.state.value;
-        newTags?.splice(i, 1);
-
         this.setState({
-            value: newTags,
+            value: this.state.value.filter((_item, index) => index !== i),
         });
-
-        this.props.onChange(this.state.value);
     }
 
     handleMultiLevel(item: ITreeNode<T>) {
@@ -639,13 +627,8 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             return;
         }
 
-        const value = reorder(
-            this.state.value,
-            result.source.index,
-            result.destination.index,
-        );
         this.setState({
-            value: value,
+            value: arrayMove(this.state.value, result.source.index, result.destination.index),
         });
     }
 

package/app-typescript/components/TreeSelect/TreeSelectItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Icon } from "../Icon";
-import {getTextColor} from '../Label';
+import {getTextColor} from '../../helpers';
 import {ITreeNode} from './TreeSelect';
 
 export function getPrefixedItemId(id: string) {

package/app-typescript/components/TreeSelect/TreeSelectPill.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import * as React from "react";
 import {DragHandle} from '../DragHandle';
 import {Icon} from "../Icon";
-import {getTextColor} from '../Label';
+import {getTextColor} from '../../helpers';
 
 interface IProps<T> {
     item: T;

package/app-typescript/helpers.tsx

@@ -5,3 +5,16 @@ export function assertNever(x: never): never {
 export function nameof<T>(name: keyof T): string {
     return name.toString();
 }
+
+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;
+
+        return (yiq >= 128) ? 'black' : 'white';
+    } else {
+        return;
+    }
+}

package/app-typescript/index.ts

@@ -107,6 +107,7 @@ export { ResizeObserverComponent } from './components/ResizeObserverComponent';
 export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 export { CalendarWeekDayItem } from './components/Lists/CalendarWeekDayItem';
+export { getTextColor } from './helpers';
 
 // declare non-typescript exports to prevent errors
 export declare const ToggleBoxNext: any;

package/dist/components/Buttons.tsx

@@ -17,7 +17,7 @@ export default class ButtonsDoc extends React.Component {
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                     <div className="docs-page__content-row">
-                        <Button text="default" onClick={()=> false} />
+                        <Button text="default" onClick={()=> false} tooltip="test tooltip" />
                         <Button text="primary" type="primary" onClick={()=> false} />
                     </div>
                     <p className="docs-page__paragraph">// Other colour options</p>
@@ -101,8 +101,8 @@ export default class ButtonsDoc extends React.Component {
 
                 <h3 className="docs-page__h3">Sizing</h3>
                 <p className="docs-page__paragraph">
-                    For the default button, no size has to be specified. 
-                    To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>. 
+                    For the default button, no size has to be specified.
+                    To change the default size set the <code>size</code> value either to <code>small</code> or <code>large</code>.
                     For the button to take the full width of the container add <code>expand={'{true}'}</code>.
                 </p>
                 <Markup.ReactMarkup>
@@ -120,7 +120,7 @@ export default class ButtonsDoc extends React.Component {
                     </div>
                     <div className="docs-page__content-row">
                         <Button text="small expanded button" expand={true} size="small" onClick={()=> false} />
-                    </div>                    
+                    </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
                         <Button text="button large" size="large" onClick={()=> false} />
@@ -201,7 +201,7 @@ export default class ButtonsDoc extends React.Component {
                         <Button text="success" type="success" icon="ok" onClick={()=> false} />
                         <Button text="warning" type="warning" icon="exclamation-sign" onClick={()=> false} />
                         <Button text="alert" type="alert" icon="warning-sign" onClick={()=> false} />
-                        
+
                         <Button text="default" icon="info-sign" style="hollow" onClick={()=> false} />
                         <Button text="primary" type="primary" icon="plus-sign" style="hollow" onClick={()=> false} />
                         <Button text="success" type="success" icon="ok" style="hollow" onClick={()=> false} />
@@ -217,7 +217,7 @@ export default class ButtonsDoc extends React.Component {
                 </Markup.ReactMarkup>
 
                 <h3 className="docs-page__h3">Buttons with icon font only</h3>
-                <p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>. 
+                <p className="docs-page__paragraph">Buttons can also contain only an icon, without any visible text. To achieve this specify the <code>icon</code> value and set <code>iconOnly={true}</code>.
                 The specified text value will be used for the <code>aria-label</code>.</p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>