@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/listbox/createOption.ts

@@ -3,26 +3,40 @@
  * Based on @react-aria/listbox useOption.
  */
 
-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 { getListBoxData } from './createListBox';
-import type { ListState, Key } from '@proyecto-viviana/solid-stately';
+import { type JSX, type Accessor } from "solid-js";
+import { createPress } from "../interactions/createPress";
+import { createHover, type HoverEvents } from "../interactions/createHover";
+import { createFocusRing } from "../interactions/createFocusRing";
+import { mergeProps } from "../utils/mergeProps";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { getListBoxData } from "./createListBox";
+import type { ListState, Key } from "@proyecto-viviana/solid-stately";
 
 export interface AriaOptionProps {
   /** The unique key for the option. */
   key: Key;
+  /** Optional DOM id for the option element. Defaults to the key. */
+  optionId?: string;
   /** Whether the option is disabled. */
   isDisabled?: boolean;
   /** An accessible label for the option. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Whether selection should occur on press up. */
   shouldSelectOnPressUp?: boolean;
   /** Whether to focus the option on hover. */
   shouldFocusOnHover?: boolean;
+  /** Whether the option should use virtual focus instead of receiving DOM focus. */
+  shouldUseVirtualFocus?: boolean;
+  /** Whether press-up may occur without the press starting on this option. */
+  allowsDifferentPressOrigin?: boolean;
+  /** Handler called when hover starts. */
+  onHoverStart?: HoverEvents["onHoverStart"];
+  /** Handler called when hover ends. */
+  onHoverEnd?: HoverEvents["onHoverEnd"];
+  /** Handler called when hover state changes. */
+  onHoverChange?: HoverEvents["onHoverChange"];
+  /** Handler called when the option is activated. */
+  onAction?: () => void;
 }
 
 export interface OptionAria {
@@ -40,6 +54,8 @@ export interface OptionAria {
   isFocusVisible: Accessor<boolean>;
   /** Whether the option is currently pressed. */
   isPressed: Accessor<boolean>;
+  /** Whether the option is currently hovered. */
+  isHovered: Accessor<boolean>;
   /** Whether the option is disabled. */
   isDisabled: Accessor<boolean>;
 }
@@ -50,16 +66,16 @@ export interface OptionAria {
 export function createOption<T>(
   props: MaybeAccessor<AriaOptionProps>,
   state: ListState<T>,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): OptionAria {
   const getProps = () => access(props);
 
-  // Get shared data from listbox
   const getData = () => getListBoxData(state);
 
-  // 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 isSelected: Accessor<boolean> = () => {
@@ -74,48 +90,76 @@ export function createOption<T>(
     return getProps().shouldSelectOnPressUp ?? getData()?.shouldSelectOnPressUp ?? true;
   };
 
+  const shouldUseVirtualFocus = () => {
+    return getProps().shouldUseVirtualFocus ?? false;
+  };
+
+  const allowsDifferentPressOrigin = () => {
+    return getProps().allowsDifferentPressOrigin ?? false;
+  };
+
   const selectAndAction = () => {
     const key = getProps().key;
-    if (state.selectionMode() !== 'none') {
+    if (state.selectionMode() !== "none") {
       state.select(key);
     }
+    getProps().onAction?.();
     getData()?.onAction?.(key);
   };
 
-  // Handle press
   const { pressProps, isPressed } = createPress({
     get isDisabled() {
       return isDisabled();
     },
+    get preventFocusOnPress() {
+      return shouldUseVirtualFocus();
+    },
     onPressStart(e) {
-      if (!shouldSelectOnPressUp() && e.pointerType !== 'keyboard' && e.pointerType !== 'virtual') {
+      if (!shouldSelectOnPressUp() && e.pointerType !== "keyboard" && e.pointerType !== "virtual") {
+        selectAndAction();
+      }
+    },
+    onPressUp(e) {
+      if (shouldSelectOnPressUp() && allowsDifferentPressOrigin() && e.pointerType === "mouse") {
         selectAndAction();
       }
     },
     onPress(e) {
-      if (shouldSelectOnPressUp() || e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
+      if (
+        (shouldSelectOnPressUp() && !allowsDifferentPressOrigin()) ||
+        (shouldSelectOnPressUp() &&
+          allowsDifferentPressOrigin() &&
+          e.pointerType !== "keyboard" &&
+          e.pointerType !== "mouse") ||
+        e.pointerType === "keyboard" ||
+        e.pointerType === "virtual"
+      ) {
         selectAndAction();
       }
     },
   });
 
-  // Handle hover
   const { hoverProps, isHovered } = createHover({
     get isDisabled() {
       return isDisabled();
     },
-    onHoverStart() {
+    onHoverStart(e) {
       const shouldFocus = getProps().shouldFocusOnHover ?? getData()?.shouldFocusOnHover;
       if (shouldFocus) {
         state.setFocusedKey(getProps().key);
       }
+      getProps().onHoverStart?.(e);
+    },
+    onHoverEnd(e) {
+      getProps().onHoverEnd?.(e);
+    },
+    onHoverChange(isHovering) {
+      getProps().onHoverChange?.(isHovering);
     },
   });
 
-  // Handle focus ring
   const { isFocusVisible, focusProps } = createFocusRing();
 
-  // Generate unique IDs for label and description
   const labelId = `${getProps().key}-label`;
   const descriptionId = `${getProps().key}-desc`;
 
@@ -123,28 +167,29 @@ export function createOption<T>(
     get optionProps() {
       const key = getProps().key;
       const selectionMode = state.selectionMode();
-      const ariaLabel = getProps()['aria-label'];
+      const ariaLabel = getProps()["aria-label"];
 
       return mergeProps(
         pressProps as Record<string, unknown>,
         hoverProps as Record<string, unknown>,
         focusProps as Record<string, unknown>,
         {
-          role: 'option',
-          id: String(key),
-          'aria-selected': selectionMode !== 'none' ? isSelected() : undefined,
-          'aria-disabled': isDisabled() || undefined,
-          'aria-label': ariaLabel,
-          'aria-labelledby': !ariaLabel ? labelId : undefined,
-          'aria-describedby': descriptionId,
-          tabIndex: isFocused() ? 0 : -1,
-          'data-selected': isSelected() || undefined,
-          'data-focused': isFocused() || undefined,
-          'data-focus-visible': isFocusVisible() || undefined,
-          'data-pressed': isPressed() || undefined,
-          'data-disabled': isDisabled() || undefined,
-          'data-hovered': isHovered() || undefined,
-        } as Record<string, unknown>
+          role: "option",
+          id: getProps().optionId ?? String(key),
+          "data-key": String(key),
+          "aria-selected": selectionMode !== "none" ? isSelected() : undefined,
+          "aria-disabled": isDisabled() || undefined,
+          "aria-label": ariaLabel,
+          "aria-labelledby": !ariaLabel ? labelId : undefined,
+          "aria-describedby": descriptionId,
+          tabIndex: shouldUseVirtualFocus() ? undefined : isFocused() ? 0 : -1,
+          "data-selected": isSelected() || undefined,
+          "data-focused": isFocused() || undefined,
+          "data-focus-visible": isFocusVisible() || undefined,
+          "data-pressed": isPressed() || undefined,
+          "data-disabled": isDisabled() || undefined,
+          "data-hovered": isHovered() || undefined,
+        } as Record<string, unknown>,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     labelProps: {
@@ -157,6 +202,7 @@ export function createOption<T>(
     isFocused,
     isFocusVisible: () => isFocused() && isFocusVisible(),
     isPressed,
+    isHovered,
     isDisabled,
   };
 }

package/src/listbox/index.ts

@@ -3,10 +3,6 @@ export {
   getListBoxData,
   type AriaListBoxProps,
   type ListBoxAria,
-} from './createListBox';
+} from "./createListBox";
 
-export {
-  createOption,
-  type AriaOptionProps,
-  type OptionAria,
-} from './createOption';
+export { createOption, type AriaOptionProps, type OptionAria } from "./createOption";

package/src/live-announcer/announce.ts

@@ -10,27 +10,15 @@
  * will only be created when running in the browser.
  */
 
-import { onCleanup, createEffect } from 'solid-js';
-import { isServer } from 'solid-js/web';
+import { onCleanup, createEffect } from "solid-js";
+import { isServer } from "solid-js/web";
 
-// ============================================
-// TYPES
-// ============================================
+export type Assertiveness = "assertive" | "polite";
 
-export type Assertiveness = 'assertive' | 'polite';
-
-export type Message = string | { 'aria-labelledby': string };
-
-// ============================================
-// CONSTANTS
-// ============================================
+export type Message = string | { "aria-labelledby": string };
 
 const LIVEREGION_TIMEOUT_DELAY = 7000;
 
-// ============================================
-// LIVE ANNOUNCER CLASS
-// ============================================
-
 /**
  * Singleton class that manages live region announcements.
  * Implemented using vanilla DOM for simplicity and framework independence.
@@ -41,27 +29,27 @@ class LiveAnnouncer {
   politeLog: HTMLElement | null = null;
 
   constructor() {
-    if (typeof document !== 'undefined') {
-      this.node = document.createElement('div');
-      this.node.dataset.liveAnnouncer = 'true';
+    if (typeof document !== "undefined") {
+      this.node = document.createElement("div");
+      this.node.dataset.liveAnnouncer = "true";
       // Visually hidden styles
       Object.assign(this.node.style, {
-        border: '0',
-        clip: 'rect(0 0 0 0)',
-        clipPath: 'inset(50%)',
-        height: '1px',
-        margin: '-1px',
-        overflow: 'hidden',
-        padding: '0',
-        position: 'absolute',
-        width: '1px',
-        whiteSpace: 'nowrap',
+        border: "0",
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: "0",
+        position: "absolute",
+        width: "1px",
+        whiteSpace: "nowrap",
       });
 
-      this.assertiveLog = this.createLog('assertive');
+      this.assertiveLog = this.createLog("assertive");
       this.node.appendChild(this.assertiveLog);
 
-      this.politeLog = this.createLog('polite');
+      this.politeLog = this.createLog("polite");
       this.node.appendChild(this.politeLog);
 
       document.body.prepend(this.node);
@@ -73,10 +61,10 @@ class LiveAnnouncer {
   }
 
   createLog(ariaLive: string): HTMLElement {
-    const node = document.createElement('div');
-    node.setAttribute('role', 'log');
-    node.setAttribute('aria-live', ariaLive);
-    node.setAttribute('aria-relevant', 'additions');
+    const node = document.createElement("div");
+    node.setAttribute("role", "log");
+    node.setAttribute("aria-live", ariaLive);
+    node.setAttribute("aria-relevant", "additions");
     return node;
   }
 
@@ -91,29 +79,29 @@ class LiveAnnouncer {
 
   announce(
     message: Message,
-    assertiveness: Assertiveness = 'assertive',
-    timeout: number = LIVEREGION_TIMEOUT_DELAY
+    assertiveness: Assertiveness = "assertive",
+    timeout: number = LIVEREGION_TIMEOUT_DELAY,
   ): void {
     if (!this.node) {
       return;
     }
 
-    const node = document.createElement('div');
-    if (typeof message === 'object') {
+    const node = document.createElement("div");
+    if (typeof message === "object") {
       // To read an aria-labelledby, the element must have an appropriate role, such as img.
-      node.setAttribute('role', 'img');
-      node.setAttribute('aria-labelledby', message['aria-labelledby']);
+      node.setAttribute("role", "img");
+      node.setAttribute("aria-labelledby", message["aria-labelledby"]);
     } else {
       node.textContent = message;
     }
 
-    if (assertiveness === 'assertive') {
+    if (assertiveness === "assertive") {
       this.assertiveLog?.appendChild(node);
     } else {
       this.politeLog?.appendChild(node);
     }
 
-    if (message !== '') {
+    if (message !== "") {
       setTimeout(() => {
         node.remove();
       }, timeout);
@@ -125,26 +113,18 @@ class LiveAnnouncer {
       return;
     }
 
-    if ((!assertiveness || assertiveness === 'assertive') && this.assertiveLog) {
-      this.assertiveLog.innerHTML = '';
+    if ((!assertiveness || assertiveness === "assertive") && this.assertiveLog) {
+      this.assertiveLog.innerHTML = "";
     }
 
-    if ((!assertiveness || assertiveness === 'polite') && this.politeLog) {
-      this.politeLog.innerHTML = '';
+    if ((!assertiveness || assertiveness === "polite") && this.politeLog) {
+      this.politeLog.innerHTML = "";
     }
   }
 }
 
-// ============================================
-// SINGLETON INSTANCE
-// ============================================
-
 let liveAnnouncer: LiveAnnouncer | null = null;
 
-// ============================================
-// PUBLIC API
-// ============================================
-
 /**
  * Announces a message to screen readers using ARIA live regions.
  *
@@ -166,8 +146,8 @@ let liveAnnouncer: LiveAnnouncer | null = null;
  */
 export function announce(
   message: Message,
-  assertiveness: Assertiveness = 'assertive',
-  timeout: number = LIVEREGION_TIMEOUT_DELAY
+  assertiveness: Assertiveness = "assertive",
+  timeout: number = LIVEREGION_TIMEOUT_DELAY,
 ): void {
   if (!liveAnnouncer) {
     liveAnnouncer = new LiveAnnouncer();
@@ -176,9 +156,10 @@ export function announce(
     // Found most times less than 100ms were not consistent when announcing with Safari.
 
     // Check for test environment
-    const isTestEnv = typeof (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST === 'boolean'
-      ? (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST
-      : typeof (globalThis as Record<string, unknown>).vitest !== 'undefined';
+    const isTestEnv =
+      typeof (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST === "boolean"
+        ? (globalThis as Record<string, unknown>).IS_SOLIDARIA_TEST
+        : typeof (globalThis as Record<string, unknown>).vitest !== "undefined";
 
     if (!isTestEnv) {
       setTimeout(() => {
@@ -233,17 +214,9 @@ export function destroyAnnouncer(): void {
   }
 }
 
-// ============================================
-// HOOK-BASED API
-// ============================================
-
 export interface UseAnnouncerResult {
   /** Announce a message to screen readers. */
-  announce: (
-    message: Message,
-    assertiveness?: Assertiveness,
-    timeout?: number
-  ) => void;
+  announce: (message: Message, assertiveness?: Assertiveness, timeout?: number) => void;
   /** Clear announcements for the given assertiveness level. */
   clear: (assertiveness?: Assertiveness) => void;
 }
@@ -310,8 +283,8 @@ export function useAnnouncer(): UseAnnouncerResult {
   return {
     announce: (
       message: Message,
-      assertiveness: Assertiveness = 'assertive',
-      timeout: number = LIVEREGION_TIMEOUT_DELAY
+      assertiveness: Assertiveness = "assertive",
+      timeout: number = LIVEREGION_TIMEOUT_DELAY,
     ) => {
       announce(message, assertiveness, timeout);
     },

package/src/live-announcer/index.ts

@@ -6,4 +6,4 @@ export {
   type Assertiveness,
   type Message,
   type UseAnnouncerResult,
-} from './announce';
+} from "./announce";