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

package/lib/module/date-time-field/DateTimeFieldSegment.js

@@ -0,0 +1,83 @@
+"use strict";
+
+import { forwardRef, useCallback } from 'react';
+import { Platform, Pressable, Text } from 'react-native';
+import { getDateSegmentAccessibilityLabel } from '@cdx-ui/formatters';
+import { useDateFieldSegmentIndex } from '../date-field/segmentIndex';
+import { Slot } from '../slot';
+import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
+import { useDateTimeFieldContext } from './context';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DateTimeFieldSegment = /*#__PURE__*/forwardRef(({
+  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 => {
+    if (Platform.OS !== 'web') {
+      return;
+    }
+    const maybeDom = event;
+    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 /*#__PURE__*/_jsx(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 => {
+          e.preventDefault();
+        }
+      } : null),
+      children: /*#__PURE__*/_jsx(Text, {
+        children: displayText
+      })
+    });
+  }
+  const Comp = asChild ? Slot : Text;
+  return /*#__PURE__*/_jsx(Comp, {
+    ref: ref,
+    style: style,
+    ...props,
+    ...dataProps,
+    accessibilityRole: "text",
+    importantForAccessibility: "no",
+    children: displayText
+  });
+});
+DateTimeFieldSegment.displayName = 'DateTimeFieldSegment';
+//# sourceMappingURL=DateTimeFieldSegment.js.map

package/lib/module/date-time-field/DateTimeFieldSegment.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","Platform","Pressable","Text","getDateSegmentAccessibilityLabel","useDateFieldSegmentIndex","Slot","dataAttributes","mergeDataAttributes","useDateTimeFieldContext","jsx","_jsx","DateTimeFieldSegment","asChild","segment","segmentIndex","segmentIndexProp","style","props","ref","contextSegmentIndex","disabled","readOnly","focusedSegmentIndex","focusSegment","getSegmentDisplayText","labels","isFocused","displayText","handlePress","preventWebFocusSteal","event","OS","maybeDom","preventDefault","dataProps","slot","focus","placeholder","text","value","isEditable","accessibilityRole","accessibilityLabel","type","accessibilityState","selected","onPress","onPressIn","zIndex","onMouseDown","e","children","Comp","importantForAccessibility","displayName"],"sourceRoot":"../../../src","sources":["date-time-field/DateTimeFieldSegment.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/date-time-field/context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+export const DateTimeFieldContext = /*#__PURE__*/createContext(null);
+export function useDateTimeFieldContext() {
+  const ctx = useContext(DateTimeFieldContext);
+  if (!ctx) {
+    throw new Error('DateTimeField compound components must be used within DateTimeFieldRoot');
+  }
+  return ctx;
+}
+//# sourceMappingURL=context.js.map

package/lib/module/date-time-field/context.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","DateTimeFieldContext","useDateTimeFieldContext","ctx","Error"],"sourceRoot":"../../../src","sources":["date-time-field/context.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAgCjD,OAAO,MAAMC,oBAAoB,gBAAGF,aAAa,CAAmC,IAAI,CAAC;AAEzF,OAAO,SAASG,uBAAuBA,CAAA,EAA8B;EACnE,MAAMC,GAAG,GAAGH,UAAU,CAACC,oBAAoB,CAAC;EAC5C,IAAI,CAACE,GAAG,EAAE;IACR,MAAM,IAAIC,KAAK,CAAC,yEAAyE,CAAC;EAC5F;EACA,OAAOD,GAAG;AACZ","ignoreList":[]}

package/lib/module/date-time-field/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export { DateTimeFieldRoot, applyDateTimePartChange } from './DateTimeFieldRoot';
+export { DateTimeFieldInput } from './DateTimeFieldInput';
+export { DateTimeFieldSegment } from './DateTimeFieldSegment';
+export { useDateTimeFieldContext } from './context';
+//# sourceMappingURL=index.js.map

