@cdx-ui/primitives 0.0.1-beta.99 → 0.1.1

package/src/link/types.ts

@@ -28,10 +28,30 @@ export interface ILinkProps extends PressableProps {
    * Defaults to `'navigate'`.
    */
   action?: LinkAction;
+  /**
+   * If true, the link will be in pressed state.
+   * @internal
+   */
   isPressed?: boolean;
+  /**
+   * If true, the link will be in hovered state.
+   * @internal
+   */
   isHovered?: boolean;
+  /**
+   * If true, the link will be focused.
+   * @internal
+   */
   isFocused?: boolean;
+  /**
+   * If true, the link focus ring will be visible.
+   * @internal
+   */
   isFocusVisible?: boolean;
+  /**
+   * If true, the link will render in its visited style (native).
+   * On web, visited styling is driven by the CSS `:visited` pseudo-class.
+   */
   isVisited?: boolean;
   /**
    * HTML anchor attributes applied only on web. Ignored on native platforms.

package/src/menu/MenuCheckboxItem.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable } from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { MenuItem } from './MenuItem';
+import type { IMenuCheckboxItemProps } from './types';
+
+export interface MenuCheckboxItemProps extends IMenuCheckboxItemProps {
+  asChild?: boolean;
+}
+
+export const MenuCheckboxItem = forwardRef<ComponentRef<typeof Pressable>, MenuCheckboxItemProps>(
+  (
+    {
+      asChild,
+      children,
+      isChecked: checkedProp,
+      defaultIsChecked = false,
+      onChange,
+      onPress,
+      closeOnSelect = false,
+      ...props
+    },
+    ref,
+  ) => {
+    const [checked = false, setCheckedState] = useControllableState<boolean>({
+      prop: checkedProp,
+      defaultProp: defaultIsChecked,
+    });
+    const toggleChecked = () => {
+      const nextChecked = !checked;
+      setCheckedState(nextChecked);
+      onChange?.(nextChecked);
+    };
+
+    return (
+      <MenuItem
+        ref={ref}
+        asChild={asChild}
+        itemRole="menuitemcheckbox"
+        isChecked={checked}
+        closeOnSelect={closeOnSelect}
+        onPress={composeEventHandlers(onPress, toggleChecked)}
+        {...props}
+      >
+        {children}
+      </MenuItem>
+    );
+  },
+);
+
+MenuCheckboxItem.displayName = 'MenuCheckboxItem';

package/src/menu/MenuItem.tsx

@@ -0,0 +1,197 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  type ComponentRef,
+  type ReactNode,
+} from 'react';
+import { Platform, Pressable, type GestureResponderEvent, type PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { MenuItemProvider, useMenuContext } from './context';
+import type { IMenuItemProps } from './types';
+
+export interface MenuItemProps extends Omit<IMenuItemProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export const MenuItem = forwardRef<ComponentRef<typeof Pressable>, MenuItemProps>(
+  (
+    {
+      asChild,
+      children,
+      itemRole = 'menuitem',
+      isChecked = false,
+      disabled: disabledProp = false,
+      closeOnSelect: closeOnSelectProp,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      onPress,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      menuId,
+      registerItem,
+      unregisterItem,
+      focusedItemId,
+      setFocusedItemId,
+      closeOnSelect: closeOverlayOnSelect,
+      dismissOverlay,
+    } = useMenuContext();
+
+    const reactId = useId();
+    const itemId = `menu-item-${reactId}`;
+    const domId = props.id ?? `${menuId}-item-${reactId}`;
+    const disabled = !!disabledProp || !!isDisabledProp;
+    const highlighted = focusedItemId === itemId;
+    const isSelectable = itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio';
+    const closeOnSelect = closeOnSelectProp ?? closeOverlayOnSelect;
+    const resolvedRole: PressableProps['role'] =
+      Platform.OS === 'web'
+        ? (itemRole as PressableProps['role'])
+        : itemRole === 'menuitemcheckbox'
+          ? 'checkbox'
+          : itemRole === 'menuitemradio'
+            ? 'radio'
+            : 'menuitem';
+
+    const nodeRef = useRef<ComponentRef<typeof Pressable> | null>(null);
+    const mergedRef = mergeRefs(ref, nodeRef);
+    const onPressRef = useRef(onPress);
+    onPressRef.current = onPress;
+
+    const invokePress = useCallback(
+      (event: GestureResponderEvent) => {
+        if (!disabled) {
+          onPressRef.current?.(event);
+          if (closeOnSelect) {
+            dismissOverlay?.('select');
+          }
+        }
+      },
+      [disabled, closeOnSelect, dismissOverlay],
+    );
+
+    useEffect(() => {
+      registerItem(itemId, {
+        disabled,
+        node: nodeRef.current as { focus?: () => void } | null,
+      });
+      return () => unregisterItem(itemId);
+    }, [itemId, disabled, registerItem, unregisterItem]);
+
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: {
+        onFocus?: (...args: unknown[]) => unknown;
+        onBlur?: (...args: unknown[]) => unknown;
+      };
+    };
+    const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+    const { isFocused, focusProps } = useFocus();
+    const { isHovered, hoverProps } = useHover();
+
+    const interactionState = useMemo(
+      () => ({
+        hover: !!(isHoveredProp || isHovered),
+        focus: !!(isFocusedProp || isFocused),
+        active: !!(isActiveProp || isActive),
+        disabled: !!disabled,
+        focusVisible: !!(isFocusVisibleProp || isFocusVisible),
+        highlighted,
+        checked: isChecked,
+      }),
+      [
+        isHoveredProp,
+        isHovered,
+        isFocusedProp,
+        isFocused,
+        isActiveProp,
+        isActive,
+        disabled,
+        isFocusVisibleProp,
+        isFocusVisible,
+        highlighted,
+        isChecked,
+      ],
+    );
+
+    const isRovingTabStop = highlighted;
+    const webProps = Platform.OS === 'web' ? { tabIndex: isRovingTabStop ? 0 : -1 } : {};
+
+    const handlePressWithFocus = useCallback(
+      (_: GestureResponderEvent) => {
+        if (!disabled) {
+          setFocusedItemId(itemId);
+        }
+      },
+      [disabled, itemId, setFocusedItemId],
+    );
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <MenuItemProvider value={interactionState}>
+        <Comp
+          ref={mergedRef}
+          role={resolvedRole}
+          id={domId}
+          aria-checked={isSelectable ? isChecked : undefined}
+          aria-disabled={disabled}
+          disabled={disabled}
+          accessibilityState={{ disabled, ...(isSelectable ? { checked: isChecked } : {}) }}
+          {...webProps}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: interactionState.hover,
+              focus: interactionState.focus,
+              active: interactionState.active,
+              disabled: interactionState.disabled,
+              focusVisible: interactionState.focusVisible,
+              highlighted: interactionState.highlighted,
+              state: isSelectable ? (isChecked ? 'checked' : 'unchecked') : undefined,
+            }),
+          )}
+          onPress={composeEventHandlers(invokePress, handlePressWithFocus)}
+          onPressIn={composeEventHandlers(props?.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(props?.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(props?.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(props?.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(
+              props?.onFocus as (...args: unknown[]) => unknown,
+              focusProps.onFocus,
+            ),
+            focusRingProps.onFocus,
+            () => setFocusedItemId(itemId),
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(
+              props?.onBlur as (...args: unknown[]) => unknown,
+              focusProps.onBlur,
+            ),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </MenuItemProvider>
+    );
+  },
+);
+
+MenuItem.displayName = 'MenuItem';

package/src/menu/MenuOverlayRoot.tsx

@@ -0,0 +1,100 @@
+import { forwardRef, useCallback, useId, useMemo, useRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { MenuOverlayProvider, type MenuFocusOnOpen } from './overlayContext';
+import type { IMenuOverlayRootProps, MenuCloseReason } from './types';
+
+export interface MenuOverlayRootProps extends IMenuOverlayRootProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const MenuOverlayRoot = forwardRef<ComponentRef<typeof View>, MenuOverlayRootProps>(
+  (
+    {
+      asChild,
+      children,
+      isOpen: openProp,
+      defaultOpen = false,
+      onOpenChange,
+      disabled = false,
+      placement = 'bottom-start',
+      offset = 4,
+      crossOffset = 0,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpenState] = useControllableState<boolean>({
+      prop: openProp,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const closeReasonRef = useRef<MenuCloseReason>('programmatic');
+
+    const setOpen = useCallback(
+      (nextOpen: boolean) => {
+        if (disabled && nextOpen) {
+          return;
+        }
+        if (nextOpen) {
+          closeReasonRef.current = 'programmatic';
+        }
+        setOpenState(nextOpen);
+      },
+      [disabled, setOpenState],
+    );
+
+    const triggerRef = useRef<ComponentRef<typeof View> | null>(null);
+    const contentRef = useRef<ComponentRef<typeof View> | null>(null);
+    const focusOnOpenRef = useRef<MenuFocusOnOpen>('menu');
+    const reactId = useId();
+    const triggerId = `menu-trigger-${reactId}`;
+    const menuId = `menu-content-${reactId}`;
+
+    const closeMenu = useCallback(
+      (reason: MenuCloseReason = 'programmatic') => {
+        closeReasonRef.current = reason;
+        setOpen(false);
+      },
+      [setOpen],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        open: open ?? false,
+        setOpen,
+        closeMenu,
+        disabled,
+        placement,
+        offset,
+        crossOffset,
+        triggerRef,
+        triggerId,
+        menuId,
+        contentRef,
+        focusOnOpenRef,
+        closeReasonRef,
+      }),
+      [open, setOpen, closeMenu, disabled, placement, offset, crossOffset, triggerId, menuId],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <MenuOverlayProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ slot: 'menu' }))}
+        >
+          {children}
+        </Comp>
+      </MenuOverlayProvider>
+    );
+  },
+);
+
+MenuOverlayRoot.displayName = 'MenuOverlayRoot';

package/src/menu/MenuPopup.tsx

@@ -0,0 +1,81 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
+import { OverlayContainer, useAnchoredOverlay, useDismissOverlay, useEscapeKey } from '../overlay';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { MenuPopupProvider, useMenuOverlayContext } from './overlayContext';
+import type { IMenuPopupProps } from './types';
+import { useMenuOverlayCloseFocus } from './useMenuOverlayLifecycle';
+
+export interface MenuPopupProps extends IMenuPopupProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const MenuPopup = forwardRef<ComponentRef<typeof View>, MenuPopupProps>(
+  ({ asChild, children, onLayout, style, ...props }, ref) => {
+    const overlay = useMenuOverlayContext();
+    const { open, closeMenu, triggerRef, placement, offset, crossOffset } = overlay;
+
+    const dismiss = () => closeMenu('outside');
+
+    const {
+      floatingRef,
+      onFloatingLayout,
+      style: overlayStyle,
+      position,
+    } = useAnchoredOverlay(triggerRef, open, {
+      placement,
+      offset,
+      crossOffset,
+      collisionBehavior: 'flip-shift',
+      width: 'content',
+    });
+
+    useDismissOverlay(open, floatingRef, [triggerRef], dismiss);
+    useEscapeKey(open, () => closeMenu('escape'));
+    useMenuOverlayCloseFocus(overlay);
+
+    if (!open) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <MenuPopupProvider
+        value={{
+          availableHeight: position?.availableHeight,
+          availableWidth: position?.availableWidth,
+        }}
+      >
+        <OverlayContainer
+          onDismiss={dismiss}
+          entering={FadeIn.duration(150)}
+          exiting={FadeOut.duration(100)}
+        >
+          <Comp
+            ref={mergeRefs(ref, floatingRef)}
+            onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+            style={[style, overlayStyle]}
+            {...props}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                slot: 'menu-popup',
+                side: position?.resolvedPlacement.side,
+                align: position?.resolvedPlacement.align,
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </OverlayContainer>
+      </MenuPopupProvider>
+    );
+  },
+);
+
+MenuPopup.displayName = 'MenuPopup';

package/src/menu/MenuRadioGroup.tsx

@@ -0,0 +1,48 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { MenuRadioGroupProvider } from './context';
+import type { IMenuRadioGroupProps } from './types';
+
+export interface MenuRadioGroupProps extends IMenuRadioGroupProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const MenuRadioGroup = forwardRef<ComponentRef<typeof View>, MenuRadioGroupProps>(
+  ({ asChild, children, value: valueProp, defaultValue, onChange, ...props }, ref) => {
+    const [value, setValueState] = useControllableState<string>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+    });
+    const setValue = useCallback(
+      (nextValue: string) => {
+        if (nextValue === value) {
+          return;
+        }
+        setValueState(nextValue);
+        onChange?.(nextValue);
+      },
+      [onChange, setValueState, value],
+    );
+    const contextValue = useMemo(
+      () => ({
+        value,
+        setValue,
+      }),
+      [setValue, value],
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <MenuRadioGroupProvider value={contextValue}>
+        <Comp ref={ref} role="group" {...props}>
+          {children}
+        </Comp>
+      </MenuRadioGroupProvider>
+    );
+  },
+);
+
+MenuRadioGroup.displayName = 'MenuRadioGroup';

package/src/menu/MenuRadioItem.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { Pressable } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useMenuRadioGroupContext } from './context';
+import { MenuItem } from './MenuItem';
+import type { IMenuRadioItemProps } from './types';
+
+export interface MenuRadioItemProps extends IMenuRadioItemProps {
+  asChild?: boolean;
+}
+
+export const MenuRadioItem = forwardRef<ComponentRef<typeof Pressable>, MenuRadioItemProps>(
+  ({ asChild, children, value, onPress, ...props }, ref) => {
+    const radioGroup = useMenuRadioGroupContext();
+    const checked = radioGroup.value === value;
+
+    return (
+      <MenuItem
+        ref={ref}
+        asChild={asChild}
+        itemRole="menuitemradio"
+        isChecked={checked}
+        onPress={composeEventHandlers(onPress, () => radioGroup.setValue(value))}
+        {...props}
+      >
+        {children}
+      </MenuItem>
+    );
+  },
+);
+
+MenuRadioItem.displayName = 'MenuRadioItem';