@astryxdesign/core 0.4.7 → 0.5.0-canary.009bcb3

package/src/DateTimeInput/DateTimeInput.tsx

@@ -21,10 +21,12 @@ import {
   useId,
   useState,
   useCallback,
+  useEffect,
   useRef,
   useMemo,
   useOptimistic,
   useTransition,
+  type FocusEvent,
   type KeyboardEvent,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -35,6 +37,7 @@ import {
   spacingVars,
   typographyVars,
   typeScaleVars,
+  fontWeightVars,
   borderVars,
 } from '../theme/tokens.stylex';
 import {
@@ -64,6 +67,7 @@ import {useInputStatusIcon} from '../hooks/useInputStatusIcon';
 import {
   type ISOTimeString,
   parseDateInput,
+  parseISOTime,
   parseTimeInput,
   formatDisplayTime12h,
   formatDisplayTime24h,
@@ -72,7 +76,6 @@ import {
   adjustTime,
   isImeKeyEvent,
   mergeProps,
-  mergeRefs,
   isFocusDetached,
 } from '../utils';
 import {
@@ -91,6 +94,7 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {useTranslator, InternationalizationContext} from '../i18n';
 
+import {useMergedRefs} from '../hooks/useMergedRefs';
 export type ISODateTimeString = string & {
   readonly __brand: 'ISODateTimeString';
 };
@@ -102,6 +106,12 @@ export type DateTimeInputSize = 'sm' | 'md' | 'lg';
 /** Supported minute increments for arrow-key stepping of the time field. */
 export type DateTimeInputTimeIncrement = 1 | 5 | 10 | 15 | 30;
 
+/**
+ * Supported minute cadences for the preset-time dropdown. Every value divides
+ * an hour evenly, so each option lands on a round clock time.
+ */
+export type DateTimeInputTimeOptionInterval = 5 | 10 | 15 | 30 | 60;
+
 export type {
   InputStatus as DateTimeInputStatus,
   InputStatusType as DateTimeInputStatusType,
@@ -170,6 +180,57 @@ const styles = stylex.create({
     flex: 1,
     flexBasis: 0,
   },
+  // Preset-time list. Paddings and states mirror BaseTypeahead's dropdown and
+  // Selector's options so every list in the system reads the same.
+  timeListbox: {
+    boxSizing: 'border-box',
+    maxHeight: 300,
+    overflowY: 'auto',
+    padding: spacingVars['--spacing-1'],
+    minWidth: 'anchor-size(width)',
+  },
+  timeOption: {
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    paddingBlock: spacingVars['--spacing-1-5'],
+    paddingInline: spacingVars['--spacing-2'],
+    borderRadius: radiusVars['--radius-element'],
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled,[aria-disabled="true"])': 'default',
+    },
+    textAlign: 'start',
+    fontFamily: typographyVars['--font-family-body'],
+    fontSize: typeScaleVars['--text-body-size'],
+    lineHeight: typeScaleVars['--text-body-leading'],
+    color: colorVars['--color-text-primary'],
+    backgroundColor: 'transparent',
+  },
+  timeOptionHighlighted: {
+    backgroundColor: colorVars['--color-overlay-hover'],
+  },
+  timeOptionSelected: {
+    fontWeight: fontWeightVars['--font-weight-medium'],
+  },
+});
+
+/**
+ * Size-specific padding for the preset-time options, so an `sm` field gets a
+ * compact list. Matches DropdownMenuItem / Selector / BaseTypeahead.
+ */
+const timeOptionSizeStyles = stylex.create({
+  sm: {
+    paddingBlock: spacingVars['--spacing-1'],
+    paddingInline: spacingVars['--spacing-2'],
+  },
+  md: {
+    paddingBlock: spacingVars['--spacing-1-5'],
+  },
+  lg: {
+    paddingBlock: spacingVars['--spacing-2'],
+  },
 });
 
 const sizeStyles = stylex.create({
@@ -307,6 +368,22 @@ export interface DateTimeInputProps extends Omit<
    */
   timeIncrement?: DateTimeInputTimeIncrement;
 
+  /**
+   * Minute cadence for a dropdown of preset times on the time field. Set it to
+   * turn the time field into a combobox listing every valid time at that
+   * cadence (`60` gives the 12 AM - 11 PM list, `15` a quarter-hour list).
+   *
+   * Omitted, the time field stays a plain text input: typed entry and
+   * arrow-key stepping only, with no combobox semantics added to the
+   * accessibility tree. Typed entry keeps working when the dropdown is on —
+   * the list is a shortcut, not a restriction, so a time between two options
+   * can still be typed.
+   *
+   * Independent of `timeIncrement`, which governs arrow-key stepping. Setting
+   * both to the same value is the usual choice for scheduling flows.
+   */
+  timeOptionInterval?: DateTimeInputTimeOptionInterval;
+
   /**
    * Whether to show a clear button when a value is set.
    * @default false
@@ -396,6 +473,8 @@ function combineDateTime(
   return `${date}T${time}` as ISODateTimeString;
 }
 
+const MINUTES_PER_DAY = 24 * 60;
+
 function getDefaultTime(hasSeconds: boolean): ISOTimeString {
   const now = new Date();
   return formatISOTime(
@@ -436,6 +515,7 @@ export function DateTimeInput({
   hasSeconds = false,
   hourFormat = '12h',
   timeIncrement = 1,
+  timeOptionInterval,
   hasClear = false,
   placeholder: placeholderFromProps,
   timePlaceholder: timePlaceholderFromProps,
@@ -613,6 +693,46 @@ export function DateTimeInput({
     return timePlaceholder;
   }, [isTimeFocused, timeDisplayValue, hourFormat, timePlaceholder, t]);
 
+  // The time field's own accessible name. The option list is named from this
+  // rather than from `label`, so a consumer-supplied timeLabel renames both
+  // together instead of leaving the list announcing the old name.
+  const resolvedTimeLabel =
+    timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {label});
+
+  // --- Preset time options (#2727) ---
+  // Opt-in: without timeOptionInterval the time field keeps exactly the
+  // semantics it shipped with — a plain text input, no combobox role, no
+  // second listbox in the accessibility tree.
+  const hasTimeOptions = timeOptionInterval !== undefined;
+
+  const timeOptions = useMemo(() => {
+    if (timeOptionInterval === undefined) {
+      return [];
+    }
+    const options: {time: ISOTimeString; label: string}[] = [];
+    for (
+      let minutes = 0;
+      minutes < MINUTES_PER_DAY;
+      minutes += timeOptionInterval
+    ) {
+      const time = formatISOTime(
+        {
+          hour: Math.floor(minutes / 60),
+          minute: minutes % 60,
+          second: 0,
+        },
+        hasSeconds,
+      );
+      // The same bound the typed path enforces, so the list can never offer a
+      // time that typing the identical string would reject.
+      if (!isTimeInRange(time, timeMin, timeMax)) {
+        continue;
+      }
+      options.push({time, label: formatDisplayTime(time, hasSeconds)});
+    }
+    return options;
+  }, [timeOptionInterval, hasSeconds, timeMin, timeMax, formatDisplayTime]);
+
   // --- Unified change handler ---
   const fireChange = useCallback(
     (newValue: ISODateTimeString | undefined) => {
@@ -789,6 +909,222 @@ export function DateTimeInput({
     [popover, commitDatePendingInput, isEffectivelyDisabled],
   );
 
+  // --- Time-option popover (#2727) ---
+  const timeListboxId = useId();
+  const [highlightedTimeIndex, setHighlightedTimeIndex] = useState(-1);
+
+  // With popover="auto", showing the popover between pointerdown and
+  // pointerup/click lets the browser's light-dismiss treat that same click as
+  // "outside" and close it again. Defer the show past the click, as
+  // BaseTypeahead does for the same reason.
+  const timePointerActiveRef = useRef(false);
+
+  // Whether the highlight is still the one typing derived, or the user has
+  // since moved it themselves. Enter honours typed text only in the former
+  // case — otherwise the field would commit something other than the option
+  // it is showing as active.
+  const timeHighlightFollowsTypingRef = useRef(true);
+
+  const markTimePointerActive = useCallback(() => {
+    timePointerActiveRef.current = true;
+    document.addEventListener(
+      'click',
+      () => {
+        timePointerActiveRef.current = false;
+      },
+      {once: true},
+    );
+  }, []);
+
+  const timePopover = usePopover({
+    hasLightDismiss: true,
+    hasCloseButton: false,
+    hasAutoFocus: false,
+    // The popup's own role="listbox" carries the semantics; the input keeps
+    // DOM focus, so announcing a dialog here would misrepresent it.
+    role: 'none',
+    onHide: () => setHighlightedTimeIndex(-1),
+  });
+
+  // Anchor the list to the time wrapper, not the date input the field's own
+  // trigger ref points at.
+  useEffect(() => {
+    if (!hasTimeOptions) {
+      return;
+    }
+    const el = timeContainerRef.current;
+    if (el) {
+      timePopover.triggerRef(el);
+    }
+    return () => {
+      timePopover.triggerRef(null);
+    };
+  }, [timePopover, hasTimeOptions]);
+
+  const timeOptionId = useCallback(
+    (index: number) => `${timeListboxId}-option-${index}`,
+    [timeListboxId],
+  );
+
+  // A field can go disabled or busy while its list is open — a changeAction
+  // starting elsewhere in the form is enough. Leave it up and the dropdown
+  // hangs over a control that no longer accepts input.
+  // The same applies to a list that empties after it opened, which a narrowing
+  // min/max window does. An open-but-empty list gates the keyboard switch off,
+  // so the arrows quietly fall back to stepping the value instead.
+  useEffect(() => {
+    if (
+      timePopover.isOpen &&
+      (isEffectivelyDisabled || timeOptions.length === 0)
+    ) {
+      timePopover.hide();
+    }
+  }, [isEffectivelyDisabled, timeOptions.length, timePopover]);
+
+  // The option list can shrink under an open popover — min/max tighten when
+  // the date moves onto a boundary day, or the cadence prop changes. A stale
+  // index past the new end shows no highlight at all and makes the arrow keys
+  // look dead until the user walks it back into range.
+  // Clamped as it is read rather than synced through an effect: no extra
+  // render, and the index can never point past the end even for the paint
+  // where the list shrank.
+  const activeTimeIndex =
+    highlightedTimeIndex > timeOptions.length - 1
+      ? timeOptions.length - 1
+      : highlightedTimeIndex;
+
+  // Keep the active option visible. The listbox is a fixed-height scroll
+  // container, so without this a list opens at midnight with the highlight far
+  // below the fold, and keyboard navigation walks off-screen. Mirrors
+  // BaseTypeahead's scrollIntoView({block: 'nearest'}).
+  useEffect(() => {
+    if (
+      !timePopover.isOpen ||
+      activeTimeIndex < 0 ||
+      activeTimeIndex >= timeOptions.length
+    ) {
+      return;
+    }
+    document
+      .getElementById(timeOptionId(activeTimeIndex))
+      ?.scrollIntoView?.({block: 'nearest'});
+  }, [timePopover.isOpen, activeTimeIndex, timeOptionId, timeOptions.length]);
+
+  /**
+   * The selected time in the same shape the options carry. splitDateTime slices
+   * whatever follows the `T`, so a caller passing `14:00:00` with hasSeconds
+   * off leaves `"14:00:00"` against options of `"14:00"` — comparing raw would
+   * mark nothing selected, silently.
+   */
+  const selectedOptionTime = useMemo(() => {
+    if (!valueParts.time) {
+      return undefined;
+    }
+    const parsed = parseISOTime(valueParts.time);
+    return parsed ? formatISOTime(parsed, hasSeconds) : undefined;
+  }, [valueParts.time, hasSeconds]);
+
+  /**
+   * Index of the option at or immediately before `time`, so opening on a value
+   * that is not itself an option (13:07 in a 15-minute list) still lands the
+   * highlight somewhere sensible instead of nowhere.
+   */
+  const closestOptionIndex = useCallback(
+    (time: ISOTimeString | undefined) => {
+      if (timeOptions.length === 0) {
+        return -1;
+      }
+      // No time yet — the state a field lands in once a date is picked. The
+      // list still opens on the first option, per the APG listbox pattern;
+      // leaving it inactive made ArrowUp and Enter do nothing at all.
+      if (!time) {
+        return 0;
+      }
+      let candidate = -1;
+      for (let i = 0; i < timeOptions.length; i++) {
+        if (timeOptions[i].time <= time) {
+          candidate = i;
+        } else {
+          break;
+        }
+      }
+      // A value below every option (min pushes the list past it) still gets the
+      // first option rather than an empty highlight.
+      return candidate === -1 ? 0 : candidate;
+    },
+    [timeOptions],
+  );
+
+  const showTimeOptions = useCallback(() => {
+    if (
+      !hasTimeOptions ||
+      isEffectivelyDisabled ||
+      timePopover.isOpen ||
+      // A min/max window narrower than the cadence survives no option at all.
+      // Opening on that would show an empty panel with nothing to pick.
+      timeOptions.length === 0
+    ) {
+      return;
+    }
+    setHighlightedTimeIndex(closestOptionIndex(selectedOptionTime));
+    // useInputContainer routes wrapper clicks through input.click() once the
+    // input advertises a popup, and a programmatic click does not focus. The
+    // input must hold DOM focus or aria-activedescendant announces nothing.
+    timeInputRef.current?.focus();
+    if (timePointerActiveRef.current) {
+      document.addEventListener(
+        'click',
+        () =>
+          requestAnimationFrame(() => timePopover.show({skipAutoFocus: true})),
+        {once: true},
+      );
+    } else {
+      timePopover.show({skipAutoFocus: true});
+    }
+  }, [
+    hasTimeOptions,
+    isEffectivelyDisabled,
+    timePopover,
+    timeOptions.length,
+    closestOptionIndex,
+    selectedOptionTime,
+  ]);
+
+  /**
+   * The single commit path for a time chosen from the list. Deliberately the
+   * same shape as the typed path: same range check, same date requirement, so
+   * picking 9:00 AM and typing "9:00 AM" are indistinguishable downstream.
+   */
+  const commitTimeOption = useCallback(
+    (time: ISOTimeString) => {
+      if (isEffectivelyDisabled || !isTimeInRange(time, timeMin, timeMax)) {
+        return;
+      }
+      setTimePendingInput(null);
+      // Compared against the normalised time, the same one the selected marker
+      // uses. Comparing the raw value instead made clicking the option that
+      // renders as selected emit a change, whenever the value carried seconds
+      // the field does not display.
+      if (time !== selectedOptionTime && valueParts.date) {
+        const combined = combineDateTime(valueParts.date, time);
+        if (combined) {
+          fireChange(combined);
+        }
+      }
+      timePopover.hide();
+      timeInputRef.current?.focus();
+    },
+    [
+      isEffectivelyDisabled,
+      timeMin,
+      timeMax,
+      selectedOptionTime,
+      valueParts.date,
+      fireChange,
+      timePopover,
+    ],
+  );
+
   // --- Time handlers ---
   const handleTimeInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -801,6 +1137,15 @@ export function DateTimeInput({
       setTimePendingInput(text);
 
       const parsed = parseTimeInput(text, hasSeconds);
+
+      // Typing narrows nothing — free-form entry is the contract, and a time
+      // between two options must stay reachable. The list instead follows the
+      // typed value so Enter lands somewhere the user expects.
+      if (timePopover.isOpen && parsed) {
+        timeHighlightFollowsTypingRef.current = true;
+        setHighlightedTimeIndex(closestOptionIndex(parsed));
+      }
+
       if (
         parsed &&
         isTimeInRange(parsed, timeMin, timeMax) &&
@@ -822,6 +1167,8 @@ export function DateTimeInput({
       valueParts.date,
       fireChange,
       isEffectivelyDisabled,
+      timePopover.isOpen,
+      closestOptionIndex,
     ],
   );
 
@@ -835,29 +1182,59 @@ export function DateTimeInput({
     setIsTimeFocused(true);
   }, [isEffectivelyDisabled]);
 
-  const handleTimeBlur = useCallback(() => {
-    setIsTimeFocused(false);
-    if (timePendingInput === null) {
-      return;
-    }
+  const handleTimeBlur = useCallback(
+    (e: FocusEvent<HTMLInputElement>) => {
+      setIsTimeFocused(false);
+
+      // Native light dismiss only fires on outside clicks and Escape, so a focus
+      // move that is neither — Tab handled elsewhere, or a programmatic focus —
+      // would strand the listbox open in the top layer. Focus landing inside the
+      // field or the popup itself is not a leave. Mirrors BaseTypeahead.
+      if (timePopover.isOpen) {
+        const next = e.relatedTarget as Node | null;
+        const popoverEl = next ? document.getElementById(timePopover.id) : null;
+        if (
+          !next ||
+          !(
+            timeContainerRef.current?.contains(next) ||
+            popoverEl?.contains(next)
+          )
+        ) {
+          timePopover.hide();
+        }
+      }
 
-    if (!timePendingInput.trim()) {
-      // Empty time: revert display to previous value (don't emit partial datetime)
-      setTimePendingInput(null);
-      return;
-    }
+      if (timePendingInput === null) {
+        return;
+      }
 
-    const parsed = parseTimeInput(timePendingInput, hasSeconds);
-    if (parsed && isTimeInRange(parsed, timeMin, timeMax)) {
-      if (parsed !== valueParts.time && valueParts.date) {
-        const combined = combineDateTime(valueParts.date, parsed);
-        if (combined) {
-          fireChange(combined);
+      if (!timePendingInput.trim()) {
+        // Empty time: revert display to previous value (don't emit partial datetime)
+        setTimePendingInput(null);
+        return;
+      }
+
+      const parsed = parseTimeInput(timePendingInput, hasSeconds);
+      if (parsed && isTimeInRange(parsed, timeMin, timeMax)) {
+        if (parsed !== valueParts.time && valueParts.date) {
+          const combined = combineDateTime(valueParts.date, parsed);
+          if (combined) {
+            fireChange(combined);
+          }
         }
       }
-    }
-    setTimePendingInput(null);
-  }, [timePendingInput, hasSeconds, timeMin, timeMax, valueParts, fireChange]);
+      setTimePendingInput(null);
+    },
+    [
+      timePendingInput,
+      hasSeconds,
+      timeMin,
+      timeMax,
+      valueParts,
+      fireChange,
+      timePopover,
+    ],
+  );
 
   const handleTimeKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement>) => {
@@ -868,6 +1245,84 @@ export function DateTimeInput({
       if (isImeKeyEvent(e.nativeEvent)) {
         return;
       }
+
+      // The dropdown claims the arrow keys only while it is open. Closed, they
+      // keep stepping the value by timeIncrement exactly as they always have —
+      // that behaviour is documented and tested, so the list borrows Alt+Arrow
+      // Down (the APG "open without moving" binding) to open instead.
+      if (hasTimeOptions && !isEffectivelyDisabled) {
+        if (e.key === 'Escape' && timePopover.isOpen) {
+          e.preventDefault();
+          timePopover.hide();
+          return;
+        }
+
+        if (e.key === 'ArrowDown' && e.altKey) {
+          e.preventDefault();
+          // A keyboard open is never mid-click, so clear the deferral flag. A
+          // press that ended without a click would otherwise leave it set and
+          // hold every later open hostage to the next click anywhere.
+          timePointerActiveRef.current = false;
+          showTimeOptions();
+          return;
+        }
+
+        if (timePopover.isOpen && timeOptions.length > 0) {
+          switch (e.key) {
+            case 'ArrowDown':
+              e.preventDefault();
+              timeHighlightFollowsTypingRef.current = false;
+              setHighlightedTimeIndex(
+                activeTimeIndex < timeOptions.length - 1
+                  ? activeTimeIndex + 1
+                  : activeTimeIndex,
+              );
+              return;
+            case 'ArrowUp':
+              e.preventDefault();
+              timeHighlightFollowsTypingRef.current = false;
+              setHighlightedTimeIndex(
+                activeTimeIndex > 0 ? activeTimeIndex - 1 : activeTimeIndex,
+              );
+              return;
+            case 'Home':
+              e.preventDefault();
+              timeHighlightFollowsTypingRef.current = false;
+              setHighlightedTimeIndex(0);
+              return;
+            case 'End':
+              e.preventDefault();
+              timeHighlightFollowsTypingRef.current = false;
+              setHighlightedTimeIndex(timeOptions.length - 1);
+              return;
+            case 'Enter': {
+              e.preventDefault();
+              // Typed text wins over the highlight. The highlight only tracks
+              // the option at or before what was typed, so committing it here
+              // would round 1:07 PM down to 1:00 PM and discard the entry.
+              const typed =
+                timeHighlightFollowsTypingRef.current &&
+                timePendingInput !== null
+                  ? parseTimeInput(timePendingInput, hasSeconds)
+                  : null;
+              const option = timeOptions[activeTimeIndex];
+              if (typed) {
+                commitTimeOption(typed);
+              } else if (option) {
+                commitTimeOption(option.time);
+              }
+              return;
+            }
+            case 'Tab':
+              // Let focus leave; blur commits any typed text as usual.
+              timePopover.hide();
+              return;
+            default:
+              break;
+          }
+        }
+      }
+
       if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
         e.preventDefault();
 
@@ -907,6 +1362,14 @@ export function DateTimeInput({
       fireChange,
       announce,
       formatDisplayTime,
+      hasTimeOptions,
+      isEffectivelyDisabled,
+      timePopover,
+      timeOptions,
+      activeTimeIndex,
+      timePendingInput,
+      showTimeOptions,
+      commitTimeOption,
     ],
   );
 
@@ -1009,7 +1472,7 @@ export function DateTimeInput({
             />
           </button>
           <input
-            ref={mergeRefs(ref, dateInputRef)}
+            ref={useMergedRefs(ref, dateInputRef)}
             id={dateInputId}
             type="text"
             role="combobox"
@@ -1067,6 +1530,10 @@ export function DateTimeInput({
           ref={timeContainerRef}
           onClick={handleTimeWrapperClick}
           onMouseUp={handleTimeWrapperMouseUp}
+          // On the wrapper, not just the input: clicking the clock icon or the
+          // padding is routed to the input as a synthetic click, which would
+          // otherwise open the list mid-gesture and let light dismiss eat it.
+          onPointerDown={hasTimeOptions ? markTimePointerActive : undefined}
           {...mergeProps(
             themeProps('date-time-input-time-segment', {
               size,
@@ -1105,16 +1572,32 @@ export function DateTimeInput({
             onFocus={handleTimeFocus}
             onBlur={handleTimeBlur}
             onKeyDown={handleTimeKeyDown}
+            onClick={hasTimeOptions ? showTimeOptions : undefined}
+            onPointerDown={hasTimeOptions ? markTimePointerActive : undefined}
             placeholder={resolvedTimePlaceholder}
+            // Combobox semantics appear only with the dropdown opted in, so a
+            // field without it keeps a single combobox on the date half.
+            role={hasTimeOptions ? 'combobox' : undefined}
+            aria-expanded={hasTimeOptions ? timePopover.isOpen : undefined}
+            aria-controls={
+              hasTimeOptions && timePopover.isOpen ? timeListboxId : undefined
+            }
+            aria-autocomplete={hasTimeOptions ? 'list' : undefined}
+            aria-activedescendant={
+              hasTimeOptions &&
+              timePopover.isOpen &&
+              activeTimeIndex >= 0 &&
+              activeTimeIndex < timeOptions.length
+                ? timeOptionId(activeTimeIndex)
+                : undefined
+            }
             // With a disabledMessage the input keeps focusability via
             // aria-disabled so the reason is focus-discoverable; typing is
             // blocked with readOnly and the mutation guards.
             disabled={isEffectivelyDisabled && !showsDisabledMessage}
             aria-disabled={showsDisabledMessage ? 'true' : undefined}
             readOnly={showsDisabledMessage || undefined}
-            aria-label={
-              timeLabel ?? t('@astryx.dateTimeInput.timeSuffix', {label})
-            }
+            aria-label={resolvedTimeLabel}
             aria-describedby={ariaDescribedBy}
             aria-required={isEffectivelyRequired ? 'true' : undefined}
             aria-invalid={
@@ -1152,6 +1635,55 @@ export function DateTimeInput({
         {placement: 'below', alignment: 'start'},
       )}
 
+      {hasTimeOptions &&
+        timePopover.render(
+          // The layer renders its children open or closed, so mount the list
+          // only while it is open — a 5-minute cadence is 288 nodes that would
+          // otherwise sit in the DOM of every opted-in field for its lifetime.
+          !timePopover.isOpen ? null : (
+            <div
+              id={timeListboxId}
+              role="listbox"
+              aria-label={t('@astryx.dateTimeInput.timeOptionsLabel', {
+                label: resolvedTimeLabel,
+              })}
+              {...mergeProps(
+                themeProps('date-time-input-time-listbox'),
+                stylex.props(styles.timeListbox),
+              )}>
+              {timeOptions.map((option, index) => {
+                const isSelected = option.time === selectedOptionTime;
+                return (
+                  <div
+                    key={option.time}
+                    id={timeOptionId(index)}
+                    role="option"
+                    aria-selected={isSelected}
+                    tabIndex={-1}
+                    // Pointer-down commit: the input must not lose focus to the
+                    // option, or blur would fire its own commit first.
+                    onPointerDown={e => e.preventDefault()}
+                    onClick={() => commitTimeOption(option.time)}
+                    onMouseEnter={() => setHighlightedTimeIndex(index)}
+                    {...mergeProps(
+                      themeProps('date-time-input-time-option'),
+                      stylex.props(
+                        styles.timeOption,
+                        timeOptionSizeStyles[size],
+                        index === activeTimeIndex &&
+                          styles.timeOptionHighlighted,
+                        isSelected && styles.timeOptionSelected,
+                      ),
+                    )}>
+                    {option.label}
+                  </div>
+                );
+              })}
+            </div>
+          ),
+          {placement: 'below', alignment: 'start'},
+        )}
+
       {showsDisabledMessage &&
         disabledMessageTooltip.renderTooltip(disabledMessage)}
     </Field>