@cdx-ui/primitives 0.1.5 → 0.1.6

package/src/toggle-button/types.ts

@@ -0,0 +1,94 @@
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type ToggleButtonGroupType = 'single' | 'multiple';
+
+export type ToggleButtonGroupValue = string | string[] | undefined;
+
+interface IToggleButtonGroupBaseProps extends ViewProps {
+  /** Merge group props onto a single child instead of rendering the default View. */
+  asChild?: boolean;
+  /** Disables every item in the group. */
+  isDisabled?: boolean;
+  /**
+   * Layout direction and arrow-key axis.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /** Accessible name for the group (required when no visible label). */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export interface IToggleButtonGroupSingleProps extends IToggleButtonGroupBaseProps {
+  /**
+   * Single-select (radio semantics). `value` is the selected item's `value`.
+   * @default 'single'
+   */
+  type?: 'single';
+  /** Currently selected item `value` (controlled). */
+  value?: string;
+  /** Initially selected item `value` (uncontrolled). */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+}
+
+export interface IToggleButtonGroupMultipleProps extends IToggleButtonGroupBaseProps {
+  /**
+   * Multi-select (pressed-button semantics). `value` is an array of selected item `value`s.
+   */
+  type: 'multiple';
+  /** Currently selected item `value`s (controlled). */
+  value?: string[];
+  /** Initially selected item `value`s (uncontrolled). */
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+}
+
+/**
+ * Discriminated union: `type` narrows `value` / `defaultValue` / `onValueChange`.
+ */
+export type IToggleButtonGroupProps =
+  | IToggleButtonGroupSingleProps
+  | IToggleButtonGroupMultipleProps;
+
+export interface RegisteredToggleButton {
+  disabled: boolean;
+  node: { focus?: () => void } | null;
+}
+
+export interface IToggleButtonGroupContextValue {
+  type: ToggleButtonGroupType;
+  orientation: 'horizontal' | 'vertical';
+  value: ToggleButtonGroupValue;
+  toggleValue: (buttonValue: string) => void;
+  isSelected: (buttonValue: string) => boolean;
+  isGroupDisabled: boolean;
+  focusedValue?: string | undefined;
+  setFocusedValue?: (value: string | undefined) => void;
+  registerItem?: (value: string, entry: RegisteredToggleButton) => void;
+  unregisterItem?: (value: string) => void;
+  getItems?: () => [string, RegisteredToggleButton][];
+}
+
+export interface IToggleButtonProps extends PressableProps {
+  /** Render the consumer's child in place of the default `Pressable` host. */
+  asChild?: boolean;
+  /**
+   * Identifies this button within a `ToggleButtonGroup`. Must be unique within the group.
+   * Standalone buttons still require a value.
+   */
+  value: string;
+  /**
+   * Controlled selected state (standalone only; ignored inside `ToggleButtonGroup`).
+   */
+  isSelected?: boolean;
+  /**
+   * Uncontrolled initial selected state (standalone only).
+   * @default false
+   */
+  defaultSelected?: boolean;
+  /** Called when standalone selected state changes. */
+  onSelectedChange?: (isSelected: boolean) => void;
+  /** @default false */
+  isDisabled?: boolean;
+}

package/src/toggle-button/useToggleButtonGroupNavigation.ts

@@ -0,0 +1,112 @@
+import { useCallback, useRef } from 'react';
+import type { RegisteredToggleButton, ToggleButtonGroupType } from './types';
+
+function isEnabledItemValue(
+  value: string | null | undefined,
+  enabledItems: [string, RegisteredToggleButton][],
+): value is string {
+  return value != null && enabledItems.some(([itemValue]) => itemValue === value);
+}
+
+/** Resolves which item value should hold the roving tab stop / keyboard focus anchor. */
+export function getRovingFocusValue(
+  focusedValue: string | undefined,
+  anchorValue: string | null | undefined,
+  enabledItems: [string, RegisteredToggleButton][],
+): string | undefined {
+  const defaultFocusValue = isEnabledItemValue(anchorValue, enabledItems)
+    ? anchorValue
+    : enabledItems[0]?.[0];
+
+  const resolvedFocusedValue = isEnabledItemValue(focusedValue, enabledItems)
+    ? focusedValue
+    : undefined;
+
+  return resolvedFocusedValue ?? defaultFocusValue;
+}
+
+export interface UseToggleButtonGroupNavigationOptions {
+  type: ToggleButtonGroupType;
+  orientation: 'horizontal' | 'vertical';
+  getItems: () => [string, RegisteredToggleButton][];
+  focusedValue: string | undefined;
+  setFocusedValue: (value: string | undefined) => void;
+  anchorValue: string | null | undefined;
+  selectOnFocus?: (value: string) => void;
+}
+
+export function useToggleButtonGroupNavigation({
+  type,
+  orientation,
+  getItems,
+  focusedValue,
+  setFocusedValue,
+  anchorValue,
+  selectOnFocus,
+}: UseToggleButtonGroupNavigationOptions) {
+  const selectOnFocusRef = useRef(selectOnFocus);
+  selectOnFocusRef.current = selectOnFocus;
+
+  const getEnabledItems = useCallback(
+    () => getItems().filter(([, entry]) => !entry.disabled),
+    [getItems],
+  );
+
+  const moveFocus = useCallback(
+    ([targetValue, targetEntry]: [string, RegisteredToggleButton], shouldSelect: boolean) => {
+      setFocusedValue(targetValue);
+      targetEntry.node?.focus?.();
+      if (shouldSelect) {
+        selectOnFocusRef.current?.(targetValue);
+      }
+    },
+    [setFocusedValue],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: { key: string; preventDefault: () => void }) => {
+      const enabledItems = getEnabledItems();
+      if (enabledItems.length === 0) {
+        return;
+      }
+
+      const currentValue = getRovingFocusValue(focusedValue, anchorValue, enabledItems);
+      const idx = enabledItems.findIndex(([value]) => value === currentValue);
+      const shouldSelectOnFocus = type === 'single';
+
+      const nextKeys = orientation === 'vertical' ? ['ArrowDown'] : ['ArrowRight', 'ArrowDown'];
+      const prevKeys = orientation === 'vertical' ? ['ArrowUp'] : ['ArrowLeft', 'ArrowUp'];
+
+      if (nextKeys.includes(e.key)) {
+        e.preventDefault();
+        moveFocus(enabledItems[idx < enabledItems.length - 1 ? idx + 1 : 0], shouldSelectOnFocus);
+        return;
+      }
+
+      if (prevKeys.includes(e.key)) {
+        e.preventDefault();
+        moveFocus(enabledItems[idx > 0 ? idx - 1 : enabledItems.length - 1], shouldSelectOnFocus);
+        return;
+      }
+
+      switch (e.key) {
+        case 'Home': {
+          e.preventDefault();
+          moveFocus(enabledItems[0], shouldSelectOnFocus);
+          break;
+        }
+        case 'End': {
+          e.preventDefault();
+          const last = enabledItems.at(-1);
+          if (last) {
+            moveFocus(last, shouldSelectOnFocus);
+          }
+          break;
+        }
+      }
+    },
+    [anchorValue, focusedValue, getEnabledItems, moveFocus, orientation, type],
+  );
+
+  return { handleKeyDown };
+}