@cube-dev/ui-kit 0.10.13 → 0.11.0

package/cjs/components/overlays/NewNotifications/NotificationView/NotificationView.js

@@ -0,0 +1,80 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interactions_1 = require("@react-aria/interactions");
+const focus_1 = require("@react-aria/focus");
+const utils_1 = require("@react-aria/utils");
+const tasty_1 = require("../../../../tasty");
+const _internal_1 = require("../../../../_internal");
+const react_2 = require("../../../../utils/react");
+const NotificationIcon_1 = require("./NotificationIcon");
+const NotificationHeader_1 = require("./NotificationHeader");
+const NotificationDescription_1 = require("./NotificationDescription");
+const NotificationFooter_1 = require("./NotificationFooter");
+const NotificationCloseButton_1 = require("./NotificationCloseButton");
+const NotificationProvider_1 = require("./NotificationProvider");
+const NotificationContainer = (0, tasty_1.tasty)({
+    styles: {
+        boxSizing: 'border-box',
+        position: 'relative',
+        display: 'grid',
+        width: '100%',
+        padding: '1.5x 1x 1.5x 1.5x',
+        radius: '0.5x',
+        gridAreas: `
+      "icon . header"
+      "icon . description"
+      ".    . footer"
+    `,
+        gridColumns: 'min-content 1x minmax(0, auto)',
+        gridRows: 'minmax(0, auto) minmax(0, auto) minmax(0, auto)',
+        fill: '#white',
+        boxShadow: {
+            '': '0 0 0 4bw #purple-04.0 inset',
+            focused: '0 0 0 4bw #purple-04 inset',
+        },
+        '&::before': {
+            zIndex: 0,
+            content: '""',
+            position: 'absolute',
+            top: '-8px',
+            left: '0',
+            right: '-8px',
+            bottom: '0',
+            display: { '': 'none', 'is-dismissible': 'flex' },
+        },
+    },
+});
+exports.NotificationView = (0, react_1.forwardRef)(function NotificationView(props, ref) {
+    const { onClose, actions, header, icon, description, id, styles, type = 'attention', isDismissible = true, duration = null, attributes = {}, qa = 'notification', timer: propsTimer, onDismiss, } = props;
+    const labelID = (0, utils_1.useId)();
+    const descriptionID = (0, utils_1.useId)();
+    const onCloseEvent = (0, _internal_1.useEvent)(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    });
+    const onDismissEvent = (0, _internal_1.useEvent)(() => {
+        if (isDismissible) {
+            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        }
+    });
+    const { hoverProps, isHovered } = (0, interactions_1.useHover)({});
+    const { isFocusVisible, focusProps } = (0, focus_1.useFocusRing)({ within: true });
+    (0, _internal_1.useTimer)({
+        timer: propsTimer,
+        delay: duration,
+        callback: onDismissEvent,
+        isDisabled: isFocusVisible || isHovered || !isDismissible,
+    });
+    return ((0, jsx_runtime_1.jsx)(react_2.ClearSlots, { children: (0, jsx_runtime_1.jsx)(NotificationProvider_1.NotificationProvider, { onClose: onClose, children: (0, jsx_runtime_1.jsxs)(NotificationContainer, { ...(0, utils_1.mergeProps)(attributes, hoverProps, focusProps), styles: styles, ref: ref, "data-id": id, "data-qa": qa, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: { focused: isFocusVisible, 'is-dismissible': isDismissible }, children: [(0, jsx_runtime_1.jsx)(NotificationIcon_1.NotificationIcon, { icon: icon, type: type }, void 0), header && (0, jsx_runtime_1.jsx)(NotificationHeader_1.NotificationHeader, { header: header, id: labelID }, void 0), description && ((0, jsx_runtime_1.jsx)(NotificationDescription_1.NotificationDescription, { description: description, id: descriptionID }, void 0)), (0, jsx_runtime_1.jsx)(NotificationFooter_1.NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }, void 0), isDismissible && ((0, jsx_runtime_1.jsx)(NotificationCloseButton_1.NotificationCloseButton, { onPress: onDismissEvent, isHovered: isHovered, isFocused: isFocusVisible }, void 0))] }, void 0) }, void 0) }, void 0));
+});
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/index.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./NotificationView"), exports);
+__exportStar(require("./NotificationAction"), exports);
+
+        

