@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/menu/createMenu.ts

@@ -4,16 +4,17 @@
  * Based on @react-aria/menu useMenu.
  */
 
-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 { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { isDevEnv } from '../utils/env';
-import type { MenuState, Key, Collection } from '@proyecto-viviana/solid-stately';
+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";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { isDevEnv } from "../utils/env";
+import type { MenuState, Key, Collection } from "@proyecto-viviana/solid-stately";
 
 /**
  * Default number of items to skip for page up/down when DOM measurement is not available.
@@ -26,17 +27,17 @@ const DEFAULT_PAGE_SIZE = 10;
 function findNextNonDisabledKey<T>(
   collection: Collection<T>,
   currentKey: Key | null,
-  direction: 'next' | 'prev',
+  direction: "next" | "prev",
   isDisabled: (key: Key) => boolean,
-  wrap: boolean
+  wrap: boolean,
 ): Key | null {
-  const getNextKey = direction === 'next'
-    ? (key: Key) => collection.getKeyAfter(key)
-    : (key: Key) => collection.getKeyBefore(key);
+  const getNextKey =
+    direction === "next"
+      ? (key: Key) => collection.getKeyAfter(key)
+      : (key: Key) => collection.getKeyBefore(key);
 
-  const getFirstKey = direction === 'next'
-    ? () => collection.getFirstKey()
-    : () => collection.getLastKey();
+  const getFirstKey =
+    direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey();
 
   let nextKey = currentKey != null ? getNextKey(currentKey) : getFirstKey();
 
@@ -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. */
@@ -65,11 +66,11 @@ export interface AriaMenuProps {
   /** The label for the menu. */
   label?: JSX.Element;
   /** An accessible label for the menu when no visible label is provided. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the menu. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the menu. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Handler called when focus moves into the menu. */
   onFocus?: (e: FocusEvent) => void;
   /** Handler called when focus moves out of the menu. */
@@ -77,13 +78,15 @@ 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. */
-  autoFocus?: boolean | 'first' | 'last';
+  autoFocus?: boolean | "first" | "last";
   /** Whether type-to-select is disabled. @default false */
   disallowTypeAhead?: boolean;
 }
@@ -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,9 +120,9 @@ 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>
+  ref?: Accessor<HTMLElement | null>,
 ): MenuAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -124,23 +130,25 @@ export function createMenu<T>(
   // Development-time warning for missing accessibility labels
   if (isDevEnv()) {
     const p = getProps();
-    if (!p.label && !p['aria-label'] && !p['aria-labelledby']) {
+    if (!p.label && !p["aria-label"] && !p["aria-labelledby"]) {
       console.warn(
-        '[solidaria] A Menu requires an aria-label or aria-labelledby attribute for accessibility.'
+        "[solidaria] A Menu requires an aria-label or aria-labelledby attribute for accessibility.",
       );
     }
   }
 
   // Filter DOM props
-  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
+  const domProps = () =>
+    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });
 
   const updateSharedData = () => {
     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,
     });
   };
 
@@ -174,13 +182,13 @@ export function createMenu<T>(
     get label() {
       return getProps().label;
     },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
+    get "aria-label"() {
+      return getProps()["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
     },
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
   // Type-to-select
@@ -202,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();
+      case "ArrowDown": {
+        // 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);
+        const nextKey = findNextNonDisabledKey(collection, currentKey, "next", isDisabled, wrap);
         if (nextKey != null) {
+          e.preventDefault();
           state.setFocusedKey(nextKey);
         }
         break;
       }
-      case 'ArrowUp': {
-        e.preventDefault();
+      case "ArrowUp": {
         const currentKey = state.focusedKey();
-        const prevKey = findNextNonDisabledKey(collection, currentKey, 'prev', isDisabled, wrap);
+        const prevKey = findNextNonDisabledKey(collection, currentKey, "prev", isDisabled, wrap);
         if (prevKey != null) {
+          e.preventDefault();
           state.setFocusedKey(prevKey);
         }
         break;
       }
-      case 'Home': {
+      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();
@@ -236,7 +254,9 @@ export function createMenu<T>(
         }
         break;
       }
-      case 'End': {
+      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();
@@ -248,25 +268,62 @@ export function createMenu<T>(
         }
         break;
       }
-      case ' ':
-      case 'Enter': {
+      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)) {
-          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;
       }
-      case 'Escape': {
+      case "Escape": {
         e.preventDefault();
         p.onClose?.();
         break;
       }
-      case 'PageDown': {
-        e.preventDefault();
+      case "PageDown": {
+        // 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) {
@@ -288,7 +345,13 @@ export function createMenu<T>(
               targetKey = nextKey;
             } else {
               // Skip over disabled items without counting them
-              const afterDisabled = findNextNonDisabledKey(collection, nextKey, 'next', isDisabled, false);
+              const afterDisabled = findNextNonDisabledKey(
+                collection,
+                nextKey,
+                "next",
+                isDisabled,
+                false,
+              );
               if (afterDisabled != null) {
                 targetKey = afterDisabled;
               } else {
@@ -306,7 +369,13 @@ export function createMenu<T>(
           let targetKey = currentKey;
 
           while (count > 0 && targetKey != null) {
-            const nextKey = findNextNonDisabledKey(collection, targetKey, 'next', isDisabled, false);
+            const nextKey = findNextNonDisabledKey(
+              collection,
+              targetKey,
+              "next",
+              isDisabled,
+              false,
+            );
             if (nextKey == null) break;
             targetKey = nextKey;
             count--;
@@ -318,9 +387,15 @@ export function createMenu<T>(
         }
         break;
       }
-      case 'PageUp': {
-        e.preventDefault();
+      case "PageUp": {
+        // 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) {
@@ -342,7 +417,13 @@ export function createMenu<T>(
               targetKey = prevKey;
             } else {
               // Skip over disabled items without counting them
-              const beforeDisabled = findNextNonDisabledKey(collection, prevKey, 'prev', isDisabled, false);
+              const beforeDisabled = findNextNonDisabledKey(
+                collection,
+                prevKey,
+                "prev",
+                isDisabled,
+                false,
+              );
               if (beforeDisabled != null) {
                 targetKey = beforeDisabled;
               } else {
@@ -360,7 +441,13 @@ export function createMenu<T>(
           let targetKey = currentKey;
 
           while (count > 0 && targetKey != null) {
-            const prevKey = findNextNonDisabledKey(collection, targetKey, 'prev', isDisabled, false);
+            const prevKey = findNextNonDisabledKey(
+              collection,
+              targetKey,
+              "prev",
+              isDisabled,
+              false,
+            );
             if (prevKey == null) break;
             targetKey = prevKey;
             count--;
@@ -387,16 +474,35 @@ export function createMenu<T>(
         focusWithinProps as Record<string, unknown>,
         fieldProps as Record<string, unknown>,
         {
-          role: 'menu',
-          tabIndex: p.isDisabled ? undefined : 0,
-          'aria-disabled': p.isDisabled || undefined,
+          role: "menu",
+          // 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>
+        } as Record<string, unknown>,
       );
 
       // Add type-select props if enabled
       if (!p.disallowTypeAhead) {
-        return mergeProps(baseProps, typeSelectProps as Record<string, unknown>) as JSX.HTMLAttributes<HTMLElement>;
+        return mergeProps(
+          baseProps,
+          typeSelectProps as Record<string, unknown>,
+        ) as JSX.HTMLAttributes<HTMLElement>;
       }
 
       return baseProps as JSX.HTMLAttributes<HTMLElement>;