@cdx-ui/primitives 0.0.1-alpha.21 → 0.0.1-alpha.23

package/src/dialog/createDialogRoot.tsx

@@ -0,0 +1,66 @@
+import type React from 'react';
+import { forwardRef, useCallback, useId, useMemo } from 'react';
+import { useControllableState } from '@cdx-ui/utils';
+import { dataAttributes } from '../utils/dataAttributes';
+import { DialogProvider } from './context';
+import type { IDialogRootProps } from './types';
+
+export const createDialogRoot = <T,>(BaseRoot: React.ComponentType<T>) =>
+  forwardRef(
+    (
+      {
+        open: openProp,
+        onOpenChange,
+        defaultOpen = false,
+        closeOnBackdropPress = true,
+        closeOnEscKey = true,
+        role = 'dialog',
+        children,
+        ...props
+      }: IDialogRootProps,
+      ref?: React.Ref<T>,
+    ) => {
+      const [open, setOpenState] = useControllableState<boolean>({
+        prop: openProp,
+        defaultProp: defaultOpen,
+        onChange: onOpenChange,
+      });
+
+      const setOpen = useCallback(
+        (newOpen: boolean) => {
+          setOpenState(newOpen);
+        },
+        [setOpenState],
+      );
+
+      const id = useId();
+      const nativeID = `dialog-${id}`;
+
+      const contextValue = useMemo(
+        () => ({
+          open: open ?? false,
+          onOpenChange: setOpen,
+          closeOnBackdropPress,
+          closeOnEscKey,
+          nativeID,
+          role,
+        }),
+        [open, setOpen, closeOnBackdropPress, closeOnEscKey, nativeID, role],
+      );
+
+      return (
+        <DialogProvider value={contextValue}>
+          <BaseRoot
+            ref={ref}
+            {...(props as T)}
+            {...dataAttributes({
+              slot: 'dialog',
+              state: open ? 'open' : 'closed',
+            })}
+          >
+            {children}
+          </BaseRoot>
+        </DialogProvider>
+      );
+    },
+  );

package/src/dialog/createDialogTitle.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import type { IDialogTitleProps } from './types';
+
+export const createDialogTitle = <T,>(BaseTitle: React.ComponentType<T>) =>
+  forwardRef<unknown, IDialogTitleProps>(({ children, ...props }, ref) => {
+    return (
+      <BaseTitle ref={ref} {...(props as T)}>
+        {children}
+      </BaseTitle>
+    );
+  });

package/src/dialog/createDialogTrigger.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import type { IDialogTriggerProps } from './types';
+import { useDialog } from './context';
+
+export const createDialogTrigger = <T,>(BaseTrigger: React.ComponentType<T>) =>
+  forwardRef(
+    ({ asChild = false, children, onPress, ...props }: IDialogTriggerProps, ref?: React.Ref<T>) => {
+      const { onOpenChange } = useDialog();
+
+      const handlePress = (e?: any) => {
+        onPress?.(e);
+        onOpenChange(true);
+      };
+
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+          onPress: handlePress,
+        });
+      }
+
+      return (
+        <BaseTrigger ref={ref} {...(props as T)} onPress={handlePress}>
+          {children}
+        </BaseTrigger>
+      );
+    },
+  );

package/src/dialog/index.tsx

