@proyecto-viviana/solidaria 0.4.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

@@ -12,6 +12,7 @@ import type {
   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"]);
@@ -73,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.
  */

package/src/focus/FocusScope.tsx

@@ -15,7 +15,13 @@ import {
   onMount,
 } from "solid-js";
 import { isServer } from "solid-js/web";
-import { getOwnerDocument, isFocusable, isTabbable } 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);
 
 /**
@@ -107,17 +226,6 @@ function isElementInScope(element: Element | null, scope: Element[]): boolean {
   return scope.some((node) => node.contains(element));
 }
 
-/**
- * Gets the active element, accounting for shadow DOM.
- */
-function getActiveElement(doc: Document): Element | null {
-  let activeElement = doc.activeElement;
-  while (activeElement?.shadowRoot?.activeElement) {
-    activeElement = activeElement.shadowRoot.activeElement;
-  }
-  return activeElement;
-}
-
 /**
  * A scope is identified by its (stable) scope-elements accessor; `null` is the
  * tree root. Mirrors @react-aria/focus's `ScopeRef`.

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/gridlist/createGridList.ts

@@ -151,12 +151,21 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
       }
       case "ArrowRight":
       case "ArrowLeft": {
-        // Horizontal orientation promotes the inline axis to the primary
-        // navigation axis. Upstream's ListKeyboardDelegate strips
-        // getKeyLeftOf/getKeyRightOf for a vertical stack, so Left/Right stay
-        // no-ops there; in a horizontal stack they move prev/next, flipped
-        // under RTL (Right=next, Left=prev in LTR).
-        if (p.orientation !== "horizontal") break;
+        // The inline axis (Left/Right) belongs to the ROW under the default
+        // "arrow" navigation behavior: createGridListItem's onKeyDownCapture
+        // intercepts Left/Right for intra-row focus movement (a no-op for
+        // text-only rows), exactly as useGridListItem does upstream, so the
+        // container must NOT step between rows here. Only under "tab" navigation
+        // does the row stop intercepting and the event reach the collection —
+        // mirroring how useSelectableCollection handles Left/Right via
+        // ListKeyboardDelegate. Even then it strips getKeyLeftOf/getKeyRightOf
+        // for a vertical stack, so this stays a no-op unless the stack is
+        // horizontal, where Right=next / Left=prev in LTR, flipped under RTL.
+        // (In Solid the row's capture-phase stopPropagation does not reliably
+        // prevent the container's delegated onKeyDown, so this gate — not the
+        // row's stopPropagation — is what keeps the axes from double-firing.)
+        const behavior = p.keyboardNavigationBehavior ?? "arrow";
+        if (p.orientation !== "horizontal" || behavior !== "tab") break;
         e.preventDefault();
         const isRtl = p.direction === "rtl";
         const forward = e.key === "ArrowRight" ? !isRtl : isRtl;
@@ -217,18 +226,41 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     }
   };
 
-  const onFocus = () => {
+  // Focus marshalling — the grid container is a trampoline. Its roving tabIndex
+  // is 0 only while `focusedKey == null` (see gridProps below), so a Tab that
+  // reaches a standalone grid lands on the container itself; move the focused key
+  // onto the first/last row and the post-commit effect below pulls REAL DOM focus
+  // there while the container rolls to tabIndex -1. This mirrors
+  // useSelectableCollection's `onFocus` — the same direction-aware trampoline the
+  // standalone ListBox uses (createListBox.ts) — and is why a standalone grid
+  // announces the active row through real focus, never `aria-activedescendant`.
+  const onFocus: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
     const s = state();
+    const p = props();
     s.setFocused(true);
 
-    // If nothing is focused, focus the first navigable item
-    if (s.focusedKey == null) {
-      const firstKey = findNextNavigableKey(s, s.collection.getFirstKey(), (k) =>
-        s.collection.getKeyAfter(k),
-      );
-      if (firstKey != null) {
-        s.setFocusedKey(firstKey);
-      }
+    // onFocus is non-bubbling in Solid, so this fires only when the container
+    // itself receives focus; ignore anything that bubbled from a descendant.
+    // (`currentTarget` is null only in synthetic unit-test FocusEvents — treat
+    // those as a direct container focus.)
+    const container = e.currentTarget as HTMLElement | null;
+    if (container && !container.contains(e.target as Node)) return;
+    // Only marshal when no row is focused yet.
+    if (s.focusedKey != null || p.isDisabled) return;
+
+    const collection = s.collection;
+    const relatedTarget = e.relatedTarget as Element | null;
+    // Detect tab direction: focus arriving from an element that FOLLOWS the grid
+    // in document order means the user shift-tabbed backward into it, so enter at
+    // the LAST row; otherwise (forward Tab, or programmatic) enter at the FIRST.
+    const enterKey =
+      relatedTarget &&
+      container &&
+      container.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING
+        ? findNextNavigableKey(s, collection.getLastKey(), (k) => collection.getKeyBefore(k))
+        : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+    if (enterKey != null) {
+      s.setFocusedKey(enterKey);
     }
   };
 
@@ -287,7 +319,11 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
       "aria-describedby": p["aria-describedby"],
       "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
       "aria-disabled": p.isDisabled || undefined,
-      tabIndex: p.isDisabled ? undefined : 0,
+      // Roving container tabIndex mirrors useSelectableCollection: the container
+      // is tabbable (0) only while nothing is focused, then rolls to -1 once a row
+      // takes focus so Tab exits the grid. A standalone grid drives AT through
+      // real row focus, so it never needs (nor emits) aria-activedescendant.
+      tabIndex: p.isDisabled ? undefined : s.focusedKey != null ? -1 : 0,
       onKeyDown,
       onFocus,
       onBlur,

package/src/index.ts

@@ -327,6 +327,7 @@ export {
 export {
   FocusScope,
   useFocusManager,
+  createFocusManager,
   type FocusScopeProps,
   type FocusManager,
   type FocusManagerOptions,
@@ -340,6 +341,10 @@ export {
   createVirtualFocus,
   type VirtualFocusOptions,
   type VirtualFocusResult,
+  moveVirtualFocus,
+  dispatchVirtualBlur,
+  dispatchVirtualFocus,
+  getVirtuallyFocusedElement,
   createAutoFocus,
   clearAutoFocusQueue,
   getAutoFocusQueueLength,
@@ -405,9 +410,6 @@ export {
   createTimeField,
   type AriaTimeFieldProps,
   type TimeFieldAria,
-  createTimeSegment,
-  type AriaTimeSegmentProps,
-  type TimeSegmentAria,
   createDatePicker,
   createDateRangePicker,
   type AriaDatePickerProps,
@@ -516,6 +518,10 @@ export {
   createDroppableCollection,
   createDraggableItem,
   createDroppableItem,
+  createDragSession,
+  isVirtualDragging,
+  registerDropItem,
+  dndIntlStrings,
   setGlobalDraggingCollectionRef,
   getGlobalDraggingCollectionRef,
   setGlobalDraggingKeys,
@@ -537,6 +543,8 @@ export {
   type DraggableItemAria,
   type DroppableItemOptions,
   type DroppableItemAria,
+  type DragSession,
+  type DndIntlStrings,
   CUSTOM_DRAG_TYPE,
   NATIVE_DRAG_TYPES,
   GENERIC_TYPE,

package/src/interactions/FocusableProvider.tsx

@@ -4,7 +4,7 @@
  * This is a 1-1 port of React-Aria's FocusableProvider adapted for SolidJS.
  */
 
