@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/utils/focus.ts

@@ -3,7 +3,7 @@
  * Based on @react-aria/utils focus utilities.
  */
 
-import { getOwnerDocument } from './dom';
+import { getEventTarget, getOwnerDocument, getOwnerWindow, isFocusable } from "./dom";
 
 /**
  * Focuses an element without scrolling the page.
@@ -12,12 +12,10 @@ import { getOwnerDocument } from './dom';
 export function focusWithoutScrolling(element: HTMLElement | null): void {
   if (!element) return;
 
-  // Try using the modern preventScroll option
   try {
     element.focus({ preventScroll: true });
   } catch {
     // Fallback for browsers that don't support preventScroll
-    // Save scroll positions and restore after focus
     const scrollableElements = getScrollableAncestors(element);
     const scrollPositions = scrollableElements.map((el) => ({
       element: el,
@@ -27,7 +25,6 @@ export function focusWithoutScrolling(element: HTMLElement | null): void {
 
     element.focus();
 
-    // Restore scroll positions
     for (const { element: el, scrollTop, scrollLeft } of scrollPositions) {
       el.scrollTop = scrollTop;
       el.scrollLeft = scrollLeft;
@@ -48,10 +45,10 @@ function getScrollableAncestors(element: Element): Element[] {
     const overflowX = style.overflowX;
 
     if (
-      overflowY === 'auto' ||
-      overflowY === 'scroll' ||
-      overflowX === 'auto' ||
-      overflowX === 'scroll'
+      overflowY === "auto" ||
+      overflowY === "scroll" ||
+      overflowX === "auto" ||
+      overflowX === "scroll"
     ) {
       ancestors.push(parent);
     }
@@ -66,82 +63,77 @@ function getScrollableAncestors(element: Element): Element[] {
   return ancestors;
 }
 
-// State for preventFocus
-let ignoreFocus = false;
-let preventFocusTimeout: ReturnType<typeof setTimeout> | null = null;
-
 /**
  * Prevents focus from moving to a new element temporarily.
  * Used when clicking on a button that shouldn't steal focus.
  */
