@cdx-ui/primitives 0.0.1-beta.18 → 0.0.1-beta.181

package/src/chip/ChipRoot.tsx

@@ -0,0 +1,168 @@
+import React, { forwardRef, useMemo, type ComponentRef } from 'react';
+import { Pressable, View, type PressableProps, type ViewProps } from 'react-native';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { useFocus, useFocusRing } from '@react-native-aria/focus';
+import { useHover, usePress } from '@react-native-aria/interactions';
+import type { InteractionState } from '../types';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { ChipProvider } from './context';
+import type { IChipPressablePassthrough, IChipProps } from './types';
+
+const rowStyle = {
+  flexDirection: 'row' as const,
+  alignItems: 'center' as const,
+  alignSelf: 'flex-start' as const,
+};
+
+export interface ChipRootProps extends IChipProps {}
+
+export const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipRootProps>(
+  (
+    {
+      asChild = false,
+      children,
+      onPress,
+      disabled = false,
+      accessibilityRole,
+      style,
+      ...restProps
+    },
+    ref,
+  ) => {
+    const asChildInteractive = asChild && React.isValidElement(children);
+    const isPressableRoot = !!onPress && !asChildInteractive;
+
+    const pressState = usePress({
+      isDisabled: !isPressableRoot || disabled,
+    });
+    const isPressed = pressState.isPressed;
+    const pressProps = pressState.pressProps as Pick<PressableProps, 'onPressIn' | 'onPressOut'>;
+    const { hoverProps, isHovered } = useHover();
+    const { isFocused, focusProps } = useFocus();
+    const { isFocusVisible, focusProps: focusRingProps } = useFocusRing() as {
+      isFocusVisible: boolean;
+      focusProps: typeof focusProps;
+    };
+
+    const childDisabled =
+      asChildInteractive &&
+      !!(children as React.ReactElement<{ disabled?: boolean }>).props.disabled;
+    const resolvedDisabled = disabled || childDisabled;
+
+    const contextValue = useMemo<InteractionState>(
+      () => ({
+        hover: isPressableRoot ? isHovered : false,
+        focus: isPressableRoot ? isFocused : false,
+        active: isPressableRoot ? isPressed : false,
+        disabled: resolvedDisabled,
+        focusVisible: isPressableRoot ? isFocusVisible : false,
+      }),
+      [isPressableRoot, isHovered, isFocused, isPressed, resolvedDisabled, isFocusVisible],
+    );
+
+    if (asChildInteractive) {
+      const slotMergeProps: Record<string, unknown> = {
+        ...restProps,
+        ...(resolvedDisabled && { accessibilityState: { disabled: true } }),
+        disabled: resolvedDisabled,
+        style: [rowStyle, style],
+      };
+
+      // Only set onPress when we have a parent handler to compose. Slot merges this
+      // with the child's own onPress (child first, then ours). When there is no parent
+      // onPress, omitting it preserves the child's internal handler (e.g. Link's useLink).
+      if (!resolvedDisabled && onPress) {
+        slotMergeProps.onPress = onPress;
+      }
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Slot
+            ref={ref as React.Ref<View>}
+            {...(slotMergeProps as PressableProps)}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: false,
+                hover: false,
+                focus: false,
+                focusVisible: false,
+                disabled: resolvedDisabled,
+              }),
+            )}
+          >
+            {children}
+          </Slot>
+        </ChipProvider>
+      );
+    }
+
+    if (isPressableRoot) {
+      const {
+        onPressIn: onPressInProp,
+        onPressOut: onPressOutProp,
+        onHoverIn: onHoverInProp,
+        onHoverOut: onHoverOutProp,
+        onFocus: onFocusProp,
+        onBlur: onBlurProp,
+      } = restProps as IChipPressablePassthrough & Pick<PressableProps, 'onFocus' | 'onBlur'>;
+
+      return (
+        <ChipProvider value={contextValue}>
+          <Pressable
+            {...(restProps as PressableProps)}
+            ref={ref}
+            accessibilityRole={accessibilityRole ?? 'button'}
+            {...(disabled && { accessibilityState: { disabled: true } })}
+            disabled={disabled}
+            style={[rowStyle, style]}
+            onPress={disabled ? undefined : onPress}
+            onPressIn={composeEventHandlers(onPressInProp, pressProps.onPressIn)}
+            onPressOut={composeEventHandlers(onPressOutProp, pressProps.onPressOut)}
+            onHoverIn={composeEventHandlers(onHoverInProp, hoverProps.onHoverIn)}
+            onHoverOut={composeEventHandlers(onHoverOutProp, hoverProps.onHoverOut)}
+            onFocus={composeEventHandlers(
+              composeEventHandlers(onFocusProp, focusProps.onFocus),
+              focusRingProps.onFocus,
+            )}
+            onBlur={composeEventHandlers(
+              composeEventHandlers(onBlurProp, focusProps.onBlur),
+              focusRingProps.onBlur,
+            )}
+            {...mergeDataAttributes(
+              restProps,
+              dataAttributes({
+                active: isPressed,
+                hover: isHovered,
+                focus: isFocused,
+                focusVisible: isFocusVisible,
+                disabled,
+              }),
+            )}
+          >
+            {children}
+          </Pressable>
+        </ChipProvider>
+      );
+    }
+
+    return (
+      <ChipProvider value={contextValue}>
+        <View
+          {...(restProps as ViewProps)}
+          ref={ref}
+          style={[rowStyle, style]}
+          {...mergeDataAttributes(
+            restProps,
+            disabled ? dataAttributes({ disabled: true }) : undefined,
+          )}
+        >
+          {children}
+        </View>
+      </ChipProvider>
+    );
+  },
+);
+
+ChipRoot.displayName = 'ChipRoot';

