@octane-xplat/ui 0.7.2 → 0.9.0

package/src/modal-focus.web.ts

@@ -0,0 +1,162 @@
+type Scope = {
+	layer: HTMLElement
+	panel: HTMLElement
+	trigger: HTMLElement | null
+}
+
+const scopes: Scope[] = []
+const originalInert = new Map<HTMLElement, boolean>()
+let observer: MutationObserver | undefined
+
+function topScope(): Scope | undefined {
+	return scopes[scopes.length - 1]
+}
+
+function updateIsolation(): void {
+	const top = topScope()
+	if (!top) {
+		for (const [element, inert] of originalInert) {
+			if (!inert) {
+				element.removeAttribute('inert')
+			}
+		}
+
+		originalInert.clear()
+		return
+	}
+
+	for (const element of Array.from(top.layer.ownerDocument.body.children) as HTMLElement[]) {
+		if (!originalInert.has(element)) {
+			originalInert.set(element, element.hasAttribute('inert'))
+		}
+
+		const inert = originalInert.get(element) || !element.contains(top.layer)
+		element.toggleAttribute('inert', inert)
+	}
+}
+
+function tabStops(panel: HTMLElement): HTMLElement[] {
+	return Array.from(
+		panel.querySelectorAll<HTMLElement>(
+			'a[href],button,input,textarea,select,[tabindex],[contenteditable="true"]',
+		),
+	).filter((element) => {
+		if (
+			element.tabIndex < 0 ||
+			element.matches(':disabled') ||
+			element.closest('[inert],[hidden]')
+		) {
+			return false
+		}
+
+		for (let parent: HTMLElement | null = element; parent; parent = parent.parentElement) {
+			const style = getComputedStyle(parent)
+			if (style.display === 'none' || style.visibility === 'hidden') {
+				return false
+			}
+		}
+
+		return true
+	})
+}
+
+/** Own keyboard focus only for a modal body portal. Inert preserves the
+ * background's state while hiding it from both focus and the browser AX tree. */
+export function isolateModalFocus(
+	layer: HTMLElement,
+	panel: HTMLElement,
+	dismiss: () => void,
+): () => void {
+	const document = layer.ownerDocument
+	const scope: Scope = { layer, panel, trigger: document.activeElement as HTMLElement | null }
+	const tabIndex = panel.getAttribute('tabindex')
+	if (tabIndex === null) {
+		panel.tabIndex = -1
+	}
+
+	scopes.push(scope)
+	updateIsolation()
+
+	// An outer modal may have made this newly appended portal inert before
+	// its effect ran. Restore the top layer before attempting to focus it.
+	;(tabStops(panel)[0] ?? panel).focus({ preventScroll: true })
+	if (!observer) {
+		observer = new MutationObserver(updateIsolation)
+		observer.observe(document.body, { childList: true })
+	}
+
+	const focusInside = () => (tabStops(panel)[0] ?? panel).focus({ preventScroll: true })
+	const onFocus = (event: FocusEvent) => {
+		if (topScope() === scope && !panel.contains(event.target as Node)) {
+			focusInside()
+		}
+	}
+
+	const onKey = (event: KeyboardEvent) => {
+		if (topScope() !== scope || event.isComposing || event.keyCode === 229) {
+			return
+		}
+
+		if (event.key === 'Escape') {
+			event.preventDefault()
+			event.stopPropagation()
+			dismiss()
+		} else if (event.key === 'Tab') {
+			const stops = tabStops(panel)
+			const index = stops.indexOf(document.activeElement as HTMLElement)
+			if (
+				!stops.length ||
+				index < 0 ||
+				(event.shiftKey ? index === 0 : index === stops.length - 1)
+			) {
+				event.preventDefault()
+
+				;(stops.length ? stops[event.shiftKey ? stops.length - 1 : 0] : panel).focus({
+					preventScroll: true,
+				})
+			}
+		}
+	}
+
+	document.addEventListener('focusin', onFocus)
+	document.addEventListener('keydown', onKey, true)
+	return () => {
+		const wasTop = topScope() === scope
+		const index = scopes.indexOf(scope)
+		if (index < 0) {
+			return
+		}
+
+		// If a lower modal closes first, its children's return targets disappear.
+		for (const other of scopes) {
+			if (other !== scope && other.trigger && scope.layer.contains(other.trigger)) {
+				other.trigger = scope.trigger
+			}
+		}
+
+		scopes.splice(index, 1)
+		document.removeEventListener('focusin', onFocus)
+		document.removeEventListener('keydown', onKey, true)
+		if (tabIndex === null) {
+			panel.removeAttribute('tabindex')
+		}
+
+		updateIsolation()
+		if (!scopes.length) {
+			observer?.disconnect()
+			observer = undefined
+		}
+
+		if (wasTop) {
+			const trigger = scope.trigger
+			if (trigger?.isConnected && !trigger.closest('[inert]')) {
+				trigger.focus({ preventScroll: true })
+			} else {
+				const remaining = topScope()
+				if (remaining) {
+					;(tabStops(remaining.panel)[0] ?? remaining.panel).focus({ preventScroll: true })
+				}
+			}
+		}
+	}
+}

package/src/navigation-request.ts

@@ -0,0 +1,37 @@
+/** A redirect shares its request with the original stack. Claiming another
+ * stack supersedes its pending navigation without reviving a stale request. */
+export interface NavigationRequest {
+	isCurrent(): boolean
+	claim(stack: string): boolean
+}
+
+export function createNavigationRequests() {
+	const versions = new Map<string, number>()
+	const invalidate = (stack: string) => {
+		const version = (versions.get(stack) ?? 0) + 1
+		versions.set(stack, version)
+		return version
+	}
+
+	return {
+		invalidate,
+		begin(stack: string): NavigationRequest {
+			const owned = new Map([[stack, invalidate(stack)]])
+			const isCurrent = () => [...owned].every(([name, version]) => versions.get(name) === version)
+			return {
+				isCurrent,
+				claim(name: string) {
+					if (!isCurrent()) {
+						return false
+					}
+
+					if (!owned.has(name)) {
+						owned.set(name, invalidate(name))
+					}
+
+					return true
+				},
+			}
+		},
+	}
+}

package/src/overlay-lifecycle.mobile.test.ts

@@ -0,0 +1,316 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+const state = vi.hoisted(() => ({
+	hosts: [] as any[],
+	roots: [] as any[],
+	subscriptions: new Set<() => void>(),
+	owner: null as any,
+	open: null as any,
+	cleanup: [] as any[],
+	enter: vi.fn(),
+}))
+
+vi.mock('@nativescript/core', () => ({
+	isIOS: false,
+	isAndroid: false,
+	Screen: { mainScreen: { scale: 1 } },
+	GridLayout: class {
+		className = ''
+		style = {}
+		parent: any
+		handlers = new Map<string, Set<() => void>>()
+		constructor() {
+			state.hosts.push(this)
+		}
+		on(event: string, handler: () => void) {
+			const hs = this.handlers.get(event) ?? new Set()
+			hs.add(handler)
+			this.handlers.set(event, hs)
+		}
+		off(event: string, handler: () => void) {
+			this.handlers.get(event)?.delete(handler)
+		}
+		notify(event: string) {
+			for (const handler of this.handlers.get(event) ?? []) {
+				handler()
+			}
+		}
+	},
+}))
+
+vi.mock('@nativescript-community/octane', async (original) => ({
+	...(await original<Record<string, unknown>>()),
+	createNativeScriptRoot: () => {
+		const root = { render: vi.fn(), unmount: vi.fn() }
+		state.roots.push(root)
+		return root
+	},
+}))
+
+vi.mock('./root-layout.mobile', () => ({ rootLayoutFor: () => state.owner }))
+vi.mock('./theme/theme-scheme', () => ({
+	useThemeScheme: () => 'light',
+	applyThemeClasses: (host: any, base: string) => {
+		host.className = base
+		const listener = () => {
+			host.className = base
+		}
+
+		state.subscriptions.add(listener)
+		return () => {
+			state.subscriptions.delete(listener)
+		}
+	},
+}))
+
+vi.mock('./keyboard-inset.mobile', () => ({
+	bindBottomInsetToKeyboard: () => {
+		const off = vi.fn()
+		state.cleanup.push(off)
+		return off
+	},
+}))
+
+vi.mock('./tap-to-blur', () => ({
+	attachTapToBlur: () => {
+		const off = vi.fn()
+		state.cleanup.push(off)
+		return off
+	},
+}))
+
+vi.mock('./sheet-detents', () => ({
+	attachSheetDetents: () => {
+		const off = vi.fn()
+		state.cleanup.push(off)
+		return { detach: off, enter: state.enter }
+	},
+}))
+
+import { Overlay } from './Overlay.tsrx'
+import { Sheet } from './Sheet.tsrx'
+import { Popover } from './Popover.tsrx'
+const mounted: any[] = []
+const settle = async () => {
+	flushUniversalSync(() => {})
+	await new Promise((r) => setTimeout(r, 0))
+	flushUniversalSync(() => {})
+}
+
+function mount(Component: any, props: any = {}) {
+	const root = createUniversalRoot(
+		createObjectContainer('nativescript'),
+		createObjectDriver('nativescript'),
+	)
+
+	mounted.push(root)
+	const render = (extra: any = {}) => {
+		root.render(Component, {
+			open: true,
+			children: 'content',
+			anchor: { current: {} },
+			...props,
+			...extra,
+		})
+
+		flushUniversalSync(() => {})
+	}
+
+	render()
+	return { root, render }
+}
+
+beforeEach(() => {
+	state.hosts.length = 0
+	state.roots.length = 0
+	state.cleanup.length = 0
+	state.subscriptions.clear()
+	state.enter.mockClear()
+	state.open = null
+	state.owner = {
+		children: new Set(),
+		popups: new Set(),
+		open: vi.fn((host: any) => {
+			state.owner.children.add(host)
+			state.owner.popups.add(host)
+			host.parent = state.owner
+			return state.open ?? Promise.resolve()
+		}),
+		hasChild: (host: any) => state.owner.children.has(host),
+		getPopupIndex: (host: any) => (state.owner.popups.has(host) ? 0 : -1),
+		removeChild: vi.fn((host: any) => {
+			state.owner.children.delete(host)
+			host.parent = null
+		}),
+		close: vi.fn(async (host: any) => {
+			state.owner.popups.delete(host)
+			host.notify('closed')
+			state.owner.removeChild(host)
+		}),
+	}
+})
+
+afterEach(async () => {
+	for (const root of mounted.splice(0)) {
+		root.unmount()
+	}
+
+	await settle()
+})
+
+describe.each([
+	['Overlay', Overlay],
+	['Sheet', Sheet],
+	['Popover', Popover],
+] as const)('%s native lifetime', (_, Component) => {
+	it('releases its host, root and subscriptions when its owner unmounts', async () => {
+		const dismiss = vi.fn()
+		const { root } = mount(Component, { onDismiss: dismiss, detents: [0.5, 1] })
+		await settle()
+		root.unmount()
+		await settle()
+		expect(state.owner.children.size).toBe(0)
+		expect(state.roots[0].unmount).toHaveBeenCalledTimes(1)
+		expect(state.subscriptions.size).toBe(0)
+		expect(dismiss).not.toHaveBeenCalled()
+		for (const off of state.cleanup) {
+			expect(off).toHaveBeenCalledTimes(1)
+		}
+	})
+
+	it('releases everything on programmatic close without reporting dismissal', async () => {
+		const dismiss = vi.fn()
+		const { render } = mount(Component, { onDismiss: dismiss, detents: [0.5, 1] })
+		await settle()
+		render({ open: false })
+		await settle()
+		expect(state.owner.children.size).toBe(0)
+		expect(state.roots[0].unmount).toHaveBeenCalledTimes(1)
+		expect(state.subscriptions.size).toBe(0)
+		expect(dismiss).not.toHaveBeenCalled()
+	})
+
+	it('ignores late open completion after unmount', async () => {
+		let finish!: () => void
+		state.open = new Promise<void>((r) => {
+			finish = r
+		})
+
+		const { root } = mount(Component, { detents: [0.5, 1] })
+		await settle()
+		root.unmount()
+		await settle()
+		finish()
+		await settle()
+		expect(state.owner.children.size).toBe(0)
+		expect(state.roots[0].unmount).toHaveBeenCalledTimes(1)
+		expect(state.enter).not.toHaveBeenCalled()
+	})
+
+	it('cleans up a rejected open', async () => {
+		let fail!: (e: Error) => void
+		state.open = new Promise((_, reject) => {
+			fail = reject
+		})
+
+		const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+		mount(Component, { detents: [0.5, 1] })
+		await settle()
+		fail(new Error('open failed'))
+		await settle()
+		expect(state.owner.children.size).toBe(0)
+		expect(state.subscriptions.size).toBe(0)
+		expect(state.roots[0].unmount).toHaveBeenCalledTimes(1)
+		for (const off of state.cleanup) {
+			expect(off).toHaveBeenCalledTimes(1)
+		}
+
+		error.mockRestore()
+	})
+
+	it('does not remove a host already closing through RootLayout', async () => {
+		const { root } = mount(Component)
+		await settle()
+		const host = state.hosts[0]
+		state.owner.popups.delete(host)
+		root.unmount()
+		await settle()
+		expect(state.owner.close).not.toHaveBeenCalled()
+		expect(state.owner.removeChild).not.toHaveBeenCalled()
+		host.notify('closed')
+		state.owner.removeChild(host)
+		expect(state.roots[0].unmount).toHaveBeenCalledTimes(1)
+	})
+
+	it('detaches a host when its close animation rejects', async () => {
+		const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+		const { root } = mount(Component)
+		await settle()
+		state.owner.close.mockImplementation(async (host: any) => {
+			state.owner.popups.delete(host)
+			throw new Error('close failed')
+		})
+
+		root.unmount()
+		await settle()
+		expect(state.owner.children.size).toBe(0)
+		expect(state.subscriptions.size).toBe(0)
+		error.mockRestore()
+	})
+
+	it('keeps a reopened host alive when the old open rejects later', async () => {
+		let fail!: (e: Error) => void
+		state.open = new Promise((_, reject) => {
+			fail = reject
+		})
+
+		const error = vi.spyOn(console, 'error').mockImplementation(() => {})
+		const { render } = mount(Component)
+		await settle()
+		render({ open: false })
+		await settle()
+		state.open = null
+		render({ open: true })
+		await settle()
+		fail(new Error('old open'))
+		await settle()
+		expect(state.owner.children.size).toBe(1)
+		expect(state.roots[0].unmount).toHaveBeenCalledTimes(1)
+		expect(state.roots[1].unmount).not.toHaveBeenCalled()
+		error.mockRestore()
+	})
+
+	it('uses the latest dismissal callback and never reenters a platform close', async () => {
+		const old = vi.fn(),
+			current = vi.fn()
+
+		const { render } = mount(Component, { onDismiss: old })
+		await settle()
+		render({ onDismiss: current, children: 'updated' })
+		await settle()
+		await state.owner.close(state.hosts[0])
+		await settle()
+		expect(old).not.toHaveBeenCalled()
+		expect(current).toHaveBeenCalledTimes(1)
+		expect(state.owner.close).toHaveBeenCalledTimes(1)
+		expect(state.subscriptions.size).toBe(0)
+	})
+})
+
+it('Overlay replaces theme subscriptions when content or classes update', async () => {
+	const { render } = mount(Overlay)
+	await settle()
+	render({ className: 'new', children: 'updated' })
+	await settle()
+	expect(state.subscriptions.size).toBe(1)
+	expect(state.hosts[0].className).toContain('new')
+	render({ open: false })
+	await settle()
+	expect(state.subscriptions.size).toBe(0)
+})

