@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/DateTimeInput/DateTimeInput.tsx

@@ -71,9 +71,6 @@ import {
   type ISOTimeString,
   parseDateInput,
   parseISOTime,
-  parseTimeInput,
-  formatDisplayTime12h,
-  formatDisplayTime24h,
   formatISOTime,
   isTimeInRange,
   adjustTime,
@@ -102,6 +99,11 @@ import {useSize} from '../SizeContext/SizeContext';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {useLocale, useTranslator} from '../i18n';
+import {
+  formatLocaleTime,
+  parseLocaleTime,
+  resolveHourFormat,
+} from '../utils/timeFormat';
 
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useHighlightedOptionScroll} from '../hooks/useHighlightedOptionScroll';
@@ -412,8 +414,11 @@ export interface DateTimeInputProps extends Omit<
   hasSeconds?: boolean;
 
   /**
-   * Hour display format.
-   * @default '12h'
+   * Hour display format: '12h' with the locale's day period, or '24h'.
+   * When unset, follows the `InternationalizationProvider` locale's hour
+   * cycle (`en-US` 12-hour, `en-GB` 24-hour); a per-user preference rides on
+   * the locale tag (`en-US-u-hc-h23`).
+   * @default the locale's hour cycle
    */
   hourFormat?: DateTimeInputHourFormat;
 
