@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/menu/createMenuItem.ts

@@ -1,149 +1,201 @@
-/**
- * Provides the behavior and accessibility implementation for a menu item.
- * 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';
-
-export interface AriaMenuItemProps {
-  /** The unique key for the menu item. */
-  key: Key;
-  /** Whether the menu item is disabled. */
-  isDisabled?: boolean;
-  /** An accessible label for the menu item. */
-  '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;
-}
-
-export interface MenuItemAria {
-  /** Props for the menu item element. */
-  menuItemProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the label text inside the menu item. */
-  labelProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the description text inside the menu item. */
-  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Props for the keyboard shortcut inside the menu item. */
-  keyboardShortcutProps: JSX.HTMLAttributes<HTMLElement>;
-  /** Whether the menu item is currently focused. */
-  isFocused: Accessor<boolean>;
-  /** Whether the menu item is keyboard focused. */
-  isFocusVisible: Accessor<boolean>;
-  /** Whether the menu item is currently pressed. */
-  isPressed: Accessor<boolean>;
-  /** Whether the menu item is disabled. */
-  isDisabled: Accessor<boolean>;
-}
-
-/**
- * Provides the behavior and accessibility implementation for a menu item.
- */
-export function createMenuItem<T>(
-  props: MaybeAccessor<AriaMenuItemProps>,
-  state: MenuState<T>,
-  _ref?: () => HTMLElement | null
-): MenuItemAria {
-  const getProps = () => access(props);
-
-  // Get shared data from menu
-  const getData = () => getMenuData(state);
-
-  // Computed states
-  const isDisabled: Accessor<boolean> = () => {
-    return getProps().isDisabled ?? state.isDisabled(getProps().key);
-  };
-
-  const isFocused: Accessor<boolean> = () => {
-    return state.focusedKey() === getProps().key;
-  };
-
-  // Handle press
-  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?.();
-
-      // Call menu-level onAction
-      data?.onAction?.(key);
-
-      // Close menu if closeOnSelect is not explicitly false
-      if (p.closeOnSelect !== false) {
-        data?.onClose?.();
-      }
-    },
-  });
-
-  // Handle hover
-  const { hoverProps } = createHover({
-    get isDisabled() {
-      return isDisabled();
-    },
-    onHoverStart() {
-      state.setFocusedKey(getProps().key);
-    },
-  });
-
-  // Handle focus ring
-  const { isFocusVisible, focusProps } = createFocusRing();
-
-  // Generate unique IDs for label and description
-  const labelId = `${getProps().key}-label`;
-  const descriptionId = `${getProps().key}-desc`;
-  const keyboardId = `${getProps().key}-kbd`;
-
-  return {
-    get menuItemProps() {
-      const key = getProps().key;
-      const ariaLabel = getProps()['aria-label'];
-
-      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>
-      ) as JSX.HTMLAttributes<HTMLElement>;
-    },
-    labelProps: {
-      id: labelId,
-    },
-    descriptionProps: {
-      id: descriptionId,
-    },
-    keyboardShortcutProps: {
-      id: keyboardId,
-      'aria-hidden': true,
-    },
-    isFocused,
-    isFocusVisible: () => isFocused() && isFocusVisible(),
-    isPressed,
-    isDisabled,
-  };
-}
+/**
+ * Provides the behavior and accessibility implementation for a menu item.
+ * 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, SelectionMode } from "@proyecto-viviana/solid-stately";
+
+export interface AriaMenuItemProps {
+  /** The unique key for the menu item. */
+  key: Key;
+  /** Whether the menu item is disabled. */
+  isDisabled?: boolean;
+  /** An accessible label for the menu item. */
+  "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 {
+  /** Props for the menu item element. */
+  menuItemProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the label text inside the menu item. */
+  labelProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the description text inside the menu item. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the keyboard shortcut inside the menu item. */
+  keyboardShortcutProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Whether the menu item is currently focused. */
+  isFocused: Accessor<boolean>;
+  /** Whether the menu item is keyboard focused. */
+  isFocusVisible: Accessor<boolean>;
+  /** Whether the menu item is currently pressed. */
+  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>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a menu item.
+ */
+export function createMenuItem<T>(
+  props: MaybeAccessor<AriaMenuItemProps>,
+  state: MenuState<T>,
+  _ref?: () => HTMLElement | null,
+): MenuItemAria {
+  const getProps = () => access(props);
+
+  // Get shared data from menu
+  const getData = () => getMenuData(state);
+
+  // Computed states
+  const isDisabled: Accessor<boolean> = () => {
+    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() {
+      return isDisabled();
+    },
+    onPress() {
+      const p = getProps();
+      const key = p.key;
+      const data = getData();
+
+      state.select(key, undefined, state.collection());
+
+      // Call item-specific onAction
+      p.onAction?.();
+
+      // Call menu-level onAction
+      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?.();
+      }
+    },
+  });
+
+  // Handle hover
+  const { hoverProps } = createHover({
+    get isDisabled() {
+      return isDisabled();
+    },
+    onHoverStart() {
+      state.setFocusedKey(getProps().key);
+    },
+  });
+
+  // Handle focus ring
+  const { isFocusVisible, focusProps } = createFocusRing();
+
+  // Generate unique IDs for label and description
+  const labelId = `${getProps().key}-label`;
+  const descriptionId = `${getProps().key}-desc`;
+  const keyboardId = `${getProps().key}-kbd`;
+
+  return {
+    get menuItemProps() {
+      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>,
+        baseProps,
+      ) as JSX.HTMLAttributes<HTMLElement>;
+    },
+    labelProps: {
+      id: labelId,
+    },
+    descriptionProps: {
+      id: descriptionId,
+    },
+    keyboardShortcutProps: {
+      id: keyboardId,
+      "aria-hidden": true,
+    },
+    isFocused,
+    isFocusVisible: () => isFocused() && isFocusVisible(),
+    isPressed,
+    isDisabled,
+    isSelected,
+    selectionMode,
+  };
+}

