@astryxdesign/core 0.7.7 → 0.7.8-canary.30b1896

package/src/utils/focusReturn.ts

@@ -151,3 +151,33 @@ export function focusForLastInput(
   }
   element.focus({...options, focusVisible: false});
 }
+
+/**
+ * Prepares the focus return for an open surface that may be removed while
+ * open (rendered only while open, or removed with its view). Removing a
+ * `<dialog>` runs no close and no browser focus return. Call this while the
+ * surface is mounted: it reads the frame that hosts the surface now, because a
+ * removed frame's document has no window. Call the returned function from the
+ * effect cleanup with the opener.
+ *
+ * Once the commit has finished, focus moves to the opener only when the
+ * surface really left the document (StrictMode's simulated unmount keeps it),
+ * the opener is still on the page, and the removal lost focus, both in the
+ * surface's document and in the document that hosts its frame. A control the
+ * user pressed outside the surface, or outside its frame, keeps its focus.
+ */
+export function prepareFocusReturnOnRemoval(
+  surface: Element,
+): (opener: Element | null) => void {
+  const host = surface.ownerDocument.defaultView?.frameElement ?? null;
+  return opener => {
+    queueMicrotask(() => {
+      if (surface.isConnected || opener == null || !opener.isConnected) {
+        return;
+      }
+      if (isFocusLost(surface) && (host == null || isFocusLost(host))) {
+        focusForLastInput(opener as HTMLElement);
+      }
+    });
+  };
+}

package/src/utils/interactionModality.ts

