@cdx-ui/primitives 0.0.1-beta.140 → 0.0.1-beta.142

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

package/src/date-field/context.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, type Dispatch, type SetStateAction } from 'react';
+import type {
+  DateComponentLabels,
+  DateFieldMode,
+  DateId,
+  DateSegment,
+  MonthId,
+} from '@cdx-ui/formatters';
+
+/** A `DateField` carries a `DateId` in date mode and a `MonthId` in month mode. */
+export type DateFieldValue = DateId | MonthId | undefined;
+
+export interface DateFieldContextValue {
+  value: DateFieldValue;
+  onValueChange?: (value: DateFieldValue) => void;
+  mode: DateFieldMode;
+  locale: string;
+  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;
+  /** Sync draft from the hidden TextInput (append / replace / delete). */
+  handleSegmentInputChange: (raw: string) => void;
+  handleSegmentBackspace: () => void;
+  /** Current draft text for the focused segment (digits while editing). */
+  segmentDraft: string;
+  getSegmentDisplayText: (index: number) => string;
+  onSegmentChange: (segmentType: DateSegment['type'], value: number) => void;
+  /** @deprecated Use focusSegment / blurSegment */
+  setFocusedSegmentIndex?: Dispatch<SetStateAction<number | null>>;
+}
+
+export const DateFieldContext = createContext<DateFieldContextValue | null>(null);
+
+export function useDateFieldContext(): DateFieldContextValue {
+  const ctx = useContext(DateFieldContext);
+  if (!ctx) {
+    throw new Error('DateField compound components must be used within DateFieldRoot');
+  }
+  return ctx;
+}

package/src/date-field/index.ts

@@ -0,0 +1,8 @@
+export { DateFieldRoot } from './DateFieldRoot';
+export type { DateFieldRootProps } from './DateFieldRoot';
+export { DateFieldInput } from './DateFieldInput';
+export type { DateFieldInputProps } from './DateFieldInput';
+export { DateFieldSegment } from './DateFieldSegment';
+export type { DateFieldSegmentProps } from './DateFieldSegment';
+export { useDateFieldContext } from './context';
+export type * from './types';

package/src/date-field/segmentIndex.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext, type ReactNode } from 'react';
+
+const SegmentIndexContext = createContext<number>(0);
+
+export function DateFieldSegmentIndexProvider({
+  index,
+  children,
+}: {
+  index: number;
+  children: ReactNode;
+}) {
+  return <SegmentIndexContext.Provider value={index}>{children}</SegmentIndexContext.Provider>;
+}
+
+export function useDateFieldSegmentIndex(): number {
+  return useContext(SegmentIndexContext);
+}

package/src/date-field/segmentKeyboard.ts

