@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/lib/es/components/map/utils/mapUtils.js

@@ -58,15 +58,15 @@ const createUtils = (mapApi) => {
         getBounds: () => {
             const { bounds } = mapApi.getViewModel().getLookAtData();
             // HERE Maps API for JavaScript 3.1
-            const boundingBox = bounds === null || bounds === void 0 ? void 0 : bounds.getBoundingBox();
+            const boundingBox = bounds?.getBoundingBox();
             return {
                 topLeft: {
-                    lng: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getTopLeft().lng,
-                    lat: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getTopLeft().lat,
+                    lng: boundingBox?.getTopLeft().lng,
+                    lat: boundingBox?.getTopLeft().lat,
                 },
                 bottomRight: {
-                    lng: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getBottomRight().lng,
-                    lat: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getBottomRight().lat,
+                    lng: boundingBox?.getBottomRight().lng,
+                    lat: boundingBox?.getBottomRight().lat,
                 },
             };
         },

package/lib/es/components/map/utils/positions.js

@@ -62,8 +62,8 @@ const ease = (startCoord = { lat: 0, lng: 0 }, endCoord = { lat: 1, lng: 1 }, du
     let currentSinValue = 0;
     const step = () => {
         currentSinValue += sinValueIncrement;
-        currentValueLat += valueIncrementLat * Math.pow(Math.sin(currentSinValue), 2) * 2;
-        currentValueLng += valueIncrementLng * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        currentValueLat += valueIncrementLat * Math.sin(currentSinValue) ** 2 * 2;
+        currentValueLng += valueIncrementLng * Math.sin(currentSinValue) ** 2 * 2;
         if (currentSinValue < Math.PI) {
             onStep({ lat: currentValueLat, lng: currentValueLng });
             raf(step);

package/lib/es/components/map/utils/rendering.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="heremaps" />
 import type { MapCredentials, MapType } from './mapTypes';
 export declare const getPPI: () => 100 | 200;
 export declare const isVectorBased: (enableWebGL: boolean, baseLayer: MapType) => boolean;

package/lib/es/components/map/utils/rendering.js

@@ -11,14 +11,12 @@ exports.getPPI = getPPI;
 const isVectorBased = (enableWebGL, baseLayer) => enableWebGL && baseLayer !== constants_1.MAP_TYPE_TERRAIN && baseLayer !== constants_1.MAP_TYPE_FLEET_STYLE;
 exports.isVectorBased = isVectorBased;
 // See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
-const getPlatform = (credentials) => {
-    var _a;
-    // Initiate and authenticate your connection to the HERE platform:
-    return new H.service.Platform({
-        apikey: (_a = credentials.apikey) !== null && _a !== void 0 ? _a : '',
-        useHTTPS: location.protocol === 'https:' ? true : false,
-    });
-};
+const getPlatform = (credentials) => 
+// Initiate and authenticate your connection to the HERE platform:
+new H.service.Platform({
+    apikey: credentials.apikey ?? '',
+    useHTTPS: location.protocol === 'https:' ? true : false,
+});
 exports.getPlatform = getPlatform;
 const getBaseTileLayer = (rasterTileService, engineType) => {
     // @ts-ignore-next-line "H.service.rasterTile" is newer that the types
@@ -31,7 +29,7 @@ const getBaseTileLayer = (rasterTileService, engineType) => {
 exports.getBaseTileLayer = getBaseTileLayer;
 const getBaseRasterTileService = (platform, style, features, lang) => {
     // @ts-ignore-next-line "getRasterTileService" is newer that the types
-    return platform === null || platform === void 0 ? void 0 : platform.getRasterTileService({
+    return platform?.getRasterTileService({
         format: constants_1.DEFAULT_RASTER_LAYER_FORMAT,
         queryParams: {
             // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language
@@ -81,7 +79,7 @@ const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, eng
         // );
         // const layer = new H.map.layer.TileLayer(provider, { max: 22 });
         return {
-            baseLayer: defaultLayers === null || defaultLayers === void 0 ? void 0 : defaultLayers.vector.normal.map,
+            baseLayer: defaultLayers?.vector.normal.map,
             // baseLayer: layer,
             // overlayLayer: envLayer,
         };

package/lib/es/components/mapMarker/ClusterMapMarker.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const mapTypes_1 = require("../map/utils/mapTypes");
 const ClusterMapMarker = (props) => {
@@ -10,6 +9,6 @@ const ClusterMapMarker = (props) => {
     const clusterClasses = (0, classnames_1.default)('rio-map-cluster-circle', active && 'active', cursor);
     const classes = (0, classnames_1.default)(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'not-clickable');
     const markerBackgroundColor = `var(${mapTypes_1.markerColorMapping[markerColor]})`;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-') }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-cluster' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: clusterClasses }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && (0, jsx_runtime_1.jsx)("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })) })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-'), children: (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-marker-translate', children: (0, jsx_runtime_1.jsxs)("div", { className: 'rio-map-cluster', children: [(0, jsx_runtime_1.jsx)("div", { className: clusterClasses, children: (0, jsx_runtime_1.jsxs)("div", { className: 'rio-map-cluster-content', children: [iconName && ((0, jsx_runtime_1.jsx)("span", { className: 'rio-map-icon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${iconName}` }) })), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-count', children: count })] }) }), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-bubble warning', children: warningCount })] }) }) }));
 };
 exports.default = ClusterMapMarker;

package/lib/es/components/mapMarker/SingleMapMarker.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const mapTypes_1 = require("../map/utils/mapTypes");
 const DEFAULT_BEARING = 60;
@@ -12,12 +10,11 @@ const MapStateIndicator = (props) => {
     if (!moving && !stateIconName) {
         return null;
     }
-    const stateClassName = (0, classnames_1.default)('rio-map-direction', // TODO: backwards-compatible - remove in future releases
-    'rio-map-marker-state', 'rioglyph', `rioglyph-${stateIconName || 'direction'}`);
+    const iconClassName = (0, classnames_1.default)('rioglyph', `rioglyph-${stateIconName || 'direction'}`);
     const style = stateIconName ? {} : { transform: `rotate(${bearing}deg)` };
-    return (0, jsx_runtime_1.jsx)("div", { className: stateClassName, style: style });
+    return ((0, jsx_runtime_1.jsx)("div", { className: `rio-map-icon rio-map-marker-state ${stateIconName ? '' : 'rio-map-direction'}`, children: (0, jsx_runtime_1.jsx)("span", { className: iconClassName, style: style }) }));
 };
-const getIcons = (iconNames = []) => iconNames.map((name, index) => ((0, jsx_runtime_1.jsx)("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
+const getIcons = (iconNames = []) => iconNames.map((name, index) => ((0, jsx_runtime_1.jsx)("div", { className: 'rio-map-icon', children: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${name}` }) }, `rio-map-icon-${name}-${index}`)));
 const SingleMapMarker = (props) => {
     const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', className, style, } = props;
     const largeAnchor = anchorSize === 'lg';
@@ -25,6 +22,6 @@ const SingleMapMarker = (props) => {
     const anchorClasses = (0, classnames_1.default)('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
     const singleClasses = (0, classnames_1.default)('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${mapTypes_1.markerColorMapping[markerColor]})`;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: Object.assign(Object.assign({}, style), { color: markerBackgroundColor }), "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: singleClasses }, { children: [(0, jsx_runtime_1.jsx)(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-anchor-arrow' })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: classes, style: { ...style, color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-'), children: (0, jsx_runtime_1.jsxs)("div", { className: 'rio-map-marker-translate', children: [!anchorOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: singleClasses, children: [(0, jsx_runtime_1.jsx)(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-name', children: name }), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-bubble warning', children: warningCount })] }), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-anchor-arrow' })] })), (0, jsx_runtime_1.jsx)("div", { className: anchorClasses, children: anchorIconName && largeAnchor && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${anchorIconName}` }) })] }) }));
 };
 exports.default = SingleMapMarker;

package/lib/es/components/menuItems/MenuItem.js

@@ -31,6 +31,6 @@ const MenuItem = (props) => {
     if (header) {
         return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { label: value, center: false });
     }
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index }, { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ role: 'menuitem' }, { children: value })) })));
+    return ((0, jsx_runtime_1.jsx)("li", { role: role, className: classes, onClick: handleSelectItem, onMouseEnter: handleItemMouseEnter, "data-item-index": index, children: (0, jsx_runtime_1.jsx)("a", { role: 'menuitem', children: value }) }));
 };
 exports.default = MenuItem;

package/lib/es/components/menuItems/MenuItemList.js

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const MenuItemList = (0, react_1.forwardRef)((props, ref) => {
-    const { pullRight, className, children } = props, remainingProps = tslib_1.__rest(props, ["pullRight", "className", "children"]);
+    const { pullRight, className, children, ...remainingProps } = props;
     const dropdownMenuClasses = (0, classnames_1.default)('dropdown-menu', pullRight && 'pull-right', className);
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({}, remainingProps, { className: dropdownMenuClasses, ref: ref, role: 'menu' }, { children: children })));
+    return ((0, jsx_runtime_1.jsx)("ul", { ...remainingProps, className: dropdownMenuClasses, ref: ref, role: 'menu', children: children }));
 });
 exports.default = MenuItemList;

package/lib/es/components/menuItems/MenuItems.js

@@ -2,13 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const MenuItem_1 = tslib_1.__importDefault(require("./MenuItem"));
 const MenuItems = ({ items, closeMenu = noop_1.default, onMouseEnter = noop_1.default }) => {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => {
-            var _a, _b;
-            return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, Object.assign({}, item, { index: (_a = item.index) !== null && _a !== void 0 ? _a : index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }), (_b = item.index) !== null && _b !== void 0 ? _b : index));
-        }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { ...item, index: item.index ?? index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }, item.index ?? index))) }));
 };
 exports.default = MenuItems;

package/lib/es/components/navigation/AppNavigationBar.d.ts

@@ -4,10 +4,27 @@ export type AppNavigationBarProps = {
      * The title for the content that is shown.
      */
     title?: string | ReactNode;
+    /**
+     * Defines the size of the title. Possible values are 'md' and 'lg'.
+     *
+     * @default 'md'
+     */
+    titleSize?: 'md' | 'lg';
+    /**
+     * Adds a subtitle below the title.
+     */
+    subtitle?: string | ReactNode;
     /**
      * Right side area for additional options of buttons like filter etc. that is relevant for the shown content..
      */
     right?: ReactNode;
+    backButtonText?: string | ReactNode;
+    /**
+     * Add a light bottom border to the wrapper element.
+     *
+     * @default false
+     */
+    border?: boolean;
     /**
      * Callback function for when the back navigation button is clicked.
      */

package/lib/es/components/navigation/AppNavigationBar.js

@@ -8,8 +8,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
 exports.AppNavigationBar = (0, react_1.forwardRef)((props, ref) => {
-    const { className, title, right = (0, jsx_runtime_1.jsx)("span", {}), onNavigateBack = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["className", "title", "right", "onNavigateBack"]);
-    const navigationClasses = (0, classnames_1.default)('AppNavigationBar', 'width-100pct display-flex align-items-center justify-content-between height-45 user-select-none padding-x-10', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex align-items-center gap-5' }, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', className: 'text-color-darkest', iconOnly: true, iconName: 'rioglyph-arrow-left', onClick: onNavigateBack }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'text-medium text-color-darker' }, { children: title }))] })), (0, jsx_runtime_1.jsx)("div", { children: right })] })));
+    const { className, title, right = (0, jsx_runtime_1.jsx)("span", {}), backButtonText = '', titleSize = 'md', subtitle, border = false, onNavigateBack = noop_1.default, ...remainingProps } = props;
+    const navigationClasses = (0, classnames_1.default)('AppNavigationBar', 'width-100pct height-45 user-select-none padding-x-10', 'display-grid grid-stack align-items-center', titleSize === 'md' && 'text-size-14', titleSize === 'lg' && 'text-size-16', border && 'border border-bottom-only border-color-lighter', className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, ...remainingProps, className: navigationClasses, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'grid-stack-item display-flex align-items-center justify-content-between', children: [(0, jsx_runtime_1.jsx)(Button_1.default, { bsStyle: 'muted', className: 'text-color-darkest', iconOnly: !backButtonText, iconName: 'rioglyph-arrow-left', onClick: onNavigateBack, children: backButtonText }), (0, jsx_runtime_1.jsx)("div", { className: 'btn-toolbar gap-2', children: right })] }), (0, jsx_runtime_1.jsxs)("div", { className: 'grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ellipsis-1', children: title }), subtitle && (0, jsx_runtime_1.jsx)("div", { className: 'text-size-12 line-height-12 text-normal margin-top--2', children: subtitle })] })] }));
 });
 exports.default = exports.AppNavigationBar;

