@cdx-ui/primitives 0.0.1-beta.65 → 0.0.1-beta.67

package/src/radio/{createRadioGroup.tsx → RadioGroup.tsx}

@@ -1,13 +1,21 @@
 import { forwardRef } from 'react';
+import { View, type ViewProps } from 'react-native';
 import { useFormControlContext } from '@cdx-ui/utils';
 import { useRadioGroup } from '@react-native-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
-import { dataAttributes } from '../utils/dataAttributes';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { RadioGroupContext } from './context';
 import type { IRadioGroupProps } from './types';
 
-export const createRadioGroup = <T,>(BaseRadioGroup: React.ComponentType<T>) =>
-  forwardRef(({ children, ...props }: IRadioGroupProps, ref?: React.Ref<T>) => {
+export interface RadioGroupRootProps extends IRadioGroupProps {
+  asChild?: boolean;
+  className?: string;
+  style?: ViewProps['style'];
+}
+
+export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
     const formControlContext = useFormControlContext();
 
     const combinedProps = {
@@ -33,6 +41,8 @@ export const createRadioGroup = <T,>(BaseRadioGroup: React.ComponentType<T>) =>
     const isRequired = combinedProps.isRequired ?? false;
     const isReadOnly = combinedProps.isReadOnly ?? false;
 
+    const Comp = asChild ? Slot : View;
+
     return (
       <RadioGroupContext.Provider
         value={{
@@ -48,20 +58,28 @@ export const createRadioGroup = <T,>(BaseRadioGroup: React.ComponentType<T>) =>
           name: combinedProps.name,
         }}
       >
-        <BaseRadioGroup
+        <Comp
           {...radioGroupProps}
-          {...(combinedProps as unknown as T)}
-          ref={ref}
+          aria-label={combinedProps['aria-label']}
+          aria-labelledby={combinedProps['aria-labelledby']}
           aria-required={isRequired || undefined}
           aria-readonly={isReadOnly || undefined}
-          {...dataAttributes({
-            slot: 'radio-group',
-            disabled: isDisabled,
-            invalid: isInvalid,
-          })}
+          className={className}
+          style={style}
+          ref={ref}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: isDisabled,
+              invalid: isInvalid,
+            }),
+          )}
         >
           {children}
-        </BaseRadioGroup>
+        </Comp>
       </RadioGroupContext.Provider>
     );
-  });
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';

package/src/radio/RadioRoot.tsx

@@ -0,0 +1,98 @@
+import { forwardRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps, IRadioContextValue } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+export interface RadioRootProps extends IRadioProps {
+  asChild?: boolean;
+}
+
+export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
+  (
+    { asChild, onPressIn, onPressOut, onHoverIn, onHoverOut, onFocus, onBlur, children, ...props },
+    ref,
+  ) => {
+    const {
+      isHovered: isHoveredProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isPressed: isPressedProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      inputProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      hoverProps,
+      mergedRef,
+    } = useRadioRoot(props, ref);
+
+    const { focusProps, isFocused } = useFocus();
+
+    const { pressProps, isPressed } = usePress({
+      isDisabled: isDisabled || isDisabledProp,
+    });
+
+    const contextValue: IRadioContextValue = {
+      isChecked,
+      isDisabled: isDisabled || isDisabledProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed: isPressed || isPressedProp,
+      isFocused: isFocused || isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <RadioProvider value={contextValue}>
+        <Comp
+          disabled={isDisabled || isDisabledProp}
+          {...pressProps}
+          {...(combinedProps as PressableProps)}
+          {...inputProps}
+          ref={mergedRef}
+          role="radio"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              focusVisible: isFocusVisibleProp,
+            }),
+          )}
+          onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(onFocus, focusProps.onFocus)}
+          onBlur={composeEventHandlers(onBlur, focusProps.onBlur)}
+        >
+          {children}
+        </Comp>
+      </RadioProvider>
+    );
+  },
+);
+
+RadioRoot.displayName = 'RadioRoot';

package/src/radio/RadioRoot.web.tsx

