superdesk-ui-framework 4.0.14 → 4.0.16

package/examples/pages/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/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx

@@ -146,7 +146,7 @@ export class RundownEditor extends React.Component<IProps, IState> {
             <Layout.LayoutContainer>
                 <Layout.HeaderPanel>
                     <SubNav>
-                        <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
+                        <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'>
                             <button
                                 className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
                                 onClick={this.toggleExpand}

package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx

@@ -221,7 +221,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                         </div>
                                         <div className="sd-list-item__action-menu sd-list-item__action-menu--direction-row ps-0">
                                             <ButtonGroup orientation='vertical' spaces='compact'>
-                                                <IconButton size='small' icon='external' ariaValue='Open in modal' onClick={()=> false} /> 
+                                                <IconButton size='small' icon='external' ariaValue='Open in modal' onClick={()=> false} />
                                                 <IconButton size='small' icon='trash' ariaValue='Delete Coverage' onClick={()=> false} />
                                             </ButtonGroup>
                                         </div>
@@ -378,7 +378,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                     <div className='sd-border--medium border-dashed p-1-5 radius-md d-flex items-center justify-center'>
                                         <span className='text-sm text-color-subdued'>No Coverages yet</span>
                                     </div>
-                                    
+
                                     {/* <ContentDivider type="dashed" margin='x-small' /> */}
 
                                     {/* NESTED BOX */}
@@ -404,7 +404,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                                                     <span className="sd-list-item__text-light">//</span>
                                                                     <span className="sd-list-item__text">Archive</span>
                                                                 </span>
-                                                                
+
                                                             </span>
                                                             <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
                                                         </div>
@@ -460,8 +460,8 @@ export class TestGround extends React.Component<IProps, IState> {
                                                                         <span className="sd-list-item__text-light">//</span>
                                                                         <span className="sd-list-item__text">Archive</span>
                                                                     </span>
-                                                                    
-                                                                    
+
+
                                                                 </span>
                                                                 <Label text='Draft' style='translucent' type='default' />
                                                             </div>
@@ -662,7 +662,7 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <hr />
 
-                        <Avatar 
+                        <Avatar
                             displayName="Jeffrey Lebowski"
                             imageUrl={null}
                             initials='JL'
@@ -757,7 +757,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                                                     <span className="sd-list-item__text-light">//</span>
                                                                     <span className="sd-list-item__text">Archive</span>
                                                                 </span>
-                                                                
+
                                                             </span>
                                                             <time className="sd-margin-s--auto" title="June 01, 2022 11:08 AM">11:08, 01.06.2022</time>
                                                         </div>
@@ -881,8 +881,8 @@ export class TestGround extends React.Component<IProps, IState> {
                         <hr />
 
                         <SubNav color='darker'>
-                            <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right' appendToBody={true}>
-                                <button 
+                            <Tooltip text={this.state.isExpanded ? "Revert Authoring" : "Expand Authoring"} flow='right'>
+                                <button
                                     className={`expand-button ${this.state.isExpanded ? "expand-button--expanded" : ""}`}
                                     onClick={this.toggleExpand}
                                 >
@@ -911,11 +911,11 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </ButtonGroup>
                             </ButtonGroup>
                         </SubNav>
-                        
+
                         <hr />
 
                         <div className='sd-grid-list sd-grid-list--xx-small sd-grid-list--gap-s sd-grid-list--no-margin' style={{width:'290px'}}>
-                            
+
                             <IllustrationButton text='Headlines' onClick={()=> false}>
                                 <SvgIconIllustration illustration='headlines' />
                             </IllustrationButton>
@@ -997,16 +997,16 @@ export class TestGround extends React.Component<IProps, IState> {
                             </span>
                             <Icon name='chevron-down-thin' />
                         </button> */}
-                        
+
                         <hr />
 
                         <Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
                         <span></span>
-                        
-                        
+
+
                          {/* Event Saving modals */}
                          {/* Event Only (This one existed Before) */}
-                        <Modal 
+                        <Modal
                             headerTemplate="Save Event"
                             visible={this.state.modalSaveEvent}
                             contentPadding='medium'
@@ -1056,7 +1056,7 @@ export class TestGround extends React.Component<IProps, IState> {
                         </Modal>
 
                         {/* Event and Planning */}
-                        <Modal 
+                        <Modal
                             headerTemplate="Save Event"
                             visible={this.state.modalSaveEvent2}
                             contentPadding='medium'
@@ -1154,7 +1154,7 @@ export class TestGround extends React.Component<IProps, IState> {
                         </Modal>
 
                         {/* Planning only */}
-                        <Modal 
+                        <Modal
                             headerTemplate="Save Event"
                             visible={this.state.modalSaveEvent3}
                             contentPadding='medium'
@@ -1373,7 +1373,7 @@ export class TestGround extends React.Component<IProps, IState> {
 
                         <img
                             src="/path/toimage"
-                            alt="my image" 
+                            alt="my image"
                             onError={({ currentTarget }) => {
                                 currentTarget.onerror = null; // prevents looping
                                 currentTarget.src="/illustration--playground.svg";
@@ -1417,7 +1417,7 @@ export class TestGround extends React.Component<IProps, IState> {
                             labelHidden={true}
                             type='text'
                         />
-                        
+
                         <hr />
 
                         <div className='form__group-new'>
@@ -1776,7 +1776,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </div>
 
                                 <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'>
                                             <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                                         </div>
@@ -1804,7 +1804,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </div>
 
                                 <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'>
                                             <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                                         </div>
@@ -1833,7 +1833,7 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </div>
 
                                 <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'>
                                             <Button type="primary" icon="plus-large" text="Add item" size="small" shape="round" iconOnly={true} onClick={()=> false} />
                                         </div>
@@ -1861,7 +1861,7 @@ export class TestGround extends React.Component<IProps, IState> {
                         <hr />
 
                         <Checkbox label={{text: 'The label is hidden here', hidden: true}} onChange={(value) => console.log('value changed', value)} />
-                        
+
                         <hr />
 
                         <div className="sd-check-button__group sd-check-button__group--start">
@@ -1974,9 +1974,9 @@ export class TestGround extends React.Component<IProps, IState> {
                                 </ul>
                             </div>
                             <div className="sd-thumb-carousel__description">
-                                Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue. 
-                                Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. 
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis 
+                                Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra augue.
+                                Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis
                                 parturient montes, nascetur ridiculus mus.
                             </div>
                         </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.14",
+  "version": "4.0.16",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",
@@ -106,7 +106,8 @@
     "primeicons": "2.0.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-id-generator": "^3.0.0",
-    "react-scrollspy": "^3.4.3"
+    "react-scrollspy": "^3.4.3",
+    "tippy.js": "^6.3.7"
   },
   "peerDependencies": {
     "moment": "*"

package/react/components/CreateButton.js

@@ -59,7 +59,7 @@ var CreateButton = /** @class */ (function (_super) {
             _a["sd-navbtn--".concat(this.props.type)] = this.props.type,
             _a));
         var value = this.props.value === undefined ? 'button' : this.props.value;
-        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.ariaValue, flow: this.props.toolTipFlow, appendToBody: true },
+        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.ariaValue, flow: this.props.toolTipFlow },
             React.createElement("button", { type: value, className: classes, tabIndex: 0, onClick: this.props.onClick, "aria-label": this.props.ariaValue, id: this.props.id },
                 React.createElement(Icon_1.Icon, { name: "plus-large" }),
                 React.createElement("span", { className: "circle" }))));

package/react/components/DateTimePicker.js

@@ -79,13 +79,15 @@ var DateTimePicker = /** @class */ (function (_super) {
             ? "".concat(this.prepareFormat(this.props.value.getHours()), ":").concat(this.prepareFormat(this.props.value.getMinutes()))
             : '';
         return (React.createElement("div", { style: { width: this.props.width ? this.props.width : MIN_WIDTH } },
-            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end' },
-                React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
-                        _this.handleDateChange(val);
-                    }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth }),
-                React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
-                        _this.handleTimeChange(val);
-                    }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required }),
+            React.createElement(common_1.Spacer, { h: true, gap: "8", alignItems: 'end', noWrap: true },
+                React.createElement("div", { style: { flexGrow: 1 } },
+                    React.createElement(DatePicker_1.DatePicker, { disabled: this.props.disabled, preview: this.props.preview, required: this.props.required, hideClearButton: true, value: this.props.value, onChange: function (val) {
+                            _this.handleDateChange(val);
+                        }, dateFormat: this.props.dateFormat, label: this.props.label.text, inlineLabel: (_a = this.props.label.hidden) !== null && _a !== void 0 ? _a : false, labelHidden: (_b = this.props.label.hidden) !== null && _b !== void 0 ? _b : false, fullWidth: this.props.fullWidth })),
+                React.createElement("div", { style: { flexGrow: 1 } },
+                    React.createElement(TimePicker_1.TimePicker, { disabled: this.props.disabled, preview: this.props.preview, value: convertedTimeValue, onChange: function (val) {
+                            _this.handleTimeChange(val);
+                        }, inlineLabel: true, labelHidden: true, allowSeconds: this.props.allowSeconds, fullWidth: this.props.fullWidth, required: this.props.required })),
                 this.props.preview !== true && (React.createElement(IconButton_1.IconButton, { disabled: this.props.disabled, icon: 'remove-sign', onClick: function () {
                         _this.props.onChange(null);
                     }, ariaValue: 'Clear' })))));

package/react/components/IconButton.js

@@ -58,7 +58,7 @@ var IconButton = /** @class */ (function (_super) {
             _a["icn-btn--".concat(this.props.style)] = this.props.style || this.props.style !== undefined,
             _a['icn-btn--disabled'] = this.props.disabled,
             _a));
-        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.ariaValue, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend, disabled: this.props.disabled },
+        return (React.createElement(Tooltip_1.Tooltip, { text: this.props.disabled ? null : this.props.ariaValue, flow: this.props.toolTipFlow },
             React.createElement("button", { id: this.props.id, tabIndex: 0, onClick: this.props.onClick, className: classes, disabled: this.props.disabled, "aria-label": this.props.ariaValue },
                 React.createElement(Icon_1.Icon, { name: this.props.icon, ariaHidden: true }))));
     };

package/react/components/Lists/TableList.js

@@ -137,7 +137,7 @@ var TableList = /** @class */ (function (_super) {
                         provided.placeholder,
                         (_this.props.addItem && !_this.props.readOnly)
                             && React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
-                                React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                                React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top' },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
                 : React.createElement("div", { role: 'list', className: classes },
                     this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
@@ -150,12 +150,12 @@ var TableList = /** @class */ (function (_super) {
                             && _this.props.onAddItem(index, item); } })); }),
                     (this.props.addItem && !this.props.readOnly)
                         && React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