package/src/chip/context.tsx

@@ -0,0 +1,4 @@
+import { createContext } from '@cdx-ui/utils';
+import type { InteractionState } from '../types';
+
+export const [ChipProvider, useChipContext] = createContext<InteractionState>('ChipContext');

package/src/chip/index.ts

@@ -0,0 +1,3 @@
+export type { IChipPressablePassthrough, IChipProps, InterfaceChipProps } from './types';
+export { useChipContext } from './context';
+export { ChipRoot, type ChipRootProps } from './ChipRoot';

package/src/chip/types.ts

@@ -0,0 +1,20 @@
+import type { PressableProps, ViewProps } from 'react-native';
+
+export type IChipPressablePassthrough = Partial<
+  Pick<PressableProps, 'onPressIn' | 'onPressOut' | 'onHoverIn' | 'onHoverOut'>
+>;
+
+export interface InterfaceChipProps extends ViewProps, IChipPressablePassthrough {
+  /**
+   * When set (and `asChild` is not used with a valid element), root renders as pressable.
+   */
+  onPress?: PressableProps['onPress'];
+  /** Disables press handling when the root is pressable. */
+  disabled?: boolean;
+  /**
+   * Merge interaction props onto a single child instead of rendering the default pressable root.
+   */
+  asChild?: boolean;
+}
+
+export type IChipProps = InterfaceChipProps;

