@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/dnd/intl/zh-TW.json

@@ -0,0 +1,29 @@
+{
+  "dragDescriptionKeyboard": "按 Enter 鍵以開始拖曳。",
+  "dragDescriptionKeyboardAlt": "按 Alt+Enter 鍵以開始拖曳。",
+  "dragDescriptionLongPress": "長按以開始拖曳。",
+  "dragDescriptionTouch": "輕點兩下以開始拖曳。",
+  "dragDescriptionVirtual": "按一下滑鼠以開始拖曳。",
+  "dragItem": "拖曳「{itemText}」",
+  "dragSelectedItems": "拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}",
+  "dragSelectedKeyboard": "按 Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。",
+  "dragSelectedKeyboardAlt": "按 Alt+Enter 鍵以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。",
+  "dragSelectedLongPress": "長按以拖曳 {count, plural, one {# 個選定項目} other {# 個選定項目}}。",
+  "dragStartedKeyboard": "已開始拖曳。按 Tab 鍵以瀏覽至放置目標，然後按 Enter 鍵以放置，或按 Escape 鍵以取消。",
+  "dragStartedTouch": "已開始拖曳。瀏覽至放置目標，然後輕點兩下以放置。",
+  "dragStartedVirtual": "已開始拖曳。瀏覽至放置目標，然後按一下滑鼠或按 Enter 鍵以放置。",
+  "dropCanceled": "放置已取消。",
+  "dropComplete": "放置已完成。",
+  "dropDescriptionKeyboard": "按 Enter 鍵以放置。按 Escape 鍵以取消拖曳。",
+  "dropDescriptionTouch": "輕點兩下以放置。",
+  "dropDescriptionVirtual": "按一下滑鼠以放置。",
+  "dropIndicator": "放置指示器",
+  "dropOnItem": "放置在「{itemText}」上",
+  "dropOnRoot": "放置在",
+  "endDragKeyboard": "拖曳中。按 Enter 鍵以取消拖曳。",
+  "endDragTouch": "拖曳中。輕點兩下以取消拖曳。",
+  "endDragVirtual": "拖曳中。按一下滑鼠以取消拖曳。",
+  "insertAfter": "插入至「{itemText}」之後",
+  "insertBefore": "插入至「{itemText}」之前",
+  "insertBetween": "插入至「{beforeItemText}」和「{afterItemText}」之間"
+}

package/src/dnd/utils.ts

@@ -4,12 +4,15 @@
 
 import type {
   DragItem,
+  DragType,
   DropItem,
   TextDropItem,
   FileDropItem,
   DirectoryDropItem,
   DropOperation,
 } from "@proyecto-viviana/solid-stately";
+import { DIRECTORY_DRAG_TYPE } from "@proyecto-viviana/solid-stately";
+import { getInteractionModality } from "../interactions";
 
 // Native drag types that can be transferred between applications
 export const NATIVE_DRAG_TYPES: Set<string> = new Set(["text/plain", "text/uri-list", "text/html"]);
@@ -71,6 +74,41 @@ export const DROP_OPERATION_TO_DROP_EFFECT: Record<DropOperation, string> = {
   move: "move",
 };
 
+/**
+ * Maps the current interaction modality onto the drag modality used for
+ * announcements and descriptions. Mirrors @react-aria/dnd `mapModality`:
+ * pointer collapses to virtual, and a virtual modality on a coarse pointer
+ * (touch screen reader) becomes touch.
+ */
+function mapModality(modality: string | null): string {
+  if (!modality) {
+    modality = "virtual";
+  }
+
+  if (modality === "pointer") {
+    modality = "virtual";
+  }
+
+  if (
+    modality === "virtual" &&
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(pointer: coarse)").matches
+  ) {
+    modality = "touch";
+  }
+
+  return modality;
+}
+
+/**
+ * Returns the drag modality ('keyboard' | 'virtual' | 'touch') for the current
+ * interaction. Mirrors @react-aria/dnd `getDragModality`.
+ */
+export function getDragModality(): string {
+  return mapModality(getInteractionModality());
+}
+
 /**
  * Get the types present in drag items.
  */
@@ -231,11 +269,33 @@ export class DragTypesImpl {
     this.includesUnknownTypes = !hasFiles && dataTransfer.types.includes("Files");
   }
 
