@cdx-ui/primitives 0.0.1-beta.98 → 0.1.0

package/src/date-time-field/DateTimeFieldHiddenInput.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef } from 'react';
+import { Platform, TextInput, type TextInputKeyPressEvent } from 'react-native';
+import { useDateTimeFieldContext } from './context';
+
+/**
+ * Invisible input that owns keyboard focus while a segment is active.
+ * Mirrors `DateFieldHiddenInput`; switches to a default keyboard for day-period (A/P).
+ */
+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 NUMERIC_KEYBOARD = Platform.select<'number-pad' | 'phone-pad'>({
+  ios: 'phone-pad',
+  default: 'number-pad',
+});
+
+export function DateTimeFieldHiddenInput({ accessibilityLabel }: { accessibilityLabel: string }) {
+  const {
+    focusedSegmentIndex,
+    segments,
+    disabled,
+    readOnly,
+    segmentDraft,
+    handleSegmentInputChange,
+    handleSegmentBackspace,
+    handleDayPeriodKey,
+    focusNextEditableSegment,
+    focusPrevEditableSegment,
+    blurSegment,
+  } = useDateTimeFieldContext();
+
+  const inputRef = useRef<TextInput>(null);
+  const suppressBlurRef = useRef(false);
+  const focusedIndexRef = useRef(focusedSegmentIndex);
+  focusedIndexRef.current = focusedSegmentIndex;
+
+  const focusedSegment = focusedSegmentIndex != null ? segments[focusedSegmentIndex] : undefined;
+  const isDayPeriod = focusedSegment?.type === 'dayPeriod';
+  const isActive = focusedSegmentIndex != null && !disabled && !readOnly;
+  const draftValue = isDayPeriod
+    ? segmentDraft.replace(/[^aApP12]/g, '')
+    : 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') {
+      if (draftValue.length === 0) {
+        handleSegmentBackspace();
+      }
+      return;
+    }
+    if (key === 'ArrowRight') {
+      focusNextEditableSegment();
+      return;
+    }
+    if (key === 'ArrowLeft') {
+      focusPrevEditableSegment();
+      return;
+    }
+    if (isDayPeriod && /^[apAP]$/.test(key)) {
+      handleDayPeriodKey(key);
+    }
+  };
+
+  return (
+    <TextInput
+      testID="date-time-field-keyboard-input"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      ref={inputRef}
+      value={isActive ? draftValue : ''}
+      editable={isActive}
+      showSoftInputOnFocus={isActive}
+      pointerEvents="none"
+      caretHidden
+      importantForAutofill="no"
+      autoComplete="off"
+      autoCorrect={false}
+      spellCheck={false}
+      keyboardType={isDayPeriod ? 'default' : NUMERIC_KEYBOARD}
+      inputMode={isDayPeriod ? 'text' : '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-time-field/DateTimeFieldInput.tsx

@@ -0,0 +1,119 @@
+import { forwardRef, useEffect, type ComponentRef } from 'react';
+import { Platform, View } from 'react-native';
+import type { DateSegment } from '@cdx-ui/formatters';
+import { DateFieldSegmentIndexProvider } from '../date-field/segmentIndex';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDateTimeFieldContext } from './context';
+import { DateTimeFieldHiddenInput } from './DateTimeFieldHiddenInput';
+
+export interface DateTimeFieldInputProps {
+  children: (segment: DateSegment) => React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+  style?: import('react-native').StyleProp<import('react-native').ViewStyle>;
+}
+
+export const DateTimeFieldInput = forwardRef<
+  ComponentRef<typeof View>,
+  DateTimeFieldInputProps & Omit<import('react-native').ViewProps, 'children'>
+>(({ asChild, children, className, style, ...props }, ref) => {
+  const ctx = useDateTimeFieldContext();
+  const { segments, labels } = ctx;
+  const keyboardInputLabel = labels.dateFieldKeyboardInput;
+  const Comp = asChild ? Slot : View;
+
+  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 (/^[apAP]$/.test(event.key)) {
+        if (inputOwnsFocus) {
+          return;
+        }
+        event.preventDefault();
+        ctx.handleDayPeriodKey(event.key);
+        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.handleDayPeriodKey,
+    ctx.handleSegmentBackspace,
+    ctx.handleSegmentDigit,
+    ctx.readOnly,
+    keyboardInputLabel,
+  ]);
+
+  return (
+    <Comp
+      ref={ref}
+      className={className}
+      style={[{ position: 'relative' }, style]}
+      accessibilityRole="none"
+      {...props}
+      {...mergeDataAttributes(props, dataAttributes({ slot: 'date-time-field-input' }))}
+    >
+      {segments.map((segment: DateSegment, index: number) => (
+        <DateFieldSegmentIndexProvider key={`${segment.type}-${String(index)}`} index={index}>
+          {children(segment)}
+        </DateFieldSegmentIndexProvider>
+      ))}
+      <DateTimeFieldHiddenInput accessibilityLabel={keyboardInputLabel} />
+    </Comp>
+  );
+});
+
+DateTimeFieldInput.displayName = 'DateTimeFieldInput';

