@octane-xplat/ui 0.7.3 → 0.9.0

package/src/tap-to-blur.ios.ts

@@ -11,35 +11,44 @@
  *  Keyboard taps live in a separate UIWindow, so they never reach it.
  *  `cancelsTouchesInView` stays false so taps still reach buttons. */
 export function attachTapToBlur(view: any): () => void {
-	const marker = '__xplatTapToBlur';
-	if (!view || view[marker]) {return () => {};}
-	view[marker] = true;
+	const marker = '__xplatTapToBlur'
+	if (!view || view[marker]) {
+		return () => {}
+	}
+
+	view[marker] = true
 
-	iosAttach();
+	iosAttach()
 	return () => {
-		view[marker] = false;
-		iosDetach();
-	};
+		view[marker] = false
+		iosDetach()
+	}
 }
 
-let iosCount = 0;
-let iosTarget: any = null;
-let iosRecognizer: any = null;
-let iosWindow: any = null;
+let iosCount = 0
+let iosTarget: any = null
+let iosRecognizer: any = null
+let iosWindow: any = null
 
 function iosAttach() {
-	iosCount++;
-	if (iosRecognizer) {return;}
-	const appWin = appWindow();
-	if (!appWin) {return;}
-	iosWindow = appWin;
+	iosCount++
+	if (iosRecognizer) {
+		return
+	}
+
+	const appWin = appWindow()
+	if (!appWin) {
+		return
+	}
+
+	iosWindow = appWin
 	// Resolve Objective-C bridge globals only when the iOS view is attached.
 	@NativeClass
 	class TapToBlurRecognizerTarget extends NSObject implements UIGestureRecognizerDelegate {
 		static ObjCProtocols = [UIGestureRecognizerDelegate]
 		static ObjCExposedMethods = {
 			tap: { returns: interop.types.void, params: [UITapGestureRecognizer] },
-		};
+		}
 
 		gestureRecognizerShouldReceiveTouch(_recognizer: any, touch: any) {
 			let hit = touch.view
@@ -49,42 +58,49 @@ function iosAttach() {
 				if (textField || textView) {
 					return false
 				}
+
 				hit = hit.superview
 			}
+
 			return true
 		}
 
 		tap(_recognizer: any) {
-			iosWindow.endEditing(true);
+			iosWindow.endEditing(true)
 		}
 	}
 
-	iosTarget = TapToBlurRecognizerTarget.new();
-	iosRecognizer = UITapGestureRecognizer.alloc().initWithTargetAction(iosTarget, 'tap');
-	iosRecognizer.delegate = iosTarget;
-	iosRecognizer.cancelsTouchesInView = false;
-	appWin.addGestureRecognizer(iosRecognizer);
+	iosTarget = TapToBlurRecognizerTarget.new()
+	iosRecognizer = UITapGestureRecognizer.alloc().initWithTargetAction(iosTarget, 'tap')
+	iosRecognizer.delegate = iosTarget
+	iosRecognizer.cancelsTouchesInView = false
+	appWin.addGestureRecognizer(iosRecognizer)
 }
 
 function iosDetach() {
-	iosCount--;
-	if (iosCount > 0 || !iosRecognizer) {return;}
-	iosWindow?.removeGestureRecognizer(iosRecognizer);
-	iosRecognizer = null;
-	iosTarget = null;
-	iosWindow = null;
+	iosCount--
+	if (iosCount > 0 || !iosRecognizer) {
+		return
+	}
+
+	iosWindow?.removeGestureRecognizer(iosRecognizer)
+	iosRecognizer = null
+	iosTarget = null
+	iosWindow = null
 }
 
 function appWindow() {
-	const scenes = UIApplication.sharedApplication.connectedScenes;
+	const scenes = UIApplication.sharedApplication.connectedScenes
 	// connectedScenes is an NSSet — `allObjects` marshals to a JS array.
 	for (const scene of (scenes as any).allObjects ?? []) {
 		if (scene instanceof UIWindowScene) {
 			for (const w of (scene.windows as any)?.allObjects ?? scene.windows ?? []) {
-				if (w.isKeyWindow) {return w;}
+				if (w.isKeyWindow) {
+					return w
+				}
 			}
 		}
 	}
 
-	return UIApplication.sharedApplication.keyWindow;
+	return UIApplication.sharedApplication.keyWindow
 }

