superdesk-ui-framework 4.0.14 → 4.0.17

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,92 @@
 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;
+
+    constructor(props: IProps) {
+        super(props);
 
-    return (
-        <React.Fragment>
-            <PRTooltip target={"#" + triggerId} content={text} position={position ?? 'top'}/>
-            {   React.isValidElement(children)
-                    ? (() => {
-                        const attrs = {id: triggerId};
+        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];
 
-                        return React.cloneElement(children, attrs);
-                    })()
-                    : <React.Fragment />
+            if (this.instance == null) {
+                // prevent crashing in unit tests
+                return;
             }
-        </React.Fragment>
-    );
-};
+
+            if (content != null) {
+                this.instance.setContent(content);
+            } else {
+                this.instance.hide();
+                this.instance.disable();
+            }
+        }
+
+        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/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>
         )