@oxyhq/bloom 1.0.4 → 1.0.6

package/src/floating/menu-sub-flyout.tsx

@@ -16,10 +16,10 @@
  *  - **Stack rank.** Taken by the `OverlayRoot` inside `FloatingPanel`, on
  *    mount, like every other surface. The sub-panel mounts AFTER the root panel,
  *    so it paints above it by construction and carries no `zIndex`.
- *  - **Hover intent.** Opening on hover is easy; staying open while the pointer
- *    travels diagonally from the row to the panel is the part that needs a
- *    delay. Leaving either surface SCHEDULES a close, entering either CANCELS
- *    it, and the delay is long enough (`CLOSE_DELAY_MS`) to cross the gap.
+ *  - **Hover intent.** A real mouse/pen move over the row opens it; a layout
+ *    transition placing the row under a parked pointer does not. Leaving either
+ *    surface SCHEDULES a close, moving over either CANCELS it, and the delay is
+ *    long enough (`CLOSE_DELAY_MS`) to cross the gap.
  *  - **Keyboard.** Right opens and moves into the panel, Left and Escape leave
  *    it. Escape is handled here in the CAPTURE phase with
  *    `stopImmediatePropagation`, which is the only way the INNERMOST surface
@@ -111,9 +111,61 @@ function domNode(node: View | null): DomNode | null {
   return element as DomNode;
 }
 
+/** Touch movement is scrolling/dragging, not hover intent. */
+function isHoverPointer(event: Event): boolean {
+  const pointerType = (event as PointerEvent).pointerType;
+  return pointerType === 'mouse' || pointerType === 'pen';
+}
+
+/** Every role a menu ROW can carry — the rows a pointer can actually land on. */
+const MENU_ITEM_SELECTOR =
+  '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="checkbox"], [role="radio"]';
+
+/**
+ * Did the pointer leave for another ROW, rather than for the gap this sub's
+ * grace delay exists to cover?
+ *
+ * {@link CLOSE_DELAY_MS} buys time for ONE journey: the diagonal from a trigger
+ * row to its own flyout, across a strip where neither surface is hovered. Every
+ * other departure is unambiguous the moment it happens, and the most visible one
+ * is a SIBLING sub-trigger: two subs in a panel each own their state and their
+ * own timer, so the one being left served out its full delay while the one being
+ * entered had already opened — 300ms of two overlapping flyouts, which is not a
+ * grace period but a bug.
+ *
+ * "Another row" means the pointer landed on an actual menu ITEM that belongs to
+ * neither this sub's trigger nor its flyout. Testing for an ITEM rather than for
+ * a `[role="menu"]` ancestor is the whole subtlety: the diagonal to the flyout
+ * crosses the parent panel's own padding, which IS inside a `[role="menu"]` but
+ * is not a row — measured, a panel-ancestor test dismissed the flyout mid-journey
+ * and broke the very case the delay exists for.
+ *
+ * Both exclusions are load-bearing. Without the flyout check, arriving at the
+ * panel's first row would close the panel the move was aimed at. Without the
+ * trigger check, moving from the panel back onto its own trigger would close and
+ * immediately re-open, which flickers.
+ *
+ * A departure with no `relatedTarget` — off the window, or the node under the
+ * pointer being torn down — is NOT another row, so it keeps the delay and
+ * behaviour there is what it was.
+ */
+function leavesForAnotherRow(
+  event: Event,
+  ownFlyout: DomNode | null,
+  ownTrigger: DomNode | null,
+): boolean {
+  const next = (event as PointerEvent).relatedTarget;
+  if (!(next instanceof Element)) return false;
+  const row = next.closest(MENU_ITEM_SELECTOR);
+  if (!row) return false;
+  if (ownFlyout?.contains(row as HTMLElement)) return false;
+  if (ownTrigger?.contains(row as HTMLElement)) return false;
+  return true;
+}
+
 /** The first focusable descendant, so Right lands ON the panel's first row. */
 function focusFirstItem(node: DomNode | null): void {
-  const first = node?.querySelector<HTMLElement>('[role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="radio"]');
+  const first = node?.querySelector<HTMLElement>(MENU_ITEM_SELECTOR);
   first?.focus?.();
 }
 
