@cdx-ui/primitives 0.0.1-beta.143 → 0.0.1-beta.145

package/src/tooltip/TooltipContent.tsx

@@ -0,0 +1,119 @@
+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 { Portal } from '../portal';
+import { useAnchorPosition, 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 type { ITooltipContentProps } from './types';
+
+export interface TooltipContentProps extends ITooltipContentProps {}
+
+export const TooltipContent = forwardRef<ComponentRef<typeof View>, TooltipContentProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const contextValue = useTooltipContext();
+    const {
+      open,
+      setOpen,
+      isDisabled,
+      placement,
+      offset,
+      trigger,
+      triggerRef,
+      contentId,
+      setResolvedPlacement,
+    } = contextValue;
+
+    const contentRef = useRef<ComponentRef<typeof View>>(null);
+    const mergedRef = mergeRefs(ref, contentRef);
+
+    const handleDismiss = useCallback(() => {
+      setOpen(false);
+    }, [setOpen]);
+
+    const shouldDismissOnInteraction =
+      trigger === 'click' && Platform.OS === 'web' && open && !isDisabled;
+
+    useDismissOverlay(shouldDismissOnInteraction, contentRef, [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);
+      }
+    }, [position, setResolvedPlacement]);
+
+    if (!open || isDisabled || !position) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+    const webProps =
+      Platform.OS === 'web'
+        ? ({
+            id: contentId,
+            role: 'tooltip',
+          } as const)
+        : ({
+            accessibilityRole: 'text' as const,
+            accessibilityLiveRegion: 'polite' as const,
+          } as const);
+
+    const popup = (
+      <TooltipProvider value={contextValue}>
+        <View pointerEvents="none" style={position.style}>
+          <Comp
+            ref={mergedRef}
+            {...props}
+            {...webProps}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                side: position.resolved.side,
+                align: position.resolved.align,
+                state: 'open',
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </View>
+      </TooltipProvider>
+    );
+
+    if (Platform.OS === 'web' && createPortalFn && typeof document !== 'undefined') {
+      return createPortalFn(popup, document.body);
+    }
+
+    return (
+      <Portal name={contentId}>
+        <View pointerEvents="box-none" style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
+          {popup}
+        </View>
+      </Portal>
+    );
+  },
+);
+
+TooltipContent.displayName = 'TooltipContent';

package/src/tooltip/TooltipRoot.tsx

