@cube-dev/ui-kit 0.0.0-canary-e2a9f35 → 0.0.0-canary-c48279e

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

@@ -0,0 +1,92 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-c48279e
+ * Released under the MIT license.
+ */
+
+import { useEffect, useRef } from 'react';
+import { useNotificationContext } from './NotificationContext.js';
+/**
+ * Declarative Notification component that shows a notification while mounted.
+ * Only supports `mode: 'overlay'` (the default).
+ *
+ * Duration defaults are the same as for imperative `notify()`:
+ * - 5000ms for non-persistent notifications
+ * - 10000ms for persistent notifications
+ * - Pass `duration={null}` explicitly to disable auto-dismiss.
+ *
+ * Semantics:
+ * - mount → show or update by `id`
+ * - unmount → dismiss unless `disableRemoveOnUnmount`
+ *
+ * @example
+ * ```tsx
+ * <Notification
+ *   id="release:new-version"
+ *   theme="warning"
+ *   title="New release available"
+ *   description="2.0.0 can be installed now."
+ *   actions={
+ *     <>
+ *       <Notification.Action>Later</Notification.Action>
+ *       <Notification.Action onPress={() => openUpgradeDialog()}>
+ *         Upgrade
+ *       </Notification.Action>
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+export function Notification(props) {
+    const { disableRemoveOnUnmount, ...notificationOptions } = props;
+    const { addNotification, removeNotification, updateNotification } = useNotificationContext();
+    const notificationIdRef = useRef(null);
+    // Tracks how many times the update effect has run. The first run (0 → 1)
+    // coincides with mount and must be skipped because addNotification already
+    // handles the initial state.
+    const renderCountRef = useRef(0);
+    const disableRemoveRef = useRef(disableRemoveOnUnmount);
+    disableRemoveRef.current = disableRemoveOnUnmount;
+    // Show notification on mount
+    useEffect(() => {
+        const id = addNotification({
+            ...notificationOptions,
+            mode: 'overlay',
+        });
+        notificationIdRef.current = id;
+        return () => {
+            if (!disableRemoveRef.current && notificationIdRef.current != null) {
+                removeNotification(notificationIdRef.current, 'api');
+                notificationIdRef.current = null;
+            }
+        };
+    }, []);
+    // Update notification when props change (skip initial mount)
+    useEffect(() => {
+        // Skip the first run — it coincides with the mount effect above
+        if (renderCountRef.current === 0) {
+            renderCountRef.current = 1;
+            return;
+        }
+        if (notificationIdRef.current != null) {
+            updateNotification(notificationIdRef.current, {
+                ...notificationOptions,
+                mode: 'overlay',
+            });
+        }
+    }, [
+        notificationOptions.id,
+        notificationOptions.theme,
+        notificationOptions.title,
+        notificationOptions.description,
+        notificationOptions.icon,
+        notificationOptions.actions,
+        notificationOptions.isDismissible,
+        notificationOptions.persistent,
+        notificationOptions.duration,
+    ]);
+    return null;
+}
+
+        

package/es/components/overlays/Notifications/NotificationAction.js

@@ -0,0 +1,73 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-c48279e
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+import { ItemAction } from '../../actions/ItemAction/ItemAction.js';
+// ─── Notification Action Interceptor Context ─────────────────────────
+/**
+ * Optional callback invoked BEFORE any action's onPress handler.
+ * Provided by PersistentNotificationsList so the parent (e.g. popover)
+ * can close itself when an action is triggered.
+ */
+const NotificationActionInterceptorContext = createContext(null);
+export { NotificationActionInterceptorContext };
+const NotificationDismissContext = createContext(null);
+export function NotificationDismissProvider({ notificationId, onDismiss, children, }) {
+    const dismiss = useEvent(() => {
+        onDismiss(notificationId, 'action');
+    });
+    const value = useMemo(() => ({ dismiss }), [dismiss]);
+    return (_jsx(NotificationDismissContext.Provider, { value: value, children: children }));
+}
+// ─── Dismiss Action Detection Context ────────────────────────────────
+//
+// Allows NotificationCard to detect whether any child NotificationAction
+// has `isDismiss` set, without requiring a separate `hasDismissAction` prop.
+//
+// Mechanism:
+// - DismissActionDetector provides a ref via context and resets it each render.
+// - NotificationAction writes to the ref during render when isDismiss is true.
+// - DefaultDismissGuard reads the ref to decide whether to show the default button.
+//
+// This relies on React's left-to-right sibling render order: {actions}
+// children render before <DefaultDismissGuard />, so the ref is populated
+// before it's read. The ref is reset at the provider level each render,
+// making it safe under StrictMode double-rendering.
+export const DismissActionDetectedContext = createContext(null);
+// ─── NotificationAction Component ────────────────────────────────────
+/**
+ * Action button for use inside Notification components.
+ * Wraps ItemAction with auto-dismiss behavior.
+ *
+ * - `closeOnPress` (default: true) — auto-dismisses the notification after `onPress`.
+ * - An action with no `onPress` and `closeOnPress: true` acts as a dismiss-only action.
+ * - `isDismiss` — marks this action as the dismiss button; when present, the default
+ *   "Dismiss" button is auto-suppressed via context detection.
+ * - Type (primary/secondary/etc.) is set automatically via ItemActionProvider context.
+ */
+export function NotificationAction({ children, onPress, closeOnPress = true, isDisabled, isDismiss, }) {
+    const dismissCtx = useContext(NotificationDismissContext);
+    const dismissDetectedRef = useContext(DismissActionDetectedContext);
+    // Register isDismiss during render (synchronous, before DefaultDismissGuard renders).
+    // Safe under StrictMode: the ref is reset at the DismissActionDetector level each render.
+    if (isDismiss && dismissDetectedRef) {
+        dismissDetectedRef.current = true;
+    }
+    const actionInterceptor = useContext(NotificationActionInterceptorContext);
+    const handlePress = useEvent(() => {
+        actionInterceptor?.();
+        onPress?.();
+        if (closeOnPress) {
+            dismissCtx?.dismiss('action');
+        }
+    });
+    return (_jsx(ItemAction, { type: "secondary", isDisabled: isDisabled, onPress: handlePress, children: children }));
+}
+
+        