package/src/date-time-field/DateTimeFieldRoot.tsx

@@ -0,0 +1,209 @@
+import { forwardRef, useMemo, type ComponentRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import {
+  formatDateTimeId,
+  getDateTimeFieldSegments,
+  isLocaleHour12,
+  parseDateTimeId,
+  resolveDateComponentLabels,
+  type DateComponentLabels,
+  type DateTimeGranularity,
+  type DateTimeId,
+} from '@cdx-ui/formatters';
+import { useControllableState, useFormControl } from '@cdx-ui/utils';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { DateTimeFieldContext } from './context';
+import { useDateTimeFieldSegmentState } from './useDateTimeFieldSegmentState';
+
+export interface DateTimeFieldRootProps extends Omit<ViewProps, 'children'> {
+  asChild?: boolean;
+  children?: ReactNode;
+  className?: string;
+  value?: DateTimeId;
+  defaultValue?: DateTimeId;
+  /** Called with the new `DateTimeId`, or `undefined` when the field is cleared. */
+  onValueChange?: (value: DateTimeId | undefined) => void;
+  granularity?: DateTimeGranularity;
+  locale?: string;
+  /** Force a 12- or 24-hour clock. Defaults to the locale's convention when omitted. */
+  hour12?: boolean;
+  labels?: Partial<DateComponentLabels>;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+}
+
+export const DateTimeFieldRoot = forwardRef<ComponentRef<typeof View>, DateTimeFieldRootProps>(
+  (
+    {
+      asChild,
+      children,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      granularity = 'minute',
+      locale = 'en-US',
+      hour12: hour12Prop,
+      labels: labelsProp,
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired,
+      ...props
+    },
+    ref,
+  ) => {
+    const hour12 = hour12Prop ?? isLocaleHour12(locale);
+    const formControl = useFormControl({
+      isDisabled,
+      isReadOnly,
+      isInvalid,
+      isRequired,
+    });
+
+    const labels = useMemo(() => resolveDateComponentLabels(labelsProp), [labelsProp]);
+
+    const [value, setValue] = useControllableState<DateTimeId | undefined>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const segments = useMemo(
+      () => getDateTimeFieldSegments(value, { granularity, locale, hour12 }),
+      [value, granularity, locale, hour12],
+    );
+
+    const fieldDisabled = !!formControl.disabled;
+    const fieldReadOnly = !!formControl.readOnly;
+    const fieldInvalid = !!formControl['aria-invalid'];
+
+    const segmentState = useDateTimeFieldSegmentState({
+      granularity,
+      hour12,
+      locale,
+      segments,
+      value,
+      setValue,
+      disabled: fieldDisabled,
+      readOnly: fieldReadOnly,
+    });
+
+    const contextValue = useMemo(
+      () => ({
+        value,
+        onValueChange: setValue,
+        granularity,
+        locale,
+        hour12,
+        labels,
+        segments,
+        disabled: fieldDisabled,
+        readOnly: fieldReadOnly,
+        invalid: fieldInvalid,
+        ...segmentState,
+      }),
+      [
+        value,
+        setValue,
+        granularity,
+        locale,
+        hour12,
+        labels,
+        segments,
+        fieldDisabled,
+        fieldReadOnly,
+        fieldInvalid,
+        segmentState,
+      ],
+    );
+
+    const Comp = asChild ? Slot : View;
+
+    return (
+      <DateTimeFieldContext.Provider value={contextValue}>
+        <Comp
+          ref={ref}
+          {...props}
+          {...mergeDataAttributes(
+            props,
+            dataAttributes({
+              disabled: formControl.disabled,
+              invalid: formControl['aria-invalid'],
+              readonly: formControl.readOnly,
+            }),
+          )}
+        >
+          {children}
+        </Comp>
+      </DateTimeFieldContext.Provider>
+    );
+  },
+);
+
+DateTimeFieldRoot.displayName = 'DateTimeFieldRoot';
+
+/** Local `DateTimeId` includes seconds when the time segment is `HH:mm:ss` (colon at index 16). */
+function dateTimeIdIncludesSeconds(dateTimeId: string): boolean {
+  return dateTimeId.length >= 19 && dateTimeId.charAt(16) === ':';
+}
+
+export function applyDateTimePartChange(
+  current: DateTimeId | undefined,
+  part: 'date' | 'hour' | 'minute' | 'second' | 'period',
+  partValue: string | number,
+): DateTimeId {
+  const parts = current ? parseDateTimeId(current) : null;
+  const hasSeconds = Boolean(current && dateTimeIdIncludesSeconds(current));
+  const includeSeconds = hasSeconds || part === 'second';
+  const base = parts
+    ? {
+        year: parts.year,
+        month: parts.month,
+        day: parts.day,
+        hour: parts.hour,
+        minute: parts.minute,
+        ...(includeSeconds ? { second: parts.second ?? 0 } : {}),
+      }
+    : {
+        year: new Date().getFullYear(),
+        month: new Date().getMonth() + 1,
+        day: new Date().getDate(),
+        hour: 0,
+        minute: 0,
+        ...(includeSeconds ? { second: 0 } : {}),
+      };
+
+  if (part === 'date' && typeof partValue === 'string') {
+    const dateParts = parseDateTimeId(`${partValue}T00:00:00` as DateTimeId);
+    if (dateParts) {
+      return formatDateTimeId({
+        ...base,
+        year: dateParts.year,
+        month: dateParts.month,
+        day: dateParts.day,
+      });
+    }
+  }
+
+  if (part === 'hour' && typeof partValue === 'number') {
+    return formatDateTimeId({ ...base, hour: partValue });
+  }
+
+  if (part === 'minute' && typeof partValue === 'number') {
+    return formatDateTimeId({ ...base, minute: partValue });
+  }
+
+  if (part === 'second' && typeof partValue === 'number') {
+    return formatDateTimeId({ ...base, second: partValue });
+  }
+
+  if (part === 'period' && typeof partValue === 'number') {
+    const hour = (base.hour % 12) + (partValue === 1 ? 12 : 0);
+    return formatDateTimeId({ ...base, hour });
+  }
+
+  return formatDateTimeId(base);
+}

package/src/date-time-field/DateTimeFieldSegment.tsx

@@ -0,0 +1,95 @@
+import { forwardRef, useCallback, type ComponentRef } from 'react';
+import {
+  Platform,
+  Pressable,
+  Text,
+  type GestureResponderEvent,
+  type ViewProps,
+} from 'react-native';
+import { getDateSegmentAccessibilityLabel, type DateSegment } from '@cdx-ui/formatters';
+import { useDateFieldSegmentIndex } from '../date-field/segmentIndex';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDateTimeFieldContext } from './context';
+
+export interface DateTimeFieldSegmentProps extends Omit<ViewProps, 'children'> {
+  segment: DateSegment;
+  asChild?: boolean;
+  segmentIndex?: number;
+  className?: string;
+}
+
+export const DateTimeFieldSegment = forwardRef<
+  ComponentRef<typeof Text>,
+  DateTimeFieldSegmentProps
+>(({ asChild, segment, segmentIndex: segmentIndexProp, style, ...props }, ref) => {
+  const contextSegmentIndex = useDateFieldSegmentIndex();
+  const segmentIndex = segmentIndexProp ?? contextSegmentIndex;
+  const { disabled, readOnly, focusedSegmentIndex, focusSegment, getSegmentDisplayText, labels } =
+    useDateTimeFieldContext();
+  const isFocused = focusedSegmentIndex === segmentIndex;
+  const displayText = getSegmentDisplayText(segmentIndex);
+
+  const handlePress = useCallback(() => {
+    focusSegment(segmentIndex);
+  }, [focusSegment, segmentIndex]);
+
+  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-time-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}
+        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>
+  );
+});
+
+DateTimeFieldSegment.displayName = 'DateTimeFieldSegment';