@@ -0,0 +1,187 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { TooltipProvider } from './context';
+import type { ResolvedTooltipPlacement } from './getTooltipPosition';
+import type { ITooltipProps } from './types';
+
+export interface TooltipRootProps extends ITooltipProps {
+  asChild?: boolean;
+}
+
+export const TooltipRoot = forwardRef<ComponentRef<typeof View>, TooltipRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isDisabled = false,
+      enterDelay = 0,
+      leaveDelay = 0,
+      isOpen: isOpenProp,
+      defaultOpen = false,
+      onOpen,
+      onClose,
+      placement = 'top',
+      offset = 8,
+      trigger = 'hover',
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: isOpenProp,
+      defaultProp: defaultOpen,
+      onChange: (next) => {
+        if (next) {
+          onOpen?.();
+        } else {
+          onClose?.();
+        }
+      },
+    });
+
+    const enterTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const leaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const triggerRef = useRef<ComponentRef<typeof View> | null>(null);
+    const [resolvedPlacement, setResolvedPlacement] = useState<ResolvedTooltipPlacement | null>(
+      null,
+    );
+
+    const clearTimers = useCallback(() => {
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = null;
+      }
+      if (leaveTimerRef.current) {
+        clearTimeout(leaveTimerRef.current);
+        leaveTimerRef.current = null;
+      }
+    }, []);
+
+    const setOpen = useCallback(
+      (nextOpen: boolean) => {
+        if (isDisabled && nextOpen) {
+          return;
+        }
+        setOpenState(nextOpen);
+      },
+      [isDisabled, setOpenState],
+    );
+
+    const requestOpen = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+
+      clearTimers();
+
+      if (leaveTimerRef.current) {
+        clearTimeout(leaveTimerRef.current);
+        leaveTimerRef.current = null;
+      }
+
+      if (enterDelay <= 0) {
+        setOpen(true);
+        return;
+      }
+
+      enterTimerRef.current = setTimeout(() => {
+        setOpen(true);
+      }, enterDelay);
+    }, [clearTimers, enterDelay, isDisabled, setOpen]);
+
+    const requestClose = useCallback(() => {
+      clearTimers();
+
+      if (enterTimerRef.current) {
+        clearTimeout(enterTimerRef.current);
+        enterTimerRef.current = null;
+      }
+
+      if (leaveDelay <= 0) {
+        setOpen(false);
+        return;
+      }
+
+      leaveTimerRef.current = setTimeout(() => {
+        setOpen(false);
+      }, leaveDelay);
+    }, [clearTimers, leaveDelay, setOpen]);
+
+    useEffect(() => clearTimers, [clearTimers]);
+
+    const reactId = useId();
+    const triggerId = `tooltip-trigger-${reactId}`;
+    const contentId = `tooltip-content-${reactId}`;
+
+    const contextValue = useMemo(
+      () => ({
+        open: open ?? false,
+        setOpen,
+        requestOpen,
+        requestClose,
+        clearTimers,
+        isDisabled,
+        enterDelay,
+        leaveDelay,
+        placement,
+        offset,
+        trigger,
+        triggerRef,
+        contentId,
+        triggerId,
+        resolvedPlacement,
+        setResolvedPlacement,
+      }),
+      [
+        clearTimers,
+        contentId,
+        enterDelay,
+        isDisabled,
+        leaveDelay,
+        offset,
+        open,
+        placement,
+        requestClose,
+        requestOpen,
+        resolvedPlacement,
+        setOpen,
+        trigger,
+        triggerId,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <TooltipProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(props as ViewProps)}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              state: open ? 'open' : 'closed',
+              disabled: isDisabled,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </TooltipProvider>
+    );
+  },
+);
+
+TooltipRoot.displayName = 'TooltipRoot';

package/src/tooltip/TooltipTrigger.tsx