@@ -229,10 +281,22 @@ interface SubFlyoutContextValue {
   setOpen: (next: boolean) => void;
   /** The trigger row's wrapper, measured to anchor the panel. */
   triggerRef: React.RefObject<View | null>;
+  /**
+   * The flyout's scroller, so the TRIGGER can tell a pointer heading for its own
+   * panel from one heading for a sibling row. Written by `MenuSubContent`; null
+   * whenever the panel is closed, which is exactly when there is nothing to
+   * cross to.
+   */
+  contentRef: React.RefObject<View | null>;
   /** Cancel a scheduled close — the pointer arrived on one of the two surfaces. */
   keepOpen: () => void;
   /** Schedule a close — the pointer left one of them, and may be crossing to the other. */
   closeSoon: () => void;
+  /**
+   * Close immediately, WITHOUT moving focus — the pointer has already landed on
+   * another row, and refocusing this trigger would take focus off it.
+   */
+  closeNow: () => void;
   /** Close now and put focus back on the trigger row (Left, Escape). */
   closeAndRefocus: () => void;
 }
@@ -257,6 +321,7 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
       onChange: onOpenChange,
     });
     const triggerRef = useRef<View | null>(null);
+    const contentRef = useRef<View | null>(null);
     const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const cancelTimer = useCallback(() => {
@@ -272,8 +337,10 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
 
     const keepOpen = useCallback(() => {
       cancelTimer();
-      setOpen(true);
-    }, [cancelTimer, setOpen]);
+      // `pointermove` is intentionally continuous. Once open, cancel the close
+      // timer without re-notifying a controlled consumer on every coordinate.
+      if (!isOpen) setOpen(true);
+    }, [cancelTimer, isOpen, setOpen]);
 
     const closeSoon = useCallback(() => {
       cancelTimer();
@@ -283,6 +350,11 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
       }, CLOSE_DELAY_MS);
     }, [cancelTimer, setOpen]);
 
+    const closeNow = useCallback(() => {
+      cancelTimer();
+      setOpen(false);
+    }, [cancelTimer, setOpen]);
+
     const closeAndRefocus = useCallback(() => {
       cancelTimer();
       setOpen(false);
@@ -291,8 +363,8 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
     }, [cancelTimer, setOpen]);
 
     const context = useMemo<SubFlyoutContextValue>(
-      () => ({ open: isOpen, setOpen, triggerRef, keepOpen, closeSoon, closeAndRefocus }),
-      [isOpen, setOpen, keepOpen, closeSoon, closeAndRefocus],
+      () => ({ open: isOpen, setOpen, triggerRef, contentRef, keepOpen, closeSoon, closeNow, closeAndRefocus }),
+      [isOpen, setOpen, keepOpen, closeSoon, closeNow, closeAndRefocus],
     );
 
     return <SubFlyoutContext.Provider value={context}>{children}</SubFlyoutContext.Provider>;
@@ -322,17 +394,29 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
       [sub.triggerRef],
     );
 
-    // Hover and keyboard through DOM listeners on the wrapper rather than RN
-    // props: `Item` renders its own `Pressable` and publishes neither
-    // `onHoverIn` nor `onKeyDown`, and widening its prop surface for one
-    // web-only caller is the wrong trade. `mouseenter`/`mouseleave` do not
-    // bubble, so they describe THIS row and not the rows under the panel.
+    // Pointer intent and keyboard through DOM listeners on the wrapper rather
+    // than RN props: `Item` renders its own `Pressable` and publishes neither
+    // pointer movement nor `onKeyDown`, and widening its prop surface for one
+    // web-only caller is the wrong trade. Crucially, `pointermove` needs actual
+    // coordinates to change: unlike enter, layout motion cannot synthesize it
+    // when a transition puts this row under a parked pointer.
     useEffect(() => {
       const element = domNode(node);
       if (!element || disabled) return;
 
-      const onEnter = () => sub.keepOpen();
-      const onLeave = () => sub.closeSoon();
+      const onMove = (event: Event) => {
+        if (isHoverPointer(event)) sub.keepOpen();
+      };
+      const onLeave = (event: Event) => {
+        if (!isHoverPointer(event)) return;
+        // Straight onto another row of the parent panel — a sibling trigger, or
+        // any plain item — is not the diagonal the delay exists for.
+        if (leavesForAnotherRow(event, domNode(sub.contentRef.current), element)) {
+          sub.closeNow();
+          return;
+        }
+        sub.closeSoon();
+      };
       const onKeyDown = (event: Event) => {
         const key = (event as KeyboardEvent).key;
         if (key !== 'ArrowRight' && key !== 'Enter' && key !== ' ') return;
@@ -340,12 +424,12 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
         sub.keepOpen();
       };
 
-      element.addEventListener('mouseenter', onEnter);
-      element.addEventListener('mouseleave', onLeave);
+      element.addEventListener('pointermove', onMove);
+      element.addEventListener('pointerleave', onLeave);
       element.addEventListener('keydown', onKeyDown);
       return () => {
-        element.removeEventListener('mouseenter', onEnter);
-        element.removeEventListener('mouseleave', onLeave);
+        element.removeEventListener('pointermove', onMove);
+        element.removeEventListener('pointerleave', onLeave);
         element.removeEventListener('keydown', onKeyDown);
       };
     }, [node, disabled, sub]);
