@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/interactions/createInteractionModality.ts

@@ -6,16 +6,12 @@
  * provides focus-visible state and listeners.
  */
 
-import { type Accessor, createSignal, createEffect, onCleanup } from 'solid-js';
-import { isServer } from 'solid-js/web';
-import { getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink } from '../utils';
+import { type Accessor, createSignal, createEffect, onCleanup } from "solid-js";
+import { isServer } from "solid-js/web";
+import { getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink } from "../utils";
 
-// ============================================
-// TYPES
-// ============================================
-
-export type Modality = 'keyboard' | 'pointer' | 'virtual';
-export type PointerType = 'mouse' | 'pen' | 'touch' | 'keyboard' | 'virtual';
+export type Modality = "keyboard" | "pointer" | "virtual";
+export type PointerType = "mouse" | "pen" | "touch" | "keyboard" | "virtual";
 type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null;
 type Handler = (modality: Modality, e: HandlerEvent) => void;
 
@@ -38,12 +34,8 @@ export interface InteractionModalityResult {
   modality: Accessor<Modality | null>;
 }
 
-// ============================================
-// GLOBAL STATE
-// ============================================
-
 let currentModality: Modality | null = null;
-let currentPointerType: PointerType = 'keyboard';
+let currentPointerType: PointerType = "keyboard";
 const changeHandlers = new Set<Handler>();
 
 export let hasSetupGlobalListeners: Map<
@@ -70,9 +62,9 @@ function isValidKey(e: KeyboardEvent) {
     e.metaKey ||
     (!isMac() && e.altKey) ||
     e.ctrlKey ||
-    e.key === 'Control' ||
-    e.key === 'Shift' ||
-    e.key === 'Meta'
+    e.key === "Control" ||
+    e.key === "Shift" ||
+    e.key === "Meta"
   );
 }
 
@@ -80,27 +72,31 @@ function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
   const isOpening = (openLink as { isOpening?: boolean }).isOpening;
   if (!isOpening && isValidKey(e)) {
-    currentModality = 'keyboard';
-    currentPointerType = 'keyboard';
-    triggerChangeHandlers('keyboard', e);
+    currentModality = "keyboard";
+    currentPointerType = "keyboard";
+    triggerChangeHandlers("keyboard", e);
   }
 }
 
 function handlePointerEvent(e: PointerEvent | MouseEvent) {
-  currentModality = 'pointer';
-  currentPointerType = 'pointerType' in e ? (e.pointerType as PointerType) : 'mouse';
-  if (e.type === 'mousedown' || e.type === 'pointerdown') {
+  currentModality = "pointer";
+  currentPointerType = "pointerType" in e ? (e.pointerType as PointerType) : "mouse";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
     hasEventBeforeFocus = true;
-    triggerChangeHandlers('pointer', e);
+    triggerChangeHandlers("pointer", e);
   }
 }
 
 function handleClickEvent(e: MouseEvent) {
+  if (!e.isTrusted) {
+    return;
+  }
+
   const isOpening = (openLink as { isOpening?: boolean }).isOpening;
   if (!isOpening && isVirtualClick(e)) {
     hasEventBeforeFocus = true;
-    currentModality = 'virtual';
-    currentPointerType = 'virtual';
+    currentModality = "virtual";
+    currentPointerType = "virtual";
   }
 }
 
@@ -119,9 +115,9 @@ function handleFocusEvent(e: FocusEvent) {
   }
 
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
-    currentModality = 'virtual';
-    currentPointerType = 'virtual';
-    triggerChangeHandlers('virtual', e);
+    currentModality = "virtual";
+    currentPointerType = "virtual";
+    triggerChangeHandlers("virtual", e);
   }
 
   hasEventBeforeFocus = false;
@@ -138,7 +134,7 @@ function handleWindowBlur() {
 }
 
 function setupGlobalFocusEvents(element?: HTMLElement | null) {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
+  if (typeof window === "undefined" || typeof document === "undefined") {
     return;
   }
 
@@ -160,36 +156,36 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
     canOverride = false;
   }
 
-  documentObject.addEventListener('keydown', handleKeyboardEvent, true);
-  documentObject.addEventListener('keyup', handleKeyboardEvent, true);
-  documentObject.addEventListener('click', handleClickEvent, true);
+  documentObject.addEventListener("keydown", handleKeyboardEvent, true);
+  documentObject.addEventListener("keyup", handleKeyboardEvent, true);
+  documentObject.addEventListener("click", handleClickEvent, true);
 