package/src/overlay-lifetime.mobile.ts

@@ -0,0 +1,107 @@
+import type { GridLayout, RootLayout, RootLayoutOptions } from '@nativescript/core'
+
+/** Own the resources of one independently mounted overlay. RootLayout emits
+ * closed before removing the host, so that notification must never reenter close. */
+export function createOverlayLifetime(
+	owner: RootLayout,
+	host: GridLayout,
+	root: { unmount(): void },
+	label: string,
+	onFinish: (dismissed: boolean) => void,
+) {
+	// RootLayout removes closing hosts from its private popup registry before
+	// their exit animation finishes. Inspect that runtime seam to avoid reentry.
+	const registry = owner as unknown as {
+		hasChild(view: GridLayout): boolean
+		getPopupIndex(view: GridLayout): number
+	}
+
+	let released = false
+	let closing = false
+	const cleanups = new Set<() => void>()
+	const report = (action: string, error: unknown) =>
+		console.error(`[${label}] ${action} failed`, error)
+
+	const release = (dismissed: boolean) => {
+		if (released) {
+			return
+		}
+
+		released = true
+		host.off('closed', onClosed)
+		for (const cleanup of cleanups) {
+			cleanup()
+		}
+
+		cleanups.clear()
+		root.unmount()
+		onFinish(dismissed)
+	}
+
+	const onClosed = () => {
+		closing = true
+		release(true)
+	}
+
+	const detach = () => {
+		if (closing || !registry.hasChild(host)) {
+			return
+		}
+
+		// A shade tap or another caller may already be animating the close.
+		if (registry.getPopupIndex(host) === -1) {
+			return
+		}
+
+		closing = true
+		const failed = (error: unknown) => {
+			report('close', error)
+			if (registry.hasChild(host)) {
+				owner.removeChild(host)
+			}
+		}
+
+		try {
+			void owner.close(host).catch(failed)
+		} catch (error) {
+			failed(error)
+		}
+	}
+
+	host.on('closed', onClosed)
+	return {
+		own(cleanup: () => void) {
+			if (released) {
+				cleanup()
+			} else {
+				cleanups.add(cleanup)
+			}
+		},
+		close() {
+			release(false)
+			detach()
+		},
+		open(options?: RootLayoutOptions, afterOpen?: () => void | Promise<void>) {
+			const failed = (error: unknown) => {
+				report('open', error)
+				release(false)
+				detach()
+			}
+
+			try {
+				void owner
+					.open(host, options)
+					.then(() => {
+						if (released) {
+							detach()
+						} else {
+							return afterOpen?.()
+						}
+					})
+					.catch(failed)
+			} catch (error) {
+				failed(error)
+			}
+		},
+	}
+}