@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/src/utils/focus.ts

@@ -1,19 +1,77 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/focusSafely.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/utils.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/focusWithoutScrolling.ts
+
 /**
  * Focus management utilities.
- * Based on @react-aria/utils focus utilities.
+ * Based on these pinned React Aria sources:
+ * - packages/react-aria/src/utils/focusWithoutScrolling.ts
+ * - packages/react-aria/src/interactions/utils.ts
+ * - packages/react-aria/src/interactions/focusSafely.ts
+ *
+ * runAfterPaint and the focusVisible option are local Solid adapters.
  */
 
-import { getEventTarget, getOwnerDocument, getOwnerWindow, isFocusable } from "./dom";
+import {
+  getInteractionModality,
+  setIgnoreFocusEvent,
+} from "../interactions/createInteractionModality";
+import {
+  getActiveElement,
+  getEventTarget,
+  getOwnerDocument,
+  getOwnerWindow,
+  isFocusable,
+  isShadowRoot,
+  nodeContains,
+} from "./dom";
+import { runAfterTransition } from "./runAfterTransition";
+
+/**
+ * Extra `element.focus()` options besides `preventScroll`, which this helper
+ * always sets. `focusVisible` is the HTML focus option that requests CSS
+ * `:focus-visible` (Chrome 131+); ignored by browsers that don't implement it.
+ */
+export type FocusWithoutScrollingOptions = Pick<FocusOptions, "focusVisible">;
 
 /**
  * Focuses an element without scrolling the page.
  * Uses preventScroll option with fallback for older browsers.
  */