@@ -0,0 +1,90 @@
+import { forwardRef } from 'react';
+import { Pressable } from 'react-native';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { mergeProps } from '@react-aria/utils';
+import { useFocusRing } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { RadioProvider } from './context';
+import type { IRadioProps, IRadioContextValue } from './types';
+import { useRadioRoot } from './useRadioRoot';
+
+// TODO: Keyboard focus is not working as expected
+
+export interface RadioRootProps extends IRadioProps {
+  asChild?: boolean;
+}
+
+export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
+  ({ asChild, children, ...props }, ref) => {
+    const {
+      isHovered: isHoveredProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      isInvalid: isInvalidProp,
+      isReadOnly: isReadOnlyProp,
+      isFocused,
+      isPressed,
+    } = props;
+
+    const {
+      combinedProps,
+      isInvalid,
+      isReadOnly,
+      inputProps,
+      labelProps,
+      isChecked,
+      isDisabled,
+      isHovered,
+      mergedRef,
+      inputRef,
+    } = useRadioRoot(props, ref, { useInputRefForAria: true });
+
+    const { focusProps, isFocusVisible } = useFocusRing();
+
+    const contextValue: IRadioContextValue = {
+      isChecked,
+      isDisabled: isDisabled || isDisabledProp,
+      isFocusVisible: isFocusVisible || isFocusVisibleProp,
+      isHovered: isHovered || isHoveredProp,
+      isInvalid: isInvalid || isInvalidProp,
+      isReadOnly: isReadOnly || isReadOnlyProp,
+      isPressed,
+      isFocused,
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <RadioProvider value={contextValue}>
+        <Comp
+          {...mergeProps(combinedProps as any, labelProps as any, focusProps as any)}
+          ref={mergedRef}
+          role="label"
+          // eslint-disable-next-line react-native-a11y/has-valid-accessibility-role
+          accessibilityRole="label"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              checked: isChecked,
+              disabled: isDisabled || isDisabledProp,
+              hover: isHovered || isHoveredProp,
+              invalid: isInvalid || isInvalidProp,
+              readonly: isReadOnly || isReadOnlyProp,
+              active: isPressed,
+              focus: isFocused,
+              focusVisible: isFocusVisible || isFocusVisibleProp,
+            }),
+          )}
+        >
+          <VisuallyHidden>
+            <input {...inputProps} ref={inputRef} />
+          </VisuallyHidden>
+          {children}
+        </Comp>
+      </RadioProvider>
+    );
+  },
+);
+
+RadioRoot.displayName = 'RadioRoot';

package/src/radio/index.ts

@@ -1,37 +1,5 @@
-import type React from 'react';
-import { createRadioGroup } from './createRadioGroup';
-import { createRadioIndicator } from './createRadioIndicator';
-import { createRadioLabel } from './createRadioLabel';
-import { createRadioRoot } from './createRadioRoot';
-import type { IRadioComponentType } from './types';
+export type { IRadioProps, IRadioGroupProps, IRadioContextValue } from './types';
 
-export type {
-  IRadioComponentType,
-  IRadioGroupProps,
-  IRadioIndicatorProps,
-  IRadioLabelProps,
-  IRadioProps,
-} from './types';
-
-export function createRadio<Root, Indicator, Label, Group>(BaseComponents: {
-  Root: React.ComponentType<Root>;
-  Indicator: React.ComponentType<Indicator>;
-  Label: React.ComponentType<Label>;
-  Group: React.ComponentType<Group>;
-}) {
-  const Indicator = createRadioIndicator(BaseComponents.Indicator);
-  const Radio = createRadioRoot(BaseComponents.Root, Indicator);
-  const Label = createRadioLabel(BaseComponents.Label);
-  const Group = createRadioGroup(BaseComponents.Group);
-
-  Radio.displayName = 'RadioPrimitive';
-  Indicator.displayName = 'RadioPrimitive.Indicator';
-  Label.displayName = 'RadioPrimitive.Label';
-  Group.displayName = 'RadioPrimitive.Group';
-
-  return Object.assign(Radio, {
-    Indicator,
-    Label,
-    Group,
-  }) as IRadioComponentType<Root, Indicator, Label, Group>;
-}
+export { useRadioContext } from './context';
+export { RadioRoot, type RadioRootProps } from './RadioRoot';
+export { RadioGroup, type RadioGroupRootProps } from './RadioGroup';

package/src/radio/types.ts

@@ -33,28 +33,6 @@ export interface IRadioGroupProps {
   children?: React.ReactNode;
 }
 
