@cube-dev/ui-kit 0.0.0-canary-8136254 → 0.0.0-canary-207e505

package/es/components/overlays/AlertDialog/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/Dialog.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogContainer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogForm.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/DialogTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Dialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/OpenTransition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Overlay.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Popover.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Tray.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/Underlay.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/Modal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/NewNotifications/Bar/FloatingNotification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -12,8 +12,15 @@ import { tasty } from '../../../../tasty';
 import { NotificationView } from '../NotificationView';
 import { useNotificationListItem, } from '../hooks';
 const NotificationContainer = tasty({
-    styles: { boxShadow: '0 0.5x 2x #shadow', pointerEvents: 'auto' },
+    styles: {
+        radius: '0.5x',
+        boxShadow: '0 0.5x 2x #shadow',
+        pointerEvents: 'auto',
+    },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationsBar`.
+ */
 export const FloatingNotification = memo(function FloatingNotification(props) {
     const { item, state, onRemoveNotification, id, isDisabledTimer, onDismissNotification, } = props;
     const { props: notificationProps, key } = item;

package/es/components/overlays/NewNotifications/Bar/NotificationsBar.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -34,11 +34,14 @@ const NotificationsContainer = tasty({
         overflow: 'hidden',
         isolation: 'isolate',
         pointerEvents: 'none',
-        '@supports (-webkit-touch-callout: none)': {
-            height: '-webkit-fill-available max',
+        '@supports (height: 100dvh)': {
+            height: '100dvh max',
         },
     },
 });
+/**
+ * @internal Do not use it
+ */
 export function NotificationsBar(props) {
     const { items, children, onRemoveNotification, onDismissNotification } = props;
     const ref = useRef(null);

package/es/components/overlays/NewNotifications/Bar/TransitionComponent.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/NewNotifications/Bar/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/NewNotifications/Dialog/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

package/es/components/overlays/NewNotifications/Notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -10,6 +10,9 @@ import { useEffect } from 'react';
 import { useEvent, useSyncRef } from '../../../_internal';
 import { useId } from '../../../utils/react/useId';
 import { useNotificationsApi } from './hooks';
+/**
+ * Declarative wrap over the `useNotificationsApi` hook
+ */
 export function Notification(props) {
     const { id: propsId, disableRemoveOnUnmount = false } = props;
     const defaultId = useId();
@@ -20,7 +23,7 @@ export function Notification(props) {
     useEffect(() => {
         notify({ id, ...props });
     }, [id]);
-    useEffect(() => () => removeNotification(id), [id]);
+    useEffect(() => () => removeNotification(id), [id, removeNotification]);
     useEffect(() => update(id, props));
     return null;
 }

package/es/components/overlays/NewNotifications/NotificationView/NotificationAction.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -23,6 +23,9 @@ const Action = tasty(Button, {
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export function NotificationAction(props) {
     const { children, onPress, type = 'primary', disableCloseOnAction = type !== 'primary', ...buttonProps } = props;
     const { onClose } = useNotificationContext();

package/es/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -11,27 +11,16 @@ import { Button } from '../../../actions';
 import { tasty } from '../../../../tasty';
 import { Cross } from '../../../../icons';
 const CloseButton = tasty(Button, {
-    styles: {
-        position: 'absolute',
-        right: '-0.75x',
-        top: '-0.75x',
-        display: 'flex',
-        placeItems: 'center',
-        padding: '0.625x',
-        width: '3x',
-        height: '3x',
-        fill: '#white',
-        shadow: '0 0.5x 2x #shadow',
-        color: { '': '#dark-02', hovered: '#dark-03', pressed: '#dark-02' },
-        borderRadius: '50%',
-        visibility: { '': 'hidden', show: 'visible' },
-        opacity: { '': '0', show: '1' },
-        transition: 'opacity, visibility 0.2s ease-in-out',
-    },
+    icon: _jsx(Cross, {}, void 0),
+    label: 'Close the notification',
+    qa: 'NotificationCloseButton',
+    type: 'neutral',
+    size: 'small',
+    styles: { gridArea: 'close', display: 'flex', padding: '1x' },
 });
 export const NotificationCloseButton = memo(function NotificationCloseButton(props) {
-    const { onPress, isHovered, isFocused } = props;
-    return (_jsx(CloseButton, { qa: "NotificationCloseButton", type: "neutral", mods: { show: isHovered || isFocused }, icon: _jsx(Cross, {}, void 0), label: "Close the notification", onPress: onPress }, void 0));
+    const { onPress } = props;
+    return _jsx(CloseButton, { onPress: onPress }, void 0);
 });
 
         

package/es/components/overlays/NewNotifications/NotificationView/NotificationDescription.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -21,6 +21,9 @@ const Description = tasty(Paragraph, {
         overflow: 'hidden',
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export const NotificationDescription = memo(function NotificationDescription(props) {
     const { description, ...descriptionProps } = props;
     return (_jsx(Description, { ...mergeProps(descriptionProps, {

package/es/components/overlays/NewNotifications/NotificationView/NotificationFooter.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -21,6 +21,9 @@ const FooterArea = tasty(ButtonGroup, {
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export const NotificationFooter = memo(function NotificationFooter(props) {
     const { actions, onClose, onDismiss, hasDescription } = props;
     return (_jsx(FooterArea, { mods: { 'has-description': hasDescription }, children: flatten(typeof actions === 'function'

package/es/components/overlays/NewNotifications/NotificationView/NotificationHeader.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -20,6 +20,9 @@ const Header = tasty(Title, {
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export const NotificationHeader = memo(function NotificationHeader(props) {
     const { header, ...headerProps } = props;
     return _jsx(Header, { ...headerProps, children: header }, void 0);

package/es/components/overlays/NewNotifications/NotificationView/NotificationIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -47,6 +47,9 @@ const IconPreset = tasty({
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export const NotificationIcon = memo(function NotificationIcon(props) {
     const { icon, type } = props;
     return (_jsx(IconContainer, { children: icon ? (icon) : (_jsx(IconPreset, { mods: {

package/es/components/overlays/NewNotifications/NotificationView/NotificationProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -9,6 +9,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext } from 'react';
 import invariant from 'tiny-invariant';
 const NotificationContext = createContext(null);
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export function NotificationProvider(props) {
     const { children, ...value } = props;
     return (_jsx(NotificationContext.Provider, { value: value, children: children }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -25,15 +25,15 @@ const NotificationContainer = tasty({
         position: 'relative',
         display: 'grid',
         width: '100%',
-        padding: '1.5x 1x 1.5x 1.5x',
-        radius: '0.5x',
+        padding: '0.5x 0.5x 1.5x 1.5x',
         gridAreas: `
-      "icon . header"
-      "icon . description"
-      ".    . footer"
+      ".    . .           .      close"
+      "icon . header      .      close"
+      "icon . description .      close"
+      ".    . footer      footer footer"
     `,
-        gridColumns: 'min-content 1x minmax(0, auto)',
-        gridRows: 'minmax(0, auto) minmax(0, auto) minmax(0, auto)',
+        gridColumns: 'min-content 1x minmax(0, auto) 1x minmax(0, min-content)',
+        gridRows: '1x minmax(0, auto) minmax(0, auto) minmax(0, auto)',
         fill: '#white',
         boxShadow: {
             '': '0 0 0 4bw #purple-04.0 inset',
@@ -41,6 +41,9 @@ const NotificationContainer = tasty({
         },
     },
 });
+/**
+ * @internal This component is unstable and is a subject to change.
+ */
 export const NotificationView = 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 = useId();
@@ -61,7 +64,7 @@ export const NotificationView = forwardRef(function NotificationView(props, ref)
         callback: onDismissEvent,
         isDisabled: isFocusVisible || isHovered || !isDismissible,
     });
-    return (_jsx(ClearSlots, { children: _jsx(NotificationProvider, { onClose: onClose, children: _jsxs(NotificationContainer, { ...mergeProps(attributes, hoverProps, focusProps), ref: ref, styles: styles, "data-id": id, "data-qa": qa, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: { focused: isFocusVisible, 'is-dismissible': isDismissible }, children: [_jsx(NotificationIcon, { icon: icon, type: type }, void 0), _jsx(NotificationHeader, { header: header, id: labelID }, void 0), description && (_jsx(NotificationDescription, { description: description, id: descriptionID }, void 0)), _jsx(NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }, void 0), isDismissible && (_jsx(NotificationCloseButton, { isHovered: isHovered, isFocused: isFocusVisible, onPress: onDismissEvent }, void 0))] }, void 0) }, void 0) }, void 0));
+    return (_jsx(ClearSlots, { children: _jsx(NotificationProvider, { onClose: onClose, children: _jsxs(NotificationContainer, { ...mergeProps(attributes, hoverProps, focusProps), ref: ref, styles: styles, "data-id": id, "data-qa": qa, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: { focused: isFocusVisible, 'is-dismissible': isDismissible }, children: [_jsx(NotificationIcon, { icon: icon, type: type }, void 0), _jsx(NotificationHeader, { header: header, id: labelID }, void 0), description && (_jsx(NotificationDescription, { description: description, id: descriptionID }, void 0)), _jsx(NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }, void 0), isDismissible && (_jsx(NotificationCloseButton, { onPress: onDismissEvent }, void 0))] }, void 0) }, void 0) }, void 0));
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -13,9 +13,9 @@ import { useNotifications } from './use-notifications';
 export const NotificationsContext = createContext(null);
 export function NotificationsProvider(props) {
     const { children, rootRef } = props;
-    const { toasts, api, addOnDismissListener, onDismissNotification } = useNotifications(rootRef);
+    const { notifications, api, addOnDismissListener, onDismissNotification } = useNotifications(rootRef);
     const providerValue = useMemo(() => ({ api, addOnDismissListener }), []);
-    return (_jsxs(NotificationsContext.Provider, { value: providerValue, children: [_jsx(Portal, { children: _jsx(NotificationsBar, { items: toasts, onRemoveNotification: api.remove, onDismissNotification: onDismissNotification, children: (notification) => (_jsx(NotificationsBar.Item, { ...notification }, notification.id)) }, void 0) }, void 0), children] }, void 0));
+    return (_jsxs(NotificationsContext.Provider, { value: providerValue, children: [_jsx(Portal, { children: _jsx(NotificationsBar, { items: notifications, onRemoveNotification: api.remove, onDismissNotification: onDismissNotification, children: (notification) => (_jsx(NotificationsBar.Item, { ...notification }, notification.id)) }, void 0) }, void 0), children] }, void 0));
 }
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-8136254
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
  * Released under the MIT license.
  */
 
@@ -9,13 +9,14 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useEvent } from '../../../../_internal';
 const DISMISS_EVENT_NAME = 'cube:notification:dismiss';
 export function useNotifications(rootRef) {
+    const idPrefix = useMemo(() => new Date().getTime(), []);
     const idRef = useRef(0);
     const listeners = useRef([]);
-    const [toasts, setToasts] = useState(new Map());
+    const [notifications, setNotifications] = useState(new Map());
     const addToast = Object.assign(useEvent((props) => {
         const nextID = idRef.current++;
-        const { id = nextID, duration, isDismissible = true, ...rest } = props;
-        setToasts((toasts) => {
+        const { id = `${idPrefix}_${nextID}`, duration, isDismissible = true, ...rest } = props;
+        setNotifications((toasts) => {
             const newToasts = new Map(toasts);
             newToasts.set(id, {
                 id,
@@ -36,7 +37,7 @@ export function useNotifications(rootRef) {
         attention: (props) => addToast({ type: 'attention', ...props }),
     });
     const updateToast = useEvent((id, props) => {
-        setToasts((toasts) => {
+        setNotifications((toasts) => {
             const currentToast = toasts.get(id);
             if (currentToast) {
                 const newToasts = new Map(toasts);
@@ -50,7 +51,7 @@ export function useNotifications(rootRef) {
         });
     });
     const removeToast = useEvent((id) => {
-        setToasts((toasts) => {
+        setNotifications((toasts) => {
             if (toasts.has(id)) {
                 const newToasts = new Map(toasts);
                 newToasts.delete(id);
@@ -61,7 +62,7 @@ export function useNotifications(rootRef) {
     });
     const onDismissNotification = useEvent((id) => {
         var _a;
-        const toast = toasts.get(id);
+        const toast = notifications.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 }));
         }
@@ -75,10 +76,13 @@ export function useNotifications(rootRef) {
         return unsub;
     });
     useEffect(() => () => listeners.current.forEach((cb) => cb()), []);
-    const api = useMemo(() => ({ notify: addToast, update: updateToast, remove: removeToast }), []);
+    const api = useMemo(() => ({ notify: addToast, update: updateToast, remove: removeToast }), 
+    // All deps are stable since we use `useEvent` hook
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     return {
         api,
-        toasts: useMemo(() => [...toasts.values()], [toasts]),
+        notifications: useMemo(() => [...notifications.values()], [notifications]),
         onDismissNotification,
         addOnDismissListener,
     };

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

@@ -0,0 +1,44 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-207e505
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Item } from '@react-stately/collections';
+import { tasty } from '../../../../tasty';
+import { useNotificationsList } from '../hooks';
+import { NotificationListItem } from './NotificationsListItem';
+const NotificationListContainer = tasty({
+    styles: { boxSizing: 'border-box', width: '100%' },
+});
+/**
+ * Provides ability to show notifications as a list.
+ *
+ * @example
+ *   <NotificationsList>
+ *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
+ *     <NotificationsList.Item key="id_2" type="attention" description="Edit and test your schema without affecting the production." />
+ *     <NotificationsList.Item key="id_3" type="danger" description="Edit and test your schema without affecting the production." />
+ *   </NotificationsList>
+ *
+ * @example Removing a notification
+ *   <NotificationsList onDismiss={(id) => removeNotification(id)}>
+ *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
+ *   </NotificationsList>
+ */
+export function NotificationsList(props) {
+    const { items, children, onDismiss } = props;
+    const ref = useRef(null);
+    const { state, listProps } = useNotificationsList({
+        items,
+        children,
+        ref,
+    });
+    return (_jsx(NotificationListContainer, { ref: ref, ...listProps, children: [...state.collection].map((item) => (_jsx(NotificationListItem, { item: item, state: state, onDismiss: onDismiss }, item.key))) }, void 0));
+}
+NotificationsList.Item = Item;
+
+