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

package/src/accordion/AccordionPanel.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from 'react';
+import { Platform, View } from 'react-native';
+import { useDisclosure } from '@react-native-aria/disclosure';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useAccordionItemContext } from './context';
+import type { IAccordionPanelProps } from './types';
+
+export interface AccordionPanelRootProps extends IAccordionPanelProps {
+  asChild?: boolean;
+}
+
+export const AccordionPanelRoot = forwardRef<View, AccordionPanelRootProps>(
+  ({ asChild, children, className, style, ...props }, ref) => {
+    const { isExpanded, isDisabled, triggerId, panelId, toggle } = useAccordionItemContext();
+
+    const toggleState = {
+      isSelected: isExpanded,
+      defaultSelected: false,
+      setSelected: (selected: boolean) => {
+        if (selected !== isExpanded) {
+          toggle();
+        }
+      },
+      toggle,
+    };
+
+    const { disclosureProps } = useDisclosure({}, toggleState);
+    const Comp = asChild ? Slot : View;
+
+    if (!isExpanded) {
+      return null;
+    }
+
+    const platformA11yProps =
+      Platform.OS === 'web'
+        ? {
+            id: panelId,
+            nativeID: panelId,
+            role: 'region' as const,
+            'aria-labelledby': triggerId,
+          }
+        : {
+            nativeID: panelId,
+            accessibilityLabelledBy: triggerId,
+            accessibilityRole: 'none' as const,
+          };
+
+    return (
+      <Comp
+        ref={ref}
+        className={className}
+        style={style}
+        {...disclosureProps}
+        {...props}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-panel',
+            state: 'open',
+            disabled: isDisabled,
+          }),
+        )}
+        {...platformA11yProps}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AccordionPanelRoot.displayName = 'AccordionPanelRoot';

package/src/accordion/AccordionTrigger.tsx

@@ -0,0 +1,120 @@
+import { forwardRef, useMemo } from 'react';
+import { Platform, Pressable } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { usePress, useHover } from '@react-native-aria/interactions';
+import { useDisclosureButton } from '@react-native-aria/disclosure';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useAccordionItemContext } from './context';
+import type { IAccordionTriggerProps } from './types';
+
+export interface AccordionTriggerRootProps extends IAccordionTriggerProps {
+  className?: string;
+}
+
+export const AccordionTriggerRoot = forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  AccordionTriggerRootProps
+>(
+  (
+    {
+      asChild,
+      children,
+      className,
+      style,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onFocus,
+      onBlur,
+      accessibilityLabel,
+      ...props
+    },
+    ref,
+  ) => {
+    const { isExpanded, isDisabled, triggerId, panelId, toggle } = useAccordionItemContext();
+
+    const toggleState = useMemo(
+      () => ({
+        isSelected: isExpanded,
+        defaultSelected: false,
+        setSelected: (selected: boolean) => {
+          if (selected !== isExpanded) {
+            toggle();
+          }
+        },
+        toggle,
+      }),
+      [isExpanded, toggle],
+    );
+
+    const { buttonProps } = useDisclosureButton({}, toggleState);
+    const { focusProps, isFocused } = useFocus();
+    const { focusProps: focusRingProps, isFocusVisible } = useFocusRing() as {
+      focusProps: { onFocus?: () => void; onBlur?: () => void };
+      isFocusVisible: boolean;
+    };
+    const { pressProps, isPressed } = usePress({ isDisabled });
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+
+    const Comp = asChild ? Slot : Pressable;
+
+    const platformA11yProps =
+      Platform.OS === 'web'
+        ? {
+            id: triggerId,
+            role: 'button' as const,
+            'aria-expanded': isExpanded,
+            'aria-disabled': isDisabled || undefined,
+            'aria-controls': isExpanded ? panelId : undefined,
+          }
+        : {
+            nativeID: triggerId,
+            accessibilityRole: 'button' as const,
+            accessibilityState: { expanded: isExpanded, disabled: isDisabled },
+            accessibilityControls: isExpanded ? panelId : undefined,
+          };
+
+    const { onPress: disclosureOnPress, ...disclosureRestProps } = buttonProps;
+    const disclosureProps = Platform.OS === 'web' ? {} : disclosureRestProps;
+
+    return (
+      <Comp
+        ref={ref}
+        disabled={isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        className={className}
+        style={style}
+        {...props}
+        {...disclosureProps}
+        {...platformA11yProps}
+        {...mergeDataAttributes(
+          props,
+          dataAttributes({
+            slot: 'accordion-trigger',
+            state: isExpanded ? 'open' : 'closed',
+            disabled: isDisabled,
+            hover: isHovered,
+            active: isPressed,
+            focus: isFocused,
+            focusVisible: isFocusVisible,
+          }),
+        )}
+        onPressIn={composeEventHandlers(onPressIn, pressProps.onPressIn)}
+        onPressOut={composeEventHandlers(onPressOut, pressProps.onPressOut)}
+        onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}
+        onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}
+        onPress={composeEventHandlers(onPress, disclosureOnPress)}
+        onFocus={composeEventHandlers(onFocus, focusProps.onFocus, focusRingProps.onFocus)}
+        onBlur={composeEventHandlers(onBlur, focusProps.onBlur, focusRingProps.onBlur)}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+AccordionTriggerRoot.displayName = 'AccordionTriggerRoot';

package/src/accordion/context.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react';
+import type { IAccordionContextValue, IAccordionItemContextValue } from './types';
+
+export const AccordionContext = createContext<IAccordionContextValue | null>(null);
+
+export const AccordionItemContext = createContext<IAccordionItemContextValue | null>(null);
+
+export function useAccordionContext(): IAccordionContextValue {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion compound components must be used within Accordion');
+  }
+  return context;
+}
+
+export function useAccordionItemContext(): IAccordionItemContextValue {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error('Accordion.Item sub-components must be used within Accordion.Item');
+  }
+  return context;
+}

