bootstrap-rn 0.4.6 → 0.4.7

package/src/hooks/useAction.ts

@@ -1,78 +1,78 @@
-import type { UseToggleButtonProps } from '../components/buttons/useToggleButton';
-import type { UseToggleCollapseProps } from '../components/collapse/useToggleCollapse';
-import type { UseDismissDropdownProps } from '../components/dropdown/useDismissDropdown';
-import type { UseToggleDropdownProps } from '../components/dropdown/useToggleDropdown';
-import type { UseToggleTabProps } from '../components/nav/useToggleTab';
-import type { UseDismissNavbarProps } from '../components/navbar/useDismissNavbar';
-import type { UseToggleNavbarProps } from '../components/navbar/useToggleNavbar';
-import { concatRefs } from '../utils';
-
-interface UseToggleProps
-  extends UseToggleTabProps,
-    UseToggleNavbarProps,
-    UseToggleButtonProps,
-    UseToggleCollapseProps,
-    UseToggleDropdownProps {}
-
-interface UseDismissProps
-  extends UseDismissDropdownProps,
-    UseDismissNavbarProps {}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type ToggleFunction = <T>(props: T & UseToggleProps) => any;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type DismissFunction = <T>(props: T & UseDismissProps) => any;
-
-type ToggleType =
-  | ToggleFunction
-  | {
-      useToggle: ToggleFunction;
-    };
-
-type DismissType =
-  | DismissFunction
-  | {
-      useDismiss: DismissFunction;
-    };
-
-export interface UseActionProps extends UseToggleProps, UseDismissProps {
-  toggle?: ToggleType;
-  dismiss?: DismissType;
-}
-
-function getActionHook(toggle?: ToggleType, dismiss?: DismissType) {
-  if (toggle) {
-    return typeof toggle === 'function' ? toggle : toggle.useToggle;
-  }
-
-  if (dismiss) {
-    return typeof dismiss === 'function' ? dismiss : dismiss.useDismiss;
-  }
-
-  return null;
-}
-
-export default function useAction<T, P>(
-  props: UseActionProps & P,
-  ref: React.Ref<T>,
-) {
-  const { toggle, dismiss, ...restProps } = props;
-
-  const useActionHook = getActionHook(toggle, dismiss);
-
-  if (!useActionHook) {
-    return [restProps, ref] as const;
-  }
-
-  if (typeof useActionHook !== 'function') {
-    throw new Error('Action hook must be of type function.');
-  }
-
-  // TODO: Remove as and define return type on ActionFunction
-  const { ref: actionRef, ...actionProps } = useActionHook(restProps) as P & {
-    ref?: React.Ref<T>;
-  };
-
-  return [actionProps, actionRef ? concatRefs(actionRef, ref) : ref] as const;
-}
+import type { UseToggleButtonProps } from '../components/buttons/useToggleButton';
+import type { UseToggleCollapseProps } from '../components/collapse/useToggleCollapse';
+import type { UseDismissDropdownProps } from '../components/dropdown/useDismissDropdown';
+import type { UseToggleDropdownProps } from '../components/dropdown/useToggleDropdown';
+import type { UseToggleTabProps } from '../components/nav/useToggleTab';
+import type { UseDismissNavbarProps } from '../components/navbar/useDismissNavbar';
+import type { UseToggleNavbarProps } from '../components/navbar/useToggleNavbar';
+import { concatRefs } from '../utils';
+
+interface UseToggleProps
+  extends UseToggleTabProps,
+    UseToggleNavbarProps,
+    UseToggleButtonProps,
+    UseToggleCollapseProps,
+    UseToggleDropdownProps {}
+
+interface UseDismissProps
+  extends UseDismissDropdownProps,
+    UseDismissNavbarProps {}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type ToggleFunction = <T>(props: T & UseToggleProps) => any;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type DismissFunction = <T>(props: T & UseDismissProps) => any;
+
+type ToggleType =
+  | ToggleFunction
+  | {
+      useToggle: ToggleFunction;
+    };
+
+type DismissType =
+  | DismissFunction
+  | {
+      useDismiss: DismissFunction;
+    };
+
+export interface UseActionProps extends UseToggleProps, UseDismissProps {
+  toggle?: ToggleType;
+  dismiss?: DismissType;
+}
+
+function getActionHook(toggle?: ToggleType, dismiss?: DismissType) {
+  if (toggle) {
+    return typeof toggle === 'function' ? toggle : toggle.useToggle;
+  }
+
+  if (dismiss) {
+    return typeof dismiss === 'function' ? dismiss : dismiss.useDismiss;
+  }
+
+  return null;
+}
+
+export default function useAction<T, P>(
+  props: UseActionProps & P,
+  ref: React.Ref<T>,
+) {
+  const { toggle, dismiss, ...restProps } = props;
+
+  const useActionHook = getActionHook(toggle, dismiss);
+
+  if (!useActionHook) {
+    return [restProps, ref] as const;
+  }
+
+  if (typeof useActionHook !== 'function') {
+    throw new Error('Action hook must be of type function.');
+  }
+
+  // TODO: Remove as and define return type on ActionFunction
+  const { ref: actionRef, ...actionProps } = useActionHook(restProps) as P & {
+    ref?: React.Ref<T>;
+  };
+
+  return [actionProps, actionRef ? concatRefs(actionRef, ref) : ref] as const;
+}