package/es/components/overlays/Notifications/NotificationCard.js

@@ -0,0 +1,87 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-c48279e
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
+import { tasty } from '../../../tasty/index.js';
+import { ItemActionProvider } from '../../actions/ItemActionContext.js';
+import { Block } from '../../Block.js';
+import { Item } from '../../content/Item/Item.js';
+import { Flex } from '../../layout/Flex.js';
+import { Space } from '../../layout/Space.js';
+import { getThemeIcon } from '../Toast/useToast.js';
+import { DismissActionDetectedContext, NotificationAction, NotificationDismissProvider, } from './NotificationAction.js';
+// ─── Styled Components ──────────────────────────────────────────────
+const StyledItem = tasty(Item, {
+    styles: {
+        width: {
+            '': 'max min((100vw - 4x), 50x)',
+            flat: '100%',
+        },
+        shadow: {
+            '': '$card-shadow',
+            flat: false,
+        },
+        radius: {
+            '': '1cr',
+            flat: '0',
+        },
+        transition: 'theme, inset',
+        Description: {
+            preset: 't4',
+        },
+    },
+});
+// ─── Dismiss Action Detection ────────────────────────────────────────
+/**
+ * Provides a ref via context that NotificationAction children write to
+ * during render when `isDismiss` is set. The ref is reset each render.
+ */
+function DismissActionDetector({ children }) {
+    const ref = useRef(false);
+    // Reset each render so detection is fresh
+    ref.current = false;
+    return (_jsx(DismissActionDetectedContext.Provider, { value: ref, children: children }));
+}
+/**
+ * Renders the default "Dismiss" button only if no sibling NotificationAction
+ * has `isDismiss` set. Reads from DismissActionDetectedContext ref which is
+ * populated by actions that rendered before this component (left-to-right order).
+ */
+function AutoDismissButton() {
+    const dismissDetectedRef = useContext(DismissActionDetectedContext);
+    if (dismissDetectedRef?.current)
+        return null;
+    return _jsx(NotificationAction, { isDismiss: true, children: "Dismiss" });
+}
+/**
+ * Extracted sub-component for the actions area of a notification card.
+ *
+ * The dismiss provider is always rendered when `hasDismissContext` is true,
+ * so any action with `closeOnPress` can close the notification — regardless
+ * of `isDismissible`. The `showAutoDismiss` flag only controls the
+ * auto-appended "Dismiss" button.
+ */
+function ActionsSection({ actions, theme, showAutoDismiss, hasDismissContext, notificationId, onDismiss, }) {
+    const actionsContent = (_jsxs(Space, { placeContent: "end", flexGrow: 1, children: [actions, showAutoDismiss && _jsx(AutoDismissButton, {})] }));
+    const wrappedContent = showAutoDismiss ? (_jsx(DismissActionDetector, { children: actionsContent })) : (actionsContent);
+    return (_jsx(ItemActionProvider, { type: "card", theme: theme, children: hasDismissContext ? (_jsx(NotificationDismissProvider, { notificationId: notificationId, onDismiss: onDismiss, children: wrappedContent })) : (wrappedContent) }));
+}
+/**
+ * Shared presentational card used by both overlay NotificationItem
+ * and PersistentNotificationListItem.
+ */
+export function NotificationCard({ qa = 'Notification', theme, title, description, icon: providedIcon, actions, isDismissible = true, elevated = true, notificationId, onDismiss, suffix, }) {
+    const icon = getThemeIcon(theme, providedIcon);
+    const hasDismissContext = notificationId != null && onDismiss != null;
+    const showAutoDismiss = isDismissible && hasDismissContext;
+    const hasActions = !!(actions || showAutoDismiss);
+    const descriptionContent = description || hasActions ? (_jsxs(Flex, { flow: "row wrap", gap: "0.5x 1x", placeItems: "end stretch", children: [description && _jsx(Block, { children: description }), hasActions && (_jsx(ActionsSection, { actions: actions, theme: theme, showAutoDismiss: showAutoDismiss, hasDismissContext: hasDismissContext, notificationId: notificationId, onDismiss: onDismiss }))] })) : undefined;
+    return (_jsx(StyledItem, { qa: qa, type: "card", theme: theme, icon: icon, description: descriptionContent, suffix: suffix, mods: { flat: !elevated }, styles: !elevated ? { border: '0' } : undefined, children: title }));
+}
+
+        

