@proyecto-viviana/solidaria 0.0.1 → 0.0.2

package/src/utils/focus.ts

@@ -0,0 +1,151 @@
+/**
+ * Focus management utilities.
+ * Based on @react-aria/utils focus utilities.
+ */
+
+import { getOwnerDocument } from './dom';
+
+/**
+ * Focuses an element without scrolling the page.
+ * Uses preventScroll option with fallback for older browsers.
+ */
+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,
+      scrollTop: el.scrollTop,
+      scrollLeft: el.scrollLeft,
+    }));
+
+    element.focus();
+
+    // Restore scroll positions
+    for (const { element: el, scrollTop, scrollLeft } of scrollPositions) {
+      el.scrollTop = scrollTop;
+      el.scrollLeft = scrollLeft;
+    }
+  }
+}
+
+/**
+ * Gets all scrollable ancestors of an element.
+ */
+function getScrollableAncestors(element: Element): Element[] {
+  const ancestors: Element[] = [];
+  let parent = element.parentElement;
+
+  while (parent) {
+    const style = getComputedStyle(parent);
+    const overflowY = style.overflowY;
+    const overflowX = style.overflowX;
+
+    if (
+      overflowY === 'auto' ||
+      overflowY === 'scroll' ||
+      overflowX === 'auto' ||
+      overflowX === 'scroll'
+    ) {
+      ancestors.push(parent);
+    }
+
+    parent = parent.parentElement;
+  }
+
+  // Also include the document scrolling element
+  const doc = getOwnerDocument(element);
+  ancestors.push(doc.documentElement);
+
+  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();
+      }
+    }
+  };
+
+  const onBlur = (e: Event) => {
+    if (ignoreFocus) {
+      e.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);
+  }
+
+  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);
+}
+
+/**
+ * Finds the closest focusable ancestor or the element itself.
+ */
+function findFocusableAncestor(element: Element): Element | null {
+  let current: Element | null = element;
+
+  while (current) {
+    if (
+      current.hasAttribute('tabindex') ||
+      ['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA', 'A'].includes(current.tagName)
+    ) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+
+  return element;
+}
+
+/**
+ * Safely focuses an element, alias for focusWithoutScrolling.
+ * This matches the react-aria focusSafely function name.
+ */
+export const focusSafely = focusWithoutScrolling;

package/src/utils/geometry.ts

@@ -0,0 +1,115 @@
+/**
+ * Geometry utilities for pointer/touch hit testing.
+ * Based on @react-aria/interactions geometry utilities.
+ */
+
+export interface Rect {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface EventPoint {
+  clientX: number;
+  clientY: number;
+  width?: number;
+  height?: number;
+  radiusX?: number;
+  radiusY?: number;
+}
+
+/**
+ * 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;
+  }
+
+  return true;
+}
+
+/**
+ * Gets the bounding rectangle for an event point (touch/pointer).
+ * Takes into account the size of the touch point.
+ */
+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) {
+    // Fallback to radiusX/radiusY (Touch)
+    offsetX = point.radiusX;
+  }
+
+  if (point.height !== undefined && point.height > 0) {
+    offsetY = point.height / 2;
+  } else if (point.radiusY !== undefined && point.radiusY > 0) {
+    offsetY = point.radiusY;
+  }
+
+  return {
+    top: point.clientY - offsetY,
+    right: point.clientX + offsetX,
+    bottom: point.clientY + offsetY,
+    left: point.clientX - offsetX,
+  };
+}
+
+/**
+ * Checks if a pointer/touch point is over an element.
+ */
+export function isPointOverTarget(point: EventPoint, target: Element): boolean {
+  const rect = target.getBoundingClientRect();
+  const pointRect = getPointClientRect(point);
+
+  return areRectanglesOverlapping(
+    {
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left,
+    },
+    pointRect
+  );
+}
+
+/**
+ * Gets the first touch from a TouchEvent's targetTouches.
+ */
+export function getTouchFromEvent(event: TouchEvent): Touch | null {
+  const { targetTouches } = event;
+  if (targetTouches.length > 0) {
+    return targetTouches[0];
+  }
+  return null;
+}
+
+/**
+ * Finds a touch by its identifier in changedTouches.
+ */
+export function getTouchById(event: TouchEvent, pointerId: number | null): Touch | null {
+  if (pointerId == null) {
+    return null;
+  }
+
+  const { changedTouches } = event;
+  for (let i = 0; i < changedTouches.length; i++) {
+    const touch = changedTouches[i];
+    if (touch.identifier === pointerId) {
+      return touch;
+    }
+  }
+
+  return null;
+}

package/src/utils/globalListeners.ts