-  has(type: string | symbol): boolean {
-    if (this.includesUnknownTypes || (typeof type === "symbol" && this.types.has(GENERIC_TYPE))) {
+  has(type: DragType | DragType[]): boolean {
+    if (Array.isArray(type)) {
+      return type.some((t) => this.has(t));
+    }
+
+    if (
+      this.includesUnknownTypes ||
+      (type === DIRECTORY_DRAG_TYPE && this.types.has(GENERIC_TYPE)) ||
+      type === "*/*"
+    ) {
       return true;
     }
-    return typeof type === "string" && this.types.has(type);
+
+    if (typeof type === "string") {
+      // Wildcard MIME match, e.g. "image/*" accepts "image/png".
+      if (type.endsWith("/*")) {
+        for (const key of this.types) {
+          if (key.startsWith(type.slice(0, -2))) {
+            return true;
+          }
+        }
+        return false;
+      }
+      return this.types.has(type);
+    }
+
+    return false;
   }
 }
 

package/src/focus/FocusScope.tsx

@@ -15,7 +15,13 @@ import {
   onMount,
 } from "solid-js";
 import { isServer } from "solid-js/web";
-import { getOwnerDocument, isFocusable } from "../utils";
+import {
+  getOwnerDocument,
+  isFocusable,
+  isTabbable,
+  getFocusableTreeWalker,
+  getActiveElement,
+} from "../utils";
 import { focusSafely } from "../utils/focus";
 
 export interface FocusScopeProps {
@@ -62,6 +68,119 @@ interface FocusScopeContextValue {
   scopeRef: Accessor<Element[]>;
 }
 
+/**
+ * Walks a TreeWalker to its final (deepest-last) node, mirroring the `last`
+ * helper in @react-aria/focus.
+ */
+function lastFocusable(walker: TreeWalker): HTMLElement | null {
+  let next: HTMLElement | undefined;
+  let last: Node | null;
+  do {
+    last = walker.lastChild();
+    if (last) {
+      next = last as HTMLElement;
+    }
+  } while (last);
+  return next ?? null;
+}
+
+/**
+ * Creates a FocusManager rooted at the given ref element, independent of any
+ * FocusScope. Mirrors @react-aria/focus's `createFocusManager`: it walks the
+ * focusable tree with `getFocusableTreeWalker` so segment/spinbutton navigation
+ * inside a date field group behaves exactly like upstream.
+ */
+export function createFocusManager(
+  ref: () => HTMLElement | null | undefined,
+  defaultOptions: FocusManagerOptions = {},
+): FocusManager {
+  return {
+    focusNext(opts: FocusManagerOptions = {}) {
+      const root = ref();
+      if (!root) return null;
+      const {
+        from,
+        tabbable = defaultOptions.tabbable,
+        wrap = defaultOptions.wrap,
+        accept = defaultOptions.accept,
+      } = opts;
+      const node = from || getActiveElement(getOwnerDocument(root));
+      const walker = getFocusableTreeWalker(root, { tabbable, accept });
+      if (node && root.contains(node)) {
+        walker.currentNode = node;
+      }
+      let nextNode = walker.nextNode() as HTMLElement | null;
+      if (!nextNode && wrap) {
+        walker.currentNode = root;
+        nextNode = walker.nextNode() as HTMLElement | null;
+      }
+      if (nextNode) {
+        focusSafely(nextNode);
+      }
+      return nextNode;
+    },
+
+    focusPrevious(opts: FocusManagerOptions = {}) {
+      const root = ref();
+      if (!root) return null;
+      const {
+        from,
+        tabbable = defaultOptions.tabbable,
+        wrap = defaultOptions.wrap,
+        accept = defaultOptions.accept,
+      } = opts;
+      const node = from || getActiveElement(getOwnerDocument(root));
+      const walker = getFocusableTreeWalker(root, { tabbable, accept });
+      if (node && root.contains(node)) {
+        walker.currentNode = node;
+      } else {
+        const next = lastFocusable(walker);
+        if (next) {
+          focusSafely(next);
+        }
+        return next;
+      }
+      let previousNode = walker.previousNode() as HTMLElement | null;
+      if (!previousNode && wrap) {
+        walker.currentNode = root;
+        const lastNode = lastFocusable(walker);
+        if (!lastNode) {
+          return null;
+        }
+        previousNode = lastNode;
+      }
+      if (previousNode) {
+        focusSafely(previousNode);
+      }
+      return previousNode;
+    },
+
+    focusFirst(opts: FocusManagerOptions = {}) {
+      const root = ref();
+      if (!root) return null;
+      const { tabbable = defaultOptions.tabbable, accept = defaultOptions.accept } = opts;
+      const walker = getFocusableTreeWalker(root, { tabbable, accept });
+      const nextNode = walker.nextNode() as HTMLElement | null;
+      if (nextNode) {
+        focusSafely(nextNode);
+      }
+      return nextNode;
+    },
+
+    focusLast(opts: FocusManagerOptions = {}) {
+      const root = ref();
+      if (!root) return null;
+      const { tabbable = defaultOptions.tabbable, accept = defaultOptions.accept } = opts;
+      const walker = getFocusableTreeWalker(root, { tabbable, accept });
+      const next = lastFocusable(walker);
+      if (next) {
+        focusSafely(next);
+      }
+      return next;
+    },
+  };
+}
+
 const FocusScopeContext = createContext<FocusScopeContextValue | null>(null);
 
 /**
@@ -73,23 +192,6 @@ export function useFocusManager(): FocusManager | undefined {
   return useContext(FocusScopeContext)?.focusManager;
 }
 
-/**
- * Checks if an element is tabbable (focusable via Tab key).
- */
-function isTabbable(element: Element): boolean {
-  if (!isFocusable(element)) {
-    return false;
-  }
-
-  // Check tabIndex
-  const tabIndex = element.getAttribute("tabindex");
-  if (tabIndex != null) {
-    return parseInt(tabIndex, 10) >= 0;
-  }
-
-  return true;
-}
-
 /**
  * Gets all focusable elements within a scope.
  */
@@ -125,14 +227,96 @@ function isElementInScope(element: Element | null, scope: Element[]): boolean {
 }
 
 /**
- * Gets the active element, accounting for shadow DOM.
+ * A scope is identified by its (stable) scope-elements accessor; `null` is the
+ * tree root. Mirrors @react-aria/focus's `ScopeRef`.
+ */
+type ScopeRef = Accessor<Element[]> | null;
+
+interface FocusScopeTreeNode {
+  scopeRef: ScopeRef;
+  parent: FocusScopeTreeNode | null;
+  children: Set<FocusScopeTreeNode>;
+}
+
+/**
+ * A registry of the live FocusScopes and their parent/child relationships,
+ * mirroring @react-aria/focus's `focusScopeTree`. The DOM tree alone can't
+ * express scope nesting because a child scope (e.g. a menu opened from inside a
+ * modal popover) is rendered in a portal, outside its parent scope's subtree.
+ * The tree records that nesting so containment can recognize a portaled
+ * descendant scope as "inside".
  */
-function getActiveElement(doc: Document): Element | null {
-  let activeElement = doc.activeElement;
-  while (activeElement?.shadowRoot?.activeElement) {
-    activeElement = activeElement.shadowRoot.activeElement;
+class FocusScopeTree {
+  root: FocusScopeTreeNode;
+  private fastMap = new Map<ScopeRef, FocusScopeTreeNode>();
+
+  constructor() {
+    this.root = { scopeRef: null, parent: null, children: new Set() };
+    this.fastMap.set(null, this.root);
+  }
+
+  getTreeNode(scopeRef: ScopeRef): FocusScopeTreeNode | undefined {
+    return this.fastMap.get(scopeRef);
+  }
+
+  addTreeNode(scopeRef: ScopeRef, parent: ScopeRef): void {
+    const parentNode = this.fastMap.get(parent) ?? this.root;
+    const node: FocusScopeTreeNode = { scopeRef, parent: parentNode, children: new Set() };
+    parentNode.children.add(node);
+    this.fastMap.set(scopeRef, node);
+  }
+
+  removeTreeNode(scopeRef: ScopeRef): void {
+    // never remove the root
+    if (scopeRef === null) return;
+    const node = this.fastMap.get(scopeRef);
+    if (!node) return;
+    const parentNode = node.parent;
+    if (parentNode) {
+      parentNode.children.delete(node);
+      // Re-parent any children so a mid-tree unmount doesn't orphan descendants.
+      for (const child of node.children) {
+        child.parent = parentNode;
+        parentNode.children.add(child);
+      }
+    }
+    this.fastMap.delete(scopeRef);
+  }
+
+  // Pre-order depth-first; skips the null-scoped root, like upstream.
+  *traverse(node: FocusScopeTreeNode = this.root): Generator<FocusScopeTreeNode> {
+    if (node.scopeRef != null) {
+      yield node;
+    }
+    for (const child of node.children) {
+      yield* this.traverse(child);
+    }
+  }
+}
+
+const focusScopeTree = new FocusScopeTree();
+
+/**
+ * Whether the element is inside `scope` or any of its descendant scopes.
+ *
+ * `isElementInScope`'s `node.contains` already covers descendant scopes that
+ * are DOM children, but not those rendered in a portal. Walking the scope
+ * subtree closes that gap so focus moving into a portaled child scope still
+ * counts as "inside". Mirrors @react-aria/focus's `isElementInChildScope`.
+ */
+function isElementInChildScope(element: Element, scope: ScopeRef = null): boolean {
+  // Always allow focus to move into a top-layer element (e.g. toasts).
+  if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) {
+    return true;
+  }
+
+  for (const node of focusScopeTree.traverse(focusScopeTree.getTreeNode(scope))) {
+    if (node.scopeRef && isElementInScope(element, node.scopeRef())) {
+      return true;
+    }
   }
-  return activeElement;
+
+  return false;
 }
 
 /**
@@ -151,6 +335,11 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
   let endRef: HTMLSpanElement | undefined;
   const [scopeElements, setScopeElements] = createSignal<Element[]>([]);
 
+  // The nearest enclosing FocusScope (through context, which Solid propagates
+  // across portals) is this scope's parent in the focus-scope tree. Read it
+  // before we shadow the context with our own provider below.
+  const parentScopeRef = useContext(FocusScopeContext)?.scopeRef ?? null;
+
   // Store the element that was focused when the scope mounted
   let nodeToRestore: Element | null = null;
 
@@ -272,6 +461,16 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
     setScopeElements(nodes);
   });
 
+  // Register this scope in the focus-scope tree so containment can recognize a
+  // portaled descendant scope as "inside" it. The scope-elements accessor is a
+  // stable identity, so it works as the tree key even before it's populated.
+  onMount(() => {
+    focusScopeTree.addTreeNode(scopeElements, parentScopeRef);
+  });
+  onCleanup(() => {
+    focusScopeTree.removeTreeNode(scopeElements);
+  });
+
   // Save the currently focused element for restoration (must happen before autoFocus/contain effects run).
   onMount(() => {
     if (!props.restoreFocus) return;
@@ -354,6 +553,12 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
 
       if (isElementInScope(target, scope)) {
         focusedNode = target;
+      } else if (isElementInChildScope(target, scopeElements)) {
+        // Focus moved into a descendant scope — e.g. a menu opened from inside
+        // this modal popover, rendered in a portal outside this scope's DOM
+        // subtree. Track it but don't pull focus back, which would tear the
+        // nested overlay down.
+        focusedNode = target;
       } else if (focusedNode) {
         // Focus escaped the scope, bring it back
         focusSafely(focusedNode as HTMLElement);
@@ -363,12 +568,49 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
       }
     };
 
+    let restoreRaf: number | null = null;
+
+    const onFocusOut = (e: FocusEvent) => {
+      const target = e.target as Element;
+      if (!isElementInScope(target, scopeElements())) return;
+
+      // Focus left an element inside the scope. Wait a frame (like upstream's
+      // onBlur) so a synchronous refocus elsewhere can settle; if focus ended
+      // up outside every scope (e.g. blur() to body), pull it back.
+      const win = doc.defaultView ?? window;
+      if (restoreRaf != null) win.cancelAnimationFrame(restoreRaf);
+      restoreRaf = win.requestAnimationFrame(() => {
+        restoreRaf = null;
+        const scope = scopeElements();
+        const activeElement = getActiveElement(doc);
+        if (
+          activeElement &&
+          (isElementInScope(activeElement, scope) ||
+            isElementInChildScope(activeElement, scopeElements))
+        ) {
+          return;
+        }
+
+        if (doc.body.contains(target)) {
+          focusedNode = target;
+          focusSafely(target as HTMLElement);
+        } else {
+          focusManager.focusFirst();
+        }
+      });
+    };
+
     doc.addEventListener("keydown", onKeyDown, true);
     doc.addEventListener("focusin", onFocusIn, true);
+    doc.addEventListener("focusout", onFocusOut, true);
 
     onCleanup(() => {
       doc.removeEventListener("keydown", onKeyDown, true);
       doc.removeEventListener("focusin", onFocusIn, true);
+      doc.removeEventListener("focusout", onFocusOut, true);
+      if (restoreRaf != null) {
+        (doc.defaultView ?? window).cancelAnimationFrame(restoreRaf);
+      }
     });
   });
 

package/src/focus/index.ts

@@ -1,6 +1,7 @@
 export {
   FocusScope,
   useFocusManager,
+  createFocusManager,
   type FocusScopeProps,
   type FocusManager,
   type FocusManagerOptions,
@@ -22,6 +23,13 @@ export {
   type VirtualFocusResult,
 } from "./createVirtualFocus";
 
+export {
+  moveVirtualFocus,
+  dispatchVirtualBlur,
+  dispatchVirtualFocus,
+  getVirtuallyFocusedElement,
+} from "./virtualFocus";
+
 export {
   createAutoFocus,
   clearAutoFocusQueue,

package/src/focus/virtualFocus.ts

@@ -0,0 +1,55 @@
+/**
+ * Virtual-focus event dispatch primitives.
+ *
+ * A faithful port of @react-aria/focus's `virtualFocus` module. Under virtual
+ * focus (e.g. Autocomplete), real DOM focus stays on an input while the
+ * "focused" collection option is indicated by `aria-activedescendant`. Moving
+ * that virtual cursor dispatches synthetic `focus`/`blur` events (with matching
+ * bubbling `focusin`/`focusout`) on the option elements so listeners — notably
+ * the autocomplete input's `focusin` handler that mirrors the active descendant
+ * — react as if the element were really focused.
+ */
+
+import { getActiveElement, getOwnerDocument } from "../utils/dom";
+
+/**
+ * Moves virtual focus to `to`, dispatching a virtual blur on the previously
+ * virtually-focused element (if any) and a virtual focus on `to` (if non-null).
+ */
+export function moveVirtualFocus(to: Element | null): void {
+  const from = getVirtuallyFocusedElement(getOwnerDocument(to));
+  if (from !== to) {
+    if (from) {
+      dispatchVirtualBlur(from, to);
+    }
+    if (to) {
+      dispatchVirtualFocus(to, from);
+    }
+  }
+}
+
+/** Dispatches synthetic `blur` + bubbling `focusout` events on `from`. */
+export function dispatchVirtualBlur(from: Element, to: Element | null): void {
+  from.dispatchEvent(new FocusEvent("blur", { relatedTarget: to }));
+  from.dispatchEvent(new FocusEvent("focusout", { bubbles: true, relatedTarget: to }));
+}
+
+/** Dispatches synthetic `focus` + bubbling `focusin` events on `to`. */
+export function dispatchVirtualFocus(to: Element, from: Element | null): void {
+  to.dispatchEvent(new FocusEvent("focus", { relatedTarget: from }));
+  to.dispatchEvent(new FocusEvent("focusin", { bubbles: true, relatedTarget: from }));
+}
+
+/**
+ * Returns the currently virtually-focused element: the element referenced by the
+ * active element's `aria-activedescendant`, or the active element itself.
+ */
+export function getVirtuallyFocusedElement(document: Document): Element | null {
+  const activeElement = getActiveElement(document);
+  const activeDescendant = activeElement?.getAttribute("aria-activedescendant");
+  if (activeDescendant) {
+    return document.getElementById(activeDescendant) || activeElement;
+  }
+
+  return activeElement;
+}

package/src/form/createFormValidation.ts

@@ -108,7 +108,14 @@ export function createFormValidation(
   // Set custom validity on the native input
   createEffect(() => {
     const input = ref();
-    if (validationBehavior() === "native" && input && !input.disabled) {
+    // `'setCustomValidity' in input` guards refs that aren't true form elements
+    // (e.g. a custom element), matching upstream useFormValidation.
+    if (
+      validationBehavior() === "native" &&
+      input &&
+      "setCustomValidity" in input &&
+      !input.disabled
+    ) {
       const realtimeValidation = state.realtimeValidation();
       const errorMessage = realtimeValidation.isInvalid
         ? realtimeValidation.validationErrors.join(" ") || "Invalid value."