@cdx-ui/primitives 0.0.1-beta.159 → 0.0.1-beta.160

package/src/select/SelectContent.tsx

@@ -1,13 +1,8 @@
 import React, { forwardRef, useCallback, useRef, type ComponentRef } from 'react';
-import { Platform, ScrollView, View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { FadeIn, FadeOut } from 'react-native-reanimated';
 import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
-import {
-  OverlayContainer,
-  useAnchorPosition,
-  useDismissOverlay,
-  useOverlayPosition,
-} from '../overlay';
+import { OverlayContainer, useAnchoredOverlay, useDismissOverlay } from '../overlay';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { useSelectContext } from './context';
@@ -21,7 +16,7 @@ export interface SelectContentProps extends ISelectContentProps {
 }
 
 export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContentProps>(
-  ({ asChild, children, enteringAnimation, exitingAnimation, ...props }, ref) => {
+  ({ asChild, children, enteringAnimation, exitingAnimation, onLayout, style, ...props }, ref) => {
     const {
       open,
       setOpen,
@@ -49,14 +44,23 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       }
     }, []);
 
-    const mergedRef = mergeRefs(ref, focusOnMount as unknown as React.Ref<View>);
-
     const dismiss = useCallback(() => setOpen(false), [setOpen]);
 
-    const anchorLayout = useAnchorPosition(triggerRef, open);
-    const position = useOverlayPosition(anchorLayout);
+    const overlayOpen = open && !native;
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: overlayStyle,
+      position,
+    } = useAnchoredOverlay(triggerRef, overlayOpen, {
+      placement: 'bottom-start',
+      offset: 4,
+      collisionBehavior: 'flip-shift',
+      width: 'anchor',
+    });
+    const mergedRef = mergeRefs(ref, focusOnMount as unknown as React.Ref<View>, floatingRef);
 
-    useDismissOverlay(open, contentRef, [triggerRef], dismiss);
+    useDismissOverlay(overlayOpen, contentRef, [triggerRef], dismiss);
 
     const { handleKeyDown } = useListboxNavigation({
       items,
@@ -77,7 +81,7 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
       setActiveValue,
     });
 
-    if (native || !open || !position) {
+    if (!overlayOpen) {
       return null;
     }
 
@@ -99,18 +103,26 @@ export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContent
         onDismiss={dismiss}
         entering={enteringAnimation ?? FadeIn.duration(150)}
         exiting={exitingAnimation ?? FadeOut.duration(100)}
-        style={position.style}
       >
         <Comp
           ref={mergedRef}
+          onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+          style={[style, overlayStyle]}
           role="listbox"
           id={contentId}
           aria-labelledby={triggerId}
           {...props}
-          {...mergeDataAttributes(props, dataAttributes({ state: 'open' }))}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              state: 'open',
+              side: position?.resolvedPlacement.side,
+              align: position?.resolvedPlacement.align,
+            }),
+          )}
           {...webProps}
         >
-          <ScrollView scrollEventThrottle={16}>{children}</ScrollView>
+          {children}
         </Comp>
       </OverlayContainer>
     );

package/src/select/useListboxNavigation.ts