@@ -0,0 +1,142 @@
+/**
+ * Global listener management utility.
+ * Based on @react-aria/utils useGlobalListeners hook, adapted for SolidJS.
+ *
+ * In SolidJS, we use onCleanup for automatic cleanup instead of useEffect return.
+ */
+
+import { onCleanup } from 'solid-js';
+
+export interface GlobalListenerOptions extends AddEventListenerOptions {
+  /** Whether to add the listener to the window instead of document */
+  isWindow?: boolean;
+}
+
+/**
+ * Creates a manager for global event listeners that automatically cleans up.
+ * Use this in a component to register document/window level listeners
+ * that will be removed when the component unmounts.
+ */
+export function createGlobalListeners() {
+  const listeners: Array<{
+    target: EventTarget;
+    type: string;
+    handler: EventListener;
+    options?: AddEventListenerOptions;
+  }> = [];
+
+  /**
+   * Adds a global event listener.
+   */
+  function addGlobalListener<K extends keyof DocumentEventMap>(
+    type: K,
+    handler: (ev: DocumentEventMap[K]) => void,
+    options?: GlobalListenerOptions
+  ): void;
+  function addGlobalListener<K extends keyof WindowEventMap>(
+    type: K,
+    handler: (ev: WindowEventMap[K]) => void,
+    options?: GlobalListenerOptions & { isWindow: true }
+  ): void;
+  function addGlobalListener(
+    type: string,
+    handler: EventListener,
+    options?: GlobalListenerOptions
+  ): void {
+    const target = options?.isWindow ? window : document;
+    const listenerOptions = options
+      ? {
+          capture: options.capture,
+          passive: options.passive,
+          once: options.once,
+        }
+      : undefined;
+
+    target.addEventListener(type, handler, listenerOptions);
+    listeners.push({ target, type, handler, options: listenerOptions });
+  }
+
+  /**
+   * Removes a specific global event listener.
+   */
+  function removeGlobalListener<K extends keyof DocumentEventMap>(
+    type: K,
+    handler: (ev: DocumentEventMap[K]) => void,
+    options?: AddEventListenerOptions
+  ): void;
+  function removeGlobalListener<K extends keyof WindowEventMap>(
+    type: K,
+    handler: (ev: WindowEventMap[K]) => void,
+    options?: AddEventListenerOptions & { isWindow: true }
+  ): void;
+  function removeGlobalListener(
+    type: string,
+    handler: EventListener,
+    options?: AddEventListenerOptions & { isWindow?: boolean }
+  ): void {
+    const target = options?.isWindow ? window : document;
+    const listenerOptions = options
+      ? {
+          capture: options.capture,
+        }
+      : undefined;
+
+    target.removeEventListener(type, handler, listenerOptions);
+
+    // Remove from tracked listeners
+    const index = listeners.findIndex(
+      (l) =>
+        l.target === target &&
+        l.type === type &&
+        l.handler === handler &&
+        l.options?.capture === listenerOptions?.capture
+    );
+    if (index !== -1) {
+      listeners.splice(index, 1);
+    }
+  }
+
+  /**
+   * Removes all registered global listeners.
+   */
+  function removeAllGlobalListeners(): void {
+    for (const { target, type, handler, options } of listeners) {
+      target.removeEventListener(type, handler, options);
+    }
+    listeners.length = 0;
+  }
+
+  // Automatically clean up when the component/scope is disposed
+  onCleanup(removeAllGlobalListeners);
+
+  return {
+    addGlobalListener,
+    removeGlobalListener,
+    removeAllGlobalListeners,
+  };
+}
+
+/**
+ * Simple utility to add a single global listener with automatic cleanup.
+ * For one-off listeners where the full manager isn't needed.
+ */
+export function addGlobalListenerOnce<K extends keyof DocumentEventMap>(
+  type: K,
+  handler: (ev: DocumentEventMap[K]) => void,
+  options?: GlobalListenerOptions
+): () => void {
+  const target = options?.isWindow ? window : document;
+  const listenerOptions = options
+    ? {
+        capture: options.capture,
+        passive: options.passive,
+        once: options.once,
+      }
+    : undefined;
+
+  target.addEventListener(type, handler as EventListener, listenerOptions);
+
+  return () => {
+    target.removeEventListener(type, handler as EventListener, listenerOptions);
+  };
+}

package/src/utils/index.ts