package/es/components/overlays/Notifications/NotificationContext.js

@@ -0,0 +1,44 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-c48279e
+ * Released under the MIT license.
+ */
+
+import { createContext, useContext } from 'react';
+// ─── Contexts ─────────────────────────────────────────────────────────
+export const ToastContext = createContext(null);
+/**
+ * Internal context for overlay notification machinery.
+ * Not exported publicly — consumers should use `useNotifications` hook.
+ */
+export const NotificationContext = createContext(null);
+/**
+ * Public context for persistent notifications.
+ * Used by `usePersistentNotifications` and `useNotificationsCount` hooks.
+ */
+export const PersistentNotificationsContext = createContext(null);
+// ─── Context Hooks ────────────────────────────────────────────────────
+export function useToastContext() {
+    const context = useContext(ToastContext);
+    if (!context) {
+        throw new Error('useToastContext must be used within an OverlayProvider');
+    }
+    return context;
+}
+export function useNotificationContext() {
+    const context = useContext(NotificationContext);
+    if (!context) {
+        throw new Error('useNotificationContext must be used within an OverlayProvider');
+    }
+    return context;
+}
+export function usePersistentNotificationsContext() {
+    const context = useContext(PersistentNotificationsContext);
+    if (!context) {
+        throw new Error('usePersistentNotificationsContext must be used within an OverlayProvider');
+    }
+    return context;
+}
+
+        

package/es/components/overlays/Notifications/NotificationItem.js

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-c48279e
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEvent } from '../../../_internal/index.js';
+import { tasty } from '../../../tasty/index.js';
+import { NotificationCard } from './NotificationCard.js';
+// ─── ARIA Helpers ────────────────────────────────────────────────────
+function getAriaRole(theme) {
+    if (theme === 'danger' || theme === 'warning') {
+        return 'alert';
+    }
+    return 'status';
+}
+function getAriaLive(theme) {
+    if (theme === 'danger' || theme === 'warning') {
+        return 'assertive';
+    }
+    return 'polite';
+}
+// ─── Styled Wrapper ──────────────────────────────────────────────────
+/**
+ * Wrapper element for overlay notification items.
+ *
+ * Accessibility attributes are set as static defaults:
+ * - `tabIndex={0}`: Makes the notification focusable via keyboard, allowing
+ *   users to Tab to it and press Escape to dismiss.
+ * - `aria-atomic="true"`: Ensures screen readers announce the entire notification
+ *   when content changes (not just the diff).
+ * - `aria-relevant="additions text"`: Announces when new content is added or
+ *   text changes, but not when elements are removed (e.g., during exit animation).
+ *
+ * The `role` and `aria-live` are set dynamically per-instance based on theme
+ * (see `getAriaRole` and `getAriaLive` above).
+ */
+const NotificationItemWrapper = tasty({
+    as: 'div',
+    tabIndex: 0,
+    'aria-atomic': 'true',
+    'aria-relevant': 'additions text',
+    styles: {
+        outline: {
+            '': 'none',
+        },
+    },
+});
+export function NotificationItem({ notification, onDismiss, }) {
+    const { theme, title, description, icon, actions, isDismissible = true, id, internalId, } = notification;
+    const notificationId = id ?? internalId;
+    const handleKeyDown = useEvent((e) => {
+        if (e.key === 'Escape' && isDismissible) {
+            e.stopPropagation();
+            onDismiss(notificationId, 'close');
+        }
+    });
+    return (_jsx(NotificationItemWrapper, { role: getAriaRole(theme), "aria-live": getAriaLive(theme), onKeyDown: handleKeyDown, children: _jsx(NotificationCard, { qa: "Notification", theme: theme, title: title, description: description, icon: icon, actions: actions, isDismissible: isDismissible, notificationId: notificationId, onDismiss: onDismiss }) }));
+}
+
+