@cdx-ui/components 0.0.1-beta.18 → 0.0.1-beta.180

package/src/components/Slider/getSliderPopupPosition.ts

@@ -0,0 +1,70 @@
+import { Platform, type ViewStyle } from 'react-native';
+import {
+  getAnchoredOverlayPosition,
+  type AnchorLayout,
+  type SliderOrientation,
+} from '@cdx-ui/primitives';
+
+export const SLIDER_POPUP_OFFSET = 8;
+export const SLIDER_POPUP_Z_INDEX = 9999;
+
+export interface SliderPopupPortalOrigin {
+  x: number;
+  y: number;
+}
+
+export function getSliderPopupPortalStyle(
+  windowStyle: ViewStyle,
+  portalOrigin: SliderPopupPortalOrigin | null,
+): ViewStyle {
+  if (portalOrigin == null) {
+    return { ...windowStyle, opacity: 0 };
+  }
+
+  return {
+    ...windowStyle,
+    left:
+      typeof windowStyle.left === 'number' ? windowStyle.left - portalOrigin.x : windowStyle.left,
+    top: typeof windowStyle.top === 'number' ? windowStyle.top - portalOrigin.y : windowStyle.top,
+  };
+}
+
+/**
+ * Popover-style placement for the slider value tooltip, modeled after anchored
+ * popover content positioning (placement + offset relative to a measured trigger).
+ */
+export function getSliderPopupAnchorStyle(
+  anchor: AnchorLayout,
+  orientation: SliderOrientation,
+  offset = SLIDER_POPUP_OFFSET,
+): ViewStyle {
+  const result = getAnchoredOverlayPosition(
+    anchor,
+    { width: 0, height: 0 },
+    { width: Number.MAX_SAFE_INTEGER, height: Number.MAX_SAFE_INTEGER },
+    {
+      placement: orientation === 'vertical' ? 'right' : 'top',
+      offset,
+      collisionBehavior: 'none',
+    },
+  );
+  const position = (Platform.OS === 'web' ? 'fixed' : 'absolute') as ViewStyle['position'];
+
+  if (orientation === 'vertical') {
+    return {
+      position,
+      left: result.style.left,
+      top: result.style.top,
+      zIndex: SLIDER_POPUP_Z_INDEX,
+      transform: [{ translateY: '-50%' }] as ViewStyle['transform'],
+    };
+  }
+
+  return {
+    position,
+    left: result.style.left,
+    top: result.style.top,
+    zIndex: SLIDER_POPUP_Z_INDEX,
+    transform: [{ translateX: '-50%' }, { translateY: '-100%' }] as ViewStyle['transform'],
+  };
+}

package/src/components/Slider/index.tsx