package/src/tap-to-blur.mobile.ts

@@ -1,26 +1,34 @@
-import { Application } from '@nativescript/core';
+import { Application } from '@nativescript/core'
 
 /** Hide the Android soft keyboard when the user taps the attached view. */
 export function attachTapToBlur(view: any): () => void {
-	const marker = '__xplatTapToBlur';
-	if (!view || view[marker]) {return () => {};}
-	view[marker] = true;
+	const marker = '__xplatTapToBlur'
+	if (!view || view[marker]) {
+		return () => {}
+	}
+
+	view[marker] = true
 
 	if (!Application.android) {
-		return () => { view[marker] = false; };
+		return () => {
+			view[marker] = false
+		}
 	}
 
 	const handler = (_args: any) => {
-		const activity = Application.android.foregroundActivity;
-		const focused = activity?.currentFocus;
-		if (!focused) {return;}
-		const imm = activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE);
-		imm?.hideSoftInputFromWindow(focused.getWindowToken(), 0);
-	};
+		const activity = Application.android.foregroundActivity
+		const focused = activity?.getCurrentFocus()
+		if (!focused) {
+			return
+		}
 
-	view.on('tap', handler);
+		const imm = activity.getSystemService(android.content.Context.INPUT_METHOD_SERVICE)
+		imm?.hideSoftInputFromWindow(focused.getWindowToken(), 0)
+	}
+
+	view.on('tap', handler)
 	return () => {
-		view[marker] = false;
-		view.off('tap', handler);
-	};
+		view[marker] = false
+		view.off('tap', handler)
+	}
 }

package/src/text-focus.ts

@@ -0,0 +1,12 @@
+/** Dismiss the keyboard and release native editing focus. NativeScript's
+ * dismissSoftInput returns void; its return value is not a fallback signal. */
+export function blurText(view: any): void {
+	if (typeof view.dismissSoftInput === 'function') {
+		view.dismissSoftInput()
+	} else {
+		view.blur?.()
+	}
+
+	// Android dismissSoftInput hides the IME but retains EditText focus.
+	view.android?.clearFocus?.()
+}

