@astryxdesign/core 0.7.2 → 0.7.3-canary.0bf23bd

package/src/hooks/useMenuPress.ts

@@ -36,7 +36,9 @@
  *
  * The menu root is marked `data-astryx-menu-press` so a nested flyout (a DOM
  * descendant of its parent menu) can tell which level owns a press, and so a
- * surface can be recognised as carrying this model.
+ * surface can be recognised as carrying this model. A menu the root renders
+ * beside itself names the root with `data-astryx-menu-press-surface` and counts
+ * as nested in it.
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
@@ -60,6 +62,14 @@ import {useLongPress, type UseLongPressHandlers} from './useLongPress';
 /** Marks a menu root that carries this press model. */
 export const MENU_PRESS_MARKER = 'data-astryx-menu-press';
 const MENU_PRESS_ROOT_SELECTOR = `[${MENU_PRESS_MARKER}]`;
+/**
+ * Carried by a menu root that another root renders beside itself rather than
+ * inside it, naming that root's `id`: the menu of a sub-menu with a header or
+ * footer, in a dialog beside the root's menu, is nested in that root for the
+ * press model, as a flyout inside the root's DOM is. Nothing else beside the
+ * root carries it, so a picker placed in a header or footer stays its own root.
+ */
+export const MENU_PRESS_SURFACE_ATTR = 'data-astryx-menu-press-surface';
 
 /** How long after a tracked release the browser's click is still swallowed. */
 export const MENU_PRESS_STRAY_CLICK_MS = 400;
@@ -246,16 +256,44 @@ function isRowFocusable(row: HTMLElement): boolean {
 function getOutermostRoot(menu: HTMLElement): HTMLElement {
   let root = menu;
   for (;;) {
-    const parent = root.parentElement?.closest<HTMLElement>(
-      MENU_PRESS_ROOT_SELECTOR,
-    );
-    if (parent == null) {
+    const parent =
+      root.parentElement?.closest<HTMLElement>(MENU_PRESS_ROOT_SELECTOR) ??
+      getSurfaceOwner(root);
+    if (parent == null || parent === root) {
       return root;
     }
     root = parent;
   }
 }
 
+/**
+ * The menu root that renders `menu` beside itself, if any (see
+ * `MENU_PRESS_SURFACE_ATTR`). Read off the menu itself, never an ancestor, so
+ * a root placed in a region of that surface is not adopted.
+ */
+function getSurfaceOwner(menu: HTMLElement): HTMLElement | null {
+  const ownerId = menu.getAttribute(MENU_PRESS_SURFACE_ATTR);
+  if (!ownerId) {
+    return null;
+  }
+  const owner = menu.ownerDocument.getElementById(ownerId);
+  return owner?.matches(MENU_PRESS_ROOT_SELECTOR) === true ? owner : null;
+}
+
+/**
+ * Whether `element` is inside the menu tree whose outermost root is `root`:
+ * inside the root itself, or inside a menu nested in it through a surface
+ * the root renders beside itself. Anything else in such a surface (a header
+ * field, say) is outside the menu, as the root's own regions are.
+ */
+function isInMenuTree(element: Element, root: HTMLElement): boolean {
+  if (root.contains(element)) {
+    return true;
+  }
+  const owner = element.closest<HTMLElement>(MENU_PRESS_ROOT_SELECTOR);
+  return owner != null && getOutermostRoot(owner) === root;
+}
+
 interface ResolvedPoint {
   row: HTMLElement | null;
   isInMenu: boolean;
@@ -332,14 +370,14 @@ export function useMenuPress(options: UseMenuPressOptions): UseMenuPressReturn {
       }
       const root = menu == null ? null : getOutermostRoot(menu);
       const isInMenu =
-        root != null && element != null && root.contains(element);
+        root != null && element != null && isInMenuTree(element, root);
       const trigger = triggerRef?.current ?? null;
       const isOnTrigger =
         trigger != null && element != null && trigger.contains(element);
       let row: HTMLElement | null = null;
       if (isInMenu && element != null) {
         row = element.closest<HTMLElement>(itemSelector);
-        if (row != null && !root.contains(row)) {
+        if (row != null && !isInMenuTree(row, root)) {
           row = null;
         }
       }

package/src/utils/disabledInteraction.ts

@@ -0,0 +1,40 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file disabledInteraction.ts
+ * @input An optional caller keydown handler
+ * @output Event props that keep a focusable, aria-disabled control inert
+ * @position Shared by controls that replace native `disabled` with
+ *   `aria-disabled` under spec:AST-085 (FR1, FR2)
+ */
+
+import type {KeyboardEvent, KeyboardEventHandler, MouseEvent} from 'react';
+
+/**
+ * Event props for a disabled control that stays focusable. Native `disabled`
+ * dispatched no click at all; without it, Enter and Space still synthesize a
+ * click that native listeners on the element (a wrapping Popover's trigger)
+ * receive. Cancelling those keys keeps the click from existing, and the click
+ * handler cancels pointer clicks and keeps them from reaching ancestors. Other
+ * keys still reach the caller's handler.
+ */
+export function disabledInteractionProps<T extends HTMLElement>(
+  onKeyDown?: KeyboardEventHandler<T>,
+): {
+  onClick: (event: MouseEvent<T>) => void;
+  onKeyDown: (event: KeyboardEvent<T>) => void;
+} {
+  return {
+    onClick: event => {
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+      } else {
+        onKeyDown?.(event);
+      }
+    },
+  };
+}

package/src/utils/timeParser.test.ts

@@ -260,6 +260,17 @@ describe('adjustTime', () => {
     expect(adjustTime('10:00' as ISOTimeString, NaN)).toBe('10:00');
   });
 
+  it('returns the input unchanged for a fractional delta', () => {
+    // `increment` is documented as minutes and typed `number`, so a caller can
+    // hand ArrowUp a fraction. A fractional minute reaching formatISOTime is
+    // not rounded: it pads to "30.5" and the field is left holding a string
+    // that is no longer a parseable time.
+    expect(adjustTime('10:30' as ISOTimeString, 0.5)).toBe('10:30');
+    expect(adjustTime('10:30:45' as ISOTimeString, -0.5, true)).toBe(
+      '10:30:45',
+    );
+  });
+
   it('wraps large negative deltas in constant time', () => {
     expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7)).toBe('10:00');
     expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7 - 30)).toBe(

package/src/utils/timeParser.ts

@@ -372,6 +372,10 @@ export function clampTime(
 
 /**
  * Adjusts a time by adding/subtracting minutes.
+ *
+ * `deltaMinutes` is a whole number of minutes. A fractional delta leaves the
+ * time unchanged rather than returning a value that is no longer a time —
+ * `HH:MM` has no place for a fraction of a minute.
  */
 export function adjustTime(
   time: ISOTimeString,
@@ -384,8 +388,11 @@ export function adjustTime(
   }
 
   // A non-finite delta would spin the wrap-around forever (-Infinity) or
-  // produce "NaN:NaN" (NaN) — return the input unchanged instead.
-  if (!Number.isFinite(deltaMinutes)) {
+  // produce "NaN:NaN" (NaN), and a fractional one is never rounded on the way
+  // out — formatISOTime pads "30.5" to two characters and leaves it, so the
+  // caller gets back a value that is no longer a time. Steps are whole
+  // minutes: return the input unchanged instead.
+  if (!Number.isInteger(deltaMinutes)) {
     return time;
   }