@cube-dev/ui-kit 0.114.0 → 0.116.0

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

@@ -0,0 +1,116 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { Block } from "../../Block.js";
+import { ItemActionProvider } from "../../actions/ItemActionContext.js";
+import { Space } from "../../layout/Space.js";
+import { _Item } from "../../content/Item/Item.js";
+import { getThemeIcon } from "../Toast/useToast.js";
+import { Flex } from "../../layout/Flex.js";
+import { DismissActionDetectedContext, NotificationAction, NotificationDismissProvider } from "./NotificationAction.js";
+import { useContext, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/NotificationCard.tsx
+const StyledItem = tasty(_Item, { styles: {
+	width: {
+		"": "max min((100vw - 4x), 50x)",
+		flat: "100%"
+	},
+	shadow: {
+		"": "$shadow",
+		flat: false
+	},
+	radius: {
+		"": "1cr",
+		flat: "0"
+	},
+	transition: "theme, inset",
+	Description: { preset: "t4" }
+} });
+/**
+* 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);
+	ref.current = false;
+	return /* @__PURE__ */ jsx(DismissActionDetectedContext.Provider, {
+		value: ref,
+		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() {
+	if (useContext(DismissActionDetectedContext)?.current) return null;
+	return /* @__PURE__ */ 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 = /* @__PURE__ */ jsxs(Space, {
+		placeSelf: "end",
+		placeContent: "end",
+		flexGrow: 1,
+		children: [actions, showAutoDismiss && /* @__PURE__ */ jsx(AutoDismissButton, {})]
+	});
+	const wrappedContent = showAutoDismiss ? /* @__PURE__ */ jsx(DismissActionDetector, { children: actionsContent }) : actionsContent;
+	return /* @__PURE__ */ jsx(ItemActionProvider, {
+		type: "card",
+		theme,
+		children: hasDismissContext ? /* @__PURE__ */ jsx(NotificationDismissProvider, {
+			notificationId,
+			onDismiss,
+			children: wrappedContent
+		}) : wrappedContent
+	});
+}
+/**
+* Shared presentational card used by both overlay NotificationItem
+* and PersistentNotificationListItem.
+*/
+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);
+	return /* @__PURE__ */ jsx(StyledItem, {
+		qa,
+		type: "card",
+		theme,
+		icon,
+		description: description || hasActions ? /* @__PURE__ */ jsxs(Flex, {
+			flow: "row wrap",
+			gap: "0.5x 1x",
+			placeItems: "center stretch",
+			children: [description && /* @__PURE__ */ jsx(Block, { children: description }), hasActions && /* @__PURE__ */ jsx(ActionsSection, {
+				actions,
+				theme,
+				showAutoDismiss,
+				hasDismissContext,
+				notificationId,
+				onDismiss
+			})]
+		}) : void 0,
+		suffix,
+		mods: { flat: !elevated },
+		styles: !elevated ? { border: "0" } : void 0,
+		children: title
+	});
+}
+
+//#endregion
+export { NotificationCard };
+//# sourceMappingURL=NotificationCard.js.map

package/dist/components/overlays/Notifications/NotificationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationCard.js","names":["Item"],"sources":["../../../../src/components/overlays/Notifications/NotificationCard.tsx"],"sourcesContent":["import { Key, ReactNode, useContext, useRef } from 'react';\n\nimport { tasty } from '../../../tasty';\nimport { ItemActionProvider } from '../../actions/ItemActionContext';\nimport { Block } from '../../Block';\nimport { Item } from '../../content/Item/Item';\nimport { Flex } from '../../layout/Flex';\nimport { Space } from '../../layout/Space';\nimport { getThemeIcon } from '../Toast/useToast';\n\nimport {\n  DismissActionDetectedContext,\n  NotificationAction,\n  NotificationDismissProvider,\n} from './NotificationAction';\n\nimport type { DismissReason, NotificationType } from './types';\n\n// ─── Styled Components ──────────────────────────────────────────────\n\nconst StyledItem = tasty(Item, {\n  styles: {\n    width: {\n      '': 'max min((100vw - 4x), 50x)',\n      flat: '100%',\n    },\n    shadow: {\n      '': '$shadow',\n      flat: false,\n    },\n    radius: {\n      '': '1cr',\n      flat: '0',\n    },\n    transition: 'theme, inset',\n\n    Description: {\n      preset: 't4',\n    },\n  },\n});\n\n// ─── Dismiss Action Detection ────────────────────────────────────────\n\n/**\n * Provides a ref via context that NotificationAction children write to\n * during render when `isDismiss` is set. The ref is reset each render.\n */\nfunction DismissActionDetector({ children }: { children: ReactNode }) {\n  const ref = useRef(false);\n\n  // Reset each render so detection is fresh\n  ref.current = false;\n\n  return (\n    <DismissActionDetectedContext.Provider value={ref}>\n      {children}\n    </DismissActionDetectedContext.Provider>\n  );\n}\n\n/**\n * Renders the default \"Dismiss\" button only if no sibling NotificationAction\n * has `isDismiss` set. Reads from DismissActionDetectedContext ref which is\n * populated by actions that rendered before this component (left-to-right order).\n */\nfunction AutoDismissButton() {\n  const dismissDetectedRef = useContext(DismissActionDetectedContext);\n\n  if (dismissDetectedRef?.current) return null;\n\n  return <NotificationAction isDismiss>Dismiss</NotificationAction>;\n}\n\n// ─── ActionsSection ─────────────────────────────────────────────────\n\ninterface ActionsSectionProps {\n  actions?: ReactNode;\n  theme?: NotificationType;\n  /**\n   * Whether to show the auto-appended \"Dismiss\" button.\n   * Controlled by `isDismissible` on the notification.\n   *\n   * When false, no default \"Dismiss\" button is rendered, but actions with\n   * `closeOnPress` (default `true`) can still close the notification via\n   * the dismiss context.\n   */\n  showAutoDismiss: boolean;\n  /** Whether the dismiss context is available (notificationId + onDismiss present) */\n  hasDismissContext: boolean;\n  notificationId?: Key;\n  onDismiss?: (id: Key, reason: DismissReason) => void;\n}\n\n/**\n * Extracted sub-component for the actions area of a notification card.\n *\n * The dismiss provider is always rendered when `hasDismissContext` is true,\n * so any action with `closeOnPress` can close the notification — regardless\n * of `isDismissible`. The `showAutoDismiss` flag only controls the\n * auto-appended \"Dismiss\" button.\n */\nfunction ActionsSection({\n  actions,\n  theme,\n  showAutoDismiss,\n  hasDismissContext,\n  notificationId,\n  onDismiss,\n}: ActionsSectionProps) {\n  const actionsContent = (\n    <Space placeSelf=\"end\" placeContent=\"end\" flexGrow={1}>\n      {actions}\n      {showAutoDismiss && <AutoDismissButton />}\n    </Space>\n  );\n\n  const wrappedContent = showAutoDismiss ? (\n    <DismissActionDetector>{actionsContent}</DismissActionDetector>\n  ) : (\n    actionsContent\n  );\n\n  return (\n    <ItemActionProvider type=\"card\" theme={theme}>\n      {hasDismissContext ? (\n        <NotificationDismissProvider\n          notificationId={notificationId!}\n          onDismiss={onDismiss!}\n        >\n          {wrappedContent}\n        </NotificationDismissProvider>\n      ) : (\n        wrappedContent\n      )}\n    </ItemActionProvider>\n  );\n}\n\n// ─── NotificationCard ────────────────────────────────────────────────\n\nexport interface NotificationCardProps {\n  qa?: string;\n  /** Notification theme */\n  theme?: NotificationType;\n  /** Primary text */\n  title?: ReactNode;\n  /** Secondary text */\n  description?: ReactNode;\n  /** Custom icon override (theme default used if omitted) */\n  icon?: ReactNode;\n  /** Action buttons rendered below description */\n  actions?: ReactNode;\n  /**\n   * Whether the notification shows the default dismiss UI (auto-appended\n   * \"Dismiss\" button and Escape key). Default: true.\n   *\n   * When false, no default \"Dismiss\" button is rendered and Escape does\n   * nothing, but actions with `closeOnPress` (default) can still close\n   * the notification.\n   */\n  isDismissible?: boolean;\n  /** When false the card drops its shadow (e.g. inside a list). Default: true. */\n  elevated?: boolean;\n  /** Notification id */\n  notificationId?: Key;\n  /** Called when the notification is dismissed */\n  onDismiss?: (id: Key, reason: DismissReason) => void;\n  /** Suffix content (e.g. timestamp) */\n  suffix?: ReactNode;\n}\n\n/**\n * Shared presentational card used by both overlay NotificationItem\n * and PersistentNotificationListItem.\n */\nexport function NotificationCard({\n  qa = 'Notification',\n  theme,\n  title,\n  description,\n  icon: providedIcon,\n  actions,\n  isDismissible = true,\n  elevated = true,\n  notificationId,\n  onDismiss,\n  suffix,\n}: NotificationCardProps) {\n  const icon = getThemeIcon(theme, providedIcon);\n\n  const hasDismissContext = notificationId != null && onDismiss != null;\n  const showAutoDismiss = isDismissible && hasDismissContext;\n  const hasActions = !!(actions || showAutoDismiss);\n\n  const descriptionContent: ReactNode =\n    description || hasActions ? (\n      <Flex flow=\"row wrap\" gap=\"0.5x 1x\" placeItems=\"center stretch\">\n        {description && <Block>{description}</Block>}\n        {hasActions && (\n          <ActionsSection\n            actions={actions}\n            theme={theme}\n            showAutoDismiss={showAutoDismiss}\n            hasDismissContext={hasDismissContext}\n            notificationId={notificationId}\n            onDismiss={onDismiss}\n          />\n        )}\n      </Flex>\n    ) : undefined;\n\n  return (\n    <StyledItem\n      qa={qa}\n      type=\"card\"\n      theme={theme}\n      icon={icon}\n      description={descriptionContent}\n      suffix={suffix}\n      mods={{ flat: !elevated }}\n      styles={!elevated ? { border: '0' } : undefined}\n    >\n      {title}\n    </StyledItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,aAAa,MAAMA,OAAM,EAC7B,QAAQ;CACN,OAAO;EACL,IAAI;EACJ,MAAM;EACP;CACD,QAAQ;EACN,IAAI;EACJ,MAAM;EACP;CACD,QAAQ;EACN,IAAI;EACJ,MAAM;EACP;CACD,YAAY;CAEZ,aAAa,EACX,QAAQ,MACT;CACF,EACF,CAAC;;;;;AAQF,SAAS,sBAAsB,EAAE,YAAqC;CACpE,MAAM,MAAM,OAAO,MAAM;AAGzB,KAAI,UAAU;AAEd,QACE,oBAAC,6BAA6B;EAAS,OAAO;EAC3C;GACqC;;;;;;;AAS5C,SAAS,oBAAoB;AAG3B,KAF2B,WAAW,6BAA6B,EAE3C,QAAS,QAAO;AAExC,QAAO,oBAAC;EAAmB;YAAU;GAA4B;;;;;;;;;;AA+BnE,SAAS,eAAe,EACtB,SACA,OACA,iBACA,mBACA,gBACA,aACsB;CACtB,MAAM,iBACJ,qBAAC;EAAM,WAAU;EAAM,cAAa;EAAM,UAAU;aACjD,SACA,mBAAmB,oBAAC,sBAAoB;GACnC;CAGV,MAAM,iBAAiB,kBACrB,oBAAC,mCAAuB,iBAAuC,GAE/D;AAGF,QACE,oBAAC;EAAmB,MAAK;EAAc;YACpC,oBACC,oBAAC;GACiB;GACL;aAEV;IAC2B,GAE9B;GAEiB;;;;;;AAyCzB,SAAgB,iBAAiB,EAC/B,KAAK,gBACL,OACA,OACA,aACA,MAAM,cACN,SACA,gBAAgB,MAChB,WAAW,MACX,gBACA,WACA,UACwB;CACxB,MAAM,OAAO,aAAa,OAAO,aAAa;CAE9C,MAAM,oBAAoB,kBAAkB,QAAQ,aAAa;CACjE,MAAM,kBAAkB,iBAAiB;CACzC,MAAM,aAAa,CAAC,EAAE,WAAW;AAmBjC,QACE,oBAAC;EACK;EACJ,MAAK;EACE;EACD;EACN,aAtBF,eAAe,aACb,qBAAC;GAAK,MAAK;GAAW,KAAI;GAAU,YAAW;cAC5C,eAAe,oBAAC,mBAAO,cAAoB,EAC3C,cACC,oBAAC;IACU;IACF;IACU;IACE;IACH;IACL;KACX;IAEC,GACL;EASM;EACR,MAAM,EAAE,MAAM,CAAC,UAAU;EACzB,QAAQ,CAAC,WAAW,EAAE,QAAQ,KAAK,GAAG;YAErC;GACU"}

package/dist/components/overlays/Notifications/NotificationContext.d.ts

@@ -0,0 +1,10 @@
+
+import "./types.js";
+import { ToastContextValue } from "../Toast/types.js";
+import "react";
+
+//#region src/components/overlays/Notifications/NotificationContext.d.ts
+declare function useToastContext(): ToastContextValue;
+//#endregion
+export { useToastContext };
+//# sourceMappingURL=NotificationContext.d.ts.map

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

@@ -0,0 +1,34 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { createContext, useContext } from "react";
+
+//#region src/components/overlays/Notifications/NotificationContext.ts
+const ToastContext = createContext(null);
+/**
+* Internal context for overlay notification machinery.
+* Not exported publicly — consumers should use `useNotifications` hook.
+*/
+const NotificationContext = createContext(null);
+/**
+* Public context for persistent notifications.
+* Used by `usePersistentNotifications` and `useNotificationsCount` hooks.
+*/
+const PersistentNotificationsContext = createContext(null);
+function useToastContext() {
+	const context = useContext(ToastContext);
+	if (!context) throw new Error("useToastContext must be used within an OverlayProvider");
+	return context;
+}
+function useNotificationContext() {
+	const context = useContext(NotificationContext);
+	if (!context) throw new Error("useNotificationContext must be used within an OverlayProvider");
+	return context;
+}
+function usePersistentNotificationsContext() {
+	const context = useContext(PersistentNotificationsContext);
+	if (!context) throw new Error("usePersistentNotificationsContext must be used within an OverlayProvider");
+	return context;
+}
+
+//#endregion
+export { NotificationContext, PersistentNotificationsContext, ToastContext, useNotificationContext, usePersistentNotificationsContext, useToastContext };
+//# sourceMappingURL=NotificationContext.js.map

package/dist/components/overlays/Notifications/NotificationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationContext.js","names":[],"sources":["../../../../src/components/overlays/Notifications/NotificationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { ToastContextValue } from '../Toast/types';\nimport type {\n  InternalNotificationContextValue,\n  PersistentNotificationsContextValue,\n} from './types';\n\n// ─── Contexts ─────────────────────────────────────────────────────────\n\nexport const ToastContext = createContext<ToastContextValue | null>(null);\n\n/**\n * Internal context for overlay notification machinery.\n * Not exported publicly — consumers should use `useNotifications` hook.\n */\nexport const NotificationContext =\n  createContext<InternalNotificationContextValue | null>(null);\n\n/**\n * Public context for persistent notifications.\n * Used by `usePersistentNotifications` and `useNotificationsCount` hooks.\n */\nexport const PersistentNotificationsContext =\n  createContext<PersistentNotificationsContextValue | null>(null);\n\n// ─── Context Hooks ────────────────────────────────────────────────────\n\nexport function useToastContext(): ToastContextValue {\n  const context = useContext(ToastContext);\n\n  if (!context) {\n    throw new Error('useToastContext must be used within an OverlayProvider');\n  }\n\n  return context;\n}\n\nexport function useNotificationContext(): InternalNotificationContextValue {\n  const context = useContext(NotificationContext);\n\n  if (!context) {\n    throw new Error(\n      'useNotificationContext must be used within an OverlayProvider',\n    );\n  }\n\n  return context;\n}\n\nexport function usePersistentNotificationsContext(): PersistentNotificationsContextValue {\n  const context = useContext(PersistentNotificationsContext);\n\n  if (!context) {\n    throw new Error(\n      'usePersistentNotificationsContext must be used within an OverlayProvider',\n    );\n  }\n\n  return context;\n}\n"],"mappings":";;;;AAUA,MAAa,eAAe,cAAwC,KAAK;;;;;AAMzE,MAAa,sBACX,cAAuD,KAAK;;;;;AAM9D,MAAa,iCACX,cAA0D,KAAK;AAIjE,SAAgB,kBAAqC;CACnD,MAAM,UAAU,WAAW,aAAa;AAExC,KAAI,CAAC,QACH,OAAM,IAAI,MAAM,yDAAyD;AAG3E,QAAO;;AAGT,SAAgB,yBAA2D;CACzE,MAAM,UAAU,WAAW,oBAAoB;AAE/C,KAAI,CAAC,QACH,OAAM,IAAI,MACR,gEACD;AAGH,QAAO;;AAGT,SAAgB,oCAAyE;CACvF,MAAM,UAAU,WAAW,+BAA+B;AAE1D,KAAI,CAAC,QACH,OAAM,IAAI,MACR,2EACD;AAGH,QAAO"}

package/dist/components/overlays/Notifications/NotificationItem.d.ts

@@ -0,0 +1,17 @@
+
+import { DismissReason, InternalNotification } from "./types.js";
+import { Key } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/NotificationItem.d.ts
+interface NotificationItemProps {
+  notification: InternalNotification;
+  onDismiss: (id: Key, reason: DismissReason) => void;
+}
+declare function NotificationItem({
+  notification,
+  onDismiss
+}: NotificationItemProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NotificationItem, NotificationItemProps };
+//# sourceMappingURL=NotificationItem.d.ts.map

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

@@ -0,0 +1,66 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { NotificationCard } from "./NotificationCard.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/NotificationItem.tsx
+function getAriaRole(theme) {
+	if (theme === "danger" || theme === "warning") return "alert";
+	return "status";
+}
+function getAriaLive(theme) {
+	if (theme === "danger" || theme === "warning") return "assertive";
+	return "polite";
+}
+/**
+* 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" } }
+});
+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 /* @__PURE__ */ jsx(NotificationItemWrapper, {
+		role: getAriaRole(theme),
+		"aria-live": getAriaLive(theme),
+		onKeyDown: handleKeyDown,
+		children: /* @__PURE__ */ jsx(NotificationCard, {
+			qa: "Notification",
+			theme,
+			title,
+			description,
+			icon,
+			actions,
+			isDismissible,
+			notificationId,
+			onDismiss
+		})
+	});
+}
+
+//#endregion
+export { NotificationItem };
+//# sourceMappingURL=NotificationItem.js.map