@@ -0,0 +1,160 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import { Platform, Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { useHover } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useTooltipContext } from './context';
+import type { ITooltipTriggerProps } from './types';
+
+export interface TooltipTriggerProps extends ITooltipTriggerProps {}
+
+export const TooltipTrigger = forwardRef<ComponentRef<typeof Pressable>, TooltipTriggerProps>(
+  (
+    {
+      asChild = true,
+      children,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      onLongPress,
+      onPress,
+      onLayout,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      open,
+      setOpen,
+      requestOpen,
+      requestClose,
+      isDisabled,
+      trigger,
+      triggerRef,
+      contentId,
+      triggerId,
+    } = useTooltipContext();
+
+    const mergedRef = mergeRefs(ref, triggerRef);
+    const { hoverProps, isHovered } = useHover({}, mergedRef);
+    const { focusProps, isFocused } = useFocus();
+
+    const handleOpen = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+      requestOpen();
+    }, [isDisabled, requestOpen]);
+
+    const handleClose = useCallback(() => {
+      requestClose();
+    }, [requestClose]);
+
+    const isWeb = Platform.OS === 'web';
+    const usesLongPressOnNative = !isWeb && (trigger === 'hover' || trigger === 'focus');
+    const usesClickToggle = trigger === 'click';
+
+    const handlePress = composeEventHandlers(onPress, () => {
+      if (!usesClickToggle || isDisabled) {
+        return;
+      }
+      setOpen(!open);
+    });
+
+    const handleHoverIn = composeEventHandlers(
+      composeEventHandlers(onHoverIn, hoverProps.onHoverIn),
+      () => {
+        if (isWeb && trigger === 'hover') {
+          handleOpen();
+        }
+      },
+    );
+
+    const handleHoverOut = composeEventHandlers(
+      composeEventHandlers(onHoverOut, hoverProps.onHoverOut),
+      () => {
+        if (isWeb && trigger === 'hover') {
+          handleClose();
+        }
+      },
+    );
+
+    const handleFocus = composeEventHandlers(
+      composeEventHandlers(onFocus, focusProps.onFocus),
+      () => {
+        if (!isWeb) {
+          return;
+        }
+        if (trigger === 'focus' || trigger === 'hover') {
+          handleOpen();
+        }
+      },
+    );
+
+    const handleBlur = composeEventHandlers(composeEventHandlers(onBlur, focusProps.onBlur), () => {
+      if (!isWeb) {
+        return;
+      }
+      if (trigger === 'focus' || trigger === 'hover') {
+        handleClose();
+      }
+    });
+
+    const handleLongPress = composeEventHandlers(onLongPress, () => {
+      if (usesLongPressOnNative) {
+        handleOpen();
+      }
+    });
+
+    const webHoverProps =
+      isWeb && trigger === 'hover'
+        ? ({
+            onPointerEnter: handleHoverIn,
+            onPointerLeave: handleHoverOut,
+          } as const)
+        : {};
+
+    const webA11yProps = isWeb
+      ? ({
+          id: triggerId,
+          'aria-describedby': open ? contentId : undefined,
+          ...(trigger === 'click' ? { 'aria-expanded': open } : {}),
+        } as const)
+      : {};
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <Comp
+        ref={mergedRef}
+        disabled={isDisabled}
+        {...(props as PressableProps)}
+        {...webA11yProps}
+        {...focusProps}
+        {...webHoverProps}
+        onLayout={onLayout}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            triggerHover: isHovered,
+            triggerFocus: isFocused,
+            disabled: isDisabled,
+          }),
+        )}
+        onHoverIn={handleHoverIn}
+        onHoverOut={handleHoverOut}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onLongPress={handleLongPress}
+        onPress={handlePress}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+TooltipTrigger.displayName = 'TooltipTrigger';

package/src/tooltip/context.tsx

@@ -0,0 +1,5 @@
+import { createContext } from '@cdx-ui/utils';
+import type { TooltipContextValue } from './types';
+
+export const [TooltipProvider, useTooltipContext] =
+  createContext<TooltipContextValue>('TooltipContext');

package/src/tooltip/getTooltipPosition.ts

@@ -0,0 +1,147 @@
+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];
+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 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';
+  }
+
+  const segments = placement.split('-');
+  const side = segments[0] as TooltipSide;
+
+  if (segments.length === 1) {
+    return { side, align: 'center' };
+  }
+
+  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;
+  }
+
+  return axis === 'horizontal' ? anchor.x + anchor.width / 2 : anchor.y + anchor.height / 2;
+}
+
+export function getTooltipAnchorStyle(
+  anchor: AnchorLayout,
+  placement: TooltipPlacement,
+  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 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 };
+}

package/src/tooltip/index.ts

@@ -0,0 +1,19 @@
+export { TooltipProvider, useTooltipContext } from './context';
+export { TooltipRoot, type TooltipRootProps } from './TooltipRoot';
+export { TooltipTrigger, type TooltipTriggerProps } from './TooltipTrigger';
+export { TooltipContent, type TooltipContentProps } from './TooltipContent';
+export {
+  TOOLTIP_PLACEMENTS,
+  getTooltipAnchorStyle,
+  type TooltipPlacement,
+  type TooltipTriggerMode,
+  type TooltipSide,
+  type TooltipAlign,
+  type ResolvedTooltipPlacement,
+} from './getTooltipPosition';
+export type {
+  ITooltipProps,
+  ITooltipTriggerProps,
+  ITooltipContentProps,
+  TooltipContextValue,
+} from './types';