package/src/text-input.mobile.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from 'vitest'
+import {
+	createObjectContainer,
+	createObjectDriver,
+	createUniversalRoot,
+	flushUniversalSync,
+} from 'octane/universal/native'
+
+vi.mock('@nativescript/core', () => ({
+	isIOS: false,
+	isAndroid: true,
+	Utils: { layout: { toDeviceIndependentPixels: (value: number) => value } },
+}))
+
+vi.mock('./escape-props', () => ({ applyEscapeProps: () => {} }))
+vi.mock('./Icon.tsrx', async () => {
+	const { defineUniversalComponent } = await import('octane/universal/native')
+	return { Icon: defineUniversalComponent('nativescript', () => null) }
+})
+
+import { TextInput } from './TextInput.tsrx'
+import { TextArea } from './TextArea.tsrx'
+import { SearchInput } from './SearchInput.tsrx'
+
+// NativeScript Property raises a synchronous textChange on script writes.
+// Model that event here, through the real compiled leaves and event dispatch.
+// This is regression coverage, not keyboard/IME/device evidence.
+describe('native controlled input writes', () => {
+	for (const [name, Component] of [
+		['TextInput', TextInput],
+		['TextArea', TextArea],
+		['SearchInput', SearchInput],
+	] as const) {
+		it(`${name} does not report controlled writes as user edits`, async () => {
+			const container = createObjectContainer('nativescript')
+			const root = createUniversalRoot(container, createObjectDriver('nativescript'))
+			const change = vi.fn()
+			let node: any
+			let inputHandle: any
+			let text = ''
+			let selection = [2, 4]
+			const bind = (handle: any) => {
+				inputHandle = handle
+				node = handle.native
+				node.style = {}
+				node.android = {
+					getSelectionStart: () => selection[0],
+					getSelectionEnd: () => selection[1],
+					setSelection: (start: number, end: number) => {
+						selection = [start, end]
+					},
+				}
+
+				Object.defineProperty(node, 'text', {
+					configurable: true,
+					get: () => text,
+					set: (value) => {
+						text = value
+						container.dispatchEvent(node, 'textchange', { object: node, value })
+					},
+				})
+			}
+
+			root.render(Component as any, { value: 'hello', onChange: change, bind, icon: false })
+			await vi.waitFor(() => expect(text).toBe('hello'))
+			expect(change).not.toHaveBeenCalled()
+			expect(selection).toEqual([2, 4])
+			root.render(Component as any, { value: 'x', onChange: change, bind, icon: false })
+			await vi.waitFor(() => expect(text).toBe('x'))
+			expect(change).not.toHaveBeenCalled()
+			expect(selection).toEqual([1, 1])
+			// A native edit still reaches the callback exactly once.
+			text = 'xy'
+			flushUniversalSync(() =>
+				container.dispatchEvent(node, 'textchange', { object: node, value: text }),
+			)
+
+			expect(change).toHaveBeenCalledExactlyOnceWith('xy')
+			const dismiss = vi.fn()
+			const clearFocus = vi.fn()
+			node.android.clearFocus = clearFocus
+			node.dismissSoftInput = dismiss // NativeScript returns void and has no blur method.
+			expect(() => inputHandle.blur()).not.toThrow()
+			expect(dismiss).toHaveBeenCalledTimes(1)
+			expect(clearFocus).toHaveBeenCalledTimes(1)
+			root.unmount()
+		})
+	}
+})

package/src/text-write.ts

