@erquhart/heroui-native 1.0.0-beta.10.1

package/src/primitives/popover/popover.tsx

@@ -0,0 +1,394 @@
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+} from 'react';
+import {
+  BackHandler,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
+import {
+  useAugmentedRef,
+  useControllableState,
+  useRelativePosition,
+  type LayoutPosition,
+} from '../../helpers/hooks';
+import { Portal as PrimitivePortal } from '../portal';
+import * as Slot from '../slot';
+import type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  IRootContext,
+  OverlayProps,
+  OverlayRef,
+  PortalProps,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+} from './popover.types';
+
+const RootContext = React.createContext<IRootContext | null>(null);
+
+const useRootContext = () => {
+  const context = useContext(RootContext);
+  if (!context) {
+    throw new Error(
+      'Popover compound components cannot be rendered outside the Popover component'
+    );
+  }
+  return context;
+};
+
+const Root = forwardRef<RootRef, RootProps>(
+  (
+    {
+      asChild,
+      isOpen: isOpenProp,
+      isDefaultOpen,
+      onOpenChange: onOpenChangeProp,
+      closeDelay,
+      isDisabled,
+      ...viewProps
+    },
+    ref
+  ) => {
+    const [isOpen = false, onOpenChange] = useControllableState({
+      prop: isOpenProp,
+      defaultProp: isDefaultOpen,
+      onChange: onOpenChangeProp,
+    });
+    const [triggerPosition, setTriggerPosition] =
+      useState<LayoutPosition | null>(null);
+    const [contentLayout, setContentLayout] = useState<LayoutRectangle | null>(
+      null
+    );
+
+    const nativeID = useId();
+
+    const Component = asChild ? Slot.View : View;
+    return (
+      <RootContext.Provider
+        value={{
+          isOpen,
+          onOpenChange,
+          isDisabled,
+          contentLayout,
+          nativeID,
+          setContentLayout,
+          setTriggerPosition,
+          triggerPosition,
+          closeDelay,
+          isDefaultOpen,
+        }}
+      >
+        <Component ref={ref} {...viewProps} />
+      </RootContext.Provider>
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const Trigger = forwardRef<TriggerRef, TriggerProps>(
+  ({ asChild, onPress: onPressProp, isDisabled = false, ...props }, ref) => {
+    const {
+      onOpenChange,
+      isOpen,
+      isDisabled: isDisabledRoot,
+      setTriggerPosition,
+      closeDelay,
+      isDefaultOpen,
+      triggerPosition,
+    } = useRootContext();
+
+    const isDisabledValue = isDisabled ?? isDisabledRoot ?? undefined;
+
+    const augmentedRef = useAugmentedRef({
+      ref,
+      methods: {
+        open: () => {
+          onOpenChange(true);
+          augmentedRef.current?.measure(
+            (_x, _y, width, height, pageX, pageY) => {
+              setTriggerPosition({ width, pageX, pageY: pageY, height });
+            }
+          );
+        },
+        close: () => {
+          onOpenChange(false);
+          setTimeout(() => {
+            setTriggerPosition(null);
+          }, closeDelay);
+        },
+      },
+    });
+
+    // Open popover on mount if isDefaultOpen is true
+    useEffect(() => {
+      if (isDefaultOpen && !triggerPosition) {
+        // Use setTimeout to ensure the component is mounted and can be measured
+        const timeoutId = setTimeout(() => {
+          augmentedRef.current?.measure(
+            (_x, _y, width, height, pageX, pageY) => {
+              setTriggerPosition({ width, pageX, pageY: pageY, height });
+              onOpenChange(true);
+            }
+          );
+        }, 0);
+        return () => clearTimeout(timeoutId);
+      }
+      return undefined;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    function onPress(ev: GestureResponderEvent) {
+      if (isDisabledValue) return;
+      augmentedRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+        setTriggerPosition({ width, pageX, pageY: pageY, height });
+      });
+      onOpenChange(!isOpen);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={augmentedRef}
+        aria-disabled={isDisabledValue}
+        role="button"
+        onPress={onPress}
+        disabled={isDisabledValue}
+        {...props}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+/**
+ * @warning when using a custom `<PortalHost />`, you might have to adjust the Content's offset to account for nav elements like headers.
+ */
+function Portal({ forceMount, hostName, children }: PortalProps) {
+  const value = useRootContext();
+
+  if (!value.triggerPosition) {
+    return null;
+  }
+
+  if (!forceMount) {
+    if (!value.isOpen) {
+      return null;
+    }
+  }
+
+  return (
+    <PrimitivePortal hostName={hostName} name={`${value.nativeID}_portal`}>
+      <RootContext.Provider value={value}>{children}</RootContext.Provider>
+    </PrimitivePortal>
+  );
+}
+
+// --------------------------------------------------
+
+const Overlay = forwardRef<OverlayRef, OverlayProps>(
+  (
+    {
+      asChild,
+      forceMount,
+      onPress: OnPressProp,
+      closeOnPress = true,
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      isOpen,
+      onOpenChange,
+      setTriggerPosition,
+      setContentLayout,
+      closeDelay,
+    } = useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (closeOnPress) {
+        setTimeout(() => {
+          setTriggerPosition(null);
+          setContentLayout(null);
+        }, closeDelay);
+        onOpenChange(false);
+      }
+      OnPressProp?.(ev);
+    }
+
+    if (!forceMount) {
+      if (!isOpen) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+    return <Component ref={ref} onPress={onPress} {...props} />;
+  }
+);
+
+// --------------------------------------------------
+
+/**
+ * @info `position`, `top`, `left`, and `maxWidth` style properties are controlled internally. Opt out of this behavior by setting `disablePositioningStyle` to `true`.
+ */
+const Content = forwardRef<ContentRef, ContentProps>(
+  (
+    {
+      asChild = false,
+      forceMount,
+      align = 'start',
+      placement = 'bottom',
+      offset = 0,
+      alignOffset = 0,
+      avoidCollisions = true,
+      onLayout: onLayoutProp,
+      insets,
+      style,
+      disablePositioningStyle,
+      width = 'content-fit',
+      ...props
+    },
+    ref
+  ) => {
+    const {
+      isOpen,
+      onOpenChange,
+      contentLayout,
+      nativeID,
+      setContentLayout,
+      setTriggerPosition,
+      triggerPosition,
+      closeDelay,
+    } = useRootContext();
+
+    useEffect(() => {
+      const backHandler = BackHandler.addEventListener(
+        'hardwareBackPress',
+        () => {
+          setTimeout(() => {
+            setTriggerPosition(null);
+            setContentLayout(null);
+          }, closeDelay);
+
+          onOpenChange(false);
+          return true;
+        }
+      );
+
+      return () => {
+        setContentLayout(null);
+        backHandler.remove();
+      };
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const positionStyle = useRelativePosition({
+      align,
+      avoidCollisions,
+      triggerPosition,
+      contentLayout,
+      alignOffset,
+      insets,
+      offset,
+      placement,
+      disablePositioningStyle,
+    });
+
+    // Calculate content width based on width prop
+    const widthStyle: { width?: number | `${number}%` } = {};
+    if (width === 'trigger' && triggerPosition) {
+      widthStyle.width = triggerPosition.width;
+    } else if (width === 'full') {
+      widthStyle.width = '100%';
+    } else if (typeof width === 'number') {
+      widthStyle.width = width;
+    }
+    // 'content-fit' is default - no explicit width set
+
+    const flatStyle = StyleSheet.flatten([positionStyle, widthStyle, style]);
+
+    function onLayout(event: LayoutChangeEvent) {
+      setContentLayout(event.nativeEvent.layout);
+      onLayoutProp?.(event);
+    }
+
+    if (!forceMount) {
+      if (!isOpen) {
+        return null;
+      }
+    }
+
+    const Component = asChild ? Slot.View : View;
+
+    return (
+      <Component
+        ref={ref}
+        role="dialog"
+        nativeID={nativeID}
+        aria-modal={true}
+        style={flatStyle}
+        onLayout={onLayout}
+        {...props}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+const Close = forwardRef<CloseRef, CloseProps>(
+  ({ asChild, onPress: onPressProp, disabled = false, ...props }, ref) => {
+    const { onOpenChange, setContentLayout, setTriggerPosition, closeDelay } =
+      useRootContext();
+
+    function onPress(ev: GestureResponderEvent) {
+      if (disabled) return;
+      setTimeout(() => {
+        setTriggerPosition(null);
+        setContentLayout(null);
+      }, closeDelay);
+      onOpenChange(false);
+      onPressProp?.(ev);
+    }
+
+    const Component = asChild ? Slot.Pressable : Pressable;
+
+    return (
+      <Component
+        ref={ref}
+        aria-disabled={disabled ?? undefined}
+        role="button"
+        onPress={onPress}
+        disabled={disabled ?? undefined}
+        {...props}
+      />
+    );
+  }
+);
+
+// --------------------------------------------------
+
+Root.displayName = 'HeroUINative.Popover.Root';
+Trigger.displayName = 'HeroUINative.Popover.Trigger';
+Overlay.displayName = 'HeroUINative.Popover.Overlay';
+Content.displayName = 'HeroUINative.Popover.Content';
+Close.displayName = 'HeroUINative.Popover.Close';
+
+export { Close, Content, Overlay, Portal, Root, Trigger, useRootContext };

package/src/primitives/popover/popover.types.ts

@@ -0,0 +1,202 @@
+import type { LayoutRectangle } from 'react-native';
+import type { LayoutPosition } from '../../helpers/hooks';
+import type {
+  ForceMountable,
+  PositionedContentProps,
+  PressableRef,
+  SlottablePressableProps,
+  SlottableViewProps,
+  ViewRef,
+} from '../../helpers/types';
+
+/**
+ * Popover internal state
+ */
+type PopoverState = 'idle' | 'open' | 'close';
+
+/**
+ * Content sizing strategy
+ * - 'content-fit': Auto-size to content width (default)
+ * - 'trigger': Match trigger width exactly
+ * - 'full': 100% width
+ * - number: Fixed width in pixels
+ */
+type ContentSizing = 'trigger' | 'content-fit' | 'full' | number;
+
+/**
+ * Internal context interface for managing popover state and positioning
+ */
+interface IRootContext {
+  /**
+   * Whether the popover is currently open
+   */
+  isOpen: boolean;
+  /**
+   * Callback to change the open state of the popover
+   */
+  onOpenChange: (open: boolean) => void;
+  /**
+   * Whether the popover should be open by default (uncontrolled mode)
+   */
+  isDefaultOpen?: boolean;
+  /**
+   * Whether the popover is disabled
+   */
+  isDisabled?: boolean;
+  /**
+   * The position of the trigger element relative to the viewport
+   */
+  triggerPosition: LayoutPosition | null;
+  /**
+   * Updates the trigger element's position
+   */
+  setTriggerPosition: (triggerPosition: LayoutPosition | null) => void;
+  /**
+   * The layout measurements of the popover content
+   */
+  contentLayout: LayoutRectangle | null;
+  /**
+   * Updates the content layout measurements
+   */
+  setContentLayout: (contentLayout: LayoutRectangle | null) => void;
+  /**
+   * Unique identifier for the popover instance
+   */
+  nativeID: string;
+  /**
+   * Delay in milliseconds before the popover closes
+   */
+  closeDelay?: number;
+}
+
+/**
+ * Props for the Popover Root component
+ */
+type RootProps = SlottableViewProps & {
+  /**
+   * The controlled open state of the popover
+   */
+  isOpen?: boolean;
+  /**
+   * The open state of the popover when initially rendered (uncontrolled)
+   */
+  isDefaultOpen?: boolean;
+  /**
+   * Callback fired when the popover open state changes
+   * @param open - Whether the popover is open or closed
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Delay in milliseconds before the popover closes (for exit animations)
+   * @default 300
+   */
+  closeDelay?: number;
+  /**
+   * Whether the popover is disabled
+   */
+  isDisabled?: boolean;
+};
+/**
+ * Props for the Popover Portal component
+ */
+interface PortalProps extends ForceMountable {
+  /**
+   * The content to render within the portal
+   */
+  children: React.ReactNode;
+  /**
+   * Optional name of the host element for the portal
+   */
+  hostName?: string;
+}
+
+/**
+ * Props for the Popover Overlay component
+ */
+type OverlayProps = ForceMountable &
+  SlottablePressableProps & {
+    /**
+     * Whether to close the popover when the overlay is pressed
+     * @default true
+     */
+    closeOnPress?: boolean;
+  };
+
+/**
+ * Props for the Popover Trigger component
+ */
+type TriggerProps = Omit<SlottablePressableProps, 'disabled'> & {
+  isDisabled?: boolean;
+};
+
+/**
+ * Props for the Popover Content component
+ */
+type ContentProps = SlottableViewProps &
+  PositionedContentProps & {
+    /**
+     * Content width sizing strategy
+     * - 'content-fit': Auto-size to content width (default)
+     * - 'trigger': Match trigger width exactly
+     * - 'full': 100% width
+     * - number: Fixed width in pixels
+     * @default 'content-fit'
+     */
+    width?: ContentSizing;
+  };
+
+/**
+ * Props for the Popover Close component
+ */
+type CloseProps = SlottablePressableProps;
+
+/**
+ * Ref type for the Popover Close component
+ */
+type CloseRef = PressableRef;
+
+/**
+ * Ref type for the Popover Content component
+ */
+type ContentRef = ViewRef;
+
+/**
+ * Ref type for the Popover Overlay component
+ */
+type OverlayRef = PressableRef;
+
+/**
+ * Ref type for the Popover Root component
+ */
+type RootRef = ViewRef;
+
+/**
+ * Ref type for the Popover Trigger component
+ */
+type TriggerRef = PressableRef & {
+  /**
+   * Programmatically open the popover
+   */
+  open: () => void;
+  /**
+   * Programmatically close the popover
+   */
+  close: () => void;
+};
+
+export type {
+  CloseProps,
+  CloseRef,
+  ContentProps,
+  ContentRef,
+  ContentSizing,
+  IRootContext,
+  OverlayProps,
+  OverlayRef,
+  PopoverState,
+  PortalProps,
+  RootProps,
+  RootRef,
+  TriggerProps,
+  TriggerRef,
+};

package/src/primitives/portal/index.ts

@@ -0,0 +1 @@
+export * from './portal';

package/src/primitives/portal/portal.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { useEffect, useSyncExternalStore } from 'react';
+import { Platform, type View, type ViewStyle } from 'react-native';
+
+const DEFAULT_PORTAL_HOST = 'HEROUI_NATIVE_DEFAULT_HOST_NAME';
+
+type PortalMap = Map<string, React.ReactNode>;
+type PortalHostMap = Map<string, PortalMap>;
+
+type PortalStore = {
+  map: PortalHostMap;
+  listeners: Set<() => void>;
+};
+
+const store: PortalStore = {
+  map: new Map<string, PortalMap>().set(
+    DEFAULT_PORTAL_HOST,
+    new Map<string, React.ReactNode>()
+  ),
+  listeners: new Set(),
+};
+
+// --------------------------------------------------
+
+function emit() {
+  for (const cb of store.listeners) cb();
+}
+
+function getSnapshot() {
+  return store.map;
+}
+
+function subscribe(cb: () => void) {
+  store.listeners.add(cb);
+  return () => {
+    store.listeners.delete(cb);
+  };
+}
+
+function updatePortal(
+  hostName: string,
+  name: string,
+  children: React.ReactNode
+) {
+  const next = new Map(store.map);
+  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+  portal.set(name, children);
+  next.set(hostName, portal);
+  store.map = next;
+  emit();
+}
+
+function removePortal(hostName: string, name: string) {
+  const next = new Map(store.map);
+  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+  portal.delete(name);
+  next.set(hostName, portal);
+  store.map = next;
+  emit();
+}
+
+// --------------------------------------------------
+
+export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
+  const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
+  if (portalMap.size === 0) return null;
+  return <>{Array.from(portalMap.values())}</>;
+}
+
+// --------------------------------------------------
+
+export function Portal({
+  name,
+  hostName = DEFAULT_PORTAL_HOST,
+  children,
+}: {
+  name: string;
+  hostName?: string;
+  children: React.ReactNode;
+}) {
+  useEffect(() => {
+    updatePortal(hostName, name, children);
+  }, [hostName, name, children]);
+
+  useEffect(() => {
+    return () => {
+      removePortal(hostName, name);
+    };
+  }, [hostName, name]);
+
+  return null;
+}
+
+// --------------------------------------------------
+
+const ROOT: ViewStyle = {
+  flex: 1,
+};
+
+/**
+ * @deprecated use `FullWindowOverlay` from `react-native-screens` instead
+ * @example
+import { FullWindowOverlay } from "react-native-screens"
+const WindowOverlay = Platform.OS === "ios" ? FullWindowOverlay : Fragment
+// Wrap the `<PortalHost/>` with `<WindowOverlay/>`
+<WindowOverlay><PortalHost/></WindowOverlay>
+ */
+export function useModalPortalRoot() {
+  const ref = React.useRef<View>(null);
+  const [offset, setSideOffSet] = React.useState(0);
+
+  const onLayout = React.useCallback(() => {
+    if (Platform.OS === 'web') return;
+    ref.current?.measure((_x, _y, _width, _height, _pageX, pageY) => {
+      setSideOffSet(-pageY);
+    });
+  }, []);
+
+  return {
+    ref,
+    offset,
+    onLayout,
+    style: ROOT,
+  };
+}

package/src/primitives/radio-group/index.ts

@@ -0,0 +1,2 @@
+export * from './radio-group';
+export * from './radio-group.types';