@@ -405,12 +489,36 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
     const anchor = useFlyoutAnchor(sub.triggerRef, sub.open);
     const [node, setNode] = useState<View | null>(null);
 
+    // State for this component's own effects, a ref for the TRIGGER's leave
+    // handler: that handler runs from a DOM listener, outside React's render,
+    // so it needs a value it can read at event time rather than one captured
+    // when the listener was attached.
+    const attachContent = useCallback(
+      (value: View | null) => {
+        setNode(value);
+        sub.contentRef.current = value;
+      },
+      [sub.contentRef],
+    );
+
     useEffect(() => {
       const element = domNode(node);
       if (!element || !sub.open) return;
 
-      const onEnter = () => sub.keepOpen();
-      const onLeave = () => sub.closeSoon();
+      const onMove = (event: Event) => {
+        if (isHoverPointer(event)) sub.keepOpen();
+      };
+      const onLeave = (event: Event) => {
+        if (!isHoverPointer(event)) return;
+        // Leaving the flyout for a row of the parent panel is just as
+        // unambiguous as leaving the trigger for one: the pointer has arrived
+        // somewhere, and it is not this sub.
+        if (leavesForAnotherRow(event, element, domNode(sub.triggerRef.current))) {
+          sub.closeNow();
+          return;
+        }
+        sub.closeSoon();
+      };
       const onKeyDown = (event: Event) => {
         const key = (event as KeyboardEvent).key;
         if (key !== 'ArrowLeft') return;
@@ -418,12 +526,12 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
         sub.closeAndRefocus();
       };
 
-      element.addEventListener('mouseenter', onEnter);
-      element.addEventListener('mouseleave', onLeave);
+      element.addEventListener('pointermove', onMove);
+      element.addEventListener('pointerleave', onLeave);
       element.addEventListener('keydown', onKeyDown);
       return () => {
-        element.removeEventListener('mouseenter', onEnter);
-        element.removeEventListener('mouseleave', onLeave);
+        element.removeEventListener('pointermove', onMove);
+        element.removeEventListener('pointerleave', onLeave);
         element.removeEventListener('keydown', onKeyDown);
       };
     }, [node, sub]);
@@ -481,7 +589,7 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
             flyout's pointer hit box — without it that 4px ring is a place where
             the pointer is over the panel but over nothing listening, and a
             pointer resting there would schedule a close. */}
-        <StyledView ref={setNode} className={MENU_SUB_SCROLL_CLASS}>
+        <StyledView ref={attachContent} className={MENU_SUB_SCROLL_CLASS}>
           {children}
         </StyledView>
       </FloatingPanel>

package/src/__tests__/support/collision-fixture-barrel.ts

@@ -1,20 +0,0 @@
-/**
- * A barrel that DELIBERATELY offers one name from two declarations, so that
- * `barrel-name-collisions.test.ts` can prove its detector fires. It reproduces
- * the shipped `Item` shape: a star export carrying `Item` from `item/`, and an
- * explicit re-export binding that same name to a different component.
- *
- * Nothing imports this at runtime. bob's `exclude` keeps it out of `lib/`, and
- * `files: ["src", …]` does ship it inside the tarball's `src/` like the other
- * test files there — but no entry point reaches it, so no bundler links it, and
- * `package.json#exports` never names it.
- *
- * The `Card` lines below are the other half of the
- * control: one name offered twice from ONE declaration, which the detector must
- * stay quiet about — otherwise its cheapest fix would be deleting a legitimate
- * redundant re-export.
- */
-export * from '../../item';
-export { Card as Item } from '../../card';
-export { Card } from '../../card';
-export * from '../../card';

package/src/__tests__/support/constructed-style-sheets.ts

