@cdx-ui/primitives 0.1.4 → 0.1.6

package/src/toggle-button/ToggleButtonGroup.tsx

@@ -0,0 +1,260 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentRef,
+} from 'react';
+import { Platform, View, type ViewProps } from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ToggleButtonGroupContextProvider } from './context';
+import type {
+  IToggleButtonGroupProps,
+  RegisteredToggleButton,
+  ToggleButtonGroupType,
+} from './types';
+import { useToggleButtonGroupNavigation } from './useToggleButtonGroupNavigation';
+
+type WidenedToggleButtonGroupProps = ViewProps & {
+  asChild?: boolean;
+  type?: ToggleButtonGroupType;
+  value?: string | string[];
+  defaultValue?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  isDisabled?: boolean;
+  orientation?: 'horizontal' | 'vertical';
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+};
+
+export type ToggleButtonGroupProps = IToggleButtonGroupProps;
+
+// Map insertion order drifts when an item re-registers (e.g. its disabled state changes)
+// or mounts conditionally, so navigation order is derived from document position instead.
+function getItemsInRenderedOrder(
+  items: Map<string, RegisteredToggleButton>,
+): [string, RegisteredToggleButton][] {
+  const entries = Array.from(items.entries());
+  if (Platform.OS !== 'web' || typeof Node === 'undefined') {
+    return entries;
+  }
+
+  return entries.sort(([, first], [, second]) => {
+    const firstNode = first.node as Node | null;
+    const secondNode = second.node as Node | null;
+    if (!firstNode?.compareDocumentPosition || !secondNode) {
+      return 0;
+    }
+
+    const position = firstNode.compareDocumentPosition(secondNode);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+}
+
+function getAnchorValue(
+  type: ToggleButtonGroupType,
+  state: string | string[] | undefined,
+): string | undefined {
+  if (type === 'single') {
+    return typeof state === 'string' ? state : undefined;
+  }
+  if (Array.isArray(state) && state.length > 0) {
+    return state[0];
+  }
+  return undefined;
+}
+
+export const ToggleButtonGroup = forwardRef<ComponentRef<typeof View>, ToggleButtonGroupProps>(
+  (props, ref) => {
+    const {
+      asChild = false,
+      children,
+      className,
+      style,
+      type: typeProp = 'single',
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      isDisabled = false,
+      orientation = 'horizontal',
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      ...rest
+    } = props as WidenedToggleButtonGroupProps & {
+      className?: string;
+      style?: ViewProps['style'];
+    };
+
+    const type: ToggleButtonGroupType = typeProp;
+
+    const defaultProp =
+      defaultValue !== undefined ? defaultValue : type === 'multiple' ? [] : undefined;
+
+    const [state, setState] = useControllableState<string | string[] | undefined>({
+      prop: valueProp,
+      defaultProp,
+      onChange: (next) => {
+        if (next !== undefined) {
+          onValueChange?.(next);
+        }
+      },
+    });
+
+    const [focusedValue, setFocusedValue] = useState<string | undefined>(undefined);
+    const [registrationEpoch, setRegistrationEpoch] = useState(0);
+    const itemsRef = useRef<Map<string, RegisteredToggleButton>>(new Map());
+
+    // Single-select: if the parent changes `value`, drop a stale roving tab stop so
+    // arrow keys follow the selected item. Multiple-select keeps focus on the last
+    // pressed/focused item even when it is no longer selected.
+    useEffect(() => {
+      if (type !== 'single') {
+        return;
+      }
+      const selectedId = typeof state === 'string' ? state : undefined;
+      setFocusedValue((prev) => (prev !== undefined && prev !== selectedId ? undefined : prev));
+    }, [type, state]);
+
+    const getItems = useCallback(
+      () => getItemsInRenderedOrder(itemsRef.current),
+      [registrationEpoch],
+    );
+
+    const registerItem = useCallback((itemValue: string, entry: RegisteredToggleButton) => {
+      itemsRef.current.set(itemValue, entry);
+      setRegistrationEpoch((epoch) => epoch + 1);
+    }, []);
+
+    const unregisterItem = useCallback((itemValue: string) => {
+      itemsRef.current.delete(itemValue);
+      setRegistrationEpoch((epoch) => epoch + 1);
+    }, []);
+
+    const isSelected = useCallback(
+      (buttonValue: string) => {
+        if (type === 'single') {
+          return state === buttonValue;
+        }
+        return Array.isArray(state) && state.includes(buttonValue);
+      },
+      [type, state],
+    );
+
+    const toggleValue = useCallback(
+      (buttonValue: string) => {
+        if (isDisabled) {
+          return;
+        }
+        if (type === 'single') {
+          if (state === buttonValue) {
+            return;
+          }
+          setState(buttonValue);
+          return;
+        }
+        const arr = Array.isArray(state) ? [...state] : [];
+        const idx = arr.indexOf(buttonValue);
+        if (idx >= 0) {
+          arr.splice(idx, 1);
+          setState(arr);
+        } else {
+          arr.push(buttonValue);
+          setState(arr);
+        }
+      },
+      [isDisabled, type, state, setState],
+    );
+
+    const anchorValue = getAnchorValue(type, state);
+
+    const { handleKeyDown } = useToggleButtonGroupNavigation({
+      type,
+      orientation,
+      getItems,
+      focusedValue,
+      setFocusedValue,
+      anchorValue,
+      selectOnFocus: type === 'single' ? toggleValue : undefined,
+    });
+
+    const webProps =
+      Platform.OS === 'web'
+        ? {
+            onKeyDown: composeEventHandlers(
+              (rest as { onKeyDown?: (e: KeyboardEvent) => void }).onKeyDown,
+              handleKeyDown,
+            ),
+          }
+        : {};
+
+    const contextValue = useMemo(
+      () => ({
+        type,
+        orientation,
+        value: state,
+        toggleValue,
+        isSelected,
+        isGroupDisabled: isDisabled,
+        focusedValue,
+        setFocusedValue,
+        registerItem,
+        unregisterItem,
+        getItems,
+      }),
+      [
+        type,
+        orientation,
+        state,
+        toggleValue,
+        isSelected,
+        isDisabled,
+        focusedValue,
+        registerItem,
+        unregisterItem,
+        getItems,
+      ],
+    );
+
+    // `AccessibilityRole` has no `group` member, so multiple-select relies on the `role` prop,
+    // which RN resolves natively and ranks above `accessibilityRole`.
+    const role = rest.role ?? (type === 'single' ? 'radiogroup' : 'group');
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <ToggleButtonGroupContextProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...rest}
+          role={role}
+          {...(type === 'single' ? { accessibilityRole: 'radiogroup' as const } : {})}
+          {...(ariaLabel ? { 'aria-label': ariaLabel, accessibilityLabel: ariaLabel } : {})}
+          {...(ariaLabelledBy ? { 'aria-labelledby': ariaLabelledBy } : {})}
+          className={className}
+          style={style}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              orientation,
+              disabled: isDisabled,
+            }),
+          )}
+          {...webProps}
+        >
+          {children}
+        </Comp>
+      </ToggleButtonGroupContextProvider>
+    );
+  },
+);
+
+ToggleButtonGroup.displayName = 'ToggleButtonGroup';

