@cdx-ui/primitives 0.0.1-beta.171 → 0.0.1-beta.173

package/src/accordion/AccordionItem.tsx

@@ -0,0 +1,70 @@
+import { forwardRef, useCallback, useId, useMemo } from 'react';
+import { View } from 'react-native';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { AccordionItemContext, useAccordionContext } from './context';
+import type { IAccordionItemProps } from './types';
+
+export interface AccordionItemRootProps extends IAccordionItemProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const AccordionItemRoot = forwardRef<View, AccordionItemRootProps>(
+  ({ asChild, children, className, style, value, disabled = false, ...props }, ref) => {
+    const { groupState, type, collapsible, isDisabled: groupDisabled } = useAccordionContext();
+    const reactId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+    const triggerId = `accordion-${reactId}-trigger`;
+    const panelId = `accordion-${reactId}-panel`;
+
+    const isExpanded = groupState.expandedKeys.has(value);
+    const isDisabled = disabled || groupDisabled;
+
+    const toggle = useCallback(() => {
+      if (isDisabled) {
+        return;
+      }
+      if (type === 'single' && !collapsible && isExpanded) {
+        return;
+      }
+      groupState.toggleKey(value);
+    }, [isDisabled, type, collapsible, isExpanded, groupState, value]);
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        isExpanded,
+        isDisabled,
+        triggerId,
+        panelId,
+        toggle,
+      }),
+      [value, isExpanded, isDisabled, triggerId, panelId, toggle],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <AccordionItemContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          className={className}
+          style={style}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              slot: 'accordion-item',
+              state: isExpanded ? 'open' : 'closed',
+              disabled: isDisabled,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </AccordionItemContext.Provider>
+    );
+  },
+);
+
+AccordionItemRoot.displayName = 'AccordionItemRoot';

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