@cdx-ui/primitives 0.0.1-beta.170 → 0.0.1-beta.172

package/src/slider/SliderRoot.tsx

@@ -1,25 +1,32 @@
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import {
-  Platform,
-  View,
-  type NativeSyntheticEvent,
-  type TargetedEvent,
-  type ViewProps,
-} from 'react-native';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, View, 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']);
+import type { SliderRootImplementationProps } from './types';
+import {
+  arraysEqual,
+  clamp,
+  denormalizeSliderValue,
+  formatSliderValue,
+  getClosestValueIndex,
+  normalizeSliderValue,
+  snapToStep,
+  valueToPercent,
+} from './utils';
 
-export interface SliderRootProps extends InterfaceSliderProps {
+export interface SliderRootProps extends SliderRootImplementationProps {
   readonly asChild?: boolean;
 }
 
+function isArrayShape(
+  value: number | readonly number[] | undefined,
+  defaultValue: number | readonly number[] | undefined,
+): boolean {
+  return Array.isArray(value) || Array.isArray(defaultValue);
+}
+
 export const SliderRoot = forwardRef<View, SliderRootProps>(
   (
     {
@@ -35,8 +42,6 @@ export const SliderRoot = forwardRef<View, SliderRootProps>(
       orientation = 'horizontal',
       accessibilityLabel,
       accessibilityValue: accessibilityValueProp,
-      accessibilityRole = 'adjustable',
-      role = 'slider',
       children,
       onLayout,
       ...props
@@ -45,42 +50,173 @@ export const SliderRoot = forwardRef<View, SliderRootProps>(
   ) => {
     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 [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+    const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
+    const [registeredThumbCounts, setRegisteredThumbCounts] = useState<Map<number, number>>(
+      () => new Map(),
+    );
+    const deprecatedThumbRef = useRef<View>(null);
+
+    const isRangeShapeRef = useRef(isArrayShape(valueProp, defaultValue));
+    isRangeShapeRef.current = isArrayShape(valueProp, defaultValue);
+
+    const resolvedDefaultScalar = typeof defaultValue === 'number' ? defaultValue : min;
+    const resolvedDefaultArray = Array.isArray(defaultValue)
+      ? [...defaultValue]
+      : [resolvedDefaultScalar];
+
+    const [values, setValuesState] = useControllableState<readonly number[]>({
+      prop:
+        valueProp == null ? undefined : normalizeSliderValue(valueProp, min, resolvedDefaultScalar),
+      defaultProp: resolvedDefaultArray,
+      onChange: onChange
+        ? (next) => {
+            const denormalized = denormalizeSliderValue(next, isRangeShapeRef.current);
+            if (isRangeShapeRef.current) {
+              (onChange as (value: number[]) => void)(denormalized as number[]);
+            } else {
+              (onChange as (value: number) => void)(denormalized as number);
+            }
+          }
+        : undefined,
     });
 
-    const currentValue = snapToStep(value ?? resolvedDefault, min, max, step);
-    const percent = valueToPercent(currentValue, min, max);
+    const currentValues = useMemo(() => {
+      const source = values ?? resolvedDefaultArray;
+      return source.map((value) => snapToStep(value, min, max, step));
+    }, [max, min, resolvedDefaultArray, step, values]);
 
-    const setValue = useCallback(
-      (next: number, complete = false) => {
+    const registeredThumbCount = [...registeredThumbCounts.values()].reduce(
+      (total, count) => total + count,
+      0,
+    );
+    const hasDuplicateThumbIndices = [...registeredThumbCounts.values()].some((count) => count > 1);
+    const thumbCount = Math.max(currentValues.length, registeredThumbCount);
+
+    const registerThumb = useCallback((index: number) => {
+      setRegisteredThumbCounts((prev) => {
+        const next = new Map(prev);
+        next.set(index, (next.get(index) ?? 0) + 1);
+        return next;
+      });
+
+      return () => {
+        setRegisteredThumbCounts((prev) => {
+          const count = prev.get(index);
+          if (count == null) {
+            return prev;
+          }
+
+          const next = new Map(prev);
+          if (count === 1) {
+            next.delete(index);
+          } else {
+            next.set(index, count - 1);
+          }
+          return next;
+        });
+      };
+    }, []);
+
+    useEffect(() => {
+      if (!__DEV__) {
+        return;
+      }
+
+      const renderedCount = registeredThumbCount;
+      if (renderedCount > 0 && renderedCount !== currentValues.length) {
+        console.warn(
+          `[Slider] Thumb count (${String(renderedCount)}) does not match value count (${String(currentValues.length)}).`,
+        );
+      }
+
+      if (hasDuplicateThumbIndices) {
+        console.warn('[Slider] Multiple thumbs share the same `index` prop.');
+      }
+    }, [currentValues.length, hasDuplicateThumbIndices, registeredThumbCount]);
+
+    const getThumbMinValue = useCallback(
+      (index: number) => {
+        if (index <= 0) {
+          return min;
+        }
+        return currentValues[index - 1] ?? min;
+      },
+      [currentValues, min],
+    );
+
+    const getThumbMaxValue = useCallback(
+      (index: number) => {
+        if (index >= currentValues.length - 1) {
+          return max;
+        }
+        return currentValues[index + 1] ?? max;
+      },
+      [currentValues, max],
+    );
+
+    const getThumbPercent = useCallback(
+      (index: number) => valueToPercent(currentValues[index] ?? min, min, max),
+      [currentValues, max, min],
+    );
+
+    const commitValues = useCallback(
+      (nextValues: number[], complete = false) => {
         if (isDisabled) {
           return;
         }
-        const snapped = snapToStep(next, min, max, step);
-        setValueState(snapped);
-        if (complete) {
-          onChangeComplete?.(snapped);
+
+        const unchanged = arraysEqual(nextValues, currentValues);
+
+        if (!unchanged) {
+          setValuesState(nextValues);
+        }
+
+        if (complete && onChangeComplete) {
+          const denormalized = denormalizeSliderValue(
+            unchanged ? currentValues : nextValues,
+            isRangeShapeRef.current,
+          );
+          if (isRangeShapeRef.current) {
+            (onChangeComplete as (value: number[]) => void)(denormalized as number[]);
+          } else {
+            (onChangeComplete as (value: number) => void)(denormalized as number);
+          }
         }
       },
-      [isDisabled, max, min, onChangeComplete, setValueState, step],
+      [currentValues, isDisabled, onChangeComplete, setValuesState],
     );
 
-    const setValueFromRatio = useCallback(
-      (ratio: number, complete = false) => {
+    const setThumbValue = useCallback(
+      (index: number, next: number, complete = false) => {
+        if (isDisabled || index < 0 || index >= currentValues.length) {
+          return;
+        }
+
+        const snapped = snapToStep(next, getThumbMinValue(index), getThumbMaxValue(index), step);
+        const nextValues = [...currentValues];
+        nextValues[index] = snapped;
+        commitValues(nextValues, complete);
+      },
+      [commitValues, currentValues, getThumbMaxValue, getThumbMinValue, isDisabled, step],
+    );
+
+    const setThumbValueFromRatio = useCallback(
+      (index: number, ratio: number, complete = false) => {
         const next = min + clamp(ratio, 0, 1) * (max - min);
-        setValue(next, complete);
+        setThumbValue(index, next, complete);
+      },
+      [max, min, setThumbValue],
+    );
+
+    const setNearestThumbValueFromRatio = useCallback(
+      (ratio: number, complete = false) => {
+        const target = min + clamp(ratio, 0, 1) * (max - min);
+        const index = getClosestValueIndex(currentValues, target);
+        setThumbValue(index, target, complete);
       },
-      [max, min, setValue],
+      [currentValues, max, min, setThumbValue],
     );
 
     const setTrackLayout = useCallback((layout: SliderTrackLayout) => {
@@ -102,96 +238,112 @@ export const SliderRoot = forwardRef<View, SliderRootProps>(
       setThumbSizeState((prev) => (prev === size ? prev : size));
     }, []);
 
-    const accessibilityValue = useMemo(() => {
-      const defaults = {
-        min,
-        max,
-        now: currentValue,
-        text: formatSliderValue(currentValue),
-      };
+    const getThumbValueLabel = useCallback(
+      (index: number) => formatSliderValue(currentValues[index] ?? min),
+      [currentValues, min],
+    );
 
-      if (accessibilityValueProp === undefined) {
-        return defaults;
-      }
+    const isThumbDragging = useCallback(
+      (index: number) => draggingIndex === index,
+      [draggingIndex],
+    );
 
-      return { ...defaults, ...accessibilityValueProp };
-    }, [accessibilityValueProp, currentValue, max, min]);
+    const setValue = useCallback(
+      (next: number, complete = false) => setThumbValue(0, next, complete),
+      [setThumbValue],
+    );
 
-    const getValueLabel = useCallback(() => accessibilityValue.text, [accessibilityValue.text]);
+    const setValueFromRatio = useCallback(
+      (ratio: number, complete = false) => setNearestThumbValueFromRatio(ratio, complete),
+      [setNearestThumbValueFromRatio],
+    );
 
-    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();
-        }
+    const setIsDragging = useCallback((dragging: boolean) => {
+      setDraggingIndex(dragging ? 0 : null);
+    }, []);
 
-        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;
-        }
+    const setIsHovered = useCallback((hovered: boolean) => {
+      setHoveredIndex(hovered ? 0 : null);
+    }, []);
 
-        setValue(next, true);
-      },
-      [currentValue, isDisabled, max, min, setValue, step],
-    );
+    const setIsFocused = useCallback((focused: boolean) => {
+      setFocusedIndex(focused ? 0 : null);
+    }, []);
 
     const contextValue = useMemo(
       () => ({
-        value: currentValue,
+        values: currentValues,
         min,
         max,
         step,
-        percent,
         orientation,
         isDisabled,
-        isDragging,
-        isHovered,
-        isFocused: isFocused || isFocusedState,
+        draggingIndex,
+        hoveredIndex,
+        focusedIndex,
         trackLayout,
         thumbSize,
-        setValue,
-        setValueFromRatio,
+        thumbCount,
+        groupAccessibilityLabel: accessibilityLabel,
+        accessibilityValueProp,
+        getThumbPercent,
+        getThumbMinValue,
+        getThumbMaxValue,
+        setThumbValue,
+        setThumbValueFromRatio,
+        setNearestThumbValueFromRatio,
         setTrackLayout,
         setThumbSize,
+        setDraggingIndex,
+        setHoveredIndex,
+        setFocusedIndex,
+        getThumbValueLabel,
+        registerThumb,
+        isThumbDragging,
+        value: currentValues[0] ?? min,
+        percent: getThumbPercent(0),
+        isDragging: draggingIndex !== null,
+        isHovered: hoveredIndex !== null,
+        isFocused: focusedIndex !== null,
+        getValueLabel: () => getThumbValueLabel(0),
+        setValue,
+        setValueFromRatio,
+        thumbRef: deprecatedThumbRef,
         setIsDragging,
         setIsHovered,
-        setIsFocused: setIsFocusedState,
-        getValueLabel,
-        thumbRef,
+        setIsFocused,
       }),
       [
-        currentValue,
-        getValueLabel,
+        accessibilityLabel,
+        accessibilityValueProp,
+        currentValues,
+        draggingIndex,
+        focusedIndex,
+        getThumbMaxValue,
+        getThumbMinValue,
+        getThumbPercent,
+        getThumbValueLabel,
+        hoveredIndex,
         isDisabled,
-        isDragging,
-        isFocused,
-        isFocusedState,
-        isHovered,
+        isThumbDragging,
         max,
         min,
         orientation,
-        percent,
-        setTrackLayout,
+        registerThumb,
+        setIsDragging,
+        setIsFocused,
+        setIsHovered,
+        setNearestThumbValueFromRatio,
         setThumbSize,
+        setThumbValue,
+        setThumbValueFromRatio,
+        setTrackLayout,
         setValue,
         setValueFromRatio,
         step,
+        thumbCount,
         thumbSize,
         trackLayout,
-        thumbRef,
       ],
     );
 
@@ -199,10 +351,10 @@ export const SliderRoot = forwardRef<View, SliderRootProps>(
       slot: 'slider',
       orientation,
       disabled: isDisabled,
-      dragging: isDragging,
-      hover: isHovered,
-      focus: isFocused,
-      value: String(currentValue),
+      dragging: draggingIndex !== null,
+      hover: hoveredIndex !== null,
+      focus: focusedIndex !== null,
+      values: currentValues.join(','),
       min: String(min),
       max: String(max),
     });
@@ -211,49 +363,16 @@ export const SliderRoot = forwardRef<View, SliderRootProps>(
 
     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}
+          role={Platform.OS === 'web' ? 'group' : undefined}
           {...dataAttrs}
         >
           {children}