package/lib/es/components/noData/NoData.js

@@ -2,17 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
 const Placement_1 = require("../../values/Placement");
 const NoData = (props) => {
-    const { text, className = '', tooltip, tooltipPlacement = Placement_1.PLACEMENT.BOTTOM, tooltipWidth = 'auto' } = props, remainingProps = tslib_1.__rest(props, ["text", "className", "tooltip", "tooltipPlacement", "tooltipWidth"]);
+    const { text, className = '', tooltip, tooltipPlacement = Placement_1.PLACEMENT.BOTTOM, tooltipWidth = 'auto', ...remainingProps } = props;
     const noDataClasses = (0, classnames_1.default)('NoData', className);
     if (tooltip) {
-        return ((0, jsx_runtime_1.jsxs)("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none user-select-none' }, { children: text })), (0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, Object.assign({ content: tooltip, placement: tooltipPlacement, width: tooltipWidth }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-info-sign margin-left-5' }) }))] })));
+        return ((0, jsx_runtime_1.jsxs)("span", { ...remainingProps, className: noDataClasses, children: [(0, jsx_runtime_1.jsx)("span", { className: 'pointer-events-none user-select-none', children: text }), (0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, { content: tooltip, placement: tooltipPlacement, width: tooltipWidth, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-info-sign margin-left-5' }) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'pointer-events-none user-select-none' }, { children: text })) })));
+    return ((0, jsx_runtime_1.jsx)("span", { ...remainingProps, className: noDataClasses, children: (0, jsx_runtime_1.jsx)("span", { className: 'pointer-events-none user-select-none', children: text }) }));
 };
 exports.default = NoData;

package/lib/es/components/notification/Notification.d.ts

@@ -1,32 +1,52 @@
 import React from 'react';
-type TriggerFunction = (
-/**
- * The message to be shown.
- */
-message: string | React.ReactNode, 
-/**
- * The title to be shown.
- */
-title?: string | React.ReactNode, 
-/**
- * The popup timeout in milliseconds.
- *
- * If you do not want it to automatically disappear you can define a very high timeOut.
- */
-timeOut?: number, 
-/**
- * A function that gets invoked when the notification is clicked.
- */
-callback?: VoidFunction, 
-/**
- * If true, the message gets inserted at the top of the notification stack.
- */
-priority?: boolean) => void;
-type NotificationTypeStub = {
-    success: TriggerFunction;
-    info: TriggerFunction;
-    warning: TriggerFunction;
-    error: TriggerFunction;
+export declare const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5000;
+export declare const NOTIFICATION_TIMEOUT_INFINITE = 999999;
+export type NotificationOptions = {
+    /**
+     * The title to be shown.
+     */
+    title?: string | React.ReactNode;
+    /**
+     * The timeout in milliseconds after which the notification disappears.
+     *
+     * If you don`t want it to automatically disappear, set a very high number.
+     */
+    timeout?: number;
+    /**
+     * A function that gets invoked when the notification is clicked.
+     */
+    callback?: VoidFunction;
+    /**
+     * If true, the message gets inserted at the top of the notification stack.
+     *
+     * @default false
+     * @deprecated
+     */
+    priority?: boolean;
+    /**
+     * Flag to enable a close button.
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * Flag to disable close on clicking on the notification.
+     *
+     * @default true
+     */
+    closeOnClick?: boolean;
+    /**
+     * Flag to show a progress bar. By default it is not shown.
+     *
+     * @default true
+     */
+    hideProgressBar?: boolean;
 };
-declare const _default: NotificationTypeStub;
-export default _default;
+declare const Notification: {
+    default: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    success: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    info: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    warning: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+    error: (message: string | React.ReactNode, optionsOrTitle?: string | React.ReactNode | NotificationOptions, timeout?: number, callback?: VoidFunction, priority?: boolean) => import("react-toastify").Id;
+};
+export default Notification;

package/lib/es/components/notification/Notification.js

@@ -1,7 +1,102 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NOTIFICATION_TIMEOUT_INFINITE = exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
-require("react");
-// @ts-ignore-next-line 7016
-const react_notifications_1 = require("react-notifications");
-exports.default = react_notifications_1.NotificationManager;
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_toastify_1 = require("react-toastify");
+exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;
+exports.NOTIFICATION_TIMEOUT_INFINITE = 999_999;
+const baseOptions = {
+    position: 'top-right',
+    hideProgressBar: true,
+    pauseOnHover: true,
+    draggable: true,
+    theme: 'colored',
+    transition: react_toastify_1.Slide,
+};
+const ToastMessage = (props) => {
+    const { title, message } = props;
+    return ((0, jsx_runtime_1.jsx)("div", { className: 'notification', children: (0, jsx_runtime_1.jsxs)("div", { className: 'notification-message', role: 'alert', children: [title && (0, jsx_runtime_1.jsx)("h4", { className: 'title', children: title }), (0, jsx_runtime_1.jsx)("div", { className: 'message', children: message })] }) }));
+};
+const normalizeArgs = (optionsOrTitle, timeout, callback, priority) => {
+    // Handle the new options object format
+    if (optionsOrTitle && typeof optionsOrTitle === 'object' && !react_1.default.isValidElement(optionsOrTitle)) {
+        return { ...optionsOrTitle };
+    }
+    // Handle legacy format with multiple arguments
+    return {
+        title: typeof optionsOrTitle === 'string' ? optionsOrTitle : undefined,
+        timeout,
+        callback,
+        priority,
+    };
+};
+const mapOptions = (options) => {
+    const { timeout, callback, priority, // does not work like that with react-toastify, so we ignore it
+    iconClassName, closeButton = false, hideProgressBar = true, closeOnClick = true, } = options;
+    return {
+        ...baseOptions,
+        autoClose: timeout || exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,
+        onClick: callback,
+        hideProgressBar,
+        closeOnClick,
+        // replace the default built-in icons
+        icon: (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconClassName}` }),
+        // in case a close button is requested, ignore the auto-injected "closeToast" prop
+        // as otherwise it will be passed onto the underlying DOM element
+        closeButton: closeButton
+            ? ({ closeToast: ignoreCloseToast }) => ((0, jsx_runtime_1.jsx)("button", { className: 'notification-close', type: 'button', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-remove' }) }))
+            : false,
+    };
+};
+const Notification = (() => {
+    const notify = (type, message, optionsOrTitle, timeout, callback, priority) => {
+        // Normalize arguments
+        const { title, timeout: time, callback: cb, priority: prio, closeButton, closeOnClick, hideProgressBar, } = normalizeArgs(optionsOrTitle, timeout, callback, priority);
+        // Map icon class names based on type
+        const iconClassNames = {
+            default: '',
+            success: 'rioglyph-ok text-size-18',
+            info: 'rioglyph-info-sign text-size-20',
+            warn: 'rioglyph-exclamation-sign text-size-20',
+            error: 'rioglyph-error-sign text-size-20',
+        };
+        if (type === 'default') {
+            return (0, react_toastify_1.toast)((0, jsx_runtime_1.jsx)(ToastMessage, { message: message, title: title }), mapOptions({
+                timeout: time,
+                callback: cb,
+                priority: prio,
+                closeButton,
+                closeOnClick,
+                hideProgressBar,
+                iconClassName: iconClassNames[type],
+            }));
+        }
+        // Call the appropriate toast function
+        return react_toastify_1.toast[type]((0, jsx_runtime_1.jsx)(ToastMessage, { message: message, title: title }), mapOptions({
+            timeout: time,
+            callback: cb,
+            priority: prio,
+            closeButton,
+            closeOnClick,
+            hideProgressBar,
+            iconClassName: iconClassNames[type],
+        }));
+    };
+    // Wrappers for specific types
+    const defaultNotification = (message, optionsOrTitle, timeout, callback, priority) => notify('default', message, optionsOrTitle, timeout, callback, priority);
+    const info = (message, optionsOrTitle, timeout, callback, priority) => notify('info', message, optionsOrTitle, timeout, callback, priority);
+    const success = (message, optionsOrTitle, timeout, callback, priority) => notify('success', message, optionsOrTitle, timeout, callback, priority);
+    const warning = (message, optionsOrTitle, timeout, callback, priority) => notify('warn', message, optionsOrTitle, timeout, callback, priority);
+    const error = (message, optionsOrTitle, timeout, callback, priority) => notify('error', message, optionsOrTitle, timeout, callback, priority);
+    return {
+        default: defaultNotification,
+        success,
+        info,
+        warning,
+        error,
+    };
+})();
+exports.default = Notification;

package/lib/es/components/notification/NotificationsContainer.d.ts

@@ -1,6 +1,8 @@
 export type NotificationsContainerProps = {
     /**
      * Defines whether the notification are stacked.
+     *
+     * @deprecated
      */
     stacked?: boolean;
 };

package/lib/es/components/notification/NotificationsContainer.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-// @ts-ignore-next-line 7016
-const react_notifications_1 = require("react-notifications");
+const react_toastify_1 = require("react-toastify");
 const NotificationsContainer = ({ stacked }) => {
     const wrapperClasses = (0, classnames_1.default)('notification-container-wrapper', stacked && 'stacked');
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: wrapperClasses }, { children: (0, jsx_runtime_1.jsx)(react_notifications_1.NotificationContainer, {}) })));
+    return ((0, jsx_runtime_1.jsx)("div", { className: wrapperClasses, children: (0, jsx_runtime_1.jsx)(react_toastify_1.ToastContainer, { className: 'notification-container', stacked: false, limit: 5 }) }));
 };
 exports.default = NotificationsContainer;

package/lib/es/components/numberControl/NumberControl.js

@@ -10,7 +10,7 @@ const INITIAL_TICK = 700;
 const TICK_TIME = 50;
 const DEFAULT_DIGIT_PRECISION = 3;
 const NumberControl = (0, react_1.forwardRef)((props, ref) => {
-    const { id, min = NumberInput_1.DEFAULT_MIN, max = NumberInput_1.DEFAULT_MAX, step = NumberInput_1.DEFAULT_STEP, value, onChange, onValueChanged = () => { }, onKeyDown = noop_1.default, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault } = props, remainingProps = tslib_1.__rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "onKeyDown", "disabled", "bsSize", "className", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "digitPrecision", "placeholder", "noDefault"]);
+    const { id, min = NumberInput_1.DEFAULT_MIN, max = NumberInput_1.DEFAULT_MAX, step = NumberInput_1.DEFAULT_STEP, value, onChange, onValueChanged = () => { }, onKeyDown = noop_1.default, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault, ...remainingProps } = props;
     // Note, "onChange" should replace "onValueChanged" in the future but it's widely used
     const callback = onChange || onValueChanged;
     const timeout = (0, react_1.useRef)(null);
@@ -110,7 +110,7 @@ const NumberControl = (0, react_1.forwardRef)((props, ref) => {
         callback(newValue);
     };
     const classes = (0, classnames_1.default)('NumberControl', className);
-    const controls = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton text-color-gray hover-text-color-dark margin-left-5' }, { children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] })));
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: classes }, { children: (0, jsx_runtime_1.jsx)(NumberInput_1.default, { id: id, ref: ref, min: min, max: max, value: internalValue, step: step, bsSize: bsSize, disabled: disabled, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, controls: controls, unit: unit, onChange: handleUpdatedNumberInputValue, onKeyDown: onKeyDown, digitPrecision: digitPrecision, placeholder: placeholder, noDefault: noDefault }) })));
+    const controls = ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding, children: [(0, jsx_runtime_1.jsx)("div", { onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer', children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-minus scale-90' }) }), (0, jsx_runtime_1.jsx)("div", { onMouseDown: handleMouseDownOnIncrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'increment-button', className: 'incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5', children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-plus scale-90' }) })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { ...remainingProps, className: classes, children: (0, jsx_runtime_1.jsx)(NumberInput_1.default, { id: id, ref: ref, min: min, max: max, value: internalValue, step: step, bsSize: bsSize, disabled: disabled, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, controls: controls, unit: unit, onChange: handleUpdatedNumberInputValue, onKeyDown: onKeyDown, digitPrecision: digitPrecision, placeholder: placeholder, noDefault: noDefault }) }));
 });
 exports.default = NumberControl;

package/lib/es/components/numberInput/NumberInput.js

@@ -63,7 +63,7 @@ const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
     return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
 };
 const NumberInput = (0, react_1.forwardRef)((props, ref) => {
-    const { id, min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop_1.default, onKeyDown = noop_1.default, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = tslib_1.__rest(props, ["id", "min", "max", "value", "step", "disabled", "noDefault", "onChange", "onValueChanged", "onKeyDown", "bsSize", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "controls", "placeholder", "digitPrecision", "className"]);
+    const { id, min: propMin, max: propMax, value: propValue, step = exports.DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop_1.default, onKeyDown = noop_1.default, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '', ...remainingProps } = props;
     const previousKeyRef = (0, react_1.useRef)('');
     const callback = onChange || onValueChanged;
     const min = (0, exports.convertNonIntegerToDefault)(propMin, exports.DEFAULT_MIN);
@@ -161,9 +161,9 @@ const NumberInput = (0, react_1.forwardRef)((props, ref) => {
     const inputGroupClassNames = (0, classnames_1.default)('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
     const inputClassNames = (0, classnames_1.default)('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
     const hasFeedback = errorMessage || warningMessage;
-    const input = ((0, jsx_runtime_1.jsx)("input", Object.assign({}, remainingProps, { id: id, type: 'number', step: step, min: min, max: max, value: state.isValid ? state.value : state.enteredValue, className: inputClassNames, disabled: disabled, onBlur: handleBlur, 
+    const input = ((0, jsx_runtime_1.jsx)("input", { ...remainingProps, id: id, type: 'number', step: step, min: min, max: max, value: state.isValid ? state.value : state.enteredValue, className: inputClassNames, disabled: disabled, onBlur: handleBlur, 
         // onChange={state.value ? handleOnChange : undefined}
-        onChange: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel })));
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'input-group-addon' }, { children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [input, hasFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) }))] }))] })), (unit || controls) && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}` }, { children: [unit && unit, controls && controls] })))] })));
+        onChange: handleOnChange, onKeyDown: handleKeyDown, ref: ref, "aria-label": 'number-input', placeholder: placeholder, onWheel: handleWheel }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: inputGroupClassNames, children: [inputAddon && ((0, jsx_runtime_1.jsx)("div", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: inputAddon }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'form-control-feedback-wrapper', children: [input, hasFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), (0, jsx_runtime_1.jsx)("span", { className: `help-block white-space-${messageWhiteSpace}`, children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) })] }))] }), (unit || controls) && ((0, jsx_runtime_1.jsxs)("div", { className: `input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`, children: [unit && unit, controls && controls] }))] }));
 });
 exports.default = NumberInput;

