@oxyhq/bloom 1.0.3 → 1.0.5

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,6 +111,12 @@ 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';
+}
+
 /** 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"]');
@@ -272,8 +278,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();
@@ -322,17 +330,22 @@ 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)) sub.closeSoon();
+      };
       const onKeyDown = (event: Event) => {
         const key = (event as KeyboardEvent).key;
         if (key !== 'ArrowRight' && key !== 'Enter' && key !== ' ') return;
@@ -340,12 +353,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]);
@@ -388,7 +401,19 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
   }
   MenuSubTrigger.displayName = `${prefix}SubTrigger`;
 
-  function MenuSubContent({ children, className, style }: MenuSubContentProps) {
+  function MenuSubContent({
+    children,
+    label = 'Submenu',
+    side = 'right',
+    align = 'start',
+    sideOffset = MENU_SUB_SIDE_OFFSET,
+    alignOffset,
+    minWidth,
+    maxWidth,
+    className,
+    style,
+    testID,
+  }: MenuSubContentProps) {
     const sub = useSubFlyout();
     const anchor = useFlyoutAnchor(sub.triggerRef, sub.open);
     const [node, setNode] = useState<View | null>(null);
@@ -397,8 +422,12 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
       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)) sub.closeSoon();
+      };
       const onKeyDown = (event: Event) => {
         const key = (event as KeyboardEvent).key;
         if (key !== 'ArrowLeft') return;
@@ -406,12 +435,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]);
@@ -445,19 +474,24 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
         open={sub.open}
         anchor={anchor}
         role="menu"
-        side="right"
+        label={label}
+        side={side}
         // The panel's first row lines up with the trigger row it flew out of.
-        align="start"
+        align={align}
         // Measured from the PARENT PANEL's edge, not the trigger row's — see
         // `useFlyoutAnchor`.
-        sideOffset={MENU_SUB_SIDE_OFFSET}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
         dismissible={false}
         modal={false}
         onDismiss={sub.closeAndRefocus}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
         // `w-64` — a sub panel is a FIXED 256px, so a column of flyouts does not
         // step in and out as their labels change length.
         className={cx(MENU_SUB_PANEL_CLASS, className)}
-        style={style}>
+        style={style}
+        testID={testID}>
         {/* `-mx-1 px-1 max-h-96 overflow-y-auto`: the negative inset bleeds the
             scroller to the panel edge and pads the content back, so the
             scrollbar is not inset by the panel's own `p-1`. It doubles as the

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

@@ -93,13 +93,23 @@ export function createInlineMenuSub(prefix: string): MenuSubParts {
   }
   MenuSubTrigger.displayName = `${prefix}SubTrigger`;
 
-  function MenuSubContent({ children, className, style }: MenuSubContentProps) {
+  function MenuSubContent({
+    children,
+    label,
+    className,
+    style,
+    testID,
+  }: MenuSubContentProps) {
     const sub = useMenuSub();
     if (!sub.open) return null;
     // Indented under its trigger, which is the whole visual statement an inline
     // disclosure makes.
     return (
-      <StyledView className={cx('pl-space-16', className)} style={style}>
+      <StyledView
+        accessibilityLabel={label}
+        className={cx('pl-space-16', className)}
+        style={style}
+        testID={testID}>
         {children}
       </StyledView>
     );

package/src/floating/shared.tsx

@@ -47,6 +47,7 @@ import {
   ROW_DISABLED_CLASS,
   ROW_ENABLED_CLASS,
   ROW_GUTTER_CLASS,
+  ROW_GUTTER_END_CLASS,
   ROW_HIGHLIGHT_CLASS,
   ROW_INSET_CLASS,
   ROW_LEADING_CLASS,
@@ -116,8 +117,8 @@ export interface MenuRowShellProps {
   destructive?: boolean;
   /** Indent to line up with the rows that carry an indicator. */
   inset?: boolean;
-  /** This row carries an out-of-flow indicator, so it takes the full gutter. */
-  gutter?: boolean;
+  /** This row carries an out-of-flow indicator at the named edge. */
+  gutter?: 'leading' | 'trailing';
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
   /** A plain-string child, rendered as the row's own label. */
