@cdx-ui/components 0.0.1-beta.14 → 0.0.1-beta.141

package/lib/module/components/Dialog/index.js

@@ -1,53 +1,33 @@
 "use strict";
 
-import { forwardRef } from 'react';
-import { Pressable, Text, View } from 'react-native';
-import { Close as CloseIcon } from '@cdx-ui/icons';
-import { createDialog } from '@cdx-ui/primitives';
-import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { forwardRef, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { KeyboardAvoidingView, Platform, StyleSheet, Text, View } from 'react-native';
+import { GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useSharedValue } from 'react-native-reanimated';
+import { CheckCircle, Close as CloseIcon, EmergencyHome, Warning } from '@cdx-ui/icons';
+import { DialogClose as DialogClosePrimitive, DialogContent as DialogContentPrimitive, DialogOverlay as DialogOverlayPrimitive, DialogPortal as DialogPortalPrimitive, DialogRoot as DialogRootPrimitive, DialogTrigger as DialogTriggerPrimitive, FullWindowOverlay, Slot, dataAttributes, mergeDataAttributes, useDialog } from '@cdx-ui/primitives';
+import { cn, mergeRefs, ParentContext, useParentContext, useStyleContext } from '@cdx-ui/utils';
+import { usePopupDialogContentAnimation, usePopupOverlayAnimation, usePopupRootAnimation } from '../../animation';
+import { AnimationSettingsProvider, useAnimationSettings } from '../../providers/animation-settings';
 import { Icon } from '../Icon';
-import { dialogBodyVariants, dialogCloseIconVariants, dialogCloseVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants } from './styles';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogAnimationProvider, useDialogAnimation } from './animation';
+import { dialogCloseIconVariants, dialogCloseVariants, dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogPopupVariants, dialogPortalVariants, dialogTextVariants, dialogTitleIconVariants, dialogTitleVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export { useDialog } from '@cdx-ui/primitives';
-
+const IS_WEB = Platform.OS === 'web';
+const WEB_TRANSITION_SAFETY_MS = 300;
 // =============================================================================
 // STYLE CONTEXT
 // =============================================================================
 
 const SCOPE = 'DIALOG';
-const Root = withStyleContext(View, SCOPE);
 const useDialogStyleContext = () => useStyleContext(SCOPE);
 
 // =============================================================================
-// STYLED OVERLAY (internal — not consumer-facing)
+// ANIMATED PRIMITIVES
 // =============================================================================
 
-const StyledOverlay = /*#__PURE__*/forwardRef(({
-  className,
-  ...props
-}, ref) => /*#__PURE__*/_jsx(Pressable, {
-  ref: ref,
-  className: cn(dialogOverlayVariants(), className),
-  ...props
-}));
-StyledOverlay.displayName = 'Dialog.Overlay';
-
-// =============================================================================
-// CREATE DIALOG PRIMITIVE
-// =============================================================================
-
-const DialogPrimitive = createDialog({
-  Root,
-  Trigger: Pressable,
-  Overlay: StyledOverlay,
-  Content: View,
-  Header: View,
-  Title: Text,
-  Description: Text,
-  Body: View,
-  Footer: View,
-  Close: Pressable
-});
+const AnimatedOverlay = Animated.createAnimatedComponent(DialogOverlayPrimitive);
 
 // =============================================================================
 // STYLED ROOT
@@ -55,20 +35,57 @@ const DialogPrimitive = createDialog({
 
 const DialogRoot = /*#__PURE__*/forwardRef(({
   size = 'md',
+  fullBleed = false,
+  animation,
   className,
   children,
   style,
   ...props
-}, ref) => /*#__PURE__*/_jsx(DialogPrimitive, {
-  ref: ref,
-  className: className,
-  style: style,
-  context: {
-    size
-  },
-  ...props,
-  children: children
-}));
+}, ref) => {
+  const parent = useParentContext();
+  const ctx = useMemo(() => ({
+    ...parent,
+    [SCOPE]: {
+      size,
+      fullBleed
+    }
+  }), [parent, size, fullBleed]);
+  const {
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    isAllAnimationsDisabled
+  } = usePopupRootAnimation({
+    animation
+  });
+  const animationContextValue = useMemo(() => ({
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning
+  }), [progress, isDragging, isGestureReleaseAnimationRunning]);
+  const animationSettingsContextValue = useMemo(() => ({
+    isAllAnimationsDisabled
+  }), [isAllAnimationsDisabled]);
+  return /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+    value: animationSettingsContextValue,
+    children: /*#__PURE__*/_jsx(DialogAnimationProvider, {
+      value: animationContextValue,
+      children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/_jsx(DialogRootPrimitive, {
+          ref: ref,
+          className: className,
+          style: style,
+          ...props,
+          ...mergeDataAttributes(props, dataAttributes({
+            slot: 'dialog'
+          })),
+          children: children
+        })
+      })
+    })
+  });
+});
 DialogRoot.displayName = 'Dialog';
 
 // =============================================================================