package/src/accordion/index.ts

@@ -0,0 +1,21 @@
+export type {
+  IAccordionProps,
+  IAccordionItemProps,
+  IAccordionTriggerProps,
+  IAccordionPanelProps,
+  IAccordionContextValue,
+  IAccordionItemContextValue,
+  AccordionType,
+} from './types';
+
+export {
+  AccordionContext,
+  AccordionItemContext,
+  useAccordionContext,
+  useAccordionItemContext,
+} from './context';
+
+export { AccordionRoot, type AccordionRootProps } from './Accordion';
+export { AccordionItemRoot, type AccordionItemRootProps } from './AccordionItem';
+export { AccordionTriggerRoot, type AccordionTriggerRootProps } from './AccordionTrigger';
+export { AccordionPanelRoot, type AccordionPanelRootProps } from './AccordionPanel';

package/src/accordion/types.ts

@@ -0,0 +1,56 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { DisclosureGroupState } from '@react-stately/disclosure';
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface IAccordionProps extends ViewProps {
+  /** Controlled expanded item value(s). */
+  value?: string | string[];
+  /** Default expanded value(s) for uncontrolled usage. */
+  defaultValue?: string | string[];
+  /** Called when expanded items change. */
+  onValueChange?: (value: string | string[]) => void;
+  /** Single-select (accordion) vs multi-select (disclosure group). @default 'single' */
+  type?: AccordionType;
+  /** When `type="single"`, allow closing the open item. @default true */
+  collapsible?: boolean;
+  /** Disables expansion for all items. */
+  isDisabled?: boolean;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}
+
+export interface IAccordionItemProps extends ViewProps {
+  /** Required stable id within the Accordion. */
+  value: string;
+  disabled?: boolean;
+}
+
+export interface IAccordionTriggerProps extends PressableProps {
+  children?: ReactNode;
+  asChild?: boolean;
+}
+
+export interface IAccordionPanelProps extends ViewProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+export interface IAccordionContextValue {
+  groupState: DisclosureGroupState;
+  type: AccordionType;
+  collapsible: boolean;
+  isDisabled: boolean;
+}
+
+export interface IAccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+  isDisabled: boolean;
+  triggerId: string;
+  panelId: string;
+  toggle: () => void;
+  disableGutters?: boolean;
+  showSeparator?: boolean;
+}

package/src/accordion/utils.ts

@@ -0,0 +1,22 @@
+import type { AccordionType } from './types';
+
+export function toExpandedKeys(value: string | string[] | undefined): Set<string> | undefined {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (Array.isArray(value)) {
+    return new Set(value);
+  }
+  if (value === '') {
+    return new Set<string>();
+  }
+  return new Set<string>([value]);
+}
+
+export function fromExpandedKeys(
+  keys: Iterable<string | number>,
+  type: AccordionType,
+): string | string[] {
+  const values = Array.from(keys).map(String);
+  return type === 'single' ? (values[0] ?? '') : values;
+}