package/src/toggle-button/ToggleButtonRoot.tsx

@@ -0,0 +1,151 @@
+import { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, useControllableState } 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 { ToggleButtonProvider, useOptionalToggleButtonGroupContext } from './context';
+import { getToggleState } from './toggleState';
+import type { IToggleButtonProps } from './types';
+
+export interface ToggleButtonRootProps extends IToggleButtonProps {}
+
+export const ToggleButtonRoot = forwardRef<ComponentRef<typeof Pressable>, ToggleButtonRootProps>(
+  (
+    {
+      asChild = false,
+      value,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      isDisabled: isDisabledProp = false,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useOptionalToggleButtonGroupContext();
+
+    const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
+      prop: controlledSelected,
+      defaultProp: defaultSelected ?? false,
+      onChange: (next) => {
+        onSelectedChange?.(next);
+      },
+    });
+
+    const isSelected = group ? group.isSelected(value) : standaloneSelected;
+    const isDisabled = (group?.isGroupDisabled ?? false) || isDisabledProp;
+
+    const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled });
+    const { hoverProps, isHovered } = useHover();
+
+    const selectionType: 'single' | 'multiple' | 'standalone' = group ? group.type : 'standalone';
+
+    const role = selectionType === 'single' ? ('radio' as const) : ('button' as const);
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+        ...(selectionType === 'single'
+          ? { checked: isSelected, selected: isSelected }
+          : { selected: isSelected }),
+      }),
+      [isDisabled, isSelected, selectionType],
+    );
+
+    const ariaProps =
+      selectionType === 'single' ? { 'aria-checked': isSelected } : { 'aria-pressed': isSelected };
+
+    const toggleButtonContext = useMemo(
+      () => ({
+        value,
+        isSelected,
+        isDisabled,
+        selectionType,
+        hover: isHovered,
+        active: isPressed,
+        focus: isFocused,
+        focusVisible: isFocusVisible,
+      }),
+      [
+        value,
+        isSelected,
+        isDisabled,
+        selectionType,
+        isHovered,
+        isPressed,
+        isFocused,
+        isFocusVisible,
+      ],
+    );
+
+    const composedOnPress = composeEventHandlers(onPress, () => {
+      if (isDisabled) {
+        return;
+      }
+      if (group) {
+        group.toggleValue(value);
+      } else {
+        setStandaloneSelected(!standaloneSelected);
+      }
+    });
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <ToggleButtonProvider value={toggleButtonContext}>
+        <Comp
+          ref={ref}
+          accessibilityRole={role}
+          role={role}
+          accessibilityState={accessibilityState}
+          {...ariaProps}
+          {...(isDisabled ? { 'aria-disabled': true as const } : {})}
+          disabled={isDisabled}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              selected: isSelected,
+              disabled: isDisabled,
+              active: isPressed,
+              hover: isHovered,
+              focus: isFocused,
+              focusVisible: isFocusVisible,
+              toggleState: getToggleState(isSelected, isPressed, isHovered),
+            }),
+          )}
+          style={style}
+          onPress={isDisabled ? undefined : composedOnPress}
+          onPressIn={composeEventHandlers(rest.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(rest.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(rest.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(rest.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus, focusProps.onFocus),
+            focusRingProps.onFocus,
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </ToggleButtonProvider>
+    );
+  },
+);
+
+ToggleButtonRoot.displayName = 'ToggleButtonRoot';

package/src/toggle-button/ToggleButtonRoot.web.tsx

@@ -0,0 +1,225 @@
+import { forwardRef, useEffect, useMemo, useRef, type ComponentRef } from 'react';
+import { Pressable, type PressableProps } from 'react-native';
+import { composeEventHandlers, mergeRefs, useControllableState } 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 { ToggleButtonProvider, useOptionalToggleButtonGroupContext } from './context';
+import { getToggleState } from './toggleState';
+import type { IToggleButtonProps } from './types';
+import { getRovingFocusValue } from './useToggleButtonGroupNavigation';
+
+export interface ToggleButtonRootProps extends IToggleButtonProps {}
+
+export const ToggleButtonRoot = forwardRef<ComponentRef<typeof Pressable>, ToggleButtonRootProps>(
+  (
+    {
+      asChild = false,
+      value,
+      isSelected: controlledSelected,
+      defaultSelected,
+      onSelectedChange,
+      isDisabled: isDisabledProp = false,
+      children,
+      onPress,
+      onFocus,
+      onBlur,
+      style,
+      ...rest
+    },
+    ref,
+  ) => {
+    const group = useOptionalToggleButtonGroupContext();
+
+    const [standaloneSelected = false, setStandaloneSelected] = useControllableState<boolean>({
+      prop: controlledSelected,
+      defaultProp: defaultSelected ?? false,
+      onChange: (next) => {
+        onSelectedChange?.(next);
+      },
+    });
+
+    const isSelected = group ? group.isSelected(value) : standaloneSelected;
+    const isDisabled = (group?.isGroupDisabled ?? false) || isDisabledProp;
+
+    const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled });
+    const { hoverProps, isHovered } = useHover();
+
+    const selectionType: 'single' | 'multiple' | 'standalone' = group ? group.type : 'standalone';
+
+    const role = selectionType === 'single' ? ('radio' as const) : ('button' as const);
+
+    const accessibilityState = useMemo(
+      () => ({
+        disabled: isDisabled,
+        ...(selectionType === 'single'
+          ? { checked: isSelected, selected: isSelected }
+          : { selected: isSelected }),
+      }),
+      [isDisabled, isSelected, selectionType],
+    );
+
+    const ariaProps =
+      selectionType === 'single' ? { 'aria-checked': isSelected } : { 'aria-pressed': isSelected };
+
+    const nodeRef = useRef<ComponentRef<typeof Pressable> | null>(null);
+    const setRefs = mergeRefs(ref, nodeRef);
+
+    const registerItem = group?.registerItem;
+    const unregisterItem = group?.unregisterItem;
+    const getItems = group?.getItems;
+    const focusedValue = group?.focusedValue;
+    const anchorValue =
+      group?.type === 'single'
+        ? typeof group.value === 'string'
+          ? group.value
+          : undefined
+        : Array.isArray(group?.value) && group.value.length > 0
+          ? group.value[0]
+          : undefined;
+
+    useEffect(() => {
+      if (!registerItem || !unregisterItem) {
+        return;
+      }
+
+      registerItem(value, {
+        disabled: !!isDisabled,
+        node: nodeRef.current as { focus?: () => void } | null,
+      });
+
+      return () => unregisterItem(value);
+    }, [value, isDisabled, registerItem, unregisterItem]);
+
+    const isRovingTabStop = useMemo(() => {
+      if (!group || isDisabled) {
+        return !group;
+      }
+
+      const enabledItems = getItems?.().filter(([, entry]) => !entry.disabled) ?? [];
+      const rovingValue = getRovingFocusValue(focusedValue, anchorValue, enabledItems);
+
+      return value === rovingValue;
+    }, [anchorValue, focusedValue, getItems, group, isDisabled, value]);
+
+    const toggleButtonContext = useMemo(
+      () => ({
+        value,
+        isSelected,
+        isDisabled,
+        selectionType,
+        hover: isHovered,
+        active: isPressed,
+        focus: isFocused,
+        focusVisible: isFocusVisible,
+      }),
+      [
+        value,
+        isSelected,
+        isDisabled,
+        selectionType,
+        isHovered,
+        isPressed,
+        isFocused,
+        isFocusVisible,
+      ],
+    );
+
+    const markRovingFocus = () => {
+      if (!isDisabled) {
+        group?.setFocusedValue?.(value);
+      }
+    };
+
+    const toggle = () => {
+      if (isDisabled) {
+        return;
+      }
+      if (group) {
+        markRovingFocus();
+        group.toggleValue(value);
+      } else {
+        setStandaloneSelected(!standaloneSelected);
+      }
+    };
+
+    const composedOnPress = composeEventHandlers(onPress, toggle);
+
+    // RNW's press responder already turns Space into a press for role="button", but ignores
+    // it for role="radio", so only single-select items handle Space here.
+    const handleKeyDown = (event: {
+      key: string;
+      repeat?: boolean;
+      preventDefault: () => void;
+    }) => {
+      if (selectionType !== 'single') {
+        return;
+      }
+      if (event.key === ' ' || event.key === 'Spacebar') {
+        event.preventDefault();
+        if (!event.repeat) {
+          toggle();
+        }
+      }
+    };
+
+    const Comp = asChild ? Slot : Pressable;
+
+    return (
+      <ToggleButtonProvider value={toggleButtonContext}>
+        <Comp
+          ref={setRefs}
+          accessibilityRole={role}
+          role={role}
+          accessibilityState={accessibilityState}
+          {...ariaProps}
+          {...(isDisabled ? { 'aria-disabled': true as const } : {})}
+          disabled={isDisabled}
+          tabIndex={group ? (isDisabled ? -1 : isRovingTabStop ? 0 : -1) : undefined}
+          {...(rest as PressableProps)}
+          {...mergeDataAttributes(
+            rest,
+            dataAttributes({
+              selected: isSelected,
+              disabled: isDisabled,
+              active: isPressed,
+              hover: isHovered,
+              focus: isFocused,
+              focusVisible: isFocusVisible,
+              toggleState: getToggleState(isSelected, isPressed, isHovered),
+            }),
+          )}
+          style={style}
+          onPress={isDisabled ? undefined : composedOnPress}
+          onKeyDown={composeEventHandlers(
+            (rest as { onKeyDown?: (e: { key: string; preventDefault: () => void }) => void })
+              .onKeyDown,
+            handleKeyDown,
+          )}
+          onPressIn={composeEventHandlers(rest.onPressIn, pressProps.onPressIn)}
+          onPressOut={composeEventHandlers(rest.onPressOut, pressProps.onPressOut)}
+          onHoverIn={composeEventHandlers(rest.onHoverIn, hoverProps.onHoverIn)}
+          onHoverOut={composeEventHandlers(rest.onHoverOut, hoverProps.onHoverOut)}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus, markRovingFocus),
+            composeEventHandlers(focusProps.onFocus, focusRingProps.onFocus),
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur, focusProps.onBlur),
+            focusRingProps.onBlur,
+          )}
+        >
+          {children}
+        </Comp>
+      </ToggleButtonProvider>
+    );
+  },
+);
+
+ToggleButtonRoot.displayName = 'ToggleButtonRoot';