@@ -80,143 +97,442 @@ const DialogTrigger = /*#__PURE__*/forwardRef(({
   children,
   style,
   ...props
-}, ref) => /*#__PURE__*/_jsx(DialogPrimitive.Trigger, {
+}, ref) => /*#__PURE__*/_jsx(DialogTriggerPrimitive, {
   ref: ref,
   className: className,
   style: style,
   ...props,
+  ...mergeDataAttributes(props, dataAttributes({
+    slot: 'dialog-trigger'
+  })),
   children: children
 }));
 DialogTrigger.displayName = 'Dialog.Trigger';
 
 // =============================================================================
-// STYLED CONTENT
+// STYLED POPUP (portal + overlay + content composition)
 // =============================================================================
 
-const DialogContent = /*#__PURE__*/forwardRef(({
+const DialogPopup = /*#__PURE__*/forwardRef(({
   size: sizeProp,
   className,
   children,
   style,
+  forceMount = false,
+  avoidKeyboard = true,
+  keyboardVerticalOffset = 0,
+  disableFullWindowOverlay = false,
+  isSwipeable = true,
   ...props
 }, ref) => {
   const {
     size: contextSize
   } = useDialogStyleContext();
   const size = sizeProp ?? contextSize;
-  const computedClassName = cn(dialogContentVariants({
+  const {
+    open,
+    onOpenChange
+  } = useDialog();
+  const parentContext = useParentContext();
+  const animationContext = useDialogAnimation();
+  const parentAnimationSettings = useAnimationSettings();
+  const fallbackProgress = useSharedValue(0);
+  const fallbackIsDragging = useSharedValue(false);
+  const fallbackIsGestureReleaseAnimationRunning = useSharedValue(false);
+  const progress = animationContext?.progress ?? fallbackProgress;
+  const isDragging = animationContext?.isDragging ?? fallbackIsDragging;
+  const isGestureReleaseAnimationRunning = animationContext?.isGestureReleaseAnimationRunning ?? fallbackIsGestureReleaseAnimationRunning;
+  const {
+    rContainerStyle,
+    entering: overlayEntering,
+    exiting: overlayExiting
+  } = usePopupOverlayAnimation({
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning
+  });
+  const {
+    contentY,
+    contentHeight,
+    panGesture,
+    rDragContainerStyle,
+    entering: contentEntering,
+    exiting: contentExiting
+  } = usePopupDialogContentAnimation({
+    isOpen: open,
+    progress,
+    isDragging,
+    isGestureReleaseAnimationRunning,
+    onOpenChange,
+    isSwipeable
+  });
+  const dragContainerRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!open || IS_WEB) return;
+    dragContainerRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+      contentY.set(pageY);
+      contentHeight.set(height);
+    });
+  }, [open, contentY, contentHeight]);
+
+  // ---- Web enter/exit lifecycle ----
+  // Mirrors the Toast pattern: mount → 'entering' → (rAF) → 'open' → (close)
+  // → 'closed' → (transitionend) → unmount.
+  //
+  // Critical: `isExiting` is derived synchronously (via ref tracking the previous
+  // `open` value) so the component stays mounted in the SAME render that sees
+  // `open` go false — if we used useEffect the component would return null before
+  // the effect fires.
+  //
+  // The transitionend listener targets the popup element (via popupRef) instead of
+  // the portal wrapper. CSS exit transitions live on the overlay and popup children,
+  // not the wrapper — listening on the wrapper would unmount on the first bubbled
+  // event, potentially cutting the other child's animation short.
+  const wrapperRef = useRef(null);
+  const popupRef = useRef(null);
+  const prevOpenRef = useRef(open);
+  const [isExiting, setIsExiting] = useState(false);
+  const [webState, setWebState] = useState(open ? 'entering' : 'closed');
+
+  // Detect open → false transition synchronously during render
+  if (IS_WEB && prevOpenRef.current && !open && !isExiting) {
+    setIsExiting(true);
+    setWebState('closed');
+  }
+  // Detect closed → open transition synchronously during render
+  if (IS_WEB && !prevOpenRef.current && open) {
+    setIsExiting(false);
+    setWebState('entering');
+  }
+  prevOpenRef.current = open;
+
+  // Entrance: commit 'entering' on first paint, then transition to 'open'
+  useEffect(() => {
+    if (!IS_WEB || !open) return;
+    const raf = requestAnimationFrame(() => {
+      setWebState('open');
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+
+  // Exit: wait for CSS transition to finish, then unmount.
+  // Listens on the popup element directly — its exit transitions (opacity +
+  // transform) are at least as long as the overlay's, so when the popup
+  // finishes both children are done animating.
+  useEffect(() => {
+    if (!IS_WEB || !isExiting) return;
+    const node = popupRef.current;
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      setIsExiting(false);
+    };
+    const safetyTimer = setTimeout(finish, WEB_TRANSITION_SAFETY_MS);
+    if (!node || typeof node.addEventListener !== 'function') {
+      return () => {
+        clearTimeout(safetyTimer);
+      };
+    }
+    const handler = event => {
+      if (event.target !== node) return;
+      const propertyName = event.propertyName ?? '';
+      if (propertyName === 'opacity' || propertyName === 'transform') {
+        finish();
+      }
+    };
+    node.addEventListener('transitionend', handler);
+    return () => {
+      clearTimeout(safetyTimer);
+      node.removeEventListener('transitionend', handler);
+    };
+  }, [isExiting]);
+  const dataState = webState;
+  const shouldMount = IS_WEB ? open || isExiting : open;
+  if (!forceMount && !shouldMount) {
+    return null;
+  }
+  const portalClassName = cn(dialogPortalVariants());
+  const overlayClassName = cn(dialogOverlayVariants());
+  const popupClassName = cn(dialogPopupVariants({
     size
   }), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Content, {
-    ref: ref,
-    className: computedClassName,
-    style: style,
-    ...props,
-    children: children
+  const keyboardBehavior = avoidKeyboard ? Platform.select({
+    ios: 'padding',
+    default: 'height'
+  }) : undefined;
+  return /*#__PURE__*/_jsx(DialogPortalPrimitive, {
+    forceMount: true,
+    children: /*#__PURE__*/_jsx(ParentContext.Provider, {
+      value: parentContext,
+      children: /*#__PURE__*/_jsx(AnimationSettingsProvider, {
+        value: parentAnimationSettings,
+        children: /*#__PURE__*/_jsx(DialogAnimationProvider, {
+          value: animationContext,
+          children: /*#__PURE__*/_jsx(FullWindowOverlay, {
+            disableFullWindowOverlay: disableFullWindowOverlay,
+            unstable_accessibilityContainerViewIsModal: true,
+            children: /*#__PURE__*/_jsxs(Animated.View, {
+              ref: wrapperRef,
+              className: portalClassName,
+              pointerEvents: "box-none",
+              ...(IS_WEB ? dataAttributes({
+                state: dataState
+              }) : undefined),
+              children: [/*#__PURE__*/_jsx(Animated.View, {
+                entering: overlayEntering,
+                exiting: overlayExiting,
+                style: StyleSheet.absoluteFill,
+                children: /*#__PURE__*/_jsx(AnimatedOverlay, {
+                  forceMount: true,
+                  className: overlayClassName,
+                  style: IS_WEB ? undefined : rContainerStyle,
+                  ...(IS_WEB ? dataAttributes({
+                    state: dataState
+                  }) : undefined)
+                })
+              }), /*#__PURE__*/_jsx(GestureDetector, {
+                gesture: panGesture,
+                children: /*#__PURE__*/_jsx(Animated.View, {
+                  ref: dragContainerRef,
+                  style: internalStyles.fill,
+                  pointerEvents: "box-none",
+                  entering: contentEntering,
+                  exiting: contentExiting,
+                  children: /*#__PURE__*/_jsx(Animated.View, {
+                    style: IS_WEB ? internalStyles.fill : [internalStyles.fill, rDragContainerStyle],
+                    pointerEvents: "box-none",
+                    children: /*#__PURE__*/_jsx(KeyboardAvoidingView, {
+                      style: internalStyles.center,
+                      pointerEvents: "box-none",
+                      behavior: keyboardBehavior,
+                      keyboardVerticalOffset: keyboardVerticalOffset,
+                      children: /*#__PURE__*/_jsx(DialogContentPrimitive, {
+                        ref: mergeRefs(ref, popupRef),
+                        forceMount: true,
+                        className: popupClassName,
+                        style: style,
+                        ...props,
+                        ...mergeDataAttributes(props, dataAttributes({
+                          slot: 'dialog-popup'
+                        }), IS_WEB ? dataAttributes({
+                          state: dataState
+                        }) : undefined),
+                        children: children
+                      })
+                    })
+                  })
+                })
+              })]
+            })
+          })
+        })
+      })
+    })
   });
 });
-DialogContent.displayName = 'Dialog.Content';
+DialogPopup.displayName = 'Dialog.Popup';
 
 // =============================================================================
-// STYLED HEADER
+// STYLED HEADER (styled-only sub-slot)
 // =============================================================================
 
 const DialogHeader = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
   const computedClassName = cn(dialogHeaderVariants(), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Header, {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-header'
+    })),
     children: children
   });
 });
 DialogHeader.displayName = 'Dialog.Header';
 
 // =============================================================================
-// STYLED TITLE
+// STYLED TITLE (styled-only sub-slot with severity variants)
 // =============================================================================
 
+/** @deprecated Use `severity` prop instead of `appearance`. */
+
+let hasWarnedDialogAppearanceProp = false;
+let hasWarnedDialogDefaultSeverity = false;
+const SEVERITY_ICON_MAP = {
+  danger: EmergencyHome,
+  warning: Warning,
+  success: CheckCircle
+};
 const DialogTitle = /*#__PURE__*/forwardRef(({
+  asChild,
+  severity: severityProp,
+  appearance,
   className,
   children,
   style,
   ...props
 }, ref) => {
-  const computedClassName = cn(dialogTitleVariants(), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Title, {
+  useEffect(() => {
+    if (__DEV__ && appearance !== undefined && !hasWarnedDialogAppearanceProp) {
+      hasWarnedDialogAppearanceProp = true;
+      console.warn('[Dialog.Title] The `appearance` prop is deprecated and will be removed in a future major release. Use `severity` instead.');
+    }
+  }, [appearance]);
+  const rawSeverity = severityProp ?? appearance ?? 'neutral';
+  useEffect(() => {
+    if (__DEV__ && rawSeverity === 'default' && !hasWarnedDialogDefaultSeverity) {
+      hasWarnedDialogDefaultSeverity = true;
+      console.warn('[Dialog.Title] The `default` severity value is deprecated and will be removed in a future major release. Use `neutral` instead.');
+    }
+  }, [rawSeverity]);
+  const severity = rawSeverity === 'default' ? 'neutral' : rawSeverity;
+  const computedClassName = cn(dialogTitleVariants({
+    severity
+  }), className);
+  const IconComponent = severity && severity in SEVERITY_ICON_MAP ? SEVERITY_ICON_MAP[severity] : null;
+  const Comp = asChild ? Slot : Text;
+  const titleElement = /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-title'
+    })),
     children: children
   });