package/src/date-field/DateFieldHiddenInput.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef } from 'react';
+import { Platform, TextInput, type TextInputKeyPressEvent } from 'react-native';
+import { useDateFieldContext } from './context';
+
+/**
+ * Invisible input that owns keyboard focus while a segment is active.
+ * Kept always mounted (never conditionally unmounted) so focus/blur races
+ * cannot clear segment focus before keystrokes arrive.
+ *
+ * Value is synced to the segment draft so native backspace shortens the text
+ * via onChangeText (iOS number-pad has no delete key; phone-pad does).
+ */
+const HIDDEN_INPUT_STYLE = {
+  position: 'absolute' as const,
+  opacity: 0.01,
+  width: '100%' as const,
+  height: '100%' as const,
+  left: 0,
+  top: 0,
+  zIndex: 0,
+  fontSize: 16,
+};
+
+const KEYBOARD_TYPE = Platform.select<'number-pad' | 'phone-pad'>({
+  ios: 'phone-pad',
+  default: 'number-pad',
+});
+
+export function DateFieldHiddenInput({ accessibilityLabel }: { accessibilityLabel: string }) {
+  const {
+    focusedSegmentIndex,
+    disabled,
+    readOnly,
+    segmentDraft,
+    handleSegmentInputChange,
+    handleSegmentBackspace,
+    focusNextEditableSegment,
+    focusPrevEditableSegment,
+    blurSegment,
+  } = useDateFieldContext();
+
+  const inputRef = useRef<TextInput>(null);
+  const suppressBlurRef = useRef(false);
+  const focusedIndexRef = useRef(focusedSegmentIndex);
+  focusedIndexRef.current = focusedSegmentIndex;
+
+  const isActive = focusedSegmentIndex != null && !disabled && !readOnly;
+  const draftDigits = segmentDraft.replace(/\D/g, '');
+
+  useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
+    suppressBlurRef.current = true;
+    const focusInput = () => {
+      inputRef.current?.focus();
+    };
+
+    const frame = requestAnimationFrame(focusInput);
+    const timer = setTimeout(() => {
+      focusInput();
+      suppressBlurRef.current = false;
+    }, 50);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(timer);
+    };
+  }, [isActive, focusedSegmentIndex]);
+
+  const onKeyPress = (event: TextInputKeyPressEvent) => {
+    if (!isActive) {
+      return;
+    }
+    const key = event.nativeEvent.key;
+    if (key === 'Backspace') {
+      // When draft still has digits, onChangeText mirrors the shortened value.
+      // Only handle empty-draft backspace here (move to previous / clear).
+      if (draftDigits.length === 0) {
+        handleSegmentBackspace();
+      }
+      return;
+    }
+    if (key === 'ArrowRight') {
+      focusNextEditableSegment();
+      return;
+    }
+    if (key === 'ArrowLeft') {
+      focusPrevEditableSegment();
+    }
+  };
+
+  return (
+    <TextInput
+      testID="date-field-keyboard-input"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      ref={inputRef}
+      value={isActive ? draftDigits : ''}
+      editable={isActive}
+      showSoftInputOnFocus={isActive}
+      pointerEvents="none"
+      caretHidden
+      importantForAutofill="no"
+      autoComplete="off"
+      autoCorrect={false}
+      spellCheck={false}
+      keyboardType={KEYBOARD_TYPE}
+      inputMode="numeric"
+      style={HIDDEN_INPUT_STYLE}
+      onChangeText={(text) => {
+        if (!isActive) {
+          return;
+        }
+        handleSegmentInputChange(text);
+      }}
+      onKeyPress={onKeyPress}
+      onBlur={() => {
+        if (suppressBlurRef.current) {
+          return;
+        }
+        requestAnimationFrame(() => {
+          if (suppressBlurRef.current) {
+            return;
+          }
+          const index = focusedIndexRef.current;
+          if (index == null) {
+            return;
+          }
+          if (Platform.OS !== 'web') {
+            blurSegment(index);
+            return;
+          }
+          const node = inputRef.current as unknown as { isFocused?: () => boolean } | null;
+          if (node?.isFocused?.()) {
+            return;
+          }
+          const active = typeof document !== 'undefined' ? document.activeElement : null;
+          if (active && (active as HTMLElement).tagName === 'INPUT') {
+            const label = (active as HTMLElement).getAttribute('aria-label');
+            if (label === accessibilityLabel) {
+              return;
+            }
+          }
+          blurSegment(index);
+        });
+      }}
+    />
+  );
+}

