superdesk-ui-framework 4.0.28 → 4.0.30

package/examples/pages/components/Buttons.tsx

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "superdesk-ui-framework",
-  "version": "4.0.28",
+  "version": "4.0.30",
   "license": "AGPL-3.0",
   "repository": {
     "type": "git",

package/react/components/Alert.d.ts

@@ -7,6 +7,7 @@ interface IProps {
     icon?: string;
     banner?: boolean;
     margin?: 'none' | 'small' | 'normal' | 'large';
+    fullWidth?: boolean;
 }
 interface IState {
     open: boolean;

package/react/components/Alert.js

@@ -77,7 +77,11 @@ var Alert = /** @class */ (function (_super) {
             _b["sd-alert__info-btn--".concat(this.props.type)] = this.props.type,
             _b['sd-alert__info-btn--hidden'] = this.state.open,
             _b));
-        return (React.createElement("div", { className: 'sd-alert__container' },
+        var styles = {};
+        if (this.props.fullWidth) {
+            styles.width = '100%';
+        }
+        return (React.createElement("div", { className: 'sd-alert__container', style: styles },
             React.createElement("div", { className: classesAlert },
                 this.props.icon ?
                     React.createElement("span", { className: "sd-alert__icon" },

package/react/components/Button.js

@@ -14,6 +14,17 @@ 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);
@@ -46,6 +57,7 @@ var React = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var Icon_1 = require("./Icon");
 var Spinner_1 = require("./Spinner");
+var Tooltip_1 = require("./Tooltip");
 var Button = /** @class */ (function (_super) {
     __extends(Button, _super);
     function Button() {
@@ -67,11 +79,30 @@ var Button = /** @class */ (function (_super) {
             _a['sd-flex-justify-start'] = this.props.textAlign === 'start',
             _a['sd-flex-justify-end'] = this.props.textAlign === 'end',
             _a));
-        return (React.createElement("button", { id: this.props.id, className: classes, tabIndex: 0, disabled: this.props.disabled || this.props.isLoading, "data-loading": this.props.isLoading, onClick: this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": this.props.iconOnly ? this.props.text : '', "data-test-id": this.props['data-test-id'], title: this.props.tooltip, style: this.props.noMargin ? { margin: 0 } : undefined },
-            this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
-            this.props.icon && !this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: this.props.icon }) : null,
-            this.props.iconOnly ? null : this.props.text));
+        return (React.createElement(TooltipWrapper, { tooltipText: this.props.tooltip }, function (_a) {
+            var attributes = _a.attributes;
+            return (React.createElement("button", __assign({}, attributes, { id: _this.props.id, className: classes, tabIndex: 0, disabled: _this.props.disabled || _this.props.isLoading, "data-loading": _this.props.isLoading, onClick: _this.props.disabled ? function () { return false; } : function (event) { return _this.props.onClick(event); }, "aria-label": _this.props.iconOnly ? _this.props.text : '', "data-test-id": _this.props['data-test-id'], style: _this.props.noMargin ? { margin: 0 } : undefined }),
+                _this.props.isLoading ? React.createElement(Spinner_1.Spinner, { size: "mini" }) : null,
+                _this.props.icon && !_this.props.isLoading ? React.createElement(Icon_1.Icon, { ariaHidden: true, name: _this.props.icon }) : null,
+                _this.props.iconOnly ? null : _this.props.text));
+        }));
     };
     return Button;
 }(React.PureComponent));
 exports.Button = Button;
+var TooltipWrapper = /** @class */ (function (_super) {
+    __extends(TooltipWrapper, _super);
+    function TooltipWrapper() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TooltipWrapper.prototype.render = function () {
+        var _a = this.props, tooltipText = _a.tooltipText, children = _a.children;
+        return (tooltipText !== null && tooltipText !== void 0 ? tooltipText : '').length > 0
+            ? (React.createElement(Tooltip_1.WithTooltip, { text: tooltipText }, function (_a) {
+                var attributes = _a.attributes;
+                return children({ attributes: attributes });
+            }))
+            : (React.createElement(React.Fragment, null, children({ attributes: {} })));
+    };
+    return TooltipWrapper;
+}(React.PureComponent));

package/react/components/Tooltip.d.ts

@@ -2,14 +2,22 @@ import * as React from 'react';
 interface IProps {
     text: string | undefined | null;
     flow?: 'top' | 'left' | 'right' | 'down';
+    children(options: {
+        attributes: {
+            [name: string]: string;
+        };
+    }): React.ReactNode;
 }
-export declare class Tooltip extends React.PureComponent<IProps> {
+export declare class WithTooltip extends React.PureComponent<IProps> {
     private id;
     private instance;
     constructor(props: IProps);
     private setupTooltip;
     componentDidMount(): void;
     componentDidUpdate(): void;
+    render(): React.ReactNode;
+}
+export declare class Tooltip extends React.PureComponent<Omit<IProps, 'children'>> {
     render(): JSX.Element;
 }
 export {};

package/react/components/Tooltip.js

@@ -14,6 +14,17 @@ 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);
@@ -41,8 +52,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.Tooltip = exports.WithTooltip = void 0;
 var React = __importStar(require("react"));
+var react_id_generator_1 = __importDefault(require("react-id-generator"));
 var tippy_js_1 = __importDefault(require("tippy.js"));
 var helpers_1 = require("../helpers");
 function flowToPlacement(flow) {
@@ -61,20 +73,22 @@ function flowToPlacement(flow) {
             return (0, helpers_1.assertNever)(flow);
     }
 }
-var Tooltip = /** @class */ (function (_super) {
-    __extends(Tooltip, _super);
-    function Tooltip(props) {
+var tooltipAttributeName = 'data-with-tooltip';
+var getTooltipSelector = function (value) { return "[".concat(tooltipAttributeName, "=").concat(value, "]"); };
+var WithTooltip = /** @class */ (function (_super) {
+    __extends(WithTooltip, _super);
+    function WithTooltip(props) {
         var _this = _super.call(this, props) || this;
-        _this.id = 'tooltip-' + Math.random().toString().slice(2);
+        _this.id = (0, react_id_generator_1.default)();
         _this.instance = null;
         return _this;
     }
-    Tooltip.prototype.setupTooltip = function () {
+    WithTooltip.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, {
+            this.instance = (0, tippy_js_1.default)(getTooltipSelector(this.id), {
                 placement: placement,
             })[0];
             if (this.instance == null) {
@@ -106,14 +120,30 @@ var Tooltip = /** @class */ (function (_super) {
             this.instance.show();
         }
     };
-    Tooltip.prototype.componentDidMount = function () {
+    WithTooltip.prototype.componentDidMount = function () {
         this.setupTooltip();
     };
-    Tooltip.prototype.componentDidUpdate = function () {
+    WithTooltip.prototype.componentDidUpdate = function () {
         this.setupTooltip();
     };
+    WithTooltip.prototype.render = function () {
+        var _a;
+        return this.props.children({ attributes: (_a = {}, _a[tooltipAttributeName] = this.id, _a) });
+    };
+    return WithTooltip;
+}(React.PureComponent));
+exports.WithTooltip = WithTooltip;
+var Tooltip = /** @class */ (function (_super) {
+    __extends(Tooltip, _super);
+    function Tooltip() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
     Tooltip.prototype.render = function () {
-        return (React.createElement("div", { id: this.id, style: { display: 'inline-flex' } }, this.props.children));
+        var _this = this;
+        return (React.createElement(WithTooltip, { text: this.props.text, flow: this.props.flow }, function (_a) {
+            var attributes = _a.attributes;
+            return (React.createElement("div", __assign({}, attributes, { style: { display: 'inline-flex' } }), _this.props.children));
+        }));
     };
     return Tooltip;
 }(React.PureComponent));