package/src/hooks/useBackgroundNative.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { I18nManager, StyleSheet, View } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import type { BaseStyle, PlacementAxis } from '../types';
+import type { BaseStyle } from '../types';
+
+type Position = 'center' | 'left' | 'right' | 'top' | 'bottom';
 
 type BackgroundSize = 'cover' | 'contain' | { width: number; height: number };
 
@@ -94,7 +96,7 @@ const transforms = {
       height,
     };
   },
-  backgroundPosition(value: PlacementAxis) {
+  backgroundPosition(value: Position) {
     if (value === 'center') {
       return {
         alignItems: 'center',
@@ -123,7 +125,7 @@ const transforms = {
     return null;
   },
   backgroundPositionX(
-    value: PlacementAxis | { position: PlacementAxis; offset: number },
+    value: Position | { position: Position; offset: number },
   ) {
     const { position = 'left', offset } =
       typeof value === 'object'
@@ -139,7 +141,7 @@ const transforms = {
     return horizontalPosition(offset);
   },
   backgroundPositionY(
-    value: PlacementAxis | { position: PlacementAxis; offset: number },
+    value: Position | { position: Position; offset: number },
   ) {
     const { position = 'top', offset } =
       typeof value === 'object'

package/src/hooks/useFocusRing.ts

@@ -0,0 +1,13 @@
+import type { AriaFocusRingProps, FocusRingAria } from '@react-aria/focus';
+
+export default function useFocusRing(
+  // @ts-expect-error Argument props is used on web only
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  props?: AriaFocusRingProps,
+): FocusRingAria {
+  return {
+    isFocused: false,
+    isFocusVisible: false,
+    focusProps: {},
+  };
+}

package/src/hooks/useFocusRing.web.ts

@@ -0,0 +1,3 @@
+import { useFocusRing } from '@react-aria/focus';
+
+export default useFocusRing;

package/src/hooks/useInteractionState.ts

@@ -1,81 +1,75 @@
-import { useState, useMemo } from 'react';
-import type {
-  TextInputFocusEventData,
-  NativeSyntheticEvent,
-  MouseEvent,
-  GestureResponderEvent,
-  TargetedEvent,
-} from 'react-native';
-import { useFocusRing } from '@react-native-aria/focus';
-
-type InteractionProps = {
-  onFocus?:
-    | null
-    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
-    | undefined;
-  onBlur?:
-    | null
-    | ((event: NativeSyntheticEvent<TargetedEvent>) => void)
-    | undefined;
-  onHoverIn?: null | ((event: MouseEvent) => void) | undefined;
-  onHoverOut?: null | ((event: MouseEvent) => void) | undefined;
-  onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined;
-  onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined;
-  autoFocus?: boolean;
-};
-
-export default function useInteractionState({
-  onFocus,
-  onBlur,
-  onHoverIn,
-  onHoverOut,
-  onPressIn,
-  onPressOut,
-  autoFocus,
-}: InteractionProps) {
-  const [active, setActive] = useState(false);
-  const [hover, setHovered] = useState(false);
-
-  // @ts-expect-error definition is on @react-aria/focus but not on @react-native-aria/focus
-  const focusRingProps = useFocusRing({ autoFocus }) as unresolved;
-
-  const {
-    isFocused: focus,
-    isFocusVisible: focusVisible,
-    focusProps,
-  } = focusRingProps;
-
-  const interactionProps = useMemo(
-    () => ({
-      onHoverIn(event: MouseEvent) {
-        setHovered(true);
-        if (onHoverIn) onHoverIn(event);
-      },
-      onHoverOut(event: MouseEvent) {
-        setHovered(false);
-        if (onHoverOut) onHoverOut(event);
-      },
-      onFocus(event: NativeSyntheticEvent<TextInputFocusEventData>) {
-        focusProps.onFocus(event);
-        if (onFocus) onFocus(event);
-      },
-      onBlur(event: NativeSyntheticEvent<TextInputFocusEventData>) {
-        focusProps.onBlur(event);
-        if (onBlur) onBlur(event);
-      },
-      onPressIn(event: GestureResponderEvent) {
-        setActive(true);
-        if (onPressIn) onPressIn(event);
-      },
-      onPressOut(event: GestureResponderEvent) {
-        setActive(false);
-        if (onPressOut) onPressOut(event);
-      },
-    }),
-    [onFocus, onBlur, onHoverIn, onHoverOut, onPressIn, onPressOut, focusProps],
-  );
-
-  const interaction = { hover, focus, focusVisible, active };
-
-  return { interaction, interactionProps };
-}
+import { useState, useMemo } from 'react';
+import type {
+  MouseEvent,
+  GestureResponderEvent,
+  FocusEvent,
+  BlurEvent,
+} from 'react-native';
+import useFocusRing from './useFocusRing';
+
+type InteractionProps = {
+  onFocus?: null | ((event: FocusEvent) => void) | undefined;
+  onBlur?: null | ((event: BlurEvent) => void) | undefined;
+  onHoverIn?: null | ((event: MouseEvent) => void) | undefined;
+  onHoverOut?: null | ((event: MouseEvent) => void) | undefined;
+  onPressIn?: null | ((event: GestureResponderEvent) => void) | undefined;
+  onPressOut?: null | ((event: GestureResponderEvent) => void) | undefined;
+  autoFocus?: boolean;
+};
+
+export default function useInteractionState({
+  onFocus,
+  onBlur,
+  onHoverIn,
+  onHoverOut,
+  onPressIn,
+  onPressOut,
+  autoFocus,
+}: InteractionProps) {
+  const [active, setActive] = useState(false);
+  const [hover, setHovered] = useState(false);
+
+  const focusRingProps = useFocusRing({ autoFocus });
+
+  const {
+    isFocused: focus,
+    isFocusVisible: focusVisible,
+    focusProps,
+  } = focusRingProps;
+
+  const interactionProps = useMemo(
+    () => ({
+      onHoverIn(event: MouseEvent) {
+        setHovered(true);
+        onHoverIn?.(event);
+      },
+      onHoverOut(event: MouseEvent) {
+        setHovered(false);
+        onHoverOut?.(event);
+      },
+      onFocus(event: FocusEvent) {
+        // @ts-expect-error We can use the native event for a web prop here.
+        focusProps.onFocus?.(event);
+        onFocus?.(event);
+      },
+      onBlur(event: BlurEvent) {
+        // @ts-expect-error We can use the native event for a web prop here.
+        focusProps.onBlur?.(event);
+        onBlur?.(event);
+      },
+      onPressIn(event: GestureResponderEvent) {
+        setActive(true);
+        onPressIn?.(event);
+      },
+      onPressOut(event: GestureResponderEvent) {
+        setActive(false);
+        onPressOut?.(event);
+      },
+    }),
+    [onFocus, onBlur, onHoverIn, onHoverOut, onPressIn, onPressOut, focusProps],
+  );
+
+  const interaction = { hover, focus, focusVisible, active };
+
+  return { interaction, interactionProps };
+}

package/src/hooks/useOverlay.ts

@@ -0,0 +1,197 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react';
+import {
+  GestureResponderEvent,
+  type LayoutChangeEvent,
+  type LayoutRectangle,
+} from 'react-native';
+import { useRelativePosition, type LayoutPosition } from '@rn-primitives/hooks';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import useControlledState from './useControlledState';
+import { type ViewRef } from '../components/View';
+import { type PressableRef } from '../components/Pressable';
+import type {
+  OverlayTrigger,
+  OverlayAlignment,
+  OverlayPlacement,
+  OverlayPhysicalPlacement,
+} from '../types';
+
+type UseOverlayOptions = {
+  defaultVisible: boolean;
+  controlledVisible: boolean | undefined;
+  onToggle: (value: boolean) => void;
+  offset: number;
+  align: OverlayAlignment;
+  placement: OverlayPlacement;
+  trigger?: OverlayTrigger;
+};
+
+const transformAlign = (align: OverlayAlignment) => {
+  if (align === 'top') {
+    return 'start';
+  }
+
+  if (align === 'bottom') {
+    return 'end';
+  }
+
+  return align;
+};
+
+const getNativePlacement = (placement: OverlayPlacement) => {
+  // Currently on native only top and bottom is supported.
+  if (placement !== 'top') {
+    return 'bottom';
+  }
+
+  return placement;
+};
+
+export default function useOverlay({
+  defaultVisible,
+  controlledVisible,
+  onToggle,
+  offset,
+  align,
+  placement,
+}: UseOverlayOptions) {
+  const identifier = useId();
+
+  const triggerRef = useRef<PressableRef | null>(null);
+  const contentRef = useRef<ViewRef | null>(null);
+
+  const [triggerPosition, setTriggerPosition] = useState<LayoutPosition | null>(
+    null,
+  );
+  const [contentLayout, setContentLayout] = useState<LayoutRectangle | null>(
+    null,
+  );
+  const [arrowLayout, setArrowLayout] = useState<LayoutRectangle | null>(null);
+
+  const handleToggle = useCallback(
+    (value: boolean) => {
+      if (value) {
+        triggerRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+          setTriggerPosition({ width, pageX, pageY, height });
+        });
+      } else {
+        setTriggerPosition(null);
+        setContentLayout(null);
+        setArrowLayout(null);
+      }
+
+      onToggle?.(value);
+    },
+    [onToggle],
+  );
+
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    handleToggle,
+  );
+
+  const insets = useSafeAreaInsets();
+
+  const nativePlacement = getNativePlacement(placement);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const positionStyle = useRelativePosition({
+    avoidCollisions: true,
+    triggerPosition,
+    contentLayout,
+    insets,
+    align: transformAlign(align),
+    alignOffset: 0,
+    side: nativePlacement,
+    sideOffset: offset,
+  });
+
+  // Note: We do not use hover and focus trigger, so the trigger is always press.
+  const getTriggerProps = useCallback(
+    (
+      props: { onPress?: (event: GestureResponderEvent) => void } & Record<
+        string,
+        unknown
+      >,
+    ) => ({
+      onPress: (event: GestureResponderEvent) => {
+        setVisible((value) => !value);
+        props.onPress?.(event);
+      },
+    }),
+    [],
+  );
+
+  const getContentProps = useCallback(
+    (
+      props: { onLayout?: (event: LayoutChangeEvent) => void } & Record<
+        string,
+        unknown
+      >,
+    ) => ({
+      onLayout: (event: LayoutChangeEvent) => {
+        setContentLayout(event.nativeEvent.layout);
+
+        props.onLayout?.(event);
+      },
+    }),
+    [],
+  );
+
+  const getArrowProps = useCallback(
+    (
+      props: { onLayout?: (event: LayoutChangeEvent) => void } & Record<
+        string,
+        unknown
+      >,
+    ) => ({
+      onLayout: (event: LayoutChangeEvent) => {
+        setArrowLayout(event.nativeEvent.layout);
+
+        props.onLayout?.(event);
+      },
+    }),
+    [],
+  );
+
+  const arrowStyle = useMemo(() => {
+    if (!contentLayout || !arrowLayout || !triggerPosition) {
+      return null;
+    }
+
+    const triggerCenter = triggerPosition.pageX + triggerPosition.width / 2;
+    const contentCenter = contentLayout.x + contentLayout.width / 2;
+    const shift = triggerCenter - contentCenter;
+
+    return contentLayout
+      ? {
+          left: contentLayout.width / 2 - arrowLayout.width / 2 + shift,
+        }
+      : null;
+  }, [contentLayout, arrowLayout, triggerPosition]);
+
+  return useMemo(
+    () => ({
+      identifier,
+      visible,
+      setVisible,
+      placement: nativePlacement as OverlayPhysicalPlacement,
+      trigger: {
+        ref: triggerRef,
+        getProps: getTriggerProps,
+      },
+      content: {
+        ref: contentRef,
+        getProps: getContentProps,
+        style: positionStyle,
+      },
+      arrow: {
+        ref: null,
+        getProps: getArrowProps,
+        style: arrowStyle,
+      },
+    }),
+    [visible, placement, positionStyle, arrowStyle],
+  );
+}