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

package/src/portal/portal.tsx

@@ -1,64 +1,176 @@
 import * as React from 'react';
 import { useEffect, useSyncExternalStore } from 'react';
 import { Platform, type View, type ViewStyle } from 'react-native';
+import { createPortalFn } from '../utils/createPortal';
 
 const DEFAULT_PORTAL_HOST = 'FORGE_UI_DEFAULT_HOST_NAME';
 
 type PortalMap = Map<string, React.ReactNode>;
 type PortalHostMap = Map<string, PortalMap>;
 
-interface PortalStore {
+interface PortalRegistry {
   map: PortalHostMap;
-  listeners: Set<() => void>;
+  hostStacks: Map<string, symbol[]>;
+  portalListeners: Set<() => void>;
+  hostListeners: Set<() => void>;
+  hasWarnedMultipleHosts: boolean;
 }
 
-const store: PortalStore = {
-  map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map<string, React.ReactNode>()),
-  listeners: new Set(),
-};
+function createPortalRegistry(): PortalRegistry {
+  return {
+    map: new Map<string, PortalMap>().set(DEFAULT_PORTAL_HOST, new Map()),
+    hostStacks: new Map(),
+    portalListeners: new Set(),
+    hostListeners: new Set(),
+    hasWarnedMultipleHosts: false,
+  };
+}
 
-// --------------------------------------------------
+/**
+ * Standalone Portal and PortalHost instances continue to share this fallback.
+ * PortalProvider creates an isolated registry for each provider subtree.
+ */
+const fallbackPortalRegistry = createPortalRegistry();
+const PortalRegistryContext = React.createContext<PortalRegistry | null>(null);
+
+function emitPortals(registry: PortalRegistry) {
+  for (const cb of registry.portalListeners) cb();
+}
+
+function emitHosts(registry: PortalRegistry) {
+  for (const cb of registry.hostListeners) cb();
+}
+
+function subscribeHosts(registry: PortalRegistry, cb: () => void) {
+  registry.hostListeners.add(cb);
+  return () => {
+    registry.hostListeners.delete(cb);
+  };
+}
+
+function pushPortalHost(registry: PortalRegistry, name: string, id: symbol) {
+  const stacks = new Map(registry.hostStacks);
+  const stack = [...(stacks.get(name) ?? [])];
+  stack.push(id);
+  stacks.set(name, stack);
+  registry.hostStacks = stacks;
+
+  if (__DEV__ && !registry.hasWarnedMultipleHosts && stack.length > 1) {
+    registry.hasWarnedMultipleHosts = true;
+    console.warn(
+      '[Forge UI] Multiple PortalHost instances detected for the same host name. ' +
+        'Only the first mounted PortalHost renders portal content. ' +
+        'Mount a single PortalHost near your app root (ForgeDesignProvider does this automatically).',
+    );
+  }
+
+  emitHosts(registry);
+}
 