-export function focusWithoutScrolling(element: HTMLElement | null): void {
+export function focusWithoutScrolling(
+  element: HTMLElement | null,
+  options?: FocusWithoutScrollingOptions,
+): void {
   if (!element) return;
 
+  const focusOptions: FocusOptions = { preventScroll: true, ...options };
+
   try {
-    element.focus({ preventScroll: true });
+    element.focus(focusOptions);
   } catch {
     // Fallback for browsers that don't support preventScroll
     const scrollableElements = getScrollableAncestors(element);
@@ -23,7 +81,7 @@ export function focusWithoutScrolling(element: HTMLElement | null): void {
       scrollLeft: el.scrollLeft,
     }));
 
-    element.focus();
+    element.focus(options);
 
     for (const { element: el, scrollTop, scrollLeft } of scrollPositions) {
       el.scrollTop = scrollTop;
@@ -63,34 +121,103 @@ function getScrollableAncestors(element: Element): Element[] {
   return ancestors;
 }
 
+/**
+ * Run `fn` after paint. Mirrors React `useEffect` relative to `preventFocus`,
+ * which holds focus with capture listeners until the next animation frame.
+ * Overlay auto-focus that runs in the same flush as the opening click is yanked
+ * back onto the trigger; this delay is the Solid equivalent of upstream's
+ * `useEffect` auto-focus.
+ */
+export function runAfterPaint(fn: () => void, doc?: Document): () => void {
+  const ownerDoc = doc ?? (typeof document !== "undefined" ? document : undefined);
+  const win = ownerDoc
+    ? (ownerDoc.defaultView ?? undefined)
+    : typeof window !== "undefined"
+      ? window
+      : undefined;
+  if (!win) {
+    fn();
+    return () => {};
+  }
+
+  // Window timers return `number` (DOM); `types: ["node"]` types global
+  // `setTimeout` as `NodeJS.Timeout`. Hold the union so both views compile.
+  let timeoutId: ReturnType<typeof setTimeout> | number | undefined;
+  let cancelled = false;
+
+  const run = () => {
+    if (cancelled) return;
+    fn();
+  };
+
+  const scheduleTimeout = () => {
+    if (cancelled) return;
+    timeoutId = win.setTimeout(run, 0);
+  };
+
+  let frameId: number | undefined;
+  if (typeof win.requestAnimationFrame === "function") {
+    frameId = win.requestAnimationFrame(scheduleTimeout);
+  } else {
+    scheduleTimeout();
+  }
+
+  return () => {
+    cancelled = true;
+    if (frameId != null) {
+      win.cancelAnimationFrame(frameId);
+    }
+    if (timeoutId !== undefined) {
+      win.clearTimeout(timeoutId);
+    }
+  };
+}
+
 /**
  * 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 | null): (() => void) | undefined {
-  while (target && !isFocusable(target)) {
+  // The browser will focus the nearest focusable ancestor of our target.
+  while (target && !isFocusable(target, { skipVisibilityCheck: true })) {
     target = target.parentElement;
   }
 
   const ownerWindow = getOwnerWindow(target);
-  const activeElement = ownerWindow.document.activeElement as HTMLElement | null;
-
+  const activeElement = getActiveElement(ownerWindow.document) as HTMLElement | null;
   if (!activeElement || activeElement === target) {
     return undefined;
   }
 
-  let isRefocusing = false;
+  // Listen on the target's root (document or shadow root) so we catch focus events inside
+  // shadow DOM; they do not reach the main window.
+  const targetRoot = target?.getRootNode();
+  const root = targetRoot != null && isShadowRoot(targetRoot) ? targetRoot : ownerWindow;
+
+  // Focus is "moving to target" when it moves to the button or to a descendant of the button
+  // (e.g. SVG icon)
+  const isFocusMovingToTarget = (focusTarget: Element | null) =>
+    focusTarget === target || (focusTarget != null && nodeContains(target, focusTarget));
+  // Blur/focusout events have their target as the element losing focus. Stop propagation when
+  // that is the previously focused element (activeElement) or a descendant (e.g. in shadow DOM).
+  const isBlurFromActiveElement = (eventTarget: Element | null) =>
+    eventTarget === activeElement ||
+    (activeElement != null && eventTarget != null && nodeContains(activeElement, eventTarget));
 
-  const onBlur = (event: FocusEvent) => {
-    if (getEventTarget(event) === activeElement || isRefocusing) {
-      event.stopImmediatePropagation();
+  setIgnoreFocusEvent(true);
+  let isRefocusing = false;
+  const onBlur: EventListener = (e) => {
+    if (isBlurFromActiveElement(getEventTarget(e) as Element) || isRefocusing) {
+      e.stopImmediatePropagation();
     }
   };
 
-  const onFocusOut = (event: FocusEvent) => {
-    if (getEventTarget(event) === activeElement || isRefocusing) {
-      event.stopImmediatePropagation();
+  const onFocusOut: EventListener = (e) => {
+    if (isBlurFromActiveElement(getEventTarget(e) as Element) || isRefocusing) {
+      e.stopImmediatePropagation();
 
+      // If there was no focusable ancestor, we don't expect a focus event.
+      // Re-focus the original active element here.
       if (!target && !isRefocusing) {
         isRefocusing = true;
         focusWithoutScrolling(activeElement);
@@ -99,15 +226,15 @@ export function preventFocus(target: Element | null): (() => void) | undefined {
     }
   };
 
-  const onFocus = (event: FocusEvent) => {
-    if (getEventTarget(event) === target || isRefocusing) {
-      event.stopImmediatePropagation();
+  const onFocus: EventListener = (e) => {
+    if (isFocusMovingToTarget(getEventTarget(e) as Element) || isRefocusing) {
+      e.stopImmediatePropagation();
     }
   };
 
-  const onFocusIn = (event: FocusEvent) => {
-    if (getEventTarget(event) === target || isRefocusing) {
-      event.stopImmediatePropagation();
+  const onFocusIn: EventListener = (e) => {
+    if (isFocusMovingToTarget(getEventTarget(e) as Element) || isRefocusing) {
+      e.stopImmediatePropagation();
 
       if (!isRefocusing) {
         isRefocusing = true;
@@ -117,19 +244,20 @@ export function preventFocus(target: Element | null): (() => void) | undefined {
     }
   };
 
-  ownerWindow.addEventListener("blur", onBlur, true);
-  ownerWindow.addEventListener("focusout", onFocusOut, true);
-  ownerWindow.addEventListener("focusin", onFocusIn, true);
-  ownerWindow.addEventListener("focus", onFocus, true);
+  root.addEventListener("blur", onBlur, true);
+  root.addEventListener("focusout", onFocusOut, true);
+  root.addEventListener("focusin", onFocusIn, true);
+  root.addEventListener("focus", onFocus, true);
 
   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);
+    root.removeEventListener("blur", onBlur, true);
+    root.removeEventListener("focusout", onFocusOut, true);
+    root.removeEventListener("focusin", onFocusIn, true);
+    root.removeEventListener("focus", onFocus, true);
+    setIgnoreFocusEvent(false);
     isRefocusing = false;
   }
 
@@ -137,7 +265,33 @@ export function preventFocus(target: Element | null): (() => void) | undefined {
 }
 
 /**
- * Safely focuses an element, alias for focusWithoutScrolling.
- * This matches the react-aria focusSafely function name.
+ * Focus an element while avoiding page scroll and VoiceOver/iOS transition
+ * side effects. Port of @react-aria/interactions focusSafely: virtual-modality
+ * focus waits until in-flight CSS transitions end so contain-restore after a
+ * programmatic focus (Playwright `.focus()`, screen readers) does not beat a
+ * following pointermove.
  */
-export const focusSafely = focusWithoutScrolling;
+export function focusSafely(
+  element: HTMLElement | null,
+  options?: FocusWithoutScrollingOptions,
+): void {
+  if (!element?.isConnected) {
+    return;
+  }
+
+  const ownerDocument = getOwnerDocument(element);
+  if (getInteractionModality() === "virtual") {
+    const lastFocusedElement = getActiveElement(ownerDocument);
+    runAfterTransition(() => {
+      const activeElement = getActiveElement(ownerDocument);
+      if (
+        (activeElement === lastFocusedElement || activeElement === ownerDocument.body) &&
+        element.isConnected
+      ) {
+        focusWithoutScrolling(element, options);
+      }
+    });
+  } else {
+    focusWithoutScrolling(element, options);
+  }
+}

package/src/utils/geometry.ts

@@ -1,6 +1,20 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/usePress.ts
+
 /**
  * Geometry utilities for pointer/touch hit testing.
- * Based on @react-aria/interactions geometry utilities.
+ * Ported from packages/react-aria/src/interactions/usePress.ts.
  */
 
 export interface Rect {

package/src/utils/getMetaValue.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/getMetaValue.ts
+
+import { getOwnerDocument, getOwnerWindow } from "./dom";
+
+declare global {
+  interface Window {
+    __webpack_nonce__?: string;
+  }
+  // eslint-disable-next-line no-var
+  var __webpack_nonce__: string | undefined;
+}
+
+/**
+ * Reads a `<meta name="…">` / `<meta property="…">` value from a document.
+ * For `csp-nonce` the element's `nonce` property wins over its `content`
+ * attribute, because a browser blanks the attribute after parsing.
+ */
+export function getMetaValue(key: string, doc?: Document): string | undefined {
+  const ownerWindow = getOwnerWindow(doc);
+  const ownerDocument = getOwnerDocument(doc);
+
+  if (ownerDocument == null || ownerWindow == null) {
+    return;
+  }
+
+  let content: string | undefined = undefined;
+  const selector = `meta[name="${CSS.escape(key)}"], meta[property="${CSS.escape(key)}"]`;
+  const meta = ownerDocument.querySelector(selector);
+
+  if (meta && meta instanceof ownerWindow.HTMLMetaElement) {
+    if (key === "csp-nonce" && meta.nonce) {
+      content ??= meta.nonce || undefined;
+    }
+
+    if (meta.content) {
+      content ??= meta.content || undefined;
+    }
+  }
+
+  if (key === "csp-nonce") {
+    content ??= ownerWindow.__webpack_nonce__ || globalThis.__webpack_nonce__ || undefined;
+  }
+
+  return content;
+}

package/src/utils/getNonce.ts

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/getNonce.ts
+
+import { getMetaValue } from "./getMetaValue";
+import { getOwnerDocument } from "./dom";
+
+let nonceCache = new WeakMap<Document, string>();
+
+/** Reset the cached nonce value. Exported for testing only. */
+export function resetNonceCache(): void {
+  nonceCache = new WeakMap();
+}
+
+/**
+ * Returns the CSP nonce, if configured via a `<meta property="csp-nonce">` tag or
+ * `__webpack_nonce__`. This allows dynamically injected `<style>` elements to work with Content
+ * Security Policy.
+ */
+export function getNonce(doc?: Document): string | undefined {
+  const ownerDocument = getOwnerDocument(doc);
+
+  let nonce = nonceCache.get(ownerDocument);
+  nonce ??= getMetaValue("csp-nonce", ownerDocument);
+
+  if (nonce !== undefined) {
+    nonceCache.set(ownerDocument, nonce);
+  }
+  return nonce;
+}

package/src/utils/globalListeners.ts

@@ -1,3 +1,17 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/useGlobalListeners.ts
+
 /**
  * Global listener management utility.
  * Based on @react-aria/utils useGlobalListeners hook, adapted for SolidJS.
@@ -5,8 +19,7 @@
  * In SolidJS, we use onCleanup for automatic cleanup instead of useEffect return.
  */
 
-import { onCleanup } from "solid-js";
-
+import { onOwnedCleanup } from "./owner";
 export interface GlobalListenerOptions extends AddEventListenerOptions {
   /** Whether to add the listener to the window instead of document */
   isWindow?: boolean;
@@ -107,7 +120,7 @@ export function createGlobalListeners() {
   }
 
   // Automatically clean up when the component/scope is disposed
-  onCleanup(removeAllGlobalListeners);
+  onOwnedCleanup(removeAllGlobalListeners);
 
   return {
     addGlobalListener,

package/src/utils/index.ts

@@ -1,7 +1,20 @@
 export { mergeProps } from "./mergeProps";
+export { splitProps } from "./splitProps";
+export { assignRef, followRef, type RefLike } from "./refs";
+export { useContextOptional, onOwnedCleanup } from "./owner";
 export { filterDOMProps, type FilterDOMPropsOptions } from "./filterDOMProps";
+export { attachCaptureListeners, bindCapture, captureRef, type CaptureListeners } from "./capture";
 
 export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from "./reactivity";
+export {
+  ariaTrueFalse,
+  attrTrue,
+  attrString,
+  isAriaTrue,
+  coerceDomBoolean,
+  coerceDomRecord,
+  canonicalAttrKey,
+} from "./domAttrs";
 
 export {
   isMac,
@@ -29,6 +42,7 @@ export {
   shouldPreventDefaultKeyboard,
   shouldPreventDefaultUp,
   openLink,
+  type LinkModifiers,
   isScrollable,
   getScrollParent,
   getScrollParents,

package/src/utils/keyboard.ts

@@ -1,6 +1,20 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/keyboard.tsx
+
 /**
  * Keyboard / modifier-key helpers.
- * Based on @react-aria/utils' keyboard utilities.
+ * Ported from packages/react-aria/src/utils/keyboard.tsx.
  */
 
 import { isMac } from "./platform";