-export interface IRadioIndicatorProps {
-  children?: React.ReactNode;
-}
-
-export interface IRadioLabelProps {
-  children?: React.ReactNode;
-}
-
-export type IRadioComponentType<Root, Indicator, Label, Group> = React.ForwardRefExoticComponent<
-  React.RefAttributes<Root> & React.PropsWithoutRef<Root> & IRadioProps
-> & {
-  Indicator: React.ForwardRefExoticComponent<
-    React.RefAttributes<Indicator> & React.PropsWithoutRef<Indicator> & IRadioIndicatorProps
-  >;
-  Label: React.ForwardRefExoticComponent<
-    React.RefAttributes<Label> & React.PropsWithoutRef<Label> & IRadioLabelProps
-  >;
-  Group: React.ForwardRefExoticComponent<
-    React.RefAttributes<Group> & React.PropsWithoutRef<Group> & IRadioGroupProps
-  >;
-};
-
 export interface IRadioContextValue {
   isChecked?: boolean;
   isDisabled?: boolean;

package/src/select/SelectContent.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef, useCallback, useRef, type ComponentRef } from 'react';
+import { Platform, ScrollView, 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 { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useSelectContext } from './context';
+import type { ISelectContentProps } from './types';
+import { useContentFocus } from './useContentFocus';
+import { useListboxNavigation } from './useListboxNavigation';
+
+export interface SelectContentProps extends ISelectContentProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const SelectContent = forwardRef<ComponentRef<typeof View>, SelectContentProps>(
+  ({ asChild, children, enteringAnimation, exitingAnimation, ...props }, ref) => {
+    const {
+      open,
+      setOpen,
+      contentId,
+      triggerId,
+      activeValue,
+      setActiveValue,
+      value,
+      onValueChange,
+      native,
+      triggerRef,
+      items,
+    } = useSelectContext();
+
+    const contentRef = useRef<HTMLElement | null>(null);
+
+    const focusOnMount = useCallback((node: unknown) => {
+      contentRef.current = node as HTMLElement | null;
+      if (node && Platform.OS === 'web') {
+        requestAnimationFrame(() => {
+          setTimeout(() => {
+            (node as HTMLElement).focus?.();
+          }, 100);
+        });
+      }
+    }, []);
+
+    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);
+
+    useDismissOverlay(open, contentRef, [triggerRef], dismiss);
+
+    const { handleKeyDown } = useListboxNavigation({
+      items,
+      activeValue,
+      setActiveValue,
+      onSelect: (val) => {
+        onValueChange(val);
+        setOpen(false);
+      },
+      onDismiss: dismiss,
+    });
+
+    useContentFocus({
+      open,
+      triggerRef,
+      items,
+      value,
+      setActiveValue,
+    });
+
+    if (native || !open || !position) {
+      return null;
+    }
+
+    const webProps =
+      Platform.OS === 'web'
+        ? {
+            onKeyDown: composeEventHandlers(
+              (props as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+              handleKeyDown,
+            ),
+            tabIndex: -1,
+          }
+        : {};
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <OverlayContainer
+        onDismiss={dismiss}
+        entering={enteringAnimation ?? FadeIn.duration(150)}
+        exiting={exitingAnimation ?? FadeOut.duration(100)}
+        style={position.style}
+      >
+        <Comp
+          ref={mergedRef}
+          role="listbox"
+          id={contentId}
+          aria-labelledby={triggerId}
+          {...props}
+          {...mergeDataAttributes(props, dataAttributes({ state: 'open' }))}
+          {...webProps}
+        >
+          <ScrollView scrollEventThrottle={16}>{children}</ScrollView>
+        </Comp>
+      </OverlayContainer>
+    );
+  },
+);
+
+SelectContent.displayName = 'SelectContent';

package/src/select/SelectItem.tsx

@@ -0,0 +1,139 @@
+import { forwardRef, useCallback, useMemo, type ComponentRef, type ReactNode } from 'react';
+import { Pressable } from 'react-native';
+import { composeEventHandlers } 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 { SelectItemProvider, useSelectContext } from './context';
+import type { ISelectItemProps } from './types';
+
+export interface SelectItemProps extends Omit<ISelectItemProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+}
+
+export const SelectItem = forwardRef<ComponentRef<typeof Pressable>, SelectItemProps>(
+  (
+    {
+      asChild,
+      children,
+      value: itemValue,
+      disabled: disabledProp = false,
+      isHovered: isHoveredProp,
+      isActive: isActiveProp,
+      isFocused: isFocusedProp,
+      isFocusVisible: isFocusVisibleProp,
+      isDisabled: isDisabledProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      value: selectedValue,
+      onValueChange,
+      setOpen,
+      activeValue,
+      contentId,
+      disabled: contextDisabled,
+    } = useSelectContext();
+
+    const disabled = contextDisabled || !!disabledProp || !!isDisabledProp;
+    const checked = selectedValue === itemValue;
+    const highlighted = activeValue === itemValue;
+
+    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 handlePress = useCallback(() => {
+      if (!disabled) {
+        onValueChange(itemValue);
+        setOpen(false);
+      }
+    }, [disabled, itemValue, onValueChange, setOpen]);
+
+    const interactionState = useMemo(
+      () => ({
+        hover: !!(isHoveredProp || isHovered),
+        focus: !!(isFocusedProp || isFocused),
+        active: !!(isActiveProp || isActive),
+        disabled: !!disabled,
+        focusVisible: !!(isFocusVisibleProp || isFocusVisible),
+        highlighted,
+        checked,
+      }),
+      [
+        isHoveredProp,
+        isHovered,
+        isFocusedProp,
+        isFocused,
+        isActiveProp,
+        isActive,
+        disabled,
+        isFocusVisibleProp,
+        isFocusVisible,
+        highlighted,
+        checked,
+      ],
+    );
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <SelectItemProvider value={interactionState}>
+        <Comp
+          ref={ref}
+          role="option"
+          id={`${contentId}-option-${itemValue}`}
+          aria-selected={checked}
+          aria-disabled={disabled}
+          disabled={disabled}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              hover: interactionState.hover,
+              focus: interactionState.focus,
+              active: interactionState.active,
+              disabled: interactionState.disabled,
+              focusVisible: interactionState.focusVisible,
+              highlighted: interactionState.highlighted,
+              state: checked ? 'checked' : 'unchecked',
+            }),
+          )}
+          onPress={composeEventHandlers(props?.onPress, handlePress)}
+          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,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(
+              props?.onBlur as (...args: unknown[]) => unknown,
+              focusProps.onBlur,
+            ),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </SelectItemProvider>
+    );
+  },
+);
+
+SelectItem.displayName = 'SelectItem';