@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/tree/index.ts

@@ -2,9 +2,9 @@
  * Tree ARIA layer exports.
  */
 
-export { createTree, getTreeData } from './createTree';
-export { createTreeItem } from './createTreeItem';
-export { createTreeSelectionCheckbox } from './createTreeSelectionCheckbox';
+export { createTree, getTreeData } from "./createTree";
+export { createTreeItem } from "./createTreeItem";
+export { createTreeSelectionCheckbox } from "./createTreeSelectionCheckbox";
 
 export type {
   AriaTreeProps,
@@ -13,4 +13,4 @@ export type {
   TreeItemAria,
   AriaTreeSelectionCheckboxProps,
   TreeSelectionCheckboxAria,
-} from './types';
+} from "./types";

package/src/tree/types.ts

@@ -3,8 +3,8 @@
  * Based on @react-aria/tree.
  */
 
-import type { JSX } from 'solid-js';
-import type { Key, TreeNode } from '@proyecto-viviana/solid-stately';
+import type { JSX } from "solid-js";
+import type { Key, TreeNode } from "@proyecto-viviana/solid-stately";
 
 /**
  * Props for createTree.
@@ -13,11 +13,11 @@ export interface AriaTreeProps {
   /** The unique id for the tree. */
   id?: string;
   /** Label for accessibility. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of an element that labels the tree. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of an element that describes the tree. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** Whether the tree is virtualized. */
   isVirtualized?: boolean;
   /** Handler called when an item action is triggered. */
@@ -25,7 +25,7 @@ export interface AriaTreeProps {
   /** Whether the tree is disabled. */
   isDisabled?: boolean;
   /** The writing direction for the tree. Determines expand/collapse key mapping. */
-  direction?: 'ltr' | 'rtl';
+  direction?: "ltr" | "rtl";
 }
 
 /**
@@ -44,8 +44,12 @@ export interface AriaTreeItemProps<T = unknown> {
   node: TreeNode<T>;
   /** Whether the item is rendered in a virtualized list. */
   isVirtualized?: boolean;
+  /** How selection should behave when pressing an item. */
+  selectionBehavior?: "replace" | "toggle";
   /** Handler called when this item's action is triggered. */
   onAction?: () => void;
+  /** Whether this item is disabled. */
+  isDisabled?: boolean;
   /** The text value for the item (used for aria-label on the row). */
   textValue?: string;
 }

package/src/utils/createDescription.ts

@@ -23,28 +23,16 @@
  * ```
  */
 
-import { createSignal, createEffect, onCleanup, type Accessor } from 'solid-js';
-import { isServer } from 'solid-js/web';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, createEffect, onCleanup, type Accessor } from "solid-js";
+import { isServer } from "solid-js/web";
 
 export interface DescriptionProps {
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
-// ============================================
-// STATE
-// ============================================
-
 let descriptionId = 0;
 const descriptionNodes = new Map<string, { refCount: number; element: Element }>();
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Creates an invisible description element and returns aria-describedby props.
  *
@@ -62,7 +50,6 @@ const descriptionNodes = new Map<string, { refCount: number; element: Element }>
  * ```
  */
 export function createDescription(description: Accessor<string | undefined>): DescriptionProps {
-  // SSR: return empty object
   if (isServer) {
     return {};
   }
@@ -80,26 +67,23 @@ export function createDescription(description: Accessor<string | undefined>): De
     let node = descriptionNodes.get(desc);
 
     if (!node) {
-      // Create new description element
       const newId = `solidaria-description-${descriptionId++}`;
       setId(newId);
 
-      const element = document.createElement('div');
+      const element = document.createElement("div");
       element.id = newId;
-      element.style.display = 'none';
+      element.style.display = "none";
       element.textContent = desc;
       document.body.appendChild(element);
 
       node = { refCount: 0, element };
       descriptionNodes.set(desc, node);
     } else {
-      // Reuse existing element
       setId(node.element.id);
     }
 
     node.refCount++;
 
-    // Cleanup when description changes or component unmounts
     onCleanup(() => {
       if (node && --node.refCount === 0) {
         node.element.remove();
@@ -108,9 +92,8 @@ export function createDescription(description: Accessor<string | undefined>): De
     });
   });
 