package/src/index.ts

@@ -65,6 +65,7 @@ export * from './tooltip';
 export * from './portal';
 export * from './progress-bar';
 export * from './radio';
+export * from './accordion';
 export * from './slider';
 export type { InteractionState } from './types';
 export { FormControlContext, useFormControlContext } from '@cdx-ui/utils';

package/src/slider/SliderRail.tsx

@@ -14,23 +14,30 @@ import { dataAttributes } from '../utils/dataAttributes';
 import { useSliderContext } from './context';
 import type { InterfaceSliderRailProps } from './types';
 import { getPointerCoords, getRatioFromPagePoint, useWebSliderDrag } from './useSliderPointer';
+import { clamp, getClosestValueIndex } from './utils';
 
 export interface SliderRailProps extends InterfaceSliderRailProps {}
 
 export const SliderRail = forwardRef<View, SliderRailProps>(
   ({ asChild, style, onLayout, children, ...props }, ref) => {
     const {
+      values,
+      min,
+      max,
+      step,
       orientation,
       isDisabled,
       isDragging,
       trackLayout,
       thumbSize,
-      setValueFromRatio,
+      setNearestThumbValueFromRatio,
+      setThumbValueFromRatio,
+      setDraggingIndex,
       setTrackLayout,
-      setIsDragging,
     } = useSliderContext();
 
     const railRef = useRef<View>(null);
+    const draggingThumbIndexRef = useRef<number | null>(null);
 
     const measureRail = useCallback(() => {
       const node = railRef.current;
@@ -50,10 +57,32 @@ export const SliderRail = forwardRef<View, SliderRailProps>(
       [measureRail, onLayout],
     );
 
+    const setRatioForRailDrag = useCallback(
+      (ratio: number, complete?: boolean) => {
+        const thumbIndex = draggingThumbIndexRef.current;
+        if (thumbIndex == null) {
+          setNearestThumbValueFromRatio(ratio, complete);
+          return;
+        }
+        setThumbValueFromRatio(thumbIndex, ratio, complete);
+        if (complete) {
+          draggingThumbIndexRef.current = null;
+        }
+      },
+      [setNearestThumbValueFromRatio, setThumbValueFromRatio],
+    );
+
+    const setDraggingForRail = useCallback(
+      (dragging: boolean) => {
+        setDraggingIndex(dragging ? draggingThumbIndexRef.current : null);
+      },
+      [setDraggingIndex],
+    );
+
     const { startDrag } = useWebSliderDrag({
       isDisabled,
-      setIsDragging,
-      setValueFromRatio,
+      setIsDragging: setDraggingForRail,
+      setValueFromRatio: setRatioForRailDrag,
       trackLayout,
       orientation,
       thumbSize,
@@ -65,9 +94,12 @@ export const SliderRail = forwardRef<View, SliderRailProps>(
           return;
         }
         const { x, y } = getPointerCoords(event.nativeEvent);
-        setValueFromRatio(getRatioFromPagePoint(x, y, trackLayout, orientation, thumbSize), true);
+        setNearestThumbValueFromRatio(
+          getRatioFromPagePoint(x, y, trackLayout, orientation, thumbSize),
+          true,
+        );
       },
-      [isDisabled, orientation, setValueFromRatio, thumbSize, trackLayout],
+      [isDisabled, orientation, setNearestThumbValueFromRatio, thumbSize, trackLayout],
     );
 
     const handlePress = useCallback(
@@ -91,9 +123,25 @@ export const SliderRail = forwardRef<View, SliderRailProps>(
         setTrackLayout(freshLayout);
 
         const { x, y } = getPointerCoords(event.nativeEvent);
-        startDrag(x, y, undefined, freshLayout);
+        const ratio = getRatioFromPagePoint(x, y, freshLayout, orientation, thumbSize);
+        const target = min + clamp(ratio, 0, 1) * (max - min);
+        const nearestIndex = getClosestValueIndex(values, target);
+        draggingThumbIndexRef.current = nearestIndex;
+        setDraggingIndex(nearestIndex);
+        startDrag(x, y, ratio, freshLayout);
       },
-      [isDisabled, setTrackLayout, startDrag],
+      [
+        isDisabled,
+        max,
+        min,
+        orientation,
+        setDraggingIndex,
+        setTrackLayout,
+        startDrag,
+        step,
+        thumbSize,
+        values,
+      ],
     );
 
     const Comp = asChild ? Slot : View;