@cdx-ui/components 0.0.1-beta.17 → 0.0.1-beta.171

package/lib/module/providers/toast/insets-container.js

@@ -0,0 +1,165 @@
+"use strict";
+
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { Platform, View } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { FullWindowOverlay, NOTIFICATION_OVERLAY_Z_INDEX } from '@cdx-ui/primitives';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ZERO_INSETS = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
+/**
+ * Container component that applies inset padding to position toasts
+ * away from screen edges and safe areas
+ *
+ * Combines custom insets with safe area insets:
+ * - If custom inset is provided, it overrides safe area + default padding
+ * - If not provided, uses platform-specific defaults:
+ *   - iOS: safe area inset + 0px for top, + 6px for bottom, + 12px for left/right
+ *   - Android: safe area inset + 12px for all edges
+ *
+ * On web, wires pointer/focus/visibility listeners to pause/resume timers
+ * per WCAG 2.2.1 (keyboard/pointer/hidden-tab pausing).
+ */
+export function InsetsContainer({
+  insets,
+  announceLabel = 'Notifications',
+  contentWrapper,
+  children,
+  disableFullWindowOverlay,
+  unstable_accessibilityContainerViewIsModal,
+  pauseAll,
+  resumeAll,
+  hide
+}) {
+  const safeAreaInsets = useContext(SafeAreaInsetsContext) ?? ZERO_INSETS;
+  const finalInsets = useMemo(() => {
+    return {
+      top: insets?.top ?? safeAreaInsets.top + (Platform.OS === 'ios' ? 0 : 12),
+      bottom: insets?.bottom ?? safeAreaInsets.bottom + (Platform.OS === 'ios' ? 6 : 12),
+      left: insets?.left ?? safeAreaInsets.left + 12,
+      right: insets?.right ?? safeAreaInsets.right + 12
+    };
+  }, [safeAreaInsets, insets]);
+
+  // Track pause sources independently so overlapping pointer + focus
+  // don't accidentally resume while the other source is still active.
+  const pauseSourcesRef = useRef(new Set());
+  const pauseAllRef = useRef(pauseAll);
+  const resumeAllRef = useRef(resumeAll);
+  pauseAllRef.current = pauseAll;
+  resumeAllRef.current = resumeAll;
+  const addPauseSource = useCallback(source => {
+    const wasEmpty = pauseSourcesRef.current.size === 0;
+    pauseSourcesRef.current.add(source);
+    if (wasEmpty) pauseAllRef.current();
+  }, []);
+  const removePauseSource = useCallback(source => {
+    pauseSourcesRef.current.delete(source);
+    if (pauseSourcesRef.current.size === 0) resumeAllRef.current();
+  }, []);
+
+  // Ref for the container so we can attach native DOM listeners on web.
+  const containerRef = useRef(null);
+  const hideRef = useRef(hide);
+  hideRef.current = hide;
+
+  // Web-only: attach pointer, focus, visibility, and keyboard listeners
+  // via native DOM APIs to avoid RNW making the container focusable
+  // (RNW adds tabIndex when React onFocus/onBlur handlers are present).
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    const node = containerRef.current;
+    const sources = pauseSourcesRef.current;
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        addPauseSource('visibility');
+      } else {
+        removePauseSource('visibility');
+      }
+    };
+
+    // The container is `absolute inset-0` (full viewport). Using
+    // pointerenter/pointerleave here would pause as soon as the cursor
+    // is anywhere on the page — far too aggressive.  Instead use
+    // pointerover/pointerout (which bubble) and gate on whether the
+    // pointer is actually over a toast element (identified by the
+    // `data-state` attribute emitted on every toast wrapper).
+    const isInsideToast = el => {
+      if (!el || !(el instanceof HTMLElement)) return false;
+      return !!el.closest('[data-state]');
+    };
+    const handlePointerOver = e => {
+      if (isInsideToast(e.target)) addPauseSource('pointer');
+    };
+    const handlePointerOut = e => {
+      if (!isInsideToast(e.relatedTarget)) removePauseSource('pointer');
+    };
+    const handleFocusIn = e => {
+      if (isInsideToast(e.target)) addPauseSource('focus');
+    };
+    const handleFocusOut = e => {
+      if (!isInsideToast(e.relatedTarget)) removePauseSource('focus');
+    };
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        event.stopPropagation();
+        hideRef.current();
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    if (node && typeof node.addEventListener === 'function') {
+      node.addEventListener('pointerover', handlePointerOver);
+      node.addEventListener('pointerout', handlePointerOut);
+      node.addEventListener('focusin', handleFocusIn);
+      node.addEventListener('focusout', handleFocusOut);
+      node.addEventListener('keydown', handleKeyDown);
+    }
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      if (node && typeof node.removeEventListener === 'function') {
+        node.removeEventListener('pointerover', handlePointerOver);
+        node.removeEventListener('pointerout', handlePointerOut);
+        node.removeEventListener('focusin', handleFocusIn);
+        node.removeEventListener('focusout', handleFocusOut);
+        node.removeEventListener('keydown', handleKeyDown);
+      }
+      if (sources.size > 0) {
+        sources.clear();
+        resumeAllRef.current();
+      }
+    };
+  }, [addPauseSource, removePauseSource]);
+  const content = /*#__PURE__*/_jsx(View, {
+    ref: containerRef,
+    className: "absolute web:fixed inset-0 pointer-events-box-none",
+    role: "region",
+    "aria-label": announceLabel,
+    ...(Platform.OS === 'web' && {
+      'aria-live': 'polite',
+      'aria-atomic': false
+    }),
+    style: {
+      ...(Platform.OS === 'web' ? {
+        zIndex: NOTIFICATION_OVERLAY_Z_INDEX
+      } : {}),
+      paddingTop: finalInsets.top,
+      paddingBottom: finalInsets.bottom,
+      paddingLeft: finalInsets.left,
+      paddingRight: finalInsets.right
+    },
+    children: contentWrapper ? contentWrapper(children) : children
+  });
+  if (Platform.OS !== 'ios') {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(FullWindowOverlay, {
+    disableFullWindowOverlay: disableFullWindowOverlay,
+    unstable_accessibilityContainerViewIsModal: unstable_accessibilityContainerViewIsModal,
+    children: content
+  });
+}
+//# sourceMappingURL=insets-container.js.map