package/dist/components/overlays/Notifications/NotificationItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationItem.js","names":[],"sources":["../../../../src/components/overlays/Notifications/NotificationItem.tsx"],"sourcesContent":["import { Key, KeyboardEvent } from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { tasty } from '../../../tasty';\n\nimport { NotificationCard } from './NotificationCard';\n\nimport type {\n  DismissReason,\n  InternalNotification,\n  NotificationType,\n} from './types';\n\n// ─── ARIA Helpers ────────────────────────────────────────────────────\n\nfunction getAriaRole(theme?: NotificationType): 'alert' | 'status' {\n  if (theme === 'danger' || theme === 'warning') {\n    return 'alert';\n  }\n\n  return 'status';\n}\n\nfunction getAriaLive(theme?: NotificationType): 'assertive' | 'polite' {\n  if (theme === 'danger' || theme === 'warning') {\n    return 'assertive';\n  }\n\n  return 'polite';\n}\n\n// ─── Styled Wrapper ──────────────────────────────────────────────────\n\n/**\n * Wrapper element for overlay notification items.\n *\n * Accessibility attributes are set as static defaults:\n * - `tabIndex={0}`: Makes the notification focusable via keyboard, allowing\n *   users to Tab to it and press Escape to dismiss.\n * - `aria-atomic=\"true\"`: Ensures screen readers announce the entire notification\n *   when content changes (not just the diff).\n * - `aria-relevant=\"additions text\"`: Announces when new content is added or\n *   text changes, but not when elements are removed (e.g., during exit animation).\n *\n * The `role` and `aria-live` are set dynamically per-instance based on theme\n * (see `getAriaRole` and `getAriaLive` above).\n */\nconst NotificationItemWrapper = tasty({\n  as: 'div',\n  tabIndex: 0,\n  'aria-atomic': 'true',\n  'aria-relevant': 'additions text',\n  styles: {\n    outline: {\n      '': 'none',\n    },\n  },\n});\n\n// ─── NotificationItem Component ─────────────────────────────────────\n\nexport interface NotificationItemProps {\n  notification: InternalNotification;\n  onDismiss: (id: Key, reason: DismissReason) => void;\n}\n\nexport function NotificationItem({\n  notification,\n  onDismiss,\n}: NotificationItemProps) {\n  const {\n    theme,\n    title,\n    description,\n    icon,\n    actions,\n    isDismissible = true,\n    id,\n    internalId,\n  } = notification;\n\n  const notificationId = id ?? internalId;\n\n  const handleKeyDown = useEvent((e: KeyboardEvent) => {\n    if (e.key === 'Escape' && isDismissible) {\n      e.stopPropagation();\n      onDismiss(notificationId, 'close');\n    }\n  });\n\n  return (\n    <NotificationItemWrapper\n      role={getAriaRole(theme)}\n      aria-live={getAriaLive(theme)}\n      onKeyDown={handleKeyDown}\n    >\n      <NotificationCard\n        qa=\"Notification\"\n        theme={theme}\n        title={title}\n        description={description}\n        icon={icon}\n        actions={actions}\n        isDismissible={isDismissible}\n        notificationId={notificationId}\n        onDismiss={onDismiss}\n      />\n    </NotificationItemWrapper>\n  );\n}\n"],"mappings":";;;;;;;AAeA,SAAS,YAAY,OAA8C;AACjE,KAAI,UAAU,YAAY,UAAU,UAClC,QAAO;AAGT,QAAO;;AAGT,SAAS,YAAY,OAAkD;AACrE,KAAI,UAAU,YAAY,UAAU,UAClC,QAAO;AAGT,QAAO;;;;;;;;;;;;;;;;AAmBT,MAAM,0BAA0B,MAAM;CACpC,IAAI;CACJ,UAAU;CACV,eAAe;CACf,iBAAiB;CACjB,QAAQ,EACN,SAAS,EACP,IAAI,QACL,EACF;CACF,CAAC;AASF,SAAgB,iBAAiB,EAC/B,cACA,aACwB;CACxB,MAAM,EACJ,OACA,OACA,aACA,MACA,SACA,gBAAgB,MAChB,IACA,eACE;CAEJ,MAAM,iBAAiB,MAAM;CAE7B,MAAM,gBAAgB,UAAU,MAAqB;AACnD,MAAI,EAAE,QAAQ,YAAY,eAAe;AACvC,KAAE,iBAAiB;AACnB,aAAU,gBAAgB,QAAQ;;GAEpC;AAEF,QACE,oBAAC;EACC,MAAM,YAAY,MAAM;EACxB,aAAW,YAAY,MAAM;EAC7B,WAAW;YAEX,oBAAC;GACC,IAAG;GACI;GACA;GACM;GACP;GACG;GACM;GACC;GACL;IACX;GACsB"}

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