-  // Return reactive props object
   return {
-    get 'aria-describedby'() {
+    get "aria-describedby"() {
       const desc = description();
       return desc ? id() : undefined;
     },

package/src/utils/dom.ts

@@ -54,7 +54,7 @@ export function nodeContains(parent: Node | null, child: Node | null): boolean {
  */
 export function getEventTarget<T extends EventTarget>(event: Event): T | null {
   // Use composedPath to get the real target when using Shadow DOM
-  if (typeof event.composedPath === 'function') {
+  if (typeof event.composedPath === "function") {
     const path = event.composedPath();
     if (path.length > 0) {
       return path[0] as T;
@@ -74,22 +74,26 @@ export function isFocusable(element: Element): boolean {
 
   // Check native focusable elements
   const tagName = element.tagName.toLowerCase();
-  if (['input', 'select', 'textarea', 'button', 'a', 'area'].includes(tagName)) {
+  if (["input", "select", "textarea", "button", "a", "area"].includes(tagName)) {
     // For anchor elements, they must have href to be focusable
-    if (tagName === 'a' || tagName === 'area') {
-      return element.hasAttribute('href');
+    if (tagName === "a" || tagName === "area") {
+      return element.hasAttribute("href");
     }
     return true;
   }
 
-  // Check for tabIndex
-  const tabIndex = element.getAttribute('tabindex');
-  if (tabIndex != null && tabIndex !== '-1') {
+  // A negative tabIndex is not tabbable, but it is still programmatically focusable.
+  // React Aria's focusable selector includes all tabindex values for this reason.
+  const tabIndex = element.getAttribute("tabindex");
+  if (tabIndex != null) {
     return true;
   }
 
   // Check for contenteditable
-  if (element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') !== 'false') {
+  if (
+    element.hasAttribute("contenteditable") &&
+    element.getAttribute("contenteditable") !== "false"
+  ) {
     return true;
   }
 
@@ -103,16 +107,16 @@ export function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Elemen
   const { key, code } = event;
   const element = currentTarget as HTMLElement;
   const tagName = element.tagName.toLowerCase();
-  const role = element.getAttribute('role');
+  const role = element.getAttribute("role");
 
   // Only accept Enter and Space
-  const isActivationKey = key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space';
+  const isActivationKey = key === "Enter" || key === " " || key === "Spacebar" || code === "Space";
   if (!isActivationKey) {
     return false;
   }
 
   // Text inputs should handle their own keyboard events
-  if (tagName === 'textarea') {
+  if (tagName === "textarea") {
     return false;
   }
 
@@ -122,13 +126,13 @@ export function isValidKeyboardEvent(event: KeyboardEvent, currentTarget: Elemen
   }
 
   // Links should only respond to Enter, not Space
-  const isLink = role === 'link' || (!role && isHTMLAnchorLink(element));
-  if (isLink && key !== 'Enter') {
+  const isLink = role === "link" || (!role && isHTMLAnchorLink(element));
+  if (isLink && key !== "Enter") {
     return false;
   }
 
   // Input elements have specific key handling
-  if (tagName === 'input') {
+  if (tagName === "input") {
     return isValidInputKey(element as HTMLInputElement, key);
   }
 
@@ -142,14 +146,24 @@ export function isValidInputKey(target: HTMLInputElement, key: string): boolean
   const type = target.type.toLowerCase();
 
   // Checkbox and radio only respond to Space
-  if (type === 'checkbox' || type === 'radio') {
-    return key === ' ' || key === 'Spacebar';
+  if (type === "checkbox" || type === "radio") {
+    return key === " " || key === "Spacebar";
   }
 
   // Text-like inputs handle their own keyboard events
   const textInputTypes = [
-    'text', 'search', 'url', 'tel', 'email', 'password',
-    'date', 'month', 'week', 'time', 'datetime-local', 'number'
+    "text",
+    "search",
+    "url",
+    "tel",
+    "email",
+    "password",
+    "date",
+    "month",
+    "week",
+    "time",
+    "datetime-local",
+    "number",
   ];
   if (textInputTypes.includes(type)) {
     return false;
@@ -162,34 +176,18 @@ export function isValidInputKey(target: HTMLInputElement, key: string): boolean
  * Checks if an element is an HTML anchor link (has href attribute).
  */
 export function isHTMLAnchorLink(target: Element): boolean {
-  return target.tagName === 'A' && target.hasAttribute('href');
+  return target.tagName === "A" && target.hasAttribute("href");
 }
 
 /**
  * Whether to prevent default on keyboard events for this element.
  */
 export function shouldPreventDefaultKeyboard(target: Element, key: string): boolean {
-  const tagName = target.tagName.toLowerCase();
-
-  // Never prevent default on inputs - they handle their own behavior
-  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
-    return false;
-  }
-
-  // Don't prevent default on links for Enter (native navigation)
-  if ((tagName === 'a' || target.getAttribute('role') === 'link') && key === 'Enter') {
-    return false;
-  }
-
-  // Buttons with submit/reset type should not prevent default
-  if (tagName === 'button') {
-    const type = (target as HTMLButtonElement).type;
-    if (type === 'submit' || type === 'reset') {
-      return false;
-    }
+  if (target instanceof HTMLInputElement) {
+    return !isValidInputKey(target, key);
   }
 
-  return true;
+  return shouldPreventDefaultUp(target);
 }
 
 /**
@@ -199,19 +197,19 @@ export function shouldPreventDefaultUp(target: Element): boolean {
   const tagName = target.tagName.toLowerCase();
 
   // Never prevent default on form elements
-  if (tagName === 'input' || tagName === 'textarea' || tagName === 'select') {
+  if (tagName === "input" || tagName === "textarea" || tagName === "select") {
     return false;
   }
 
   // Don't prevent default on links
-  if (tagName === 'a' || target.getAttribute('role') === 'link') {
+  if (tagName === "a" || target.getAttribute("role") === "link") {
     return false;
   }
 
   // Buttons with submit/reset type should not prevent default
-  if (tagName === 'button') {
+  if (tagName === "button") {
     const type = (target as HTMLButtonElement).type;
-    if (type === 'submit' || type === 'reset') {
+    if (type === "submit" || type === "reset") {
       return false;
     }
   }
@@ -230,15 +228,15 @@ export function openLink(target: HTMLAnchorElement, event: Event, allowOpener =
   // Handle modifier keys for open-in-new-tab behavior
   const keyEvent = event as KeyboardEvent;
   const shouldOpenInNewTab =
-    linkTarget === '_blank' ||
+    linkTarget === "_blank" ||
     keyEvent?.metaKey ||
     keyEvent?.ctrlKey ||
     keyEvent?.shiftKey ||
     keyEvent?.altKey;
 
   if (shouldOpenInNewTab) {
-    const features = !allowOpener && rel?.includes('noopener') ? 'noopener' : undefined;
-    window.open(href, linkTarget || '_blank', features);
+    const features = !allowOpener && rel?.includes("noopener") ? "noopener" : undefined;
+    window.open(href, linkTarget || "_blank", features);
   } else {
     window.location.href = href;
   }
@@ -248,10 +246,6 @@ export function openLink(target: HTMLAnchorElement, event: Event, allowOpener =
 
 (openLink as { isOpening?: boolean }).isOpening = false;
 
-// ============================================
-// Scroll utilities
-// ============================================
-
 /**
  * Checks if an element is scrollable based on its overflow style.
  * @param node - The element to check
@@ -303,23 +297,36 @@ export function willOpenKeyboard(target: Element | null): boolean {
   const tagName = target.tagName.toLowerCase();
 
   // Inputs that open keyboard (not all input types do)
-  if (tagName === 'input') {
+  if (tagName === "input") {
     const type = (target as HTMLInputElement).type.toLowerCase();
     // These input types open the keyboard
     const keyboardTypes = [
-      'text', 'search', 'url', 'tel', 'email', 'password',
-      'date', 'month', 'week', 'time', 'datetime-local', 'number'
+      "text",
+      "search",
+      "url",
+      "tel",
+      "email",
+      "password",
+      "date",
+      "month",
+      "week",
+      "time",
+      "datetime-local",
+      "number",
     ];
     return keyboardTypes.includes(type);
   }
 
   // Textareas always open keyboard
-  if (tagName === 'textarea') {
+  if (tagName === "textarea") {
     return true;
   }
 
   // Contenteditable elements open keyboard
-  if (target.hasAttribute('contenteditable') && target.getAttribute('contenteditable') !== 'false') {
+  if (
+    target.hasAttribute("contenteditable") &&
+    target.getAttribute("contenteditable") !== "false"
+  ) {
     return true;
   }
 

package/src/utils/env.ts

@@ -4,17 +4,17 @@
  * Compatible with Node.js and Vite environments.
  */
 
-// Type-safe access to import.meta.env (Vite) and process.env
-type ImportMetaWithEnv = ImportMeta & { env?: Record<string, unknown> & { DEV?: boolean; PROD?: boolean } };
+type ImportMetaWithEnv = ImportMeta & {
+  env?: Record<string, unknown> & { DEV?: boolean; PROD?: boolean };
+};
 type ProcessLike = { env?: Record<string, string | undefined> };
 
 function getEnvVar(key: string): string | undefined {
-  // Check Vite's import.meta.env
   const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
-  if (importMetaEnv && typeof importMetaEnv[key] === 'string') {
+  if (importMetaEnv && typeof importMetaEnv[key] === "string") {
     return importMetaEnv[key] as string;
   }
-  // Check Node.js process.env via globalThis
+
   const processEnv = (globalThis as typeof globalThis & { process?: ProcessLike }).process?.env;
   if (processEnv) {
     return processEnv[key];
@@ -26,30 +26,28 @@ function getEnvVar(key: string): string | undefined {
  * Check if we're running in a test environment.
  */
 export function isTestEnv(): boolean {
-  return getEnvVar('NODE_ENV') === 'test';
+  return getEnvVar("NODE_ENV") === "test";
 }
 
 /**
  * Check if we're running in a development environment (not production).
  */
 export function isDevEnv(): boolean {
-  // Check Vite's DEV flag
   const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
   if (importMetaEnv?.DEV === true) {
     return true;
   }
-  const nodeEnv = getEnvVar('NODE_ENV');
-  return nodeEnv !== 'production';
+  const nodeEnv = getEnvVar("NODE_ENV");
+  return nodeEnv !== "production";
 }
 
 /**
  * Check if we're running in production.
  */
 export function isProdEnv(): boolean {
-  // Check Vite's PROD flag
   const importMetaEnv = (import.meta as ImportMetaWithEnv).env;
   if (importMetaEnv?.PROD === true) {
     return true;
   }
-  return getEnvVar('NODE_ENV') === 'production';
+  return getEnvVar("NODE_ENV") === "production";
 }

package/src/utils/events.ts

@@ -3,7 +3,7 @@
  * Based on @react-aria/utils event utilities.
  */
 
-import { isAndroid } from './platform';
+import { isAndroid } from "./platform";
 
 /**
  * Checks if a click event was generated from a virtual source like a screen reader.
@@ -11,14 +11,14 @@ import { isAndroid } from './platform';
  */
 export function isVirtualClick(event: MouseEvent | PointerEvent): boolean {
   // JAWS/NVDA with Firefox.
-  if ((event as PointerEvent).pointerType === '' && event.isTrusted) {
+  if ((event as PointerEvent).pointerType === "" && event.isTrusted) {
     return true;
   }
 
   // Android TalkBack's detail value varies depending on the event listener providing the event.
   // If pointerType is defined, event is from a click listener.
   if (isAndroid() && (event as PointerEvent).pointerType) {
-    return event.type === 'click' && (event as MouseEvent).buttons === 1;
+    return event.type === "click" && (event as MouseEvent).buttons === 1;
   }
 
   return event.detail === 0 && !(event as PointerEvent).pointerType;
@@ -40,7 +40,7 @@ export function isVirtualPointerEvent(event: PointerEvent): boolean {
       event.height === 1 &&
       event.pressure === 0 &&
       event.detail === 0 &&
-      event.pointerType === 'mouse')
+      event.pointerType === "mouse")
   );
 }
 
@@ -81,7 +81,7 @@ export function chain<T extends (...args: any[]) => any>(
 ): T {
   return ((...args: Parameters<T>) => {
     for (const callback of callbacks) {
-      if (typeof callback === 'function') {
+      if (typeof callback === "function") {
         callback(...args);
       }
     }
@@ -93,12 +93,12 @@ export function chain<T extends (...args: any[]) => any>(
  * Used for synthetic events where target needs to be modified.
  */
 export function setEventTarget<T extends Event>(event: T, target: EventTarget): void {
-  Object.defineProperty(event, 'target', {
+  Object.defineProperty(event, "target", {
     value: target,
     writable: false,
     configurable: true,
   });
-  Object.defineProperty(event, 'currentTarget', {
+  Object.defineProperty(event, "currentTarget", {
     value: target,
     writable: false,
     configurable: true,

package/src/utils/filterDOMProps.ts

@@ -5,63 +5,63 @@
  * This is a 1:1 port of @react-aria/utils filterDOMProps.
  */
 
-const DOMPropNames = new Set(['id']);
+const DOMPropNames = new Set(["id"]);
 
 const labelablePropNames = new Set([
-  'aria-label',
-  'aria-labelledby',
-  'aria-describedby',
-  'aria-details',
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details",
 ]);
 
 // See LinkDOMProps in dom.d.ts.
 const linkPropNames = new Set([
-  'href',
-  'hrefLang',
-  'target',
-  'rel',
-  'download',
-  'ping',
-  'referrerPolicy',
+  "href",
+  "hrefLang",
+  "target",
+  "rel",
+  "download",
+  "ping",
+  "referrerPolicy",
 ]);
 
-const globalAttrs = new Set(['dir', 'lang', 'hidden', 'inert', 'translate']);
+const globalAttrs = new Set(["dir", "lang", "hidden", "inert", "translate"]);
 
 const globalEvents = new Set([
-  'onClick',
-  'onAuxClick',
-  'onContextMenu',
-  'onDoubleClick',
-  'onMouseDown',
-  'onMouseEnter',
-  'onMouseLeave',
-  'onMouseMove',
-  'onMouseOut',
-  'onMouseOver',
-  'onMouseUp',
-  'onTouchCancel',
-  'onTouchEnd',
-  'onTouchMove',
-  'onTouchStart',
-  'onPointerDown',
-  'onPointerMove',
-  'onPointerUp',
-  'onPointerCancel',
-  'onPointerEnter',
-  'onPointerLeave',
-  'onPointerOver',
-  'onPointerOut',
-  'onGotPointerCapture',
-  'onLostPointerCapture',
-  'onScroll',
-  'onWheel',
-  'onAnimationStart',
-  'onAnimationEnd',
-  'onAnimationIteration',
-  'onTransitionCancel',
-  'onTransitionEnd',
-  'onTransitionRun',
-  'onTransitionStart',
+  "onClick",
+  "onAuxClick",
+  "onContextMenu",
+  "onDoubleClick",
+  "onMouseDown",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOut",
+  "onMouseOver",
+  "onMouseUp",
+  "onTouchCancel",
+  "onTouchEnd",
+  "onTouchMove",
+  "onTouchStart",
+  "onPointerDown",
+  "onPointerMove",
+  "onPointerUp",
+  "onPointerCancel",
+  "onPointerEnter",
+  "onPointerLeave",
+  "onPointerOver",
+  "onPointerOut",
+  "onGotPointerCapture",
+  "onLostPointerCapture",
+  "onScroll",
+  "onWheel",
+  "onAnimationStart",
+  "onAnimationEnd",
+  "onAnimationIteration",
+  "onTransitionCancel",
+  "onTransitionEnd",
+  "onTransitionRun",
+  "onTransitionStart",
 ]);
 
 const propRe = /^(data-.*)$/;
@@ -90,7 +90,7 @@ export interface FilterDOMPropsOptions {
  */
 export function filterDOMProps<T extends object>(
   props: T,
-  opts: FilterDOMPropsOptions = {}
+  opts: FilterDOMPropsOptions = {},
 ): Partial<T> {
   const { labelable, isLink, global, events = global, propNames } = opts;
   const filteredProps: Partial<T> = {};
@@ -104,7 +104,7 @@ export function filterDOMProps<T extends object>(
         (global && globalAttrs.has(prop)) ||
         (events &&
           (globalEvents.has(prop) ||
-            (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7))))) ||
+            (prop.endsWith("Capture") && globalEvents.has(prop.slice(0, -7))))) ||
         propNames?.has(prop) ||
         propRe.test(prop))
     ) {