package/lib/module/providers/toast/insets-container.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useCallback","useContext","useEffect","useMemo","useRef","Platform","View","SafeAreaInsetsContext","FullWindowOverlay","NOTIFICATION_OVERLAY_Z_INDEX","jsx","_jsx","ZERO_INSETS","top","bottom","left","right","InsetsContainer","insets","announceLabel","contentWrapper","children","disableFullWindowOverlay","unstable_accessibilityContainerViewIsModal","pauseAll","resumeAll","hide","safeAreaInsets","finalInsets","OS","pauseSourcesRef","Set","pauseAllRef","resumeAllRef","current","addPauseSource","source","wasEmpty","size","add","removePauseSource","delete","containerRef","hideRef","node","sources","handleVisibilityChange","document","hidden","isInsideToast","el","HTMLElement","closest","handlePointerOver","e","target","handlePointerOut","relatedTarget","handleFocusIn","handleFocusOut","handleKeyDown","event","key","stopPropagation","addEventListener","removeEventListener","clear","content","ref","className","role","style","zIndex","paddingTop","paddingBottom","paddingLeft","paddingRight"],"sourceRoot":"../../../../src","sources":["providers/toast/insets-container.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/providers/toast/lifecycle.context.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+
+/**
+ * Internal context that exposes the pending-removal lifecycle for web toasts.
+ *
+ * Web toasts stay mounted after `hide()` is dispatched so the CSS exit
+ * transition can play. The toast component reads `pendingRemovalIds` to
+ * flip its `data-state="closed"` attribute and calls `remove(id)` when
+ * the CSS transition completes (or a safety timeout fires).
+ *
+ * On native this context is provided but effectively unused — Reanimated's
+ * `exiting` layout animation plays before unmount, so nothing lingers.
+ *
+ * @internal
+ */
+
+export const ToastLifecycleContext = /*#__PURE__*/createContext(null);
+
+/**
+ * Access the toast lifecycle context.
+ *
+ * Returns `null` when the styled Toast is rendered outside a `ToastProvider`
+ * (e.g. in isolated unit tests) so callers must handle the null case.
+ *
+ * @internal
+ */
+export function useToastLifecycle() {
+  return useContext(ToastLifecycleContext);
+}
+//# sourceMappingURL=lifecycle.context.js.map

package/lib/module/providers/toast/lifecycle.context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","ToastLifecycleContext","useToastLifecycle"],"sourceRoot":"../../../../src","sources":["providers/toast/lifecycle.context.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA,OAAO,MAAMC,qBAAqB,gBAAGF,aAAa,CAAoC,IAAI,CAAC;;AAE3F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASG,iBAAiBA,CAAA,EAAsC;EACrE,OAAOF,UAAU,CAACC,qBAAqB,CAAC;AAC1C","ignoreList":[]}