bootstrap-rn 0.4.6 → 0.4.8

package/src/hooks/useOverlay.web.ts

@@ -0,0 +1,190 @@
+import { type HTMLProps, useId, useMemo, useRef } from 'react';
+import { I18nManager } from 'react-native';
+import {
+  useFloating,
+  arrow,
+  flip,
+  shift,
+  offset as applyOffset,
+  autoUpdate,
+  useDismiss,
+  useClick,
+  useFocus,
+  useHover,
+  useInteractions,
+  type Placement,
+  type UseInteractionsReturn,
+} from '@floating-ui/react';
+import useControlledState from './useControlledState';
+import type {
+  OverlayPhysicalPlacement,
+  OverlayTrigger,
+  OverlayAlignment,
+  OverlayPlacement,
+} from '../types';
+import { optional } from '../utils';
+
+type UseOverlayOptions = {
+  defaultVisible: boolean;
+  controlledVisible: boolean | undefined;
+  onToggle: (value: boolean) => void;
+  offset: number;
+  align: OverlayAlignment;
+  placement: OverlayPlacement;
+  trigger?: OverlayTrigger;
+};
+
+const transformPlacement = (placement: OverlayPlacement) => {
+  if (placement === 'start') {
+    return I18nManager.isRTL ? 'right' : 'left';
+  }
+
+  if (placement === 'end') {
+    return I18nManager.isRTL ? 'left' : 'right';
+  }
+
+  return placement;
+};
+
+const getAlignedPlacement = (
+  placement: OverlayPlacement,
+  align: OverlayAlignment,
+) => {
+  const transformedPlacement = transformPlacement(placement);
+
+  if (align === 'center') {
+    return transformedPlacement;
+  }
+
+  return `${transformedPlacement}-${align}` as Placement;
+};
+
+const transformReferenceProps =
+  (handle: UseInteractionsReturn['getReferenceProps']) =>
+  (props: HTMLProps<Element> | undefined) => {
+    const { onClick, ...referenceProps } = handle(props);
+
+    return { ...referenceProps, onPress: onClick };
+  };
+
+export default function useOverlay({
+  defaultVisible,
+  controlledVisible,
+  onToggle: handleToggle,
+  offset,
+  align,
+  placement,
+  trigger = 'press',
+}: UseOverlayOptions) {
+  const identifier = useId();
+
+  const [visible, setVisible] = useControlledState(
+    defaultVisible,
+    controlledVisible,
+    handleToggle,
+  );
+
+  const arrowRef = useRef(null);
+  const alignedPlacement = getAlignedPlacement(placement, align);
+
+  const floating = useFloating({
+    open: visible,
+    onOpenChange: setVisible,
+    placement: alignedPlacement,
+    middleware: [
+      arrow({
+        element: arrowRef,
+      }),
+      applyOffset({ mainAxis: offset }),
+      flip({
+        fallbackPlacements:
+          placement === 'top' || placement === 'bottom'
+            ? [
+                getAlignedPlacement('top', align),
+                getAlignedPlacement('bottom', align),
+                'right',
+                'left',
+              ]
+            : [
+                getAlignedPlacement('right', align),
+                getAlignedPlacement('left', align),
+                'top',
+                'bottom',
+              ],
+      }),
+      shift(),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const interactions = trigger.split(' ');
+
+  const click = useClick(floating.context, {
+    enabled: interactions.includes('press'),
+  });
+
+  const focus = useFocus(floating.context, {
+    enabled: interactions.includes('focus'),
+  });
+  const hover = useHover(floating.context, {
+    enabled: interactions.includes('hover'),
+  });
+  const dismiss = useDismiss(floating.context);
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    focus,
+    hover,
+    dismiss,
+  ]);
+
+  const arrowTransformStyle = useMemo(() => {
+    const arrowData = floating.context.middlewareData.arrow;
+    const shiftData = floating.context.middlewareData.shift;
+
+    if (!arrowData || (!arrowData.x && !arrowData.y)) {
+      return null;
+    }
+
+    const side = floating.placement.split('-')[0] as OverlayPhysicalPlacement;
+    const isVerticalSide = side === 'top' || side === 'bottom';
+
+    const x = isVerticalSide ? (arrowData.x || 0) - (shiftData?.x || 0) : 0;
+    const y = !isVerticalSide ? (arrowData.y || 0) - (shiftData?.y || 0) : 0;
+
+    return `translate(${x < 0 ? 0 : x}px, ${y < 0 ? 0 : y}px)`;
+  }, [
+    floating.context.middlewareData.arrow,
+    floating.context.middlewareData.shift,
+    floating.placement,
+  ]);
+
+  return useMemo(
+    () => ({
+      identifier,
+      visible,
+      setVisible,
+      placement: floating.placement.split('-')[0] as OverlayPhysicalPlacement,
+      trigger: {
+        ref: floating.refs.setReference,
+        getProps: transformReferenceProps(getReferenceProps),
+      },
+      content: {
+        ref: floating.refs.setFloating,
+        getProps: getFloatingProps,
+        style: floating.floatingStyles,
+      },
+      arrow: {
+        ref: arrowRef,
+        getProps: () => {},
+        style: {
+          position: 'absolute',
+          ...optional(arrowTransformStyle !== null, {
+            transform: arrowTransformStyle,
+          }),
+        },
+      },
+    }),
+    [visible, floating.placement, floating.floatingStyles, arrowTransformStyle],
+  );
+}

package/src/hooks/useScrollbarEffects.ts

@@ -1,93 +1,15 @@
-import { useRef, useMemo, RefObject } from 'react';
-import { Platform } from 'react-native';
+import { useMemo, RefObject } from 'react';
 import type { ViewRef } from '../components/View';
 
-type ScrollbarEffectsState = {
-  counter: number;
-  elements: HTMLElement[];
-  originalWidths: string[];
-  originalBodyOverflow: string;
-};
-
-const computeScrollbarWidth = () => {
-  const documentWidth = document.documentElement.clientWidth;
-  return Math.abs(window.innerWidth - documentWidth);
-};
-
 export default function useScrollbarEffects(
+  // @ts-expect-error Argument elements is used on the web only.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   elements: RefObject<ViewRef | null>[],
 ) {
-  if (Platform.OS !== 'web') {
-    return useMemo(
-      () => ({
-        hide() {},
-        show() {},
-      }),
-      [],
-    );
-  }
-
-  const state = useRef<ScrollbarEffectsState>({
-    counter: 0,
-    elements: [],
-    originalWidths: [],
-    originalBodyOverflow: '',
-  });
-
   return useMemo(
     () => ({
-      hide() {
-        state.current.counter += 1;
-
-        if (state.current.counter !== 1) {
-          return;
-        }
-
-        const rect = document.body.getBoundingClientRect();
-        const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
-
-        // Set body and fixed elements padding adjustments.
-        const fixedElements = elements
-          .filter((ref) => ref.current)
-          .map((ref) => ref.current);
-
-        // @ts-expect-error fixedElements should be of type HTMLElement[]
-        state.current.elements = [document.body, ...fixedElements];
-
-        state.current.originalWidths = state.current.elements.map(
-          (el) => el.style.width || '',
-        );
-
-        state.current.originalBodyOverflow = document.body.style.overflow || '';
-
-        if (isBodyOverflowing) {
-          const scrollbarWidth = computeScrollbarWidth();
-
-          state.current.elements.forEach((el) => {
-            // eslint-disable-next-line no-param-reassign
-            el.style.width = `calc(100% - ${scrollbarWidth}px)`;
-          });
-        }
-
-        // Add "overflow: hidden" to body element.
-        document.body.style.overflow = 'hidden';
-      },
-      show() {
-        state.current.counter -= 1;
-
-        if (state.current.counter !== 0) {
-          return;
-        }
-
-        // Remove "overflow: hidden" from body element.
-        document.body.style.overflow = state.current.originalBodyOverflow;
-
-        // Reset body padding adjustments.
-        state.current.elements.forEach((el, key) => {
-          // eslint-disable-next-line no-param-reassign
-          el.style.width = state.current.originalWidths[key] || '';
-        });
-      },
+      hide() {},
+      show() {},
     }),
     [],
   );

package/src/hooks/useScrollbarEffects.web.ts

@@ -0,0 +1,83 @@
+import { useRef, useMemo, RefObject } from 'react';
+import type { ViewRef } from '../components/View';
+
+type ScrollbarEffectsState = {
+  counter: number;
+  elements: HTMLElement[];
+  originalWidths: string[];
+  originalBodyOverflow: string;
+};
+
+const computeScrollbarWidth = () => {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+};
+
+export default function useScrollbarEffects(
+  elements: RefObject<ViewRef | null>[],
+) {
+  const state = useRef<ScrollbarEffectsState>({
+    counter: 0,
+    elements: [],
+    originalWidths: [],
+    originalBodyOverflow: '',
+  });
+
+  return useMemo(
+    () => ({
+      hide() {
+        state.current.counter += 1;
+
+        if (state.current.counter !== 1) {
+          return;
+        }
+
+        const rect = document.body.getBoundingClientRect();
+        const isBodyOverflowing = rect.left + rect.right < window.innerWidth;
+
+        // Set body and fixed elements padding adjustments.
+        const fixedElements = elements
+          .filter((ref) => ref.current)
+          .map((ref) => ref.current);
+
+        // @ts-expect-error fixedElements should be of type HTMLElement[]
+        state.current.elements = [document.body, ...fixedElements];
+
+        state.current.originalWidths = state.current.elements.map(
+          (el) => el.style.width || '',
+        );
+
+        state.current.originalBodyOverflow = document.body.style.overflow || '';
+
+        if (isBodyOverflowing) {
+          const scrollbarWidth = computeScrollbarWidth();
+
+          state.current.elements.forEach((el) => {
+            // eslint-disable-next-line no-param-reassign
+            el.style.width = `calc(100% - ${scrollbarWidth}px)`;
+          });
+        }
+
+        // Add "overflow: hidden" to body element.
+        document.body.style.overflow = 'hidden';
+      },
+      show() {
+        state.current.counter -= 1;
+
+        if (state.current.counter !== 0) {
+          return;
+        }
+
+        // Remove "overflow: hidden" from body element.
+        document.body.style.overflow = state.current.originalBodyOverflow;
+
+        // Reset body padding adjustments.
+        state.current.elements.forEach((el, key) => {
+          // eslint-disable-next-line no-param-reassign
+          el.style.width = state.current.originalWidths[key] || '';
+        });
+      },
+    }),
+    [],
+  );
+}

package/src/index.ts

@@ -1,4 +1,3 @@
-import { PortalProvider } from '@react-native-aria/overlays';
 import css from './style/css';
 import makeUtilities from './style/makeUtilities';
 import makeTheme from './style/makeTheme';
@@ -14,7 +13,6 @@ export {
   Context,
   makeUtilities,
   makeTheme,
-  PortalProvider,
   Provider,
   StyleSheet,
   useFixedElement,
@@ -190,6 +188,11 @@ export type { ProgressBarProps } from './components/progress/ProgressBar';
 export { default as Paragraph } from './components/type/Paragraph';
 export type { ParagraphProps } from './components/type/Paragraph';
 
+export { default as Portal } from './components/helpers/Portal';
+export { default as PortalHost } from './components/helpers/PortalHost';
+export type { PortalProps } from './components/helpers/Portal';
+export type { PortalHostProps } from './components/helpers/PortalHost';
+
 export { default as Pressable } from './components/Pressable';
 export type { PressableProps } from './components/Pressable';
 
@@ -210,9 +213,6 @@ export type { SwitchProps } from './components/forms/Switch';
 export { default as Spinner } from './components/spinners/Spinner';
 export type { SpinnerProps } from './components/spinners/Spinner';
 
-export { default as SafeAreaView } from './components/SafeAreaView';
-export type { SafeAreaViewProps } from './components/SafeAreaView';
-
 export { default as ScrollView } from './components/ScrollView';
 export type { ScrollViewProps } from './components/ScrollView';
 

package/src/style/StyleSheet.ts

@@ -63,13 +63,10 @@ const createSheet = <T extends string>(
         return target.stateless[prop] || target.stateful[prop] || undefined;
       },
       ownKeys: (target) => target.keys,
-      getOwnPropertyDescriptor(target, name: string) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        const proxy = this;
-
+      getOwnPropertyDescriptor(target, name: T) {
         return {
           get value() {
-            return proxy.get(target, name);
+            return target.stateless[name] || target.stateful[name] || undefined;
           },
           configurable: true,
           enumerable: true,