@@ -203,6 +203,7 @@ function holdNodeDocument(
  * tracker of its own for modality.
  */
 export function useInteractionModalityTracking(): InteractionModalityTracking {
+  // Syncs the document's interaction-modality tracking with this mount.
   useEffect(() => trackInteractionModality(), []);
   const nodeRef = useRef<Element | null>(null);
   const holdRef = useRef<{release: (() => void) | null}>({release: null});
@@ -236,7 +237,10 @@ export function useInteractionModalityTracking(): InteractionModalityTracking {
 export function useInteractionModalityTrackingFor(
   elementRef: RefObject<Element | null>,
 ): () => InteractionModality {
+  // Syncs the document's interaction-modality tracking with this mount.
   useEffect(() => trackInteractionModality(), []);
+  // Syncs modality tracking in the element's second document, such as an iframe
+  // or a Picture-in-Picture window.
   useEffect(() => {
     const ownerDocument = elementRef.current?.ownerDocument;
     if (

package/src/utils/interactionOverlay.stylex.ts

@@ -15,8 +15,9 @@
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
  * clock), hooks/usePressFeedback.doc.mjs, the components that paint the touch
  * press off an ancestor scope or a pseudo-element (Switch, Tab,
- * CheckboxInput, RadioListItem, ClickableCard, SelectableCard, Thumbnail)
- * and scripts/build-css.test.mjs.
+ * CheckboxInput, RadioListItem, ClickableCard, SelectableCard, Thumbnail),
+ * Button (a tracked action sizes its `:active` image to zero) and
+ * scripts/build-css.test.mjs.
  */
 
 // Every surface that paints a press uses one of these styles, so a change to

package/src/utils/plainDate.ts

@@ -488,6 +488,27 @@ export function plainDateWeekFieldName(locale: Locale = 'en'): string {
   return 'week';
 }
 
+const dayNumberFormats = new Map<Locale, Intl.NumberFormat>();
+
+/**
+ * A day of the month or a week number in the locale's own digits: `15` in
+ * English, `۱۵` in Persian, `١٥` in Egyptian Arabic. Only the digits follow the
+ * locale. The number stays the Gregorian day or ISO week that it names, so no
+ * other calendar applies, and no grouping separator or unit word is added.
+ * Internal: not re-exported from `utils/index.ts`.
+ */
+export function plainDateFormatDayNumber(
+  value: number,
+  locale: Locale,
+): string {
+  let format = dayNumberFormats.get(locale);
+  if (format == null) {
+    format = new Intl.NumberFormat(locale, {useGrouping: false});
+    dayNumberFormats.set(locale, format);
+  }
+  return format.format(value);
+}
+
 // =============================================================================
 // Shared date-only format vocabulary
 // =============================================================================

package/src/utils/pressFeedback.ts

@@ -2,8 +2,8 @@
 
 /**
  * @file pressFeedback.ts
- * @input The press state machine (pressGesture.ts), the menu-press marker
- *   (hooks/menuPressMarker.ts) and the document's pointer, keyboard, scroll and
+ * @input The press state machine (pressGesture.ts), the menu-press and
+ *   press-group markers and the document's pointer, keyboard, scroll and
  *   visibility events
  * @output PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE, pressableProps and
  *   installPressFeedback
@@ -46,6 +46,7 @@ import {isCoarsePointer, watchCoarsePointer} from './coarsePointer';
 import {subscribeInput} from './inputStream';
 import {TOUCH_QUERY} from './touchPresentation';
 import {holdsPressThroughDrag} from '../privateAttributes/pressHoldsDrag.stylex';
+import {isTrackedByGroup} from '../privateAttributes/pressGroupItem.stylex';
 
 /**
  * The marker the controller finds with `closest()`. Every Astryx component
@@ -325,8 +326,9 @@ function stylesheetDroppedActive(): boolean {
 
 /**
  * The surface a mouse button's or the Space key's press paints, if any: the
- * innermost marked surface, outside a menu. A key's press paints only a
- * focused element that is itself the surface, as `:active` does.
+ * innermost marked surface, outside a menu and off a tracked action. A key's
+ * press paints only a focused element that is itself the surface, as
+ * `:active` does.
  */
 function buttonSurfaceAt(
   target: EventTarget | null,
@@ -336,6 +338,10 @@ function buttonSurfaceAt(
   if (element == null || element.closest(MENU_PRESS_ROOT) != null) {
     return null;
   }
+  // A tracker that follows a mouse paints a mouse press on its own actions.
+  if (pointerId != null && isTrackedByGroup(element, 'mouse')) {
+    return null;
+  }
   if (pointerId == null && element !== target) {
     return null;
   }
@@ -414,7 +420,14 @@ function onPointerDown(event: PointerEvent): void {
   const braking = element != null && scrollerIsBraking(element);
   lastTouchAt = Date.now();
   lastTouchTarget = event.target instanceof Node ? event.target : null;
-  if (element == null || braking) {
+  // A group's tracker that follows this pointer paints its action, so two
+  // writers would erase each other's paint. The touch still counts for the
+  // brake above.
+  if (
+    element == null ||
+    braking ||
+    isTrackedByGroup(element, event.pointerType)
+  ) {
     return;
   }
   takeOver(button, element);
@@ -560,6 +573,11 @@ function activatesOnSpace(target: EventTarget | null): boolean {
   );
 }
 
+/** A tracked action takes no `:active` paint, so a key's press paints here. */
+function isTrackedAction(target: EventTarget | null): boolean {
+  return target instanceof Element && isTrackedByGroup(target);
+}
+
 /**
  * Space went down on a focused button that is itself a pressable surface.
  * Heard in the BUBBLE phase, after the page's own handlers, so a press the
@@ -573,7 +591,7 @@ function onKeyDown(event: KeyboardEvent): void {
     event.isComposing ||
     event.defaultPrevented ||
     !activatesOnSpace(event.target) ||
-    !stylesheetDroppedActive()
+    !(stylesheetDroppedActive() || isTrackedAction(event.target))
   ) {
     return;
   }

package/src/utils/triggerFocus.ts

@@ -0,0 +1,80 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file triggerFocus.ts
+ * @input A focus event on a hover-layer trigger and its focusTrigger value
+ * @output Whether that focus counts as focus on the trigger, and a gate that
+ *   remembers it for the matching blur
+ * @position Shared focus-trigger judgement for Tooltip and HoverCard
+ */
+
+/** When focus on a trigger opens its layer. */
+export type TriggerFocusMode = 'auto' | 'always' | 'never';
+
+/** Whether `element` is in the tab order or naturally focusable. */
+export function isFocusableTrigger(element: HTMLElement): boolean {
+  if (element.hasAttribute('tabindex')) {
+    return element.tabIndex >= 0;
+  }
+  const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+  if (focusableTags.includes(element.tagName)) {
+    return !(element as HTMLButtonElement).disabled;
+  }
+  return element.isContentEditable;
+}
+
+/**
+ * Whether a focus event on a trigger (its `currentTarget`) counts as focus on
+ * the trigger.
+ *
+ * Under `auto` it is decided when focus arrives, not when listeners attach: a
+ * roving-tabindex member that was `tabindex="-1"` then can be the tab stop
+ * now. A trigger that receives focus is focusable by definition, which covers
+ * focusable elements this check does not list, such as a `<summary>` or an SVG
+ * link. Focus inside the trigger counts only while the trigger is focusable
+ * too, so a plain wrapper ignores its children's focus.
+ */
+export function isFocusForTrigger(
+  event: Event,
+  mode: TriggerFocusMode,
+): boolean {
+  if (mode === 'always') {
+    return true;
+  }
+  if (mode === 'never') {
+    return false;
+  }
+  const trigger = event.currentTarget as HTMLElement | null;
+  return (
+    trigger != null && (event.target === trigger || isFocusableTrigger(trigger))
+  );
+}
+
+/** Remembers whether a trigger's current focus counted when it arrived. */
+export interface TriggerFocusGate {
+  /** On focusin: whether this focus opens the layer. */
+  focusIn(event: Event, mode: TriggerFocusMode): boolean;
+  /**
+   * On focusout: whether this blur closes the layer. A focus that counted
+   * closes on blur even if the trigger has since left the tab order.
+   */
+  focusOut(event: Event, mode: TriggerFocusMode): boolean;
+}
+
+/** A gate for one trigger; each hook keeps one for its lifetime. */
+export function createTriggerFocusGate(): TriggerFocusGate {
+  let isCounted = false;
+  return {
+    focusIn(event, mode) {
+      isCounted = isFocusForTrigger(event, mode);
+      return isCounted;
+    },
+    focusOut(event, mode) {
+      if (!isCounted && !isFocusForTrigger(event, mode)) {
+        return false;
+      }
+      isCounted = false;
+      return true;
+    },
+  };
+}

package/dist/internal/touch-sheet.d.ts

@@ -1,21 +0,0 @@
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export { SheetConfirmation } from './SheetConfirmation.js';
-export type { SheetConfirmationProps } from './SheetConfirmation.js';
-export { useDismissSearchOnTouchDrag } from './useDismissSearchOnTouchDrag.js';
-export { hasSameSelection, nameSheetDraftChange } from './sheetDraft.js';
-export type { SheetDraftChange } from './sheetDraft.js';
-//# sourceMappingURL=touch-sheet.d.ts.map

package/dist/internal/touch-sheet.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"touch-sheet.d.ts","sourceRoot":"","sources":["../../src/internal/touch-sheet.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AACtD,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAC,2BAA2B,EAAC,MAAM,+BAA+B,CAAC;AAC1E,OAAO,EAAC,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,cAAc,CAAC;AACpE,YAAY,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAC"}

package/dist/internal/touch-sheet.js

@@ -1,19 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export { SheetConfirmation } from "./SheetConfirmation.js";
-export { useDismissSearchOnTouchDrag } from "./useDismissSearchOnTouchDrag.js";
-export { hasSameSelection, nameSheetDraftChange } from "./sheetDraft.js";

package/src/internal/touch-sheet.ts

@@ -1,21 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-/**
- * @file touch-sheet.ts
- * @input The touch sheets' shared confirmation, search-drag dismissal and
- *   draft rules
- * @output `@astryxdesign/core/internal/touch-sheet`: SheetConfirmation,
- *   useDismissSearchOnTouchDrag, hasSameSelection and nameSheetDraftChange,
- *   re-exported by name for Lab's sheets
- * @position An internal entry reserved for Astryx's own packages:
- *   undocumented, outside the public API and its compatibility promise,
- *   versioned in lockstep with Core, and allowed only in Core and Lab by the
- *   `@astryx/no-core-internal-import` lint rule. Core components import the
- *   same modules by relative path. Named re-exports only.
- *
- * SYNC: When modified, update scripts/sync-exports.js.
- */
-export {SheetConfirmation} from './SheetConfirmation';
-export type {SheetConfirmationProps} from './SheetConfirmation';
-export {useDismissSearchOnTouchDrag} from './useDismissSearchOnTouchDrag';
-export {hasSameSelection, nameSheetDraftChange} from './sheetDraft';
-export type {SheetDraftChange} from './sheetDraft';