@@ -0,0 +1,93 @@
+import type React from 'react';
+import { createDialogRoot } from './createDialogRoot';
+import { createDialogTrigger } from './createDialogTrigger';
+import { createDialogContent } from './createDialogContent';
+import { createDialogHeader } from './createDialogHeader';
+import { createDialogTitle } from './createDialogTitle';
+import { createDialogDescription } from './createDialogDescription';
+import { createDialogBody } from './createDialogBody';
+import { createDialogFooter } from './createDialogFooter';
+import { createDialogClose } from './createDialogClose';
+import { DialogProvider, useDialog } from './context';
+import type { IDialogComponentType } from './types';
+
+export { DialogProvider, useDialog };
+export type {
+  IDialogContextType,
+  IDialogRootProps,
+  IDialogTriggerProps,
+  IDialogContentProps,
+  IDialogOverlayProps,
+  IDialogHeaderProps,
+  IDialogTitleProps,
+  IDialogDescriptionProps,
+  IDialogBodyProps,
+  IDialogFooterProps,
+  IDialogCloseProps,
+} from './types';
+
+export function createDialog<
+  RootProps,
+  TriggerProps,
+  ContentProps,
+  OverlayProps,
+  HeaderProps,
+  TitleProps,
+  DescriptionProps,
+  BodyProps,
+  FooterProps,
+  CloseProps,
+>(BaseComponents: {
+  Root: React.ComponentType<RootProps>;
+  Trigger: React.ComponentType<TriggerProps>;
+  Content: React.ComponentType<ContentProps>;
+  Overlay: React.ComponentType<OverlayProps>;
+  Header: React.ComponentType<HeaderProps>;
+  Title: React.ComponentType<TitleProps>;
+  Description: React.ComponentType<DescriptionProps>;
+  Body: React.ComponentType<BodyProps>;
+  Footer: React.ComponentType<FooterProps>;
+  Close: React.ComponentType<CloseProps>;
+}) {
+  const Root = createDialogRoot(BaseComponents.Root);
+  const Trigger = createDialogTrigger(BaseComponents.Trigger);
+  const Content = createDialogContent(BaseComponents.Content, BaseComponents.Overlay);
+  const Header = createDialogHeader(BaseComponents.Header);
+  const Title = createDialogTitle(BaseComponents.Title);
+  const Description = createDialogDescription(BaseComponents.Description);
+  const Body = createDialogBody(BaseComponents.Body);
+  const Footer = createDialogFooter(BaseComponents.Footer);
+  const Close = createDialogClose(BaseComponents.Close);
+
+  Root.displayName = 'DialogPrimitive.Root';
+  Trigger.displayName = 'DialogPrimitive.Trigger';
+  Content.displayName = 'DialogPrimitive.Content';
+  Header.displayName = 'DialogPrimitive.Header';
+  Title.displayName = 'DialogPrimitive.Title';
+  Description.displayName = 'DialogPrimitive.Description';
+  Body.displayName = 'DialogPrimitive.Body';
+  Footer.displayName = 'DialogPrimitive.Footer';
+  Close.displayName = 'DialogPrimitive.Close';
+
+  return Object.assign(Root, {
+    Root,
+    Trigger,
+    Content,
+    Header,
+    Title,
+    Description,
+    Body,
+    Footer,
+    Close,
+  }) as IDialogComponentType<
+    RootProps,
+    TriggerProps,
+    ContentProps,
+    HeaderProps,
+    TitleProps,
+    DescriptionProps,
+    BodyProps,
+    FooterProps,
+    CloseProps
+  >;
+}

package/src/dialog/types.ts

@@ -0,0 +1,88 @@
+import type { PropsWithoutRef, RefAttributes } from 'react';
+import type { PressableProps, TextProps, ViewProps } from 'react-native';
+
+export interface IDialogContextType {
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly closeOnBackdropPress: boolean;
+  readonly closeOnEscKey: boolean;
+  readonly nativeID: string;
+  readonly role: 'dialog' | 'alertdialog';
+}
+
+export interface IDialogRootProps {
+  readonly open?: boolean;
+  readonly onOpenChange?: (open: boolean) => void;
+  readonly defaultOpen?: boolean;
+  readonly closeOnBackdropPress?: boolean;
+  readonly closeOnEscKey?: boolean;
+  readonly role?: 'dialog' | 'alertdialog';
+  readonly children: React.ReactNode;
+}
+
+export interface IDialogTriggerProps extends PressableProps {
+  readonly asChild?: boolean;
+}
+
+export interface IDialogContentProps extends ViewProps {
+  readonly forceMount?: boolean;
+}
+
+export interface IDialogOverlayProps extends PressableProps {}
+
+export interface IDialogHeaderProps extends ViewProps {}
+
+export interface IDialogTitleProps extends TextProps {}
+
+export interface IDialogDescriptionProps extends TextProps {}
+
+export interface IDialogBodyProps extends ViewProps {}
+
+export interface IDialogFooterProps extends ViewProps {}
+
+export interface IDialogCloseProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly accessibilityLabel?: string;
+}
+
+export type IDialogComponentType<
+  RootProps,
+  TriggerProps,
+  ContentProps,
+  HeaderProps,
+  TitleProps,
+  DescriptionProps,
+  BodyProps,
+  FooterProps,
+  CloseProps,
+  ContentRef = unknown,
+  TriggerRef = unknown,
+  CloseRef = unknown,
+> = React.ForwardRefExoticComponent<
+  PropsWithoutRef<RootProps & IDialogRootProps> & RefAttributes<unknown>
+> & {
+  Trigger: React.ForwardRefExoticComponent<
+    PropsWithoutRef<TriggerProps & IDialogTriggerProps> & RefAttributes<TriggerRef>
+  >;
+  Content: React.ForwardRefExoticComponent<
+    PropsWithoutRef<ContentProps & IDialogContentProps> & RefAttributes<ContentRef>
+  >;
+  Header: React.ForwardRefExoticComponent<
+    PropsWithoutRef<HeaderProps & IDialogHeaderProps> & RefAttributes<unknown>
+  >;
+  Title: React.ForwardRefExoticComponent<
+    PropsWithoutRef<TitleProps & IDialogTitleProps> & RefAttributes<unknown>
+  >;
+  Description: React.ForwardRefExoticComponent<
+    PropsWithoutRef<DescriptionProps & IDialogDescriptionProps> & RefAttributes<unknown>
+  >;
+  Body: React.ForwardRefExoticComponent<
+    PropsWithoutRef<BodyProps & IDialogBodyProps> & RefAttributes<unknown>
+  >;
+  Footer: React.ForwardRefExoticComponent<
+    PropsWithoutRef<FooterProps & IDialogFooterProps> & RefAttributes<unknown>
+  >;
+  Close: React.ForwardRefExoticComponent<
+    PropsWithoutRef<CloseProps & IDialogCloseProps> & RefAttributes<CloseRef>
+  >;
+};

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './avatar';
 export * from './button';
 export * from './checkbox';
