@brand-map/primitives 0.0.0-broken.0

package/src/dialog/dialog.tsx

@@ -0,0 +1,286 @@
+import { createContext, forwardRef, useId, useContext, useEffect } from "react";
+import { BackHandler, GestureResponderEvent, Pressable, Text, View } from "react-native";
+
+import { useControllableState } from "../hooks";
+import { Portal as BrandMapPrimitivesPortal } from "../portal";
+import * as Slot from "../slot";
+import { RenderViewProps } from "../types";
+
+import type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  DescriptionProps,
+  DescriptionRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootContext,
+  RootProps,
+  TitleProps,
+  TitleRef,
+  TriggerProps,
+  TriggerRef,
+} from "./types";
+
+const DialogContext = createContext<(RootContext & { nativeID: string }) | null>(null);
+
+function useRootContext() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error("Dialog compound components cannot be rendered outside the Dialog component");
+  }
+  return context;
+}
+
+const Root = ({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, children }: RootProps) => {
+  const nativeID = useId();
+
+  const [open = false, onOpenChange] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChangeProp,
+  });
+
+  return <DialogContext.Provider value={{ open, onOpenChange, nativeID }}>{children}</DialogContext.Provider>;
+};
+Root.displayName = "RootNativeDialog";
+
+const Popup = ({ render, ref, ...props }: RenderViewProps) => {
+  if (render) {
+    return (
+      <Slot.View
+        render={render}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <View
+      ref={ref}
+      {...props}
+    />
+  );
+};
+Popup.displayName = "PopupNativeDialog";
+
+const Trigger = forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { open, onOpenChange } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (disabled) return;
+    const newValue = !open;
+    onOpenChange(newValue);
+    onPressProp?.(ev);
+  }
+
+  if (render) {
+    return (
+      <Slot.Pressable
+        render={render}
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role="button"
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <Pressable
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+Trigger.displayName = "TriggerNativeDialog";
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's sideOffset to account for nav elements like headers.
+ */
+function Portal({ keepMounted, hostName, children }: PortalProps) {
+  const rootContext = useRootContext();
+
+  if (!keepMounted) {
+    if (!rootContext.open) {
+      return null;
+    }
+  }
+
+  return (
+    <BrandMapPrimitivesPortal
+      hostName={hostName}
+      name={`${rootContext.nativeID}-portal`}
+    >
+      <DialogContext.Provider value={rootContext}>{children}</DialogContext.Provider>
+    </BrandMapPrimitivesPortal>
+  );
+}
+
+const Backdrop = forwardRef<BackdropRef, BackdropProps>(({ keepMounted, closeOnPress = true, onPress: OnPressProp, ...props }, ref) => {
+  const { open, onOpenChange } = useRootContext();
+
+  function onPress(ev: GestureResponderEvent) {
+    if (closeOnPress) {
+      onOpenChange(!open);
+    }
+    OnPressProp?.(ev);
+  }
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  if (render) {
+    return (
+      <Slot.Pressable
+        render={render}
+        ref={ref}
+        onPress={onPress}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={onPress}
+      {...props}
+    />
+  );
+});
+
+Backdrop.displayName = "BackdropNativeDialog";
+
+const Content = forwardRef<ContentRef, ContentProps>(({ keepMounted, ...props }, ref) => {
+  const { open, nativeID, onOpenChange } = useRootContext();
+
+  useEffect(() => {
+    const backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
+      onOpenChange(false);
+      return true;
+    });
+
+    return () => {
+      backHandler.remove();
+    };
+  }, []);
+
+  if (!keepMounted) {
+    if (!open) {
+      return null;
+    }
+  }
+
+  if (render) {
+    return (
+      <Slot.Pressable
+        render={render}
+        ref={ref}
+        role="dialog"
+        nativeID={nativeID}
+        aria-labelledby={`${nativeID}_label`}
+        aria-describedby={`${nativeID}_desc`}
+        aria-modal={true}
+        onStartShouldSetResponder={onStartShouldSetResponder}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <View
+      ref={ref}
+      role="dialog"
+      nativeID={nativeID}
+      aria-labelledby={`${nativeID}_label`}
+      aria-describedby={`${nativeID}_desc`}
+      aria-modal={true}
+      onStartShouldSetResponder={onStartShouldSetResponder}
+      {...props}
+    />
+  );
+});
+
+Content.displayName = "ContentNativeDialog";
+
+const Close = forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled = false, ...props }, ref) => {
+  const { onOpenChange } = useRootContext();
+
+  function onPress(event: GestureResponderEvent) {
+    if (disabled) return;
+    onOpenChange(false);
+    onPressProp?.(event);
+  }
+
+  if (render) {
+    return (
+      <Slot.Pressable
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role="button"
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+
+  return (
+    <Pressable
+      ref={ref}
+      aria-disabled={disabled ?? undefined}
+      role="button"
+      onPress={onPress}
+      disabled={disabled ?? undefined}
+      {...props}
+    />
+  );
+});
+
+Close.displayName = "CloseNativeDialog";
+
+const Title = forwardRef<TitleRef, TitleProps>((props, ref) => {
+  const { nativeID } = useRootContext();
+  return (
+    <Text
+      ref={ref}
+      role="heading"
+      nativeID={`${nativeID}_label`}
+      {...props}
+    />
+  );
+});
+
+Title.displayName = "TitleNativeDialog";
+
+const Description = forwardRef<DescriptionRef, DescriptionProps>((props, ref) => {
+  const { nativeID } = useRootContext();
+  return (
+    <Text
+      ref={ref}
+      nativeID={`${nativeID}_desc`}
+      {...props}
+    />
+  );
+});
+
+Description.displayName = "DescriptionNativeDialog";
+
+export { Close, Content, Description, Backdrop, Portal, Root, Title, Trigger, useRootContext };
+
+function onStartShouldSetResponder() {
+  return true;
+}

package/src/dialog/dialog.web.tsx

@@ -0,0 +1,215 @@
+// // @ts-nocheck
+
+// import * as Dialog from "@radix-ui/react-dialog";
+// import * as React from "react";
+// import { Pressable, Text, View, type GestureResponderEvent } from "react-native";
+
+// import { useAugmentedRef, useControllableState, useIsomorphicLayoutEffect } from "../hooks";
+// import * as Slot from "../slot";
+
+// import type {
+//   CloseProps,
+//   CloseRef,
+//   ContentProps,
+//   ContentRef,
+//   DescriptionProps,
+//   DescriptionRef,
+//   BackdropProps,
+//   BackdropRef,
+//   PortalProps,
+//   RootContext,
+//   RootProps,
+//   RootRef,
+//   TitleProps,
+//   TitleRef,
+//   TriggerProps,
+//   TriggerRef,
+// } from "./types";
+
+// const DialogContext = React.createContext<RootContext | null>(null);
+
+// const Root = React.forwardRef<RootRef, RootProps>(({ open: openProp, defaultOpen, onOpenChange: onOpenChangeProp, ...viewProps }, ref) => {
+//   const [open = false, onOpenChange] = useControllableState({
+//     prop: openProp,
+//     defaultProp: defaultOpen,
+//     onChange: onOpenChangeProp,
+//   });
+//
+//   return (
+//     <DialogContext.Provider value={{ open, onOpenChange }}>
+//       <Dialog.Root
+//         open={open}
+//         defaultOpen={defaultOpen}
+//         onOpenChange={onOpenChange}
+//       >
+//         <Component
+//           ref={ref}
+//           {...viewProps}
+//         />
+//       </Dialog.Root>
+//     </DialogContext.Provider>
+//   );
+// });
+
+// Root.displayName = "RootWebDialog";
+
+// function useRootContext() {
+//   const context = React.useContext(DialogContext);
+//   if (!context) {
+//     throw new Error("Dialog compound components cannot be rendered outside the Dialog component");
+//   }
+//   return context;
+// }
+
+// const Trigger = React.forwardRef<TriggerRef, TriggerProps>(({ onPress: onPressProp, role: _role, disabled, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { onOpenChange, open } = useRootContext();
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.dataset.state = open ? "open" : "closed";
+//       augRef.type = "button";
+//     }
+//   }, [open]);
+
+//
+//   return (
+//     <Dialog.Trigger
+//       disabled={disabled ?? undefined}
+//       render
+//     >
+//       <Component
+//         ref={augmentedRef}
+//         onPress={onPress}
+//         role="button"
+//         disabled={disabled}
+//         {...props}
+//       />
+//     </Dialog.Trigger>
+//   );
+// });
+
+// Trigger.displayName = "TriggerWebDialog";
+
+// function Portal({ keepMounted, container, children }: PortalProps) {
+//   return (
+//     <Dialog.Portal
+//       keepMounted={keepMounted}
+//       children={children}
+//       container={container}
+//     />
+//   );
+// }
+
+// const Backdrop = React.forwardRef<BackdropRef, BackdropProps>(({ keepMounted, ...props }, ref) => {
+//
+//   return (
+//     <Dialog.Backdrop keepMounted={keepMounted}>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Dialog.Backdrop>
+//   );
+// });
+
+// Backdrop.displayName = "BackdropWebDialog";
+
+// const Content = React.forwardRef<ContentRef, ContentProps>(
+//   ({ render, keepMounted, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onInteractOutside, onPointerDownOutside, ...props }, ref) => {
+//
+//     return (
+//       <Dialog.Content
+//         onOpenAutoFocus={onOpenAutoFocus}
+//         onCloseAutoFocus={onCloseAutoFocus}
+//         onEscapeKeyDown={onEscapeKeyDown}
+//         onInteractOutside={onInteractOutside}
+//         onPointerDownOutside={onPointerDownOutside}
+//         keepMounted={keepMounted}
+//       >
+//         <Component
+//           ref={ref}
+//           {...props}
+//         />
+//       </Dialog.Content>
+//     );
+//   },
+// );
+
+// Content.displayName = "ContentWebDialog";
+
+// const Close = React.forwardRef<CloseRef, CloseProps>(({ onPress: onPressProp, disabled, ...props }, ref) => {
+//   const augmentedRef = useAugmentedRef({ ref });
+//   const { onOpenChange, open } = useRootContext();
+
+//   function onPress(ev: GestureResponderEvent) {
+//     if (onPressProp) {
+//       onPressProp(ev);
+//     }
+//     onOpenChange(!open);
+//   }
+
+//   useIsomorphicLayoutEffect(() => {
+//     if (augmentedRef.current) {
+//       const augRef = augmentedRef.current as unknown as HTMLButtonElement;
+//       augRef.type = "button";
+//     }
+//   }, []);
+
+//
+//   return (
+//     <>
+//       <Dialog.Close
+//         disabled={disabled ?? undefined}
+//         render
+//       >
+//         <Component
+//           ref={augmentedRef}
+//           onPress={onPress}
+//           role="button"
+//           disabled={disabled}
+//           {...props}
+//         />
+//       </Dialog.Close>
+//     </>
+//   );
+// });
+
+// Close.displayName = "CloseWebDialog";
+
+// const Title = React.forwardRef<TitleRef, TitleProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Dialog.Title render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Dialog.Title>
+//   );
+// });
+
+// Title.displayName = "TitleWebDialog";
+
+// const Description = React.forwardRef<DescriptionRef, DescriptionProps>(({ ...props }, ref) => {
+//
+//   return (
+//     <Dialog.Description render>
+//       <Component
+//         ref={ref}
+//         {...props}
+//       />
+//     </Dialog.Description>
+//   );
+// });
+
+// Description.displayName = "DescriptionWebDialog";
+
+// export { Close, Content, Description, Backdrop, Portal, Root, Title, Trigger, useRootContext };

package/src/dialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./dialog";
+export * from "./types";

package/src/dialog/types.ts

@@ -0,0 +1,92 @@
+import type { KeepMountable, PressableRef, RenderPressableProps, RenderTextProps, RenderViewProps, TextRef, ViewRef } from "../types";
+
+type RootContext = {
+  open: boolean;
+  onOpenChange: (value: boolean) => void;
+};
+
+type RootProps = React.PropsWithChildren & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (value: boolean) => void;
+};
+
+interface PortalProps extends KeepMountable {
+  children: React.ReactNode;
+
+  /**
+   * @platform: NATIVE ONLY
+   */
+  hostName?: string;
+
+  /**
+   * @platform: WEB ONLY
+   */
+  container?: HTMLElement | null | undefined;
+}
+type BackdropProps = KeepMountable &
+  RenderPressableProps & {
+    /**
+     * @platform: NATIVE ONLY - default: true
+     */
+    closeOnPress?: boolean;
+  };
+type ContentProps = KeepMountable &
+  RenderViewProps & {
+    /**
+     * @platform: WEB ONLY
+     */
+    onOpenAutoFocus?: (ev: Event) => void;
+
+    /**
+     * @platform: WEB ONLY
+     */
+    onCloseAutoFocus?: (ev: Event) => void;
+
+    /**
+     * @platform: WEB ONLY
+     */
+    onEscapeKeyDown?: (ev: Event) => void;
+
+    /**
+     * @platform: WEB ONLY
+     */
+    onInteractOutside?: (ev: Event) => void;
+
+    /**
+     * @platform: WEB ONLY
+     */
+    onPointerDownOutside?: (ev: Event) => void;
+  };
+
+type TriggerProps = RenderPressableProps;
+type CloseProps = RenderPressableProps;
+type TitleProps = RenderTextProps;
+type DescriptionProps = RenderTextProps;
+
+type CloseRef = PressableRef;
+type ContentRef = ViewRef;
+type DescriptionRef = TextRef;
+type BackdropRef = PressableRef;
+type RootRef = ViewRef;
+type TitleRef = TextRef;
+type TriggerRef = PressableRef;
+
+export type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  DescriptionProps,
+  DescriptionRef,
+  BackdropProps,
+  BackdropRef,
+  PortalProps,
+  RootContext,
+  RootProps,
+  RootRef,
+  TitleProps,
+  TitleRef,
+  TriggerProps,
+  TriggerRef,
+};