package/cjs/components/overlays/NewNotifications/NotificationView/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsProvider = exports.NotificationsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const portal_1 = require("../../../portal");
+const Bar_1 = require("../Bar");
+const use_notifications_1 = require("./use-notifications");
+exports.NotificationsContext = (0, react_1.createContext)(null);
+function NotificationsProvider(props) {
+    const { children, rootRef } = props;
+    const { toasts, api, addOnDismissListener, onDismissNotification } = (0, use_notifications_1.useNotifications)(rootRef);
+    const providerValue = (0, react_1.useMemo)(() => ({ api, addOnDismissListener }), []);
+    return ((0, jsx_runtime_1.jsxs)(exports.NotificationsContext.Provider, { value: providerValue, children: [(0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Bar_1.NotificationsBar, { items: toasts, onRemoveNotification: api.remove, onDismissNotification: onDismissNotification, children: (notification) => ((0, jsx_runtime_1.jsx)(Bar_1.NotificationsBar.Item, { ...notification }, notification.id)) }, void 0) }, void 0), children] }, void 0));
+}
+exports.NotificationsProvider = NotificationsProvider;
+
+        

package/cjs/components/overlays/NewNotifications/NotificationsContext/index.js

@@ -0,0 +1,15 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsContext = exports.NotificationsProvider = void 0;
+var NotificationsProvider_1 = require("./NotificationsProvider");
+Object.defineProperty(exports, "NotificationsProvider", { enumerable: true, get: function () { return NotificationsProvider_1.NotificationsProvider; } });
+Object.defineProperty(exports, "NotificationsContext", { enumerable: true, get: function () { return NotificationsProvider_1.NotificationsContext; } });
+
+        

package/cjs/components/overlays/NewNotifications/NotificationsContext/use-notifications-api.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotificationsApi = void 0;
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const NotificationsProvider_1 = require("./NotificationsProvider");
+function useNotificationsApi() {
+    const context = (0, react_1.useContext)(NotificationsProvider_1.NotificationsContext);
+    (0, tiny_invariant_1.default)(context !== null, "You can't use Notifications outside of the <Root /> component. Please, check if your component is descendant of <Root/> component");
+    return context.api;
+}
+exports.useNotificationsApi = useNotificationsApi;
+
+        

package/cjs/components/overlays/NewNotifications/NotificationsContext/use-notifications.js

