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

package/src/slider/SliderThumb.tsx

@@ -0,0 +1,420 @@
+import { forwardRef, useCallback, useEffect, useMemo, useRef, type ComponentRef } from 'react';
+import {
+  PanResponder,
+  Platform,
+  Pressable,
+  View,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  type PressableProps,
+  type ViewStyle,
+} 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 { assignRef } from '../utils/assignRef';
+import { dataAttributes } from '../utils/dataAttributes';
+import { SliderThumbProvider, useSliderContext } from './context';
+import type { InterfaceSliderThumbProps } from './types';
+import { getPointerCoords, useWebSliderDrag } from './useSliderPointer';
+import {
+  clamp,
+  formatSliderValue,
+  getThumbTravel,
+  percentToThumbOffset,
+  valueToPercent,
+} from './utils';
+
+const STEP_KEYS = new Set(['ArrowUp', 'ArrowRight', 'ArrowDown', 'ArrowLeft', 'Home', 'End']);
+
+function getDefaultThumbAccessibilityLabel(
+  index: number,
+  thumbCount: number,
+  groupAccessibilityLabel?: string,
+): string | undefined {
+  if (thumbCount === 2) {
+    return index === 0 ? 'Minimum' : 'Maximum';
+  }
+  if (thumbCount > 2) {
+    return `Value ${String(index + 1)} of ${String(thumbCount)}`;
+  }
+  return groupAccessibilityLabel;
+}
+
+export interface SliderThumbProps extends InterfaceSliderThumbProps {}
+
+export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThumbProps>(
+  (
+    {
+      asChild,
+      index = 0,
+      style,
+      accessibilityLabel: accessibilityLabelProp,
+      accessibilityValue: accessibilityValueProp,
+      onLayout,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      onPressIn,
+      onPressOut,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      values,
+      min,
+      max,
+      step,
+      orientation,
+      isDisabled,
+      thumbCount,
+      groupAccessibilityLabel,
+      accessibilityValueProp: rootAccessibilityValueProp,
+      trackLayout,
+      thumbSize,
+      getThumbPercent,
+      getThumbMinValue,
+      getThumbMaxValue,
+      setThumbValue,
+      setThumbValueFromRatio,
+      setDraggingIndex,
+      setHoveredIndex,
+      setFocusedIndex,
+      setThumbSize,
+      registerThumb,
+      isThumbDragging,
+      thumbRef: deprecatedThumbRef,
+    } = useSliderContext();
+
+    const value = values[index] ?? min;
+    const percent = getThumbPercent(index);
+    const isDragging = isThumbDragging(index);
+    const thumbRef = useRef<View>(null);
+
+    useEffect(() => {
+      return registerThumb(index);
+    }, [index, registerThumb]);
+
+    useEffect(() => {
+      if (index === 0) {
+        deprecatedThumbRef.current = thumbRef.current;
+      }
+    });
+
+    const percentRef = useRef(percent);
+    percentRef.current = percent;
+
+    const dragStartRatio = useRef(0);
+    const lastRatioRef = useRef(percent / 100);
+
+    const orientationRef = useRef(orientation);
+    orientationRef.current = orientation;
+    const trackLayoutRef = useRef(trackLayout);
+    trackLayoutRef.current = trackLayout;
+    const thumbSizeRef = useRef(thumbSize);
+    thumbSizeRef.current = thumbSize;
+    const isDisabledRef = useRef(isDisabled);
+    isDisabledRef.current = isDisabled;
+    const indexRef = useRef(index);
+    indexRef.current = index;
+    const setThumbValueFromRatioRef = useRef(setThumbValueFromRatio);
+    setThumbValueFromRatioRef.current = setThumbValueFromRatio;
+    const setDraggingIndexRef = useRef(setDraggingIndex);
+    setDraggingIndexRef.current = setDraggingIndex;
+
+    const { hoverProps, isHovered } = useHover();
+    const { focusProps, isFocused } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+    const { pressProps: pressableProps, isPressed } = usePress({ isDisabled }) as {
+      isPressed: boolean;
+      pressProps: Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    };
+
+    const setRatioForThumb = useCallback(
+      (ratio: number, complete?: boolean) => {
+        setThumbValueFromRatio(index, ratio, complete);
+      },
+      [index, setThumbValueFromRatio],
+    );
+
+    const setDraggingForThumb = useCallback(
+      (dragging: boolean) => {
+        setDraggingIndex(dragging ? index : null);
+      },
+      [index, setDraggingIndex],
+    );
+
+    const { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging: setDraggingForThumb,
+      setValueFromRatio: setRatioForThumb,
+      trackLayout,
+      orientation,
+      thumbSize,
+    });
+
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !isDisabledRef.current,
+          onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+          onPanResponderGrant: () => {
+            if (isDisabledRef.current) {
+              return;
+            }
+            setDraggingIndexRef.current(indexRef.current);
+            dragStartRatio.current = percentRef.current / 100;
+            lastRatioRef.current = dragStartRatio.current;
+          },
+          onPanResponderMove: (_event, gestureState) => {
+            const layout = trackLayoutRef.current;
+            if (!layout) {
+              return;
+            }
+            const isHorizontal = orientationRef.current === 'horizontal';
+            const trackSize = isHorizontal ? layout.width : layout.height;
+            const travel = getThumbTravel(trackSize, thumbSizeRef.current);
+            if (travel <= 0) {
+              return;
+            }
+            const delta = isHorizontal ? gestureState.dx : -gestureState.dy;
+            const nextRatio = clamp(dragStartRatio.current + delta / travel, 0, 1);
+            lastRatioRef.current = nextRatio;
+            setThumbValueFromRatioRef.current(indexRef.current, nextRatio);
+          },
+          onPanResponderRelease: () => {
+            setDraggingIndexRef.current(null);
+            setThumbValueFromRatioRef.current(indexRef.current, lastRatioRef.current, true);
+          },
+          onPanResponderTerminate: () => {
+            setDraggingIndexRef.current(null);
+            setThumbValueFromRatioRef.current(indexRef.current, lastRatioRef.current, true);
+          },
+        }),
+      [],
+    );
+
+    const thumbStyle = useMemo((): ViewStyle => {
+      const trackSize =
+        trackLayout == null
+          ? 0
+          : orientation === 'horizontal'
+            ? trackLayout.width
+            : trackLayout.height;
+      const offset = percentToThumbOffset(percent, trackSize, thumbSize);
+
+      const zIndex = isDragging ? 3 : 2;
+
+      if (orientation === 'vertical') {
+        return {
+          position: 'absolute',
+          left: '50%',
+          bottom: offset,
+          marginLeft: -thumbSize / 2,
+          zIndex,
+        };
+      }
+
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: offset,
+        transform: [{ translateY: -thumbSize / 2 }],
+        zIndex,
+      };
+    }, [isDragging, orientation, percent, thumbSize, trackLayout]);
+
+    const handleLayout = useCallback(
+      (event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        const measured = orientation === 'horizontal' ? width : height;
+        if (measured > 0) {
+          setThumbSize(measured);
+        }
+        onLayout?.(event);
+      },
+      [onLayout, orientation, setThumbSize],
+    );
+
+    const handlePointerDown = useCallback(
+      (event: GestureResponderEvent) => {
+        if (Platform.OS !== 'web' || isDisabled) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const { x, y } = getPointerCoords(event.nativeEvent);
+        startDrag(x, y, percentRef.current / 100);
+      },
+      [isDisabled, startDrag],
+    );
+
+    const thumbMin = getThumbMinValue(index);
+    const thumbMax = getThumbMaxValue(index);
+
+    const accessibilityValue = useMemo(() => {
+      const thumbPercent = valueToPercent(value, min, max);
+      const defaults = {
+        min: 0,
+        max: 100,
+        now: Math.round(thumbPercent),
+        text: formatSliderValue(value),
+      };
+
+      const mergedRoot = rootAccessibilityValueProp
+        ? { ...defaults, ...rootAccessibilityValueProp }
+        : defaults;
+      if (accessibilityValueProp === undefined) {
+        return mergedRoot;
+      }
+      return { ...mergedRoot, ...accessibilityValueProp };
+    }, [accessibilityValueProp, max, min, rootAccessibilityValueProp, value]);
+
+    const resolvedAccessibilityLabel =
+      accessibilityLabelProp ??
+      getDefaultThumbAccessibilityLabel(index, thumbCount, groupAccessibilityLabel);
+
+    const handleKeyDown = useCallback(
+      (event: { nativeEvent: { key?: string }; preventDefault?: () => void }) => {
+        if (isDisabled) {
+          return;
+        }
+        const key = event.nativeEvent.key;
+        if (!key || !STEP_KEYS.has(key)) {
+          return;
+        }
+        if (Platform.OS === 'web') {
+          event.preventDefault?.();
+        }
+
+        let next = value;
+        if (key === 'ArrowUp' || key === 'ArrowRight') {
+          next = value + step;
+        } else if (key === 'ArrowDown' || key === 'ArrowLeft') {
+          next = value - step;
+        } else if (key === 'Home') {
+          next = thumbMin;
+        } else if (key === 'End') {
+          next = thumbMax;
+        }
+
+        setThumbValue(index, next, true);
+      },
+      [index, isDisabled, setThumbValue, step, thumbMax, thumbMin, value],
+    );
+
+    const handleAccessibilityAction = useCallback(
+      (event: AccessibilityActionEvent) => {
+        if (isDisabled) {
+          return;
+        }
+        if (event.nativeEvent.actionName === 'increment') {
+          setThumbValue(index, value + step, true);
+        } else if (event.nativeEvent.actionName === 'decrement') {
+          setThumbValue(index, value - step, true);
+        }
+      },
+      [index, isDisabled, setThumbValue, step, value],
+    );
+
+    const thumbContextValue = useMemo(
+      () => ({
+        index,
+        value,
+        percent,
+        isDragging,
+        isHovered,
+        isFocused,
+        thumbRef,
+      }),
+      [index, isDragging, isFocused, isHovered, percent, value],
+    );
+
+    const isWeb = Platform.OS === 'web';
+    const Comp = asChild ? Slot : isWeb ? Pressable : View;
+
+    const setThumbRef = useCallback(
+      (node: ComponentRef<typeof Pressable> | null) => {
+        thumbRef.current = node;
+        if (index === 0) {
+          deprecatedThumbRef.current = node;
+        }
+        assignRef(ref, node);
+      },
+      [deprecatedThumbRef, index, ref],
+    );
+
+    const webInteractionProps =
+      Platform.OS === 'web'
+        ? ({
+            onPointerDown: handlePointerDown as unknown as PressableProps['onPointerDown'],
+            onHoverIn: composeEventHandlers(
+              onHoverIn,
+              composeEventHandlers(hoverProps.onHoverIn, () => setHoveredIndex(index)),
+            ),
+            onHoverOut: composeEventHandlers(
+              onHoverOut,
+              composeEventHandlers(hoverProps.onHoverOut, () => setHoveredIndex(null)),
+            ),
+            onPressIn: composeEventHandlers(onPressIn, pressableProps.onPressIn),
+            onPressOut: composeEventHandlers(onPressOut, pressableProps.onPressOut),
+            disabled: isDisabled,
+            tabIndex: isDisabled ? -1 : 0,
+            onKeyDown: handleKeyDown,
+            role: 'slider',
+            'aria-valuemin': thumbMin,
+            'aria-valuemax': thumbMax,
+            'aria-valuenow': value,
+            'aria-orientation': orientation,
+            'aria-disabled': isDisabled,
+          } as PressableProps)
+        : ({} as PressableProps);
+
+    return (
+      <SliderThumbProvider value={thumbContextValue}>
+        <Comp
+          ref={setThumbRef}
+          {...(props as PressableProps)}
+          {...(isWeb ? webInteractionProps : panResponder.panHandlers)}
+          onLayout={handleLayout}
+          onFocus={composeEventHandlers(
+            composeEventHandlers(onFocus as (...args: unknown[]) => unknown, focusProps.onFocus),
+            composeEventHandlers(focusRingProps.onFocus, () => setFocusedIndex(index)),
+          )}
+          onBlur={composeEventHandlers(
+            composeEventHandlers(onBlur as (...args: unknown[]) => unknown, focusProps.onBlur),
+            composeEventHandlers(focusRingProps.onBlur, () => setFocusedIndex(null)),
+          )}
+          style={[thumbStyle, style]}
+          accessibilityRole="adjustable"
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessibilityValue={accessibilityValue}
+          accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+          onAccessibilityAction={handleAccessibilityAction}
+          accessibilityState={{ disabled: isDisabled }}
+          {...dataAttributes({
+            slot: 'slider-thumb',
+            hover: isHovered,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+            active: isPressed || isDragging,
+            dragging: isDragging,
+            disabled: isDisabled,
+          })}
+        >
+          {children}
+        </Comp>
+      </SliderThumbProvider>
+    );
+  },
+);
+
+SliderThumb.displayName = 'SliderThumb';

