@cdx-ui/primitives 0.0.1-beta.114 → 0.0.1-beta.116

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';

package/src/slider/SliderThumb.tsx

@@ -0,0 +1,268 @@
+import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import {
+  PanResponder,
+  Platform,
+  Pressable,
+  View,
+  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 { useSliderContext } from './context';
+import type { InterfaceSliderThumbProps } from './types';
+import { getPointerCoords, useWebSliderDrag } from './useSliderPointer';
+import { clamp, getThumbTravel, percentToThumbOffset } from './utils';
+
+export interface SliderThumbProps extends InterfaceSliderThumbProps {}
+
+export const SliderThumb = forwardRef<ComponentRef<typeof Pressable>, SliderThumbProps>(
+  (
+    {
+      asChild,
+      style,
+      onLayout,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      onPressIn,
+      onPressOut,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const {
+      percent,
+      orientation,
+      isDisabled,
+      isDragging,
+      trackLayout,
+      thumbSize,
+      setValueFromRatio,
+      setIsDragging,
+      setIsHovered,
+      setIsFocused,
+      setThumbSize,
+      thumbRef,
+    } = useSliderContext();
+
+    const percentRef = useRef(percent);
+    percentRef.current = percent;
+
+    const dragStartRatio = useRef(0);
+    const lastRatioRef = useRef(percent / 100);
+
+    // The native PanResponder is created once (stable across renders) so an
+    // in-flight gesture is never handed a fresh internal `gestureState`
+    // mid-drag. In controlled mode `setValueFromRatio`/`trackLayout` change
+    // identity on every value update, so the handlers read the current values
+    // through refs instead of closing over them (which would force the
+    // `useMemo` to re-create the responder on every move and reset `dx`).
+    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 setValueFromRatioRef = useRef(setValueFromRatio);
+    setValueFromRatioRef.current = setValueFromRatio;
+    const setIsDraggingRef = useRef(setIsDragging);
+    setIsDraggingRef.current = setIsDragging;
+
+    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 { startDrag } = useWebSliderDrag({
+      isDisabled,
+      setIsDragging,
+      setValueFromRatio,
+      trackLayout,
+      orientation,
+      thumbSize,
+    });
+
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !isDisabledRef.current,
+          onMoveShouldSetPanResponder: () => !isDisabledRef.current,
+          onPanResponderGrant: () => {
+            if (isDisabledRef.current) {
+              return;
+            }
+            setIsDraggingRef.current(true);
+            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;
+            setValueFromRatioRef.current(nextRatio);
+          },
+          onPanResponderRelease: () => {
+            setIsDraggingRef.current(false);
+            setValueFromRatioRef.current(lastRatioRef.current, true);
+          },
+          onPanResponderTerminate: () => {
+            setIsDraggingRef.current(false);
+            setValueFromRatioRef.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);
+
+      if (orientation === 'vertical') {
+        return {
+          position: 'absolute',
+          left: '50%',
+          bottom: offset,
+          marginLeft: -thumbSize / 2,
+          zIndex: 2,
+        };
+      }
+
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: offset,
+        transform: [{ translateY: -thumbSize / 2 }],
+        zIndex: 2,
+      };
+    }, [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);
+        }
+        if (onLayout) {
+          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 isWeb = Platform.OS === 'web';
+
+    // Native drag is driven by PanResponder. Its `panHandlers` set the same
+    // responder props (`onResponderGrant/Move/Release`, etc.) that RN's
+    // `Pressable`/`Pressability` also set internally — and `Pressable` spreads
+    // its own handlers last, silently clobbering ours. So on native the thumb
+    // must be a plain `View` that carries `panHandlers` directly. Web keeps
+    // `Pressable` for its pointer-event, hover, and focus-ring behavior.
+    const Comp = asChild ? Slot : isWeb ? Pressable : View;
+
+    const setThumbRef = useCallback(
+      (node: ComponentRef<typeof Pressable> | null) => {
+        thumbRef.current = node;
+        assignRef(ref, node);
+      },
+      [ref, thumbRef],
+    );
+
+    const webInteractionProps: PressableProps = {
+      onPointerDown: handlePointerDown as unknown as PressableProps['onPointerDown'],
+      onHoverIn: composeEventHandlers(
+        onHoverIn,
+        composeEventHandlers(hoverProps.onHoverIn, () => setIsHovered(true)),
+      ),
+      onHoverOut: composeEventHandlers(
+        onHoverOut,
+        composeEventHandlers(hoverProps.onHoverOut, () => setIsHovered(false)),
+      ),
+      onPressIn: composeEventHandlers(onPressIn, pressableProps.onPressIn),
+      onPressOut: composeEventHandlers(onPressOut, pressableProps.onPressOut),
+      disabled: isDisabled,
+      tabIndex: -1,
+    };
+
+    return (
+      <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, () => setIsFocused(true)),
+        )}
+        onBlur={composeEventHandlers(
+          composeEventHandlers(onBlur as (...args: unknown[]) => unknown, focusProps.onBlur),
+          composeEventHandlers(focusRingProps.onBlur, () => setIsFocused(false)),
+        )}
+        style={[thumbStyle, style]}
+        accessibilityRole="none"
+        importantForAccessibility="no"
+        {...dataAttributes({
+          slot: 'slider-thumb',
+          hover: isHovered,
+          focus: isFocused,
+          focusVisible: isFocusVisible,
+          // On native there is no `Pressable`, so `usePress` never fires; the
+          // drag state stands in for "active" so the thumb still scales while
+          // the user is dragging (see `data-[active=true]:scale-105`).
+          active: isPressed || isDragging,
+          dragging: isDragging,
+          disabled: isDisabled,
+        })}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+SliderThumb.displayName = 'SliderThumb';

package/src/slider/context.tsx

@@ -0,0 +1,38 @@
+import type { RefObject } from 'react';
+import type { View } from 'react-native';
+import { createContext } from '@cdx-ui/utils';
+import type { SliderOrientation } from './types';
+
+export interface SliderTrackLayout {
+  readonly width: number;
+  readonly height: number;
+  readonly x: number;
+  readonly y: number;
+}
+
+export interface SliderContextValue {
+  readonly value: number;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly percent: number;
+  readonly orientation: SliderOrientation;
+  readonly isDisabled: boolean;
+  readonly isDragging: boolean;
+  readonly isHovered: boolean;
+  readonly isFocused: boolean;
+  readonly trackLayout: SliderTrackLayout | null;
+  readonly thumbSize: number;
+  readonly setValue: (value: number, complete?: boolean) => void;
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+  readonly setTrackLayout: (layout: SliderTrackLayout) => void;
+  readonly setThumbSize: (size: number) => void;
+  readonly setIsDragging: (dragging: boolean) => void;
+  readonly setIsHovered: (hovered: boolean) => void;
+  readonly setIsFocused: (focused: boolean) => void;
+  readonly getValueLabel: () => string;
+  readonly thumbRef: RefObject<View | null>;
+}
+
+export const [SliderProvider, useSliderContext] =
+  createContext<SliderContextValue>('SliderContext');