+  if (IconComponent) {
+    return /*#__PURE__*/_jsxs(View, {
+      className: "flex-row items-center gap-1",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        as: IconComponent,
+        className: dialogTitleIconVariants({
+          severity
+        })
+      }), titleElement]
+    });
+  }
+  return titleElement;
 });
 DialogTitle.displayName = 'Dialog.Title';
 
 // =============================================================================
-// STYLED DESCRIPTION
+// STYLED DESCRIPTION (styled-only sub-slot — reads dialog context for nativeID)
 // =============================================================================
 
 const DialogDescription = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
+  const {
+    nativeID
+  } = useDialog();
   const computedClassName = cn(dialogDescriptionVariants(), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Description, {
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
+    nativeID: `${nativeID}-description`,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-description'
+    })),
     children: children
   });
 });
 DialogDescription.displayName = 'Dialog.Description';
 
 // =============================================================================
-// STYLED BODY
+// STYLED CONTENT (styled-only sub-slot — reads variant context for fullBleed)
+// =============================================================================
+
+const DialogContent = /*#__PURE__*/forwardRef(({
+  asChild,
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    fullBleed
+  } = useDialogStyleContext();
+  const computedClassName = cn(dialogContentVariants({
+    fullBleed: fullBleed ?? false
+  }), className);
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    className: computedClassName,
+    style: style,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-content'
+    })),
+    children: children
+  });
+});
+DialogContent.displayName = 'Dialog.Content';
+
+// =============================================================================
+// STYLED TEXT (convenience text styling, styled-only)
 // =============================================================================
 
