@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/menu/createMenuItem.ts

@@ -3,26 +3,46 @@
  * Based on @react-aria/menu useMenuItem.
  */
 
-import { type JSX, type Accessor } from 'solid-js';
-import { createPress } from '../interactions/createPress';
-import { createHover } from '../interactions/createHover';
-import { createFocusRing } from '../interactions/createFocusRing';
-import { mergeProps } from '../utils/mergeProps';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { getMenuData } from './createMenu';
-import type { MenuState, Key } from '@proyecto-viviana/solid-stately';
+import { type JSX, type Accessor } from "solid-js";
+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, 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;
+  "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. */
   closeOnSelect?: boolean;
+  /** A URL to link to. Turns the menu item into a link. */
+  href?: string;
+  /** The target window for the link. */
+  target?: string;
+  /** The relationship between the linked resource and the current page. */
+  rel?: string;
+  /** Causes the browser to download the linked URL. A string may be provided to suggest a file name. */
+  download?: boolean | string;
 }
 
 export interface MenuItemAria {
@@ -42,6 +62,10 @@ export interface MenuItemAria {
   isPressed: Accessor<boolean>;
   /** Whether the menu item is disabled. */
   isDisabled: Accessor<boolean>;
+  /** Whether the menu item is selected. */
+  isSelected: Accessor<boolean>;
+  /** The parent menu selection mode. */
+  selectionMode: Accessor<SelectionMode>;
 }
 
 /**
@@ -50,45 +74,247 @@ 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));
+    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();
   };
 
-  // Handle press
+  // 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 !isTrigger() && selectableItem.isSelected();
+  };
+
+  type MenuInteraction = {
+    pointerType: PressEvent["pointerType"];
+    key?: string;
+  };
+
+  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;
+    }
+
+    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();
-
-      // Call item-specific onAction
-      p.onAction?.();
+    onPressChange(isPressed) {
+      isMenuPressActive = isPressed;
+    },
+    onPressUp(e) {
+      if (e.pointerType !== "keyboard" && !isDispatchingKeyboardClick) {
+        interaction = { pointerType: e.pointerType };
+      }
 
-      // Call menu-level onAction
-      data?.onAction?.(key);
+      // 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;
 
-      // Close menu if closeOnSelect is not explicitly false
-      if (p.closeOnSelect !== false) {
-        data?.onClose?.();
+        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;
+
+    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;
+              }
+
+              (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({
     get isDisabled() {
@@ -102,48 +328,86 @@ 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() {
-      const key = getProps().key;
-      const ariaLabel = getProps()['aria-label'];
+      const p = getProps();
+      const key = p.key;
+      const ariaLabel = p["aria-label"];
+      const mode = selectionMode();
+      const selected = isSelected();
+      const trigger = isTrigger();
+
+      const baseProps: Record<string, unknown> = {
+        role: trigger
+          ? "menuitem"
+          : mode === "single"
+            ? "menuitemradio"
+            : mode === "multiple"
+              ? "menuitemcheckbox"
+              : "menuitem",
+        id: p.id ?? String(key),
+        "aria-disabled": isDisabled() || undefined,
+        "aria-checked": mode !== "none" && !trigger ? selected : undefined,
+        "aria-label": ariaLabel,
+        "aria-labelledby": !ariaLabel ? labelId : undefined,
+        "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,
+        "data-pressed": isPressed() || undefined,
+        "data-disabled": isDisabled() || undefined,
+      };
+
+      // Add link props when href is present
+      if (isLink()) {
+        baseProps.href = isDisabled() ? undefined : p.href;
+        if (p.target) baseProps.target = p.target;
+        if (p.rel) baseProps.rel = p.rel;
+        if (p.download != null && p.download !== false) {
+          baseProps.download = p.download === true ? "" : p.download;
+        }
+      }
 
       return mergeProps(
-        pressProps as Record<string, unknown>,
+        selectableItemProps(),
+        menuPressProps(),
         hoverProps as Record<string, unknown>,
         focusProps as Record<string, unknown>,
-        {
-          role: 'menuitem',
-          id: String(key),
-          'aria-disabled': isDisabled() || undefined,
-          'aria-label': ariaLabel,
-          'aria-labelledby': !ariaLabel ? labelId : undefined,
-          'aria-describedby': descriptionId,
-          tabIndex: isFocused() ? 0 : -1,
-          'data-focused': isFocused() || undefined,
-          'data-focus-visible': isFocusVisible() || undefined,
-          'data-pressed': isPressed() || undefined,
-          'data-disabled': isDisabled() || undefined,
-        } 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(),
     isPressed,
     isDisabled,
+    isSelected,
+    selectionMode,
   };
 }

package/src/menu/createMenuTrigger.ts

@@ -3,14 +3,14 @@
  * Based on @react-aria/menu useMenuTrigger.
  */
 
-import { type JSX } from 'solid-js';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { OverlayTriggerState } from '@proyecto-viviana/solid-stately';
+import { type JSX } from "solid-js";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { OverlayTriggerState } from "@proyecto-viviana/solid-stately";
 
 export interface AriaMenuTriggerProps {
   /** The type of menu that the menu trigger opens. */
-  type?: 'menu' | 'listbox';
+  type?: "menu" | "listbox";
   /** Whether the menu trigger is disabled. */
   isDisabled?: boolean;
   /** An ID for the menu. */
@@ -32,7 +32,7 @@ export interface MenuTriggerAria {
  */
 export function createMenuTrigger(
   props: MaybeAccessor<AriaMenuTriggerProps>,
-  state: OverlayTriggerState
+  state: OverlayTriggerState,
 ): MenuTriggerAria {
   const getProps = () => access(props);
   const menuId = createId(getProps().id);
@@ -47,16 +47,16 @@ export function createMenuTrigger(
     if (getProps().isDisabled) return;
 
     switch (e.key) {
-      case 'Enter':
-      case ' ':
-      case 'ArrowDown': {
+      case "Enter":
+      case " ":
+      case "ArrowDown": {
         e.preventDefault();
         if (!state.isOpen()) {
           state.open();
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
         if (!state.isOpen()) {
           state.open();
@@ -69,14 +69,14 @@ export function createMenuTrigger(
   return {
     get menuTriggerProps() {
       const p = getProps();
-      const type = p.type ?? 'menu';
+      const type = p.type ?? "menu";
       const isOpen = state.isOpen();
 
       return {
-        'aria-haspopup': type,
-        'aria-expanded': isOpen,
-        'aria-controls': isOpen ? menuId : undefined,
-        'aria-disabled': p.isDisabled || undefined,
+        "aria-haspopup": type,
+        "aria-expanded": isOpen,
+        "aria-controls": isOpen ? menuId : undefined,
+        "aria-disabled": p.isDisabled || undefined,
         onPress,
         onKeyDown,
       };

package/src/menu/index.ts

@@ -1,18 +1,9 @@
-export {
-  createMenu,
-  getMenuData,
-  type AriaMenuProps,
-  type MenuAria,
-} from './createMenu';
+export { createMenu, getMenuData, type AriaMenuProps, type MenuAria } from "./createMenu";
 
-export {
-  createMenuItem,
-  type AriaMenuItemProps,
-  type MenuItemAria,
-} from './createMenuItem';
+export { createMenuItem, type AriaMenuItemProps, type MenuItemAria } from "./createMenuItem";
 
 export {
   createMenuTrigger,
   type AriaMenuTriggerProps,
   type MenuTriggerAria,
-} from './createMenuTrigger';
+} from "./createMenuTrigger";

package/src/meter/createMeter.ts

@@ -8,13 +8,9 @@
  * This is a port of @react-aria/meter's useMeter hook.
  */
 
-import { createProgressBar, type AriaProgressBarProps } from '../progress/createProgressBar';
+import { createProgressBar, type AriaProgressBarProps } from "../progress/createProgressBar";
 
-// ============================================
-// TYPES
-// ============================================
-
-export interface AriaMeterProps extends Omit<AriaProgressBarProps, 'isIndeterminate'> {
+export interface AriaMeterProps extends Omit<AriaProgressBarProps, "isIndeterminate"> {
   /** The current value (controlled). */
   value?: number;
   /** The smallest value allowed for the input. @default 0 */
@@ -28,13 +24,13 @@ export interface AriaMeterProps extends Omit<AriaProgressBarProps, 'isIndetermin
   /** The content to display as the label. */
   label?: string;
   /** An accessibility label for this item. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Identifies the element (or elements) that provide a detailed, extended description for the object. */
-  'aria-details'?: string;
+  "aria-details"?: string;
 }
 
 export interface MeterAria {
@@ -44,10 +40,6 @@ export interface MeterAria {
   labelProps: Record<string, unknown>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for a meter component.
  * Meters represent a quantity within a known range, or a fractional value.
@@ -60,7 +52,7 @@ export function createMeter(props: AriaMeterProps = {}): MeterAria {
     get meterProps() {
       return {
         ...progressBarProps,
-        role: 'meter',
+        role: "meter",
       };
     },
     get labelProps() {

package/src/meter/index.ts

@@ -1 +1 @@
-export { createMeter, type AriaMeterProps, type MeterAria } from './createMeter';
+export { createMeter, type AriaMeterProps, type MeterAria } from "./createMeter";