@cube-dev/ui-kit 0.12.6 → 0.13.0

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -29,7 +29,7 @@ const NotificationsContainer = (0, tasty_1.tasty)({
         display: 'flex',
         flexDirection: 'column-reverse',
         width: 'auto 100% 50x',
-        height: '100vh max',
+        height: '100dvh max',
         padding: '2x',
         gap: '1x',
         /* to be sure that we're over the legacy modal and any widget as well */
@@ -37,29 +37,46 @@ const NotificationsContainer = (0, tasty_1.tasty)({
         overflow: 'hidden',
         isolation: 'isolate',
         pointerEvents: 'none',
-        '@supports (-webkit-touch-callout: none)': {
-            height: '-webkit-fill-available max',
-        },
     },
 });
+/**
+ * @internal Do not use it
+ */
 function NotificationsBar(props) {
-    const { items, children, onRemoveNotification, onDismissNotification } = props;
+    const { items, children, onRemoveNotification, onDismissNotification, limit = 5, } = props;
     const ref = (0, react_1.useRef)(null);
+    const [realLimit, setRealLimit] = (0, react_1.useState)(limit + 1);
     const { listProps, state } = (0, hooks_1.useNotificationsList)({ items, children, ref });
     const { hoverProps, isHovered } = (0, interactions_1.useHover)({});
     const { focusProps, isFocusVisible } = (0, focus_1.useFocusRing)({ within: true });
     const moveFocus = (0, _internal_1.useEvent)((key) => {
-        var _a, _b, _c;
-        const nextKey = (_b = (_a = state.collection.getKeyBefore(key.toString())) !== null && _a !== void 0 ? _a : state.collection.getKeyAfter(key.toString())) !== null && _b !== void 0 ? _b : state.collection.getLastKey();
-        const elementToFocus = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector(`[data-id="${nextKey}"]`);
+        const nextKey = state.collection.getKeyBefore(key.toString()) ??
+            state.collection.getKeyAfter(key.toString()) ??
+            state.collection.getLastKey();
+        const elementToFocus = ref.current?.querySelector(`[data-id="${nextKey}"]`);
         if (elementToFocus) {
             (0, focus_1.focusSafely)(elementToFocus);
         }
     });
-    return ((0, jsx_runtime_1.jsx)(NotificationsContainer, { ref: ref, qa: "NotificationsBar", role: "region", "aria-live": "polite", ...(0, react_2.mergeProps)(listProps, hoverProps, focusProps), children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { enter: true, exit: true, component: null, children: [...state.collection].reverse().map((notification) => ((0, jsx_runtime_1.jsx)(TransitionComponent_1.TransitionComponent, { children: (0, jsx_runtime_1.jsx)(FloatingNotification_1.FloatingNotification, { isDisabledTimer: isHovered || isFocusVisible, id: notification.props.id, item: notification, state: state, onRemoveNotification: (key) => {
-                        onRemoveNotification(key);
-                        moveFocus(key);
-                    }, onDismissNotification: onDismissNotification }, void 0) }, notification.props.id))) }, void 0) }, void 0));
+    const chainedOnRemoveNotification = (0, _internal_1.useChainedCallback)(onRemoveNotification, moveFocus);
+    const collection = [...state.collection].reverse();
+    const collectionLength = collection.length;
+    /**
+     * Handy hack to improve animations if the limit is reached.
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        setRealLimit(limit + 1);
+    }, [collectionLength]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (realLimit > limit) {
+            setRealLimit(limit);
+        }
+    }, [realLimit]);
+    // Auto-dismiss all notifications that are off the limit.
+    collection
+        .slice(realLimit)
+        .forEach((notification) => chainedOnRemoveNotification(notification.props.id));
+    return ((0, jsx_runtime_1.jsx)(NotificationsContainer, { ref: ref, qa: "NotificationsBar", role: "region", "aria-live": "polite", ...(0, react_2.mergeProps)(listProps, hoverProps, focusProps), children: (0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { enter: true, exit: true, component: null, children: collection.slice(0, realLimit).map((notification) => ((0, jsx_runtime_1.jsx)(TransitionComponent_1.TransitionComponent, { children: (0, jsx_runtime_1.jsx)(FloatingNotification_1.FloatingNotification, { isDisabledTimer: isHovered || isFocusVisible, id: notification.props.id, item: notification, state: state, onRemoveNotification: chainedOnRemoveNotification, onDismissNotification: onDismissNotification }, void 0) }, notification.props.id))) }, void 0) }, void 0));
 }
 exports.NotificationsBar = NotificationsBar;
 NotificationsBar.Item = collections_1.Item;

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ const react_1 = require("../../../../utils/react");
 const hooks_1 = require("../hooks");
 function NotificationsDialogTrigger(props) {
     const { onCloseNotificationInBar, ...dialogTriggerProps } = props;
-    (0, hooks_1.useNotificationsObserver)((args) => onCloseNotificationInBar === null || onCloseNotificationInBar === void 0 ? void 0 : onCloseNotificationInBar(args));
+    (0, hooks_1.useNotificationsObserver)((args) => onCloseNotificationInBar?.(args));
     return (0, jsx_runtime_1.jsx)(Dialog_1.DialogTrigger, { ...dialogTriggerProps, type: "popover" }, void 0);
 }
 exports.NotificationsDialogTrigger = NotificationsDialogTrigger;

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -13,17 +13,20 @@ const react_1 = require("react");
 const _internal_1 = require("../../../_internal");
 const useId_1 = require("../../../utils/react/useId");
 const hooks_1 = require("./hooks");
+/**
+ * Declarative wrap over the `useNotificationsApi` hook
+ */
 function Notification(props) {
     const { id: propsId, disableRemoveOnUnmount = false } = props;
     const defaultId = (0, useId_1.useId)();
     const disableRemoveOnUnmountRef = (0, _internal_1.useSyncRef)(disableRemoveOnUnmount);
     const { notify, update, remove } = (0, hooks_1.useNotificationsApi)();
-    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    const id = propsId ?? defaultId;
     const removeNotification = (0, _internal_1.useEvent)((id) => disableRemoveOnUnmountRef.current ? void 0 : remove(id));
     (0, react_1.useEffect)(() => {
         notify({ id, ...props });
     }, [id]);
-    (0, react_1.useEffect)(() => () => removeNotification(id), [id]);
+    (0, react_1.useEffect)(() => () => removeNotification(id), [id, removeNotification]);
     (0, react_1.useEffect)(() => update(id, props));
     return null;
 }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -26,13 +26,16 @@ const Action = (0, tasty_1.tasty)(actions_1.Button, {
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 function NotificationAction(props) {
     const { children, onPress, type = 'primary', disableCloseOnAction = type !== 'primary', ...buttonProps } = props;
     const { onClose } = (0, NotificationProvider_1.useNotificationContext)();
     const onPressEvent = (0, _internal_1.useEvent)((e) => {
-        onPress === null || onPress === void 0 ? void 0 : onPress(e);
+        onPress?.(e);
         if (!disableCloseOnAction) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
+            onClose?.();
         }
     });
     return ((0, jsx_runtime_1.jsx)(Action, { ...buttonProps, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, onPress: onPressEvent, children: children }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -14,27 +14,16 @@ const actions_1 = require("../../../actions");
 const tasty_1 = require("../../../../tasty");
 const icons_1 = require("../../../../icons");
 const CloseButton = (0, tasty_1.tasty)(actions_1.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: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}, void 0),
+    label: 'Close the notification',
+    qa: 'NotificationCloseButton',
+    type: 'neutral',
+    size: 'small',
+    styles: { gridArea: 'close', display: 'flex', padding: '1x' },
 });
 exports.NotificationCloseButton = (0, react_1.memo)(function NotificationCloseButton(props) {
-    const { onPress, isHovered, isFocused } = props;
-    return ((0, jsx_runtime_1.jsx)(CloseButton, { qa: "NotificationCloseButton", type: "neutral", mods: { show: isHovered || isFocused }, icon: (0, jsx_runtime_1.jsx)(icons_1.Cross, {}, void 0), label: "Close the notification", onPress: onPress }, void 0));
+    const { onPress } = props;
+    return (0, jsx_runtime_1.jsx)(CloseButton, { onPress: onPress }, void 0);
 });
 
         

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -24,6 +24,9 @@ const Description = (0, tasty_1.tasty)(Paragraph_1.Paragraph, {
         overflow: 'hidden',
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 exports.NotificationDescription = (0, react_1.memo)(function NotificationDescription(props) {
     const { description, ...descriptionProps } = props;
     return ((0, jsx_runtime_1.jsx)(Description, { ...(0, react_2.mergeProps)(descriptionProps, {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -46,6 +46,9 @@ const FooterArea = (0, tasty_1.tasty)(actions_1.ButtonGroup, {
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 exports.NotificationFooter = (0, react_1.memo)(function NotificationFooter(props) {
     const { actions, onClose, onDismiss, hasDescription } = props;
     return ((0, jsx_runtime_1.jsx)(FooterArea, { mods: { 'has-description': hasDescription }, children: (0, react_keyed_flatten_children_1.default)(typeof actions === 'function'
@@ -53,12 +56,11 @@ exports.NotificationFooter = (0, react_1.memo)(function NotificationFooter(props
             : actions)
             .filter((action) => (0, react_is_1.isElement)(action))
             .map((action, index) => {
-            var _a;
             const { props } = action;
             const defaultType = index === 0 ? 'primary' : 'secondary';
             return react_1.default.cloneElement(action, {
                 ...props,
-                type: (_a = props.type) !== null && _a !== void 0 ? _a : defaultType,
+                type: props.type ?? defaultType,
             }, props.children);
         }) }, void 0));
 });

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -23,6 +23,9 @@ const Header = (0, tasty_1.tasty)(Title_1.Title, {
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 exports.NotificationHeader = (0, react_1.memo)(function NotificationHeader(props) {
     const { header, ...headerProps } = props;
     return (0, jsx_runtime_1.jsx)(Header, { ...headerProps, children: header }, void 0);

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -50,6 +50,9 @@ const IconPreset = (0, tasty_1.tasty)({
         },
     },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 exports.NotificationIcon = (0, react_1.memo)(function NotificationIcon(props) {
     const { icon, type } = props;
     return ((0, jsx_runtime_1.jsx)(IconContainer, { children: icon ? (icon) : ((0, jsx_runtime_1.jsx)(IconPreset, { mods: {

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -15,6 +15,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
 const NotificationContext = (0, react_1.createContext)(null);
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 function NotificationProvider(props) {
     const { children, ...value } = props;
     return ((0, jsx_runtime_1.jsx)(NotificationContext.Provider, { value: value, children: children }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -28,15 +28,15 @@ const NotificationContainer = (0, tasty_1.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',
@@ -44,16 +44,19 @@ const NotificationContainer = (0, tasty_1.tasty)({
         },
     },
 });
+/**
+ * @internal This component is unstable and is a subject to change.
+ */
 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, useId_1.useId)();
     const descriptionID = (0, useId_1.useId)();
     const onCloseEvent = (0, _internal_1.useEvent)(() => {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
+        onClose?.();
     });
     const onDismissEvent = (0, _internal_1.useEvent)(() => {
         if (isDismissible) {
-            onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+            onDismiss?.();
         }
     });
     const { hoverProps, isHovered } = (0, interactions_1.useHover)({});
@@ -64,7 +67,7 @@ exports.NotificationView = (0, react_1.forwardRef)(function NotificationView(pro
         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, react_2.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: [(0, jsx_runtime_1.jsx)(NotificationIcon_1.NotificationIcon, { icon: icon, type: type }, void 0), (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, { isHovered: isHovered, isFocused: isFocusVisible, onPress: onDismissEvent }, void 0))] }, void 0) }, void 0) }, void 0));
+    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, react_2.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: [(0, jsx_runtime_1.jsx)(NotificationIcon_1.NotificationIcon, { icon: icon, type: type }, void 0), (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 }, void 0))] }, void 0) }, void 0) }, void 0));
 });
 
         

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -16,9 +16,9 @@ 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 { notifications, 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));
+    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: notifications, 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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -12,18 +12,19 @@ const react_1 = require("react");
 const _internal_1 = require("../../../../_internal");
 const DISMISS_EVENT_NAME = 'cube:notification:dismiss';
 function useNotifications(rootRef) {
+    const idPrefix = (0, react_1.useMemo)(() => new Date().getTime(), []);
     const idRef = (0, react_1.useRef)(0);
     const listeners = (0, react_1.useRef)([]);
-    const [toasts, setToasts] = (0, react_1.useState)(new Map());
+    const [notifications, setNotifications] = (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 { id = `${idPrefix}_${nextID}`, duration, isDismissible = true, ...rest } = props;
+        setNotifications((toasts) => {
             const newToasts = new Map(toasts);
             newToasts.set(id, {
                 id,
                 isDismissible,
-                duration: duration !== null && duration !== void 0 ? duration : (isDismissible ? 5000 : null),
+                duration: duration ?? (isDismissible ? 5000 : null),
                 ...rest,
             });
             return newToasts;
@@ -39,7 +40,7 @@ function useNotifications(rootRef) {
         attention: (props) => addToast({ type: 'attention', ...props }),
     });
     const updateToast = (0, _internal_1.useEvent)((id, props) => {
-        setToasts((toasts) => {
+        setNotifications((toasts) => {
             const currentToast = toasts.get(id);
             if (currentToast) {
                 const newToasts = new Map(toasts);
@@ -53,7 +54,7 @@ function useNotifications(rootRef) {
         });
     });
     const removeToast = (0, _internal_1.useEvent)((id) => {
-        setToasts((toasts) => {
+        setNotifications((toasts) => {
             if (toasts.has(id)) {
                 const newToasts = new Map(toasts);
                 newToasts.delete(id);
@@ -63,25 +64,26 @@ function useNotifications(rootRef) {
         });
     });
     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 toast = notifications.get(id);
+        if (toast?.putNotificationInDropdownOnDismiss !== false) {
+            rootRef?.current?.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); };
+        const unsub = () => rootRef?.current?.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);
+        rootRef?.current?.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 }), []);
+    const api = (0, react_1.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: (0, react_1.useMemo)(() => [...toasts.values()], [toasts]),
+        notifications: (0, react_1.useMemo)(() => [...notifications.values()], [notifications]),
         onDismissNotification,
         addOnDismissListener,
     };

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

@@ -0,0 +1,48 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.13.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 hooks_1 = require("../hooks");
+const NotificationsListItem_1 = require("./NotificationsListItem");
+const NotificationListContainer = (0, tasty_1.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>
+ */
+function NotificationsList(props) {
+    const { items, children, onDismiss } = 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)(NotificationsListItem_1.NotificationListItem, { item: item, state: state, onDismiss: onDismiss }, item.key))) }, void 0));
+}
+exports.NotificationsList = NotificationsList;
+NotificationsList.Item = collections_1.Item;
+
+        

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

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.13.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationListItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const tasty_1 = require("../../../../tasty");
+const _internal_1 = require("../../../../_internal");
+const NotificationView_1 = require("../NotificationView");
+const NotificationListItemWrap = (0, tasty_1.tasty)({
+    styles: { borderBottom: { '': '1bw solid #border', ':last-child': 'none' } },
+});
+/**
+ * @internal This component is not intended to be used
+ */
+function NotificationListItem(props) {
+    const { item, state, onDismiss } = props;
+    const { key, props: notificationProps } = item;
+    const ref = (0, react_1.useRef)(null);
+    const onDismissEvent = (0, _internal_1.useEvent)(() => onDismiss?.(key));
+    const { itemProps } = (0, hooks_1.useNotificationListItem)({ ref, key, state });
+    return ((0, jsx_runtime_1.jsx)(NotificationListItemWrap, { children: (0, jsx_runtime_1.jsx)(NotificationView_1.NotificationView, { ref: ref, attributes: itemProps, ...notificationProps, isDismissible: !!onDismiss, onDismiss: onDismissEvent }, void 0) }, void 0));
+}
+exports.NotificationListItem = NotificationListItem;
+
+