@cube-dev/ui-kit 0.12.6 → 0.13.0

package/es/components/overlays/AlertDialog/AlertDialogApiProvider.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.
  */
 
@@ -25,22 +25,21 @@ export function AlertDialogApiProvider(props) {
                 meta: { id: currentId, isClosed: false, isVisible: true },
             };
             const close = () => {
-                var _a;
                 if (currentDialog.meta.isClosed)
                     return;
                 currentDialog.meta.isClosed = true;
-                (_a = params.cancelToken) === null || _a === void 0 ? void 0 : _a.removeEventListener('abort', close);
-                setOpenedDialog((currentState) => (currentState === null || currentState === void 0 ? void 0 : currentState.meta.id) !== currentId
+                params.cancelToken?.removeEventListener('abort', close);
+                setOpenedDialog((currentState) => currentState?.meta.id !== currentId
                     ? currentState
                     : {
                         props: currentState.props,
                         meta: { ...currentState.meta, isVisible: false },
                     });
-                setTimeout(() => setOpenedDialog((currentState) => (currentState === null || currentState === void 0 ? void 0 : currentState.meta.id) !== currentId ? currentState : null), 300);
+                setTimeout(() => setOpenedDialog((currentState) => currentState?.meta.id !== currentId ? currentState : null), 300);
             };
-            if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.aborted)
+            if (cancelToken?.aborted)
                 return new Promise(() => { });
-            cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.addEventListener('abort', close, { once: true });
+            cancelToken?.addEventListener('abort', close, { once: true });
             currentDialog.meta.promise = new Promise((resolve, reject) => {
                 currentDialog.meta.resolve = (status) => {
                     close();

package/es/components/overlays/AlertDialog/AlertDialogZone.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.
  */
 
@@ -33,7 +33,7 @@ export function AlertDialogZone(props) {
             return {
                 ...action,
                 onPress: (e) => {
-                    onPress === null || onPress === void 0 ? void 0 : onPress(e);
+                    onPress?.(e);
                     resolve(status);
                 },
             };

package/es/components/overlays/AlertDialog/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/es/components/overlays/AlertDialog/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/es/components/overlays/Dialog/Dialog.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/es/components/overlays/Dialog/DialogContainer.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/es/components/overlays/Dialog/DialogForm.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,17 +24,17 @@ export function DialogForm(props) {
     [form] = useForm(form);
     const { onClose } = useDialogContext();
     function onLocalDismiss() {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        onClose?.();
+        onDismiss?.();
         if (!preserve) {
-            form === null || form === void 0 ? void 0 : form.resetFields();
+            form?.resetFields();
         }
     }
     return (_jsxs(Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, ...dialogProps, children: [_jsx(Header, { children: _jsx(Title, { children: title }, void 0) }, void 0), _jsx(Content, { children: _jsxs(Form, { qa: qa || 'DialogForm', form: form, name: name, defaultValues: defaultValues, labelStyles: labelStyles, labelPosition: labelPosition, requiredMark: requiredMark, isRequired: isRequired, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isReadOnly: isReadOnly, validationState: validationState, validateTrigger: validateTrigger, onSubmit: async (data) => {
-                        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data));
-                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                        await onSubmit?.(data);
+                        onClose?.();
                         if (!preserve) {
-                            form === null || form === void 0 ? void 0 : form.resetFields();
+                            form?.resetFields();
                         }
                     }, onSubmitFailed: onSubmitFailed, onValuesChange: onValuesChange, children: [typeof children === 'function' ? children(onLocalDismiss) : children, !noActions ? (_jsxs(ButtonGroup, { children: [_jsx(Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }, void 0), _jsx(Button, { qa: `${qa || ''}CancelButton`, label: "Cancel", onPress: onLocalDismiss, ...(cancelProps || {}) }, void 0)] }, void 0)) : undefined] }, void 0) }, void 0)] }, void 0));
 }

package/es/components/overlays/Dialog/DialogTrigger.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/es/components/overlays/Dialog/context.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/es/components/overlays/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/es/components/overlays/Modal/Modal.js

@@ -1,13 +1,12 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDOMRef } from '@react-spectrum/utils';
-import { useViewportSize } from '@react-aria/utils';
 import { forwardRef } from 'react';
 import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
 import { tasty } from '../../../tasty';
@@ -26,7 +25,7 @@ export const OVERLAY_WRAPPER_STYLES = {
     },
     boxSizing: 'border-box',
     width: '100vw',