@@ -0,0 +1,520 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Platform, StyleSheet, Text, View, type ViewProps, type ViewStyle } from 'react-native';
+import {
+  SliderRoot as SliderRootPrimitive,
+  SliderRail as SliderRailPrimitive,
+  SliderThumb as SliderThumbPrimitive,
+  Slot,
+  Portal,
+  createPortalFn,
+  useAnchoredOverlay,
+  dataAttributes,
+  getFillExtent,
+  getMarkerPositionStyle,
+  getMarkerStepValues,
+  mergeDataAttributes,
+  useSliderContext,
+  useSliderThumbContext,
+  valueToPercent,
+  type ISliderProps,
+  type ISliderRailProps,
+  type ISliderThumbProps,
+  type SliderOrientation,
+  type SliderRangeValueProps,
+  type SliderSingleValueProps,
+} from '@cdx-ui/primitives';
+import {
+  cn,
+  composeEventHandlers,
+  mergeRefs,
+  ParentContext,
+  useParentContext,
+  useStyleContext,
+} from '@cdx-ui/utils';
+import {
+  sliderMarkerVariants,
+  sliderPopupBaseVariants,
+  sliderRootVariants,
+  sliderRailVariants,
+  sliderRailColorVariants,
+  sliderTrackColorVariants,
+  sliderTrackVariants,
+  sliderThumbVariants,
+  type SliderColor,
+  type SliderVariantProps,
+} from './styles';
+import {
+  getSliderPopupPortalStyle,
+  SLIDER_POPUP_OFFSET,
+  SLIDER_POPUP_Z_INDEX,
+  type SliderPopupPortalOrigin,
+} from './getSliderPopupPosition';
+
+const SCOPE = 'SLIDER';
+
+const useSliderStyleContext = () => {
+  const { color, orientation } = useStyleContext(SCOPE) as Pick<
+    SliderVariantProps,
+    'color' | 'orientation'
+  >;
+
+  return {
+    color,
+    orientation: orientation ?? 'horizontal',
+  };
+};
+
+export interface SliderProps extends Omit<ISliderProps, 'orientation'> {
+  className?: string;
+  /**
+   * Semantic color token for the track fill and thumb border.
+   * @default `action`
+   */
+  color?: SliderColor;
+  orientation?: SliderOrientation;
+  children?: ReactNode;
+}
+
+export type { SliderRangeValueProps, SliderSingleValueProps };
+
+const SliderRoot = forwardRef<View, SliderProps>(
+  (
+    {
+      className,
+      style,
+      color = 'action',
+      orientation = 'horizontal',
+      children,
+      isDisabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const parent = useParentContext();
+    const ctx = useMemo(
+      () => ({
+        ...parent,
+        [SCOPE]: { color, orientation },
+      }),
+      [color, orientation, parent],
+    );
+
+    const computedClassName = cn(sliderRootVariants({ orientation }), className);
+
+    return (
+      <ParentContext.Provider value={ctx}>
+        <SliderRootPrimitive
+          ref={ref}
+          className={computedClassName}
+          style={style}
+          orientation={orientation}
+          isDisabled={isDisabled}
+          {...props}
+        >
+          {children}
+        </SliderRootPrimitive>
+      </ParentContext.Provider>
+    );
+  },
+);
+
+SliderRoot.displayName = 'Slider';
+
+export interface SliderRailProps extends ISliderRailProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderRail = forwardRef<View, SliderRailProps>(
+  ({ className, style, children, ...props }, ref) => {
+    const { orientation, color } = useSliderStyleContext();
+
+    const computedClassName = cn(
+      sliderRailVariants({ orientation }),
+      sliderRailColorVariants({ color }),
+      className,
+    );
+
+    return (
+      <SliderRailPrimitive ref={ref} className={computedClassName} style={style} {...props}>
+        {children}
+      </SliderRailPrimitive>
+    );
+  },
+);
+
+SliderRail.displayName = 'Slider.Rail';
+
+export interface SliderTrackProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderTrack = forwardRef<View, SliderTrackProps>(
+  ({ asChild, className, style, children, testID, ...props }, ref) => {
+    const { color, orientation } = useSliderStyleContext();
+    const { values, isDragging, trackLayout, thumbSize, getThumbPercent } = useSliderContext();
+
+    const fillStyle = useMemo((): ViewStyle => {
+      const trackSize =
+        trackLayout == null
+          ? 0
+          : orientation === 'horizontal'
+            ? trackLayout.width
+            : trackLayout.height;
+
+      if (trackSize <= 0) {
+        return orientation === 'vertical'
+          ? { position: 'absolute', left: 0, right: 0, bottom: 0, height: 0 }
+          : { position: 'absolute', top: 0, bottom: 0, left: 0, width: 0 };
+      }
+
+      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: offset,
+          height: length,
+        };
+      }
+
+      return {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: offset,
+        width: length,
+      };
+    }, [getThumbPercent, orientation, thumbSize, trackLayout, values.length]);
+
+    const computedClassName = cn(
+      sliderTrackVariants({ orientation }),
+      sliderTrackColorVariants({ color }),
+      className,
+    );
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        testID={testID}
+        className={computedClassName}
+        pointerEvents="none"
+        style={[fillStyle, style]}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({ slot: 'slider-track', dragging: isDragging }),
+        )}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+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, index, children, ...props }, ref) => {
+    const { color } = useSliderStyleContext();
+
+    const computedClassName = cn(sliderThumbVariants({ color }), className);
+
+    return (
+      <SliderThumbPrimitive
+        ref={ref}
+        index={index}
+        className={computedClassName}
+        style={style}
+        {...props}
+      >
+        {children}
+      </SliderThumbPrimitive>
+    );
+  },
+);
+
+SliderThumb.displayName = 'Slider.Thumb';
+
+function dataOrientation(orientation: 'horizontal' | 'vertical' | null | undefined) {
+  return { 'data-orientation': orientation ?? 'horizontal' } as const;
+}
+
+function renderPopupLabel(children: ReactNode, getValueLabel: () => string) {
+  if (children == null || typeof children === 'string' || typeof children === 'number') {
+    return (
+      <Text className="text-content-primary text-xs font-medium select-none" selectable={false}>
+        {children ?? getValueLabel()}
+      </Text>
+    );
+  }
+
+  return children;
+}
+
+export interface SliderPopupProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderPopup = forwardRef<View, SliderPopupProps>(
+  ({ asChild, className, style, children, onLayout, ...props }, ref) => {
+    const { orientation } = useSliderStyleContext();
+    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 {
+      floatingRef,
+      onFloatingLayout,
+      style: popupPositionStyle,
+    } = useAnchoredOverlay(thumbRef, visible, {
+      placement: orientation === 'vertical' ? 'right' : 'top',
+      offset: SLIDER_POPUP_OFFSET,
+      collisionBehavior: 'none',
+      width: 'content',
+      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={[resolvedPopupPositionStyle, { zIndex: SLIDER_POPUP_Z_INDEX }]}
+      >
+        <Comp
+          ref={mergeRefs(ref, floatingRef)}
+          className={computedClassName}
+          style={style}
+          onLayout={composeEventHandlers(onLayout, onFloatingLayout)}
+          {...props}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({ slot: 'slider-popup', visible: true }),
+            dataOrientation(orientation),
+          )}
+        >
+          {label}
+        </Comp>
+      </View>
+    );
+
+    if (Platform.OS === 'web' && createPortalFn && typeof document !== 'undefined') {
+      return createPortalFn(popup, document.body);
+    }
+
+    return (
+      <Portal name={portalName}>
+        <View
+          ref={portalRef}
+          pointerEvents="box-none"
+          style={[StyleSheet.absoluteFill, { zIndex: SLIDER_POPUP_Z_INDEX }]}
+          onLayout={measurePortalOrigin}
+        >
+          {popup}
+        </View>
+      </Portal>
+    );
+  },
+);
+
+SliderPopup.displayName = 'Slider.Popup';
+
+export interface SliderMarkerProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  value?: number;
+  children?: ReactNode;
+}
+
+const SliderMarker = forwardRef<View, SliderMarkerProps>(
+  ({ asChild, className, style, value, testID, ...props }, ref) => {
+    const { values, min, max, orientation, trackLayout, thumbSize } = useSliderContext();
+
+    const markerStyle = useMemo(() => {
+      if (value == null) {
+        return undefined;
+      }
+      const percent = valueToPercent(value, min, max);
+      return getMarkerPositionStyle(percent, orientation, trackLayout, thumbSize);
+    }, [max, min, orientation, thumbSize, trackLayout, value]);
+
+    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;
+
+    return (
+      <Comp
+        ref={ref}
+        testID={testID}
+        className={computedClassName}
+        style={[markerStyle, style]}
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'slider-marker',
+            value: value == null ? undefined : String(value),
+            filled: isFilled,
+          }),
+        )}
+      />
+    );
+  },
+);
+
+SliderMarker.displayName = 'Slider.Marker';
+
+function isSliderMarkerElement(child: unknown): child is ReactElement<SliderMarkerProps> {
+  if (!isValidElement(child)) {
+    return false;
+  }
+  const type = child.type as { displayName?: string };
+  return type.displayName === 'Slider.Marker';
+}
+
+export interface SliderMarkerGroupProps extends ViewProps {
+  asChild?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+const SliderMarkerGroup = forwardRef<View, SliderMarkerGroupProps>(
+  ({ asChild, className, style, children, testID, ...props }, ref) => {
+    const { min, max, step } = useSliderContext();
+
+    const markers = useMemo(() => {
+      if (step <= 0 || max <= min) {
+        return null;
+      }
+
+      const childList = Children.toArray(children);
+      if (childList.length === 0) {
+        return null;
+      }
+
+      const templateMarker = childList.find(
+        (child): child is ReactElement<SliderMarkerProps> =>
+          isSliderMarkerElement(child) && child.props.value == null,
+      );
+
+      if (templateMarker) {
+        return getMarkerStepValues(min, max, step).map((markerValue) =>
+          cloneElement(templateMarker, { key: markerValue, value: markerValue }),
+        );
+      }
+
+      return childList;
+    }, [children, max, min, step]);
+
+    if (!markers) {
+      return null;
+    }
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <Comp
+        ref={ref}
+        testID={testID}
+        className={cn('absolute inset-0 z-[1]', className)}
+        style={style}
+        pointerEvents="none"
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'slider-marker-group' }))}
+      >
+        {markers}
+      </Comp>
+    );
+  },
+);
+
+SliderMarkerGroup.displayName = 'Slider.MarkerGroup';
+
+type SliderCompoundComponent = typeof SliderRoot & {
+  Rail: typeof SliderRail;
+  Track: typeof SliderTrack;
+  Thumb: typeof SliderThumb;
+  Popup: typeof SliderPopup;
+  MarkerGroup: typeof SliderMarkerGroup;
+  Marker: typeof SliderMarker;
+};
+
+export const Slider = Object.assign(SliderRoot, {
+  Rail: SliderRail,
+  Track: SliderTrack,
+  Thumb: SliderThumb,
+  Popup: SliderPopup,
+  MarkerGroup: SliderMarkerGroup,
+  Marker: SliderMarker,
+}) as SliderCompoundComponent;
+
+export type { SliderColor, SliderVariantProps };