package/lib/module/date-time-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["DateTimeFieldRoot","applyDateTimePartChange","DateTimeFieldInput","DateTimeFieldSegment","useDateTimeFieldContext"],"sourceRoot":"../../../src","sources":["date-time-field/index.ts"],"mappings":";;AAAA,SAASA,iBAAiB,EAAEC,uBAAuB,QAAQ,qBAAqB;AAEhF,SAASC,kBAAkB,QAAQ,sBAAsB;AAEzD,SAASC,oBAAoB,QAAQ,wBAAwB;AAE7D,SAASC,uBAAuB,QAAQ,WAAW","ignoreList":[]}

package/lib/module/date-time-field/useDateTimeFieldSegmentState.js

@@ -0,0 +1,561 @@
+"use strict";
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { formatDateSegment, formatDateTimeId, formatDateTimeListPeriod, getDateTimeSegmentVisibility, getEmptyDateSegmentText, parseDateTimeId } from '@cdx-ui/formatters';
+import { applySegmentDigit, commitDayPeriodDraft, commitSegmentDraft, findAdjacentEditableIndex, getSegmentMaxLength, isSegmentDraftComplete, toHour12, toHour24 } from '../date-field/segmentKeyboard';
+
+/** In-progress parts. Wire `value` is only written when required parts are complete. */
+
+function partsFromValue(value, hour12) {
+  if (!value) {
+    return {};
+  }
+  const parsed = parseDateTimeId(value);
+  if (!parsed) {
+    return {};
+  }
+  return {
+    year: parsed.year,
+    month: parsed.month,
+    day: parsed.day,
+    hour: parsed.hour,
+    minute: parsed.minute,
+    second: parsed.second,
+    ...(hour12 ? {
+      dayPeriod: parsed.hour >= 12 ? 1 : 0
+    } : {})
+  };
+}
+function requiredPartKeys(granularity, hour12) {
+  const keys = ['year', 'month', 'day'];
+  if (granularity === 'day') {
+    return keys;
+  }
+  const {
+    showMinute,
+    showSecond
+  } = getDateTimeSegmentVisibility(granularity);
+  keys.push('hour');
+  if (showMinute) {
+    keys.push('minute');
+  }
+  if (showSecond) {
+    keys.push('second');
+  }
+  if (hour12) {
+    keys.push('dayPeriod');
+  }
+  return keys;
+}
+function isComplete(parts, granularity, hour12) {
+  return requiredPartKeys(granularity, hour12).every(key => parts[key] != null);
+}
+function partialPartsToWire(parts, granularity) {
+  const {
+    year,
+    month,
+    day,
+    hour,
+    minute,
+    second
+  } = parts;
+  if (year == null || month == null || day == null) {
+    return undefined;
+  }
+  if (granularity === 'day') {
+    return formatDateTimeId({
+      year,
+      month,
+      day,
+      hour: 0,
+      minute: 0
+    });
+  }
+  if (hour == null) {
+    return undefined;
+  }
+  if (granularity === 'hour') {
+    return formatDateTimeId({
+      year,
+      month,
+      day,
+      hour,
+      minute: 0
+    });
+  }
+  if (minute == null) {
+    return undefined;
+  }
+  if (granularity === 'second') {
+    if (second == null) {
+      return undefined;
+    }
+    return formatDateTimeId({
+      year,
+      month,
+      day,
+      hour,
+      minute,
+      second
+    });
+  }
+  return formatDateTimeId({
+    year,
+    month,
+    day,
+    hour,
+    minute
+  });
+}
+function formatHourDisplay(hour24, hour12) {
+  if (hour12) {
+    return String(toHour12(hour24));
+  }
+  return formatDateSegment('hour', hour24);
+}
+function formatDayPeriodDisplay(period, locale) {
+  return formatDateTimeListPeriod(period === 1 ? 13 : 9, {
+    locale
+  });
+}
+export function useDateTimeFieldSegmentState({
+  granularity,
+  hour12,
+  locale,
+  segments,
+  value,
+  setValue,
+  disabled,
+  readOnly
+}) {
+  const keyboardOptions = {
+    hour12
+  };
+  const [focusedSegmentIndex, setFocusedSegmentIndex] = useState(null);
+  const [segmentDraft, setSegmentDraft] = useState('');
+  const [isDraftDirty, setIsDraftDirty] = useState(false);
+  const [partialParts, setPartialParts] = useState(() => partsFromValue(value, hour12));
+  const focusedSegmentIndexRef = useRef(focusedSegmentIndex);
+  const segmentDraftRef = useRef(segmentDraft);
+  const isDraftDirtyRef = useRef(isDraftDirty);
+  const segmentsRef = useRef(segments);
+  const valueRef = useRef(value);
+  const partialPartsRef = useRef(partialParts);
+  focusedSegmentIndexRef.current = focusedSegmentIndex;
+  segmentDraftRef.current = segmentDraft;
+  isDraftDirtyRef.current = isDraftDirty;
+  segmentsRef.current = segments;
+  valueRef.current = value;
+  partialPartsRef.current = partialParts;
+  useEffect(() => {
+    if (!value) {
+      if (focusedSegmentIndexRef.current == null && !isDraftDirtyRef.current) {
+        partialPartsRef.current = {};
+        setPartialParts({});
+      }
+      return;
+    }
+    const next = partsFromValue(value, hour12);
+    partialPartsRef.current = next;
+    setPartialParts(next);
+  }, [value, hour12]);
+  const setDraftState = (draft, dirty, index = focusedSegmentIndexRef.current) => {
+    if (index != null) {
+      setFocusedSegmentIndex(index);
+      focusedSegmentIndexRef.current = index;
+    }
+    setSegmentDraft(draft);
+    setIsDraftDirty(dirty);
+    segmentDraftRef.current = draft;
+    isDraftDirtyRef.current = dirty;
+  };
+  const writePartial = useCallback(next => {
+    partialPartsRef.current = next;
+    setPartialParts(next);
+
+    // Only publish complete values — mid-entry keeps the last wire value for controlled parents
+    // whose `onValueChange` does not accept `undefined`.
+    if (isComplete(next, granularity, hour12)) {
+      const wire = partialPartsToWire(next, granularity);
+      if (wire !== undefined) {
+        setValue(wire);
+        valueRef.current = wire;
+      }
+    }
+  }, [granularity, hour12, setValue]);
+  const clearAll = useCallback(() => {
+    partialPartsRef.current = {};
+    setPartialParts({});
+  }, []);
+  const commitNumericPart = useCallback((segmentType, segmentValue) => {
+    if (disabled || readOnly) {
+      return;
+    }
+    if (segmentType === 'hour') {
+      if (hour12) {
+        const period = partialPartsRef.current.dayPeriod ?? 0;
+        writePartial({
+          ...partialPartsRef.current,
+          hour: toHour24(segmentValue, period),
+          dayPeriod: period
+        });
+        return;
+      }
+      writePartial({
+        ...partialPartsRef.current,
+        hour: segmentValue
+      });
+      return;
+    }
+    if (segmentType === 'year' || segmentType === 'month' || segmentType === 'day' || segmentType === 'minute' || segmentType === 'second') {
+      writePartial({
+        ...partialPartsRef.current,
+        [segmentType]: segmentValue
+      });
+    }
+  }, [disabled, hour12, readOnly, writePartial]);
+  const commitDayPeriod = useCallback(period => {
+    if (disabled || readOnly) {
+      return;
+    }
+    const current = partialPartsRef.current;
+    const hour12Value = current.hour != null ? toHour12(current.hour) : undefined;
+    writePartial({
+      ...current,
+      dayPeriod: period,
+      ...(hour12Value != null ? {
+        hour: toHour24(hour12Value, period)
+      } : {})
+    });
+  }, [disabled, readOnly, writePartial]);
+  const clearSegmentValue = useCallback(segmentType => {
+    if (segmentType === 'dayPeriod') {
+      const {
+        dayPeriod: _cleared,
+        ...next
+      } = partialPartsRef.current;
+      writePartial(next);
+      return;
+    }
+    if (segmentType === 'year' || segmentType === 'month' || segmentType === 'day' || segmentType === 'hour' || segmentType === 'minute' || segmentType === 'second') {
+      const key = segmentType;
+      const {
+        [key]: _cleared,
+        ...next
+      } = partialPartsRef.current;
+      writePartial(next);
+    }
+  }, [writePartial]);
+  const commitFocusedSegment = useCallback(draft => {
+    const index = focusedSegmentIndexRef.current;
+    if (index == null) {
+      return;
+    }
+    const segment = segmentsRef.current[index];
+    if (!segment?.isEditable) {
+      return;
+    }
+    if (draft === '') {
+      clearSegmentValue(segment.type);
+      return;
+    }
+    if (segment.type === 'dayPeriod') {
+      const parsed = commitDayPeriodDraft(draft);
+      if (parsed != null) {
+        commitDayPeriod(parsed);
+      }
+      return;
+    }
+    const parsed = commitSegmentDraft(segment, draft);
+    if (parsed != null) {
+      commitNumericPart(segment.type, parsed);
+    }
+  }, [clearSegmentValue, commitDayPeriod, commitNumericPart]);
+  const initialDraftForSegment = segment => {
+    if (!segment) {
+      return '';
+    }
+    if (segment.type === 'dayPeriod') {
+      if (partialPartsRef.current.dayPeriod != null) {
+        return formatDayPeriodDisplay(partialPartsRef.current.dayPeriod, locale);
+      }
+      if (segment.value == null) {
+        return '';
+      }
+      return segment.text;
+    }
+    if (segment.type === 'hour') {
+      if (partialPartsRef.current.hour != null) {
+        return formatHourDisplay(partialPartsRef.current.hour, hour12);
+      }
+      if (segment.value == null) {
+        return '';
+      }
+      return segment.text;
+    }
+    const partial = partialPartsRef.current[segment.type];
+    if (partial != null) {
+      return formatDateSegment(segment.type, partial);
+    }
+    if (segment.value == null) {
+      return '';
+    }
+    return segment.text;
+  };
+  const focusSegment = useCallback(index => {
+    if (disabled || readOnly) {
+      return;
+    }
+    const segment = segmentsRef.current[index];
+    if (!segment?.isEditable) {
+      return;
+    }
+    setDraftState(initialDraftForSegment(segment), false, index);
+  }, [disabled, hour12, locale, readOnly]);
+  const blurSegment = useCallback(index => {
+    if (focusedSegmentIndexRef.current !== index) {
+      return;
+    }
+    const segment = segmentsRef.current[index];
+    if (segment?.isEditable && isDraftDirtyRef.current) {
+      commitFocusedSegment(segmentDraftRef.current);
+    }
+    setFocusedSegmentIndex(null);
+    setSegmentDraft('');
+    setIsDraftDirty(false);
+    focusedSegmentIndexRef.current = null;
+    segmentDraftRef.current = '';
+    isDraftDirtyRef.current = false;
+  }, [commitFocusedSegment]);
+  const focusNextEditableSegment = useCallback(() => {
+    const current = focusedSegmentIndexRef.current;
+    if (current == null) {
+      return;
+    }
+    const next = findAdjacentEditableIndex(segmentsRef.current, current, 1);
+    if (next == null) {
+      return;
+    }
+    setDraftState(initialDraftForSegment(segmentsRef.current[next]), false, next);
+  }, [hour12, locale]);
+  const focusPrevEditableSegment = useCallback(() => {
+    const current = focusedSegmentIndexRef.current;
+    if (current == null) {
+      return;
+    }
+    const prev = findAdjacentEditableIndex(segmentsRef.current, current, -1);
+    if (prev == null) {
+      return;
+    }
+    setDraftState(initialDraftForSegment(segmentsRef.current[prev]), false, prev);
+  }, [hour12, locale]);
+  const advanceAfterCommit = (fromIndex, spillDigit) => {
+    const next = findAdjacentEditableIndex(segmentsRef.current, fromIndex, 1);
+    if (next == null) {
+      return {
+        index: fromIndex,
+        draft: segmentDraftRef.current,
+        dirty: false,
+        spill: undefined
+      };
+    }
+    return {
+      index: next,
+      draft: initialDraftForSegment(segmentsRef.current[next]),
+      dirty: false,
+      spill: spillDigit
+    };
+  };
+  const handleSegmentDigit = useCallback(input => {
+    if (focusedSegmentIndexRef.current == null || disabled || readOnly) {
+      return;
+    }
+    let index = focusedSegmentIndexRef.current;
+    let draft = segmentDraftRef.current;
+    let dirty = isDraftDirtyRef.current;
+    const currentSegments = segmentsRef.current;
+    const queue = input.split('').filter(char => /^\d$/.test(char));
+    while (queue.length > 0) {
+      const digit = queue.shift() ?? '';
+      const segment = currentSegments[index];
+      if (!segment?.isEditable) {
+        break;
+      }
+      if (segment.type === 'dayPeriod') {
+        const parsed = commitDayPeriodDraft(digit);
+        if (parsed != null) {
+          commitDayPeriod(parsed);
+          const advanced = advanceAfterCommit(index);
+          index = advanced.index;
+          draft = advanced.draft;
+          dirty = advanced.dirty;
+        }
+        continue;
+      }
+      const {
+        draft: nextDraft,
+        isDraftDirty: nextDirty,
+        shouldCommit,
+        spillDigit
+      } = applySegmentDigit(draft, segment.text, dirty, digit, segment.type, keyboardOptions);
+      draft = nextDraft;
+      dirty = nextDirty;
+      if (shouldCommit) {
+        const parsed = commitSegmentDraft(segment, draft);
+        if (parsed != null) {
+          commitNumericPart(segment.type, parsed);
+        }
+        const advanced = advanceAfterCommit(index, spillDigit);
+        index = advanced.index;
+        draft = advanced.draft;
+        dirty = advanced.dirty;
+        if (advanced.spill) {
+          queue.unshift(advanced.spill);
+        }
+      }
+    }
+    setDraftState(draft, dirty, index);
+  }, [commitDayPeriod, commitNumericPart, disabled, hour12, locale, readOnly]);
+  const handleDayPeriodKey = useCallback(key => {
+    if (focusedSegmentIndexRef.current == null || disabled || readOnly) {
+      return;
+    }
+    const index = focusedSegmentIndexRef.current;
+    const segment = segmentsRef.current[index];
+    if (segment?.type !== 'dayPeriod') {
+      return;
+    }
+    const parsed = commitDayPeriodDraft(key);
+    if (parsed == null) {
+      return;
+    }
+    commitDayPeriod(parsed);
+    const next = findAdjacentEditableIndex(segmentsRef.current, index, 1);
+    if (next == null) {
+      setDraftState(formatDayPeriodDisplay(parsed, locale), false, index);
+      return;
+    }
+    setDraftState(initialDraftForSegment(segmentsRef.current[next]), false, next);
+  }, [commitDayPeriod, disabled, hour12, locale, readOnly]);
+  const handleSegmentInputChange = useCallback(raw => {
+    if (focusedSegmentIndexRef.current == null || disabled || readOnly) {
+      return;
+    }
+    const index = focusedSegmentIndexRef.current;
+    const segment = segmentsRef.current[index];
+    if (!segment?.isEditable) {
+      return;
+    }
+    if (segment.type === 'dayPeriod') {
+      const letter = raw.replace(/[^aApP12]/g, '').slice(-1);
+      if (!letter) {
+        setDraftState('', true, index);
+        clearSegmentValue('dayPeriod');
+        return;
+      }
+      handleDayPeriodKey(letter);
+      return;
+    }
+    const maxLength = getSegmentMaxLength(segment.type);
+    const digits = raw.replace(/\D/g, '');
+    const prevDigits = segmentDraftRef.current.replace(/\D/g, '');
+    if (digits === prevDigits) {
+      return;
+    }
+    if (digits.length === 0) {
+      setDraftState('', true, index);
+      clearSegmentValue(segment.type);
+      return;
+    }
+    if (digits.length > prevDigits.length && digits.startsWith(prevDigits)) {
+      handleSegmentDigit(digits.slice(prevDigits.length));
+      return;
+    }
+    if (digits.length > maxLength) {
+      setDraftState('', true, index);
+      handleSegmentDigit(digits);
+      return;
+    }
+    setDraftState(digits, true, index);
+    if (isSegmentDraftComplete(segment.type, digits, keyboardOptions)) {
+      const parsed = commitSegmentDraft(segment, digits);
+      if (parsed != null) {
+        commitNumericPart(segment.type, parsed);
+      }
+      const next = findAdjacentEditableIndex(segmentsRef.current, index, 1);
+      if (next == null) {
+        setDraftState(digits, false, index);
+        return;
+      }
+      setDraftState(initialDraftForSegment(segmentsRef.current[next]), false, next);
+    }
+  }, [clearSegmentValue, commitNumericPart, disabled, handleDayPeriodKey, handleSegmentDigit, hour12, locale, readOnly]);
+  const handleSegmentBackspace = useCallback(() => {
+    if (focusedSegmentIndexRef.current == null || disabled || readOnly) {
+      return;
+    }
+    const index = focusedSegmentIndexRef.current;
+    const segment = segmentsRef.current[index];
+    const draft = segment?.type === 'dayPeriod' ? segmentDraftRef.current : segmentDraftRef.current.replace(/\D/g, '');
+    if (draft.length > 0) {
+      const nextDraft = draft.slice(0, -1);
+      setDraftState(nextDraft, true, index);
+      if (nextDraft.length === 0 && segment) {
+        clearSegmentValue(segment.type);
+      }
+      return;
+    }
+    const prev = findAdjacentEditableIndex(segmentsRef.current, index, -1);
+    if (prev == null) {
+      clearAll();
+      return;
+    }
+    setDraftState(initialDraftForSegment(segmentsRef.current[prev]), false, prev);
+  }, [clearAll, clearSegmentValue, disabled, hour12, locale, readOnly]);
+  const getSegmentDisplayText = useCallback(index => {
+    const segment = segments[index];
+    if (!segment) {
+      return '';
+    }
+    if (focusedSegmentIndex === index) {
+      if (segmentDraft === '') {
+        return getEmptyDateSegmentText(segment.type) || segment.text;
+      }
+      return segmentDraft;
+    }
+    if (segment.type === 'dayPeriod') {
+      if (partialParts.dayPeriod != null) {
+        return formatDayPeriodDisplay(partialParts.dayPeriod, locale);
+      }
+      return getEmptyDateSegmentText('dayPeriod') || segment.text;
+    }
+    if (segment.type === 'hour') {
+      if (partialParts.hour != null) {
+        return formatHourDisplay(partialParts.hour, hour12);
+      }
+      return getEmptyDateSegmentText('hour') || segment.text;
+    }
+    const partial = partialParts[segment.type];
+    if (partial != null) {
+      return formatDateSegment(segment.type, partial);
+    }
+    if (segment.value != null) {
+      return segment.text;
+    }
+    return getEmptyDateSegmentText(segment.type) || segment.text;
+  }, [focusedSegmentIndex, hour12, locale, partialParts, segmentDraft, segments]);
+  return {
+    focusedSegmentIndex,
+    segmentDraft,
+    focusSegment,
+    blurSegment,
+    focusNextEditableSegment,
+    focusPrevEditableSegment,
+    handleSegmentDigit,
+    handleSegmentInputChange,
+    handleSegmentBackspace,
+    handleDayPeriodKey,
+    getSegmentDisplayText
+  };
+}
+//# sourceMappingURL=useDateTimeFieldSegmentState.js.map