@@ -0,0 +1,305 @@
+/** @license MIT | @cube-dev/ui-kit v0.116.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
+import { Portal } from "../../portal/Portal.js";
+import { ToastItem } from "../Toast/ToastItem.js";
+import { NotificationItem } from "./NotificationItem.js";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/OverlayContainer.tsx
+const COLLAPSE_VISIBLE_HEIGHT = 10;
+const CONTAINER_OFFSET = 16;
+const ITEM_GAP = 8;
+const DEFAULT_ITEM_HEIGHT = 56;
+const OverlayContainerElement = tasty({ styles: {
+	position: "fixed",
+	top: "2x",
+	left: "50%",
+	transform: "translateX(-50%)",
+	zIndex: 1e4,
+	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(/* @__PURE__ */ new Map());
+	const lastPositionsRef = useRef(/* @__PURE__ */ new Map());
+	const [settledIds, setSettledIds] = useState(/* @__PURE__ */ new Set());
+	const rafRef = useRef(null);
+	useLayoutEffect$1(() => {
+		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);
+	});
+	useEffect(() => {
+		const heightKeys = Object.keys(heights);
+		const newIds = heightKeys.filter((id) => !settledIds.has(id));
+		const hasStaleIds = settledIds.size > 0 && [...settledIds].some((id) => !(id in heights));
+		if (newIds.length === 0 && !hasStaleIds) return;
+		if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+		if (newIds.length === 0 && hasStaleIds) {
+			setSettledIds((prev) => new Set(heightKeys.filter((id) => prev.has(id))));
+			return;
+		}
+		rafRef.current = requestAnimationFrame(() => {
+			rafRef.current = null;
+			setSettledIds((prev) => {
+				const next = /* @__PURE__ */ new Set();
+				for (const id of heightKeys) if (prev.has(id)) next.add(id);
+				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 = /* @__PURE__ */ 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]);
+	useEffect(() => {
+		if (!isCollapsed) return;
+		const handleMouseMove = (e) => {
+			const bounds = boundsRef.current;
+			if (!bounds) {
+				setIsCollapsed(false);
+				onPauseChange(false);
+				return;
+			}
+			const padding = 20;
+			if (!(e.clientX >= bounds.left - padding && e.clientX <= bounds.right + padding && e.clientY >= bounds.top - padding && e.clientY <= bounds.bottom + padding)) {
+				setIsCollapsed(false);
+				onPauseChange(false);
+			}
+		};
+		window.addEventListener("mousemove", handleMouseMove);
+		return () => window.removeEventListener("mousemove", handleMouseMove);
+	}, [isCollapsed, onPauseChange]);
+	useEffect(() => {
+		updateBounds();
+	}, [allItems, updateBounds]);
+	return {
+		isCollapsed,
+		handleMouseEnter: useCallback(() => {
+			updateBounds();
+			onPauseChange(true);
+			if (canCollapse) setIsCollapsed(true);
+		}, [
+			updateBounds,
+			canCollapse,
+			onPauseChange
+		]),
+		handleMouseLeave: useCallback(() => {
+			if (!isCollapsed) onPauseChange(false);
+		}, [isCollapsed, onPauseChange]),
+		handleFocus: useCallback(() => {
+			onPauseChange(true);
+		}, [onPauseChange]),
+		handleBlur: useCallback((e) => {
+			if (containerRef.current && !containerRef.current.contains(e.relatedTarget)) onPauseChange(false);
+		}, [onPauseChange]),
+		containerRef
+	};
+}
+function OverlayContainer({ toasts, notifications, onToastExitComplete, onNotificationExitComplete, onNotificationDismiss, onPauseChange }) {
+	const allItems = useMemo(() => {
+		const items = [...toasts.map((t) => ({
+			kind: "toast",
+			data: t
+		})), ...notifications.map((n) => ({
+			kind: "notification",
+			data: n
+		}))];
+		items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));
+		return items;
+	}, [toasts, notifications]);
+	const visibleItems = useMemo(() => allItems.filter((item) => !isItemExiting(item)), [allItems]);
+	const canCollapse = !notifications.some((n) => !n.isExiting);
+	const { heights, settledIds, positions, lastPositionsRef, itemRefs, createRefCallback } = useItemPositions(visibleItems);
+	const { isCollapsed, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, containerRef } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);
+	const handleNotificationDismiss = useEvent((id, reason) => {
+		onNotificationDismiss(id, reason);
+		onPauseChange(false);
+	});
+	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);
+	});
+	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;
+		return {
+			top: `${COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height}px`,
+			zIndex: index,
+			opacity: isNewest ? 1 : 0,
+			pointerEvents: "none"
+		};
+	}, [
+		isCollapsed,
+		canCollapse,
+		positions,
+		heights,
+		lastPositionsRef
+	]);
+	const visibleIndexMap = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		visibleItems.forEach((item, index) => {
+			map.set(getItemId(item), index);
+		});
+		return map;
+	}, [visibleItems]);
+	if (allItems.length === 0) return null;
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(OverlayContainerElement, {
+		ref: containerRef,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		children: allItems.map((item) => {
+			const itemId = getItemId(item);
+			const visibleIndex = visibleIndexMap.get(itemId) ?? 0;
+			return /* @__PURE__ */ jsx(DisplayTransition, {
+				animateOnMount: true,
+				isShown: !isItemExiting(item),
+				onRest: (transition) => {
+					if (transition === "exit") handleExitComplete(item);
+				},
+				children: ({ isShown, ref }) => /* @__PURE__ */ 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" ? /* @__PURE__ */ 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
+					}) : /* @__PURE__ */ jsx(NotificationItem, {
+						notification: item.data,
+						onDismiss: handleNotificationDismiss
+					})
+				})
+			}, itemId);
+		})
+	}) });
+}
+
+//#endregion
+export { OverlayContainer };
+//# sourceMappingURL=OverlayContainer.js.map