@@ -1,68 +0,0 @@
-/**
- * A spec-shaped stand-in for constructed stylesheets, for the jsdom suites.
- *
- * jsdom 26 ships the `CSSStyleSheet` CONSTRUCTOR but neither `replaceSync` nor
- * `document.adoptedStyleSheets`, so every jsdom test takes Bloom's `<style>`
- * fallback. That makes the whole CSP-safe path — the reason
- * `styles/adopt-style-sheet.ts` exists — invisible to jest unless a test
- * installs the API itself. Without this, a mutation that deleted the adoption
- * branch entirely would leave the suite green.
- *
- * Not collected as a suite: jest's `testMatch` wants `*.test.ts` / `*.spec.ts`.
- */
-
-export interface FakeStyleSheet {
-  /** The CSS most recently handed to `replaceSync`. */
-  cssText: string;
-  /** How many times the sheet has been re-parsed, so a test can prove it wasn't. */
-  replaceSyncCalls: number;
-  replaceSync(css: string): void;
-}
-
-export interface ConstructedStyleSheetsHarness {
-  /** The document's adopted sheets, read live (the code reassigns the array). */
-  adopted(): readonly FakeStyleSheet[];
-  /** Drop the API again, restoring jsdom's own `CSSStyleSheet`. */
-  uninstall(): void;
-}
-
-export function installConstructedStyleSheets(): ConstructedStyleSheetsHarness {
-  class FakeCSSStyleSheet implements FakeStyleSheet {
-    cssText = '';
-    replaceSyncCalls = 0;
-
-    replaceSync(css: string): void {
-      this.cssText = css;
-      this.replaceSyncCalls += 1;
-    }
-  }
-
-  const previousConstructor = Object.getOwnPropertyDescriptor(
-    globalThis,
-    'CSSStyleSheet',
-  );
-
-  Object.defineProperty(globalThis, 'CSSStyleSheet', {
-    value: FakeCSSStyleSheet,
-    writable: true,
-    configurable: true,
-  });
-  Object.defineProperty(document, 'adoptedStyleSheets', {
-    value: [],
-    writable: true,
-    configurable: true,
-  });
-
-  return {
-    adopted: () =>
-      document.adoptedStyleSheets as unknown as readonly FakeStyleSheet[],
-    uninstall: () => {
-      Reflect.deleteProperty(document, 'adoptedStyleSheets');
-      if (previousConstructor) {
-        Object.defineProperty(globalThis, 'CSSStyleSheet', previousConstructor);
-      } else {
-        Reflect.deleteProperty(globalThis, 'CSSStyleSheet');
-      }
-    },
-  };
-}

package/src/__tests__/support/press-host.ts

@@ -1,30 +0,0 @@
-/**
- * Pressing a component's OWN host node, and proving the component is what
- * installed the handler being measured.
- *
- * `fireEvent.press` walks UP from the element it is handed to the nearest
- * ancestor carrying an `onPress` prop, and it does not stop at host nodes — a
- * COMPOSITE counts, because `getEventHandler` only reads `element.props`. So
- * `<Thing onPress={fn}>` written in a test's own JSX catches the press itself.
- * Measured on `ProfileCard`: with the handler deleted from the component the
- * card rendered as an inert `View`, and the test still reported exactly one
- * call. Green, and measuring nothing. Nine suites had the same shape.
- *
- * Asserting the host node's own `onPress` FIRST closes both halves:
- *
- *  - a component that installs no handler at all fails here, and
- *  - a component that installs one which drops the caller's fails on the call
- *    count, because `fireEvent` now finds a handler AT the node and never walks
- *    past it to the test's own JSX.
- *
- * `host` must therefore be the node the component itself made pressable — the
- * one carrying its `testID` / `accessibilityLabel` — not a `Text` deep inside
- * it, or the walk-up is back and so is the hole.
- */
-import { fireEvent } from '@testing-library/react-native';
-import type { ReactTestInstance } from 'react-test-renderer';
-
-export function pressHost(host: ReactTestInstance): void {
-  expect(typeof host.props.onPress).toBe('function');
-  fireEvent.press(host);
-}

package/src/__tests__/support/rendered-style.ts

