@cdx-ui/primitives 0.0.1-beta.12 → 0.0.1-beta.120

package/src/select/useSelectTrigger.web.ts

@@ -0,0 +1,280 @@
+import {
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardedRef,
+  type RefCallback,
+} from 'react';
+import { type GestureResponderEvent } from 'react-native';
+import {
+  composeEventHandlers,
+  mergeRefs,
+  useFormControlContext,
+  useReportFormControlLabelFocus,
+  type Focusable,
+} from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { useSelectContext } from './context';
+import type {
+  SelectTriggerAriaProps,
+  SelectTriggerDataAttrValues,
+  SelectTriggerHandlers,
+  UseSelectTriggerOptions,
+  UseSelectTriggerReturn,
+} from './useSelectTrigger';
+
+const FIELD_STATES = {
+  'false:false': 'idle',
+  'false:true': 'invalid',
+  'true:false': 'focused',
+  'true:true': 'focused-invalid',
+} as const;
+
+/**
+ * Web variant — drops `useHover` and `useFocusRing` per the trigger-prune todo:
+ * neither emitted attribute has a consumer in `selectTriggerVariants`, and the
+ * web `useHover` re-renders on every pointer enter/leave. Hover is expressed via
+ * CSS `:hover` chains in CVA, not a JS tracker.
+ *
+ * The label-focus bridge is only registered when the host loses native
+ * label association — i.e. when `asChild` substitutes the rendered `<button>`
+ * with a non-labelable element. Otherwise `<label htmlFor>` handles the focus
+ * relationship natively.
+ */
+export function useSelectTrigger(
+  forwardedRef: ForwardedRef<unknown>,
+  options: UseSelectTriggerOptions,
+): UseSelectTriggerReturn {
+  const {
+    asChild,
+    isHovered: isHoveredProp,
+    isActive: isActiveProp,
+    isFocused: isFocusedProp,
+    isFocusVisible: isFocusVisibleProp,
+    isDisabled: isDisabledProp,
+    ariaDescribedBy: ariaDescribedByProp,
+    onPress: consumerOnPress,
+    onPressIn: consumerOnPressIn,
+    onPressOut: consumerOnPressOut,
+    onHoverIn: consumerOnHoverIn,
+    onHoverOut: consumerOnHoverOut,
+    onFocus: consumerOnFocus,
+    onBlur: consumerOnBlur,
+    onKeyDown: consumerOnKeyDown,
+  } = options;
+
+  const {
+    open,
+    setOpen,
+    disabled: contextDisabled,
+    required: contextRequired,
+    invalid: contextInvalid,
+    readOnly: contextReadOnly,
+    triggerId,
+    contentId,
+    triggerRef,
+    activeValue,
+    accessibilityLabel,
+    ariaDescribedBy: ariaDescribedByFromField,
+  } = useSelectContext();
+
+  const field = useFormControlContext();
+
+  const disabled = contextDisabled || !!isDisabledProp;
+
+  const { pressProps, isPressed: isActive } = usePress({ isDisabled: disabled });
+  const { isFocused, focusProps } = useFocus() as {
+    isFocused: boolean;
+    focusProps: {
+      onFocus?: (...args: unknown[]) => unknown;
+      onBlur?: (...args: unknown[]) => unknown;
+    };
+  };
+  const [triggerFocused, setTriggerFocused] = useState(false);
+
+  const handlePress = useCallback(
+    (_e: GestureResponderEvent) => {
+      if (!disabled) {
+        setOpen(!open);
+      }
+    },
+    [disabled, open, setOpen],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (disabled) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp': {
+          e.preventDefault();
+          setOpen(true);
+          break;
+        }
+      }
+    },
+    [disabled, setOpen],
+  );
+
+  const isLabelActive = Boolean(
+    (isFocusedProp || isFocused || triggerFocused || open) && !disabled,
+  );
+
+  useReportFormControlLabelFocus(isLabelActive);
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setTriggerFocused(false);
+    }
+  }, [open]);
+
+  const interactionState = useMemo<InteractionState>(
+    () => ({
+      hover: !!isHoveredProp,
+      focus: !!(isFocusedProp || isFocused || open),
+      active: !!(isActiveProp || isActive),
+      disabled: !!disabled,
+      focusVisible: !!isFocusVisibleProp,
+    }),
+    [
+      isHoveredProp,
+      isFocusedProp,
+      isFocused,
+      isActiveProp,
+      isActive,
+      disabled,
+      isFocusVisibleProp,
+      open,
+    ],
+  );
+
+  /**
+   * `<button>` is HTML-labelable so `<label htmlFor>` works natively — no JS bridge needed.
+   * When `asChild` substitutes the host with a non-labelable element (e.g. `<div role="button">`),
+   * the bridge fills the gap so `Form.Label` can still focus the trigger via `field.inputRef`.
+   */
+  const labelFocusGateRef = useRef({ disabled: false, readOnly: false });
+  labelFocusGateRef.current = {
+    disabled: !!disabled,
+    readOnly: !!contextReadOnly,
+  };
+
+  const labelFocusBridge = useMemo<Focusable>(
+    () => ({
+      focus() {
+        const { disabled: isOff, readOnly: isRO } = labelFocusGateRef.current;
+        if (isOff || isRO) {
+          return;
+        }
+        const node = triggerRef.current as { focus?: () => void } | null;
+        if (node != null && typeof node.focus === 'function') {
+          node.focus();
+        }
+        setOpen(true);
+      },
+    }),
+    [setOpen, triggerRef],
+  );
+
+  const shouldMountLabelFocusBridge = !!asChild;
+
+  useLayoutEffect(() => {
+    if (!shouldMountLabelFocusBridge || !field.inputRef) {
+      return;
+    }
+    const r = field.inputRef;
+    r.current = labelFocusBridge;
+    return () => {
+      if (r.current === labelFocusBridge) {
+        r.current = null;
+      }
+    };
+  }, [shouldMountLabelFocusBridge, field.inputRef, labelFocusBridge]);
+
+  const mergedRef = mergeRefs(forwardedRef, triggerRef) as RefCallback<unknown>;
+
+  const ariaDescribedBy = [ariaDescribedByFromField, ariaDescribedByProp].filter(Boolean).join(' ');
+
+  const ariaProps: SelectTriggerAriaProps = {
+    role: 'combobox',
+    'aria-label': accessibilityLabel,
+    'aria-haspopup': 'listbox',
+    'aria-expanded': open,
+    'aria-controls': contentId,
+    'aria-activedescendant': open && activeValue ? `${contentId}-option-${activeValue}` : undefined,
+    'aria-required': contextRequired || undefined,
+    'aria-invalid': contextInvalid || undefined,
+    'aria-readonly': contextReadOnly || undefined,
+    'aria-describedby': ariaDescribedBy || undefined,
+    id: triggerId,
+    disabled,
+  };
+
+  const fieldState =
+    FIELD_STATES[
+      `${interactionState.focus ? 'true' : 'false'}:${contextInvalid ? 'true' : 'false'}`
+    ];
+
+  const dataAttrValues: SelectTriggerDataAttrValues = {
+    focus: interactionState.focus,
+    active: interactionState.active,
+    disabled: interactionState.disabled,
+    required: !!contextRequired,
+    invalid: !!contextInvalid,
+    readonly: !!contextReadOnly,
+    state: open ? 'open' : 'closed',
+    fieldState,
+  };
+
+  const handlers: SelectTriggerHandlers = {
+    onPress: composeEventHandlers(consumerOnPress, handlePress) as SelectTriggerHandlers['onPress'],
+    onPressIn: composeEventHandlers(
+      consumerOnPressIn,
+      pressProps.onPressIn,
+    ) as SelectTriggerHandlers['onPressIn'],
+    onPressOut: composeEventHandlers(
+      consumerOnPressOut,
+      pressProps.onPressOut,
+    ) as SelectTriggerHandlers['onPressOut'],
+    onHoverIn: consumerOnHoverIn ?? (() => undefined),
+    onHoverOut: consumerOnHoverOut ?? (() => undefined),
+    onFocus: composeEventHandlers(composeEventHandlers(consumerOnFocus, focusProps.onFocus), () =>
+      setTriggerFocused(true),
+    ),
+    onBlur: composeEventHandlers(composeEventHandlers(consumerOnBlur, focusProps.onBlur), () =>
+      setTriggerFocused(false),
+    ),
+    onKeyDown: composeEventHandlers(
+      consumerOnKeyDown,
+      handleKeyDown,
+    ) as SelectTriggerHandlers['onKeyDown'],
+  };
+
+  return {
+    ariaProps,
+    dataAttrValues,
+    interactionState,
+    mergedRef,
+    handlers,
+    isLabelActive,
+    open,
+    labelFocusBridge,
+  };
+}
+
+export type {
+  SelectTriggerAriaProps,
+  SelectTriggerDataAttrValues,
+  SelectTriggerHandlers,
+  UseSelectTriggerOptions,
+  UseSelectTriggerReturn,
+};