-function emit() {
-  for (const cb of store.listeners) cb();
+function popPortalHost(registry: PortalRegistry, name: string, id: symbol) {
+  const stacks = new Map(registry.hostStacks);
+  const stack = (stacks.get(name) ?? []).filter((entry) => entry !== id);
+  if (stack.length === 0) {
+    stacks.delete(name);
+  } else {
+    stacks.set(name, stack);
+  }
+  registry.hostStacks = stacks;
+  emitHosts(registry);
 }
 
-function getSnapshot() {
-  return store.map;
+function isActivePortalHost(registry: PortalRegistry, name: string, id: symbol) {
+  const stack = registry.hostStacks.get(name) ?? [];
+  return stack.length > 0 && stack[0] === id;
 }
 
-function subscribe(cb: () => void) {
-  store.listeners.add(cb);
+function subscribePortals(registry: PortalRegistry, cb: () => void) {
+  registry.portalListeners.add(cb);
   return () => {
-    store.listeners.delete(cb);
+    registry.portalListeners.delete(cb);
   };
 }
 
-function updatePortal(hostName: string, name: string, children: React.ReactNode) {
-  const next = new Map(store.map);
-  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+function updatePortal(
+  registry: PortalRegistry,
+  hostName: string,
+  name: string,
+  children: React.ReactNode,
+) {
+  const next = new Map(registry.map);
+  const portal = new Map(next.get(hostName) ?? []);
   portal.set(name, children);
   next.set(hostName, portal);
-  store.map = next;
-  emit();
+  registry.map = next;
+  emitPortals(registry);
 }
 
-function removePortal(hostName: string, name: string) {
-  const next = new Map(store.map);
-  const portal = next.get(hostName) ?? new Map<string, React.ReactNode>();
+function removePortal(registry: PortalRegistry, hostName: string, name: string) {
+  const next = new Map(registry.map);
+  const portal = new Map(next.get(hostName) ?? []);
   portal.delete(name);
-  next.set(hostName, portal);
-  store.map = next;
-  emit();
+  if (portal.size === 0 && hostName !== DEFAULT_PORTAL_HOST) {
+    next.delete(hostName);
+  } else {
+    next.set(hostName, portal);
+  }
+  registry.map = next;
+  emitPortals(registry);
+}
+
+// --------------------------------------------------
+
+export function PortalProvider({ children }: Readonly<{ children: React.ReactNode }>) {
+  const [registry] = React.useState(createPortalRegistry);
+
+  return (
+    <PortalRegistryContext.Provider value={registry}>{children}</PortalRegistryContext.Provider>
+  );
 }
 
 // --------------------------------------------------
 
 export function PortalHost({ name = DEFAULT_PORTAL_HOST }: { name?: string }) {
-  const map = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const registry = React.useContext(PortalRegistryContext) ?? fallbackPortalRegistry;
+  const hostId = React.useRef(Symbol()).current;
+
+  useEffect(() => {
+    pushPortalHost(registry, name, hostId);
+    return () => {
+      popPortalHost(registry, name, hostId);
+    };
+  }, [registry, name, hostId]);
+
+  useSyncExternalStore(
+    (cb) => subscribeHosts(registry, cb),
+    () => registry.hostStacks,
+    () => registry.hostStacks,
+  );
+
+  const map = useSyncExternalStore(
+    (cb) => subscribePortals(registry, cb),
+    () => registry.map,
+    () => registry.map,
+  );
   const portalMap = map.get(name) ?? new Map<string, React.ReactNode>();
-  if (portalMap.size === 0) return null;
-  return <>{Array.from(portalMap.values())}</>;
+
+  if (!isActivePortalHost(registry, name, hostId) || portalMap.size === 0) {
+    return null;
+  }
+
+  const content = (
+    <>
+      {Array.from(portalMap.entries()).map(([portalName, children]) => (
+        <React.Fragment key={portalName}>{children}</React.Fragment>
+      ))}
+    </>
+  );
+
+  if (Platform.OS === 'web' && createPortalFn && typeof document !== 'undefined') {
+    return createPortalFn(content, document.body);
+  }
+
+  return content;
 }
 
 // --------------------------------------------------
@@ -72,12 +184,17 @@ export function Portal({
   hostName?: string;
   children: React.ReactNode;
 }) {
+  const registry = React.useContext(PortalRegistryContext) ?? fallbackPortalRegistry;
+
+  useEffect(() => {
+    updatePortal(registry, hostName, name, children);
+  }, [registry, hostName, name, children]);
+
   useEffect(() => {
-    updatePortal(hostName, name, children);
     return () => {
-      removePortal(hostName, name);
+      removePortal(registry, hostName, name);
     };
-  }, [hostName, name, children]);
+  }, [registry, hostName, name]);
 
   return null;
 }

package/src/radio/RadioGroup.tsx

@@ -1,12 +1,13 @@
-import { forwardRef } from 'react';
-import { View, type ViewProps } from 'react-native';
-import { useFormControlContext } from '@cdx-ui/utils';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { composeEventHandlers, useFormControl } from '@cdx-ui/utils';
 import { useRadioGroup } from '@react-native-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { RadioGroupContext } from './context';
-import type { IRadioGroupProps } from './types';
+import type { IRadioGroupProps, RegisteredRadio } from './types';
+import { useRadioGroupNavigation } from './useRadioGroupNavigation';
 
 export interface RadioGroupRootProps extends IRadioGroupProps {
   asChild?: boolean;
@@ -16,30 +17,86 @@ export interface RadioGroupRootProps extends IRadioGroupProps {
 
 export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
   ({ asChild, children, className, style, ...props }, ref) => {
-    const formControlContext = useFormControlContext();
+    const formControlProps = useFormControl({
+      isDisabled: props.isDisabled,
+      isRequired: props.isRequired,
+      isInvalid: props.isInvalid,
+      isReadOnly: props.isReadOnly,
+    });
 
-    const combinedProps = {
-      ...formControlContext,
-      ...props,
-    };
+    const isDisabled = props.isDisabled ?? Boolean(formControlProps.disabled);
+    const isInvalid = props.isInvalid ?? Boolean(formControlProps['aria-invalid']);
+    const isRequired = props.isRequired ?? Boolean(formControlProps.required);
+    const isReadOnly = props.isReadOnly ?? Boolean(formControlProps.readOnly);
+    const name = props.name ?? formControlProps.name;
+    const ariaLabel = props['aria-label'];
+    const ariaLabelledBy = props['aria-labelledby'] ?? formControlProps['aria-labelledby'];
+    const ariaDescribedBy = formControlProps['aria-describedby'];
 
     const radioGroupState = useRadioGroupState({
-      ...combinedProps,
-      validationState: combinedProps.isInvalid ? 'invalid' : 'valid',
+      name,
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onChange: props.onChange,
+      isDisabled,
+      isInvalid,
+      isRequired,
+      isReadOnly,
+      validationState: isInvalid ? 'invalid' : 'valid',
     });
 
     const { radioGroupProps } = useRadioGroup(
       {
-        ...combinedProps,
-        'aria-label': combinedProps['aria-label'],
+        'aria-label': ariaLabel,
+        'aria-labelledby': ariaLabelledBy,
+        isDisabled,
       },
       radioGroupState,
     );
 
-    const isDisabled = combinedProps.isDisabled ?? false;
-    const isInvalid = combinedProps.isInvalid ?? false;
-    const isRequired = combinedProps.isRequired ?? false;
-    const isReadOnly = combinedProps.isReadOnly ?? false;
+    const [focusedValue, setFocusedValue] = useState<string | undefined>(undefined);
+    // Identity of getRadios depends on this so roving tabIndex recomputes after register/unregister.
+    const [registrationEpoch, setRegistrationEpoch] = useState(0);
+    const radiosRef = useRef<Map<string, RegisteredRadio>>(new Map());
+
+    useEffect(() => {
+      setFocusedValue((prev) =>
+        prev !== undefined && prev !== radioGroupState.selectedValue ? undefined : prev,
+      );
+    }, [radioGroupState.selectedValue]);
+
+    const registerRadio = useCallback((value: string, entry: RegisteredRadio) => {
+      radiosRef.current.set(value, entry);
+      setRegistrationEpoch((epoch) => epoch + 1);
+    }, []);
+
+    const unregisterRadio = useCallback((value: string) => {
+      radiosRef.current.delete(value);
+      setRegistrationEpoch((epoch) => epoch + 1);
+    }, []);
+
+    const getRadios = useCallback(
+      () => Array.from(radiosRef.current.entries()),
+      [registrationEpoch],
+    );
+
+    const { handleKeyDown } = useRadioGroupNavigation({
+      getRadios,
+      focusedValue,
+      setFocusedValue,
+      selectedValue: radioGroupState.selectedValue,
+      selectValue: (value: string) => radioGroupState.setSelectedValue(value),
+    });
+
+    const webProps =
+      Platform.OS === 'web'
+        ? {
+            onKeyDown: composeEventHandlers(
+              (props as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+              handleKeyDown,
+            ),
+          }
+        : {};
 
     const Comp = asChild ? Slot : View;
 
@@ -55,18 +112,25 @@ export const RadioGroup = forwardRef<View, RadioGroupRootProps>(
             selectValue: (value: string) => radioGroupState.setSelectedValue(value),
           },
           radioGroupState,
-          name: combinedProps.name,
+          name,
+          focusedValue,
+          setFocusedValue,
+          registerRadio,
+          unregisterRadio,
+          getRadios,
         }}
       >
         <Comp
           {...radioGroupProps}
-          aria-label={combinedProps['aria-label']}
-          aria-labelledby={combinedProps['aria-labelledby']}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
+          aria-describedby={ariaDescribedBy}
           aria-required={isRequired || undefined}
           aria-readonly={isReadOnly || undefined}
           className={className}
           style={style}
           ref={ref}
+          {...webProps}
           {...mergeDataAttributes(
             props,
             dataAttributes({

package/src/radio/RadioRoot.web.tsx

@@ -1,20 +1,27 @@
-import { forwardRef } from 'react';
+import { forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
 import { Pressable } from 'react-native';
 import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { mergeProps } from '@react-aria/utils';
+import { composeEventHandlers, mergeRefs } from '@cdx-ui/utils';
 import { useFocusRing } from '@react-native-aria/focus';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
-import { RadioProvider } from './context';
+import { RadioGroupContext, RadioProvider } from './context';
 import type { IRadioProps, IRadioContextValue } from './types';
 import { useRadioRoot } from './useRadioRoot';
-
-// TODO: Keyboard focus is not working as expected
+import { getRovingFocusValue } from './useRadioGroupNavigation';
 
 export interface RadioRootProps extends IRadioProps {
   asChild?: boolean;
 }
 
+/**
+ * Web Radio root.
+ *
+ * On web, `@react-native-aria/radio` re-exports `@react-aria/radio`'s `useRadio`,
+ * whose `inputProps` target a native `<input type="radio">` (selection via
+ * `onChange`). Selection must be applied explicitly on the Pressable —
+ * `inputProps.onPress` does **not** call `setSelectedValue`.
+ */
 export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioRootProps>(
   ({ asChild, children, ...props }, ref) => {
     const {
@@ -27,12 +34,13 @@ export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioR
       isPressed,
     } = props;
 
+    const radioGroupContext = useContext(RadioGroupContext);
+
     const {
       combinedProps,
       isInvalid,
       isReadOnly,
       inputProps,
-      labelProps,
       isChecked,
       isDisabled,
       isHovered,
@@ -42,13 +50,80 @@ export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioR
 
     const { focusProps, isFocusVisible } = useFocusRing();
 
+    const nodeRef = useRef<React.ComponentRef<typeof Pressable> | null>(null);
+    const setRefs = mergeRefs(mergedRef, nodeRef);
+
+    // Strip native-input / internal props — they must not land on Pressable.
+    const {
+      onPress: _onPress,
+      onChange: _onChange,
+      role: _role,
+      tabIndex: _tabIndex,
+      disabled: _disabled,
+      checked: _checked,
+      value: _value,
+      type: _type,
+      name: _name,
+      form: _form,
+      required: _required,
+      ...inputAriaProps
+    } = inputProps;
+
+    const resolvedDisabled = !!(isDisabled || isDisabledProp);
+    const resolvedReadOnly = !!(isReadOnly || isReadOnlyProp);
+
+    const selectThis = () => {
+      if (resolvedDisabled || resolvedReadOnly) {
+        return;
+      }
+      radioGroupContext?.radioGroupState.setSelectedValue(combinedProps.value);
+    };
+
+    const selectedValue = radioGroupContext?.radioGroupState.selectedValue;
+    const focusedValue = radioGroupContext?.focusedValue;
+    const registerRadio = radioGroupContext?.registerRadio;
+    const unregisterRadio = radioGroupContext?.unregisterRadio;
+    const getRadios = radioGroupContext?.getRadios;
+    const groupName = radioGroupContext?.name;
+
+    useEffect(() => {
+      if (!registerRadio || !unregisterRadio) {
+        return;
+      }
+
+      registerRadio(combinedProps.value, {
+        disabled: !!resolvedDisabled,
+        node: nodeRef.current as { focus?: () => void } | null,
+      });
+
+      return () => unregisterRadio(combinedProps.value);
+    }, [combinedProps.value, resolvedDisabled, registerRadio, unregisterRadio]);
+
+    const isRovingTabStop = useMemo(() => {
+      if (resolvedDisabled) {
+        return false;
+      }
+
+      const enabledRadios = getRadios?.().filter(([, entry]) => !entry.disabled) ?? [];
+      const rovingValue = getRovingFocusValue(focusedValue, selectedValue, enabledRadios);
+
+      return combinedProps.value === rovingValue;
+    }, [combinedProps.value, focusedValue, getRadios, resolvedDisabled, selectedValue]);
+
+    const handleKeyDown = (event: { key: string; preventDefault: () => void }) => {
+      if (event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        selectThis();
+      }
+    };
+
     const contextValue: IRadioContextValue = {
       isChecked,
-      isDisabled: isDisabled || isDisabledProp,
+      isDisabled: resolvedDisabled,
       isFocusVisible: isFocusVisible || isFocusVisibleProp,
       isHovered: isHovered || isHoveredProp,
       isInvalid: isInvalid || isInvalidProp,
-      isReadOnly: isReadOnly || isReadOnlyProp,
+      isReadOnly: resolvedReadOnly,
       isPressed,
       isFocused,
     };
@@ -57,31 +132,61 @@ export const RadioRoot = forwardRef<React.ComponentRef<typeof Pressable>, RadioR
 
     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} />
+            <input
+              ref={inputRef as React.RefObject<HTMLInputElement>}
+              type="radio"
+              name={groupName}
+              value={combinedProps.value}
+              checked={!!isChecked}
+              disabled={resolvedDisabled}
+              tabIndex={-1}
+              aria-hidden
+              readOnly
+              // Decorative form mirror — pointer events must not steal clicks from Pressable.
+              style={{ pointerEvents: 'none' }}
+            />
           </VisuallyHidden>
-          {children}
-        </Comp>
+          <Comp
+            {...(combinedProps as object)}
+            {...inputAriaProps}
+            ref={setRefs}
+            role="radio"
+            aria-checked={isChecked}
+            aria-disabled={resolvedDisabled || undefined}
+            accessibilityRole="radio"
+            accessibilityState={{ checked: isChecked, disabled: resolvedDisabled }}
+            tabIndex={resolvedDisabled ? -1 : isRovingTabStop ? 0 : -1}
+            disabled={resolvedDisabled}
+            {...focusProps}
+            onPress={selectThis}
+            onClick={selectThis}
+            onKeyDown={composeEventHandlers(
+              (
+                combinedProps as {
+                  onKeyDown?: (e: { key: string; preventDefault: () => void }) => void;
+                }
+              ).onKeyDown,
+              handleKeyDown,
+            )}
+            {...mergeDataAttributes(
+              props,
+              dataAttributes({
+                checked: isChecked,
+                disabled: resolvedDisabled,
+                hover: isHovered || isHoveredProp,
+                invalid: isInvalid || isInvalidProp,
+                readonly: resolvedReadOnly,
+                active: isPressed,
+                focus: isFocused,
+                focusVisible: isFocusVisible || isFocusVisibleProp,
+              }),
+            )}
+          >
+            {children}
+          </Comp>
+        </>
       </RadioProvider>
     );
   },

package/src/radio/context.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { createContext } from '@cdx-ui/utils';
 import type { RadioGroupState } from '@react-stately/radio';
-import type { IRadioContextValue } from './types';
+import type { IRadioContextValue, RegisteredRadio } from './types';
 
 export const [RadioProvider, useRadioContext] = createContext<IRadioContextValue>('RadioContext');
 
@@ -18,4 +18,9 @@ export const RadioGroupContext = React.createContext<{
   state: IRadioGroupState;
   radioGroupState: RadioGroupState;
   name?: string;
+  focusedValue?: string | undefined;
+  setFocusedValue?: (value: string | undefined) => void;
+  registerRadio?: (value: string, entry: RegisteredRadio) => void;
+  unregisterRadio?: (value: string) => void;
+  getRadios?: () => [string, RegisteredRadio][];
 } | null>(null);

package/src/radio/types.ts

@@ -43,3 +43,9 @@ export interface IRadioContextValue {
   isHovered?: boolean;
   isPressed?: boolean;
 }
+
+/** Web roving-focus registration entry for a single radio item. */
+export interface RegisteredRadio {
+  disabled: boolean;
+  node: { focus?: () => void } | null;
+}