@@ -0,0 +1,66 @@
+export { mergeProps } from './mergeProps';
+export { filterDOMProps, type FilterDOMPropsOptions } from './filterDOMProps';
+
+// Reactivity utilities
+export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from './reactivity';
+
+// Platform detection
+export {
+  isMac,
+  isIPhone,
+  isIPad,
+  isIOS,
+  isAppleDevice,
+  isWebKit,
+  isChrome,
+  isAndroid,
+  isFirefox,
+} from './platform';
+
+// DOM utilities
+export {
+  getOwnerDocument,
+  getOwnerWindow,
+  nodeContains,
+  getEventTarget,
+  isFocusable,
+  isValidKeyboardEvent,
+  isValidInputKey,
+  isHTMLAnchorLink,
+  shouldPreventDefaultKeyboard,
+  shouldPreventDefaultUp,
+  openLink,
+} from './dom';
+
+// Geometry utilities
+export {
+  areRectanglesOverlapping,
+  getPointClientRect,
+  isPointOverTarget,
+  getTouchFromEvent,
+  getTouchById,
+  type Rect,
+  type EventPoint,
+} from './geometry';
+
+// Event utilities
+export {
+  isVirtualClick,
+  isVirtualPointerEvent,
+  createMouseEvent,
+  chain,
+  setEventTarget,
+} from './events';
+
+// Text selection management
+export { disableTextSelection, restoreTextSelection } from './textSelection';
+
+// Focus utilities
+export { focusWithoutScrolling, focusSafely, preventFocus } from './focus';
+
+// Global listener management
+export {
+  createGlobalListeners,
+  addGlobalListenerOnce,
+  type GlobalListenerOptions,
+} from './globalListeners';

package/src/utils/mergeProps.ts

@@ -0,0 +1,49 @@
+type Props = { [key: string]: unknown };
+
+/**
+ * Merges multiple props objects together, handling event handlers specially
+ * by chaining them rather than replacing.
+ *
+ * Based on react-aria's mergeProps but adapted for SolidJS.
+ */
+export function mergeProps<T extends object>(...args: T[]): Record<string, unknown> {
+  const result: Props = {};
+
+  for (const props of args) {
+    for (const key in props) {
+      const value = props[key];
+      const existingValue = result[key];
+
+      if (
+        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) };
+      } else if (value !== undefined) {
+        result[key] = value;
+      }
+    }
+  }
+
+  return result;
+}
+
+function chainHandlers(existingHandler: Function, newHandler: Function) {
+  return (...args: unknown[]) => {
+    existingHandler(...args);
+    newHandler(...args);
+  };
+}
+
+function mergeClassNames(...classes: unknown[]): string {
+  return classes.filter(Boolean).join(' ');
+}

package/src/utils/platform.ts

@@ -0,0 +1,52 @@
+/**
+ * Platform detection utilities.
+ * Based on @react-aria/utils platform detection.
+ */
+
+function testPlatform(re: RegExp): boolean {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.platform || (window.navigator as any).userAgentData?.platform || '')
+    : false;
+}
+
+function testUserAgent(re: RegExp): boolean {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(window.navigator.userAgent)
+    : false;
+}
+
+export function isMac(): boolean {
+  return testPlatform(/^Mac/i);
+}
+
+export function isIPhone(): boolean {
+  return testPlatform(/^iPhone/i);
+}
+
+export function isIPad(): boolean {
+  return testPlatform(/^iPad/i) || (isMac() && navigator.maxTouchPoints > 1);
+}
+
+export function isIOS(): boolean {
+  return isIPhone() || isIPad();
+}
+
+export function isAppleDevice(): boolean {
+  return isMac() || isIOS();
+}
+
+export function isWebKit(): boolean {
+  return testUserAgent(/AppleWebKit/i) && !isChrome();
+}
+
+export function isChrome(): boolean {
+  return testUserAgent(/Chrome/i);
+}
+
+export function isAndroid(): boolean {
+  return testUserAgent(/Android/i);
+}
+
+export function isFirefox(): boolean {
+  return testUserAgent(/Firefox/i);
+}

package/src/utils/reactivity.ts

@@ -0,0 +1,36 @@
+/**
+ * Reactivity utilities for Solidaria
+ *
+ * Provides type-safe utilities for working with SolidJS reactivity patterns.
+ */
+
+import { Accessor } from 'solid-js';
+
+/**
+ * A value that may be either a raw value or an accessor function.
+ * This is a common pattern in SolidJS for props that may be reactive.
+ */
+export type MaybeAccessor<T> = T | Accessor<T>;
+
+/**
+ * Unwraps a MaybeAccessor to get the underlying value.
+ * If the input is a function, it calls it to get the value.
+ * Otherwise, it returns the value directly.
+ *
+ * @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;
+}
+
+/**
+ * A value that may be undefined or an accessor that returns the value or undefined.
+ */
+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';
+}