@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/map/utils/rendering.js

@@ -6,14 +6,12 @@ export const getPPI = () => (window.devicePixelRatio >= 1.7 ? 200 : 100);
 // Even if webgl is enabled, some base layer cannot be rendered in HARP properly
 export const isVectorBased = (enableWebGL, baseLayer) => enableWebGL && baseLayer !== MAP_TYPE_TERRAIN && baseLayer !== MAP_TYPE_FLEET_STYLE;
 // See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
-export 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,
-    });
-};
+export 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,
+});
 export const getBaseTileLayer = (rasterTileService, engineType) => {
     // @ts-ignore-next-line "H.service.rasterTile" is newer that the types
     const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
@@ -24,7 +22,7 @@ export const getBaseTileLayer = (rasterTileService, engineType) => {
 };
 export 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: DEFAULT_RASTER_LAYER_FORMAT,
         queryParams: {
             // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language
@@ -72,7 +70,7 @@ export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platfo
         // );
         // 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/components/mapMarker/ClusterMapMarker.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'react';
 import classNames from 'classnames';
 import { markerColorMapping } from '../map/utils/mapTypes';
 const ClusterMapMarker = (props) => {
@@ -7,6 +6,6 @@ const ClusterMapMarker = (props) => {
     const clusterClasses = classNames('rio-map-cluster-circle', active && 'active', cursor);
     const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'not-clickable');
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
-    return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-') }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: clusterClasses }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })) })) })));
+    return (_jsx("div", { className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-'), children: _jsx("div", { className: 'rio-map-marker-translate', children: _jsxs("div", { className: 'rio-map-cluster', children: [_jsx("div", { className: clusterClasses, children: _jsxs("div", { className: 'rio-map-cluster-content', children: [iconName && (_jsx("span", { className: 'rio-map-icon', children: _jsx("span", { className: `rioglyph rioglyph-${iconName}` }) })), _jsx("div", { className: 'rio-map-count', children: count })] }) }), exceptionCount > 0 && _jsx("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && _jsx("div", { className: 'rio-map-bubble warning', children: warningCount })] }) }) }));
 };
 export default ClusterMapMarker;

package/components/mapMarker/SingleMapMarker.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import { markerColorMapping } from '../map/utils/mapTypes';
 const DEFAULT_BEARING = 60;
@@ -9,12 +7,11 @@ const MapStateIndicator = (props) => {
     if (!moving && !stateIconName) {
         return null;
     }
-    const stateClassName = classNames('rio-map-direction', // TODO: backwards-compatible - remove in future releases
-    'rio-map-marker-state', 'rioglyph', `rioglyph-${stateIconName || 'direction'}`);
+    const iconClassName = classNames('rioglyph', `rioglyph-${stateIconName || 'direction'}`);
     const style = stateIconName ? {} : { transform: `rotate(${bearing}deg)` };
-    return _jsx("div", { className: stateClassName, style: style });
+    return (_jsx("div", { className: `rio-map-icon rio-map-marker-state ${stateIconName ? '' : 'rio-map-direction'}`, children: _jsx("span", { className: iconClassName, style: style }) }));
 };
-const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
+const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: 'rio-map-icon', children: _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';
@@ -22,6 +19,6 @@ const SingleMapMarker = (props) => {
     const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
     const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
-    return (_jsx("div", Object.assign({ className: classes, style: Object.assign(Object.assign({}, style), { color: markerBackgroundColor }), "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
+    return (_jsx("div", { className: classes, style: { ...style, color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-'), children: _jsxs("div", { className: 'rio-map-marker-translate', children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", { className: singleClasses, children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", { className: 'rio-map-name', children: name }), exceptionCount > 0 && _jsx("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && _jsx("div", { className: 'rio-map-bubble warning', children: warningCount })] }), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", { className: anchorClasses, children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) })] }) }));
 };
 export default SingleMapMarker;

package/components/menuItems/MenuItem.js

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

package/components/menuItems/MenuItemList.js

@@ -1,10 +1,9 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 const MenuItemList = forwardRef((props, ref) => {
-    const { pullRight, className, children } = props, remainingProps = __rest(props, ["pullRight", "className", "children"]);
+    const { pullRight, className, children, ...remainingProps } = props;
     const dropdownMenuClasses = classNames('dropdown-menu', pullRight && 'pull-right', className);
-    return (_jsx("ul", Object.assign({}, remainingProps, { className: dropdownMenuClasses, ref: ref, role: 'menu' }, { children: children })));
+    return (_jsx("ul", { ...remainingProps, className: dropdownMenuClasses, ref: ref, role: 'menu', children: children }));
 });
 export default MenuItemList;

package/components/menuItems/MenuItems.js

@@ -1,11 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import 'react';
 import noop from 'lodash/fp/noop';
 import MenuItemComponent from './MenuItem';
 const MenuItems = ({ items, closeMenu = noop, onMouseEnter = noop }) => {
-    return (_jsx(_Fragment, { children: items.map((item, index) => {
-            var _a, _b;
-            return (_jsx(MenuItemComponent, 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 (_jsx(_Fragment, { children: items.map((item, index) => (_jsx(MenuItemComponent, { ...item, index: item.index ?? index, closeMenu: closeMenu, onMouseEnter: onMouseEnter }, item.index ?? index))) }));
 };
 export default MenuItems;

package/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/components/navigation/AppNavigationBar.js

@@ -1,12 +1,11 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import Button from '../button/Button';
 export const AppNavigationBar = forwardRef((props, ref) => {
-    const { className, title, right = _jsx("span", {}), onNavigateBack = noop } = props, remainingProps = __rest(props, ["className", "title", "right", "onNavigateBack"]);
-    const navigationClasses = classNames('AppNavigationBar', 'width-100pct display-flex align-items-center justify-content-between height-45 user-select-none padding-x-10', className);
-    return (_jsxs("div", Object.assign({ ref: ref }, remainingProps, { className: navigationClasses }, { children: [_jsxs("div", Object.assign({ className: 'display-flex align-items-center gap-5' }, { children: [_jsx(Button, { bsStyle: 'muted', className: 'text-color-darkest', iconOnly: true, iconName: 'rioglyph-arrow-left', onClick: onNavigateBack }), _jsx("div", Object.assign({ className: 'text-medium text-color-darker' }, { children: title }))] })), _jsx("div", { children: right })] })));
+    const { className, title, right = _jsx("span", {}), backButtonText = '', titleSize = 'md', subtitle, border = false, onNavigateBack = noop, ...remainingProps } = props;
+    const navigationClasses = classNames('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 (_jsxs("div", { ref: ref, ...remainingProps, className: navigationClasses, children: [_jsxs("div", { className: 'grid-stack-item display-flex align-items-center justify-content-between', children: [_jsx(Button, { bsStyle: 'muted', className: 'text-color-darkest', iconOnly: !backButtonText, iconName: 'rioglyph-arrow-left', onClick: onNavigateBack, children: backButtonText }), _jsx("div", { className: 'btn-toolbar gap-2', children: right })] }), _jsxs("div", { className: 'grid-stack-item text-center text-medium text-color-darker margin-x-25 padding-x-5 ellipsis-1', children: [_jsx("div", { className: 'ellipsis-1', children: title }), subtitle && _jsx("div", { className: 'text-size-12 line-height-12 text-normal margin-top--2', children: subtitle })] })] }));
 });
 export default AppNavigationBar;

package/components/noData/NoData.js

@@ -1,16 +1,13 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import SimpleTooltip from '../tooltip/SimpleTooltip';
 import { PLACEMENT } from '../../values/Placement';
 const NoData = (props) => {
-    const { text, className = '', tooltip, tooltipPlacement = PLACEMENT.BOTTOM, tooltipWidth = 'auto' } = props, remainingProps = __rest(props, ["text", "className", "tooltip", "tooltipPlacement", "tooltipWidth"]);
+    const { text, className = '', tooltip, tooltipPlacement = PLACEMENT.BOTTOM, tooltipWidth = 'auto', ...remainingProps } = props;
     const noDataClasses = classNames('NoData', className);
     if (tooltip) {
-        return (_jsxs("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: [_jsx("span", Object.assign({ className: 'pointer-events-none user-select-none' }, { children: text })), _jsx(SimpleTooltip, Object.assign({ content: tooltip, placement: tooltipPlacement, width: tooltipWidth }, { children: _jsx("span", { className: 'rioglyph rioglyph-info-sign margin-left-5' }) }))] })));
+        return (_jsxs("span", { ...remainingProps, className: noDataClasses, children: [_jsx("span", { className: 'pointer-events-none user-select-none', children: text }), _jsx(SimpleTooltip, { content: tooltip, placement: tooltipPlacement, width: tooltipWidth, children: _jsx("span", { className: 'rioglyph rioglyph-info-sign margin-left-5' }) })] }));
     }
-    return (_jsx("span", Object.assign({}, remainingProps, { className: noDataClasses }, { children: _jsx("span", Object.assign({ className: 'pointer-events-none user-select-none' }, { children: text })) })));
+    return (_jsx("span", { ...remainingProps, className: noDataClasses, children: _jsx("span", { className: 'pointer-events-none user-select-none', children: text }) }));
 };
 export default NoData;

package/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/components/notification/Notification.js

@@ -1,5 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
-// @ts-ignore-next-line 7016
-import { NotificationManager as Notification } from 'react-notifications';
+import React from 'react';
+import { toast, Slide } from 'react-toastify';
+export const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;
+export const NOTIFICATION_TIMEOUT_INFINITE = 999_999;
+const baseOptions = {
+    position: 'top-right',
+    hideProgressBar: true,
+    pauseOnHover: true,
+    draggable: true,
+    theme: 'colored',
+    transition: Slide,
+};
+const ToastMessage = (props) => {
+    const { title, message } = props;
+    return (_jsx("div", { className: 'notification', children: _jsxs("div", { className: 'notification-message', role: 'alert', children: [title && _jsx("h4", { className: 'title', children: title }), _jsx("div", { className: 'message', children: message })] }) }));
+};
+const normalizeArgs = (optionsOrTitle, timeout, callback, priority) => {
+    // Handle the new options object format
+    if (optionsOrTitle && typeof optionsOrTitle === 'object' && !React.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 || DEFAULT_NOTIFICATION_TIMEOUT_IN_MS,
+        onClick: callback,
+        hideProgressBar,
+        closeOnClick,
+        // replace the default built-in icons
+        icon: _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 }) => (_jsx("button", { className: 'notification-close', type: 'button', children: _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 toast(_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 toast[type](_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,
+    };
+})();
 export default Notification;

package/components/notification/NotificationsContainer.d.ts

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

package/components/notification/NotificationsContainer.js

@@ -1,10 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import classNames from 'classnames';
-// @ts-ignore-next-line 7016
-import { NotificationContainer } from 'react-notifications';
+import { ToastContainer } from 'react-toastify';
 const NotificationsContainer = ({ stacked }) => {
     const wrapperClasses = classNames('notification-container-wrapper', stacked && 'stacked');
-    return (_jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsx(NotificationContainer, {}) })));
+    return (_jsx("div", { className: wrapperClasses, children: _jsx(ToastContainer, { className: 'notification-container', stacked: false, limit: 5 }) }));
 };
 export default NotificationsContainer;

package/components/numberControl/NumberControl.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect, forwardRef } from 'react';
 import classNames from 'classnames';
@@ -8,7 +7,7 @@ const INITIAL_TICK = 700;
 const TICK_TIME = 50;
 const DEFAULT_DIGIT_PRECISION = 3;
 const NumberControl = forwardRef((props, ref) => {
-    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onValueChanged = () => { }, onKeyDown = noop, disabled, bsSize, className, unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace, digitPrecision = DEFAULT_DIGIT_PRECISION, placeholder, noDefault } = props, remainingProps = __rest(props, ["id", "min", "max", "step", "value", "onChange", "onValueChanged", "onKeyDown", "disabled", "bsSize", "className", "unit", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace", "digitPrecision", "placeholder", "noDefault"]);
+    const { id, min = DEFAULT_MIN, max = DEFAULT_MAX, step = DEFAULT_STEP, value, onChange, onValueChanged = () => { }, onKeyDown = noop, 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 = useRef(null);
@@ -108,7 +107,7 @@ const NumberControl = forwardRef((props, ref) => {
         callback(newValue);
     };
     const classes = classNames('NumberControl', className);
-    const controls = (_jsxs("div", Object.assign({ className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding }, { children: [_jsx("div", Object.assign({ onMouseDown: handleMouseDownOnDecrement, onMouseUp: handleStopHolding, role: 'button', "aria-label": 'decrement-button', className: 'decrementButton text-color-gray hover-text-color-dark' }, { children: _jsx("div", { className: 'rioglyph rioglyph-minus scale-90' }) })), _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: _jsx("div", { className: 'rioglyph rioglyph-plus scale-90' }) }))] })));
-    return (_jsx("div", Object.assign({}, remainingProps, { className: classes }, { children: _jsx(NumberInput, { 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 = (_jsxs("div", { className: 'display-flex padding-left-10', onMouseOut: handleStopHolding, onBlur: handleStopHolding, children: [_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: _jsx("div", { className: 'rioglyph rioglyph-minus scale-90' }) }), _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: _jsx("div", { className: 'rioglyph rioglyph-plus scale-90' }) })] }));
+    return (_jsx("div", { ...remainingProps, className: classes, children: _jsx(NumberInput, { 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 }) }));
 });
 export default NumberControl;

package/components/numberInput/NumberInput.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, forwardRef } from 'react';
 import classNames from 'classnames';
@@ -59,7 +58,7 @@ const isInvalidAfter = (key, possiblePreviousKeys, event, previousKeyRef) => {
     return event.key === key && possiblePreviousKeys.includes(previousKeyRef.current);
 };
 const NumberInput = forwardRef((props, ref) => {
-    const { id, min: propMin, max: propMax, value: propValue, step = DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop, onKeyDown = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '' } = props, remainingProps = __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 = DEFAULT_STEP, disabled = false, noDefault = false, onChange, onValueChanged = noop, onKeyDown = noop, bsSize = 'md', unit, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', controls, placeholder, digitPrecision = DEFAULT_DIGIT_PRECISION, className = '', ...remainingProps } = props;
     const previousKeyRef = useRef('');
     const callback = onChange || onValueChanged;
     const min = convertNonIntegerToDefault(propMin, DEFAULT_MIN);
@@ -157,9 +156,9 @@ const NumberInput = forwardRef((props, ref) => {
     const inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
     const inputClassNames = classNames('form-control', 'no-controls', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', className);
     const hasFeedback = errorMessage || warningMessage;
-    const input = (_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 = (_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 (_jsxs("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && (_jsx("div", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: inputAddon }) }))), _jsxs("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [input, hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: _jsx("span", { children: errorMessage || warningMessage }) }))] }))] })), (unit || controls) && (_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 (_jsxs("div", { className: inputGroupClassNames, children: [inputAddon && (_jsx("div", { className: 'input-group-addon', children: _jsx("span", { className: inputAddon }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [input, hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] }), (unit || controls) && (_jsxs("div", { className: `input-group-addon ${disabled ? 'disabled pointer-events-none' : ''}`, children: [unit && unit, controls && controls] }))] }));
 });
 export default NumberInput;

package/components/onboarding/OnboardingTip.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 import Button from '../button/Button';
@@ -11,9 +9,9 @@ import { PLACEMENT } from '../../values/Placement';
 const OnboardingTip = (props) => {
     const { id, show = false, placement = PLACEMENT.BOTTOM, title, content, onHide = noop, children, textAlignment = 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 = (_jsxs("div", Object.assign({ className: 'display-flex flex-column gap-25' }, { children: [_jsx("div", { children: content }), _jsxs("div", Object.assign({ className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}` }, { children: [previousButton ? (_jsxs("div", Object.assign({ className: 'position-relative' }, { children: [_jsx("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), _jsxs(Button, Object.assign({ bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick }, { children: [previousButton.iconName && (_jsx("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), _jsx("span", { children: previousButton.text })] }))] }))) : (_jsx("div", {})), nextButton ? (_jsxs(Button, Object.assign({ bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true }, { children: [_jsx("span", { children: nextButton.text }), nextButton.iconName && _jsx("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] }))) : (_jsx("div", {}))] }))] })));
+    const clickFlowWithButtons = (_jsxs("div", { className: 'display-flex flex-column gap-25', children: [_jsx("div", { children: content }), _jsxs("div", { className: `btn-toolbar justify-content-between ${showCloseIcon ? 'margin-right--25' : ''}`, children: [previousButton ? (_jsxs("div", { className: 'position-relative', children: [_jsx("div", { className: 'bg-black opacity-10 rounded display-absolute inset-0' }), _jsxs(Button, { bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-none text-color-white', onClick: previousButton.onClick, children: [previousButton.iconName && (_jsx("span", { className: `rioglyph ${previousButton.iconName} text-color-white` })), _jsx("span", { children: previousButton.text })] })] })) : (_jsx("div", {})), nextButton ? (_jsxs(Button, { bsStyle: Button.SECONDARY, variant: Button.VARIANT_OUTLINE, className: 'border-color-white text-color-white', onClick: nextButton.onClick, iconRight: true, children: [_jsx("span", { children: nextButton.text }), nextButton.iconName && _jsx("span", { className: `rioglyph ${nextButton.iconName} text-color-white` })] })) : (_jsx("div", {}))] })] }));
     const tooltipWrapperClasses = classNames(useInDialog && 'z-index-max', className && className, clickflow && 'onboarding-clickflow');
-    const overlay = (_jsx(Tooltip, Object.assign({ className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true }, { children: _jsxs("div", Object.assign({ className: 'display-flex' }, { children: [_jsxs("div", Object.assign({ className: 'display-flex flex-column flex-1-1' }, { children: [title && _jsx("div", Object.assign({ className: 'tooltip-title' }, { children: title })), content && _jsx("div", Object.assign({ className: 'tooltip-content' }, { children: clickflow ? clickFlowWithButtons : content }))] })), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] })) })));
+    const overlay = (_jsx(Tooltip, { className: tooltipWrapperClasses, tooltipStyle: Tooltip.STYLE_ONBOARDING, id: id, onClick: onHide, width: width, textAlignment: textAlignment, allowOnTouch: true, children: _jsxs("div", { className: 'display-flex', children: [_jsxs("div", { className: 'display-flex flex-column flex-1-1', children: [title && _jsx("div", { className: 'tooltip-title', children: title }), content && _jsx("div", { className: 'tooltip-content', children: clickflow ? clickFlowWithButtons : content })] }), showCloseIcon && _jsx("span", { className: 'tooltip-close rioglyph rioglyph-remove' })] }) }));
     const actualPopperConfig = popperConfig || {
         strategy: 'fixed',
         modifiers: [
@@ -26,7 +24,7 @@ const OnboardingTip = (props) => {
             { name: 'arrow', options: {} },
         ],
     };
-    const trigger = (_jsx(OverlayTrigger, Object.assign({ placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig }, { children: children })));
+    const trigger = (_jsx(OverlayTrigger, { placement: placement, trigger: 'click', overlay: overlay, onToggle: onHide, show: show, rootClose: false, popperConfig: actualPopperConfig, children: children }));
     return show ? trigger : _jsx(_Fragment, { children: children });
 };
 OnboardingTip.AUTO_START = PLACEMENT.AUTO_START;