package/src/toggle-button/context.tsx

@@ -0,0 +1,30 @@
+import { createContext as createReactContext, useContext } from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { IToggleButtonGroupContextValue } from './types';
+
+export const [ToggleButtonProvider, useToggleButtonContext] = createContext<{
+  value: string;
+  isSelected: boolean;
+  isDisabled: boolean;
+  selectionType: 'single' | 'multiple' | 'standalone';
+  hover: boolean;
+  active: boolean;
+  focus: boolean;
+  focusVisible: boolean;
+}>('ToggleButtonContext');
+
+const ToggleButtonGroupContext = createReactContext<IToggleButtonGroupContextValue | null>(null);
+
+export const ToggleButtonGroupContextProvider = ToggleButtonGroupContext.Provider;
+
+export function useToggleButtonGroupContext(): IToggleButtonGroupContextValue {
+  const ctx = useContext(ToggleButtonGroupContext);
+  if (!ctx) {
+    throw new Error('ToggleButton must be used within ToggleButtonGroup');
+  }
+  return ctx;
+}
+
+export function useOptionalToggleButtonGroupContext(): IToggleButtonGroupContextValue | null {
+  return useContext(ToggleButtonGroupContext);
+}

package/src/toggle-button/index.ts

@@ -0,0 +1,16 @@
+export { ToggleButtonRoot, type ToggleButtonRootProps } from './ToggleButtonRoot';
+export { ToggleButtonGroup, type ToggleButtonGroupProps } from './ToggleButtonGroup';
+export {
+  ToggleButtonProvider,
+  useToggleButtonContext,
+  useToggleButtonGroupContext,
+  useOptionalToggleButtonGroupContext,
+} from './context';
+export type {
+  IToggleButtonProps,
+  IToggleButtonGroupProps,
+  IToggleButtonGroupSingleProps,
+  IToggleButtonGroupMultipleProps,
+  IToggleButtonGroupContextValue,
+  ToggleButtonGroupType,
+} from './types';

package/src/toggle-button/toggleState.ts

@@ -0,0 +1,19 @@
+// Keyed `selected:active:hover`. Press outranks hover so each combination maps to exactly one
+// value, letting the styled layer use single-condition selectors that also work on native.
+const TOGGLE_STATES = {
+  'false:false:false': 'idle',
+  'false:false:true': 'hover',
+  'false:true:false': 'active',
+  'false:true:true': 'active',
+  'true:false:false': 'selected',
+  'true:false:true': 'selected-hover',
+  'true:true:false': 'selected-active',
+  'true:true:true': 'selected-active',
+} as const;
+
+export type ToggleState = (typeof TOGGLE_STATES)[keyof typeof TOGGLE_STATES];
+
+export function getToggleState(selected: boolean, active: boolean, hover: boolean): ToggleState {
+  const key = [selected, active, hover].map((flag) => (flag ? 'true' : 'false')).join(':');
+  return TOGGLE_STATES[key as keyof typeof TOGGLE_STATES];
+}