@@ -28,6 +28,18 @@ export function useListboxNavigation({
 
   const handleKeyDown = useCallback(
     (e: any) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation?.();
+        onDismissRef.current();
+        return;
+      }
+
+      if (e.key === 'Tab') {
+        onDismissRef.current();
+        return;
+      }
+
       const enabledItems = getEnabledItems();
       if (enabledItems.length === 0) {
         return;
@@ -67,15 +79,6 @@ export function useListboxNavigation({
           }
           break;
         }
-        case 'Escape': {
-          e.preventDefault();
-          onDismissRef.current();
-          break;
-        }
-        case 'Tab': {
-          onDismissRef.current();
-          break;
-        }
       }
     },
     [activeValue, getEnabledItems, setActiveValue],

package/src/tooltip/TooltipContent.tsx

@@ -1,26 +1,19 @@
-import {
-  forwardRef,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  type ComponentRef,
-} from 'react';
-import { Platform, StyleSheet, View, useWindowDimensions } from 'react-native';
-import { mergeRefs } from '@cdx-ui/utils';
+import { forwardRef, useCallback, useLayoutEffect, type ComponentRef } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
 import { Portal } from '../portal';
-import { useAnchorPosition, useDismissOverlay, useEscapeKey } from '../overlay';
+import { useAnchoredOverlay, useDismissOverlay, useEscapeKey } from '../overlay';
 import { createPortalFn } from '../utils/createPortal';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { TooltipProvider, useTooltipContext } from './context';
-import { getTooltipAnchorStyle } from './getTooltipPosition';
+import { TOOLTIP_Z_INDEX } from './getTooltipPosition';
 import type { ITooltipContentProps } from './types';
 
 export interface TooltipContentProps extends ITooltipContentProps {}
 
 export const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipContentProps>(
-  ({ asChild, children, ...props }, ref) => {
+  ({ asChild, children, onLayout, ...props }, ref) => {
     const contextValue = useTooltipContext();
     const {
       open,
@@ -31,11 +24,22 @@ export const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipConte
       trigger,
       triggerRef,
       contentId,
+      resolvedPlacement,
       setResolvedPlacement,
     } = contextValue;
 
-    const contentRef = useRef<ComponentRef<typeof View>>(null);
-    const mergedRef = mergeRefs(ref, contentRef);
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: overlayStyle,
+      position,
+    } = useAnchoredOverlay(triggerRef, open && !isDisabled, {
+      placement,
+      offset,
+      collisionBehavior: 'none',
+      width: 'content',
+    });
+    const mergedRef = mergeRefs(ref, floatingRef);
 
     const handleDismiss = useCallback(() => {
       setOpen(false);
@@ -44,27 +48,20 @@ export const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipConte
     const shouldDismissOnInteraction =
       trigger === 'click' && Platform.OS === 'web' && open && !isDisabled;
 
-    useDismissOverlay(shouldDismissOnInteraction, contentRef, [triggerRef], handleDismiss);
+    useDismissOverlay(shouldDismissOnInteraction, floatingRef, [triggerRef], handleDismiss);
     useEscapeKey(shouldDismissOnInteraction, handleDismiss);
 
-    const { width, height } = useWindowDimensions();
-    const anchorLayout = useAnchorPosition(triggerRef, open && !isDisabled);
-
-    const position = useMemo(() => {
-      if (!anchorLayout) {
-        return null;
-      }
-
-      return getTooltipAnchorStyle(anchorLayout, placement, offset, { width, height });
-    }, [anchorLayout, height, offset, placement, width]);
-
     useLayoutEffect(() => {
-      if (position) {
-        setResolvedPlacement(position.resolved);
+      if (
+        position &&
+        (resolvedPlacement?.side !== position.resolvedPlacement.side ||
+          resolvedPlacement.align !== position.resolvedPlacement.align)
+      ) {
+        setResolvedPlacement(position.resolvedPlacement);
       }
-    }, [position, setResolvedPlacement]);
+    }, [position, resolvedPlacement, setResolvedPlacement]);
 
-    if (!open || isDisabled || !position) {
+    if (!open || isDisabled) {
       return null;
     }
 
@@ -82,16 +79,17 @@ export const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipConte
 
     const popup = (
       <TooltipProvider value={contextValue}>
-        <View pointerEvents="none" style={position.style}>
+        <View pointerEvents="none" style={[overlayStyle, { zIndex: TOOLTIP_Z_INDEX }]}>
           <Comp
             ref={mergedRef}
+            onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
             {...props}
             {...webProps}
             {...mergeDataAttributes(
               props,
               dataAttributes({
-                side: position.resolved.side,
-                align: position.resolved.align,
+                side: position?.resolvedPlacement.side,
+                align: position?.resolvedPlacement.align,
                 state: 'open',
               }),
             )}

package/src/tooltip/getTooltipPosition.ts

@@ -1,88 +1,57 @@
 import { Platform, type ViewStyle } from 'react-native';
 import type { AnchorLayout } from '../overlay/useAnchorPosition';
-
-export const TOOLTIP_PLACEMENTS = [
-  'auto',
-  'auto-start',
-  'auto-end',
-  'top',
-  'top-start',
-  'top-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'left',
-  'left-start',
-  'left-end',
-  'right',
-  'right-start',
-  'right-end',
-] as const;
-
-export type TooltipPlacement = (typeof TOOLTIP_PLACEMENTS)[number];
+import {
+  getAnchoredOverlayPosition,
+  OVERLAY_PLACEMENTS,
+  type OverlayAlign,
+  type OverlayPlacement,
+  type OverlaySide,
+  type ResolvedOverlayPlacement,
+} from '../overlay/getAnchoredOverlayPosition';
+
+export const TOOLTIP_PLACEMENTS = OVERLAY_PLACEMENTS;
+
+export type TooltipPlacement = OverlayPlacement;
 export type TooltipTriggerMode = 'hover' | 'focus' | 'click';
-export type TooltipSide = 'top' | 'bottom' | 'left' | 'right';
-export type TooltipAlign = 'start' | 'center' | 'end';
-
-export interface ResolvedTooltipPlacement {
-  readonly side: TooltipSide;
-  readonly align: TooltipAlign;
-}
+export type TooltipSide = OverlaySide;
+export type TooltipAlign = OverlayAlign;
+export type ResolvedTooltipPlacement = Readonly<ResolvedOverlayPlacement>;
 
 export const TOOLTIP_Z_INDEX = 9999;
-const SCREEN_PADDING = 8;
 
-function parsePlacement(placement: TooltipPlacement): ResolvedTooltipPlacement | 'auto' {
-  if (placement === 'auto' || placement === 'auto-start' || placement === 'auto-end') {
-    return 'auto';
+function getCompatibilityTransform({
+  side,
+  align,
+}: ResolvedTooltipPlacement): ViewStyle['transform'] {
+  if (side === 'top') {
+    return align === 'center'
+      ? ([{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'])
+      : align === 'end'
+        ? ([{ translateX: '-100%' }, { translateY: '-100%' }] as ViewStyle['transform'])
+        : ([{ translateY: '-100%' }] as ViewStyle['transform']);
   }
 
-  const segments = placement.split('-');
-  const side = segments[0] as TooltipSide;
-
-  if (segments.length === 1) {
-    return { side, align: 'center' };
+  if (side === 'bottom') {
+    return align === 'center'
+      ? ([{ translateX: '-50%' }] as ViewStyle['transform'])
+      : align === 'end'
+        ? ([{ translateX: '-100%' }] as ViewStyle['transform'])
+        : undefined;
   }
 
-  return { side, align: segments[1] as TooltipAlign };
-}
-
-function resolveAutoPlacement(
-  anchor: AnchorLayout,
-  viewport: { width: number; height: number },
-  alignPreference: TooltipAlign,
-): ResolvedTooltipPlacement {
-  const spaceTop = anchor.y - SCREEN_PADDING;
-  const spaceBottom = viewport.height - anchor.y - anchor.height - SCREEN_PADDING;
-  const spaceLeft = anchor.x - SCREEN_PADDING;
-  const spaceRight = viewport.width - anchor.x - anchor.width - SCREEN_PADDING;
-
-  const spaces: { side: TooltipSide; value: number }[] = [
-    { side: 'top', value: spaceTop },
-    { side: 'bottom', value: spaceBottom },
-    { side: 'left', value: spaceLeft },
-    { side: 'right', value: spaceRight },
-  ];
-
-  const best = spaces.reduce((current, next) => (next.value > current.value ? next : current));
-
-  return { side: best.side, align: alignPreference };
-}
-
-function getAlignOffset(
-  anchor: AnchorLayout,
-  align: TooltipAlign,
-  axis: 'horizontal' | 'vertical',
-): number {
-  if (align === 'start') {
-    return axis === 'horizontal' ? anchor.x : anchor.y;
-  }
-
-  if (align === 'end') {
-    return axis === 'horizontal' ? anchor.x + anchor.width : anchor.y + anchor.height;
+  if (side === 'left') {
+    return align === 'center'
+      ? ([{ translateX: '-100%' }, { translateY: '-50%' }] as ViewStyle['transform'])
+      : align === 'end'
+        ? ([{ translateX: '-100%' }, { translateY: '-100%' }] as ViewStyle['transform'])
+        : ([{ translateX: '-100%' }] as ViewStyle['transform']);
   }
 
-  return axis === 'horizontal' ? anchor.x + anchor.width / 2 : anchor.y + anchor.height / 2;
+  return align === 'center'
+    ? ([{ translateY: '-50%' }] as ViewStyle['transform'])
+    : align === 'end'
+      ? ([{ translateY: '-100%' }] as ViewStyle['transform'])
+      : undefined;
 }
 
 export function getTooltipAnchorStyle(
@@ -91,57 +60,21 @@ export function getTooltipAnchorStyle(
   offset: number,
   viewport: { width: number; height: number },
 ): { style: ViewStyle; resolved: ResolvedTooltipPlacement } {
-  const parsed = parsePlacement(placement);
-  const resolved =
-    parsed === 'auto'
-      ? resolveAutoPlacement(
-          anchor,
-          viewport,
-          placement === 'auto-start' ? 'start' : placement === 'auto-end' ? 'end' : 'center',
-        )
-      : parsed;
-
+  const result = getAnchoredOverlayPosition(anchor, { width: 0, height: 0 }, viewport, {
+    placement,
+    offset,
+    collisionBehavior: 'none',
+  });
+  const resolved = result.resolvedPlacement;
   const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
-  const style: ViewStyle = { position, zIndex: TOOLTIP_Z_INDEX };
-  const { side, align } = resolved;
-
-  if (side === 'top') {
-    style.top = anchor.y - offset;
-    style.left = getAlignOffset(anchor, align, 'horizontal');
-    style.transform =
-      align === 'center'
-        ? ([{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'])
-        : align === 'end'
-          ? ([{ translateX: '-100%' }, { translateY: '-100%' }] as ViewStyle['transform'])
-          : ([{ translateY: '-100%' }] as ViewStyle['transform']);
-  } else if (side === 'bottom') {
-    style.top = anchor.y + anchor.height + offset;
-    style.left = getAlignOffset(anchor, align, 'horizontal');
-    style.transform =
-      align === 'center'
-        ? ([{ translateX: '-50%' }] as ViewStyle['transform'])
-        : align === 'end'
-          ? ([{ translateX: '-100%' }] as ViewStyle['transform'])
-          : undefined;
-  } else if (side === 'left') {
-    style.left = anchor.x - offset;
-    style.top = getAlignOffset(anchor, align, 'vertical');
-    style.transform =
-      align === 'center'
-        ? ([{ translateX: '-100%' }, { translateY: '-50%' }] as ViewStyle['transform'])
-        : align === 'end'
-          ? ([{ translateX: '-100%' }, { translateY: '-100%' }] as ViewStyle['transform'])
-          : ([{ translateX: '-100%' }] as ViewStyle['transform']);
-  } else {
-    style.left = anchor.x + anchor.width + offset;
-    style.top = getAlignOffset(anchor, align, 'vertical');
-    style.transform =
-      align === 'center'
-        ? ([{ translateY: '-50%' }] as ViewStyle['transform'])
-        : align === 'end'
-          ? ([{ translateY: '-100%' }] as ViewStyle['transform'])
-          : undefined;
-  }
-
-  return { style, resolved };
+  return {
+    style: {
+      position,
+      left: result.style.left,
+      top: result.style.top,
+      zIndex: TOOLTIP_Z_INDEX,
+      transform: getCompatibilityTransform(resolved),
+    },
+    resolved,
+  };
 }