@@ -1,99 +0,0 @@
-/**
- * Reading what actually landed on a rendered node — shared by every suite that
- * asserts the "className lands on the node the parent lays out" rule.
- *
- * Three components had the same two-node defect (`Button`, then `Fab` and
- * `FrostedIconButton`), and asserting it needs the same two things each time:
- * the HOST tree (composites do not appear in `toJSON()`, so a wrapper is only
- * visible there) and a deep flatten of the `style` prop, because react-native-css
- * merges a caller's class in as a `{ $$css: true, className }` descriptor
- * ALONGSIDE the style objects rather than in a prop of its own.
- */
-import type { ReactTestRendererJSON } from 'react-test-renderer';
-
-export type StyleEntry = Record<string, unknown>;
-
-export interface HostNode {
-  type: string;
-  props: Record<string, unknown>;
-  children: Array<HostNode | string> | null;
-}
-
-/**
- * Deep-flatten an RN `style` prop (nested arrays, `false`/`null` holes) into the
- * list of style objects that actually reached the node.
- */
-export function styleEntries(style: unknown, out: StyleEntry[] = []): StyleEntry[] {
-  if (!style || typeof style !== 'object') return out;
-  if (Array.isArray(style)) {
-    for (const entry of style) styleEntries(entry, out);
-    return out;
-  }
-  out.push(style as StyleEntry);
-  return out;
-}
-
-/** Every style key/value that landed on a node, later entries winning. */
-export function resolvedStyle(style: unknown): StyleEntry {
-  return Object.assign({}, ...styleEntries(style)) as StyleEntry;
-}
-
-/** The class tokens react-native-css accepted for a node, in arrival order. */
-export function classNamesOn(style: unknown): string[] {
-  return styleEntries(style)
-    .filter((entry) => entry.$$css === true && typeof entry.className === 'string')
-    .map((entry) => String(entry.className));
-}
-
-export function isHostNode(value: unknown): value is HostNode {
-  return (
-    typeof value === 'object' && value !== null && typeof (value as HostNode).type === 'string'
-  );
-}
-
-/** Walk the HOST tree (composites are absent from `toJSON()`) for a testID. */
-export function findHost(
-  node: ReactTestRendererJSON | ReactTestRendererJSON[] | unknown,
-  testID: string,
-): HostNode | null {
-  if (Array.isArray(node)) {
-    for (const child of node) {
-      const hit = findHost(child, testID);
-      if (hit) return hit;
-    }
-    return null;
-  }
-  if (!isHostNode(node)) return null;
-  if (node.props.testID === testID) return node;
-  return findHost(node.children, testID);
-}
-
-/**
- * Every host node in a rendered tree, in document order.
- *
- * The reason to walk `toJSON()` rather than `UNSAFE_root.findAll` is that the
- * latter yields COMPOSITE instances too, so a `memo(fn)` component contributes
- * two matches for one rendered element and every count is silently doubled —
- * which reads as "the component rendered the thing twice", not as an artefact
- * of the query.
- */
-export function hostNodes(tree: unknown, out: HostNode[] = []): HostNode[] {
-  if (Array.isArray(tree)) {
-    for (const child of tree) hostNodes(child, out);
-    return out;
-  }
-  if (!isHostNode(tree)) return out;
-  out.push(tree);
-  return hostNodes(tree.children, out);
-}
-
-/**
- * The host nodes a parent laid out. Callers assert the LENGTH themselves —
- * "exactly one" is the property, and a helper that returned only the first would
- * hide the second.
- */
-export function renderedChildren(tree: unknown, hostTestID: string): HostNode[] {
-  const host = findHost(tree, hostTestID);
-  if (host === null) throw new Error(`no host rendered for testID "${hostTestID}"`);
-  return (host.children ?? []).filter(isHostNode);
-}

package/src/__tests__/support/unread-hook-fixture.ts

@@ -1,33 +0,0 @@
-/**
- * A module that DELIBERATELY throws away one of the values a hook hands back, so
- * `hook-subscriptions-are-read.test.ts` can prove its detector fires. It carries
- * both halves of the control: `unreadFlag` is bound and never read, which the
- * detector must report, and `readFlag` is bound and read, which it must stay
- * quiet about — otherwise the cheapest way to green the gate would be deleting a
- * binding that is doing its job.
- *
- * Nothing imports this at runtime. bob's `exclude` keeps it out of `lib/`, and
- * `files: ["src", …]` does ship it inside the tarball's `src/` like the other
- * 137 test files there — but no entry point reaches it, so no bundler links it.
- * It is a plain `.ts` with no React import because the
- * detector reads source, never types: a call named `use…` bound to a name is all
- * the shape there is.
- *
- * The destructuring RENAMES, which is not decoration — it reproduces the shipped
- * shape (`const { state: pressed, onIn: onPressIn } = useInteractionState()`) and
- * it is what keeps the control honest. A hook declared in the same file as its
- * caller mentions its own property names in its return type and its return
- * object, and the detector counts every occurrence of a spelling as a possible
- * read, so an unrenamed fixture would be silently unreportable for a reason no
- * real call site has.
- */
-
-/** Stands in for a real subscription — a hook by name, with two return values. */
-function useFixtureInteractionState(): { first: boolean; second: boolean } {
-  return { first: false, second: false };
-}
-
-export function fixtureComponentBody(): boolean {
-  const { first: readFlag, second: unreadFlag } = useFixtureInteractionState();
-  return readFlag;
-}