package/dist/components/overlays/Notifications/OverlayContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayContainer.js","names":[],"sources":["../../../../src/components/overlays/Notifications/OverlayContainer.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  Key,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { tasty } from '../../../tasty';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Portal } from '../../portal';\nimport { ToastItem } from '../Toast/ToastItem';\n\nimport { NotificationItem } from './NotificationItem';\n\nimport type { InternalToast } from '../Toast/types';\nimport type { DismissReason, InternalNotification } from './types';\n\n// ─── Constants ───────────────────────────────────────────────────────\n\nconst COLLAPSE_VISIBLE_HEIGHT = 10;\nconst CONTAINER_OFFSET = 16;\nconst ITEM_GAP = 8;\nconst DEFAULT_ITEM_HEIGHT = 56;\n\n// ─── Styled Elements ─────────────────────────────────────────────────\n\nconst OverlayContainerElement = tasty({\n  styles: {\n    position: 'fixed',\n    top: '2x',\n    left: '50%',\n    transform: 'translateX(-50%)',\n    zIndex: 10000,\n    padding: '1x',\n    height: '0',\n    pointerEvents: 'none',\n  },\n});\n\nconst OverlayItemWrapper = tasty({\n  styles: {\n    position: 'absolute',\n    top: '0',\n    left: '50%',\n    transform: {\n      '': 'translateX(-50%) translateY(-50%)',\n      'isMeasured & isShown': 'translateX(-50%) translateY(0)',\n    },\n    width: 'max-content 50x',\n    pointerEvents: 'auto',\n    transition: {\n      '': 'opacity $transition ease-in, transform $transition ease-in',\n      isMeasured:\n        'top $transition ease-in, opacity $transition ease-in, transform $transition ease-in',\n    },\n    opacity: {\n      '': 0,\n      isShown: 1,\n    },\n  },\n});\n\n// ─── Unified Item Type ───────────────────────────────────────────────\n\ntype OverlayItem =\n  | { kind: 'toast'; data: InternalToast }\n  | { kind: 'notification'; data: InternalNotification };\n\nfunction getItemId(item: OverlayItem): string {\n  return item.data.internalId;\n}\n\nfunction isItemExiting(item: OverlayItem): boolean {\n  return item.data.isExiting === true;\n}\n\nfunction getItemCreatedAt(item: OverlayItem): number {\n  return item.data.createdAt;\n}\n\n// ─── useItemPositions Hook ───────────────────────────────────────────\n\ninterface ItemPositionsResult {\n  heights: Record<string, number>;\n  /** Set of item IDs that have been measured AND painted at their correct position. */\n  settledIds: Set<string>;\n  positions: Map<string, number>;\n  lastPositionsRef: ReturnType<typeof useRef<Map<string, number>>>;\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>;\n  createRefCallback: (\n    itemId: string,\n    displayRef: (el: HTMLElement | null) => void,\n  ) => (el: HTMLDivElement | null) => void;\n}\n\n/**\n * Manages height measurement, position calculation, and ref tracking\n * for overlay items. Extracted from OverlayContainer for readability.\n */\nfunction useItemPositions(visibleItems: OverlayItem[]): ItemPositionsResult {\n  const [heights, setHeights] = useState<Record<string, number>>({});\n  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const lastPositionsRef = useRef<Map<string, number>>(new Map());\n\n  // Items that have been measured AND painted at their correct position.\n  // Lags one frame behind `heights` so the browser paints the item at\n  // its final `top` before the CSS `top` transition is enabled.\n  const [settledIds, setSettledIds] = useState<Set<string>>(new Set());\n  const rafRef = useRef<number | null>(null);\n\n  // Measure heights using layout effect to avoid visible layout shifts.\n  // Runs every render but bails early if nothing changed.\n  useLayoutEffect(() => {\n    const newHeights: Record<string, number> = {};\n    let hasChanges = false;\n\n    itemRefs.current.forEach((el, id) => {\n      const height = el.offsetHeight || DEFAULT_ITEM_HEIGHT;\n      newHeights[id] = height;\n\n      if (heights[id] !== height) {\n        hasChanges = true;\n      }\n    });\n\n    for (const id of Object.keys(heights)) {\n      if (!itemRefs.current.has(id)) {\n        hasChanges = true;\n      }\n    }\n\n    if (hasChanges) {\n      setHeights(newHeights);\n    }\n  });\n\n  // After heights change, schedule settledIds update for the next frame.\n  // This ensures the item is painted at its correct position (with no top\n  // transition) before we enable the transition.\n  useEffect(() => {\n    const heightKeys = Object.keys(heights);\n    const newIds = heightKeys.filter((id) => !settledIds.has(id));\n    const hasStaleIds =\n      settledIds.size > 0 && [...settledIds].some((id) => !(id in heights));\n\n    if (newIds.length === 0 && !hasStaleIds) return;\n\n    if (rafRef.current != null) {\n      cancelAnimationFrame(rafRef.current);\n    }\n\n    // For pruning-only updates (no new items), apply synchronously since\n    // there's no need to wait for a paint frame.\n    if (newIds.length === 0 && hasStaleIds) {\n      setSettledIds((prev) => new Set(heightKeys.filter((id) => prev.has(id))));\n      return;\n    }\n\n    rafRef.current = requestAnimationFrame(() => {\n      rafRef.current = null;\n      setSettledIds((prev) => {\n        const next = new Set<string>();\n\n        // Only keep IDs that still exist in heights (prune removed items)\n        for (const id of heightKeys) {\n          if (prev.has(id)) {\n            next.add(id);\n          }\n        }\n\n        for (const id of newIds) {\n          next.add(id);\n        }\n\n        return next;\n      });\n    });\n\n    return () => {\n      if (rafRef.current != null) {\n        cancelAnimationFrame(rafRef.current);\n        rafRef.current = null;\n      }\n    };\n  }, [heights]);\n\n  const createRefCallback = useCallback(\n    (itemId: string, displayRef: (el: HTMLElement | null) => void) =>\n      (el: HTMLDivElement | null) => {\n        displayRef(el);\n\n        if (el) {\n          itemRefs.current.set(itemId, el);\n        } else {\n          itemRefs.current.delete(itemId);\n        }\n      },\n    [],\n  );\n\n  const positions = useMemo(() => {\n    const posMap = new Map<string, number>();\n    let currentTop = 0;\n\n    for (const item of visibleItems) {\n      const id = getItemId(item);\n      posMap.set(id, currentTop);\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n      currentTop += height + ITEM_GAP;\n    }\n\n    return posMap;\n  }, [visibleItems, heights]);\n\n  useEffect(() => {\n    positions.forEach((pos, id) => {\n      lastPositionsRef.current.set(id, pos);\n    });\n  }, [positions]);\n\n  return {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  };\n}\n\n// ─── useCollapseState Hook ───────────────────────────────────────────\n\ninterface CollapseStateResult {\n  isCollapsed: boolean;\n  handleMouseEnter: () => void;\n  handleMouseLeave: () => void;\n  handleFocus: () => void;\n  handleBlur: (e: FocusEvent) => void;\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\n/**\n * Manages collapse/expand behavior and pause state for the overlay container.\n * Extracted from OverlayContainer for readability.\n */\nfunction useCollapseState(\n  canCollapse: boolean,\n  allItems: OverlayItem[],\n  itemRefs: ReturnType<typeof useRef<Map<string, HTMLDivElement>>>,\n  onPauseChange: (paused: boolean) => void,\n): CollapseStateResult {\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const boundsRef = useRef<DOMRect | null>(null);\n\n  const updateBounds = useCallback(() => {\n    const refs = itemRefs.current;\n\n    if (!refs || refs.size === 0) {\n      boundsRef.current = null;\n      return;\n    }\n\n    let minX = Infinity,\n      minY = Infinity,\n      maxX = -Infinity,\n      maxY = -Infinity;\n\n    refs.forEach((el) => {\n      const rect = el.getBoundingClientRect();\n      minX = Math.min(minX, rect.left);\n      minY = Math.min(minY, rect.top);\n      maxX = Math.max(maxX, rect.right);\n      maxY = Math.max(maxY, rect.bottom);\n    });\n\n    if (typeof DOMRect !== 'undefined') {\n      boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);\n    } else {\n      boundsRef.current = {\n        x: minX,\n        y: minY,\n        width: maxX - minX,\n        height: maxY - minY,\n        top: minY,\n        right: maxX,\n        bottom: maxY,\n        left: minX,\n        toJSON: () => ({}),\n      } as DOMRect;\n    }\n  }, [itemRefs]);\n\n  // Track mouse for collapse — expand when mouse leaves bounds\n  useEffect(() => {\n    if (!isCollapsed) return;\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const bounds = boundsRef.current;\n\n      if (!bounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n        return;\n      }\n\n      const padding = 20;\n      const isInBounds =\n        e.clientX >= bounds.left - padding &&\n        e.clientX <= bounds.right + padding &&\n        e.clientY >= bounds.top - padding &&\n        e.clientY <= bounds.bottom + padding;\n\n      if (!isInBounds) {\n        setIsCollapsed(false);\n        onPauseChange(false);\n      }\n    };\n\n    window.addEventListener('mousemove', handleMouseMove);\n    return () => window.removeEventListener('mousemove', handleMouseMove);\n  }, [isCollapsed, onPauseChange]);\n\n  // Update bounds when items change\n  useEffect(() => {\n    updateBounds();\n  }, [allItems, updateBounds]);\n\n  const handleMouseEnter = useCallback(() => {\n    updateBounds();\n    onPauseChange(true);\n\n    if (canCollapse) {\n      setIsCollapsed(true);\n    }\n  }, [updateBounds, canCollapse, onPauseChange]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (!isCollapsed) {\n      onPauseChange(false);\n    }\n  }, [isCollapsed, onPauseChange]);\n\n  const handleFocus = useCallback(() => {\n    onPauseChange(true);\n  }, [onPauseChange]);\n\n  const handleBlur = useCallback(\n    (e: FocusEvent) => {\n      if (\n        containerRef.current &&\n        !containerRef.current.contains(e.relatedTarget as Node)\n      ) {\n        onPauseChange(false);\n      }\n    },\n    [onPauseChange],\n  );\n\n  return {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  };\n}\n\n// ─── Overlay Container ───────────────────────────────────────────────\n//\n// INTENTIONAL: Position calculations are done manually (absolute positioning + JS\n// height tracking) rather than relying on CSS flexbox/grid layout. This is\n// deliberate — the container mixes enter/exit animations, collapse behavior, and\n// heterogeneous item sizes (toasts vs notifications) which require per-item\n// position control. CSS-only solutions (e.g., flex column with gap) break when\n// items exit asynchronously or when collapse transforms need to be computed per-item.\n\nexport interface OverlayContainerProps {\n  toasts: InternalToast[];\n  notifications: InternalNotification[];\n  onToastExitComplete: (internalId: string) => void;\n  onNotificationExitComplete: (internalId: string) => void;\n  onNotificationDismiss: (id: Key, reason: DismissReason) => void;\n  onPauseChange: (paused: boolean) => void;\n}\n\nexport function OverlayContainer({\n  toasts,\n  notifications,\n  onToastExitComplete,\n  onNotificationExitComplete,\n  onNotificationDismiss,\n  onPauseChange,\n}: OverlayContainerProps) {\n  // Merge toasts and notifications into a single ordered list\n  const allItems: OverlayItem[] = useMemo(() => {\n    const items: OverlayItem[] = [\n      ...toasts.map((t): OverlayItem => ({ kind: 'toast', data: t })),\n      ...notifications.map(\n        (n): OverlayItem => ({ kind: 'notification', data: n }),\n      ),\n    ];\n\n    // Sort by createdAt ascending (oldest first = bottom of stack, newest last = top)\n    items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));\n\n    return items;\n  }, [toasts, notifications]);\n\n  const visibleItems = useMemo(\n    () => allItems.filter((item) => !isItemExiting(item)),\n    [allItems],\n  );\n  const hasNotifications = notifications.some((n) => !n.isExiting);\n  const canCollapse = !hasNotifications;\n\n  const {\n    heights,\n    settledIds,\n    positions,\n    lastPositionsRef,\n    itemRefs,\n    createRefCallback,\n  } = useItemPositions(visibleItems);\n\n  const {\n    isCollapsed,\n    handleMouseEnter,\n    handleMouseLeave,\n    handleFocus,\n    handleBlur,\n    containerRef,\n  } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);\n\n  // ─── Callbacks ─────────────────────────────────────────────────────\n\n  // When the user dismisses a notification they were hovering, the element\n  // is removed from the DOM so mouseLeave never fires. Explicitly unpause\n  // so remaining notifications' timers resume.\n  const handleNotificationDismiss = useEvent(\n    (id: Key, reason: DismissReason) => {\n      onNotificationDismiss(id, reason);\n      onPauseChange(false);\n    },\n  );\n\n  const handleExitComplete = useEvent((item: OverlayItem) => {\n    const id = getItemId(item);\n    lastPositionsRef.current?.delete(id);\n\n    if (item.kind === 'toast') {\n      onToastExitComplete(item.data.internalId);\n    } else {\n      onNotificationExitComplete(item.data.internalId);\n    }\n  });\n\n  // useCallback (not useEvent) because this is called during render.\n  // useEvent defers the ref update to useLayoutEffect, so during render\n  // it would still read the previous closure's positions/heights.\n  const getItemStyle = useCallback(\n    (item: OverlayItem, index: number, total: number) => {\n      const id = getItemId(item);\n      const baseTop =\n        positions.get(id) ?? lastPositionsRef.current?.get(id) ?? 0;\n      const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;\n\n      if (!isCollapsed || !canCollapse) {\n        return { top: `${baseTop}px` };\n      }\n\n      const isNewest = index === total - 1;\n      const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;\n\n      return {\n        top: `${collapsedTop}px`,\n        zIndex: index,\n        opacity: isNewest ? 1 : 0,\n        pointerEvents: 'none' as const,\n      };\n    },\n    [isCollapsed, canCollapse, positions, heights, lastPositionsRef],\n  );\n\n  // Build a visibleIndex lookup map to avoid O(n²) findIndex inside render loop\n  const visibleIndexMap = useMemo(() => {\n    const map = new Map<string, number>();\n\n    visibleItems.forEach((item, index) => {\n      map.set(getItemId(item), index);\n    });\n\n    return map;\n  }, [visibleItems]);\n\n  if (allItems.length === 0) return null;\n\n  return (\n    <Portal>\n      <OverlayContainerElement\n        ref={containerRef}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n      >\n        {allItems.map((item) => {\n          const itemId = getItemId(item);\n          const visibleIndex = visibleIndexMap.get(itemId) ?? 0;\n          const isExiting = isItemExiting(item);\n\n          return (\n            <DisplayTransition\n              key={itemId}\n              animateOnMount\n              isShown={!isExiting}\n              onRest={(transition) => {\n                if (transition === 'exit') {\n                  handleExitComplete(item);\n                }\n              }}\n            >\n              {({ isShown, ref }) => (\n                <OverlayItemWrapper\n                  ref={createRefCallback(itemId, ref)}\n                  mods={{ isShown, isMeasured: settledIds.has(itemId) }}\n                  style={getItemStyle(item, visibleIndex, visibleItems.length)}\n                  onMouseEnter={handleMouseEnter}\n                  onMouseLeave={handleMouseLeave}\n                >\n                  {item.kind === 'toast' ? (\n                    <ToastItem\n                      {...item.data.itemProps}\n                      title={item.data.title}\n                      description={item.data.description}\n                      theme={item.data.theme}\n                      icon={item.data.icon}\n                      isLoading={item.data.isLoading}\n                    />\n                  ) : (\n                    <NotificationItem\n                      notification={item.data}\n                      onDismiss={handleNotificationDismiss}\n                    />\n                  )}\n                </OverlayItemWrapper>\n              )}\n            </DisplayTransition>\n          );\n        })}\n      </OverlayContainerElement>\n    </Portal>\n  );\n}\n"],"mappings":"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"}

package/dist/components/overlays/Notifications/OverlayProvider.d.ts

@@ -0,0 +1,13 @@
+
+import { OverlayProviderProps } from "./types.js";
+import { useToastContext } from "./NotificationContext.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/OverlayProvider.d.ts
+declare function OverlayProvider({
+  children,
+  maxPersistentNotifications
+}: OverlayProviderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OverlayProvider };
+//# sourceMappingURL=OverlayProvider.d.ts.map