package/src/date-time-field/context.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext } from 'react';
+import type {
+  DateComponentLabels,
+  DateSegment,
+  DateTimeGranularity,
+  DateTimeId,
+} from '@cdx-ui/formatters';
+
+export interface DateTimeFieldContextValue {
+  value?: DateTimeId;
+  onValueChange?: (value: DateTimeId | undefined) => void;
+  granularity: DateTimeGranularity;
+  locale: string;
+  hour12: boolean;
+  labels: DateComponentLabels;
+  segments: DateSegment[];
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+  focusedSegmentIndex: number | null;
+  focusSegment: (index: number) => void;
+  blurSegment: (index: number) => void;
+  focusNextEditableSegment: () => void;
+  focusPrevEditableSegment: () => void;
+  handleSegmentDigit: (digits: string) => void;
+  handleSegmentInputChange: (raw: string) => void;
+  handleSegmentBackspace: () => void;
+  handleDayPeriodKey: (key: string) => void;
+  segmentDraft: string;
+  getSegmentDisplayText: (index: number) => string;
+}
+
+export const DateTimeFieldContext = createContext<DateTimeFieldContextValue | null>(null);
+
+export function useDateTimeFieldContext(): DateTimeFieldContextValue {
+  const ctx = useContext(DateTimeFieldContext);
+  if (!ctx) {
+    throw new Error('DateTimeField compound components must be used within DateTimeFieldRoot');
+  }
+  return ctx;
+}

package/src/date-time-field/index.ts

@@ -0,0 +1,7 @@
+export { DateTimeFieldRoot, applyDateTimePartChange } from './DateTimeFieldRoot';
+export type { DateTimeFieldRootProps } from './DateTimeFieldRoot';
+export { DateTimeFieldInput } from './DateTimeFieldInput';
+export type { DateTimeFieldInputProps } from './DateTimeFieldInput';
+export { DateTimeFieldSegment } from './DateTimeFieldSegment';
+export type { DateTimeFieldSegmentProps } from './DateTimeFieldSegment';
+export { useDateTimeFieldContext } from './context';