@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,56 @@
+
+import { DismissReason, NotificationType } from "./types.js";
+import { Key, ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Notifications/NotificationCard.d.ts
+interface NotificationCardProps {
+  qa?: string;
+  /** Notification theme */
+  theme?: NotificationType;
+  /** Primary text */
+  title?: ReactNode;
+  /** Secondary text */
+  description?: ReactNode;
+  /** Custom icon override (theme default used if omitted) */
+  icon?: ReactNode;
+  /** Action buttons rendered below description */
+  actions?: ReactNode;
+  /**
+   * Whether the notification shows the default dismiss UI (auto-appended
+   * "Dismiss" button and Escape key). Default: true.
+   *
+   * When false, no default "Dismiss" button is rendered and Escape does
+   * nothing, but actions with `closeOnPress` (default) can still close
+   * the notification.
+   */
+  isDismissible?: boolean;
+  /** When false the card drops its shadow (e.g. inside a list). Default: true. */
+  elevated?: boolean;
+  /** Notification id */
+  notificationId?: Key;
+  /** Called when the notification is dismissed */
+  onDismiss?: (id: Key, reason: DismissReason) => void;
+  /** Suffix content (e.g. timestamp) */
+  suffix?: ReactNode;
+}
+/**
+ * Shared presentational card used by both overlay NotificationItem
+ * and PersistentNotificationListItem.
+ */
+declare function NotificationCard({
+  qa,
+  theme,
+  title,
+  description,
+  icon: providedIcon,
+  actions,
+  isDismissible,
+  elevated,
+  notificationId,
+  onDismiss,
+  suffix
+}: NotificationCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { NotificationCard, NotificationCardProps };
+//# sourceMappingURL=NotificationCard.d.ts.map

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

@@ -0,0 +1,116 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.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,8 @@
+
+import { ToastContextValue } from "../Toast/types.js";
+
+//#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.115.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.115.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.115.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