-export function preventFocus(target: Element): void {
-  // Find the closest focusable ancestor
-  const focusableAncestor = findFocusableAncestor(target);
-  if (!focusableAncestor) return;
-
-  const document = getOwnerDocument(target);
-  const activeElement = document.activeElement;
-
-  // Set flag to ignore next focus event
-  ignoreFocus = true;
-
-  // Capture focus events and prevent them from changing focus
-  const onFocus = (e: Event) => {
-    if (ignoreFocus) {
-      e.stopImmediatePropagation();
-      // Refocus the original element if focus moved
-      if (activeElement && activeElement !== document.body) {
-        (activeElement as HTMLElement).focus();
+export function preventFocus(target: Element | null): (() => void) | undefined {
+  while (target && !isFocusable(target)) {
+    target = target.parentElement;
+  }
+
+  const ownerWindow = getOwnerWindow(target);
+  const activeElement = ownerWindow.document.activeElement as HTMLElement | null;
+
+  if (!activeElement || activeElement === target) {
+    return undefined;
+  }
+
+  let isRefocusing = false;
+
+  const onBlur = (event: FocusEvent) => {
+    if (getEventTarget(event) === activeElement || isRefocusing) {
+      event.stopImmediatePropagation();
+    }
+  };
+
+  const onFocusOut = (event: FocusEvent) => {
+    if (getEventTarget(event) === activeElement || isRefocusing) {
+      event.stopImmediatePropagation();
+
+      if (!target && !isRefocusing) {
+        isRefocusing = true;
+        focusWithoutScrolling(activeElement);
+        cleanup();
       }
     }
   };
 
-  const onBlur = (e: Event) => {
-    if (ignoreFocus) {
-      e.stopImmediatePropagation();
+  const onFocus = (event: FocusEvent) => {
+    if (getEventTarget(event) === target || isRefocusing) {
+      event.stopImmediatePropagation();
     }
   };
 
-  // Use capturing to intercept focus before it reaches elements
-  // Cast to HTMLElement to access focus event listeners
-  const el = focusableAncestor as HTMLElement;
-  el.addEventListener('focus', onFocus, true);
-  el.addEventListener('blur', onBlur, true);
-  el.addEventListener('focusin', onFocus, true);
-  el.addEventListener('focusout', onBlur, true);
-
-  // Clean up after the current event cycle
-  if (preventFocusTimeout != null) {
-    clearTimeout(preventFocusTimeout);
-  }
+  const onFocusIn = (event: FocusEvent) => {
+    if (getEventTarget(event) === target || isRefocusing) {
+      event.stopImmediatePropagation();
 
-  preventFocusTimeout = setTimeout(() => {
-    ignoreFocus = false;
-    el.removeEventListener('focus', onFocus, true);
-    el.removeEventListener('blur', onBlur, true);
-    el.removeEventListener('focusin', onFocus, true);
-    el.removeEventListener('focusout', onBlur, true);
-    preventFocusTimeout = null;
-  }, 0);
-}
+      if (!isRefocusing) {
+        isRefocusing = true;
+        focusWithoutScrolling(activeElement);
+        cleanup();
+      }
+    }
+  };
 
-/**
- * Finds the closest focusable ancestor or the element itself.
- */
-function findFocusableAncestor(element: Element): Element | null {
-  let current: Element | null = element;
+  ownerWindow.addEventListener("blur", onBlur, true);
+  ownerWindow.addEventListener("focusout", onFocusOut, true);
+  ownerWindow.addEventListener("focusin", onFocusIn, true);
+  ownerWindow.addEventListener("focus", onFocus, true);
 
-  while (current) {
-    if (
-      current.hasAttribute('tabindex') ||
-      ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA', 'A'].includes(current.tagName)
-    ) {
-      return current;
-    }
-    current = current.parentElement;
+  const raf = ownerWindow.requestAnimationFrame(cleanup);
+
+  function cleanup() {
+    ownerWindow.cancelAnimationFrame(raf);
+    ownerWindow.removeEventListener("blur", onBlur, true);
+    ownerWindow.removeEventListener("focusout", onFocusOut, true);
+    ownerWindow.removeEventListener("focusin", onFocusIn, true);
+    ownerWindow.removeEventListener("focus", onFocus, true);
+    isRefocusing = false;
   }
 
-  return element;
+  return cleanup;
 }
 
 /**

package/src/utils/geometry.ts

@@ -23,12 +23,10 @@ export interface EventPoint {
  * Checks if two rectangles overlap.
  */
 export function areRectanglesOverlapping(a: Rect, b: Rect): boolean {
-  // Check if one rectangle is to the left of the other
   if (a.left > b.right || b.left > a.right) {
     return false;
   }
 
-  // Check if one rectangle is above the other
   if (a.top > b.bottom || b.top > a.bottom) {
     return false;
   }
@@ -44,7 +42,6 @@ export function getPointClientRect(point: EventPoint): Rect {
   let offsetX = 0;
   let offsetY = 0;
 
-  // Use width/height if available (PointerEvent)
   if (point.width !== undefined && point.width > 0) {
     offsetX = point.width / 2;
   } else if (point.radiusX !== undefined && point.radiusX > 0) {
@@ -80,7 +77,7 @@ export function isPointOverTarget(point: EventPoint, target: Element): boolean {
       bottom: rect.bottom,
       left: rect.left,
     },
-    pointRect
+    pointRect,
   );
 }
 

package/src/utils/globalListeners.ts

@@ -5,7 +5,7 @@
  * In SolidJS, we use onCleanup for automatic cleanup instead of useEffect return.
  */
 
-import { onCleanup } from 'solid-js';
+import { onCleanup } from "solid-js";
 
 export interface GlobalListenerOptions extends AddEventListenerOptions {
   /** Whether to add the listener to the window instead of document */
@@ -31,17 +31,17 @@ export function createGlobalListeners() {
   function addGlobalListener<K extends keyof DocumentEventMap>(
     type: K,
     handler: (ev: DocumentEventMap[K]) => void,
-    options?: GlobalListenerOptions
+    options?: GlobalListenerOptions,
   ): void;
   function addGlobalListener<K extends keyof WindowEventMap>(
     type: K,
     handler: (ev: WindowEventMap[K]) => void,
-    options?: GlobalListenerOptions & { isWindow: true }
+    options?: GlobalListenerOptions & { isWindow: true },
   ): void;
   function addGlobalListener(
     type: string,
     handler: EventListener,
-    options?: GlobalListenerOptions
+    options?: GlobalListenerOptions,
   ): void {
     const target = options?.isWindow ? window : document;
     const listenerOptions = options
@@ -62,17 +62,17 @@ export function createGlobalListeners() {
   function removeGlobalListener<K extends keyof DocumentEventMap>(
     type: K,
     handler: (ev: DocumentEventMap[K]) => void,
-    options?: AddEventListenerOptions
+    options?: AddEventListenerOptions,
   ): void;
   function removeGlobalListener<K extends keyof WindowEventMap>(
     type: K,
     handler: (ev: WindowEventMap[K]) => void,
-    options?: AddEventListenerOptions & { isWindow: true }
+    options?: AddEventListenerOptions & { isWindow: true },
   ): void;
   function removeGlobalListener(
     type: string,
     handler: EventListener,
-    options?: AddEventListenerOptions & { isWindow?: boolean }
+    options?: AddEventListenerOptions & { isWindow?: boolean },
   ): void {
     const target = options?.isWindow ? window : document;
     const listenerOptions = options
@@ -89,7 +89,7 @@ export function createGlobalListeners() {
         l.target === target &&
         l.type === type &&
         l.handler === handler &&
-        l.options?.capture === listenerOptions?.capture
+        l.options?.capture === listenerOptions?.capture,
     );
     if (index !== -1) {
       listeners.splice(index, 1);
@@ -123,7 +123,7 @@ export function createGlobalListeners() {
 export function addGlobalListenerOnce<K extends keyof DocumentEventMap>(
   type: K,
   handler: (ev: DocumentEventMap[K]) => void,
-  options?: GlobalListenerOptions
+  options?: GlobalListenerOptions,
 ): () => void {
   const target = options?.isWindow ? window : document;
   const listenerOptions = options

package/src/utils/index.ts

@@ -1,10 +1,8 @@
-export { mergeProps } from './mergeProps';
-export { filterDOMProps, type FilterDOMPropsOptions } from './filterDOMProps';
+export { mergeProps } from "./mergeProps";
+export { filterDOMProps, type FilterDOMPropsOptions } from "./filterDOMProps";
 
-// Reactivity utilities
-export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from './reactivity';
+export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from "./reactivity";
 
-// Platform detection
 export {
   isMac,
   isIPhone,
@@ -15,9 +13,8 @@ export {
   isChrome,
   isAndroid,
   isFirefox,
-} from './platform';
+} from "./platform";
 
-// DOM utilities
 export {
   getOwnerDocument,
   getOwnerWindow,
@@ -33,9 +30,8 @@ export {
   isScrollable,
   getScrollParent,
   willOpenKeyboard,
-} from './dom';
+} from "./dom";
 
-// Geometry utilities
 export {
   areRectanglesOverlapping,
   getPointClientRect,
@@ -44,37 +40,31 @@ export {
   getTouchById,
   type Rect,
   type EventPoint,
-} from './geometry';
+} from "./geometry";
 
-// Event utilities
 export {
   isVirtualClick,
   isVirtualPointerEvent,
   createMouseEvent,
   chain,
   setEventTarget,
-} from './events';
+} from "./events";
 
-// Text selection management
-export { disableTextSelection, restoreTextSelection } from './textSelection';
+export { disableTextSelection, restoreTextSelection } from "./textSelection";
 
-// Focus utilities
-export { focusWithoutScrolling, focusSafely, preventFocus } from './focus';
+export { focusWithoutScrolling, focusSafely, preventFocus } from "./focus";
 
-// Global listener management
 export {
   createGlobalListeners,
   addGlobalListenerOnce,
   type GlobalListenerOptions,
-} from './globalListeners';
+} from "./globalListeners";
 
-// Environment detection
-export { isTestEnv, isDevEnv, isProdEnv } from './env';
+export { isTestEnv, isDevEnv, isProdEnv } from "./env";
 
-// Description utility for aria-describedby
 export {
   createDescription,
   type DescriptionProps,
   getDescriptionNodeCount,
   clearDescriptionNodes,
-} from './createDescription';
+} from "./createDescription";

package/src/utils/mergeProps.ts

@@ -9,30 +9,57 @@ type Props = { [key: string]: unknown };
  * @param args - Props objects to merge
  * @returns Merged props object. Use type parameter R to specify the result type.
  */
-export function mergeProps<R extends object = Record<string, unknown>, T extends object = object>(...args: T[]): R {
+export function mergeProps<R extends object = Record<string, unknown>, T extends object = object>(
+  ...args: T[]
+): R {
   const result: Props = {};
+  const setResultValue = (key: string, value: unknown) => {
+    const resultDescriptor = Object.getOwnPropertyDescriptor(result, key);
+
+    if (resultDescriptor?.get || resultDescriptor?.set) {
+      Object.defineProperty(result, key, {
+        enumerable: true,
+        configurable: true,
+        writable: true,
+        value,
+      });
+      return;
+    }
+
+    result[key] = value;
+  };
 
   for (const props of args) {
     for (const key in props) {
-      const value = props[key];
+      const descriptor = Object.getOwnPropertyDescriptor(props, key);
+      const hasGetter = typeof descriptor?.get === "function";
+      const getValue = () => (hasGetter ? descriptor.get!.call(props) : props[key]);
+      const value = getValue();
       const existingValue = result[key];
 
       if (
-        typeof existingValue === 'function' &&
-        typeof value === 'function' &&
-        key.startsWith('on') &&
+        typeof existingValue === "function" &&
+        typeof value === "function" &&
+        key.startsWith("on") &&
         key[2] === key[2]?.toUpperCase()
       ) {
-        // Chain event handlers
-        result[key] = chainHandlers(existingValue as Function, value as Function);
-      } else if (key === 'class' || key === 'className') {
-        // Merge class names
-        result[key] = mergeClassNames(existingValue, value);
-      } else if (key === 'style' && typeof existingValue === 'object' && typeof value === 'object') {
-        // Merge style objects
-        result[key] = { ...(existingValue as object), ...(value as object) };
+        setResultValue(key, chainHandlers(existingValue as Function, value as Function));
+      } else if (key === "class" || key === "className") {
+        setResultValue(key, mergeClassNames(existingValue, value));
+      } else if (
+        key === "style" &&
+        typeof existingValue === "object" &&
+        typeof value === "object"
+      ) {
+        setResultValue(key, { ...(existingValue as object), ...(value as object) });
+      } else if (hasGetter && (value !== undefined || !(key in result))) {
+        Object.defineProperty(result, key, {
+          enumerable: true,
+          configurable: true,
+          get: getValue,
+        });
       } else if (value !== undefined) {
-        result[key] = value;
+        setResultValue(key, value);
       }
     }
   }
@@ -48,5 +75,5 @@ function chainHandlers(existingHandler: Function, newHandler: Function) {
 }
 
 function mergeClassNames(...classes: unknown[]): string {
-  return classes.filter(Boolean).join(' ');
+  return classes.filter(Boolean).join(" ");
 }

package/src/utils/platform.ts

@@ -10,14 +10,14 @@ interface NavigatorWithUserAgentData extends Navigator {
 }
 
 function getNavigator(): NavigatorWithUserAgentData | null {
-  if (typeof window === 'undefined' || window.navigator == null) return null;
+  if (typeof window === "undefined" || window.navigator == null) return null;
   return window.navigator as NavigatorWithUserAgentData;
 }
 
 function testPlatform(re: RegExp): boolean {
   const nav = getNavigator();
   if (!nav) return false;
-  return re.test(nav.platform || nav.userAgentData?.platform || '');
+  return re.test(nav.platform || nav.userAgentData?.platform || "");
 }
 
 function testUserAgent(re: RegExp): boolean {

package/src/utils/reactivity.ts

@@ -4,7 +4,7 @@
  * Provides type-safe utilities for working with SolidJS reactivity patterns.
  */
 
-import { Accessor } from 'solid-js';
+import { Accessor } from "solid-js";
 
 /**
  * A value that may be either a raw value or an accessor function.
@@ -20,7 +20,7 @@ export type MaybeAccessor<T> = T | Accessor<T>;
  * @param value - The value or accessor to unwrap.
  */
 export function access<T>(value: MaybeAccessor<T>): T {
-  return typeof value === 'function' ? (value as Accessor<T>)() : value;
+  return typeof value === "function" ? (value as Accessor<T>)() : value;
 }
 
 /**
@@ -32,5 +32,5 @@ export type MaybeAccessorValue<T> = T | undefined | Accessor<T | undefined>;
  * Checks if a value is an accessor function.
  */
 export function isAccessor<T>(value: MaybeAccessor<T>): value is Accessor<T> {
-  return typeof value === 'function';
+  return typeof value === "function";
 }

package/src/utils/textSelection.ts

@@ -7,14 +7,14 @@
  * we can just set it on the target element.
  */
 
-import { isIOS } from './platform';
-import { getOwnerDocument } from './dom';
+import { isIOS } from "./platform";
+import { getOwnerDocument } from "./dom";
 
-type State = 'default' | 'disabled' | 'restoring';
+type State = "default" | "disabled" | "restoring";
 
 // Global state to manage text selection across multiple press interactions
-let state: State = 'default';
-let savedUserSelect = '';
+let state: State = "default";
+let savedUserSelect = "";
 let modifiedElementMap = new WeakMap<HTMLElement, string>();
 
 /**
@@ -24,18 +24,18 @@ let modifiedElementMap = new WeakMap<HTMLElement, string>();
 export function disableTextSelection(target?: HTMLElement): void {
   if (isIOS()) {
     // iOS requires disabling selection on the entire page
-    if (state === 'default') {
+    if (state === "default") {
       const documentElement = getOwnerDocument(target).documentElement;
       savedUserSelect = documentElement.style.webkitUserSelect;
-      documentElement.style.webkitUserSelect = 'none';
+      documentElement.style.webkitUserSelect = "none";
     }
-    state = 'disabled';
+    state = "disabled";
   } else if (target) {
     // On other platforms, just disable on the target
     const element = target as HTMLElement;
     if (!modifiedElementMap.has(element)) {
       modifiedElementMap.set(element, element.style.userSelect);
-      element.style.userSelect = 'none';
+      element.style.userSelect = "none";
     }
   }
 }
@@ -47,11 +47,11 @@ export function disableTextSelection(target?: HTMLElement): void {
 export function restoreTextSelection(target?: HTMLElement): void {
   if (isIOS()) {
     // Don't restore if another press is active
-    if (state !== 'disabled') {
+    if (state !== "disabled") {
       return;
     }
 
-    state = 'restoring';
+    state = "restoring";
 
     // Wait for iOS to finish any pending selection actions
     // 300ms is the iOS long-press delay
@@ -59,15 +59,15 @@ export function restoreTextSelection(target?: HTMLElement): void {
       // Use runAfterTransition to avoid CSS recomputation during animation
       runAfterTransition(() => {
         // Only restore if still in 'restoring' state (no new press started)
-        if (state === 'restoring') {
+        if (state === "restoring") {
           const documentElement = getOwnerDocument(target).documentElement;
           if (savedUserSelect) {
             documentElement.style.webkitUserSelect = savedUserSelect;
           } else {
-            documentElement.style.removeProperty('-webkit-user-select');
+            documentElement.style.removeProperty("-webkit-user-select");
           }
-          savedUserSelect = '';
-          state = 'default';
+          savedUserSelect = "";
+          state = "default";
         }
       });
     }, 300);
@@ -79,7 +79,7 @@ export function restoreTextSelection(target?: HTMLElement): void {
       if (savedValue) {
         element.style.userSelect = savedValue;
       } else {
-        element.style.removeProperty('user-select');
+        element.style.removeProperty("user-select");
       }
       modifiedElementMap.delete(element);
     }

package/src/visually-hidden/createVisuallyHidden.ts

@@ -7,14 +7,10 @@
  * Port of react-aria's useVisuallyHidden.
  */
 
-import { type Accessor, type JSX, createMemo, createSignal } from 'solid-js';
-import { createFocusWithin } from '../interactions/createFocusWithin';
-import { access, type MaybeAccessor } from '../utils';
-import { mergeProps } from '../utils/mergeProps';
-
-// ============================================
-// TYPES
-// ============================================
+import { type Accessor, type JSX, createMemo, createSignal } from "solid-js";
+import { createFocusWithin } from "../interactions/createFocusWithin";
+import { access, type MaybeAccessor } from "../utils";
+import { mergeProps } from "../utils/mergeProps";
 
 export interface AriaVisuallyHiddenProps {
   /** Inline styles to merge with the visually hidden styles. */
@@ -28,31 +24,23 @@ export interface VisuallyHiddenAria {
   visuallyHiddenProps: Accessor<JSX.HTMLAttributes<HTMLElement>>;
 }
 
-// ============================================
-// STYLES
-// ============================================
-
 /**
  * CSS styles that visually hide an element while keeping it accessible.
  * These styles ensure the element is read by screen readers but not visible on screen.
  */
 export const visuallyHiddenStyles: JSX.CSSProperties = {
-  border: '0',
-  clip: 'rect(0 0 0 0)',
-  'clip-path': 'inset(50%)',
-  height: '1px',
-  margin: '-1px',
-  overflow: 'hidden',
-  padding: '0',
-  position: 'absolute',
-  width: '1px',
-  'white-space': 'nowrap',
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  "clip-path": "inset(50%)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  "white-space": "nowrap",
 };
 
-// ============================================
-// HOOK
-// ============================================
-
 /**
  * Provides props for an element that hides its children visually
  * but keeps content visible to assistive technology.
@@ -87,7 +75,7 @@ export const visuallyHiddenStyles: JSX.CSSProperties = {
  * ```
  */
 export function createVisuallyHidden(
-  props: MaybeAccessor<AriaVisuallyHiddenProps> = {}
+  props: MaybeAccessor<AriaVisuallyHiddenProps> = {},
 ): VisuallyHiddenAria {
   const [isFocused, setIsFocused] = createSignal(false);
 
@@ -129,7 +117,7 @@ export function createVisuallyHidden(
             },
           }
         : {},
-      { style: combinedStyles() }
+      { style: combinedStyles() },
     ),
   }));
 

package/src/visually-hidden/index.ts

@@ -3,4 +3,4 @@ export {
   visuallyHiddenStyles,
   type AriaVisuallyHiddenProps,
   type VisuallyHiddenAria,
-} from './createVisuallyHidden';
+} from "./createVisuallyHidden";