package/src/slider/context.tsx

@@ -0,0 +1,82 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import { createContext } from '@cdx-ui/utils';
+import type { SliderAccessibilityValue, SliderOrientation } from './types';
+
+export interface SliderTrackLayout {
+  readonly width: number;
+  readonly height: number;
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface SliderContextValue {
+  readonly values: readonly number[];
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly orientation: SliderOrientation;
+  readonly isDisabled: boolean;
+  readonly draggingIndex: number | null;
+  readonly hoveredIndex: number | null;
+  readonly focusedIndex: number | null;
+  readonly trackLayout: SliderTrackLayout | null;
+  readonly thumbSize: number;
+  readonly thumbCount: number;
+  readonly groupAccessibilityLabel?: string;
+  readonly accessibilityValueProp?: SliderAccessibilityValue;
+  readonly getThumbPercent: (index: number) => number;
+  readonly getThumbMinValue: (index: number) => number;
+  readonly getThumbMaxValue: (index: number) => number;
+  readonly setThumbValue: (index: number, value: number, complete?: boolean) => void;
+  readonly setThumbValueFromRatio: (index: number, ratio: number, complete?: boolean) => void;
+  readonly setNearestThumbValueFromRatio: (ratio: number, complete?: boolean) => void;
+  readonly setTrackLayout: (layout: SliderTrackLayout) => void;
+  readonly setThumbSize: (size: number) => void;
+  readonly setDraggingIndex: (index: number | null) => void;
+  readonly setHoveredIndex: (index: number | null) => void;
+  readonly setFocusedIndex: (index: number | null) => void;
+  readonly getThumbValueLabel: (index: number) => string;
+  readonly registerThumb: (index: number) => () => void;
+  readonly isThumbDragging: (index: number) => boolean;
+  /** @deprecated Use `values[0]` */
+  readonly value: number;
+  /** @deprecated Use `getThumbPercent(0)` */
+  readonly percent: number;
+  /** @deprecated Use `draggingIndex !== null` */
+  readonly isDragging: boolean;
+  /** @deprecated Use `getThumbValueLabel(0)` */
+  readonly getValueLabel: () => string;
+  /** @deprecated Use `setThumbValue(0, …)` */
+  readonly setValue: (value: number, complete?: boolean) => void;
+  /** @deprecated Use `setNearestThumbValueFromRatio` */
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+  /** @deprecated Use per-thumb context `thumbRef` */
+  readonly thumbRef: RefObject<View | null>;
+  /** @deprecated Use `hoveredIndex !== null` */
+  readonly isHovered: boolean;
+  /** @deprecated Use `focusedIndex !== null` */
+  readonly isFocused: boolean;
+  /** @deprecated Use `setDraggingIndex` */
+  readonly setIsDragging: (dragging: boolean) => void;
+  /** @deprecated Use `setHoveredIndex` */
+  readonly setIsHovered: (hovered: boolean) => void;
+  /** @deprecated Use `setFocusedIndex` */
+  readonly setIsFocused: (focused: boolean) => void;
+}
+
+export interface SliderThumbContextValue {
+  readonly index: number;
+  readonly value: number;
+  readonly percent: number;
+  readonly isDragging: boolean;
+  readonly isHovered: boolean;
+  readonly isFocused: boolean;
+  readonly thumbRef: RefObject<View | null>;
+}
+
+export const [SliderProvider, useSliderContext] =
+  createContext<SliderContextValue>('SliderContext');
+
+export const [SliderThumbProvider, useSliderThumbContext] =
+  createContext<SliderThumbContextValue>('SliderThumbContext');

package/src/slider/index.ts

@@ -0,0 +1,26 @@
+export type {
+  ISliderProps,
+  ISliderRailProps,
+  ISliderThumbProps,
+  SliderAccessibilityValue,
+  SliderOrientation,
+  SliderRangeValueProps,
+  SliderSingleValueProps,
+} from './types';
+export type { SliderContextValue, SliderThumbContextValue, SliderTrackLayout } from './context';
+export { useSliderContext, useSliderThumbContext } from './context';
+export { SliderRoot, type SliderRootProps } from './SliderRoot';
+export { SliderRail, type SliderRailProps } from './SliderRail';
+export { SliderThumb, type SliderThumbProps } from './SliderThumb';
+export {
+  arraysEqual,
+  denormalizeSliderValue,
+  getClosestValueIndex,
+  getFillExtent,
+  getMarkerPositionStyle,
+  getMarkerStepValues,
+  normalizeSliderValue,
+  percentToFillExtent,
+  SLIDER_MARKER_SIZE,
+  valueToPercent,
+} from './utils';

package/src/slider/types.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type SliderOrientation = 'horizontal' | 'vertical';
+
+export type SliderAccessibilityValue = NonNullable<ViewProps['accessibilityValue']>;
+
+export type SliderValue = number | readonly number[];
+
+interface SliderBaseProps extends Omit<ViewProps, 'children' | 'accessibilityValue'> {
+  /** Minimum selectable value. @default `0` */
+  readonly min?: number;
+  /** Maximum selectable value. @default `100` */
+  readonly max?: number;
+  /**
+   * Increment used to snap value updates and generate automatic `Slider.MarkerGroup` marks.
+   * @default `1`
+   */
+  readonly step?: number;
+  /** Disables pointer, keyboard, and screen reader interaction. @default `false` */
+  readonly isDisabled?: boolean;
+  /** Slider axis. @default `'horizontal'` */
+  readonly orientation?: SliderOrientation;
+  /**
+   * Screen reader label for the slider group when there is no visible label.
+   */
+  readonly accessibilityLabel?: string;
+  /**
+   * Screen reader value override. Merged with derived per-thumb values when fields are omitted;
+   * `text` replaces the formatted announcement. Native numeric values are normalized to 0–100.
+   */
+  readonly accessibilityValue?: SliderAccessibilityValue;
+  readonly children?: ReactNode;
+}
+
+export interface SliderSingleValueProps {
+  readonly value?: number;
+  /** Initial uncontrolled value. Defaults to `min`. */
+  readonly defaultValue?: number;
+  /** Called while the value changes. */
+  readonly onChange?: (value: number) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onChangeComplete?: (value: number) => void;
+}
+
+export interface SliderRangeValueProps {
+  readonly value?: readonly number[];
+  /** Initial uncontrolled thumb values. */
+  readonly defaultValue?: readonly number[];
+  /** Called while any thumb value changes. */
+  readonly onChange?: (value: number[]) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onChangeComplete?: (value: number[]) => void;
+}
+
+export type InterfaceSliderProps = SliderBaseProps &
+  (SliderSingleValueProps | SliderRangeValueProps);
+
+export type ISliderProps = InterfaceSliderProps;
+
+/** Wider internal props for the root primitive implementation. */
+export interface SliderRootImplementationProps extends SliderBaseProps {
+  readonly value?: number | readonly number[];
+  readonly defaultValue?: number | readonly number[];
+  readonly onChange?: ((value: number) => void) | ((value: number[]) => void);
+  readonly onChangeComplete?: ((value: number) => void) | ((value: number[]) => void);
+}
+
+export interface InterfaceSliderRailProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type ISliderRailProps = InterfaceSliderRailProps;
+
+export interface InterfaceSliderThumbProps extends PressableProps {
+  readonly asChild?: boolean;
+  /**
+   * Zero-based thumb index. Defaults to `0` for single-value sliders.
+   */
+  readonly index?: number;
+  readonly children?: ReactNode;
+}
+
+export type ISliderThumbProps = InterfaceSliderThumbProps;