@proyecto-viviana/solidaria 0.2.5 → 0.3.0

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))
     ) {

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

@@ -3,16 +3,26 @@
  * Based on @react-aria/utils platform detection.
  */
 
+interface NavigatorWithUserAgentData extends Navigator {
+  userAgentData?: {
+    platform?: string;
+  };
+}
+
+function getNavigator(): NavigatorWithUserAgentData | null {
+  if (typeof window === "undefined" || window.navigator == null) return null;
+  return window.navigator as NavigatorWithUserAgentData;
+}
+
 function testPlatform(re: RegExp): boolean {
-  return typeof window !== 'undefined' && window.navigator != null
-    ? re.test(window.navigator.platform || (window.navigator as any).userAgentData?.platform || '')
-    : false;
+  const nav = getNavigator();
+  if (!nav) return false;
+  return re.test(nav.platform || nav.userAgentData?.platform || "");
 }
 
 function testUserAgent(re: RegExp): boolean {
-  return typeof window !== 'undefined' && window.navigator != null
-    ? re.test(window.navigator.userAgent)
-    : false;
+  const nav = getNavigator();
+  return nav ? re.test(nav.userAgent) : false;
 }
 
 export function isMac(): boolean {