@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/listbox/createOption.ts

@@ -3,26 +3,42 @@
  * 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 { 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";
+import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
 
 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 the option is contained in a virtual scrolling listbox. */
+  isVirtualized?: 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,8 +56,14 @@ 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>;
+  /** Whether the option may be selected. */
+  allowsSelection: Accessor<boolean>;
+  /** Whether the option has an action. */
+  hasAction: Accessor<boolean>;
 }
 
 /**
@@ -50,72 +72,89 @@ 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));
+  const shouldSelectOnPressUp = () => {
+    return getProps().shouldSelectOnPressUp ?? getData()?.shouldSelectOnPressUp;
   };
 
-  const isSelected: Accessor<boolean> = () => {
-    return state.isSelected(getProps().key);
+  const shouldFocusOnHover = () => {
+    return getProps().shouldFocusOnHover ?? getData()?.shouldFocusOnHover ?? false;
   };
 
-  const isFocused: Accessor<boolean> = () => {
-    return state.focusedKey() === getProps().key;
+  const shouldUseVirtualFocus = () => {
+    return getProps().shouldUseVirtualFocus ?? getData()?.shouldUseVirtualFocus ?? false;
   };
 
-  const shouldSelectOnPressUp = () => {
-    return getProps().shouldSelectOnPressUp ?? getData()?.shouldSelectOnPressUp ?? true;
+  const isVirtualized = () => {
+    return getProps().isVirtualized ?? getData()?.isVirtualized ?? false;
   };
 
-  const selectAndAction = () => {
-    const key = getProps().key;
-    if (state.selectionMode() !== 'none') {
-      state.select(key);
-    }
-    getData()?.onAction?.(key);
+  const allowsDifferentPressOrigin = () => {
+    return (
+      getProps().allowsDifferentPressOrigin ??
+      Boolean(shouldSelectOnPressUp() && shouldFocusOnHover())
+    );
   };
 
-  // Handle press
-  const { pressProps, isPressed } = createPress({
-    get isDisabled() {
-      return isDisabled();
-    },
-    onPressStart(e) {
-      if (!shouldSelectOnPressUp() && e.pointerType !== 'keyboard' && e.pointerType !== 'virtual') {
-        selectAndAction();
-      }
-    },
-    onPress(e) {
-      if (shouldSelectOnPressUp() || e.pointerType === 'keyboard' || e.pointerType === 'virtual') {
-        selectAndAction();
-      }
+  const isDisabledProp = () => {
+    return Boolean(getData()?.isDisabled || getProps().isDisabled);
+  };
+
+  const optionId = () => getProps().optionId ?? String(getProps().key);
+
+  const selectableItem = createSelectableItem<T>(
+    () => {
+      const key = getProps().key;
+      const hasAction = getProps().onAction != null || getData()?.onAction != null;
+
+      return {
+        key,
+        id: optionId(),
+        isDisabled: isDisabledProp(),
+        shouldSelectOnPressUp: shouldSelectOnPressUp(),
+        allowsDifferentPressOrigin: allowsDifferentPressOrigin(),
+        isVirtualized: isVirtualized(),
+        shouldUseVirtualFocus: shouldUseVirtualFocus(),
+        onAction: hasAction
+          ? () => {
+              getProps().onAction?.();
+              getData()?.onAction?.(key);
+            }
+          : undefined,
+        linkBehavior: getData()?.linkBehavior,
+        UNSTABLE_itemBehavior: getData()?.UNSTABLE_itemBehavior,
+      };
     },
-  });
+    state as SelectableItemState<T>,
+    () => _ref?.() ?? null,
+  );
 
-  // Handle hover
   const { hoverProps, isHovered } = createHover({
     get isDisabled() {
-      return isDisabled();
+      return selectableItem.isDisabled();
     },
-    onHoverStart() {
-      const shouldFocus = getProps().shouldFocusOnHover ?? getData()?.shouldFocusOnHover;
-      if (shouldFocus) {
-        state.setFocusedKey(getProps().key);
+    onHoverStart(e) {
+      if (shouldFocusOnHover() && !isFocusVisible()) {
+        state.selectionManager.setFocused(true);
+        state.selectionManager.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 +162,27 @@ 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>,
+        selectableItem.itemProps 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: optionId(),
+          "aria-selected": selectionMode !== "none" ? selectableItem.isSelected() : undefined,
+          "aria-disabled": selectableItem.isDisabled() || undefined,
+          "aria-label": ariaLabel,
+          "aria-labelledby": !ariaLabel ? labelId : undefined,
+          "aria-describedby": descriptionId,
+          "data-selected": selectableItem.isSelected() || undefined,
+          "data-focused": selectableItem.isFocused() || undefined,
+          "data-focus-visible": (selectableItem.isFocused() && isFocusVisible()) || undefined,
+          "data-pressed": selectableItem.isPressed() || undefined,
+          "data-disabled": selectableItem.isDisabled() || undefined,
+          "data-hovered": isHovered() || undefined,
+        } as Record<string, unknown>,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     labelProps: {
@@ -153,10 +191,13 @@ export function createOption<T>(
     descriptionProps: {
       id: descriptionId,
     },
-    isSelected,
-    isFocused,
-    isFocusVisible: () => isFocused() && isFocusVisible(),
-    isPressed,
-    isDisabled,
+    isSelected: selectableItem.isSelected,
+    isFocused: selectableItem.isFocused,
+    isFocusVisible: () => selectableItem.isFocused() && isFocusVisible(),
+    isPressed: selectableItem.isPressed,
+    isHovered,
+    isDisabled: selectableItem.isDisabled,
+    allowsSelection: selectableItem.allowsSelection,
+    hasAction: selectableItem.hasAction,
   };
 }

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";