superdesk-ui-framework 4.0.86 → 4.0.88

package/app/styles/_buttons.scss

@@ -838,4 +838,31 @@ $icn-button-focus-box-shadow: 0 0 0 2px $sd-colour--focus-shadow;
     font-weight: 500;
     line-height: 1.2;
     text-align: center;
+}
+
+.headless-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    outline: 1px solid transparent;
+    outline-offset: 0;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+        cursor: pointer;
+        outline-color: var(--sd-colour-interactive);
+        outline-offset: 1px;
+    }
+    &:active {
+        outline-width: 2px;
+    }
+    &:disabled {
+        opacity: 0.75;
+        cursor: not-allowed;
+        outline: none !important;
+    }
 }

package/app/styles/_tag-labels.scss

@@ -26,7 +26,7 @@ $tag-label-palette: $tag-bg-colors !default;
 
     --tag-label-minwidth: 1.8em;
     --tag-label-radius: var(--b-radius--full);
-    --tag-label-lineheight: 1.1;
+    --tag-label-lineheight: 1;
 }
 
 /// Generates the base styles for a badge.

package/app/styles/app.scss

@@ -109,7 +109,6 @@
 // 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/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import {Icon} from './Icon';
 import {Spinner} from './Spinner';
-import {WithTooltip} from './Tooltip';
+import {Tooltip} from './Tooltip';
 
 interface IPropsButton {
     text: string;
@@ -82,15 +82,15 @@ export class Button extends React.PureComponent<IPropsButton> {
 
 interface ITooltipWrapperProps {
     tooltipText: string | null | undefined;
-    children: React.ComponentProps<typeof WithTooltip>['children'];
+    children: (options: {attributes: React.HTMLAttributes<HTMLElement>}) => React.ReactNode;
 }
 
 class TooltipWrapper extends React.PureComponent<ITooltipWrapperProps> {
     render() {
         const {tooltipText, children} = this.props;
 
-        return (tooltipText ?? '').length > 0 ? (
-            <WithTooltip text={tooltipText}>{({attributes}) => children({attributes})}</WithTooltip>
+        return tooltipText != null && (tooltipText ?? '').length > 0 ? (
+            <Tooltip content={tooltipText}>{({attributes}) => children({attributes})}</Tooltip>
         ) : (
             <>{children({attributes: {}})}</>
         );

package/app-typescript/components/HeadlessButton.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import {Tooltip} from './Tooltip';
+
+interface IPropsHeadlessButton {
+    onClick(event: React.MouseEvent<HTMLButtonElement, MouseEvent>): void;
+    tooltip?: string;
+    id?: string;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    ariaLabel?: string;
+    radius?: 'x-small' | 'small' | 'medium' | 'full';
+    className?: string;
+    'data-test-id'?: string;
+}
+
+export class HeadlessButton extends React.PureComponent<IPropsHeadlessButton> {
+    render() {
+        let classes = classNames(
+            'headless-button',
+            {
+                'radius-xs': this.props.radius === 'x-small',
+                'radius-sm': this.props.radius === 'small',
+                'radius-md': this.props.radius === 'medium',
+                'radius-full': this.props.radius === 'full',
+            },
+            this.props.className,
+        );
+
+        return (
+            <TooltipWrapper tooltipText={this.props.tooltip}>
+                {({attributes}) => (
+                    <button
+                        id={this.props.id}
+                        className={classes}
+                        tabIndex={0}
+                        disabled={this.props.disabled}
+                        onClick={this.props.onClick}
+                        aria-label={this.props.ariaLabel}
+                        data-test-id={this.props['data-test-id']}
+                        {...attributes}
+                    >
+                        {this.props.children}
+                    </button>
+                )}
+            </TooltipWrapper>
+        );
+    }
+}
+
+interface ITooltipWrapperProps {
+    tooltipText: string | null | undefined;
+    children: (options: {attributes: React.HTMLAttributes<HTMLElement>}) => React.ReactNode;
+}
+
+class TooltipWrapper extends React.PureComponent<ITooltipWrapperProps> {
+    render() {
+        const {tooltipText, children} = this.props;
+
+        return tooltipText != null && (tooltipText ?? '').length > 0 ? (
+            <Tooltip content={tooltipText}>{({attributes}) => children({attributes})}</Tooltip>
+        ) : (
+            <>{children({attributes: {}})}</>
+        );
+    }
+}

package/app-typescript/components/ShowPopup.tsx

@@ -7,7 +7,7 @@ import {getNextZIndex} from '../zIndex';
 
 interface IPropsPopupPositioner {
     getReferenceElement(): HTMLElement;
-    placement: Placement;
+    placement?: Placement;
     onClose(): void;
     shouldClose?: (event: MouseEvent | Event) => boolean;
     closeOnHoverEnd?: boolean;
@@ -137,8 +137,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
              */
             setTimeout(() => {
                 if (this.wrapperEl != null) {
-                    this.popper = createPopper(this.props.getReferenceElement(), this.wrapperEl, {
-                        placement: this.props.placement,
+                    const options: Parameters<typeof createPopper>[2] = {
                         modifiers: [
                             restrictHeightToMaxAvailable,
                             {
@@ -152,7 +151,13 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
                             maxSize,
                             applyMaxSize,
                         ],
-                    });
+                    };
+
+                    if (this.props.placement != null) {
+                        options.placement = this.props.placement;
+                    }
+
+                    this.popper = createPopper(this.props.getReferenceElement(), this.wrapperEl, options);
                 }
             }, 50);
         }
@@ -200,7 +205,7 @@ export class PopupPositioner extends React.PureComponent<IPropsPopupPositioner>
  */
 export function showPopup(
     referenceElement: HTMLElement,
-    placement: Placement,
+    placement: Placement | undefined,
     Component: React.ComponentType<{closePopup(): void}>,
     closeOnHoverEnd?: boolean,
     onClose?: () => void,

package/app-typescript/components/Tooltip.tsx

@@ -1,15 +1,9 @@
 import * as React from 'react';
-import nextId from 'react-id-generator';
-import tippy, {Instance, Placement} from 'tippy.js';
 import {assertNever} from '../helpers';
+import {IPropsTooltipV2, TooltipV2} from './TooltipV2';
+import {Placement} from 'popper.js';
 
-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 {
+function flowToPlacement(flow: IPropsLegacy['flow']): Placement | undefined {
     switch (flow) {
         case undefined:
             return undefined;
@@ -26,83 +20,29 @@ function flowToPlacement(flow: IProps['flow']): Placement | undefined {
     }
 }
 
-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 = nextId();
-
-        this.instance = null;
-    }
-
-    private setupTooltip() {
-        const placement = flowToPlacement(this.props.flow ?? 'top');
-        const content = this.props.text;
-
-        if (this.instance == null) {
-            this.instance = tippy(getTooltipSelector(this.id), {
-                placement: placement,
-            })[0];
-
-            if (this.instance == null) {
-                // prevent crashing in unit tests
-                return;
-            }
-
-            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 this.props.children({attributes: {[tooltipAttributeName]: this.id}});
-    }
+interface IPropsLegacy {
+    text: string | undefined | null;
+    flow?: 'top' | 'left' | 'right' | 'down'; // defaults to 'top'
+    content?: never; // added for discriminated union support with IPropsTooltipV2
 }
 
-export class Tooltip extends React.PureComponent<Omit<IProps, 'children'>> {
+type IProps = IPropsTooltipV2 | IPropsLegacy;
+
+export class Tooltip extends React.PureComponent<IProps> {
     render() {
-        return (
-            <WithTooltip text={this.props.text} flow={this.props.flow}>
-                {({attributes}) => (
-                    <div {...attributes} style={{display: 'inline-flex'}}>
-                        {this.props.children}
-                    </div>
-                )}
-            </WithTooltip>
-        );
+        if (this.props.content != null) {
+            return <TooltipV2 {...this.props} />;
+        } else {
+            // backwards compatibility for legacy props
+            return (
+                <TooltipV2 content={this.props.text ?? ''} placement={flowToPlacement(this.props.flow)}>
+                    {({attributes}) => (
+                        <div {...attributes} style={{display: 'inline-flex'}}>
+                            {this.props.children}
+                        </div>
+                    )}
+                </TooltipV2>
+            );
+        }
     }
 }

package/app-typescript/components/TooltipV2.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import {Placement} from '@popperjs/core';
+import {WithPopover} from './WithPopover';
+
+export interface IPropsTooltipV2 {
+    content: string | React.ComponentType;
+    placement?: Placement;
+
+    /**
+     * If unsure - use ReactNode.
+     * Function is for advanced use cases where it's needed to avoid the wrapping span.
+     */
+    children: React.ReactNode | ((options: {attributes: React.HTMLAttributes<HTMLElement>}) => React.ReactNode);
+}
+
+/**
+ * Component is intentionally not exported.
+ * It will be moved into the components/Tooltip.tsx when legacy support is dropped there.
+ */
+export class TooltipV2 extends React.PureComponent<IPropsTooltipV2> {
+    render() {
+        return (
+            <WithPopover
+                placement={this.props.placement ?? 'top'}
+                component={() => {
+                    return (
+                        <div data-theme="dark-ui">
+                            <div
+                                style={{
+                                    background: 'var(--color-bg-100)',
+                                    color: 'var(--color-text)',
+                                    borderRadius: 'var(--b-radius--medium)',
+                                    paddingInline: 'var(--space--0-5)',
+                                    fontSize: 'var(--text-size-x-small)',
+                                    margin: 2,
+                                }}
+                            >
+                                {(() => {
+                                    if (typeof this.props.content === 'string') {
+                                        return <span>{this.props.content}</span>;
+                                    } else {
+                                        const Component = this.props.content;
+
+                                        return <Component />;
+                                    }
+                                })()}
+                            </div>
+                        </div>
+                    );
+                }}
+            >
+                {(toggle) => {
+                    const attributes: React.HTMLAttributes<HTMLElement> = {
+                        onMouseOver: (event) => {
+                            toggle(event.target as HTMLElement);
+                        },
+                        onMouseOut: (event) => {
+                            toggle(event.target as HTMLElement);
+                        },
+                    };
+
+                    if (typeof this.props.children === 'function') {
+                        return this.props.children({attributes});
+                    } else {
+                        return (
+                            <span {...attributes} style={{display: 'inline-flex'}}>
+                                {this.props.children}
+                            </span>
+                        );
+                    }
+                }}
+            </WithPopover>
+        );
+    }
+}

package/app-typescript/components/WithPopover.tsx

@@ -4,7 +4,7 @@ import {showPopup} from './ShowPopup';
 
 export interface IPropsWithPopover {
     children(toggle: (referenceElement: HTMLElement) => void): React.ReactNode;
-    placement: Placement;
+    placement?: Placement;
     component: React.ComponentType<{closePopup(): void}>;
     closeOnHoverEnd?: boolean;
     onClose?: () => void;

package/app-typescript/index.ts

@@ -3,6 +3,7 @@
 
 export {HelloWorld} from './components/HelloWorld';
 export {Button} from './components/Button';
+export {HeadlessButton} from './components/HeadlessButton';
 export {Input} from './components/Input';
 export {Select, Option} from './components/Select';
 export {SelectWithTemplate} from './components/SelectWithTemplate';

package/dist/components/Tooltips.tsx

@@ -11,30 +11,25 @@ export default class TooltipDoc extends React.Component {
                 <h2 className="docs-page__h2">Tooltips</h2>
                 <Markup.ReactMarkupCodePreview>
                     {`
-                    <Tooltip text="I'm on top" >
+                    <Tooltip content="I'm on top" >
                         <Button text='top' onClick={() => false} />
                     </Tooltip>
                 `}
                 </Markup.ReactMarkupCodePreview>
                 <h3 className="docs-page__h3">Default</h3>
-                <p className="docs-page__paragraph">
-                    Chose one of 4 placement options (<code>’left’</code>, <code>’right’</code>, <code>down</code>, and{' '}
-                    <code>’top’</code>). The default value is <code>’top’</code> and will be rendered so without
-                    explicitly specifying it.
-                </p>
                 <Markup.ReactMarkup>
                     <Markup.ReactMarkupPreview>
                         <div className="docs-page__content-row docs-page__content-row--no-margin">
-                            <Tooltip text="I'm on top">
+                            <Tooltip content="I'm on top">
                                 <Button text="top" onClick={() => false} />
                             </Tooltip>
-                            <Tooltip text="I'm at the bottom" flow="down">
+                            <Tooltip content="I'm at the bottom" placement="bottom">
                                 <Button text="bottom" onClick={() => false} />
                             </Tooltip>
-                            <Tooltip text="I open on the left" flow="left">
+                            <Tooltip content="I open on the left" placement="left">
                                 <Button text="left" onClick={() => false} />
                             </Tooltip>
-                            <Tooltip text="Right on!" flow="right">
+                            <Tooltip content="Right on!" placement="right">
                                 <Button text="right" onClick={() => false} />
                             </Tooltip>
                         </div>
@@ -57,17 +52,29 @@ export default class TooltipDoc extends React.Component {
                     </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."
-                    />
-                </PropsList>
+                <h3 className="docs-page__h3">With JSX as content</h3>
+                <Markup.ReactMarkup>
+                    <Markup.ReactMarkupPreview>
+                        <div className="docs-page__content-row docs-page__content-row--no-margin">
+                            <Tooltip
+                                content={() => (
+                                    <span>
+                                        hello <span style={{color: 'yellow'}}>world</span>
+                                    </span>
+                                )}
+                            >
+                                <Button text="demo" onClick={() => false} />
+                            </Tooltip>
+                        </div>
+                    </Markup.ReactMarkupPreview>
+                    <Markup.ReactMarkupCode>
+                        {`
+                        <Tooltip content={() => <span>hello <span style={{color: 'yellow'}}>world</span></span>}>
+                            <Button text="demo" onClick={() => false} />
+                        </Tooltip>
+                    `}
+                    </Markup.ReactMarkupCode>
+                </Markup.ReactMarkup>
             </section>
         );
     }

package/dist/components/TreeSelect.tsx

@@ -375,7 +375,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
                                     }}
                                     valueTemplate={(item: any, Wrapper) => {
                                         return (
-                                            <Wrapper borderColor={item.border}>
+                                            <Wrapper backgroundColor={item.bgColor}>
                                                 <span>{item.name}</span>
                                             </Wrapper>
                                         );