package/src/slider/SliderRail.tsx

@@ -0,0 +1,143 @@
+import { forwardRef, useCallback, useRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PressableProps,
+} from 'react-native';
+import { Slot } from '../slot';
+import { assignRef } from '../utils/assignRef';
+import { dataAttributes } from '../utils/dataAttributes';
+import { useSliderContext } from './context';
+import type { InterfaceSliderRailProps } from './types';
+import { getPointerCoords, getRatioFromPagePoint, useWebSliderDrag } from './useSliderPointer';
+
+export interface SliderRailProps extends InterfaceSliderRailProps {}
+
+export const SliderRail = forwardRef<View, SliderRailProps>(
+  ({ asChild, style, onLayout, children, ...props }, ref) => {
+    const {
+      orientation,
+      isDisabled,
+      isDragging,
+      trackLayout,
+      thumbSize,
+      setValueFromRatio,
+      setTrackLayout,
+      setIsDragging,
+    } = useSliderContext();
+
+    const railRef = useRef<View>(null);
+
+    const measureRail = useCallback(() => {
+      const node = railRef.current;
+      if (!node?.measureInWindow) {
+        return;
+      }
+      node.measureInWindow((x, y, width, height) => {
+        setTrackLayout({ x, y, width, height });
+      });
+    }, [setTrackLayout]);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        measureRail();
+        onLayout?.(event);
+      },
+      [measureRail, onLayout],
+    );
+
+    const { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging,
+      setValueFromRatio,
+      trackLayout,
+      orientation,
+      thumbSize,
+    });
+
+    const updateFromEvent = useCallback(
+      (event: GestureResponderEvent) => {
+        if (isDisabled) {
+          return;
+        }
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        setValueFromRatio(getRatioFromPagePoint(x, y, trackLayout, orientation, thumbSize), true);
+      },
+      [isDisabled, orientation, setValueFromRatio, thumbSize, trackLayout],
+    );
+
+    const handlePress = useCallback(
+      (event: GestureResponderEvent) => {
+        updateFromEvent(event);
+      },
+      [updateFromEvent],
+    );
+
+    const handlePointerDown = useCallback(
+      (event: GestureResponderEvent) => {
+        if (Platform.OS !== 'web' || isDisabled) {
+          return;
+        }
+        event.preventDefault();
+
+        const node = railRef.current as unknown as HTMLElement | null;
+        if (!node) return;
+        const rect = node.getBoundingClientRect();
+        const freshLayout = { x: rect.left, y: rect.top, width: rect.width, height: rect.height };
+        setTrackLayout(freshLayout);
+
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        startDrag(x, y, undefined, freshLayout);
+      },
+      [isDisabled, setTrackLayout, startDrag],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Pressable
+        accessibilityRole="none"
+        accessible={false}
+        disabled={isDisabled}
+        onPress={Platform.OS === 'web' ? undefined : handlePress}
+        onPointerDown={
+          Platform.OS === 'web'
+            ? (handlePointerDown as unknown as PressableProps['onPointerDown'])
+            : undefined
+        }
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        aria-hidden
+        tabIndex={-1}
+        style={styles.railHitArea}
+      >
+        <Comp
+          ref={(node: View | null) => {
+            railRef.current = node;
+            assignRef(ref, node);
+          }}
+          {...props}
+          onLayout={handleLayout}
+          style={style}
+          {...dataAttributes({ slot: 'slider-rail', dragging: isDragging })}
+        >
+          {children}
+        </Comp>
+      </Pressable>
+    );
+  },
+);
+
+SliderRail.displayName = 'SliderRail';
+
+const styles = StyleSheet.create({
+  railHitArea: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/slider/SliderRoot.tsx

@@ -0,0 +1,266 @@
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import {
+  Platform,
+  View,
+  type NativeSyntheticEvent,
+  type TargetedEvent,
+  type ViewProps,
+} from 'react-native';
+import { composeEventHandlers, useControllableState } from '@cdx-ui/utils';
+import { useFocus } from '@react-native-aria/focus';
+import { Slot } from '../slot';
+import { dataAttributes } from '../utils/dataAttributes';
+import { SliderProvider, type SliderTrackLayout } from './context';
+import type { InterfaceSliderProps } from './types';
+import { clamp, formatSliderValue, snapToStep, valueToPercent } from './utils';
+
+const STEP_KEYS = new Set(['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End']);
+
+export interface SliderRootProps extends InterfaceSliderProps {
+  readonly asChild?: boolean;
+}
+
+export const SliderRoot = forwardRef<View, SliderRootProps>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onChange,
+      onChangeComplete,
+      min = 0,
+      max = 100,
+      step = 1,
+      isDisabled = false,
+      orientation = 'horizontal',
+      accessibilityLabel,
+      accessibilityValue: accessibilityValueProp,
+      accessibilityRole = 'adjustable',
+      role = 'slider',
+      children,
+      onLayout,
+      ...props
+    },
+    ref,
+  ) => {
+    const [trackLayout, setTrackLayoutState] = useState<SliderTrackLayout | null>(null);
+    const [thumbSize, setThumbSizeState] = useState(20);
+    const [isDragging, setIsDragging] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isFocusedState, setIsFocusedState] = useState(false);
+    const thumbRef = useRef<View>(null);
+    const { focusProps, isFocused } = useFocus();
+
+    const resolvedDefault = defaultValue ?? min;
+    const [value, setValueState] = useControllableState<number>({
+      prop: valueProp,
+      defaultProp: resolvedDefault,
+      onChange,
+    });
+
+    const currentValue = snapToStep(value ?? resolvedDefault, min, max, step);
+    const percent = valueToPercent(currentValue, min, max);
+
+    const setValue = useCallback(
+      (next: number, complete = false) => {
+        if (isDisabled) {
+          return;
+        }
+        const snapped = snapToStep(next, min, max, step);
+        setValueState(snapped);
+        if (complete) {
+          onChangeComplete?.(snapped);
+        }
+      },
+      [isDisabled, max, min, onChangeComplete, setValueState, step],
+    );
+
+    const setValueFromRatio = useCallback(
+      (ratio: number, complete = false) => {
+        const next = min + clamp(ratio, 0, 1) * (max - min);
+        setValue(next, complete);
+      },
+      [max, min, setValue],
+    );
+
+    const setTrackLayout = useCallback((layout: SliderTrackLayout) => {
+      setTrackLayoutState((prev) => {
+        if (
+          prev !== null &&
+          prev.width === layout.width &&
+          prev.height === layout.height &&
+          prev.x === layout.x &&
+          prev.y === layout.y
+        ) {
+          return prev;
+        }
+        return layout;
+      });
+    }, []);
+
+    const setThumbSize = useCallback((size: number) => {
+      setThumbSizeState((prev) => (prev === size ? prev : size));
+    }, []);
+
+    const accessibilityValue = useMemo(() => {
+      const defaults = {
+        min,
+        max,
+        now: currentValue,
+        text: formatSliderValue(currentValue),
+      };
+
+      if (accessibilityValueProp === undefined) {
+        return defaults;
+      }
+
+      return { ...defaults, ...accessibilityValueProp };
+    }, [accessibilityValueProp, currentValue, max, min]);
+
+    const getValueLabel = useCallback(() => accessibilityValue.text, [accessibilityValue.text]);
+
+    const handleKeyDown = useCallback(
+      (event: NativeSyntheticEvent<TargetedEvent> & { nativeEvent: { key?: string } }) => {
+        if (isDisabled) {
+          return;
+        }
+        const key = event.nativeEvent.key;
+        if (!key || !STEP_KEYS.has(key)) {
+          return;
+        }
+        if (Platform.OS === 'web') {
+          (event as unknown as { preventDefault: () => void }).preventDefault();
+        }
+
+        let next = currentValue;
+        if (key === 'ArrowUp' || key === 'ArrowRight') {
+          next = currentValue + step;
+        } else if (key === 'ArrowDown' || key === 'ArrowLeft') {
+          next = currentValue - step;
+        } else if (key === 'Home') {
+          next = min;
+        } else if (key === 'End') {
+          next = max;
+        }
+
+        setValue(next, true);
+      },
+      [currentValue, isDisabled, max, min, setValue, step],
+    );
+
+    const contextValue = useMemo(
+      () => ({
+        value: currentValue,
+        min,
+        max,
+        step,
+        percent,
+        orientation,
+        isDisabled,
+        isDragging,
+        isHovered,
+        isFocused: isFocused || isFocusedState,
+        trackLayout,
+        thumbSize,
+        setValue,
+        setValueFromRatio,
+        setTrackLayout,
+        setThumbSize,
+        setIsDragging,
+        setIsHovered,
+        setIsFocused: setIsFocusedState,
+        getValueLabel,
+        thumbRef,
+      }),
+      [
+        currentValue,
+        getValueLabel,
+        isDisabled,
+        isDragging,
+        isFocused,
+        isFocusedState,
+        isHovered,
+        max,
+        min,
+        orientation,
+        percent,
+        setTrackLayout,
+        setThumbSize,
+        setValue,
+        setValueFromRatio,
+        step,
+        thumbSize,
+        trackLayout,
+        thumbRef,
+      ],
+    );
+
+    const dataAttrs = dataAttributes({
+      slot: 'slider',
+      orientation,
+      disabled: isDisabled,
+      dragging: isDragging,
+      hover: isHovered,
+      focus: isFocused,
+      value: String(currentValue),
+      min: String(min),
+      max: String(max),
+    });
+
+    const Comp = asChild ? Slot : View;
+
+    const handleLayout = composeEventHandlers(onLayout, () => undefined);
+
+    const webKeyProps =
+      Platform.OS === 'web'
+        ? {
+            tabIndex: isDisabled ? -1 : 0,
+            onKeyDown: composeEventHandlers(
+              (props as ViewProps & { onKeyDown?: (event: unknown) => void }).onKeyDown,
+              handleKeyDown as never,
+            ),
+          }
+        : {};
+
+    return (
+      <SliderProvider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...(props as ViewProps)}
+          {...focusProps}
+          {...webKeyProps}
+          onLayout={handleLayout}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(
+              props.onFocus as (...args: unknown[]) => unknown,
+              focusProps.onFocus,
+            ),
+            () => setIsFocusedState(true),
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(
+              props.onBlur as (...args: unknown[]) => unknown,
+              focusProps.onBlur,
+            ),
+            () => setIsFocusedState(false),
+          )}
+          accessibilityRole={accessibilityRole}
+          accessibilityLabel={accessibilityLabel}
+          accessibilityValue={accessibilityValue}
+          accessibilityState={{ disabled: isDisabled }}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={currentValue}
+          aria-orientation={orientation}
+          aria-disabled={isDisabled}
+          role={role}
+          {...dataAttrs}
+        >
+          {children}
+        </Comp>
+      </SliderProvider>
+    );
+  },
+);
+
+SliderRoot.displayName = 'SliderRoot';