@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/menu/createMenu.ts

@@ -4,16 +4,16 @@
  * 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 { 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 +26,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();
 
@@ -65,11 +65,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. */
@@ -83,7 +83,7 @@ export interface AriaMenuProps {
   /** 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;
 }
@@ -116,7 +116,7 @@ export function getMenuData(state: MenuState): MenuData | undefined {
 export function createMenu<T>(
   props: MaybeAccessor<AriaMenuProps>,
   state: MenuState<T>,
-  ref?: Accessor<HTMLElement | null>
+  ref?: Accessor<HTMLElement | null>,
 ): MenuAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -124,15 +124,16 @@ 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();
@@ -174,13 +175,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
@@ -206,25 +207,25 @@ export function createMenu<T>(
     const isDisabled = (key: Key) => state.isDisabled(key);
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         e.preventDefault();
         const currentKey = state.focusedKey();
-        const nextKey = findNextNonDisabledKey(collection, currentKey, 'next', isDisabled, wrap);
+        const nextKey = findNextNonDisabledKey(collection, currentKey, "next", isDisabled, wrap);
         if (nextKey != null) {
           state.setFocusedKey(nextKey);
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
         const currentKey = state.focusedKey();
-        const prevKey = findNextNonDisabledKey(collection, currentKey, 'prev', isDisabled, wrap);
+        const prevKey = findNextNonDisabledKey(collection, currentKey, "prev", isDisabled, wrap);
         if (prevKey != null) {
           state.setFocusedKey(prevKey);
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
         // Find first non-disabled key
         let firstKey = collection.getFirstKey();
@@ -236,7 +237,7 @@ export function createMenu<T>(
         }
         break;
       }
-      case 'End': {
+      case "End": {
         e.preventDefault();
         // Find last non-disabled key
         let lastKey = collection.getLastKey();
@@ -248,23 +249,24 @@ export function createMenu<T>(
         }
         break;
       }
-      case ' ':
-      case 'Enter': {
+      case " ":
+      case "Enter": {
         e.preventDefault();
         const focusedKey = state.focusedKey();
         // Don't activate disabled items
         if (focusedKey != null && !isDisabled(focusedKey)) {
+          state.select(focusedKey, e, collection);
           p.onAction?.(focusedKey);
           p.onClose?.();
         }
         break;
       }
-      case 'Escape': {
+      case "Escape": {
         e.preventDefault();
         p.onClose?.();
         break;
       }
-      case 'PageDown': {
+      case "PageDown": {
         e.preventDefault();
         const currentKey = state.focusedKey();
         const el = ref?.();
@@ -288,7 +290,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 +314,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,7 +332,7 @@ export function createMenu<T>(
         }
         break;
       }
-      case 'PageUp': {
+      case "PageUp": {
         e.preventDefault();
         const currentKey = state.focusedKey();
         const el = ref?.();
@@ -342,7 +356,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 +380,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 +413,19 @@ export function createMenu<T>(
         focusWithinProps as Record<string, unknown>,
         fieldProps as Record<string, unknown>,
         {
-          role: 'menu',
+          role: "menu",
           tabIndex: p.isDisabled ? undefined : 0,
-          'aria-disabled': p.isDisabled || undefined,
+          "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>;

package/src/menu/createMenuItem.ts

@@ -3,14 +3,14 @@
  * 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 } 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, SelectionMode } from "@proyecto-viviana/solid-stately";
 
 export interface AriaMenuItemProps {
   /** The unique key for the menu item. */
@@ -18,11 +18,19 @@ export interface AriaMenuItemProps {
   /** Whether the menu item is disabled. */
   isDisabled?: boolean;
   /** An accessible label for the menu item. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** 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 +50,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,7 +62,7 @@ export interface MenuItemAria {
 export function createMenuItem<T>(
   props: MaybeAccessor<AriaMenuItemProps>,
   state: MenuState<T>,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): MenuItemAria {
   const getProps = () => access(props);
 
@@ -59,13 +71,26 @@ export function createMenuItem<T>(
 
   // Computed states
   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 isSelected: Accessor<boolean> = () => {
+    return selectionMode() !== "none" && state.isSelected(getProps().key);
+  };
+
+  const selectionMode: Accessor<SelectionMode> = () => {
+    return state.selectionMode();
+  };
+
+  // Whether this is a link item
+  const isLink = () => !!getProps().href;
+
   // Handle press
   const { pressProps, isPressed } = createPress({
     get isDisabled() {
@@ -76,6 +101,8 @@ export function createMenuItem<T>(
       const key = p.key;
       const data = getData();
 
+      state.select(key, undefined, state.collection());
+
       // Call item-specific onAction
       p.onAction?.();
 
@@ -83,6 +110,7 @@ export function createMenuItem<T>(
       data?.onAction?.(key);
 
       // Close menu if closeOnSelect is not explicitly false
+      // For link items, default to closing the menu
       if (p.closeOnSelect !== false) {
         data?.onClose?.();
       }
@@ -109,26 +137,48 @@ export function createMenuItem<T>(
 
   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 baseProps: Record<string, unknown> = {
+        role:
+          mode === "single"
+            ? "menuitemradio"
+            : mode === "multiple"
+              ? "menuitemcheckbox"
+              : "menuitem",
+        id: String(key),
+        "aria-disabled": isDisabled() || undefined,
+        "aria-checked": mode !== "none" ? selected : undefined,
+        "aria-label": ariaLabel,
+        "aria-labelledby": !ariaLabel ? labelId : undefined,
+        "aria-describedby": descriptionId,
+        tabIndex: isFocused() ? 0 : -1,
+        "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>,
         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>
+        baseProps,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     labelProps: {
@@ -139,11 +189,13 @@ export function createMenuItem<T>(
     },
     keyboardShortcutProps: {
       id: keyboardId,
-      'aria-hidden': true,
+      "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";