superdesk-ui-framework 4.0.0 → 4.0.2

package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx

@@ -7,6 +7,7 @@ interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
     headerPadding?: HeaderPadding;
+    hideCollapseButton?: boolean;
 }
 
 interface IState {
@@ -23,6 +24,8 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
     }
 
     render() {
+        const hideCollapseButton = this.props.hideCollapseButton ?? false;
+
         const classes = classNames('sd-editor-content__authoring-header', {
             'authoring-header--collapsed': this.state.collapsed,
         });
@@ -41,10 +44,12 @@ export class AuthoringInnerHeader extends React.PureComponent<IProps, IState> {
                 <div className="authoring-header__holder">
                     {this.props.children}
                 </div>
-                <button className="authoring-header__toggle"
-                    onClick={() => this.setState({collapsed: !this.state.collapsed})}>
-                    <Icon name="chevron-up-thin" />
-                </button>
+                {!hideCollapseButton && (
+                    <button className="authoring-header__toggle"
+                        onClick={() => this.setState({collapsed: !this.state.collapsed})}>
+                        <Icon name="chevron-up-thin" />
+                    </button>
+                )}
             </header>
         );
     }

package/app-typescript/components/Layouts/AuthoringMain.tsx

@@ -22,6 +22,7 @@ interface IProps {
     authoringHeader?: React.ReactNode;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
+    hideCollapseButton?: boolean;
     headerPadding?: HeaderPadding;
     toolbarCustom?: boolean;
     noPaddingForContent?: boolean;
@@ -39,6 +40,7 @@ export class AuthoringMain extends React.PureComponent<IProps> {
                 <AuthoringMainContent>
                     {this.props.authoringHeader && (
                         <AuthoringInnerHeader
+                            hideCollapseButton={this.props.hideCollapseButton}
                             headerPadding={this.props.headerPadding}
                             collapsed={this.props.headerCollapsed}>
                             {this.props.authoringHeader}

package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx

@@ -67,7 +67,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
                         aria-controls={this.htmlId}
                     >
                         <span className='label label--translucent new-collapse-box__divider-label'>
-                            {this.props.toggleButtonLabel}
+                            {this.props.getToggleButtonLabel(isOpen)}
                         </span>
                     </button>
                 </div>

package/app-typescript/components/ToggleBox/index.tsx

@@ -21,7 +21,7 @@ export interface IPropsCustomHeader {
     variant: 'custom-header'; // always visible
     header: React.ReactNode;
     children: React.ReactNode;
-    toggleButtonLabel: string;
+    getToggleButtonLabel: (isOpen: boolean) => string;
     initiallyOpen?: boolean;
     onToggle?(isOpen: boolean): void;
 }

package/app-typescript/components/Tooltip.tsx

@@ -40,8 +40,7 @@ class TooltipBasic extends React.PureComponent<IProps> {
 }
 
 const TooltipAppended: React.FC<IProps> = ({children, flow, text}) => {
-    const htmlId = nextId();
-    const triggerId = "t" + htmlId;
+    const triggerId = `uif-tooltip-${Math.random().toString().slice(2)}`;
     const position = flow === "down" ? "bottom" : flow;
 
     return (

package/dist/examples.bundle.js

@@ -27517,8 +27517,7 @@ var TooltipBasic = /** @class */ (function (_super) {
 }(React.PureComponent));
 var TooltipAppended = function (_a) {
     var children = _a.children, flow = _a.flow, text = _a.text;
-    var htmlId = (0, react_id_generator_1.default)();
-    var triggerId = "t" + htmlId;
+    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' }),
@@ -147461,7 +147460,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
             React.createElement("div", { className: 'new-collapse-box__header' },
                 React.createElement("div", { className: 'new-collapse-box__header-inner' }, this.props.header),
                 React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
-                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
+                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
             React.createElement("div", { className: 'new-collapse-box__content' },
                 React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
                         'toggle-box__content--animation': this.state.isAnimating,
@@ -150210,7 +150209,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { hideCollapseButton: this.props.hideCollapseButton, headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };
@@ -150469,6 +150468,8 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
     }
     AuthoringInnerHeader.prototype.render = function () {
         var _this = this;
+        var _a;
+        var hideCollapseButton = (_a = this.props.hideCollapseButton) !== null && _a !== void 0 ? _a : false;
         var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
             'authoring-header--collapsed': this.state.collapsed,
         });
@@ -150480,8 +150481,8 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
                 paddingInlineEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineEnd,
             }, className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
-            React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
-                React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
+            !hideCollapseButton && (React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
+                React.createElement(Icon_1.Icon, { name: "chevron-up-thin" })))));
     };
     return AuthoringInnerHeader;
 }(React.PureComponent));
@@ -185172,7 +185173,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
 /* 936 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"4.0.0","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"},"peerDependencies":{"moment":"*"}}
+module.exports = {"name":"superdesk-ui-framework","version":"4.0.2","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3"},"peerDependencies":{"moment":"*"}}
 
 /***/ }),
 /* 937 */

package/dist/superdesk-ui.bundle.js