@@ -1,4 +1,11 @@
-/** Controlled `text` write for TextInput/TextArea leaves. The driver's
+const writing = new WeakSet<object>()
+
+/** Whether a textChange is the synchronous echo of our controlled write. */
+export function isWritingText(view: object): boolean {
+	return writing.has(view)
+}
+
+/** Controlled `text` write for TextInput/TextArea/SearchInput leaves. The driver's
  *  generic prop path writes view.text verbatim; on Android the EditText
  *  setText resets the cursor to 0 on every controlled write. Park and
  *  restore the selection around the write (clamped to the new length so an
@@ -13,16 +20,19 @@ export function writeText(view: any, value: string | undefined | null): void {
 	}
 
 	const et = view.android
-	if (!et) {
+	const start = et?.getSelectionStart?.() ?? -1
+	const end = et?.getSelectionEnd?.() ?? -1
+	const nested = writing.has(view)
+	writing.add(view)
+	try {
 		view.text = next
-		return
-	}
-
-	const start = et.getSelectionStart?.() ?? -1
-	const end = et.getSelectionEnd?.() ?? -1
-	view.text = next
-	if (start >= 0) {
-		const len = next.length
-		et.setSelection(Math.min(start, len), Math.min(end >= 0 ? end : start, len))
+		if (start >= 0) {
+			const len = next.length
+			et.setSelection(Math.min(start, len), Math.min(end >= 0 ? end : start, len))
+		}
+	} finally {
+		if (!nested) {
+			writing.delete(view)
+		}
 	}
 }

package/src/theme/colorScheme.linux.ts

@@ -13,15 +13,13 @@ export type { ColorScheme } from '../props'
 import type { ColorScheme } from '../props'
 
 const bridged = () =>
-	typeof window !== 'undefined' &&
-	(window as any).webkit?.messageHandlers?.xplat !== undefined
+	typeof window !== 'undefined' && (window as any).webkit?.messageHandlers?.xplat !== undefined
 
 let lastScheme: ColorScheme =
 	((window as any).__xplatColorScheme as ColorScheme | undefined) ?? 'light'
 
 function getSystemScheme(): ColorScheme {
-	return typeof matchMedia === 'function' &&
-		matchMedia('(prefers-color-scheme: dark)').matches
+	return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches
 		? 'dark'
 		: 'light'
 }

package/src/theme/colorScheme.web.ts

@@ -3,16 +3,63 @@ import { useSyncExternalStore } from 'octane'
 export type { ColorScheme } from '../props'
 import type { ColorScheme } from '../props'
 
-export function getColorScheme(): ColorScheme {
+type HostTransport = {
+	listen(listener: (message: string) => void): () => void
+}
+
+const hostTransport = () =>
+	typeof window === 'undefined'
+		? null
+		: (((window as any).__xplatHostTransport as HostTransport | undefined) ?? null)
+
+let hostedScheme: ColorScheme =
+	typeof window === 'undefined'
+		? 'light'
+		: ((window as any).__xplatHostSnapshot?.colorScheme ??
+			(window as any).__xplatColorScheme ??
+			'light')
+
+function getSystemScheme(): ColorScheme {
 	return typeof matchMedia === 'function' && matchMedia('(prefers-color-scheme: dark)').matches
 		? 'dark'
 		: 'light'
 }
 
+export function getColorScheme(): ColorScheme {
+	return hostTransport() ? hostedScheme : getSystemScheme()
+}
+
 export function subscribeSystemScheme(cb: () => void): () => void {
-	const mq = matchMedia('(prefers-color-scheme: dark)')
-	mq.addEventListener('change', cb)
-	return () => mq.removeEventListener('change', cb)
+	const transport = hostTransport()
+	if (!transport) {
+		const mq = matchMedia('(prefers-color-scheme: dark)')
+		mq.addEventListener('change', cb)
+		return () => mq.removeEventListener('change', cb)
+	}
+
+	const onTransportMessage = (message: string) => {
+		try {
+			const packet = JSON.parse(message) as { type?: string; name?: string; payload?: unknown }
+			if (packet.type === 'event' && packet.name === 'appearance.change') {
+				hostedScheme = packet.payload === 'dark' ? 'dark' : 'light'
+				cb()
+			}
+		} catch {
+			// Host messages are strings; unrelated malformed traffic is ignored.
+		}
+	}
+
+	const onCompatEvent = (event: Event) => {
+		hostedScheme = (event as CustomEvent).detail === 'dark' ? 'dark' : 'light'
+		cb()
+	}
+
+	const offTransport = transport.listen(onTransportMessage)
+	window.addEventListener('xplat:appearance.change', onCompatEvent)
+	return () => {
+		offTransport()
+		window.removeEventListener('xplat:appearance.change', onCompatEvent)
+	}
 }
 
 export function useColorScheme(): ColorScheme {

package/src/theme/theme-scheme.macos.ts

@@ -9,7 +9,10 @@ const listeners = new Set<() => void>()
 const emit = () => listeners.forEach((listener) => listener())
 
 export function setThemePreference(value: ThemePreference): void {
-	if (preference === value) {return}
+	if (preference === value) {
+		return
+	}
+
 	preference = value
 	emit()
 }
@@ -44,7 +47,10 @@ export function onThemeSchemeChange(callback: () => void): () => void {
 }
 
 export function applyThemeClasses(view: any, base = ''): () => void {
-	const apply = () => { view.className = cx(base, themeSchemeClasses()) }
+	const apply = () => {
+		view.className = cx(base, themeSchemeClasses())
+	}
+
 	apply()
 	return onThemeSchemeChange(apply)
 }