@@ -0,0 +1,91 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotifications = void 0;
+const react_1 = require("react");
+const _internal_1 = require("../../../../_internal");
+const DISMISS_EVENT_NAME = 'cube:notification:dismiss';
+function useNotifications(rootRef) {
+    const idRef = (0, react_1.useRef)(0);
+    const listeners = (0, react_1.useRef)([]);
+    const [toasts, setToasts] = (0, react_1.useState)(new Map());
+    const addToast = Object.assign((0, _internal_1.useEvent)((props) => {
+        const nextID = idRef.current++;
+        const { id = nextID, duration, isDismissible = true, ...rest } = props;
+        setToasts((toasts) => {
+            const newToasts = new Map(toasts);
+            newToasts.set(id, {
+                id,
+                isDismissible,
+                duration: isDismissible ? 5000 : null,
+                ...rest,
+            });
+            return newToasts;
+        });
+        return {
+            id,
+            remove: () => removeToast(id),
+            update: (props) => updateToast(id, props),
+        };
+    }), {
+        success: (props) => addToast({ type: 'success', ...props }),
+        danger: (props) => addToast({ type: 'danger', ...props }),
+        attention: (props) => addToast({ type: 'attention', ...props }),
+    });
+    const updateToast = (0, _internal_1.useEvent)((id, props) => {
+        setToasts((toasts) => {
+            const currentToast = toasts.get(id);
+            if (currentToast) {
+                const newToasts = new Map(toasts);
+                newToasts.set(id, {
+                    ...currentToast,
+                    ...props,
+                });
+                return newToasts;
+            }
+            return toasts;
+        });
+    });
+    const removeToast = (0, _internal_1.useEvent)((id) => {
+        setToasts((toasts) => {
+            if (toasts.has(id)) {
+                const newToasts = new Map(toasts);
+                newToasts.delete(id);
+                return newToasts;
+            }
+            return toasts;
+        });
+    });
+    const onDismissNotification = (0, _internal_1.useEvent)((id) => {
+        var _a;
+        const toast = toasts.get(id);
+        if ((toast === null || toast === void 0 ? void 0 : toast.putNotificationInDropdownOnDismiss) !== false) {
+            (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(DISMISS_EVENT_NAME, { detail: toast }));
+        }
+    });
+    const addOnDismissListener = (0, _internal_1.useEvent)((listener) => {
+        var _a;
+        const callback = (e) => listener(e.detail);
+        const unsub = () => { var _a; return (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(DISMISS_EVENT_NAME, callback); };
+        listeners.current.push(unsub);
+        (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(DISMISS_EVENT_NAME, callback);
+        return unsub;
+    });
+    (0, react_1.useEffect)(() => () => listeners.current.forEach((cb) => cb()), []);
+    const api = (0, react_1.useMemo)(() => ({ notify: addToast, update: updateToast, remove: removeToast }), []);
+    return {
+        api,
+        toasts: (0, react_1.useMemo)(() => [...toasts.values()], [toasts]),
+        onDismissNotification,
+        addOnDismissListener,
+    };
+}
+exports.useNotifications = useNotifications;
+
+        

package/cjs/components/overlays/NewNotifications/NotificationsList.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationsList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const collections_1 = require("@react-stately/collections");
+const tasty_1 = require("../../../tasty");
+const NotificationView_1 = require("./NotificationView");
+const hooks_1 = require("./hooks");
+const NotificationListContainer = (0, tasty_1.tasty)({
+    styles: { boxSizing: 'border-box', width: '100%' },
+});
+function NotificationsList(props) {
+    const { items, children } = props;
+    const ref = (0, react_1.useRef)(null);
+    const { state, listProps } = (0, hooks_1.useNotificationsList)({
+        items,
+        children,
+        ref,
+    });
+    return ((0, jsx_runtime_1.jsx)(NotificationListContainer, { ref: ref, ...listProps, children: [...state.collection].map((item) => ((0, jsx_runtime_1.jsx)(NotificationListItem, { item: item, state: state }, item.key))) }, void 0));
+}
+exports.NotificationsList = NotificationsList;
+NotificationsList.Item = collections_1.Item;
+const notificationStyles = {
+    borderBottom: { '': '1bw solid #border', ':last-child': 'none' },
+};
+function NotificationListItem(props) {
+    const { item, state } = props;
+    const { key, props: notificationProps } = item;
+    const ref = (0, react_1.useRef)(null);
+    const { itemProps } = (0, hooks_1.useNotificationListItem)({ ref, key, state });
+    return ((0, jsx_runtime_1.jsx)(NotificationView_1.NotificationView, { ref: ref, attributes: itemProps, styles: notificationStyles, ...notificationProps, isDismissible: false }, void 0));
+}
+
+        

package/cjs/components/overlays/NewNotifications/hooks/index.js

@@ -0,0 +1,26 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-notifications-list"), exports);
+__exportStar(require("./use-notification-list-item"), exports);
+__exportStar(require("./use-notifications-api"), exports);
+__exportStar(require("./use-notifications-observer"), exports);
+__exportStar(require("./types"), exports);
+
+        

package/cjs/components/overlays/NewNotifications/hooks/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/overlays/NewNotifications/hooks/use-notification-list-item.js

@@ -0,0 +1,18 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotificationListItem = void 0;
+const selection_1 = require("@react-aria/selection");
+function useNotificationListItem(props) {
+    const { ref, key, state: { selectionManager }, } = props;
+    return (0, selection_1.useSelectableItem)({ ref, key, selectionManager });
+}
+exports.useNotificationListItem = useNotificationListItem;
+
+        

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-api.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotificationsApi = void 0;
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const NotificationsContext_1 = require("../NotificationsContext");
+function useNotificationsApi() {
+    const context = (0, react_1.useContext)(NotificationsContext_1.NotificationsContext);
+    (0, tiny_invariant_1.default)(context !== null, "You can't use Notifications outside of the <Root /> component. Please, check if your component is descendant of <Root/> component");
+    return context.api;
+}
+exports.useNotificationsApi = useNotificationsApi;
+
+        

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-list.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotificationsList = void 0;
+const list_1 = require("@react-stately/list");
+const selection_1 = require("@react-aria/selection");
+function useNotificationsList(props) {
+    const { ref, children, items } = props;
+    const state = (0, list_1.useListState)({
+        selectionMode: 'none',
+        children: children,
+        items: items,
+        suppressTextValueWarning: true,
+    });
+    const { listProps } = (0, selection_1.useSelectableList)({
+        ref,
+        allowsTabNavigation: true,
+        ...state,
+    });
+    return {
+        listProps,
+        state,
+    };
+}
+exports.useNotificationsList = useNotificationsList;
+
+        

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-observer.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNotificationsObserver = void 0;
+const react_1 = require("react");
+const _internal_1 = require("../../../../_internal");
+const NotificationsContext_1 = require("../NotificationsContext");
+function useNotificationsObserver(callback) {
+    var _a;
+    const { addOnDismissListener } = (_a = (0, react_1.useContext)(NotificationsContext_1.NotificationsContext)) !== null && _a !== void 0 ? _a : {};
+    const callbackEvent = (0, _internal_1.useEvent)(callback);
+    (0, react_1.useEffect)(() => addOnDismissListener === null || addOnDismissListener === void 0 ? void 0 : addOnDismissListener(callbackEvent), [addOnDismissListener]);
+}
+exports.useNotificationsObserver = useNotificationsObserver;
+
+        

package/cjs/components/overlays/NewNotifications/index.js

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationAction = exports.NotificationsProvider = void 0;
+var NotificationsContext_1 = require("./NotificationsContext");
+Object.defineProperty(exports, "NotificationsProvider", { enumerable: true, get: function () { return NotificationsContext_1.NotificationsProvider; } });
+__exportStar(require("./NotificationsList"), exports);
+__exportStar(require("./hooks"), exports);
+var NotificationView_1 = require("./NotificationView");
+Object.defineProperty(exports, "NotificationAction", { enumerable: true, get: function () { return NotificationView_1.NotificationAction; } });
+__exportStar(require("./Dialog"), exports);
+__exportStar(require("./Notification"), exports);
+
+        

package/cjs/components/overlays/NewNotifications/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/overlays/Notification/Notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Toasts/Toast.js

@@ -0,0 +1,40 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toast = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("@react-aria/utils");
+const use_toasts_api_1 = require("./use-toasts-api");
+function Toast(props) {
+    const { id: propsId } = props;
+    const { toast, update, remove } = (0, use_toasts_api_1.useToastsApi)();
+    const defaultId = (0, utils_1.useId)();
+    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    (0, react_1.useEffect)(() => {
+        toast({ ...props, id });
+        return () => remove(id);
+    }, [id]);
+    (0, react_1.useEffect)(() => {
+        update(id, props);
+    });
+    return null;
+}
+exports.Toast = Toast;
+Toast.Success = function ToastSuccess(props) {
+    return (0, jsx_runtime_1.jsx)(Toast, { type: "success", ...props }, void 0);
+};
+Toast.Danger = function ToastDanger(props) {
+    return (0, jsx_runtime_1.jsx)(Toast, { type: "danger", ...props }, void 0);
+};
+Toast.Attention = function ToastAttention(props) {
+    return (0, jsx_runtime_1.jsx)(Toast, { type: "attention", ...props }, void 0);
+};
+
+        

package/cjs/components/overlays/Toasts/index.js

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./use-toasts-api"), exports);
+__exportStar(require("./Toast"), exports);
+
+        

package/cjs/components/overlays/Toasts/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/overlays/Toasts/use-toasts-api.js

@@ -0,0 +1,43 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToastsApi = void 0;
+const react_1 = require("react");
+const react_is_1 = require("react-is");
+const NewNotifications_1 = require("../NewNotifications");
+function useToastsApi() {
+    const { notify, update, remove } = (0, NewNotifications_1.useNotificationsApi)();
+    const toast = (0, react_1.useMemo)(() => Object.assign((props) => notify({
+        isDismissible: true,
+        putNotificationInDropdownOnDismiss: false,
+        duration: 5000,
+        ...unwrapProps(props),
+    }), {
+        success: (props) => toast({ type: 'success', ...unwrapProps(props) }),
+        danger: (props) => toast({ type: 'danger', ...unwrapProps(props) }),
+        attention: (props) => toast({ type: 'attention', ...unwrapProps(props) }),
+    }), []);
+    return { toast, update, remove };
+}
+exports.useToastsApi = useToastsApi;
+function unwrapProps(props) {
+    return {
+        ...(propsIsDescription(props)
+            ? { description: props }
+            : props),
+    };
+}
+function propsIsDescription(props) {
+    return ((0, react_is_1.isElement)(props) ||
+        (0, react_is_1.isFragment)(props) ||
+        typeof props === 'string' ||
+        typeof props === 'number');
+}
+
+        

package/cjs/components/overlays/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */