File size: 5,142 Bytes
064bfd6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | import type { DOMElement } from './dom.js'
import { FocusEvent } from './events/focus-event.js'
const MAX_FOCUS_STACK = 32
/**
* DOM-like focus manager for the Ink terminal UI.
*
* Pure state — tracks activeElement and a focus stack. Has no reference
* to the tree; callers pass the root when tree walks are needed.
*
* Stored on the root DOMElement so any node can reach it by walking
* parentNode (like browser's `node.ownerDocument`).
*/
export class FocusManager {
activeElement: DOMElement | null = null
private dispatchFocusEvent: (target: DOMElement, event: FocusEvent) => boolean
private enabled = true
private focusStack: DOMElement[] = []
constructor(
dispatchFocusEvent: (target: DOMElement, event: FocusEvent) => boolean,
) {
this.dispatchFocusEvent = dispatchFocusEvent
}
focus(node: DOMElement): void {
if (node === this.activeElement) return
if (!this.enabled) return
const previous = this.activeElement
if (previous) {
// Deduplicate before pushing to prevent unbounded growth from Tab cycling
const idx = this.focusStack.indexOf(previous)
if (idx !== -1) this.focusStack.splice(idx, 1)
this.focusStack.push(previous)
if (this.focusStack.length > MAX_FOCUS_STACK) this.focusStack.shift()
this.dispatchFocusEvent(previous, new FocusEvent('blur', node))
}
this.activeElement = node
this.dispatchFocusEvent(node, new FocusEvent('focus', previous))
}
blur(): void {
if (!this.activeElement) return
const previous = this.activeElement
this.activeElement = null
this.dispatchFocusEvent(previous, new FocusEvent('blur', null))
}
/**
* Called by the reconciler when a node is removed from the tree.
* Handles both the exact node and any focused descendant within
* the removed subtree. Dispatches blur and restores focus from stack.
*/
handleNodeRemoved(node: DOMElement, root: DOMElement): void {
// Remove the node and any descendants from the stack
this.focusStack = this.focusStack.filter(
n => n !== node && isInTree(n, root),
)
// Check if activeElement is the removed node OR a descendant
if (!this.activeElement) return
if (this.activeElement !== node && isInTree(this.activeElement, root)) {
return
}
const removed = this.activeElement
this.activeElement = null
this.dispatchFocusEvent(removed, new FocusEvent('blur', null))
// Restore focus to the most recent still-mounted element
while (this.focusStack.length > 0) {
const candidate = this.focusStack.pop()!
if (isInTree(candidate, root)) {
this.activeElement = candidate
this.dispatchFocusEvent(candidate, new FocusEvent('focus', removed))
return
}
}
}
handleAutoFocus(node: DOMElement): void {
this.focus(node)
}
handleClickFocus(node: DOMElement): void {
const tabIndex = node.attributes['tabIndex']
if (typeof tabIndex !== 'number') return
this.focus(node)
}
enable(): void {
this.enabled = true
}
disable(): void {
this.enabled = false
}
focusNext(root: DOMElement): void {
this.moveFocus(1, root)
}
focusPrevious(root: DOMElement): void {
this.moveFocus(-1, root)
}
private moveFocus(direction: 1 | -1, root: DOMElement): void {
if (!this.enabled) return
const tabbable = collectTabbable(root)
if (tabbable.length === 0) return
const currentIndex = this.activeElement
? tabbable.indexOf(this.activeElement)
: -1
const nextIndex =
currentIndex === -1
? direction === 1
? 0
: tabbable.length - 1
: (currentIndex + direction + tabbable.length) % tabbable.length
const next = tabbable[nextIndex]
if (next) {
this.focus(next)
}
}
}
function collectTabbable(root: DOMElement): DOMElement[] {
const result: DOMElement[] = []
walkTree(root, result)
return result
}
function walkTree(node: DOMElement, result: DOMElement[]): void {
const tabIndex = node.attributes['tabIndex']
if (typeof tabIndex === 'number' && tabIndex >= 0) {
result.push(node)
}
for (const child of node.childNodes) {
if (child.nodeName !== '#text') {
walkTree(child, result)
}
}
}
function isInTree(node: DOMElement, root: DOMElement): boolean {
let current: DOMElement | undefined = node
while (current) {
if (current === root) return true
current = current.parentNode
}
return false
}
/**
* Walk up to root and return it. The root is the node that holds
* the FocusManager — like browser's `node.getRootNode()`.
*/
export function getRootNode(node: DOMElement): DOMElement {
let current: DOMElement | undefined = node
while (current) {
if (current.focusManager) return current
current = current.parentNode
}
throw new Error('Node is not in a tree with a FocusManager')
}
/**
* Walk up to root and return its FocusManager.
* Like browser's `node.ownerDocument` — focus belongs to the root.
*/
export function getFocusManager(node: DOMElement): FocusManager {
return getRootNode(node).focusManager!
}
|