-                            React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                            React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top' },
                                 React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
             : (this.props.addItem && !this.props.readOnly)
                 ? React.createElement("div", { role: 'list', className: classes },
                     React.createElement("div", { className: "table-list__add-item table-list__item--margin" },
-                        React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top' },
                             React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, this.dropDown()))))
                 : null);
     };
@@ -225,7 +225,7 @@ var TableListItem = /** @class */ (function (_super) {
                         && React.createElement("div", { className: 'table-list__slide-in-actions', onClick: this.onActionMenuClick }, this.props.action)),
                 this.props.addItem
                     && React.createElement("div", { className: 'table-list__add-bar-container' },
-                        React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
+                        React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top' },
                             React.createElement("div", { className: 'table-list__add-bar' },
                                 React.createElement(Dropdown_1.Dropdown, { onChange: this.props.onAddItem, items: this.props.itemsDropdown ? this.props.itemsDropdown() : [] },
                                     React.createElement(Button_1.Button, { type: "primary", icon: "plus-large", text: "Add item", size: "small", shape: "round", iconOnly: true, onClick: function () { return false; } }))))))));

package/react/components/Switch.js

@@ -69,7 +69,7 @@ var Switch = /** @class */ (function (_super) {
             React.createElement("span", { className: "inner" })));
         // if external label is used it can't be hidden
         if (this.props.label.hidden && typeof this.props.label.content === 'string') {
-            return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow, appendToBody: this.props.toolTipAppend },
+            return (React.createElement(Tooltip_1.Tooltip, { text: this.props.label.content, flow: this.props.toolTipFlow },
                 React.createElement("span", { className: "sd-switch__wrapper", tabIndex: -1 },
                     checkboxInput,
                     React.createElement("label", { className: 'a11y-only', htmlFor: this.htmlId }, this.props.label.content))));