+export * from './dialog';
 export * from './input';
 export * from './link';
 export { type EdgeInsets, OverlayInsetsProvider } from './overlay';

package/src/overlay/OverlayContainer.tsx

@@ -3,21 +3,13 @@ import {
   Modal,
   Platform,
   Pressable,
-  type StyleProp,
   StyleSheet,
   View,
+  type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import Animated, { type EntryOrExitLayoutType } from 'react-native-reanimated';
-
-let createPortalFn:
-  | ((children: React.ReactNode, container: Element) => React.ReactPortal)
-  | undefined;
-if (Platform.OS === 'web') {
-  try {
-    createPortalFn = require('react-dom').createPortal;
-  } catch {}
-}
+import { createPortalFn } from '../utils/createPortal';
 
 export interface OverlayContainerProps {
   onDismiss: () => void;

package/src/overlay/index.ts

@@ -2,6 +2,7 @@ export { OverlayContainer } from './OverlayContainer';
 export type { OverlayContainerProps } from './OverlayContainer';
 export { useAnchorPosition, type AnchorLayout } from './useAnchorPosition';
 export { useDismissOverlay } from './useDismissOverlay';
+export { useEscapeKey } from './useEscapeKey';
 export {
   useOverlayPosition,
   type OverlayPosition,

package/src/overlay/useEscapeKey.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+/**
+ * No-op on native — Escape key dismissal is not applicable.
+ * Native uses the system back gesture / hardware button via Modal.
+ */
+export function useEscapeKey(_open: boolean, _onEscape: () => void) {}

package/src/overlay/useEscapeKey.web.ts

@@ -0,0 +1,27 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Closes an overlay when the user presses the Escape key.
+ * Web-only — native platforms use Modal's `onRequestClose` for back/dismiss.
+ */
+export function useEscapeKey(open: boolean, onEscape: () => void) {
+  const onEscapeRef = useRef(onEscape);
+  onEscapeRef.current = onEscape;
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onEscapeRef.current();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+}

package/src/utils/createPortal.ts

@@ -0,0 +1,20 @@
+import type React from 'react';
+import { Platform } from 'react-native';
+
+type CreatePortalFn = (children: React.ReactNode, container: Element) => React.ReactPortal;
+
+/**
+ * A reference to `ReactDOM.createPortal` on web, `undefined` on native.
+ *
+ * Loaded lazily via `require` so that native bundles never reference
+ * `react-dom`, which would cause a build error on native platforms.
+ */
+export const createPortalFn: CreatePortalFn | undefined = (() => {
+  if (Platform.OS !== 'web') return undefined;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return (require('react-dom') as { createPortal: CreatePortalFn }).createPortal;
+  } catch {
+    return undefined;
+  }
+})();