-    height: '@cube-visual-viewport-height',
+    height: '100dvh',
     pointerEvents: 'none',
     zIndex: 2,
     transition: 'visibility 0ms linear .13s',
@@ -40,10 +39,10 @@ const ModalElement = tasty({
         display: 'grid',
         zIndex: 2,
         height: {
-            '': 'max (@cube-visual-viewport-height * .9)',
-            '[data-type="fullscreenTakeover"] | [data-type="panel"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
-            '[data-type="fullscreen"]': '(@cube-visual-viewport-height * .9) (@cube-visual-viewport-height * .9)',
-            '[data-type="fullscreenTakeover"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+            '': 'max 90dvh',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': '100dvh 100dvh',
+            '[data-type="fullscreen"]': '90dvh 90dvh',
+            '[data-type="fullscreenTakeover"]': '100dvh 100dvh',
         },
         width: {
             width: '288px 90vw',
@@ -71,11 +70,7 @@ let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
     let { qa, children, isOpen, type, placement, styles, overlayProps, ...otherProps } = props;
     usePreventScroll();
     let { modalProps } = useModal();
-    let viewport = useViewportSize();
-    let style = {
-        '--cube-visual-viewport-height': viewport.height + 'px',
-    };
-    return (_jsx(ModalWrapperElement, { mods: { open: isOpen }, "data-type": type, "data-placement": placement, style: style, children: _jsx(ModalElement, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
+    return (_jsx(ModalWrapperElement, { mods: { open: isOpen }, "data-type": type, "data-placement": placement, children: _jsx(ModalElement, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
 });
 let _Modal = forwardRef(Modal);
 export { _Modal as Modal };

package/es/components/overlays/Modal/OpenTransition.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/es/components/overlays/Modal/Overlay.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,11 +16,11 @@ function Overlay(props, ref) {
     let { root } = useProviderProps({});
     let handleEntered = useCallback(() => {
         setExited(false);
-        onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+        onEntered?.();
     }, [onEntered]);
     let handleExited = useCallback(() => {
         setExited(true);
-        onExited === null || onExited === void 0 ? void 0 : onExited();
+        onExited?.();
     }, [onExited]);
     // Don't un-render the overlay while it's transitioning out.
     let mountOverlay = isOpen || !exited;

package/es/components/overlays/Modal/Popover.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/es/components/overlays/Modal/Tray.js

@@ -1,14 +1,13 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useDOMRef } from '@react-spectrum/utils';
-import { useViewportSize } from '@react-aria/utils';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef } from 'react';
 import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
 import { tasty } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
@@ -26,7 +25,7 @@ const TrayWrapperElement = tasty({
 const TrayElement = tasty({
     styles: {
         zIndex: 2,
-        height: 'max (@cube-visual-viewport-height * .9)',
+        height: 'max 90dvh',
         width: '288px 90vw',
         pointerEvents: 'auto',
         transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
@@ -48,40 +47,10 @@ let TrayWrapper = forwardRef(function TrayWrapper(props, ref) {
     let { modalProps } = useModal({
         isDisabled: isNonModal,
     });
-    // We need to measure the window's height in JS rather than using percentages in CSS
-    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
-    // does not work properly because there is nothing to base the percentage on.
-    // We cannot use vh units because mobile browsers adjust the window height dynamically
-    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
-    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
-    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
-    let viewport = useViewportSize();
-    let [height, setHeight] = useState(viewport.height);
-    let timeoutRef = useRef();
-    useEffect(() => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        // When the height is decreasing, and the keyboard is visible
-        // (visual viewport smaller than layout viewport), delay setting
-        // the new max height until after the animation is complete
-        // so that there isn't an empty space under the tray briefly.
-        if (viewport.height < height && viewport.height < window.innerHeight) {
-            timeoutRef.current = setTimeout(() => {
-                setHeight(viewport.height);
-            }, 500);
-        }
-        else {
-            setHeight(viewport.height);
-        }
-    }, [height, viewport.height]);
-    let wrapperStyle = {
-        '--cube-visual-viewport-height': height + 'px',
-    };
     let domProps = mergeProps(otherProps, overlayProps);
     return (_jsx(TrayWrapperElement, { mods: {
             open: isOpen,
-        }, style: wrapperStyle, children: _jsx(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
+        }, children: _jsx(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
                 open: isOpen,
                 'fixed-height': isFixedHeight,
             }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));

package/es/components/overlays/Modal/Underlay.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/es/components/overlays/Modal/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/es/components/overlays/NewNotifications/Bar/FloatingNotification.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,8 +12,16 @@ 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: {
+        overflow: 'hidden',
+        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,12 +1,12 @@
 /**
  * @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.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { TransitionGroup } from 'react-transition-group';
 import { Item } from '@react-stately/collections';
 import { useHover } from '@react-aria/interactions';
@@ -14,7 +14,7 @@ import { useFocusRing, focusSafely } from '@react-aria/focus';
 import { tasty } from '../../../../tasty';
 import { useNotificationsList } from '../hooks';
 import { mergeProps } from '../../../../utils/react';
-import { useEvent } from '../../../../_internal';
+import { useChainedCallback, useEvent } from '../../../../_internal';
 import { FloatingNotification } from './FloatingNotification';
 import { TransitionComponent } from './TransitionComponent';
 const NotificationsContainer = tasty({
@@ -26,7 +26,7 @@ const NotificationsContainer = 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 */
@@ -34,29 +34,46 @@ const NotificationsContainer = tasty({
         overflow: 'hidden',
         isolation: 'isolate',
         pointerEvents: 'none',
-        '@supports (-webkit-touch-callout: none)': {
-            height: '-webkit-fill-available max',
-        },
     },
 });
+/**
+ * @internal Do not use it
+ */
 export function NotificationsBar(props) {
-    const { items, children, onRemoveNotification, onDismissNotification } = props;
+    const { items, children, onRemoveNotification, onDismissNotification, limit = 5, } = props;
     const ref = useRef(null);
+    const [realLimit, setRealLimit] = useState(limit + 1);
     const { listProps, state } = useNotificationsList({ items, children, ref });
     const { hoverProps, isHovered } = useHover({});
     const { focusProps, isFocusVisible } = useFocusRing({ within: true });
     const moveFocus = 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) {
             focusSafely(elementToFocus);
         }
     });
-    return (_jsx(NotificationsContainer, { ref: ref, qa: "NotificationsBar", role: "region", "aria-live": "polite", ...mergeProps(listProps, hoverProps, focusProps), children: _jsx(TransitionGroup, { enter: true, exit: true, component: null, children: [...state.collection].reverse().map((notification) => (_jsx(TransitionComponent, { children: _jsx(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 = useChainedCallback(onRemoveNotification, moveFocus);
+    const collection = [...state.collection].reverse();
+    const collectionLength = collection.length;
+    /**
+     * Handy hack to improve animations if the limit is reached.
+     */
+    useLayoutEffect(() => {
+        setRealLimit(limit + 1);
+    }, [collectionLength]);
+    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 (_jsx(NotificationsContainer, { ref: ref, qa: "NotificationsBar", role: "region", "aria-live": "polite", ...mergeProps(listProps, hoverProps, focusProps), children: _jsx(TransitionGroup, { enter: true, exit: true, component: null, children: collection.slice(0, realLimit).map((notification) => (_jsx(TransitionComponent, { children: _jsx(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));
 }
 NotificationsBar.Item = Item;
 

package/es/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/es/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/es/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.
  */
 
@@ -15,7 +15,7 @@ import { ClearSlots } from '../../../../utils/react';
 import { useNotificationsObserver } from '../hooks';
 export function NotificationsDialogTrigger(props) {
     const { onCloseNotificationInBar, ...dialogTriggerProps } = props;
-    useNotificationsObserver((args) => onCloseNotificationInBar === null || onCloseNotificationInBar === void 0 ? void 0 : onCloseNotificationInBar(args));
+    useNotificationsObserver((args) => onCloseNotificationInBar?.(args));
     return _jsx(DialogTrigger, { ...dialogTriggerProps, type: "popover" }, void 0);
 }
 const StyledDialog = tasty(Dialog, { height: 'auto calc(100vh - 12x)' });

package/es/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/es/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.
  */
 
@@ -10,17 +10,20 @@ 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();
     const disableRemoveOnUnmountRef = useSyncRef(disableRemoveOnUnmount);
     const { notify, update, remove } = useNotificationsApi();
-    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    const id = propsId ?? defaultId;
     const removeNotification = useEvent((id) => disableRemoveOnUnmountRef.current ? void 0 : remove(id));
     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.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -23,13 +23,16 @@ 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();
     const onPressEvent = 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 (_jsx(Action, { ...buttonProps, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, onPress: onPressEvent, children: children }, void 0));

package/es/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.
  */
 
@@ -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.12.6
+ * @cube-dev/ui-kit v0.13.0
  * 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, {