-import { JSX, ParentComponent } from "solid-js";
+import { JSX, mergeProps, ParentComponent, splitProps } from "solid-js";
 import { FocusableContext, FocusableContextValue, FocusableProviderProps } from "./createFocusable";
 
 /**
@@ -27,14 +27,19 @@ import { FocusableContext, FocusableContextValue, FocusableProviderProps } from
 export const FocusableProvider: ParentComponent<
   FocusableProviderProps & JSX.HTMLAttributes<HTMLElement>
 > = (props) => {
-  const { children, ...otherProps } = props;
+  // Don't destructure: `const { children, ...otherProps } = props` evaluates the
+  // `children` getter immediately (2nd statement of the body), instantiating the
+  // nested subtree BEFORE this provider mounts — so a child that reads
+  // FocusableContext during its own setup would miss us. splitProps keeps
+  // otherProps a reactive proxy; children is read lazily inside the JSX, under
+  // the mounted provider. Same pattern as solidaria-components' useRenderProps.
+  const [, otherProps] = splitProps(props, ["children"]);
 
-  const context: FocusableContextValue = {
-    ...otherProps,
+  const context = mergeProps(otherProps, {
     ref: (_el: HTMLElement) => {
       // Store ref if needed by parent
     },
-  };
+  }) as FocusableContextValue;
 
-  return <FocusableContext.Provider value={context}>{children}</FocusableContext.Provider>;
+  return <FocusableContext.Provider value={context}>{props.children}</FocusableContext.Provider>;
 };

package/src/interactions/createFocus.ts

@@ -102,8 +102,10 @@ function createSyntheticBlurHandler(): (
  * Based on react-aria's useFocus but adapted for SolidJS.
  */
 export function createFocus(props: CreateFocusProps = {}): FocusResult {
-  const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
-
+  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid
+  // hook body runs once, so a destructure would freeze them at call time. The
+  // handlers read props.x live and the returned props are getters, mirroring
+  // upstream useFocus's per-render re-read. guard:idiomatic-solid.
   let cleanupRef: (() => void) | undefined;
   const syntheticBlurHandler = createSyntheticBlurHandler();
 
@@ -117,12 +119,12 @@ export function createFocus(props: CreateFocusProps = {}): FocusResult {
   const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
     // Only handle if target is the currentTarget (not bubbled from children)
     if (e.target === e.currentTarget) {
-      if (onBlurProp) {
-        onBlurProp(e);
+      if (props.onBlur) {
+        props.onBlur(e);
       }
 
-      if (onFocusChange) {
-        onFocusChange(false);
+      if (props.onFocusChange) {
+        props.onFocusChange(false);
       }
 
       cleanupRef?.();
@@ -137,12 +139,12 @@ export function createFocus(props: CreateFocusProps = {}): FocusResult {
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
 
     if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {
-      if (onFocusProp) {
-        onFocusProp(e);
+      if (props.onFocus) {
+        props.onFocus(e);
       }
 
-      if (onFocusChange) {
-        onFocusChange(true);
+      if (props.onFocusChange) {
+        props.onFocusChange(true);
       }
 
       // Set up synthetic blur handler for Firefox bug
@@ -150,19 +152,22 @@ export function createFocus(props: CreateFocusProps = {}): FocusResult {
     }
   };
 
-  // If disabled or no handlers, return empty props
-  if (isDisabled) {
-    return {
-      focusProps: {},
-    };
-  }
-
-  const hasHandlers = onFocusProp || onFocusChange || onBlurProp;
-
+  // If disabled or no handlers, return empty props. Getters re-read props so a
+  // later isDisabled/handler change is reflected (the body itself runs once).
   return {
     focusProps: {
-      onFocus: hasHandlers ? onFocus : undefined,
-      onBlur: onBlurProp || onFocusChange ? onBlur : undefined,
+      get onFocus() {
+        if (props.isDisabled) {
+          return undefined;
+        }
+        return props.onFocus || props.onFocusChange || props.onBlur ? onFocus : undefined;
+      },
+      get onBlur() {
+        if (props.isDisabled) {
+          return undefined;
+        }
+        return props.onBlur || props.onFocusChange ? onBlur : undefined;
+      },
     },
   };
 }

package/src/interactions/createFocusWithin.ts

@@ -92,7 +92,11 @@ function createSyntheticBlurHandler(): (
  * Based on react-aria's useFocusWithin but adapted for SolidJS.
  */
 export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {
-  const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
+  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid
+  // hook body runs once, so destructuring would freeze them at call time and drop
+  // reactive updates — createOverlay/createVisuallyHidden pass a live isDisabled
+  // getter. The handlers below read props.x live; the return is getter-based so a
+  // later isDisabled flip re-computes. Mirrors upstream useFocusWithin's re-read.
 
   // State tracking
   let isFocusWithin = false;
@@ -123,12 +127,12 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
       cleanupRef?.();
       cleanupRef = undefined;
 
-      if (onBlurWithin) {
-        onBlurWithin(e);
+      if (props.onBlurWithin) {
+        props.onBlurWithin(e);
       }
 
-      if (onFocusWithinChange) {
-        onFocusWithinChange(false);
+      if (props.onFocusWithinChange) {
+        props.onFocusWithinChange(false);
       }
     }
   };
@@ -145,12 +149,12 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
 
     if (!isFocusWithin && activeElement === getEventTarget(e)) {
-      if (onFocusWithin) {
-        onFocusWithin(e);
+      if (props.onFocusWithin) {
+        props.onFocusWithin(e);
       }
 
-      if (onFocusWithinChange) {
-        onFocusWithinChange(true);
+      if (props.onFocusWithinChange) {
+        props.onFocusWithinChange(true);
       }
 
       isFocusWithin = true;
@@ -179,12 +183,12 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
               isFocusWithin = false;
               removeAllGlobalListeners();
 
-              if (onBlurWithin) {
-                onBlurWithin(nativeEvent);
+              if (props.onBlurWithin) {
+                props.onBlurWithin(nativeEvent);
               }
 
-              if (onFocusWithinChange) {
-                onFocusWithinChange(false);
+              if (props.onFocusWithinChange) {
+                props.onFocusWithinChange(false);
               }
               cleanupRef?.();
               cleanupRef = undefined;
@@ -196,19 +200,14 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
     }
   };
 
-  if (isDisabled) {
-    return {
-      focusWithinProps: {
-        onFocus: undefined,
-        onBlur: undefined,
-      },
-    };
-  }
-
   return {
     focusWithinProps: {
-      onFocus,
-      onBlur,
+      get onFocus() {
+        return props.isDisabled ? undefined : onFocus;
+      },
+      get onBlur() {
+        return props.isDisabled ? undefined : onBlur;
+      },
     },
   };
 }

package/src/interactions/createInteractionModality.ts

@@ -361,11 +361,13 @@ export function createFocusVisible(props: FocusVisibleProps = {}): FocusVisibleR
     return { isFocusVisible: () => false };
   }
 
-  const { isTextInput, autoFocus } = props;
-  const [isVisible, setIsVisible] = createSignal<boolean>(autoFocus || isFocusVisible());
+  // autoFocus seeds the initial value once; isTextInput is read inside the effect
+  // so it re-subscribes reactively (a top-level destructure would freeze it — the
+  // body runs once). Mirrors upstream useFocusVisible's [isTextInput] dep.
+  const [isVisible, setIsVisible] = createSignal<boolean>(props.autoFocus || isFocusVisible());
 
   createEffect(() => {
-    const cleanup = createFocusVisibleListener(setIsVisible, { isTextInput });
+    const cleanup = createFocusVisibleListener(setIsVisible, { isTextInput: props.isTextInput });
     onCleanup(cleanup);
   });