@@ -836,8 +841,11 @@ function PointerDateTimeField({
   }
   const nativeTimeValue = nativeTimeDraft ?? valueParts.time;
 
-  const formatDisplayTime =
-    hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h;
+  const formatDisplayTime = useCallback(
+    (time: ISOTimeString, includeSeconds: boolean) =>
+      formatLocaleTime(time, locale, hourFormat, includeSeconds),
+    [locale, hourFormat],
+  );
 
   const timeDisplayValue = useMemo(() => {
     if (timePendingInput !== null) {
@@ -852,12 +860,12 @@ function PointerDateTimeField({
     if (timePendingInput === null || !timePendingInput.trim()) {
       return true;
     }
-    const parsed = parseTimeInput(timePendingInput, hasSeconds);
+    const parsed = parseLocaleTime(timePendingInput, locale, hasSeconds);
     if (!parsed) {
       return false;
     }
     return isTimeInRange(parsed, timeMin, timeMax);
-  }, [timePendingInput, hasSeconds, timeMin, timeMax]);
+  }, [timePendingInput, locale, hasSeconds, timeMin, timeMax]);
 
   const resolvedTimePlaceholder = useMemo(() => {
     if (isTimeFocused && !timeDisplayValue) {
@@ -1362,7 +1370,7 @@ function PointerDateTimeField({
       const text = e.target.value;
       setTimePendingInput(text);
 
-      const parsed = parseTimeInput(text, hasSeconds);
+      const parsed = parseLocaleTime(text, locale, hasSeconds);
 
       // Typing narrows nothing — free-form entry is the contract, and a time
       // between two options must stay reachable. The list instead follows the
@@ -1386,6 +1394,7 @@ function PointerDateTimeField({
       }
     },
     [
+      locale,
       hasSeconds,
       timeMin,
       timeMax,
@@ -1440,7 +1449,7 @@ function PointerDateTimeField({
         return;
       }
 
-      const parsed = parseTimeInput(timePendingInput, hasSeconds);
+      const parsed = parseLocaleTime(timePendingInput, locale, hasSeconds);
       if (parsed && isTimeInRange(parsed, timeMin, timeMax)) {
         if (parsed !== valueParts.time && valueParts.date) {
           const combined = combineDateTime(valueParts.date, parsed);
@@ -1453,6 +1462,7 @@ function PointerDateTimeField({
     },
     [
       timePendingInput,
+      locale,
       hasSeconds,
       timeMin,
       timeMax,
@@ -1530,7 +1540,7 @@ function PointerDateTimeField({
               const typed =
                 timeHighlightFollowsTypingRef.current &&
                 timePendingInput !== null
-                  ? parseTimeInput(timePendingInput, hasSeconds)
+                  ? parseLocaleTime(timePendingInput, locale, hasSeconds)
                   : null;
               const option = timeOptions[activeTimeIndex];
               if (typed) {
@@ -1582,6 +1592,7 @@ function PointerDateTimeField({
     },
     [
       valueParts,
+      locale,
       hasSeconds,
       timeIncrement,
       timeMin,
@@ -1937,17 +1948,21 @@ function PointerDateTimeField({
 
       {!usesNativePicker &&
         popover.render(
-          <Calendar
-            handleRef={calendarRef}
-            mode="single"
-            value={valueParts.date ?? null}
-            onChange={(d: ISODateString) => handleDateChange(d, 'calendar')}
-            min={calendarMin}
-            max={calendarMax}
-            dateConstraints={dateConstraints}
-            numberOfMonths={numberOfMonths}
-            weekStartsOn={weekStartsOn}
-          />,
+          // Mounted only while open, like the time list below; the calendar
+          // opens on the current value.
+          !popover.isOpen ? null : (
+            <Calendar
+              handleRef={calendarRef}
+              mode="single"
+              value={valueParts.date ?? null}
+              onChange={(d: ISODateString) => handleDateChange(d, 'calendar')}
+              min={calendarMin}
+              max={calendarMax}
+              dateConstraints={dateConstraints}
+              numberOfMonths={numberOfMonths}
+              weekStartsOn={weekStartsOn}
+            />
+          ),
           {placement: 'below', alignment: 'start'},
         )}
 
@@ -2030,11 +2045,18 @@ export function DateTimeInput(props: DateTimeInputProps) {
     props.presentation,
     props.nativePicker,
   );
+  const locale = useLocale();
   const {
     presentation: _presentation,
     nativePicker: _nativePicker,
-    ...rest
+    ...surfaceProps
   } = props;
+  // Every surface gets the resolved hour format, so typed text, the native
+  // field's resting text, preset times, and the sheet wheels agree.
+  const rest = {
+    ...surfaceProps,
+    hourFormat: resolveHourFormat(locale, props.hourFormat),
+  };
   if (effective === 'native') {
     return (
       <PointerDateTimeField

package/src/DateTimeInput/NativeTimeSegment.tsx

@@ -34,13 +34,12 @@ import type {InputStatusType} from '../Field';
 import {useMediaQuery} from '../hooks/useMediaQuery';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {Icon} from '../Icon';
-import {useTranslator} from '../i18n';
+import {useLocale, useTranslator} from '../i18n';
+import {formatLocaleTime} from '../utils/timeFormat';
 import type {ThemeProps} from '../utils/themeProps';
 import {VisuallyHidden} from '../VisuallyHidden';
 import {
   focusOutlineStyles,
-  formatDisplayTime12h,
-  formatDisplayTime24h,
   formatISOTime,
   isTimeInRange,
   parseISOTime,
@@ -126,6 +125,7 @@ export function NativeTimeSegment({
     ...inputProps
   } = controlProps ?? {};
   const t = useTranslator();
+  const locale = useLocale();
   const isTouchPointer = useMediaQuery('(pointer: coarse)');
   const internalInputRef = useRef<HTMLInputElement | null>(null);
   const mergedInputRef = useMergedRefs(inputRef, internalInputRef);
@@ -151,10 +151,8 @@ export function NativeTimeSegment({
 
   const nativeValue = normalizeNativeTime(value) ?? '';
   const isInputValid = rejectedValue === null;
-  const formatDisplayTime =
-    hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h;
   const overlayText = nativeValue
-    ? formatDisplayTime(nativeValue, false)
+    ? formatLocaleTime(nativeValue, locale, hourFormat, false)
     : placeholder;
   const showsOverlay = !!overlayText && !(isFocused && isSegmentEditable);
 

package/src/DateTimeInput/TouchDateTimeField.tsx

@@ -69,9 +69,8 @@ import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {rtlStyles} from '../utils/rtlStyles';
 import {themeProps} from '../utils/themeProps';
 import {normalizeDayOfWeek} from '../utils/dateTypes';
+import {formatLocaleTime} from '../utils/timeFormat';
 import {
-  formatDisplayTime12h,
-  formatDisplayTime24h,
   formatISOTime,
   isImeKeyEvent,
   isRenderable,
@@ -689,12 +688,9 @@ export function TouchDateTimeField({
   const timeDisplayValue = useMemo(() => {
     const displayTime = normalizedValueTime ?? draftTime;
     return displayTime
-      ? (hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h)(
-          displayTime,
-          hasSeconds,
-        )
+      ? formatLocaleTime(displayTime, locale, hourFormat, hasSeconds)
       : '';
-  }, [draftTime, normalizedValueTime, hourFormat, hasSeconds]);
+  }, [draftTime, normalizedValueTime, locale, hourFormat, hasSeconds]);
 
   const timeBoundsForDate = useCallback(
     (date: ISODateString | undefined) => ({

package/src/Dialog/Dialog.test.tsx

@@ -13,7 +13,14 @@ import {useState, type SyntheticEvent} from 'react';
 import {readFileSync} from 'node:fs';
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import type {MockInstance} from 'vitest';
-import {render, screen, fireEvent} from '@testing-library/react';
+import {
+  render,
+  screen,
+  fireEvent,
+  within,
+  cleanup,
+} from '@testing-library/react';
+import {createPortal} from 'react-dom';
 import {
   Dialog,
   dialogFullscreenSafeAreaPaddingContract,
@@ -21,7 +28,10 @@ import {
 } from './Dialog';
 import {DialogHeader} from './DialogHeader';
 import {defineTheme, generateThemeCSS} from '../theme';
-import {__resetInteractionModalityForTest} from '../utils/interactionModality';
+import {
+  __resetInteractionModalityForTest,
+  getInteractionModality,
+} from '../utils/interactionModality';
 
 function generateThemeTestCSS(
   theme: Parameters<typeof generateThemeCSS>[0],
@@ -555,6 +565,210 @@ describe('Dialog', () => {
       }).not.toThrow();
       expect(dialog).not.toHaveAttribute('open');
     });
+
+    describe('in a second document', () => {
+      // An app can render a Dialog into a same-origin iframe or a Document
+      // Picture-in-Picture window through a portal. The control that opens it
+      // is focused in that document; the page's document reports only the
+      // iframe element.
+      let frame: HTMLIFrameElement;
+      let secondDocument: Document;
+
+      beforeEach(() => {
+        frame = document.createElement('iframe');
+        document.body.appendChild(frame);
+        secondDocument = frame.contentDocument!;
+        // The showModal/close stand-ins above, on the second window's own
+        // prototype.
+        const {prototype} = secondDocument.defaultView!.HTMLDialogElement;
+        prototype.showModal = HTMLDialogElement.prototype.showModal;
+        prototype.close = HTMLDialogElement.prototype.close;
+      });
+
+      afterEach(() => {
+        // Unmount before the frame goes, or React removes nodes from a
+        // document that no longer exists.
+        cleanup();
+        frame.remove();
+      });
+
+      function SecondDocumentDialog({isOpen}: {isOpen: boolean}) {
+        return createPortal(
+          <>
+            <button type="button">Open dialog</button>
+            <Dialog isOpen={isOpen} onOpenChange={() => {}} aria-label="Review">
+              <button type="button">Inside</button>
+            </Dialog>
+          </>,
+          secondDocument.body,
+        );
+      }
+
+      function PageOpensSecondDocumentDialog({isOpen}: {isOpen: boolean}) {
+        return (
+          <>
+            <button type="button">Open from the page</button>
+            {createPortal(
+              <Dialog
+                isOpen={isOpen}
+                onOpenChange={() => {}}
+                aria-label="Review">
+                <button type="button">Inside</button>
+              </Dialog>,
+              secondDocument.body,
+            )}
+          </>
+        );
+      }
+
+      function SecondDocumentFieldDialog({isOpen}: {isOpen: boolean}) {
+        return createPortal(
+          <>
+            <input aria-label="Search" />
+            <Dialog isOpen={isOpen} onOpenChange={() => {}} aria-label="Review">
+              <button type="button">Inside</button>
+            </Dialog>
+          </>,
+          secondDocument.body,
+        );
+      }
+
+      function SecondDocumentDialogs({count}: {count: number}) {
+        return createPortal(
+          <>
+            {count > 0 && (
+              <Dialog isOpen={false} onOpenChange={() => {}} aria-label="First">
+                First
+              </Dialog>
+            )}
+            {count > 1 && (
+              <Dialog
+                isOpen={false}
+                onOpenChange={() => {}}
+                aria-label="Second">
+                Second
+              </Dialog>
+            )}
+          </>,
+          secondDocument.body,
+        );
+      }
+
+      it('returns focus to the control that opened it, in its own document', () => {
+        const {rerender} = render(<SecondDocumentDialog isOpen={false} />);
+        const view = within(secondDocument.body);
+        const opener = view.getByRole('button', {name: 'Open dialog'});
+        opener.focus();
+        expect(document.activeElement).toBe(frame);
+
+        rerender(<SecondDocumentDialog isOpen={true} />);
+        view.getByRole('button', {name: 'Inside', hidden: true}).focus();
+
+        rerender(<SecondDocumentDialog isOpen={false} />);
+        expect(opener).toHaveFocus();
+      });
+
+      it('returns focus to a control in the page that opened it', () => {
+        const {rerender} = render(
+          <PageOpensSecondDocumentDialog isOpen={false} />,
+        );
+        const opener = screen.getByRole('button', {name: 'Open from the page'});
+        opener.focus();
+
+        rerender(<PageOpensSecondDocumentDialog isOpen={true} />);
+        within(secondDocument.body)
+          .getByRole('button', {name: 'Inside', hidden: true})
+          .focus();
+
+        rerender(<PageOpensSecondDocumentDialog isOpen={false} />);
+        expect(opener).toHaveFocus();
+      });
+
+      it('takes the ring from the last input in its own document', () => {
+        __resetInteractionModalityForTest();
+        const {rerender} = render(<SecondDocumentDialog isOpen={false} />);
+        const opener = within(secondDocument.body).getByRole('button', {
+          name: 'Open dialog',
+        });
+        // The page's last input was a pointer press (say, on the control that
+        // popped the window out); the dialog then closes from the keyboard in
+        // its own document.
+        fireEvent.pointerDown(document.body);
+        opener.focus();
+        rerender(<SecondDocumentDialog isOpen={true} />);
+        fireEvent.keyDown(secondDocument.body, {key: 'Escape'});
+        const focus = vi.spyOn(
+          secondDocument.defaultView!.HTMLElement.prototype,
+          'focus',
+        );
+
+        rerender(<SecondDocumentDialog isOpen={false} />);
+        expect(opener).toHaveFocus();
+        expect(
+          focus.mock.calls.filter(
+            (_call, index) => focus.mock.contexts[index] === opener,
+          ),
+        ).toEqual([[]]);
+        focus.mockRestore();
+      });
+
+      it('keeps plain focus on a text field that opened it after a pointer close', () => {
+        const {rerender} = render(<SecondDocumentFieldDialog isOpen={false} />);
+        const field = within(secondDocument.body).getByRole('textbox', {
+          name: 'Search',
+        });
+        field.focus();
+        rerender(<SecondDocumentFieldDialog isOpen={true} />);
+        const inside = within(secondDocument.body).getByRole('button', {
+          name: 'Inside',
+          hidden: true,
+        });
+        inside.focus();
+        fireEvent.pointerDown(inside);
+        // The field's own window's prototype: a field there is never an
+        // instance of the page's constructors.
+        const {prototype} = secondDocument.defaultView!.HTMLElement;
+        const focus = vi.spyOn(prototype, 'focus');
+        const blur = vi.spyOn(prototype, 'blur');
+
+        rerender(<SecondDocumentFieldDialog isOpen={false} />);
+        expect(field).toHaveFocus();
+        expect(
+          focus.mock.calls.filter(
+            (_call, index) => focus.mock.contexts[index] === field,
+          ),
+        ).toEqual([[]]);
+        expect(blur.mock.contexts).not.toContain(field);
+        focus.mockRestore();
+        blur.mockRestore();
+      });
+
+      it('tracks its document while any Dialog there is mounted, and releases it after the last', () => {
+        const removeEventListener = vi.spyOn(
+          secondDocument,
+          'removeEventListener',
+        );
+        const removedModalityListeners = () =>
+          removeEventListener.mock.calls
+            .map(([type]) => type)
+            .filter(type => type === 'pointerdown' || type === 'keydown')
+            .sort();
+        const {rerender} = render(<SecondDocumentDialogs count={2} />);
+        fireEvent.pointerDown(secondDocument.body);
+        expect(getInteractionModality(secondDocument)).toBe('pointer');
+
+        rerender(<SecondDocumentDialogs count={1} />);
+        fireEvent.keyDown(secondDocument.body, {key: 'Tab'});
+        expect(getInteractionModality(secondDocument)).toBe('keyboard');
+        expect(removedModalityListeners()).toEqual([]);
+
+        rerender(<SecondDocumentDialogs count={0} />);
+        expect(removedModalityListeners()).toEqual(['keydown', 'pointerdown']);
+        fireEvent.pointerDown(secondDocument.body);
+        expect(getInteractionModality(secondDocument)).toBe('keyboard');
+        removeEventListener.mockRestore();
+      });
+    });
   });
 
   // jsdom draws no focus ring, so these prove only which focus call Dialog

package/src/Dialog/Dialog.tsx

@@ -69,14 +69,18 @@ import {
   overlayPaddingReset,
 } from '../Layout/padding.stylex';
 import type {SpacingStep} from '../utils/types';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {chainEventHandlers} from '../utils/chainEventHandlers';
 import {devWarn} from '../utils/devWarning';
 import {DialogContext} from './DialogContext';
 import {themeProps} from '../utils/themeProps';
 import type {DialogVariantMap} from './index';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
-import {useInteractionModalityTracking} from '../utils/interactionModality';
+import {
+  getInteractionModality,
+  trackInteractionModalityIn,
+  useInteractionModalityTracking,
+} from '../utils/interactionModality';
 import {focusForLastInput} from '../utils/focusReturn';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 
@@ -91,8 +95,11 @@ function getDialogDirection(
   distance = 16,
 ): {x: number; y: number} {
   const rect = triggerEl.getBoundingClientRect();
-  const dx = rect.left + rect.width / 2 - window.innerWidth / 2;
-  const dy = rect.top + rect.height / 2 - window.innerHeight / 2;
+  // The trigger's own window: its rect is measured in that window's viewport,
+  // which is not the page's when the dialog renders into a second document.
+  const view = triggerEl.ownerDocument.defaultView ?? window;
+  const dx = rect.left + rect.width / 2 - view.innerWidth / 2;
+  const dy = rect.top + rect.height / 2 - view.innerHeight / 2;
   const dist = Math.sqrt(dx * dx + dy * dy) || 1;
   return {
     x: Math.round((dx / dist) * distance),
@@ -534,6 +541,18 @@ export function Dialog({
 
   useInteractionModalityTracking();
 
+  // Input in a second document (a same-origin iframe, a Document
+  // Picture-in-Picture window) never reaches the page's listeners, so the
+  // dialog's own document keeps its own last input for the focus return while
+  // this Dialog is mounted, from before it opens until it unmounts.
+  useEffect(() => {
+    const ownerDocument = dialogRef.current?.ownerDocument;
+    if (ownerDocument == null || ownerDocument === document) {
+      return undefined;
+    }
+    return trackInteractionModalityIn(ownerDocument);
+  }, [isInline]);
+
   // This runs in a layout effect so the capture lands before any descendant's
   // passive mount effect: all layout effects run before any passive effect,
   // while a child's passive effect runs before this parent's passive effect.
@@ -545,7 +564,15 @@ export function Dialog({
     if (isInline || !isOpen) {
       return;
     }
-    triggerElementRef.current = document.activeElement as HTMLElement | null;
+    // The dialog's own document while it holds focus: an app can render a
+    // dialog into a second document (a same-origin iframe, a Document
+    // Picture-in-Picture window) through a portal, and a control there that
+    // opens it is focused in that document, which the page's document reports
+    // only as the iframe element, or not at all. A control in the page that
+    // opens such a dialog leaves focus in the page.
+    const dialogDocument = dialogRef.current?.ownerDocument ?? document;
+    const doc = dialogDocument.hasFocus() ? dialogDocument : document;
+    triggerElementRef.current = doc.activeElement as HTMLElement | null;
   }, [isOpen, isInline]);
 
   // Derive dismissal behavior from purpose
@@ -567,7 +594,7 @@ export function Dialog({
       // captured by the layout effect above, before any descendant effect
       // could move focus.
       const trigger = triggerElementRef.current;
-      if (trigger && trigger !== document.body) {
+      if (trigger && trigger !== trigger.ownerDocument.body) {
         const dir = getDialogDirection(trigger);
         dialog.style.setProperty('--dialog-dir-x', `${dir.x}px`);
         dialog.style.setProperty('--dialog-dir-y', `${dir.y}px`);
@@ -591,9 +618,15 @@ export function Dialog({
       if (dialog.open) {
         dialog.close();
       }
-      // Return focus to the element that opened the dialog
-      if (triggerElementRef.current) {
-        focusForLastInput(triggerElementRef.current);
+      // Return focus to the element that opened the dialog, with the ring
+      // the last input in that element's own document calls for.
+      const trigger = triggerElementRef.current;
+      if (trigger) {
+        focusForLastInput(
+          trigger,
+          undefined,
+          getInteractionModality(trigger.ownerDocument),
+        );
       }
       triggerElementRef.current = null;
     }

package/src/Dialog/DialogHeader.tsx

@@ -20,15 +20,16 @@ import {useEffect, useRef, type ReactNode} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {spacingVars, sizeVars, typeScaleVars} from '../theme/tokens.stylex';
 import {LayoutHeader} from '../Layout/LayoutHeader';
-import {Button} from '../Button';
-import {Icon} from '../Icon';
+import {Button} from '../Button/Button';
+import {Icon} from '../Icon/Icon';
 import {Heading} from '../Heading/Heading';
 import {Text} from '../Text/Text';
 import type {BaseProps} from '../BaseProps';
-import {isRenderable, mergeProps} from '../utils';
+import {isRenderable} from '../utils/isRenderable';
+import {mergeProps} from '../utils/mergeProps';
 import {themeProps} from '../utils/themeProps';
 import {useDialogContext} from './DialogContext';
-import {useTranslator} from '../i18n';
+import {useTranslator} from '../i18n/useTranslator';
 
 const styles = stylex.create({
   container: {