package/lib/es/components/onboarding/OnboardingTip.js

@@ -2,8 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
-require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const Button_1 = tslib_1.__importDefault(require("../button/Button"));
@@ -14,9 +12,9 @@ const Placement_1 = require("../../values/Placement");
 const OnboardingTip = (props) => {
     const { id, show = false, placement = Placement_1.PLACEMENT.BOTTOM, title, content, onHide = noop_1.default, children, textAlignment = TextAlignment_1.TEXT_ALIGNMENT.LEFT, useInDialog = false, showCloseIcon = true, clickflow = false, previousButton, nextButton, className = '', width, preventOverflow = true, popperConfig, } = props;
     // DEPRECATED in favor of driver.js - see useOnboardingTour hook
-    const clickFlowWithButtons = ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column gap-25' }, { children: [(0, jsx_runtime_1.jsx)("div", { children: content }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}` }, { children: [previousButton ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'position-relative' }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), (0, jsx_runtime_1.jsxs)(Button_1.default, Object.assign({ bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick }, { children: [previousButton.iconName && ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), (0, jsx_runtime_1.jsx)("span", { children: previousButton.text })] }))] }))) : ((0, jsx_runtime_1.jsx)("div", {})), nextButton ? ((0, jsx_runtime_1.jsxs)(Button_1.default, Object.assign({ bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true }, { children: [(0, jsx_runtime_1.jsx)("span", { children: nextButton.text }), nextButton.iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] }))) : ((0, jsx_runtime_1.jsx)("div", {}))] }))] })));
+    const clickFlowWithButtons = ((0, jsx_runtime_1.jsxs)("div", { className: 'display-flex flex-column gap-25', children: [(0, jsx_runtime_1.jsx)("div", { children: content }), (0, jsx_runtime_1.jsxs)("div", { className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}`, children: [previousButton ? ((0, jsx_runtime_1.jsxs)("div", { className: 'position-relative', children: [(0, jsx_runtime_1.jsx)("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), (0, jsx_runtime_1.jsxs)(Button_1.default, { bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick, children: [previousButton.iconName && ((0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), (0, jsx_runtime_1.jsx)("span", { children: previousButton.text })] })] })) : ((0, jsx_runtime_1.jsx)("div", {})), nextButton ? ((0, jsx_runtime_1.jsxs)(Button_1.default, { bsStyle: Button_1.default.SECONDARY, variant: Button_1.default.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true, children: [(0, jsx_runtime_1.jsx)("span", { children: nextButton.text }), nextButton.iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] })) : ((0, jsx_runtime_1.jsx)("div", {}))] })] }));
     const tooltipWrapperClasses = (0, classnames_1.default)(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
-    const overlay = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip_1.default.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex' }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-content' }, { children: clickflow ? clickFlowWithButtons : content }))] })), showCloseIcon && (0, jsx_runtime_1.jsx)("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
+    const overlay = ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { className: tooltipWrapperClasses, tooltipStyle: Tooltip_1.default.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true, children: (0, jsx_runtime_1.jsxs)("div", { className: 'display-flex', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'display-flex flex-column flex-1-1', children: [title && (0, jsx_runtime_1.jsx)("div", { className: 'tooltip-title', children: title }), content && (0, jsx_runtime_1.jsx)("div", { className: 'tooltip-content', children: clickflow ? clickFlowWithButtons : content })] }), showCloseIcon && (0, jsx_runtime_1.jsx)("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] }) }));
     const actualPopperConfig = popperConfig || {
         strategy: 'fixed',
         modifiers: [
@@ -29,7 +27,7 @@ const OnboardingTip = (props) => {
             { name: 'arrow', options: {} },
         ],
     };
-    const trigger = ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig }, { children: children })));
+    const trigger = ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig, children: children }));
     return show ? trigger : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 OnboardingTip.AUTO_START = Placement_1.PLACEMENT.AUTO_START;