-  windowObject.addEventListener('focus', handleFocusEvent, true);
-  windowObject.addEventListener('blur', handleWindowBlur, false);
+  windowObject.addEventListener("focus", handleFocusEvent, true);
+  windowObject.addEventListener("blur", handleWindowBlur, false);
 
-  if (typeof windowObject.PointerEvent !== 'undefined') {
-    documentObject.addEventListener('pointerdown', handlePointerEvent, true);
-    documentObject.addEventListener('pointermove', handlePointerEvent, true);
-    documentObject.addEventListener('pointerup', handlePointerEvent, true);
+  if (typeof windowObject.PointerEvent !== "undefined") {
+    documentObject.addEventListener("pointerdown", handlePointerEvent, true);
+    documentObject.addEventListener("pointermove", handlePointerEvent, true);
+    documentObject.addEventListener("pointerup", handlePointerEvent, true);
   } else {
-    documentObject.addEventListener('mousedown', handlePointerEvent, true);
-    documentObject.addEventListener('mousemove', handlePointerEvent, true);
-    documentObject.addEventListener('mouseup', handlePointerEvent, true);
+    documentObject.addEventListener("mousedown", handlePointerEvent, true);
+    documentObject.addEventListener("mousemove", handlePointerEvent, true);
+    documentObject.addEventListener("mouseup", handlePointerEvent, true);
   }
 
   windowObject.addEventListener(
-    'beforeunload',
+    "beforeunload",
     () => {
       tearDownWindowFocusTracking(element);
     },
-    { once: true }
+    { once: true },
   );
 
   hasSetupGlobalListeners.set(windowObject, { focus: originalFocus, canOverride });
 }
 
 function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?: () => void) {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
+  if (typeof window === "undefined" || typeof document === "undefined") {
     return;
   }
 
@@ -197,7 +193,7 @@ function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?
   const documentObject = getOwnerDocument(element);
 
   if (loadListener) {
-    documentObject.removeEventListener('DOMContentLoaded', loadListener);
+    documentObject.removeEventListener("DOMContentLoaded", loadListener);
   }
 
   if (!hasSetupGlobalListeners.has(windowObject)) {
@@ -209,21 +205,21 @@ function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?
     windowObject.HTMLElement.prototype.focus = entry.focus;
   }
 
-  documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
-  documentObject.removeEventListener('keyup', handleKeyboardEvent, true);
-  documentObject.removeEventListener('click', handleClickEvent, true);
+  documentObject.removeEventListener("keydown", handleKeyboardEvent, true);
+  documentObject.removeEventListener("keyup", handleKeyboardEvent, true);
+  documentObject.removeEventListener("click", handleClickEvent, true);
 
-  windowObject.removeEventListener('focus', handleFocusEvent, true);
-  windowObject.removeEventListener('blur', handleWindowBlur, false);
+  windowObject.removeEventListener("focus", handleFocusEvent, true);
+  windowObject.removeEventListener("blur", handleWindowBlur, false);
 
-  if (typeof windowObject.PointerEvent !== 'undefined') {
-    documentObject.removeEventListener('pointerdown', handlePointerEvent, true);
-    documentObject.removeEventListener('pointermove', handlePointerEvent, true);
-    documentObject.removeEventListener('pointerup', handlePointerEvent, true);
+  if (typeof windowObject.PointerEvent !== "undefined") {
+    documentObject.removeEventListener("pointerdown", handlePointerEvent, true);
+    documentObject.removeEventListener("pointermove", handlePointerEvent, true);
+    documentObject.removeEventListener("pointerup", handlePointerEvent, true);
   } else {
-    documentObject.removeEventListener('mousedown', handlePointerEvent, true);
-    documentObject.removeEventListener('mousemove', handlePointerEvent, true);
-    documentObject.removeEventListener('mouseup', handlePointerEvent, true);
+    documentObject.removeEventListener("mousedown", handlePointerEvent, true);
+    documentObject.removeEventListener("mousemove", handlePointerEvent, true);
+    documentObject.removeEventListener("mouseup", handlePointerEvent, true);
   }
 
   hasSetupGlobalListeners.delete(windowObject);
@@ -236,13 +232,13 @@ export function addWindowFocusTracking(element?: HTMLElement | null): () => void
   const documentObject = getOwnerDocument(element);
   let loadListener: (() => void) | undefined;
 
-  if (documentObject.readyState !== 'loading') {
+  if (documentObject.readyState !== "loading") {
     setupGlobalFocusEvents(element);
   } else {
     loadListener = () => {
       setupGlobalFocusEvents(element);
     };
-    documentObject.addEventListener('DOMContentLoaded', loadListener);
+    documentObject.addEventListener("DOMContentLoaded", loadListener);
   }
 
   return () => tearDownWindowFocusTracking(element, loadListener);
@@ -252,7 +248,7 @@ export function setupGlobalFocusListeners(): void {
   addWindowFocusTracking();
 }
 
-if (typeof document !== 'undefined') {
+if (typeof document !== "undefined") {
   addWindowFocusTracking();
 }
 
@@ -260,7 +256,7 @@ if (typeof document !== 'undefined') {
  * If true, keyboard focus is visible.
  */
 export function isFocusVisible(): boolean {
-  return currentModality !== 'pointer';
+  return currentModality !== "pointer";
 }
 
 /**
@@ -275,7 +271,7 @@ export function getInteractionModality(): Modality | null {
  */
 export function setInteractionModality(modality: Modality): void {
   currentModality = modality;
-  currentPointerType = modality === 'pointer' ? 'mouse' : modality;
+  currentPointerType = modality === "pointer" ? "mouse" : modality;
   triggerChangeHandlers(modality, null);
 }
 
@@ -286,16 +282,12 @@ export function getPointerType(): PointerType {
   return currentPointerType;
 }
 
-function isKeyboardFocusEvent(
-  isTextInput: boolean,
-  modality: Modality,
-  e: HandlerEvent
-): boolean {
+function isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent): boolean {
   if (!e) {
     return true;
   }
 
-  const target = 'target' in e ? (e.target as Element | null) : null;
+  const target = "target" in e ? (e.target as Element | null) : null;
   const ownerDocument = target ? getOwnerDocument(target) : document;
   const ownerWindow = target ? getOwnerWindow(target) : window;
 
@@ -305,15 +297,15 @@ function isKeyboardFocusEvent(
   const IKeyboardEvent = ownerWindow.KeyboardEvent;
 
   const nonTextInputTypes = new Set([
-    'checkbox',
-    'radio',
-    'range',
-    'color',
-    'file',
-    'image',
-    'button',
-    'submit',
-    'reset',
+    "checkbox",
+    "radio",
+    "range",
+    "color",
+    "file",
+    "image",
+    "button",
+    "submit",
+    "reset",
   ]);
 
   isTextInput =
@@ -321,11 +313,12 @@ function isKeyboardFocusEvent(
     (ownerDocument.activeElement instanceof IHTMLInputElement &&
       !nonTextInputTypes.has(ownerDocument.activeElement.type)) ||
     ownerDocument.activeElement instanceof IHTMLTextAreaElement ||
-    (ownerDocument.activeElement instanceof IHTMLElement && ownerDocument.activeElement.isContentEditable);
+    (ownerDocument.activeElement instanceof IHTMLElement &&
+      ownerDocument.activeElement.isContentEditable);
 
   return !(
     isTextInput &&
-    modality === 'keyboard' &&
+    modality === "keyboard" &&
     e instanceof IKeyboardEvent &&
     !FOCUS_VISIBLE_INPUT_KEYS[e.key]
   );
@@ -336,7 +329,7 @@ function isKeyboardFocusEvent(
  */
 export function createFocusVisibleListener(
   handler: FocusVisibleHandler,
-  opts?: { isTextInput?: boolean }
+  opts?: { isTextInput?: boolean },
 ): () => void {
   setupGlobalFocusEvents();
   const listener: Handler = (modality: Modality, e: HandlerEvent) => {
@@ -420,5 +413,5 @@ export function useIsKeyboardFocused(): Accessor<boolean> {
   }
 
   const { modality } = createInteractionModality();
-  return () => modality() === 'keyboard';
+  return () => modality() === "keyboard";
 }

package/src/interactions/createKeyboard.ts

@@ -4,7 +4,7 @@
  * This is a 1-1 port of React-Aria's useKeyboard hook adapted for SolidJS.
  */
 
-import { JSX } from 'solid-js';
+import { JSX } from "solid-js";
 
 /**
  * Keyboard event with continuePropagation support.
@@ -37,7 +37,7 @@ export interface KeyboardResult {
  * and support continuePropagation instead.
  */
 function createEventHandler<T extends globalThis.KeyboardEvent>(
-  handler?: (e: KeyboardEvent) => void
+  handler?: (e: KeyboardEvent) => void,
 ): ((e: T) => void) | undefined {
   if (!handler) {
     return undefined;