package/src/menu/createMenuTrigger.ts

@@ -1,88 +1,88 @@
-/**
- * Provides the behavior and accessibility implementation for a menu trigger.
- * 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';
-
-export interface AriaMenuTriggerProps {
-  /** The type of menu that the menu trigger opens. */
-  type?: 'menu' | 'listbox';
-  /** Whether the menu trigger is disabled. */
-  isDisabled?: boolean;
-  /** An ID for the menu. */
-  id?: string;
-}
-
-export interface MenuTriggerAria {
-  /** Props for the menu trigger button. */
-  menuTriggerProps: JSX.HTMLAttributes<HTMLElement> & {
-    onPress: () => void;
-    onKeyDown: (e: KeyboardEvent) => void;
-  };
-  /** Props for the menu element. */
-  menuProps: JSX.HTMLAttributes<HTMLElement>;
-}
-
-/**
- * Provides the behavior and accessibility implementation for a menu trigger.
- */
-export function createMenuTrigger(
-  props: MaybeAccessor<AriaMenuTriggerProps>,
-  state: OverlayTriggerState
-): MenuTriggerAria {
-  const getProps = () => access(props);
-  const menuId = createId(getProps().id);
-
-  const onPress = () => {
-    if (!getProps().isDisabled) {
-      state.toggle();
-    }
-  };
-
-  const onKeyDown = (e: KeyboardEvent) => {
-    if (getProps().isDisabled) return;
-
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-      case 'ArrowDown': {
-        e.preventDefault();
-        if (!state.isOpen()) {
-          state.open();
-        }
-        break;
-      }
-      case 'ArrowUp': {
-        e.preventDefault();
-        if (!state.isOpen()) {
-          state.open();
-        }
-        break;
-      }
-    }
-  };
-
-  return {
-    get menuTriggerProps() {
-      const p = getProps();
-      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,
-        onPress,
-        onKeyDown,
-      };
-    },
-    menuProps: {
-      id: menuId,
-    },
-  };
-}
+/**
+ * Provides the behavior and accessibility implementation for a menu trigger.
+ * 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";
+
+export interface AriaMenuTriggerProps {
+  /** The type of menu that the menu trigger opens. */
+  type?: "menu" | "listbox";
+  /** Whether the menu trigger is disabled. */
+  isDisabled?: boolean;
+  /** An ID for the menu. */
+  id?: string;
+}
+
+export interface MenuTriggerAria {
+  /** Props for the menu trigger button. */
+  menuTriggerProps: JSX.HTMLAttributes<HTMLElement> & {
+    onPress: () => void;
+    onKeyDown: (e: KeyboardEvent) => void;
+  };
+  /** Props for the menu element. */
+  menuProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a menu trigger.
+ */
+export function createMenuTrigger(
+  props: MaybeAccessor<AriaMenuTriggerProps>,
+  state: OverlayTriggerState,
+): MenuTriggerAria {
+  const getProps = () => access(props);
+  const menuId = createId(getProps().id);
+
+  const onPress = () => {
+    if (!getProps().isDisabled) {
+      state.toggle();
+    }
+  };
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (getProps().isDisabled) return;
+
+    switch (e.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown": {
+        e.preventDefault();
+        if (!state.isOpen()) {
+          state.open();
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (!state.isOpen()) {
+          state.open();
+        }
+        break;
+      }
+    }
+  };
+
+  return {
+    get menuTriggerProps() {
+      const p = getProps();
+      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,
+        onPress,
+        onKeyDown,
+      };
+    },
+    menuProps: {
+      id: menuId,
+    },
+  };
+}

package/src/menu/index.ts

@@ -1,18 +1,9 @@
-export {
-  createMenu,
-  getMenuData,
-  type AriaMenuProps,
-  type MenuAria,
-} from './createMenu';
-
-export {
-  createMenuItem,
-  type AriaMenuItemProps,
-  type MenuItemAria,
-} from './createMenuItem';
-
-export {
-  createMenuTrigger,
-  type AriaMenuTriggerProps,
-  type MenuTriggerAria,
-} from './createMenuTrigger';
+export { createMenu, getMenuData, type AriaMenuProps, type MenuAria } from "./createMenu";
+
+export { createMenuItem, type AriaMenuItemProps, type MenuItemAria } from "./createMenuItem";
+
+export {
+  createMenuTrigger,
+  type AriaMenuTriggerProps,
+  type MenuTriggerAria,
+} 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,12 +52,7 @@ export function createMeter(props: AriaMeterProps = {}): MeterAria {
     get meterProps() {
       return {
         ...progressBarProps,
-        // Use the meter role if available, but fall back to progressbar if not
-        // Chrome currently falls back from meter automatically, and Firefox
-        // does not support meter at all. Safari 13+ seems to support meter properly.
-        // https://bugs.chromium.org/p/chromium/issues/detail?id=944542
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=1460378
-        role: 'meter progressbar',
+        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";