@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/menu/createMenu.ts

@@ -8,6 +8,7 @@ import { createEffect, onCleanup, type JSX, type Accessor } from "solid-js";
 import { createFocusWithin } from "../interactions/createFocusWithin";
 import { createLabel } from "../label/createLabel";
 import { createTypeSelect } from "../selection/createTypeSelect";
+import { selectItem } from "../selection/selectItem";
 import { filterDOMProps } from "../utils/filterDOMProps";
 import { mergeProps } from "../utils/mergeProps";
 import { createId } from "../ssr";
@@ -57,7 +58,7 @@ function findNextNonDisabledKey<T>(
   return nextKey;
 }
 
-export interface AriaMenuProps {
+export interface AriaMenuProps<T = unknown> {
   /** An ID for the menu. */
   id?: string;
   /** Whether the menu is disabled. */
@@ -77,9 +78,11 @@ export interface AriaMenuProps {
   /** Handler called when the focus state changes. */
   onFocusChange?: (isFocused: boolean) => void;
   /** Handler called when an item is activated (pressed). */
-  onAction?: (key: Key) => void;
+  onAction?: (key: Key, value: T) => void;
   /** Handler called when the menu should close. */
   onClose?: () => void;
+  /** Whether the menu should close when an item is selected. */
+  shouldCloseOnSelect?: boolean;
   /** Whether focus should automatically wrap around. */
   shouldFocusWrap?: boolean;
   /** Whether to auto-focus the first item when the menu opens. */
@@ -100,9 +103,12 @@ const menuData = new WeakMap<object, MenuData>();
 
 interface MenuData {
   id: string;
-  onAction?: (key: Key) => void;
+  // Type-erased like upstream menu/utils.ts MenuData (value: any): the WeakMap
+  // is keyed by an untyped state, so the item value flows through as unknown.
+  onAction?: (key: Key, value: unknown) => void;
   onClose?: () => void;
   isDisabled?: boolean;
+  shouldCloseOnSelect?: boolean;
 }
 
 export function getMenuData(state: MenuState): MenuData | undefined {
@@ -114,7 +120,7 @@ export function getMenuData(state: MenuState): MenuData | undefined {
  * A menu displays a list of actions or options that a user can choose.
  */
 export function createMenu<T>(
-  props: MaybeAccessor<AriaMenuProps>,
+  props: MaybeAccessor<AriaMenuProps<T>>,
   state: MenuState<T>,
   ref?: Accessor<HTMLElement | null>,
 ): MenuAria {
@@ -139,9 +145,10 @@ export function createMenu<T>(
     const p = getProps();
     menuData.set(state, {
       id,
-      onAction: p.onAction,
+      onAction: p.onAction as MenuData["onAction"],
       onClose: p.onClose,
       isDisabled: p.isDisabled,
+      shouldCloseOnSelect: p.shouldCloseOnSelect,
     });
   };
 
@@ -203,29 +210,39 @@ export function createMenu<T>(
     const p = getProps();
     const wrap = p.shouldFocusWrap ?? false;
 
-    // Use state.isDisabled which properly checks the disabledKeys accessor
-    const isDisabled = (key: Key) => state.isDisabled(key);
+    // Disabled keys only block keyboard navigation under disabledBehavior "all"
+    // (the default); under "selection" they stay focusable while their selection
+    // remains blocked. Mirrors ListKeyboardDelegate.isDisabled in React Aria,
+    // which gates the navigation skip on the resolved disabledBehavior.
+    const isDisabled = (key: Key) => state.isDisabled(key) && state.disabledBehavior() === "all";
 
     switch (e.key) {
       case "ArrowDown": {
-        e.preventDefault();
+        // Only consume the key once a target exists, mirroring
+        // useSelectableCollection (ArrowDown, 211-225): preventDefault is called
+        // inside `if (nextKey != null)`, so at the last item without wrap the
+        // arrow bubbles instead of being swallowed.
         const currentKey = state.focusedKey();
         const nextKey = findNextNonDisabledKey(collection, currentKey, "next", isDisabled, wrap);
         if (nextKey != null) {
+          e.preventDefault();
           state.setFocusedKey(nextKey);
         }
         break;
       }
       case "ArrowUp": {
-        e.preventDefault();
         const currentKey = state.focusedKey();
         const prevKey = findNextNonDisabledKey(collection, currentKey, "prev", isDisabled, wrap);
         if (prevKey != null) {
+          e.preventDefault();
           state.setFocusedKey(prevKey);
         }
         break;
       }
       case "Home": {
+        // Mirror useSelectableCollection (Home, 283-285): with nothing focused,
+        // Shift+Home has no anchor to extend from, so leave the event alone.
+        if (state.focusedKey() == null && e.shiftKey) break;
         e.preventDefault();
         // Find first non-disabled key
         let firstKey = collection.getFirstKey();
@@ -238,6 +255,8 @@ export function createMenu<T>(
         break;
       }
       case "End": {
+        // Mirror useSelectableCollection (End, 300-302): same anchor guard as Home.
+        if (state.focusedKey() == null && e.shiftKey) break;
         e.preventDefault();
         // Find last non-disabled key
         let lastKey = collection.getLastKey();
@@ -251,13 +270,43 @@ export function createMenu<T>(
       }
       case " ":
       case "Enter": {
+        if (e.target !== e.currentTarget) break;
         e.preventDefault();
         const focusedKey = state.focusedKey();
-        // Don't activate disabled items
+        // Activation is gated on the navigation-disabled check, not the raw
+        // one: under disabledBehavior "selection" a focusable disabled item
+        // still fires onAction (and closes), mirroring useSelectableItem's
+        // allowsActions (manager.isDisabled is gated on "all"). Selection stays
+        // blocked independently — state.select self-guards on the raw disabled
+        // check (SelectionManager.canSelectItem).
         if (focusedKey != null && !isDisabled(focusedKey)) {
-          state.select(focusedKey, e, collection);
-          p.onAction?.(focusedKey);
-          p.onClose?.();
+          // Route through the aria-layer onSelect so the platform-aware modifier
+          // resolution (isCtrlKeyPressed / non-contiguous modifier) and the
+          // shift-extend path are applied. Keyboard activation carries
+          // pointerType "keyboard".
+          selectItem(
+            state,
+            focusedKey,
+            {
+              pointerType: "keyboard",
+              shiftKey: e.shiftKey,
+              ctrlKey: e.ctrlKey,
+              metaKey: e.metaKey,
+              altKey: e.altKey,
+            },
+            collection,
+          );
+          // Pass the activated item's value as the second arg, mirroring
+          // useMenuItem performAction: onAction(key, item?.value).
+          p.onAction?.(focusedKey, collection.getItem(focusedKey)?.value as T);
+          const item = collection.getItem(focusedKey);
+          const isLink = !!item?.props?.href;
+          const shouldClose =
+            p.shouldCloseOnSelect ??
+            (e.key === "Enter" || state.selectionMode() === "none" || isLink);
+          if (shouldClose) {
+            p.onClose?.();
+          }
         }
         break;
       }
@@ -267,8 +316,14 @@ export function createMenu<T>(
         break;
       }
       case "PageDown": {
-        e.preventDefault();
+        // Mirror useSelectableCollection (PageDown, 324-332): only consume the
+        // key when an item is focused. A non-empty collection always yields a
+        // page target via getKeyPageBelow, so a focused key means focus moves
+        // and the event is swallowed; with nothing focused, leave it alone to
+        // bubble (e.g. to scroll an enclosing region).
         const currentKey = state.focusedKey();
+        if (currentKey == null) break;
+        e.preventDefault();
         const el = ref?.();
 
         if (el) {
@@ -333,8 +388,14 @@ export function createMenu<T>(
         break;
       }
       case "PageUp": {
-        e.preventDefault();
+        // Mirror useSelectableCollection (PageUp, 333-341): only consume the key
+        // when an item is focused. A non-empty collection always yields a page
+        // target via getKeyPageAbove, so a focused key means focus moves and the
+        // event is swallowed; with nothing focused, leave it alone to bubble
+        // (e.g. to scroll an enclosing region).
         const currentKey = state.focusedKey();
+        if (currentKey == null) break;
+        e.preventDefault();
         const el = ref?.();
 
         if (el) {
@@ -414,7 +475,23 @@ export function createMenu<T>(
         fieldProps as Record<string, unknown>,
         {
           role: "menu",
-          tabIndex: p.isDisabled ? undefined : 0,
+          // Roving tabindex: the menu container is tab-reachable (0) only while no
+          // item holds focus; once `focusedKey` is set the container drops to -1 so
+          // Tab/Shift+Tab traverse past it and real focus stays on the item. This
+          // mirrors upstream `useMenu`, which spreads `useSelectableList`'s
+          // `listProps.tabIndex` (`manager.focusedKey == null ? 0 : -1`, non-virtual
+          // focus) onto the menu.
+          //
+          // This MUST be a getter, not an eagerly-evaluated value. Consumers
+          // (solidaria-components `Menu.tsx`) destructure `menuProps` once and
+          // spread it through `mergeProps`; a plain `tabIndex: <value>` would be
+          // computed at that first read (while `focusedKey` is still null → 0) and
+          // frozen. As a getter it survives `mergeProps` (which preserves getters),
+          // so the consumer's reactive element-spread re-reads `state.focusedKey()`
+          // and the container tabindex tracks focus.
+          get tabIndex() {
+            return getProps().isDisabled ? undefined : state.focusedKey() == null ? 0 : -1;
+          },
           "aria-disabled": p.isDisabled || undefined,
           onKeyDown,
         } as Record<string, unknown>,

package/src/menu/createMenuItem.ts

@@ -4,21 +4,33 @@
  */
 
 import { type JSX, type Accessor } from "solid-js";
-import { createPress } from "../interactions/createPress";
+import { createPress, type PressEvent } from "../interactions/createPress";
 import { createHover } from "../interactions/createHover";
 import { createFocusRing } from "../interactions/createFocusRing";
+import { createSelectableItem } from "../selection/createSelectableItem";
 import { mergeProps } from "../utils/mergeProps";
 import { access, type MaybeAccessor } from "../utils/reactivity";
+import { getEventTarget } from "../utils/dom";
+import { isVirtualClick } from "../utils/events";
+import { createSlotId } from "../ssr";
 import { getMenuData } from "./createMenu";
-import type { MenuState, Key, SelectionMode } from "@proyecto-viviana/solid-stately";
+import type { MenuState, Key, Selection, SelectionMode } from "@proyecto-viviana/solid-stately";
 
 export interface AriaMenuItemProps {
   /** The unique key for the menu item. */
   key: Key;
+  /** Optional DOM id for the menu item. Defaults to the key. */
+  id?: string;
   /** Whether the menu item is disabled. */
   isDisabled?: boolean;
   /** An accessible label for the menu item. */
   "aria-label"?: string;
+  /** Element controlled by this menu item, for submenu triggers. */
+  "aria-controls"?: string;
+  /** Whether this menu item opens a submenu or subdialog. */
+  "aria-haspopup"?: string | boolean;
+  /** Whether the submenu or subdialog is expanded. */
+  "aria-expanded"?: boolean | "true" | "false";
   /** Handler called when the menu item is selected. */
   onAction?: () => void;
   /** Whether to close the menu when this item is selected. */
@@ -62,60 +74,246 @@ export interface MenuItemAria {
 export function createMenuItem<T>(
   props: MaybeAccessor<AriaMenuItemProps>,
   state: MenuState<T>,
-  _ref?: () => HTMLElement | null,
+  ref?: () => HTMLElement | null,
 ): MenuItemAria {
   const getProps = () => access(props);
 
   // Get shared data from menu
   const getData = () => getMenuData(state);
 
-  // Computed states
+  // Computed states. `state.isDisabled` is SelectionManager.isDisabled, which
+  // already respects disabledBehavior="selection"; these items stay actionable
+  // while SelectionManager.canSelectItem keeps selection blocked.
   const isDisabled: Accessor<boolean> = () => {
     return Boolean(
       getData()?.isDisabled || getProps().isDisabled || state.isDisabled(getProps().key),
     );
   };
 
-  const isFocused: Accessor<boolean> = () => {
-    return state.focusedKey() === getProps().key;
+  const selectionMode: Accessor<SelectionMode> = () => {
+    return state.selectionMode();
   };
 
+  // Whether this is a link item
+  const isLink = () => !!getProps().href;
+  const isTrigger = () => !!getProps()["aria-haspopup"];
+
+  const selectableItem = createSelectableItem(
+    () => {
+      const p = getProps();
+      return {
+        key: p.key,
+        id: p.id ?? String(p.key),
+        isDisabled: isDisabled(),
+        isLink: isLink(),
+        href: p.href,
+        shouldSelectOnPressUp: true,
+        allowsDifferentPressOrigin: true,
+        linkBehavior: "none",
+      };
+    },
+    state,
+    () => ref?.() ?? null,
+  );
+
+  const isFocused: Accessor<boolean> = () => selectableItem.isFocused();
+
   const isSelected: Accessor<boolean> = () => {
-    return selectionMode() !== "none" && state.isSelected(getProps().key);
+    return !isTrigger() && selectableItem.isSelected();
   };
 
-  const selectionMode: Accessor<SelectionMode> = () => {
-    return state.selectionMode();
+  type MenuInteraction = {
+    pointerType: PressEvent["pointerType"];
+    key?: string;
   };
 
-  // Whether this is a link item
-  const isLink = () => !!getProps().href;
+  let interaction: MenuInteraction | null = null;
+  let isMenuPressActive = false;
+  let isDispatchingKeyboardClick = false;
+  let isDispatchingMenuSyntheticClick = false;
+  let selectionEventBeforeMenuPressUp: Selection | null = null;
+  let hasSelectionEventBeforeMenuPressUp = false;
+  let pendingSyntheticClickSelectionEvent: Selection | null = null;
+  let suppressNextKeyboardClick = false;
+
+  const getShouldClose = (): boolean => {
+    const p = getProps();
+    const explicitClose = p.closeOnSelect ?? getData()?.shouldCloseOnSelect;
+    if (explicitClose !== undefined) {
+      return explicitClose;
+    }
 
-  // Handle press
+    if (interaction?.pointerType === "keyboard") {
+      return interaction.key === "Enter" || selectionMode() === "none" || isLink();
+    }
+
+    return selectionMode() !== "multiple" || isLink();
+  };
+
+  const performMenuAction = (event: MouseEvent) => {
+    if (isDisabled()) {
+      event.preventDefault();
+      return;
+    }
+
+    if (suppressNextKeyboardClick && interaction == null) {
+      suppressNextKeyboardClick = false;
+      return;
+    }
+
+    const p = getProps();
+    const key = p.key;
+    const data = getData();
+
+    // Submenu triggers open their submenu via the local item action, but do not
+    // fire the parent menu onAction or close the menu.
+    if (isTrigger()) {
+      p.onAction?.();
+      interaction = null;
+      return;
+    }
+
+    // Call item-specific onAction.
+    p.onAction?.();
+
+    // Call menu-level onAction with the activated item's value, mirroring
+    // useMenuItem performAction: onAction(key, item?.value).
+    const item = state.collection().getItem(key);
+    data?.onAction?.(key, item?.value);
+
+    if (getShouldClose()) {
+      data?.onClose?.();
+    }
+
+    interaction = null;
+  };
+
+  // Menu-specific press handling is separate from selectable-item selection,
+  // matching upstream useMenuItem: useSelectableItem owns selection/focus
+  // timing; the menu layer owns pressed state, different-origin release, action,
+  // links, and close behavior.
   const { pressProps, isPressed } = createPress({
     get isDisabled() {
       return isDisabled();
     },
-    onPress() {
-      const p = getProps();
-      const key = p.key;
-      const data = getData();
+    onPressChange(isPressed) {
+      isMenuPressActive = isPressed;
+    },
+    onPressUp(e) {
+      if (e.pointerType !== "keyboard" && !isDispatchingKeyboardClick) {
+        interaction = { pointerType: e.pointerType };
+      }
 
-      state.select(key, undefined, state.collection());
+      // Native menus allow pressing the trigger, dragging to an item, and
+      // releasing to activate it. Upstream useMenuItem synthesizes a click in
+      // this different-origin mouse case.
+      if (e.pointerType === "mouse" && !isMenuPressActive && e.target instanceof HTMLElement) {
+        const selectionEventAfterPressUp = state.selectionManager.lastSelectionEvent;
+        pendingSyntheticClickSelectionEvent =
+          hasSelectionEventBeforeMenuPressUp &&
+          selectionEventAfterPressUp != null &&
+          selectionEventAfterPressUp !== selectionEventBeforeMenuPressUp
+            ? selectionEventAfterPressUp
+            : null;
 
-      // Call item-specific onAction
-      p.onAction?.();
+        isDispatchingMenuSyntheticClick = true;
+        try {
+          e.target.click();
+        } finally {
+          isDispatchingMenuSyntheticClick = false;
+          hasSelectionEventBeforeMenuPressUp = false;
+          selectionEventBeforeMenuPressUp = null;
+          pendingSyntheticClickSelectionEvent = null;
+        }
+      }
+    },
+  });
+
+  const captureSelectionEventBeforeMenuPressUp = () => {
+    selectionEventBeforeMenuPressUp = state.selectionManager.lastSelectionEvent;
+    hasSelectionEventBeforeMenuPressUp = true;
+  };
+
+  const withMenuPressUpSelectionSnapshot = <EventType extends Event>(handler: unknown) => {
+    if (typeof handler !== "function") {
+      return handler;
+    }
+
+    return (event: EventType) => {
+      captureSelectionEventBeforeMenuPressUp();
+      (handler as (event: EventType) => void)(event);
+    };
+  };
+
+  const selectableItemProps = () => {
+    const props = selectableItem.itemProps as Record<string, unknown>;
+    const onClick = props.onClick;
 
-      // Call menu-level onAction
-      data?.onAction?.(key);
+    return {
+      ...props,
+      onPointerUp: withMenuPressUpSelectionSnapshot<PointerEvent>(props.onPointerUp),
+      onMouseUp: withMenuPressUpSelectionSnapshot<MouseEvent>(props.onMouseUp),
+      onClick:
+        typeof onClick === "function"
+          ? (event: MouseEvent) => {
+              // The menu layer's upstream-compatible target.click() should activate
+              // the menu item, not feed back into selectable-item virtual selection.
+              if (isDispatchingMenuSyntheticClick && isVirtualClick(event)) {
+                if (pendingSyntheticClickSelectionEvent != null) {
+                  state.selectionManager.emitDuplicateSelectionEvent(
+                    pendingSyntheticClickSelectionEvent,
+                  );
+                  pendingSyntheticClickSelectionEvent = null;
+                }
+                return;
+              }
 
-      // Close menu if closeOnSelect is not explicitly false
-      // For link items, default to closing the menu
-      if (p.closeOnSelect !== false) {
-        data?.onClose?.();
+              (onClick as (event: MouseEvent) => void)(event);
+            }
+          : onClick,
+    };
+  };
+
+  const menuPressProps = () => {
+    const {
+      onKeyDown: _onKeyDown,
+      onKeyUp: _onKeyUp,
+      ...props
+    } = pressProps as Record<string, unknown>;
+    return props;
+  };
+
+  const keyboardProps = {
+    onKeyDown: (event: KeyboardEvent) => {
+      if (isDisabled() || event.repeat) {
+        return;
+      }
+
+      if (event.key !== " " && event.key !== "Enter") {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      interaction = { pointerType: "keyboard", key: event.key };
+
+      const target = getEventTarget<HTMLElement>(event) ?? ref?.();
+      if (target instanceof HTMLElement) {
+        suppressNextKeyboardClick = true;
+        isDispatchingKeyboardClick = true;
+        try {
+          target.click();
+        } finally {
+          isDispatchingKeyboardClick = false;
+        }
       }
     },
-  });
+    onKeyUp: (event: KeyboardEvent) => {
+      if (event.key === " " || event.key === "Enter") {
+        suppressNextKeyboardClick = false;
+      }
+    },
+  };
 
   // Handle hover
   const { hoverProps } = createHover({
@@ -130,10 +328,15 @@ export function createMenuItem<T>(
   // Handle focus ring
   const { isFocusVisible, focusProps } = createFocusRing();
 
-  // Generate unique IDs for label and description
+  // Generate unique IDs for label and description. The description + keyboard
+  // ids use `createSlotId` (a 1:1 port of upstream `useSlotId`): each resolves
+  // to `undefined` unless an element carrying that id is actually rendered, so
+  // an item with no description/shortcut leaves `aria-describedby` unset instead
+  // of pointing at a non-existent element. Mirrors useMenuItem's
+  // `[props['aria-describedby'], descriptionId, keyboardId].filter(Boolean)`.
   const labelId = `${getProps().key}-label`;
-  const descriptionId = `${getProps().key}-desc`;
-  const keyboardId = `${getProps().key}-kbd`;
+  const descriptionId = createSlotId();
+  const keyboardId = createSlotId();
 
   return {
     get menuItemProps() {
@@ -142,21 +345,25 @@ export function createMenuItem<T>(
       const ariaLabel = p["aria-label"];
       const mode = selectionMode();
       const selected = isSelected();
+      const trigger = isTrigger();
 
       const baseProps: Record<string, unknown> = {
-        role:
-          mode === "single"
+        role: trigger
+          ? "menuitem"
+          : mode === "single"
             ? "menuitemradio"
             : mode === "multiple"
               ? "menuitemcheckbox"
               : "menuitem",
-        id: String(key),
+        id: p.id ?? String(key),
         "aria-disabled": isDisabled() || undefined,
-        "aria-checked": mode !== "none" ? selected : undefined,
+        "aria-checked": mode !== "none" && !trigger ? selected : undefined,
         "aria-label": ariaLabel,
         "aria-labelledby": !ariaLabel ? labelId : undefined,
-        "aria-describedby": descriptionId,
-        tabIndex: isFocused() ? 0 : -1,
+        "aria-describedby": [descriptionId(), keyboardId()].filter(Boolean).join(" ") || undefined,
+        "aria-controls": p["aria-controls"],
+        "aria-haspopup": p["aria-haspopup"],
+        "aria-expanded": p["aria-expanded"],
         "data-selected": selected || undefined,
         "data-focused": isFocused() || undefined,
         "data-focus-visible": isFocusVisible() || undefined,
@@ -175,21 +382,26 @@ export function createMenuItem<T>(
       }
 
       return mergeProps(
-        pressProps as Record<string, unknown>,
+        selectableItemProps(),
+        menuPressProps(),
         hoverProps as Record<string, unknown>,
         focusProps as Record<string, unknown>,
+        keyboardProps,
+        { onClick: performMenuAction },
         baseProps,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     labelProps: {
       id: labelId,
     },
-    descriptionProps: {
-      id: descriptionId,
+    // Getters so the slot id stays reactive: `createSlotId` may clear the id
+    // (to `undefined`) after mount if no element registered it, and consumers
+    // reading these props re-track that change.
+    get descriptionProps() {
+      return { id: descriptionId() };
     },
-    keyboardShortcutProps: {
-      id: keyboardId,
-      "aria-hidden": true,
+    get keyboardShortcutProps() {
+      return { id: keyboardId(), "aria-hidden": true };
     },
     isFocused,
     isFocusVisible: () => isFocused() && isFocusVisible(),