@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/link/createLink.ts

@@ -8,17 +8,13 @@
  * This is a 1:1 port of @react-aria/link's useLink hook.
  */
 
-import { type Accessor } from 'solid-js';
-import { createPress } from '../interactions/createPress';
-import { createFocusable } from '../interactions/createFocusable';
-import { mergeProps } from '../utils/mergeProps';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { type MaybeAccessor, access } from '../utils/reactivity';
-import { type PressEvent } from '../interactions/PressEvent';
-
-// ============================================
-// TYPES
-// ============================================
+import { type Accessor } from "solid-js";
+import { createPress } from "../interactions/createPress";
+import { createFocusable } from "../interactions/createFocusable";
+import { mergeProps } from "../utils/mergeProps";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { type MaybeAccessor, access } from "../utils/reactivity";
+import { type PressEvent } from "../interactions/PressEvent";
 
 export interface AriaLinkProps {
   /** Whether the link is disabled. */
@@ -41,21 +37,25 @@ export interface AriaLinkProps {
   ping?: string;
   /** Referrer policy for fetches initiated by this link. */
   referrerPolicy?:
-    | ''
-    | 'no-referrer'
-    | 'no-referrer-when-downgrade'
-    | 'origin'
-    | 'origin-when-cross-origin'
-    | 'same-origin'
-    | 'strict-origin'
-    | 'strict-origin-when-cross-origin'
-    | 'unsafe-url';
+    | ""
+    | "no-referrer"
+    | "no-referrer-when-downgrade"
+    | "origin"
+    | "origin-when-cross-origin"
+    | "same-origin"
+    | "strict-origin"
+    | "strict-origin-when-cross-origin"
+    | "unsafe-url";
   /** Handler that is called when the press is released over the target. */
   onPress?: (e: PressEvent) => void;
   /** Handler that is called when a press interaction starts. */
   onPressStart?: (e: PressEvent) => void;
   /** Handler that is called when a press interaction ends. */
   onPressEnd?: (e: PressEvent) => void;
+  /** Handler that is called when a press is released over the target. */
+  onPressUp?: (e: PressEvent) => void;
+  /** Handler that is called when the press state changes. */
+  onPressChange?: (isPressed: boolean) => void;
   /** Handler that is called when the element is clicked. */
   onClick?: (e: MouseEvent) => void;
   /** Handler that is called when the element receives focus. */
@@ -71,13 +71,15 @@ export interface AriaLinkProps {
   /** Whether to autofocus the element. */
   autoFocus?: boolean;
   /** Indicates the current "page" or state within a set of related elements. */
-  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | boolean;
+  "aria-current"?: "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean;
   /** Defines a string value that labels the current element. */
-  '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 description. */
+  "aria-details"?: string;
 }
 
 export interface LinkAria {
@@ -87,40 +89,62 @@ export interface LinkAria {
   isPressed: Accessor<boolean>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a link component.
  * A link allows a user to navigate to another page or resource within a web page
  * or application.
  */
-export function createLink(
-  props: MaybeAccessor<AriaLinkProps> = {}
-): LinkAria {
+export function createLink(props: MaybeAccessor<AriaLinkProps> = {}): LinkAria {
   const getProps = () => access(props);
 
   const isDisabled = () => getProps().isDisabled ?? false;
-  const elementType = () => getProps().elementType ?? 'a';
+  const elementType = () => getProps().elementType ?? "a";
 
   // Create press handling
   const { pressProps, isPressed } = createPress({
-    get isDisabled() { return isDisabled(); },
-    get onPress() { return getProps().onPress; },
-    get onPressStart() { return getProps().onPressStart; },
-    get onPressEnd() { return getProps().onPressEnd; },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get onPress() {
+      return getProps().onPress;
+    },
+    get onPressStart() {
+      return getProps().onPressStart;
+    },
+    get onPressEnd() {
+      return getProps().onPressEnd;
+    },
+    get onPressUp() {
+      return getProps().onPressUp;
+    },
+    get onPressChange() {
+      return getProps().onPressChange;
+    },
   });
 
   // Create focusable handling
   const { focusableProps } = createFocusable({
-    get isDisabled() { return isDisabled(); },
-    get autoFocus() { return getProps().autoFocus; },
-    get onFocus() { return getProps().onFocus; },
-    get onBlur() { return getProps().onBlur; },
-    get onFocusChange() { return getProps().onFocusChange; },
-    get onKeyDown() { return getProps().onKeyDown; },
-    get onKeyUp() { return getProps().onKeyUp; },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get autoFocus() {
+      return getProps().autoFocus;
+    },
+    get onFocus() {
+      return getProps().onFocus;
+    },
+    get onBlur() {
+      return getProps().onBlur;
+    },
+    get onFocusChange() {
+      return getProps().onFocusChange;
+    },
+    get onKeyDown() {
+      return getProps().onKeyDown;
+    },
+    get onKeyUp() {
+      return getProps().onKeyUp;
+    },
   });
 
   // Build link props
@@ -132,29 +156,32 @@ export function createLink(
     let baseProps: Record<string, unknown> = {};
 
     // If not an <a>, add role and tabIndex
-    if (elType !== 'a') {
+    if (elType !== "a") {
       baseProps = {
-        role: 'link',
+        role: "link",
         tabIndex: disabled ? undefined : 0,
       };
     }
 
     // ARIA attributes
     const ariaProps: Record<string, unknown> = {
-      'aria-disabled': disabled || undefined,
+      "aria-disabled": disabled || undefined,
     };
 
-    if (p['aria-current'] !== undefined) {
-      ariaProps['aria-current'] = p['aria-current'];
+    if (p["aria-current"] !== undefined) {
+      ariaProps["aria-current"] = p["aria-current"];
+    }
+    if (p["aria-label"]) {
+      ariaProps["aria-label"] = p["aria-label"];
     }
-    if (p['aria-label']) {
-      ariaProps['aria-label'] = p['aria-label'];
+    if (p["aria-labelledby"]) {
+      ariaProps["aria-labelledby"] = p["aria-labelledby"];
     }
-    if (p['aria-labelledby']) {
-      ariaProps['aria-labelledby'] = p['aria-labelledby'];
+    if (p["aria-describedby"]) {
+      ariaProps["aria-describedby"] = p["aria-describedby"];
     }
-    if (p['aria-describedby']) {
-      ariaProps['aria-describedby'] = p['aria-describedby'];
+    if (p["aria-details"]) {
+      ariaProps["aria-details"] = p["aria-details"];
     }
 
     // Handle onClick - prevent default navigation when appropriate
@@ -178,13 +205,13 @@ export function createLink(
     return mergeProps(
       filterDOMProps(p as Record<string, unknown>, {
         labelable: true,
-        isLink: elType === 'a',
+        isLink: elType === "a",
       }),
       baseProps,
       ariaProps,
       focusableProps as Record<string, unknown>,
       pressProps as Record<string, unknown>,
-      { onClick }
+      { onClick },
     );
   };
 

package/src/link/index.ts

@@ -1 +1 @@
-export { createLink, type AriaLinkProps, type LinkAria } from './createLink';
+export { createLink, type AriaLinkProps, type LinkAria } from "./createLink";

package/src/listbox/createListBox.ts

@@ -4,16 +4,16 @@
  * Based on @react-aria/listbox useListBox.
  */
 
-import { createEffect, onCleanup, type JSX } 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 { ListState, Key } from '@proyecto-viviana/solid-stately';
+import { createEffect, onCleanup, type JSX } 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 { ListState, Key } from "@proyecto-viviana/solid-stately";
 
 export interface AriaListBoxProps {
   /** An ID for the listbox. */
@@ -23,11 +23,11 @@ export interface AriaListBoxProps {
   /** The label for the listbox. */
   label?: JSX.Element;
   /** An accessible label for the listbox when no visible label is provided. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the listbox. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the listbox. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Handler called when focus moves into the listbox. */
   onFocus?: (e: FocusEvent) => void;
   /** Handler called when focus moves out of the listbox. */
@@ -42,6 +42,11 @@ export interface AriaListBoxProps {
   shouldSelectOnPressUp?: boolean;
   /** Whether to focus items on hover. */
   shouldFocusOnHover?: boolean;
+  /**
+   * Whether keyboard focus movement should also update selection in single selection mode.
+   * @default true
+   */
+  shouldSelectOnFocus?: boolean;
   /** Whether type-to-select is disabled. @default false */
   disallowTypeAhead?: boolean;
 }
@@ -71,16 +76,16 @@ export function getListBoxData(state: ListState): ListBoxData | undefined {
 function findNextEnabledKey<T>(
   state: ListState<T>,
   currentKey: Key | null,
-  direction: 'next' | 'prev',
-  wrap: boolean
+  direction: "next" | "prev",
+  wrap: boolean,
 ): Key | null {
   const collection = state.collection();
-  const getAdjacentKey = direction === 'next'
-    ? (key: Key) => collection.getKeyAfter(key)
-    : (key: Key) => collection.getKeyBefore(key);
-  const getBoundaryKey = direction === 'next'
-    ? () => collection.getFirstKey()
-    : () => collection.getLastKey();
+  const getAdjacentKey =
+    direction === "next"
+      ? (key: Key) => collection.getKeyAfter(key)
+      : (key: Key) => collection.getKeyBefore(key);
+  const getBoundaryKey =
+    direction === "next" ? () => collection.getFirstKey() : () => collection.getLastKey();
 
   let key = currentKey != null ? getAdjacentKey(currentKey) : getBoundaryKey();
   while (key != null && state.isDisabled(key)) {
@@ -104,7 +109,7 @@ function findNextEnabledKey<T>(
 export function createListBox<T>(
   props: MaybeAccessor<AriaListBoxProps>,
   state: ListState<T>,
-  _ref?: () => HTMLElement | null
+  _ref?: () => HTMLElement | null,
 ): ListBoxAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -112,15 +117,16 @@ export function createListBox<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 ListBox requires an aria-label or aria-labelledby attribute for accessibility.'
+        "[solidaria] A ListBox 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();
@@ -163,13 +169,13 @@ export function createListBox<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
@@ -190,82 +196,83 @@ export function createListBox<T>(
 
     const collection = state.collection();
     const shouldWrap = p.shouldFocusWrap ?? false;
+    const shouldSelectOnFocus = p.shouldSelectOnFocus ?? true;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         e.preventDefault();
-        const nextKey = findNextEnabledKey(state, state.focusedKey(), 'next', shouldWrap);
+        const nextKey = findNextEnabledKey(state, state.focusedKey(), "next", shouldWrap);
         if (nextKey != null) {
           state.setFocusedKey(nextKey);
-          if (!e.shiftKey && state.selectionMode() === 'single') {
+          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(nextKey);
-          } else if (e.shiftKey && state.selectionMode() === 'multiple') {
+          } else if (e.shiftKey && state.selectionMode() === "multiple") {
             state.extendSelection(nextKey, collection);
           }
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
-        const prevKey = findNextEnabledKey(state, state.focusedKey(), 'prev', shouldWrap);
+        const prevKey = findNextEnabledKey(state, state.focusedKey(), "prev", shouldWrap);
         if (prevKey != null) {
           state.setFocusedKey(prevKey);
-          if (!e.shiftKey && state.selectionMode() === 'single') {
+          if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(prevKey);
-          } else if (e.shiftKey && state.selectionMode() === 'multiple') {
+          } else if (e.shiftKey && state.selectionMode() === "multiple") {
             state.extendSelection(prevKey, collection);
           }
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
-        const firstKey = findNextEnabledKey(state, null, 'next', false);
+        const firstKey = findNextEnabledKey(state, null, "next", false);
         if (firstKey != null) {
           state.setFocusedKey(firstKey);
-          if (e.ctrlKey && e.shiftKey && state.selectionMode() === 'multiple') {
+          if (e.ctrlKey && e.shiftKey && state.selectionMode() === "multiple") {
             // Select from current to first
             state.extendSelection(firstKey, collection);
-          } else if (!e.shiftKey && state.selectionMode() === 'single') {
+          } else if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(firstKey);
           }
         }
         break;
       }
-      case 'End': {
+      case "End": {
         e.preventDefault();
-        const lastKey = findNextEnabledKey(state, null, 'prev', false);
+        const lastKey = findNextEnabledKey(state, null, "prev", false);
         if (lastKey != null) {
           state.setFocusedKey(lastKey);
-          if (e.ctrlKey && e.shiftKey && state.selectionMode() === 'multiple') {
+          if (e.ctrlKey && e.shiftKey && state.selectionMode() === "multiple") {
             // Select from current to last
             state.extendSelection(lastKey, collection);
-          } else if (!e.shiftKey && state.selectionMode() === 'single') {
+          } else if (shouldSelectOnFocus && !e.shiftKey && state.selectionMode() === "single") {
             state.replaceSelection(lastKey);
           }
         }
         break;
       }
-      case ' ':
-      case 'Enter': {
+      case " ":
+      case "Enter": {
         e.preventDefault();
         const focusedKey = state.focusedKey();
         if (focusedKey != null && !state.isDisabled(focusedKey)) {
-          if (state.selectionMode() !== 'none') {
+          if (state.selectionMode() !== "none") {
             state.toggleSelection(focusedKey);
           }
           p.onAction?.(focusedKey);
         }
         break;
       }
-      case 'a': {
-        if ((e.ctrlKey || e.metaKey) && state.selectionMode() === 'multiple') {
+      case "a": {
+        if ((e.ctrlKey || e.metaKey) && state.selectionMode() === "multiple") {
           e.preventDefault();
           state.selectAll();
         }
         break;
       }
-      case 'Escape': {
+      case "Escape": {
         e.preventDefault();
         if (!state.disallowEmptySelection()) {
           state.clearSelection();
@@ -288,18 +295,22 @@ export function createListBox<T>(
         focusWithinProps as Record<string, unknown>,
         fieldProps as Record<string, unknown>,
         {
-          role: 'listbox',
+          role: "listbox",
           tabIndex: p.isDisabled ? undefined : 0,
-          'aria-disabled': p.isDisabled || undefined,
-          'aria-multiselectable': selectionMode === 'multiple' ? true : undefined,
-          'aria-activedescendant': state.focusedKey() != null ? String(state.focusedKey()) : undefined,
+          "aria-disabled": p.isDisabled || undefined,
+          "aria-multiselectable": selectionMode === "multiple" ? true : undefined,
+          "aria-activedescendant":
+            state.focusedKey() != null ? String(state.focusedKey()) : undefined,
           onKeyDown,
-        }
+        },
       );
 
       // 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>;