-const DialogBody = /*#__PURE__*/forwardRef(({
+const DialogText = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
-  const computedClassName = cn(dialogBodyVariants(), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Body, {
+  const computedClassName = cn(dialogTextVariants(), className);
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-text'
+    })),
     children: children
   });
 });
-DialogBody.displayName = 'Dialog.Body';
+DialogText.displayName = 'Dialog.Text';
 
 // =============================================================================
-// STYLED FOOTER
+// STYLED FOOTER (styled-only sub-slot)
 // =============================================================================
 
 const DialogFooter = /*#__PURE__*/forwardRef(({
+  asChild,
   className,
   children,
   style,
   ...props
 }, ref) => {
   const computedClassName = cn(dialogFooterVariants(), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Footer, {
+  const Comp = asChild ? Slot : View;
+  return /*#__PURE__*/_jsx(Comp, {
     ref: ref,
     className: computedClassName,
     style: style,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-footer'
+    })),
     children: children
   });
 });
@@ -234,7 +550,7 @@ const DialogClose = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const computedClassName = cn(dialogCloseVariants(), className);
-  return /*#__PURE__*/_jsx(DialogPrimitive.Close, {
+  return /*#__PURE__*/_jsx(DialogClosePrimitive, {
     ref: ref,
     className: computedClassName,
     style: style,
@@ -242,6 +558,9 @@ const DialogClose = /*#__PURE__*/forwardRef(({
     accessibilityRole: "button",
     accessibilityLabel: accessibilityLabel,
     ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'dialog-close'
+    })),
     children: children ?? /*#__PURE__*/_jsx(Icon, {
       as: CloseIcon,
       className: dialogCloseIconVariants()
@@ -256,12 +575,28 @@ DialogClose.displayName = 'Dialog.Close';
 
 export const Dialog = Object.assign(DialogRoot, {
   Trigger: DialogTrigger,
-  Content: DialogContent,
+  Popup: DialogPopup,
   Header: DialogHeader,
   Title: DialogTitle,
   Description: DialogDescription,
-  Body: DialogBody,
+  Content: DialogContent,
+  Text: DialogText,
   Footer: DialogFooter,
   Close: DialogClose
 });
+
+// =============================================================================
+// INTERNAL STYLES
+// =============================================================================
+
+const internalStyles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
 //# sourceMappingURL=index.js.map