package/src/date-field/DateFieldInput.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, useContext, useEffect, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import type { DateSegment } from '@cdx-ui/formatters';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { DateRangePickerContext } from '../date-range-picker/context';
+import { DateFieldHiddenInput } from './DateFieldHiddenInput';
+import { DateFieldSegmentIndexProvider } from './segmentIndex';
+import { DateFieldContext } from './context';
+import { useRangeDateFieldBridge } from './useRangeDateFieldBridge';
+import type { IDateFieldInputProps } from './types';
+
+export interface DateFieldInputProps extends IDateFieldInputProps {
+  asChild?: boolean;
+  className?: string;
+}
+
+export const DateFieldInput = forwardRef<ComponentRef<typeof View>, DateFieldInputProps>(
+  ({ asChild, children, className, style, slot = 'start', ...props }, ref) => {
+    const fieldCtx = useContext(DateFieldContext);
+    const rangeCtx = useContext(DateRangePickerContext);
+    const rangeBridge = useRangeDateFieldBridge(slot, rangeCtx);
+    const ctx = fieldCtx ?? rangeBridge;
+    if (!ctx) {
+      throw new Error(
+        'DateField.Input must be used within DateField or DateRangePicker (with slot="start" | "end")',
+      );
+    }
+    const { segments, focusedSegmentIndex, labels } = ctx;
+    const keyboardInputLabel = labels.dateFieldKeyboardInput;
+    const Comp = asChild ? Slot : View;
+
+    useEffect(() => {
+      if (rangeCtx && focusedSegmentIndex != null) {
+        rangeCtx.setFocusedField(slot);
+      }
+    }, [focusedSegmentIndex, rangeCtx, slot]);
+
+    // Web fallback: if the hidden input fails to take focus (some browsers reject
+    // near-invisible inputs), still accept keystrokes at the document level.
+    // Skip when the hidden input is already focused to avoid double-applying digits.
+    useEffect(() => {
+      if (
+        Platform.OS !== 'web' ||
+        ctx.focusedSegmentIndex == null ||
+        ctx.disabled ||
+        ctx.readOnly
+      ) {
+        return;
+      }
+
+      const focusedIndex = ctx.focusedSegmentIndex;
+
+      const onKeyDown = (event: KeyboardEvent) => {
+        const activeLabel =
+          typeof document !== 'undefined'
+            ? document.activeElement?.getAttribute?.('aria-label')
+            : null;
+        const inputOwnsFocus = activeLabel === keyboardInputLabel;
+
+        if (event.key === 'Backspace') {
+          if (inputOwnsFocus) {
+            return;
+          }
+          event.preventDefault();
+          ctx.handleSegmentBackspace();
+          return;
+        }
+        if (event.key === 'ArrowRight') {
+          if (inputOwnsFocus) {
+            return;
+          }
+          event.preventDefault();
+          ctx.focusNextEditableSegment();
+          return;
+        }
+        if (event.key === 'ArrowLeft') {
+          if (inputOwnsFocus) {
+            return;
+          }
+          event.preventDefault();
+          ctx.focusPrevEditableSegment();
+          return;
+        }
+        if (event.key === 'Tab') {
+          ctx.blurSegment(focusedIndex);
+          return;
+        }
+        if (/^\d$/.test(event.key)) {
+          if (inputOwnsFocus) {
+            return;
+          }
+          event.preventDefault();
+          ctx.handleSegmentDigit(event.key);
+        }
+      };
+
+      document.addEventListener('keydown', onKeyDown);
+      return () => document.removeEventListener('keydown', onKeyDown);
+    }, [
+      ctx.blurSegment,
+      ctx.disabled,
+      ctx.focusNextEditableSegment,
+      ctx.focusPrevEditableSegment,
+      ctx.focusedSegmentIndex,
+      ctx.handleSegmentBackspace,
+      ctx.handleSegmentDigit,
+      ctx.readOnly,
+      keyboardInputLabel,
+    ]);
+
+    const input = (
+      <Comp
+        ref={ref}
+        className={className}
+        style={[{ position: 'relative' }, style]}
+        accessibilityRole="none"
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'date-field-input' }))}
+      >
+        {segments.map((segment: DateSegment, index: number) => (
+          <DateFieldSegmentIndexProvider key={`${segment.type}-${String(index)}`} index={index}>
+            {children(segment)}
+          </DateFieldSegmentIndexProvider>
+        ))}
+        <DateFieldHiddenInput accessibilityLabel={keyboardInputLabel} />
+      </Comp>
+    );
+
+    if (!fieldCtx && rangeBridge) {
+      return <DateFieldContext.Provider value={rangeBridge}>{input}</DateFieldContext.Provider>;
+    }
+
+    return input;
+  },
+);
+
+DateFieldInput.displayName = 'DateFieldInput';

package/src/date-field/DateFieldRoot.tsx