@@ -0,0 +1,207 @@
+import { parseDateSegment, type DateSegment, type DateSegmentType } from '@cdx-ui/formatters';
+
+export interface SegmentKeyboardOptions {
+  /** When true, hour segments are 1–12; otherwise 0–23. */
+  hour12?: boolean;
+}
+
+export const SEGMENT_MAX_LENGTH: Partial<Record<DateSegmentType, number>> = {
+  month: 2,
+  day: 2,
+  year: 4,
+  hour: 2,
+  minute: 2,
+  second: 2,
+  dayPeriod: 1,
+};
+
+export function getSegmentMaxLength(type: DateSegmentType): number {
+  return SEGMENT_MAX_LENGTH[type] ?? 4;
+}
+
+/** True when another digit cannot produce a different valid value (auto-advance). */
+export function isSegmentDraftComplete(
+  type: DateSegmentType,
+  draft: string,
+  options?: SegmentKeyboardOptions,
+): boolean {
+  if (!draft) {
+    return false;
+  }
+  const maxLength = getSegmentMaxLength(type);
+  if (draft.length >= maxLength) {
+    return true;
+  }
+
+  const value = Number(draft);
+  if (Number.isNaN(value)) {
+    return false;
+  }
+
+  // Month 1-12: 2-9 cannot be a leading digit of a two-digit month.
+  if (type === 'month') {
+    return value >= 2 && value <= 9;
+  }
+
+  // Day 1-31: 4-9 cannot be a leading digit of a two-digit day.
+  if (type === 'day') {
+    return value >= 4 && value <= 9;
+  }
+
+  if (type === 'hour') {
+    if (options?.hour12) {
+      return value >= 2 && value <= 9;
+    }
+    // 0-23: 3-9 cannot start a valid two-digit hour.
+    return value >= 3 && value <= 9;
+  }
+
+  // Minute / second 0-59: 6-9 cannot start a valid two-digit value.
+  if (type === 'minute' || type === 'second') {
+    return value >= 6 && value <= 9;
+  }
+
+  return false;
+}
+
+function isValidSegmentDraft(
+  type: DateSegmentType,
+  draft: string,
+  options?: SegmentKeyboardOptions,
+): boolean {
+  if (!draft) {
+    return true;
+  }
+  const value = Number(draft);
+  if (Number.isNaN(value)) {
+    return false;
+  }
+  if (type === 'month') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    return value >= 1 && value <= 12;
+  }
+  if (type === 'day') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    return value >= 1 && value <= 31;
+  }
+  if (type === 'year') {
+    return draft.length <= 4;
+  }
+  if (type === 'hour') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    if (options?.hour12) {
+      return value >= 1 && value <= 12;
+    }
+    return value >= 0 && value <= 23;
+  }
+  if (type === 'minute' || type === 'second') {
+    if (draft.length === 1) {
+      return value >= 0 && value <= 9;
+    }
+    return value >= 0 && value <= 59;
+  }
+  return true;
+}
+
+export function applySegmentDigit(
+  draft: string,
+  _committedText: string,
+  isDraftDirty: boolean,
+  digit: string,
+  type: DateSegmentType,
+  options?: SegmentKeyboardOptions,
+): {
+  draft: string;
+  isDraftDirty: boolean;
+  shouldCommit: boolean;
+  /** When set, commit `draft` then apply this digit to the next segment. */
+  spillDigit?: string;
+} {
+  const maxLength = getSegmentMaxLength(type);
+  const base = isDraftDirty ? draft : '';
+  const candidate = `${base}${digit}`.slice(0, maxLength + 1);
+
+  // e.g. month "1" + "5" → invalid 15: commit 1, spill 5 into day.
+  if (
+    base.length > 0 &&
+    candidate.length <= maxLength &&
+    !isValidSegmentDraft(type, candidate, options) &&
+    isValidSegmentDraft(type, base, options) &&
+    Number(base) >= 1
+  ) {
+    return {
+      draft: base,
+      isDraftDirty: true,
+      shouldCommit: true,
+      spillDigit: digit,
+    };
+  }
+
+  const nextDraft = candidate.slice(0, maxLength);
+  if (!isValidSegmentDraft(type, nextDraft, options)) {
+    // Replace with the new digit alone (e.g. starting fresh).
+    return {
+      draft: digit,
+      isDraftDirty: true,
+      shouldCommit: isSegmentDraftComplete(type, digit, options),
+    };
+  }
+
+  return {
+    draft: nextDraft,
+    isDraftDirty: true,
+    shouldCommit: isSegmentDraftComplete(type, nextDraft, options),
+  };
+}
+
+export function commitSegmentDraft(segment: DateSegment, draft: string): number | null {
+  const parsed = parseDateSegment(segment.type, draft || segment.text);
+  return parsed;
+}
+
+/** Parses day-period input (`A`/`P`/`1`/`2`) into 0 (AM) or 1 (PM). */
+export function commitDayPeriodDraft(draft: string): number | null {
+  const trimmed = draft.trim().toLowerCase();
+  if (!trimmed) {
+    return null;
+  }
+  if (trimmed === 'a' || trimmed === 'am' || trimmed === '1') {
+    return 0;
+  }
+  if (trimmed === 'p' || trimmed === 'pm' || trimmed === '2') {
+    return 1;
+  }
+  return null;
+}
+
+export function findAdjacentEditableIndex(
+  segments: DateSegment[],
+  fromIndex: number,
+  direction: -1 | 1,
+): number | null {
+  for (
+    let i = fromIndex + direction;
+    direction < 0 ? i >= 0 : i < segments.length;
+    i += direction
+  ) {
+    if (segments[i]?.isEditable) {
+      return i;
+    }
+  }
+  return null;
+}
+
+export function toHour24(hour12: number, period: number): number {
+  const normalized = hour12 % 12;
+  return normalized + (period === 1 ? 12 : 0);
+}
+
+export function toHour12(hour24: number): number {
+  return hour24 % 12 || 12;
+}

package/src/date-field/types.ts

@@ -0,0 +1,40 @@
+import type { ViewProps } from 'react-native';
+import type { DateComponentLabels, DateFieldMode, DateId, MonthId } from '@cdx-ui/formatters';
+
+export interface IDateFieldProps {
+  /**
+   * Controlled value: a `DateId` (`YYYY-MM-DD`) in date mode, or a `MonthId`
+   * (`YYYY-MM-01`) in month mode. Build one with `dateId(...)` / `monthId(...)`
+   * from `@cdx-ui/formatters` — a bare string will not type-check.
+   */
+  value?: DateId | MonthId;
+  /** Uncontrolled initial value, in the same format as `value`. */
+  defaultValue?: DateId | MonthId;
+  /** Called with the new value once every segment is filled, or `undefined` when the field is cleared. */
+  onValueChange?: (value: DateId | MonthId | undefined) => void;
+  /** Which segments to render: `date` shows month, day, and year; `month` shows month and year only. */
+  mode?: DateFieldMode;
+  /** BCP-47 locale that controls segment order and separators. Defaults to `en-US`. */
+  locale?: string;
+  /** Overrides the accessible labels announced for each segment. */
+  labels?: Partial<DateComponentLabels>;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+}
+
+export interface IDateFieldInputProps extends Omit<ViewProps, 'children'> {
+  children: (segment: import('@cdx-ui/formatters').DateSegment) => React.ReactNode;
+  /**
+   * Range-composition hint. Only meaningful when a `DateField.Input` is rendered
+   * inside a `DateRangePicker` — it binds the input to the range's start or end
+   * endpoint via the internal range bridge. Ignored for a standalone `DateField`.
+   */
+  slot?: 'start' | 'end';
+}
+
+export interface IDateFieldSegmentProps {
+  segment: import('@cdx-ui/formatters').DateSegment;
+  segmentIndex?: number;
+}