superdesk-ui-framework 4.0.13 → 4.0.16

package/.github/workflows/publish-to-npm.yml

@@ -4,6 +4,7 @@ on:
     push:
         branches:
             - 'develop'
+            - 'v3'
 
 jobs:
     publish:

package/app/styles/app.scss

@@ -108,6 +108,7 @@
 // Prime React
 @import '../../node_modules/@superdesk/primereact/resources/primereact.min.css';
 @import '../../node_modules/primeicons/primeicons.css';
+@import '~tippy.js/dist/tippy.css';
 @import 'pr-superdesk-theme';
 @import 'primereact/pr-dialog';
 @import 'primereact/pr-menu';

package/app-typescript/components/CreateButton.tsx

@@ -22,7 +22,7 @@ export class CreateButton extends React.PureComponent<IProps> {
         });
         const value = this.props.value === undefined ? 'button' : this.props.value;
         return (
-            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={true}>
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow}>
                 <button type={value}
                     className={classes}
                     tabIndex={0}

package/app-typescript/components/DateTimePicker.tsx

@@ -59,35 +59,39 @@ export class DateTimePicker extends React.PureComponent<IProps> {
 
         return (
             <div style={{width: this.props.width ? this.props.width : MIN_WIDTH}}>
-                <Spacer h gap="8" alignItems='end'>
-                    <DatePicker
-                        disabled={this.props.disabled}
-                        preview={this.props.preview}
-                        required={this.props.required}
-                        hideClearButton={true}
-                        value={this.props.value}
-                        onChange={(val) => {
-                            this.handleDateChange(val);
-                        }}
-                        dateFormat={this.props.dateFormat}
-                        label={this.props.label.text}
-                        inlineLabel={this.props.label.hidden ?? false}
-                        labelHidden={this.props.label.hidden ?? false}
-                        fullWidth={this.props.fullWidth}
-                    />
-                    <TimePicker
-                        disabled={this.props.disabled}
-                        preview={this.props.preview}
-                        value={convertedTimeValue}
-                        onChange={(val) => {
-                            this.handleTimeChange(val);
-                        }}
-                        inlineLabel
-                        labelHidden
-                        allowSeconds={this.props.allowSeconds}
-                        fullWidth={this.props.fullWidth}
-                        required={this.props.required}
-                    />
+                <Spacer h gap="8" alignItems='end' noWrap>
+                    <div style={{flexGrow: 1}}>
+                        <DatePicker
+                            disabled={this.props.disabled}
+                            preview={this.props.preview}
+                            required={this.props.required}
+                            hideClearButton={true}
+                            value={this.props.value}
+                            onChange={(val) => {
+                                this.handleDateChange(val);
+                            }}
+                            dateFormat={this.props.dateFormat}
+                            label={this.props.label.text}
+                            inlineLabel={this.props.label.hidden ?? false}
+                            labelHidden={this.props.label.hidden ?? false}
+                            fullWidth={this.props.fullWidth}
+                        />
+                    </div>
+                    <div style={{flexGrow: 1}}>
+                        <TimePicker
+                            disabled={this.props.disabled}
+                            preview={this.props.preview}
+                            value={convertedTimeValue}
+                            onChange={(val) => {
+                                this.handleTimeChange(val);
+                            }}
+                            inlineLabel
+                            labelHidden
+                            allowSeconds={this.props.allowSeconds}
+                            fullWidth={this.props.fullWidth}
+                            required={this.props.required}
+                        />
+                    </div>
                     {this.props.preview !== true && (
                         <IconButton
                             disabled={this.props.disabled}

package/app-typescript/components/Editor/EditorButton.tsx

@@ -19,7 +19,7 @@ export class EditorButton extends React.PureComponent<IProps> {
             'icn-btn--small': this.props.size === 'small',
         });
         return (
-            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow} appendToBody={this.props.toolTipAppend}>
+            <Tooltip text={this.props.ariaValue} flow={this.props.toolTipFlow}>
                 <button
                     id={this.props.id}
                     tabIndex={0}

package/app-typescript/components/IconButton.tsx

@@ -28,10 +28,8 @@ export class IconButton extends React.PureComponent<IProps> {
 
         return (
             <Tooltip
-                text={this.props.ariaValue}
+                text={this.props.disabled ? null : this.props.ariaValue}
                 flow={this.props.toolTipFlow}
-                appendToBody={this.props.toolTipAppend}
-                disabled={this.props.disabled}
             >
                 <button
                     id={this.props.id}

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

@@ -187,7 +187,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                                     {
                                         (this.props.addItem && !this.props.readOnly)
                                             && <div className={`table-list__add-item table-list__item--margin`}>
-                                                <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                                <Tooltip text='Add item' flow='top'>
                                                     <div className='table-list__add-item--container sd-margin-x--auto'>
                                                         {this.dropDown()}
                                                     </div>
@@ -233,7 +233,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                         {
                             (this.props.addItem && !this.props.readOnly)
                                 && <div className={`table-list__add-item table-list__item--margin`}>
-                                    <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                    <Tooltip text='Add item' flow='top'>
                                         <div className='table-list__add-item--container sd-margin-x--auto'>
                                             {this.dropDown()}
                                         </div>
@@ -244,7 +244,7 @@ class TableList extends React.PureComponent<IProps, IState> {
                 : (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}>
+                            <Tooltip text='Add item' flow='top'>
                                 <div className='table-list__add-item--container sd-margin-x--auto'>
                                     {this.dropDown()}
                                 </div>
@@ -354,7 +354,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
                     {
                         this.props.addItem
                             && <div className='table-list__add-bar-container'>
-                                <Tooltip text='Add item' flow='top' appendToBody={true}>
+                                <Tooltip text='Add item' flow='top'>
                                     <div className='table-list__add-bar'>
                                         <Dropdown
                                             onChange={this.props.onAddItem}

package/app-typescript/components/Switch.tsx

@@ -61,7 +61,6 @@ export class Switch extends React.PureComponent<IProps> {
                 <Tooltip
                     text={this.props.label.content}
                     flow={this.props.toolTipFlow}
-                    appendToBody={this.props.toolTipAppend}
                 >
                     <span className="sd-switch__wrapper" tabIndex={-1}>
                         {checkboxInput}

package/app-typescript/components/Tooltip.tsx

@@ -1,59 +1,87 @@
 import * as React from 'react';
-import nextId from "react-id-generator";
-import { Tooltip as PRTooltip } from '@superdesk/primereact/tooltip';
+import tippy, {Instance, Placement} from 'tippy.js';
+import {assertNever} from '../helpers';
+
 interface IProps {
-    text: string;
+    text: string | undefined | null;
     flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
-    appendToBody?: boolean;
-    disabled?: boolean;
 }
 
-export const Tooltip: React.FC<IProps>  = ({appendToBody, children, disabled, ...otherProps}) =>
-    disabled
-    ? <React.Fragment>{children}</React.Fragment>
-    : appendToBody
-        ? <TooltipAppended {...otherProps}>{children}</TooltipAppended>
-        : <TooltipBasic {...otherProps}>{children}</TooltipBasic>;
-
-class TooltipBasic extends React.PureComponent<IProps> {
-    htmlId = nextId();
-    componentDidMount() {
-        let tooltip = document.getElementById('t' + this.htmlId);
-        tooltip?.setAttribute('data-sd-tooltip', this.props.text);
-        if (this.props.flow) {
-            tooltip?.setAttribute('data-flow', this.props.flow);
-        }
-    }
-    render() {
-        if (React.isValidElement(this.props.children)) {
-            const attrs = {id: 't' + this.htmlId};
-
-            return (
-                React.cloneElement(this.props.children, attrs)
-            );
-        } else {
-            return (
-                <React.Fragment />
-            );
-        }
+function flowToPlacement(flow: IProps['flow']): Placement | undefined {
+    switch (flow) {
+        case undefined:
+            return undefined;
+        case 'top':
+            return 'top';
+        case 'right':
+            return 'right';
+        case 'down':
+            return 'bottom';
+        case 'left':
+            return 'left';
+        default:
+            return assertNever(flow);
     }
 }
 
-const TooltipAppended: React.FC<IProps> = ({children, flow, text}) => {
-    const triggerId = `uif-tooltip-${Math.random().toString().slice(2)}`;
-    const position = flow === "down" ? "bottom" : flow;
+export class Tooltip extends React.PureComponent<IProps> {
+    private id: string;
+    private instance: Instance | null;
 
-    return (
-        <React.Fragment>
-            <PRTooltip target={"#" + triggerId} content={text} position={position ?? 'top'}/>
-            {   React.isValidElement(children)
-                    ? (() => {
-                        const attrs = {id: triggerId};
+    constructor(props: IProps) {
+        super(props);
 
-                        return React.cloneElement(children, attrs);
-                    })()
-                    : <React.Fragment />
+        this.id = 'tooltip-' + Math.random().toString().slice(2);
+        this.instance = null;
+    }
+
+    private setupTooltip() {
+        const placement = flowToPlacement(this.props.flow ?? 'top');
+        const content = this.props.text;
+
+        if (this.instance == null) {
+            this.instance = tippy('#' + this.id, {
+                placement: placement,
+            })[0];
+
+            if (content != null) {
+                this.instance.setContent(content);
+            } else {
+                this.instance.hide();
+                this.instance.disable();
             }
-        </React.Fragment>
-    );
-};
+        }
+
+        const willBeEnabled = content != null;
+        const isEnabled = this.instance.state.isEnabled;
+
+        if (isEnabled && willBeEnabled) {
+            this.instance.setContent(content);
+        } else if (isEnabled) {
+            // enabled now, but needs to be disabled
+            this.instance.hide();
+            this.instance.disable();
+        } else if (willBeEnabled) {
+            // disabled now, but needs to be enabled
+            this.instance.setContent(content);
+            this.instance.enable();
+            this.instance.show();
+        }
+    }
+
+    componentDidMount(): void {
+        this.setupTooltip();
+    }
+
+    componentDidUpdate(): void {
+        this.setupTooltip();
+    }
+
+    render() {
+        return (
+            <div id={this.id} style={{display: 'inline-flex'}}>
+                {this.props.children}
+            </div>
+        );
+    }
+}

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

@@ -96,6 +96,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
     private popperInstance: Instance | null;
     private zIndex: number = getNextZIndex();
 
+    /*
+    * This variable is used to distinguish changes coming from outside (from props.value)
+    * from those made by the user through interaction with the component.
+    * It prevents triggering `onChange` when `props.value` updates externally.
+    */
+    private changesFromOutside: boolean;
+
     constructor(props: IProps<T>) {
         super(props);
         this.state = {
@@ -133,6 +140,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
         this.treeSelectRef = React.createRef();
         this.popperInstance = null;
         this.onDragEnd = this.onDragEnd.bind(this);
+        this.changesFromOutside = false;
     }
 
     inputFocus = () => {
@@ -212,8 +220,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
 
     componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
         if (!isEqual(prevState.value, this.state.value)) {
-            this.props.onChange(this.state.value);
+            if (this.changesFromOutside) {
+                this.changesFromOutside = false;
+            } else {
+                this.props.onChange(this.state.value);
+            }
         } else if (!isEqual(prevProps.value, this.props.value)) {
+            this.changesFromOutside = true;
             this.setState({
                 value: this.props.value ?? [],
             });

package/dist/components/Tooltips.tsx

@@ -31,7 +31,7 @@ export default class TooltipDoc extends React.Component {
                             </Tooltip>
                             <Tooltip text="Right on!" flow='right'>
                                 <Button text='right' onClick={() => false} />
-                            </Tooltip>   
+                            </Tooltip>
                         </div>
                     </Markup.ReactMarkupPreview>
                     <Markup.ReactMarkupCode>{`
@@ -51,53 +51,10 @@ export default class TooltipDoc extends React.Component {
                     </Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>
 
-                <h3 className="docs-page__h3">Appended to body</h3>
-                <p className="docs-page__paragraph">
-                    Appends tooltip element to body therefore avoids overflow issues. For performance reasons don't use it if not necessary.
-                </p>
-                <Markup.ReactMarkup>
-                    <Markup.ReactMarkupPreview>
-                       
-                        <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            
-                            <div className="docs-page__content-row docs-page__content-row--no-margin">
-                                <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
-                                    <Button text='top' onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text="I'm appended to body" flow='down' appendToBody={true}>
-                                    <Button text='Down' onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text="I'm appended to body" flow='left' appendToBody={true}>
-                                    <Button text='left' onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text="I'm appended to body" flow='right' appendToBody={true}>
-                                    <Button text='right' onClick={() => false} />
-                                </Tooltip>
-                            </div>
-                        </div>
-                    </Markup.ReactMarkupPreview>
-                    <Markup.ReactMarkupCode>{`
-                        <Tooltip text="I'm appended to body" flow='top' appendToBody={true}>
-                                    <Button text='top' onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text="I'm appended to body" flow='down' appendToBody={true}>
-                                    <Button text='Down' onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text="I'm appended to body" flow='left' appendToBody={true}>
-                                    <Button text='left' onClick={() => false} />
-                                </Tooltip>
-                                <Tooltip text="I'm appended to body" flow='right' appendToBody={true}>
-                                    <Button text='right' onClick={() => false} />
-                                </Tooltip>
-                    `}
-                    </Markup.ReactMarkupCode>
-                </Markup.ReactMarkup>
-
                 <h3 className="docs-page__h3">Props</h3>
                 <PropsList>
                     <Prop name='text' isRequired={true} type='string' default='/' description='Tooltip text value.' />
                     <Prop name='flow' isRequired={false} type='top | left | right | down' default='top' description='Position of tooltip text.' />
-                    <Prop name='appendToBody' isRequired={false} type='boolean' default='false' description='Appends element to body therefore avoids overflow issues.' />
                 </PropsList>
             </section>
         )

package/dist/components/TreeSelect.tsx

@@ -12,7 +12,7 @@ interface IState {
     arr: any;
 }
 
-let options = [
+const multiSelectOptions = [
     {
         value: {name: 'Category1'},
         children: [
@@ -93,7 +93,7 @@ let options = [
     },
 ]
 
-let options2 = [
+const singleSelectOptions = [
     {
         value: {name: 'Category1', border: 'red'},
         children: [
@@ -169,9 +169,6 @@ let options2 = [
     },
 ]
 
-let fetchedArr = [];
-fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
-
 type ICancelFn = () => void;
 
 function searchOptions(
@@ -181,9 +178,7 @@ function searchOptions(
     let timeout = setTimeout(() => {
 
         callback(
-            fetchedArr
-                .filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
-                .map((item) => ({value: item})),
+            multiSelectOptions.filter((item: any) => item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
         );
     }, 1000);
 
@@ -198,8 +193,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
         this.state = {
             value: [],
             value2: [],
-            options: options,
-            options2: options,
+            options: multiSelectOptions,
+            options2: multiSelectOptions,
             inputValue: '',
             arr: []
         }
@@ -244,7 +239,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 <TreeSelect
                                     kind='synchronous'
                                     value={[{name: 'Category1'}]}
-                                    getOptions={() => options}
+                                    getOptions={() => multiSelectOptions}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
                                     selectBranchWithChildren
@@ -300,7 +295,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 <TreeSelect
                                     kind='synchronous'
                                     value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
-                                    getOptions={() => options}
+                                    getOptions={() => multiSelectOptions}
                                     getId={(item) => item.name}
                                     getLabel={(item) => item.name}
                                     selectBranchWithChildren
@@ -358,8 +353,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                             <TreeSelect
                                 kind="asynchronous"
                                 value={this.state.value}
-                                getLabel={({display_name}) => display_name}
-                                getId={({display_name}) => display_name}
+                                getLabel={({name}) => name}
+                                getId={({name}) => name}
                                 selectBranchWithChildren
                                 allowMultiple
                                 searchOptions={searchOptions}
@@ -400,7 +395,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                 <TreeSelect
                                     kind='synchronous'
                                     value={[]}
-                                    getOptions={() => options2}
+                                    getOptions={() => singleSelectOptions}
                                     getLabel={(item) => item.name}
                                     getId={(item) => item.name}
                                     getBorderColor={(item) => item.border}