@@ -0,0 +1,117 @@
+import { forwardRef, useMemo, type ComponentRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { getDateFieldSegments, resolveDateComponentLabels } from '@cdx-ui/formatters';
+import { useControllableState, useFormControl } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { DateFieldContext, type DateFieldValue } from './context';
+import type { IDateFieldProps } from './types';
+import { useDateFieldSegmentState } from './useDateFieldSegmentState';
+
+export interface DateFieldRootProps extends IDateFieldProps, Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+
+export const DateFieldRoot = forwardRef<ComponentRef<typeof View>, DateFieldRootProps>(
+  (
+    {
+      asChild,
+      children,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      mode = 'date',
+      locale = 'en-US',
+      labels: labelsProp,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired,
+      ...props
+    },
+    ref,
+  ) => {
+    const formControl = useFormControl({
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired,
+    });
+
+    const [value, setValue] = useControllableState<DateFieldValue>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: (next) => {
+        onValueChange?.(next);
+      },
+    });
+
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+
+    const segments = useMemo(
+      () => getDateFieldSegments(value, { mode, locale }),
+      [value, mode, locale],
+    );
+
+    const segmentState = useDateFieldSegmentState({
+      mode,
+      segments,
+      value,
+      setValue,
+      disabled: !!formControl.disabled,
+      readOnly: !!formControl.readOnly,
+    });
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onValueChange: setValue,
+        mode,
+        locale,
+        labels,
+        segments,
+        disabled: !!formControl.disabled,
+        readOnly: !!formControl.readOnly,
+        invalid: !!formControl['aria-invalid'],
+        ...segmentState,
+      }),
+      [
+        value,
+        setValue,
+        mode,
+        locale,
+        labels,
+        segments,
+        formControl.disabled,
+        formControl.readOnly,
+        formControl['aria-invalid'],
+        segmentState,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <DateFieldContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: formControl.disabled,
+              invalid: formControl['aria-invalid'],
+              readonly: formControl.readOnly,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </DateFieldContext.Provider>
+    );
+  },
+);
+
+DateFieldRoot.displayName = 'DateFieldRoot';

package/src/date-field/DateFieldSegment.tsx

@@ -0,0 +1,97 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  Text,
+  type GestureResponderEvent,
+  type ViewProps,
+} from 'react-native';
+import { getDateSegmentAccessibilityLabel } from '@cdx-ui/formatters';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDateFieldContext } from './context';
+import { useDateFieldSegmentIndex } from './segmentIndex';
+import type { IDateFieldSegmentProps } from './types';
+
+export interface DateFieldSegmentProps extends IDateFieldSegmentProps, Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  segmentIndex?: number;
+  className?: string;
+}
+
+export const DateFieldSegment = forwardRef<ComponentRef<typeof Text>, DateFieldSegmentProps>(
+  ({ asChild, segment, segmentIndex: segmentIndexProp, style, ...props }, ref) => {
+    const contextSegmentIndex = useDateFieldSegmentIndex();
+    const segmentIndex = segmentIndexProp ?? contextSegmentIndex;
+    const { disabled, readOnly, focusedSegmentIndex, focusSegment, getSegmentDisplayText, labels } =
+      useDateFieldContext();
+    const isFocused = focusedSegmentIndex === segmentIndex;
+    const displayText = getSegmentDisplayText(segmentIndex);
+
+    const handlePress = useCallback(() => {
+      focusSegment(segmentIndex);
+    }, [focusSegment, segmentIndex]);
+
+    // On web, prevent the Pressable from taking focus so the hidden TextInput
+    // can keep keyboard ownership after the tap.
+    const preventWebFocusSteal = useCallback((event: GestureResponderEvent) => {
+      if (Platform.OS !== 'web') {
+        return;
+      }
+      const maybeDom = event as unknown as { preventDefault?: () => void };
+      maybeDom.preventDefault?.();
+    }, []);
+
+    const dataProps = mergeDataAttributes(
+      props,
+      dataAttributes({
+        slot: 'date-field-segment',
+        focus: isFocused,
+        placeholder: segment.text === displayText && !segment.value,
+      }),
+    );
+
+    if (segment.isEditable && !asChild) {
+      return (
+        <Pressable
+          accessibilityRole="spinbutton"
+          accessibilityLabel={getDateSegmentAccessibilityLabel(segment.type, labels)}
+          accessibilityState={{ disabled, selected: isFocused }}
+          disabled={disabled || readOnly}
+          onPress={handlePress}
+          onPressIn={preventWebFocusSteal}
+          // Keep segments above the invisible keyboard input for hit-testing.
+          style={[{ zIndex: 1 }, style]}
+          {...props}
+          {...dataProps}
+          {...(Platform.OS === 'web'
+            ? ({
+                onMouseDown: (e: { preventDefault: () => void }) => {
+                  e.preventDefault();
+                },
+              } as object)
+            : null)}
+        >
+          <Text>{displayText}</Text>
+        </Pressable>
+      );
+    }
+
+    const Comp = asChild ? Slot : Text;
+
+    return (
+      <Comp
+        ref={ref}
+        style={style}
+        {...props}
+        {...dataProps}
+        accessibilityRole="text"
+        importantForAccessibility="no"
+      >
+        {displayText}
+      </Comp>
+    );
+  },
+);
+
+DateFieldSegment.displayName = 'DateFieldSegment';