@@ -27068,8 +27068,7 @@ var TooltipBasic = /** @class */ (function (_super) {
 }(React.PureComponent));
 var TooltipAppended = function (_a) {
     var children = _a.children, flow = _a.flow, text = _a.text;
-    var htmlId = (0, react_id_generator_1.default)();
-    var triggerId = "t" + htmlId;
+    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' }),
@@ -146582,7 +146581,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
             React.createElement("div", { className: 'new-collapse-box__header' },
                 React.createElement("div", { className: 'new-collapse-box__header-inner' }, this.props.header),
                 React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
-                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
+                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
             React.createElement("div", { className: 'new-collapse-box__content' },
                 React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
                         'toggle-box__content--animation': this.state.isAnimating,
@@ -149331,7 +149330,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { hideCollapseButton: this.props.hideCollapseButton, headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };
@@ -149590,6 +149589,8 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
     }
     AuthoringInnerHeader.prototype.render = function () {
         var _this = this;
+        var _a;
+        var hideCollapseButton = (_a = this.props.hideCollapseButton) !== null && _a !== void 0 ? _a : false;
         var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
             'authoring-header--collapsed': this.state.collapsed,
         });
@@ -149601,8 +149602,8 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
                 paddingInlineEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineEnd,
             }, className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
-            React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
-                React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
+            !hideCollapseButton && (React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
+                React.createElement(Icon_1.Icon, { name: "chevron-up-thin" })))));
     };
     return AuthoringInnerHeader;
 }(React.PureComponent));

package/package.json

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

package/react/components/Layouts/AuthoringInnerHeader.d.ts

@@ -4,6 +4,7 @@ interface IProps {
     children?: React.ReactNode;
     collapsed?: boolean;
     headerPadding?: HeaderPadding;
+    hideCollapseButton?: boolean;
 }
 interface IState {
     collapsed: boolean;

package/react/components/Layouts/AuthoringInnerHeader.js

@@ -56,6 +56,8 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
     }
     AuthoringInnerHeader.prototype.render = function () {
         var _this = this;
+        var _a;
+        var hideCollapseButton = (_a = this.props.hideCollapseButton) !== null && _a !== void 0 ? _a : false;
         var classes = (0, classnames_1.default)('sd-editor-content__authoring-header', {
             'authoring-header--collapsed': this.state.collapsed,
         });
@@ -67,8 +69,8 @@ var AuthoringInnerHeader = /** @class */ (function (_super) {
                 paddingInlineEnd: headerPadding === null || headerPadding === void 0 ? void 0 : headerPadding.inlineEnd,
             }, className: classes },
             React.createElement("div", { className: "authoring-header__holder" }, this.props.children),
-            React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
-                React.createElement(Icon_1.Icon, { name: "chevron-up-thin" }))));
+            !hideCollapseButton && (React.createElement("button", { className: "authoring-header__toggle", onClick: function () { return _this.setState({ collapsed: !_this.state.collapsed }); } },
+                React.createElement(Icon_1.Icon, { name: "chevron-up-thin" })))));
     };
     return AuthoringInnerHeader;
 }(React.PureComponent));

package/react/components/Layouts/AuthoringMain.d.ts

@@ -11,6 +11,7 @@ interface IProps {
     authoringHeader?: React.ReactNode;
     authoringBookmarks?: React.ReactNode;
     headerCollapsed?: boolean;
+    hideCollapseButton?: boolean;
     headerPadding?: HeaderPadding;
     toolbarCustom?: boolean;
     noPaddingForContent?: boolean;

package/react/components/Layouts/AuthoringMain.js

@@ -50,7 +50,7 @@ var AuthoringMain = /** @class */ (function (_super) {
         return (React.createElement(_1.AuthoringMainContainer, null,
             this.props.toolBar && (React.createElement(_1.AuthoringMainToolBar, { toolbarCustom: this.props.toolbarCustom }, this.props.toolBar)),
             React.createElement(_1.AuthoringMainContent, null,
-                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
+                this.props.authoringHeader && (React.createElement(_1.AuthoringInnerHeader, { hideCollapseButton: this.props.hideCollapseButton, headerPadding: this.props.headerPadding, collapsed: this.props.headerCollapsed }, this.props.authoringHeader)),
                 this.props.authoringBookmarks && (React.createElement(_1.AuthorinInnerSideBar, null, this.props.authoringBookmarks)),
                 React.createElement(_1.AuthoringInnerBody, { noPadding: this.props.noPaddingForContent }, this.props.children))));
     };

package/react/components/ToggleBox/CustomHeaderToggleBox.js

@@ -88,7 +88,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
             React.createElement("div", { className: 'new-collapse-box__header' },
                 React.createElement("div", { className: 'new-collapse-box__header-inner' }, this.props.header),
                 React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
-                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
+                    React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
             React.createElement("div", { className: 'new-collapse-box__content' },
                 React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
                         'toggle-box__content--animation': this.state.isAnimating,

package/react/components/ToggleBox/index.d.ts

@@ -16,7 +16,7 @@ export interface IPropsCustomHeader {
     variant: 'custom-header';
     header: React.ReactNode;
     children: React.ReactNode;
-    toggleButtonLabel: string;
+    getToggleButtonLabel: (isOpen: boolean) => string;
     initiallyOpen?: boolean;
     onToggle?(isOpen: boolean): void;
 }

package/react/components/Tooltip.js

@@ -103,8 +103,7 @@ var TooltipBasic = /** @class */ (function (_super) {
 }(React.PureComponent));
 var TooltipAppended = function (_a) {
     var children = _a.children, flow = _a.flow, text = _a.text;
-    var htmlId = (0, react_id_generator_1.default)();
-    var triggerId = "t" + htmlId;
+    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' }),