package/react/components/Tooltip.d.ts

@@ -1,9 +1,15 @@
 import * as React from 'react';
 interface IProps {
-    text: string;
+    text: string | undefined | null;
     flow?: 'top' | 'left' | 'right' | 'down';
-    appendToBody?: boolean;
-    disabled?: boolean;
 }
-export declare const Tooltip: React.FC<IProps>;
+export declare class Tooltip extends React.PureComponent<IProps> {
+    private id;
+    private instance;
+    constructor(props: IProps);
+    private setupTooltip;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): JSX.Element;
+}
 export {};

package/react/components/Tooltip.js

@@ -14,17 +14,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -48,69 +37,80 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 var React = __importStar(require("react"));
-var react_id_generator_1 = __importDefault(require("react-id-generator"));
-var tooltip_1 = require("@superdesk/primereact/tooltip");
-var Tooltip = function (_a) {
-    var appendToBody = _a.appendToBody, children = _a.children, disabled = _a.disabled, otherProps = __rest(_a, ["appendToBody", "children", "disabled"]);
-    return disabled
-        ? React.createElement(React.Fragment, null, children)
-        : appendToBody
-            ? React.createElement(TooltipAppended, __assign({}, otherProps), children)
-            : React.createElement(TooltipBasic, __assign({}, otherProps), children);
-};
-exports.Tooltip = Tooltip;
-var TooltipBasic = /** @class */ (function (_super) {
-    __extends(TooltipBasic, _super);
-    function TooltipBasic() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.htmlId = (0, react_id_generator_1.default)();
+var tippy_js_1 = __importDefault(require("tippy.js"));
+var helpers_1 = require("../helpers");
+function flowToPlacement(flow) {
+    switch (flow) {
+        case undefined:
+            return undefined;
+        case 'top':
+            return 'top';
+        case 'right':
+            return 'right';
+        case 'down':
+            return 'bottom';
+        case 'left':
+            return 'left';
+        default:
+            return (0, helpers_1.assertNever)(flow);
+    }
+}
+var Tooltip = /** @class */ (function (_super) {
+    __extends(Tooltip, _super);
+    function Tooltip(props) {
+        var _this = _super.call(this, props) || this;
+        _this.id = 'tooltip-' + Math.random().toString().slice(2);
+        _this.instance = null;
         return _this;
     }
-    TooltipBasic.prototype.componentDidMount = function () {
-        var tooltip = document.getElementById('t' + this.htmlId);
-        tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('data-sd-tooltip', this.props.text);
-        if (this.props.flow) {
-            tooltip === null || tooltip === void 0 ? void 0 : tooltip.setAttribute('data-flow', this.props.flow);
+    Tooltip.prototype.setupTooltip = function () {
+        var _a;
+        var placement = flowToPlacement((_a = this.props.flow) !== null && _a !== void 0 ? _a : 'top');
+        var content = this.props.text;
+        if (this.instance == null) {
+            this.instance = (0, tippy_js_1.default)('#' + this.id, {
+                placement: placement,
+            })[0];
+            if (content != null) {
+                this.instance.setContent(content);
+            }
+            else {
+                this.instance.hide();
+                this.instance.disable();
+            }
         }
-    };
-    TooltipBasic.prototype.render = function () {
-        if (React.isValidElement(this.props.children)) {
-            var attrs = { id: 't' + this.htmlId };
-            return (React.cloneElement(this.props.children, attrs));
+        var willBeEnabled = content != null;
+        var 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 {
-            return (React.createElement(React.Fragment, null));
+        else if (willBeEnabled) {
+            // disabled now, but needs to be enabled
+            this.instance.setContent(content);
+            this.instance.enable();
+            this.instance.show();
         }
     };
-    return TooltipBasic;
+    Tooltip.prototype.componentDidMount = function () {
+        this.setupTooltip();
+    };
+    Tooltip.prototype.componentDidUpdate = function () {
+        this.setupTooltip();
+    };
+    Tooltip.prototype.render = function () {
+        return (React.createElement("div", { id: this.id, style: { display: 'inline-flex' } }, this.props.children));
+    };
+    return Tooltip;
 }(React.PureComponent));
-var TooltipAppended = function (_a) {
-    var children = _a.children, flow = _a.flow, text = _a.text;
-    var triggerId = "uif-tooltip-".concat(Math.random().toString().slice(2));
-    var position = flow === "down" ? "bottom" : flow;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(tooltip_1.Tooltip, { target: "#" + triggerId, content: text, position: position !== null && position !== void 0 ? position : 'top' }),
-        React.isValidElement(children)
-            ? (function () {
-                var attrs = { id: triggerId };
-                return React.cloneElement(children, attrs);
-            })()
-            : React.createElement(React.Fragment, null)));
-};
+exports.Tooltip = Tooltip;