@cube-dev/ui-kit 0.0.0-canary-b46ab85 → 0.0.0-canary-6b0df31

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

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * 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).
+ *
+ * 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',
+            duration: notificationOptions.duration ?? null, // Persistent while mounted
+        });
+        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',
+                duration: notificationOptions.duration ?? null,
+            });
+        }
+    }, [
+        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,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * 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';
+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 handlePress = useEvent(() => {
+        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,76 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * 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)',
+        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", gap: "1x", 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, 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: "center 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, 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-6b0df31
+ * 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-6b0df31
+ * 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 }) }));
+}
+
+        

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

@@ -0,0 +1,325 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.0.0-canary-6b0df31
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+import { tasty } from '../../../tasty/index.js';
+import { useLayoutEffect } from '../../../utils/react/useLayoutEffect.js';
+import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition.js';
+import { Portal } from '../../portal/index.js';
+import { ToastItem } from '../Toast/ToastItem.js';
+import { NotificationItem } from './NotificationItem.js';
+// ─── Constants ───────────────────────────────────────────────────────
+const COLLAPSE_VISIBLE_HEIGHT = 10;
+const CONTAINER_OFFSET = 16;
+const ITEM_GAP = 8;
+const DEFAULT_ITEM_HEIGHT = 56;
+// ─── Styled Elements ─────────────────────────────────────────────────
+const OverlayContainerElement = tasty({
+    styles: {
+        position: 'fixed',
+        top: '2x',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 10000,
+        padding: '1x',
+        height: '0',
+        pointerEvents: 'none',
+    },
+});
+const OverlayItemWrapper = tasty({
+    styles: {
+        position: 'absolute',
+        top: '0',
+        left: '50%',
+        transform: {
+            '': 'translateX(-50%) translateY(-50%)',
+            'isMeasured & isShown': 'translateX(-50%) translateY(0)',
+        },
+        width: 'max-content 50x',
+        pointerEvents: 'auto',
+        transition: {
+            '': 'opacity $transition ease-in, transform $transition ease-in',
+            isMeasured: 'top $transition ease-in, opacity $transition ease-in, transform $transition ease-in',
+        },
+        opacity: {
+            '': 0,
+            isShown: 1,
+        },
+    },
+});
+function getItemId(item) {
+    return item.data.internalId;
+}
+function isItemExiting(item) {
+    return item.data.isExiting === true;
+}
+function getItemCreatedAt(item) {
+    return item.data.createdAt;
+}
+/**
+ * Manages height measurement, position calculation, and ref tracking
+ * for overlay items. Extracted from OverlayContainer for readability.
+ */
+function useItemPositions(visibleItems) {
+    const [heights, setHeights] = useState({});
+    const itemRefs = useRef(new Map());
+    const lastPositionsRef = useRef(new Map());
+    // Items that have been measured AND painted at their correct position.
+    // Lags one frame behind `heights` so the browser paints the item at
+    // its final `top` before the CSS `top` transition is enabled.
+    const [settledIds, setSettledIds] = useState(new Set());
+    const rafRef = useRef(null);
+    // Measure heights using layout effect to avoid visible layout shifts.
+    // Runs every render but bails early if nothing changed.
+    useLayoutEffect(() => {
+        const newHeights = {};
+        let hasChanges = false;
+        itemRefs.current.forEach((el, id) => {
+            const height = el.offsetHeight || DEFAULT_ITEM_HEIGHT;
+            newHeights[id] = height;
+            if (heights[id] !== height) {
+                hasChanges = true;
+            }
+        });
+        for (const id of Object.keys(heights)) {
+            if (!itemRefs.current.has(id)) {
+                hasChanges = true;
+            }
+        }
+        if (hasChanges) {
+            setHeights(newHeights);
+        }
+    });
+    // After heights change, schedule settledIds update for the next frame.
+    // This ensures the item is painted at its correct position (with no top
+    // transition) before we enable the transition.
+    useEffect(() => {
+        const newIds = Object.keys(heights).filter((id) => !settledIds.has(id));
+        if (newIds.length === 0)
+            return;
+        if (rafRef.current != null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            setSettledIds((prev) => {
+                const next = new Set(prev);
+                for (const id of newIds) {
+                    next.add(id);
+                }
+                return next;
+            });
+        });
+        return () => {
+            if (rafRef.current != null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [heights]);
+    const createRefCallback = useCallback((itemId, displayRef) => (el) => {
+        displayRef(el);
+        if (el) {
+            itemRefs.current.set(itemId, el);
+        }
+        else {
+            itemRefs.current.delete(itemId);
+        }
+    }, []);
+    const positions = useMemo(() => {
+        const posMap = new Map();
+        let currentTop = 0;
+        for (const item of visibleItems) {
+            const id = getItemId(item);
+            posMap.set(id, currentTop);
+            const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;
+            currentTop += height + ITEM_GAP;
+        }
+        return posMap;
+    }, [visibleItems, heights]);
+    useEffect(() => {
+        positions.forEach((pos, id) => {
+            lastPositionsRef.current.set(id, pos);
+        });
+    }, [positions]);
+    return {
+        heights,
+        settledIds,
+        positions,
+        lastPositionsRef,
+        itemRefs,
+        createRefCallback,
+    };
+}
+/**
+ * Manages collapse/expand behavior and pause state for the overlay container.
+ * Extracted from OverlayContainer for readability.
+ */
+function useCollapseState(canCollapse, allItems, itemRefs, onPauseChange) {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const containerRef = useRef(null);
+    const boundsRef = useRef(null);
+    const updateBounds = useCallback(() => {
+        const refs = itemRefs.current;
+        if (!refs || refs.size === 0) {
+            boundsRef.current = null;
+            return;
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        refs.forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            minX = Math.min(minX, rect.left);
+            minY = Math.min(minY, rect.top);
+            maxX = Math.max(maxX, rect.right);
+            maxY = Math.max(maxY, rect.bottom);
+        });
+        if (typeof DOMRect !== 'undefined') {
+            boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);
+        }
+        else {
+            boundsRef.current = {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                top: minY,
+                right: maxX,
+                bottom: maxY,
+                left: minX,
+                toJSON: () => ({}),
+            };
+        }
+    }, [itemRefs]);
+    // Track mouse for collapse — expand when mouse leaves bounds
+    useEffect(() => {
+        if (!isCollapsed)
+            return;
+        const handleMouseMove = (e) => {
+            const bounds = boundsRef.current;
+            if (!bounds) {
+                setIsCollapsed(false);
+                onPauseChange(false);
+                return;
+            }
+            const padding = 20;
+            const isInBounds = e.clientX >= bounds.left - padding &&
+                e.clientX <= bounds.right + padding &&
+                e.clientY >= bounds.top - padding &&
+                e.clientY <= bounds.bottom + padding;
+            if (!isInBounds) {
+                setIsCollapsed(false);
+                onPauseChange(false);
+            }
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => window.removeEventListener('mousemove', handleMouseMove);
+    }, [isCollapsed, onPauseChange]);
+    // Update bounds when items change
+    useEffect(() => {
+        updateBounds();
+    }, [allItems, updateBounds]);
+    const handleMouseEnter = useCallback(() => {
+        updateBounds();
+        onPauseChange(true);
+        if (canCollapse) {
+            setIsCollapsed(true);
+        }
+    }, [updateBounds, canCollapse, onPauseChange]);
+    const handleMouseLeave = useCallback(() => {
+        if (!isCollapsed) {
+            onPauseChange(false);
+        }
+    }, [isCollapsed, onPauseChange]);
+    const handleFocus = useCallback(() => {
+        onPauseChange(true);
+    }, [onPauseChange]);
+    const handleBlur = useCallback((e) => {
+        if (containerRef.current &&
+            !containerRef.current.contains(e.relatedTarget)) {
+            onPauseChange(false);
+        }
+    }, [onPauseChange]);
+    return {
+        isCollapsed,
+        handleMouseEnter,
+        handleMouseLeave,
+        handleFocus,
+        handleBlur,
+        containerRef,
+    };
+}
+export function OverlayContainer({ toasts, notifications, onToastExitComplete, onNotificationExitComplete, onNotificationDismiss, onPauseChange, }) {
+    // Merge toasts and notifications into a single ordered list
+    const allItems = useMemo(() => {
+        const items = [
+            ...toasts.map((t) => ({ kind: 'toast', data: t })),
+            ...notifications.map((n) => ({ kind: 'notification', data: n })),
+        ];
+        // Sort by createdAt ascending (oldest first = bottom of stack, newest last = top)
+        items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));
+        return items;
+    }, [toasts, notifications]);
+    const visibleItems = useMemo(() => allItems.filter((item) => !isItemExiting(item)), [allItems]);
+    const hasNotifications = notifications.some((n) => !n.isExiting);
+    const canCollapse = !hasNotifications;
+    const { heights, settledIds, positions, lastPositionsRef, itemRefs, createRefCallback, } = useItemPositions(visibleItems);
+    const { isCollapsed, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, containerRef, } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);
+    // ─── Callbacks ─────────────────────────────────────────────────────
+    const handleExitComplete = useEvent((item) => {
+        const id = getItemId(item);
+        lastPositionsRef.current?.delete(id);
+        if (item.kind === 'toast') {
+            onToastExitComplete(item.data.internalId);
+        }
+        else {
+            onNotificationExitComplete(item.data.internalId);
+        }
+    });
+    // useCallback (not useEvent) because this is called during render.
+    // useEvent defers the ref update to useLayoutEffect, so during render
+    // it would still read the previous closure's positions/heights.
+    const getItemStyle = useCallback((item, index, total) => {
+        const id = getItemId(item);
+        const baseTop = positions.get(id) ?? lastPositionsRef.current?.get(id) ?? 0;
+        const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;
+        if (!isCollapsed || !canCollapse) {
+            return { top: `${baseTop}px` };
+        }
+        const isNewest = index === total - 1;
+        const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;
+        return {
+            top: `${collapsedTop}px`,
+            zIndex: index,
+            opacity: isNewest ? 1 : 0,
+            pointerEvents: 'none',
+        };
+    }, [isCollapsed, canCollapse, positions, heights, lastPositionsRef]);
+    // Build a visibleIndex lookup map to avoid O(n²) findIndex inside render loop
+    const visibleIndexMap = useMemo(() => {
+        const map = new Map();
+        visibleItems.forEach((item, index) => {
+            map.set(getItemId(item), index);
+        });
+        return map;
+    }, [visibleItems]);
+    if (allItems.length === 0)
+        return null;
+    return (_jsx(Portal, { children: _jsx(OverlayContainerElement, { ref: containerRef, onFocus: handleFocus, onBlur: handleBlur, children: allItems.map((item) => {
+                const itemId = getItemId(item);
+                const visibleIndex = visibleIndexMap.get(itemId) ?? 0;
+                const isExiting = isItemExiting(item);
+                return (_jsx(DisplayTransition, { animateOnMount: true, isShown: !isExiting, onRest: (transition) => {
+                        if (transition === 'exit') {
+                            handleExitComplete(item);
+                        }
+                    }, children: ({ isShown, ref }) => (_jsx(OverlayItemWrapper, { ref: createRefCallback(itemId, ref), mods: { isShown, isMeasured: settledIds.has(itemId) }, style: getItemStyle(item, visibleIndex, visibleItems.length), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: item.kind === 'toast' ? (_jsx(ToastItem, { ...item.data.itemProps, title: item.data.title, description: item.data.description, theme: item.data.theme, icon: item.data.icon, isLoading: item.data.isLoading })) : (_jsx(NotificationItem, { notification: item.data, onDismiss: onNotificationDismiss })) })) }, itemId));
+            }) }) }));
+}
+
+