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

package/src/components/Slider/index.tsx

@@ -3,8 +3,11 @@ import {
   cloneElement,
   forwardRef,
   isValidElement,
+  useCallback,
   useId,
   useMemo,
+  useRef,
+  useState,
   type ReactElement,
   type ReactNode,
 } from 'react';
@@ -18,16 +21,19 @@ import {
   createPortalFn,
   useAnchoredOverlay,
   dataAttributes,
+  getFillExtent,
   getMarkerPositionStyle,
   getMarkerStepValues,
   mergeDataAttributes,
-  percentToFillExtent,
   useSliderContext,
+  useSliderThumbContext,
   valueToPercent,
   type ISliderProps,
   type ISliderRailProps,
   type ISliderThumbProps,
   type SliderOrientation,
+  type SliderRangeValueProps,
+  type SliderSingleValueProps,
 } from '@cdx-ui/primitives';
 import {
   cn,
@@ -49,7 +55,12 @@ import {
   type SliderColor,
   type SliderVariantProps,
 } from './styles';
-import { SLIDER_POPUP_OFFSET, SLIDER_POPUP_Z_INDEX } from './getSliderPopupPosition';
+import {
+  getSliderPopupPortalStyle,
+  SLIDER_POPUP_OFFSET,
+  SLIDER_POPUP_Z_INDEX,
+  type SliderPopupPortalOrigin,
+} from './getSliderPopupPosition';
 
 const SCOPE = 'SLIDER';
 
@@ -76,6 +87,8 @@ export interface SliderProps extends Omit<ISliderProps, 'orientation'> {
   children?: ReactNode;
 }
 
+export type { SliderRangeValueProps, SliderSingleValueProps };
+
 const SliderRoot = forwardRef<View, SliderProps>(
   (
     {
@@ -153,7 +166,7 @@ export interface SliderTrackProps extends ViewProps {
 const SliderTrack = forwardRef<View, SliderTrackProps>(
   ({ asChild, className, style, children, testID, ...props }, ref) => {
     const { color, orientation } = useSliderStyleContext();
-    const { percent, isDragging, trackLayout, thumbSize } = useSliderContext();
+    const { values, isDragging, trackLayout, thumbSize, getThumbPercent } = useSliderContext();
 
     const fillStyle = useMemo((): ViewStyle => {
       const trackSize =
@@ -169,15 +182,18 @@ const SliderTrack = forwardRef<View, SliderTrackProps>(
           : { position: 'absolute', top: 0, bottom: 0, left: 0, width: 0 };
       }
 
-      const extent = percentToFillExtent(percent, trackSize, thumbSize);
+      const isSingleThumb = values.length <= 1;
+      const startPercent = isSingleThumb ? 0 : getThumbPercent(0);
+      const endPercent = isSingleThumb ? getThumbPercent(0) : getThumbPercent(values.length - 1);
+      const { offset, length } = getFillExtent(startPercent, endPercent, trackSize, thumbSize);
 
       if (orientation === 'vertical') {
         return {
           position: 'absolute',
           left: 0,
           right: 0,
-          bottom: 0,
-          height: extent,
+          bottom: offset,
+          height: length,
         };
       }
 
@@ -185,10 +201,10 @@ const SliderTrack = forwardRef<View, SliderTrackProps>(
         position: 'absolute',
         top: 0,
         bottom: 0,
-        left: 0,
-        width: extent,
+        left: offset,
+        width: length,
       };
-    }, [orientation, percent, thumbSize, trackLayout]);
+    }, [getThumbPercent, orientation, thumbSize, trackLayout, values.length]);
 
     const computedClassName = cn(
       sliderTrackVariants({ orientation }),
@@ -221,17 +237,27 @@ SliderTrack.displayName = 'Slider.Track';
 
 export interface SliderThumbProps extends ISliderThumbProps {
   className?: string;
+  /**
+   * Zero-based thumb index. Defaults to `0` for single-value sliders.
+   */
+  index?: number;
   children?: ReactNode;
 }
 
 const SliderThumb = forwardRef<View, SliderThumbProps>(
-  ({ className, style, children, ...props }, ref) => {
+  ({ className, style, index, children, ...props }, ref) => {
     const { color } = useSliderStyleContext();
 
     const computedClassName = cn(sliderThumbVariants({ color }), className);
 
     return (
-      <SliderThumbPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+      <SliderThumbPrimitive
+        ref={ref}
+        index={index}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
         {children}
       </SliderThumbPrimitive>
     );
@@ -265,9 +291,11 @@ export interface SliderPopupProps extends ViewProps {
 const SliderPopup = forwardRef<View, SliderPopupProps>(
   ({ asChild, className, style, children, onLayout, ...props }, ref) => {
     const { orientation } = useSliderStyleContext();
-    const { isDragging, isHovered, isFocused, getValueLabel, thumbRef, percent } =
-      useSliderContext();
+    const { index, isDragging, isHovered, isFocused, thumbRef, percent } = useSliderThumbContext();
+    const { getThumbValueLabel } = useSliderContext();
     const portalName = useId();
+    const portalRef = useRef<View>(null);
+    const [portalOrigin, setPortalOrigin] = useState<SliderPopupPortalOrigin | null>(null);
 
     const visible = isDragging || isHovered || isFocused;
     const {
@@ -282,17 +310,39 @@ const SliderPopup = forwardRef<View, SliderPopupProps>(
       remeasureKey: percent,
       trackWhileOpen: true,
     });
+    const measurePortalOrigin = useCallback(() => {
+      if (Platform.OS === 'web' || orientation !== 'vertical') {
+        return;
+      }
+
+      portalRef.current?.measureInWindow((x, y) => {
+        setPortalOrigin((previous) =>
+          previous?.x === x && previous.y === y ? previous : { x, y },
+        );
+      });
+    }, [orientation]);
+    const resolvedPopupPositionStyle = useMemo(
+      () =>
+        Platform.OS !== 'web' && orientation === 'vertical'
+          ? getSliderPopupPortalStyle(popupPositionStyle, portalOrigin)
+          : popupPositionStyle,
+      [orientation, popupPositionStyle, portalOrigin],
+    );
 
     if (!visible) {
       return null;
     }
 
+    const getValueLabel = () => getThumbValueLabel(index);
     const label = renderPopupLabel(children, getValueLabel);
     const computedClassName = cn(sliderPopupBaseVariants(), className);
     const Comp = asChild ? Slot : View;
 
     const popup = (
-      <View pointerEvents="none" style={[popupPositionStyle, { zIndex: SLIDER_POPUP_Z_INDEX }]}>
+      <View
+        pointerEvents="none"
+        style={[resolvedPopupPositionStyle, { zIndex: SLIDER_POPUP_Z_INDEX }]}
+      >
         <Comp
           ref={mergeRefs(ref, floatingRef)}
           className={computedClassName}
@@ -319,8 +369,10 @@ const SliderPopup = forwardRef<View, SliderPopupProps>(
     return (
       <Portal name={portalName}>
         <View
+          ref={portalRef}
           pointerEvents="box-none"
           style={[StyleSheet.absoluteFill, { zIndex: SLIDER_POPUP_Z_INDEX }]}
+          onLayout={measurePortalOrigin}
         >
           {popup}
         </View>
@@ -340,14 +392,7 @@ export interface SliderMarkerProps extends ViewProps {
 
 const SliderMarker = forwardRef<View, SliderMarkerProps>(
   ({ asChild, className, style, value, testID, ...props }, ref) => {
-    const {
-      value: currentValue,
-      min,
-      max,
-      orientation,
-      trackLayout,
-      thumbSize,
-    } = useSliderContext();
+    const { values, min, max, orientation, trackLayout, thumbSize } = useSliderContext();
 
     const markerStyle = useMemo(() => {
       if (value == null) {
@@ -357,7 +402,10 @@ const SliderMarker = forwardRef<View, SliderMarkerProps>(
       return getMarkerPositionStyle(percent, orientation, trackLayout, thumbSize);
     }, [max, min, orientation, thumbSize, trackLayout, value]);
 
-    const isFilled = value != null && value <= currentValue;
+    const low = values[0] ?? min;
+    const high = values[values.length - 1] ?? low;
+    const isFilled =
+      value != null && (values.length <= 1 ? value <= low : value >= low && value <= high);
     const computedClassName = cn(sliderMarkerVariants({ filled: isFilled }), className);
     const Comp = asChild ? Slot : View;
 

package/src/components/index.ts

@@ -31,6 +31,7 @@ export * from './Input';
 export * from './OtpInput';
 export * from './Link';
 export * from './ListItem';
+export * from './Accordion';
 export * from './Menu';
 export * from './ProgressBar';
 export * from './ProgressCircle';