@@ -146,7 +147,7 @@ export function MenuRowShell({
   disabled,
   destructive = false,
   inset = false,
-  gutter = false,
+  gutter,
   leading,
   trailing,
   title,
@@ -164,7 +165,13 @@ export function MenuRowShell({
   const rowClass = cx(
     ROW_CLASS,
     disabled ? ROW_DISABLED_CLASS : ROW_ENABLED_CLASS,
-    gutter ? ROW_GUTTER_CLASS : inset ? ROW_INSET_CLASS : false,
+    gutter === 'leading'
+      ? ROW_GUTTER_CLASS
+      : gutter === 'trailing'
+        ? ROW_GUTTER_END_CLASS
+        : inset
+          ? ROW_INSET_CLASS
+          : false,
     highlighted && ROW_HIGHLIGHT_CLASS,
     className,
   );

package/src/floating/types.ts

@@ -189,9 +189,8 @@ export interface OverlayTriggerProps {
   /** Accessible name. Ignored when the `asChild` child carries its own. */
   label?: string;
   /**
-   * Appended to whatever chrome the trigger draws of its own. A trigger that
-   * draws none (a dropdown's, a popover's) simply has nothing to append to, so
-   * the class lands alone.
+   * Bare triggers apply this to the measured anchor wrapper; families whose
+   * trigger owns chrome append it to that chrome instead.
    */
   className?: string;
   style?: StyleProp<ViewStyle>;
@@ -274,6 +273,13 @@ export interface MenuCheckboxRowProps
   extends Omit<MenuRowProps, 'onPress' | 'variant' | 'leading' | 'inset'> {
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
+  /**
+   * Mark rendered while checked. Omit for Bloom's default check; pass `null`
+   * to suppress it or a glyph to match a product-specific menu.
+   */
+  indicator?: React.ReactNode;
+  /** Where the mark sits. Defaults to the established leading gutter. */
+  indicatorPosition?: 'leading' | 'trailing';
 }
 
 export interface MenuRadioGroupProps {
@@ -285,6 +291,13 @@ export interface MenuRadioGroupProps {
 export interface MenuRadioRowProps
   extends Omit<MenuRowProps, 'onPress' | 'variant' | 'leading' | 'inset'> {
   value: string;
+  /**
+   * Mark rendered while this value is selected. Omit for Bloom's default dot;
+   * pass `null` to suppress it or a glyph to match a product-specific menu.
+   */
+  indicator?: React.ReactNode;
+  /** Where the mark sits. Defaults to the established leading gutter. */
+  indicatorPosition?: 'leading' | 'trailing';
 }
 
 export interface MenuLabelProps {
@@ -325,9 +338,22 @@ export interface MenuSubTriggerProps {
 
 export interface MenuSubContentProps {
   children?: React.ReactNode;
+  /** Accessible name of the flyout panel on web. */
+  label?: string;
+  /** Preferred lateral side on web. Defaults to `'right'` and may flip to fit. */
+  side?: Extract<FloatingSide, 'left' | 'right'>;
+  /** Vertical alignment against the sub trigger on web. Defaults to `'start'`. */
+  align?: FloatingAlign;
+  /** Gap from the parent panel edge on web. Defaults to Bloom's submenu seam. */
+  sideOffset?: number;
+  /** Vertical shift applied before viewport clamping on web. */
+  alignOffset?: number;
+  minWidth?: number;
+  maxWidth?: number;
   /** Appended to the sub panel's own classes — see {@link MenuRowProps.className}. */
   className?: string;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 /**

package/src/popover/Popover.tsx

@@ -36,6 +36,7 @@ export function PopoverTrigger({
   asChild,
   disabled,
   label,
+  className,
   style,
   testID,
 }: PopoverTriggerProps) {
@@ -45,6 +46,7 @@ export function PopoverTrigger({
     <TriggerSlot
       asChild={asChild}
       anchorRef={popover.anchorRef}
+      className={className}
       style={style}
       testID={testID}
       handle={{

package/src/popover/Popover.web.tsx

@@ -36,6 +36,7 @@ export function PopoverTrigger({
   asChild,
   disabled,
   label,
+  className,
   style,
   testID,
 }: PopoverTriggerProps) {
@@ -45,6 +46,7 @@ export function PopoverTrigger({
     <TriggerSlot
       asChild={asChild}
       anchorRef={popover.anchorRef}
+      className={className}
       style={style}
       testID={testID}
       handle={{