@octane-xplat/sheet 0.0.1 → 0.10.0

package/platforms/android/java/com/octanexplat/sheet/XplatSheetProvider.kt

@@ -0,0 +1,198 @@
+// Adapted from @expo/ui (MIT) — Copyright 2025-present 650 Industries.
+// Upstream: expo/packages/expo-ui/android/.../ui/ModalBottomSheetView.kt
+// (sdk-57). The ExpoModules glue (ComposeProps records, async-function
+// handles, slot views, ModifierRegistry) is replaced by the
+// @nativescript/jetpack-compose provider contract: updateData(Map) + onEvent.
+// The sheet's content is a registered NativeScript view hosted through
+// AndroidView — XplatViewRegistry mirrors the context-menu leaf's registry
+// (same mechanism, kept leaf-local while the shared-bridge question is open).
+
+@file:OptIn(ExperimentalMaterial3Api::class)
+
+package com.octanexplat.sheet
+
+import android.app.Activity
+import android.app.Dialog
+import android.content.Context
+import android.view.KeyEvent
+import android.view.View
+import android.view.ViewGroup
+import android.view.inputmethod.InputMethodManager
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.BottomSheetDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.ModalBottomSheetProperties
+import androidx.compose.material3.contentColorFor
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.ComposeView
+import androidx.compose.ui.platform.LocalView
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.compose.ui.window.DialogWindowProvider
+import org.json.JSONObject
+import java.lang.ref.WeakReference
+
+/** id → NativeScript view registry, callable directly from JS
+ *  (`com.octanexplat.sheet.XplatViewRegistry.register`). Same mechanism as
+ *  the context-menu leaf's registry — the sheet content subtree embeds in
+ *  the modal sheet's dialog window through AndroidView. Weak refs; JS owns
+ *  the lifecycle and unregisters on unmount. */
+object XplatViewRegistry {
+	private val views = HashMap<String, WeakReference<View>>()
+
+	@JvmStatic
+	fun register(id: String, view: View) {
+		views[id] = WeakReference(view)
+	}
+
+	@JvmStatic
+	fun unregister(id: String) {
+		views.remove(id)
+	}
+
+	@JvmStatic
+	fun get(id: String): View? = views[id]?.get()
+}
+
+private data class SheetUiState(
+	val open: Boolean = false,
+	val contentId: String = "",
+	val skipPartiallyExpanded: Boolean = false,
+	val showDragHandle: Boolean = true,
+	val sheetGesturesEnabled: Boolean = true,
+	val shouldDismissOnBackPress: Boolean = true,
+	val shouldDismissOnClickOutside: Boolean = true,
+	val containerColor: Int? = null,
+	val contentColor: Int? = null,
+	val scrimColor: Int? = null,
+)
+
+private fun Any?.asBoolean(): Boolean = when (this) {
+	is Boolean -> this
+	is Number -> toInt() != 0
+	else -> false
+}
+
+private fun Any?.asColorInt(): Int? = when (this) {
+	is Number -> toInt()
+	is String -> runCatching { android.graphics.Color.parseColor(this) }.getOrNull()
+	else -> null
+}
+
+/** True while the input method has an active connection to a view that
+ *  accepts text — ported from Expo's ModalBottomSheetView. */
+private fun Activity.isAcceptingText(): Boolean {
+	val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager
+	return inputMethodManager?.isAcceptingText == true
+}
+
+/** Ported: the sheet lives in its own dialog window, so key events that the
+ *  activity owns (e.g. dev-menu triggers) stop reaching it while the sheet
+ *  is open — forward non-dismiss keys back, skipping while a field accepts
+ *  text so typing can't trigger activity shortcuts. */
+@Composable
+private fun ForwardKeyEventsToActivity(activity: Activity?) {
+	val dialog = (LocalView.current.parent as? DialogWindowProvider)?.window?.callback as? Dialog
+	if (dialog == null || activity == null) {
+		return
+	}
+	DisposableEffect(dialog, activity) {
+		dialog.setOnKeyListener { _, keyCode, event ->
+			val isForwardable = event.action == KeyEvent.ACTION_UP &&
+				keyCode != KeyEvent.KEYCODE_BACK &&
+				keyCode != KeyEvent.KEYCODE_ESCAPE &&
+				!activity.isAcceptingText()
+			isForwardable && activity.onKeyUp(keyCode, event)
+		}
+		onDispose {
+			dialog.setOnKeyListener(null)
+		}
+	}
+}
+
+@Composable
+private fun SheetContent(state: SheetUiState, activity: Activity?, onDismiss: () -> Unit) {
+	if (!state.open) {
+		return
+	}
+	val sheetState = rememberModalBottomSheetState(state.skipPartiallyExpanded)
+	val resolvedContainer = state.containerColor?.let { androidx.compose.ui.graphics.Color(it) }
+		?: BottomSheetDefaults.ContainerColor
+	val resolvedContent = state.contentColor?.let { androidx.compose.ui.graphics.Color(it) }
+		?: contentColorFor(resolvedContainer)
+	val resolvedScrim = state.scrimColor?.let { androidx.compose.ui.graphics.Color(it) }
+		?: BottomSheetDefaults.ScrimColor
+
+	// This material3 predates sheetGesturesEnabled and
+	// shouldDismissOnClickOutside — only shouldDismissOnBackPress is
+	// carried through properties.
+	ModalBottomSheet(
+		sheetState = sheetState,
+		onDismissRequest = onDismiss,
+		containerColor = resolvedContainer,
+		contentColor = resolvedContent,
+		scrimColor = resolvedScrim,
+		dragHandle = if (state.showDragHandle) {
+			{ BottomSheetDefaults.DragHandle() }
+		} else {
+			null
+		},
+		properties = ModalBottomSheetProperties(
+			shouldDismissOnBackPress = state.shouldDismissOnBackPress,
+		),
+	) {
+		ForwardKeyEventsToActivity(activity)
+		Box(modifier = Modifier.fillMaxWidth()) {
+			val contentId = state.contentId
+			if (contentId.isNotEmpty()) {
+				AndroidView(
+					factory = { ctx ->
+						XplatViewRegistry.get(contentId) ?: View(ctx).apply {
+							layoutParams = ViewGroup.LayoutParams(0, 0)
+						}
+					},
+				)
+			}
+		}
+	}
+}
+
+class XplatSheetProvider {
+	private var state by mutableStateOf(SheetUiState())
+	var onEvent: ((Any) -> Unit)? = null
+
+	fun generateComposeView(view: ComposeView) {
+		view.setContent {
+			androidx.compose.material3.MaterialTheme {
+				SheetContent(
+					state = state,
+					activity = (view.context as? Activity),
+					onDismiss = { onEvent?.invoke(JSONObject().put("dismissed", true)) },
+				)
+			}
+		}
+	}
+
+	fun updateData(input: Map<Any, Any>) {
+		val data = input["data"] as? Map<*, *> ?: input
+		state = SheetUiState(
+			open = data["open"].asBoolean(),
+			contentId = data["contentId"] as? String ?: "",
+			skipPartiallyExpanded = data["skipPartiallyExpanded"].asBoolean(),
+			showDragHandle = if (data.containsKey("showDragHandle")) data["showDragHandle"].asBoolean() else true,
+			sheetGesturesEnabled = if (data.containsKey("sheetGesturesEnabled")) data["sheetGesturesEnabled"].asBoolean() else true,
+			shouldDismissOnBackPress = if (data.containsKey("shouldDismissOnBackPress")) data["shouldDismissOnBackPress"].asBoolean() else true,
+			shouldDismissOnClickOutside = if (data.containsKey("shouldDismissOnClickOutside")) data["shouldDismissOnClickOutside"].asBoolean() else true,
+			containerColor = data["containerColor"].asColorInt(),
+			contentColor = data["contentColor"].asColorInt(),
+			scrimColor = data["scrimColor"].asColorInt(),
+		)
+	}
+}

package/platforms/ios/src/XplatSheetProvider.swift

@@ -0,0 +1,188 @@
+// Adapted from @expo/ui (MIT) — Copyright 2025-present 650 Industries.
+// Upstream: expo/packages/expo-ui/ios/BottomSheetView.swift (sdk-57).
+// The ExpoModules glue (@Field props record, EventDispatcher, children slot
+// views) is replaced by the @nativescript/swift-ui provider contract:
+// updateData(NSDictionary) + onEvent. The sheet's content is a registered
+// NativeScript view resolved through NativeScriptViewFactory — the same
+// HostedNativeScriptView the context-menu leaf re-declares (the plugin's
+// NativeScriptView struct is module-internal).
+
+import SwiftUI
+
+private final class SheetModel: ObservableObject {
+	@Published var isPresented: Bool = false
+	@Published var contentId: String = ""
+	@Published var fitToContents: Bool = false
+	@Published var detents: [String] = ["medium"]
+	@Published var customHeight: Double? = nil
+	@Published var customFraction: Double? = nil
+	@Published var showDragIndicator: Bool = false
+	@Published var interactiveDismissDisabled: Bool = false
+	var onPresentedChange: ((Bool) -> Void)?
+	var onDismiss: (() -> Void)?
+}
+
+// Same shape as the plugin's NativeScriptViewRepresentable — unique instance
+// id resolved through the core-owned NativeScriptViewFactory.
+private struct HostedNativeScriptView: UIViewRepresentable {
+	let id: String
+
+	init(id: String) {
+		self.id = id + "-" + UUID().uuidString
+	}
+
+	func makeUIView(context: Context) -> UIView {
+		return NativeScriptViewFactory.shared?.getViewById(id) ?? UIView()
+	}
+
+	func updateUIView(_ uiView: UIView, context: Context) {}
+}
+
+private struct SizePreferenceKey: PreferenceKey {
+	static var defaultValue: CGSize?
+
+	static func reduce(value: inout CGSize?, nextValue: () -> CGSize?) {
+		guard let nextValue = nextValue() else {
+			return
+		}
+		value = nextValue
+	}
+}
+
+private struct ReadSizeModifier: ViewModifier {
+	private var sizeView: some View {
+		GeometryReader { geometry in
+			Color.clear
+				.preference(key: SizePreferenceKey.self, value: geometry.size)
+				.allowsHitTesting(false)
+		}
+	}
+
+	func body(content: Content) -> some View {
+		content.background(sizeView)
+	}
+}
+
+@available(iOS 14.0, *)
+private struct SheetContent: View {
+	@ObservedObject var model: SheetModel
+	@State private var isPresented: Bool = false
+	@State private var childrenSize: CGSize = .zero
+
+	private func handleSizeChange(_ size: CGSize) {
+		guard childrenSize != size else { return }
+		childrenSize = size
+	}
+
+	@available(iOS 16.0, tvOS 16.0, *)
+	private var presentationDetents: Set<PresentationDetent> {
+		if model.fitToContents, childrenSize.height > 0 {
+			return [.height(childrenSize.height)]
+		}
+		var result: Set<PresentationDetent> = []
+		for detent in model.detents {
+			switch detent {
+			case "large": result.insert(.large)
+			case "fraction": result.insert(.fraction(model.customFraction ?? 0.5))
+			case "height": result.insert(.height(model.customHeight ?? 300))
+			default: result.insert(.medium)
+			}
+		}
+		return result.isEmpty ? [.medium] : result
+	}
+
+	var body: some View {
+		Color.clear
+			.frame(width: 0, height: 0)
+			.sheet(isPresented: $isPresented, onDismiss: {
+				model.onDismiss?()
+			}) {
+				let content = HostedNativeScriptView(id: model.contentId)
+					.modifier(ReadSizeModifier())
+					.onPreferenceChange(SizePreferenceKey.self) { size in
+						if let size { handleSizeChange(size) }
+					}
+				if #available(iOS 16.0, tvOS 16.0, *) {
+					content
+						.presentationDetents(presentationDetents)
+						.presentationDragIndicator(model.showDragIndicator ? .visible : .hidden)
+						.interactiveDismissDisabled(model.interactiveDismissDisabled)
+				} else {
+					content
+				}
+			}
+			.onChange(of: isPresented) { newIsPresented in
+				if model.isPresented == newIsPresented {
+					return
+				}
+				model.onPresentedChange?(newIsPresented)
+			}
+			.onChange(of: model.isPresented) { newValue in
+				isPresented = newValue
+			}
+			.onAppear {
+				isPresented = model.isPresented
+			}
+	}
+}
+
+@objc(XplatSheetProvider)
+public final class XplatSheetProvider: UIViewController, SwiftUIProvider {
+	private let model = SheetModel()
+
+	public required init() {
+		super.init(nibName: nil, bundle: nil)
+		model.onPresentedChange = { [weak self] presented in
+			self?.onEvent?(["isPresented": presented])
+		}
+		model.onDismiss = { [weak self] in
+			self?.onEvent?(["dismissed": true])
+		}
+	}
+
+	public required init?(coder: NSCoder) {
+		super.init(coder: coder)
+		model.onPresentedChange = { [weak self] presented in
+			self?.onEvent?(["isPresented": presented])
+		}
+		model.onDismiss = { [weak self] in
+			self?.onEvent?(["dismissed": true])
+		}
+	}
+
+	public override func viewDidLoad() {
+		super.viewDidLoad()
+		if #available(iOS 14.0, *) {
+			setupSwiftUIView(content: SheetContent(model: model))
+		}
+	}
+
+	public func updateData(data: NSDictionary) {
+		if let presented = data["isPresented"] as? NSNumber {
+			model.isPresented = presented.boolValue
+		}
+		if let contentId = data["contentId"] as? String {
+			model.contentId = contentId
+		}
+		if let fit = data["fitToContents"] as? NSNumber {
+			model.fitToContents = fit.boolValue
+		}
+		if let detents = data["detents"] as? [String] {
+			model.detents = detents
+		}
+		if let height = data["customHeight"] as? NSNumber {
+			model.customHeight = height.doubleValue
+		}
+		if let fraction = data["customFraction"] as? NSNumber {
+			model.customFraction = fraction.doubleValue
+		}
+		if let indicator = data["showDragIndicator"] as? NSNumber {
+			model.showDragIndicator = indicator.boolValue
+		}
+		if let disable = data["interactiveDismissDisabled"] as? NSNumber {
+			model.interactiveDismissDisabled = disable.boolValue
+		}
+	}
+
+	public var onEvent: ((NSDictionary) -> Void)?
+}

package/src/AppKitSheet.macos.tsrx

@@ -0,0 +1,53 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useEffect, useRef } from 'octane'
+import type { AppKitSheetProps } from './macos/types'
+
+const host = (): any => (globalThis as any).__xplatAppKit ?? {}
+
+function ContentRoot(props: { render?: () => any }) @{
+	<>{props.render?.()}</>;
+}
+
+/** macOS sheet — presents the `content` subtree in a real AppKit window
+ *  sheet (`beginSheet` on the leaf's parent window), falling back to a
+ *  floating window when no parent exists. `open` controls presentation;
+ *  closing the sheet window (Esc/close button) or `open`→false fires
+ *  `onDismissed`. Detents don't exist on macOS — the window sizes to the
+ *  content's fitting size. */
+export function AppKitSheet(props: AppKitSheetProps) @{
+	const anchor = useRef<any>(null)
+	const presented = useRef<any>(null)
+
+	useEffect(() => {
+		if (!props.open) return
+		if (presented.current) {
+			presented.current.update({ render: props.content })
+			return
+		}
+
+		const view = anchor.current
+		const present = host().presentSheet
+		if (!view || typeof present !== 'function') return
+		presented.current = present(view, {
+			component: ContentRoot,
+			props: { render: props.content },
+			onDismissed: () => {
+				presented.current = null
+				props.onDismissed?.()
+			},
+		})
+
+		return () => {
+			const entry = presented.current
+			presented.current = null
+			entry?.close()
+		}
+	}, [props.open])
+
+	// Push content render-fn changes into the presented sheet while open.
+	useEffect(() => {
+		presented.current?.update?.({ render: props.content })
+	})
+
+	<flexboxlayout ref={(v: any) => { anchor.current = v }} id={props.id} />;
+}

package/src/BottomSheet.web.tsrx

@@ -0,0 +1,210 @@
+/** @jsxImportSource octane */
+import { useEffect, useRef } from 'octane'
+import type { BottomSheetProps, WebFocusTarget } from './web/types'
+
+function tabStops(panel: HTMLElement): HTMLElement[] {
+	return Array.from(
+		panel.querySelectorAll<HTMLElement>(
+			'a[href],button,input:not([type="hidden"]),textarea,select,[tabindex],[contenteditable="true"]',
+		),
+	).filter((element) => {
+		if (
+			element.tabIndex < 0 ||
+			element.matches(':disabled') ||
+			element.closest('[inert],[hidden],[aria-hidden="true"]')
+		) {
+			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
+	})
+}
+
+/** Web bottom sheet: a modal browser dialog. `open` controls visibility;
+ *  `onDismissed` fires for enabled Escape, scrim, and drag dismissals. */
+export function BottomSheet(props: BottomSheetProps) @{
+	const dialog = useRef<HTMLDialogElement | null>(null)
+	const panel = useRef<HTMLDivElement | null>(null)
+	const drag = useRef<{ pointerId: number; startY: number; offsetY: number } | null>(null)
+
+	useEffect(() => {
+		const current = dialog.current
+		if (!props.open || !current || current.open) {
+			return
+		}
+
+		const trigger =
+			props.finalFocusRef?.current ?? (current.ownerDocument.activeElement as WebFocusTarget | null)
+
+		const previousTabIndex = current.getAttribute('tabindex')
+		current.showModal()
+		const stops = panel.current ? tabStops(panel.current) : []
+		const autofocus = current.querySelector<HTMLElement>('[autofocus]')
+		const initialFocus =
+			(autofocus && !autofocus.matches(':disabled,[hidden],[inert]') ? autofocus : null) ??
+			stops[0] ??
+			current
+
+		if (initialFocus === current && previousTabIndex === null) {
+			current.tabIndex = -1
+		}
+
+		initialFocus.focus({ preventScroll: true })
+
+		return () => {
+			if (current.open) {
+				current.close()
+			}
+
+			if (previousTabIndex === null && initialFocus === current) {
+				current.removeAttribute('tabindex')
+			}
+
+			requestAnimationFrame(() => {
+				if (trigger?.isConnected && !trigger.closest('[inert]')) {
+					trigger.focus({ preventScroll: true })
+				}
+			})
+		}
+	}, [props.open])
+
+	if (!props.open || typeof document === 'undefined') {
+		return <></>
+	}
+
+	const resetDrag = () => {
+		drag.current = null
+		panel.current?.style.removeProperty('--xplat-sheet-drag-offset')
+		panel.current?.style.removeProperty('transition')
+	}
+
+	const onPointerDown = (event: PointerEvent) => {
+		if (props.sheetGesturesEnabled === false || !event.isPrimary || event.button !== 0) {
+			return
+		}
+
+		drag.current = { pointerId: event.pointerId, startY: event.clientY, offsetY: 0 }
+		panel.current?.style.setProperty('transition', 'none')
+
+		;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+	}
+
+	const onPointerMove = (event: PointerEvent) => {
+		const active = drag.current
+		if (!active || active.pointerId !== event.pointerId) {
+			return
+		}
+
+		active.offsetY = Math.max(0, event.clientY - active.startY)
+		panel.current?.style.setProperty('--xplat-sheet-drag-offset', `${active.offsetY}px`)
+	}
+
+	const onPointerUp = (event: PointerEvent) => {
+		const active = drag.current
+		if (!active || active.pointerId !== event.pointerId) {
+			return
+		}
+
+		const shouldDismiss = active.offsetY >= Math.min(120, window.innerHeight * 0.18)
+		resetDrag()
+
+		if (shouldDismiss && props.sheetGesturesEnabled !== false) {
+			props.onDismissed?.()
+		}
+	}
+
+	const onCancel = (event: Event) => {
+		event.preventDefault()
+		if (props.shouldDismissOnBackPress ?? true) {
+			props.onDismissed?.()
+		}
+	}
+
+	const onKeyDown = (event: KeyboardEvent) => {
+		if (event.key !== 'Tab') {
+			return
+		}
+
+		const current = dialog.current
+		const active = current?.ownerDocument.activeElement
+		if (!current?.open || (active !== current && !panel.current?.contains(active))) {
+			return
+		}
+
+		const stops = panel.current ? tabStops(panel.current) : []
+		const index = stops.indexOf(active as HTMLElement)
+		event.preventDefault()
+		if (!stops.length) {
+			dialog.current?.focus({ preventScroll: true })
+			return
+		}
+
+		const nextIndex = event.shiftKey
+			? index <= 0 ? stops.length - 1 : index - 1
+			: index < 0 || index === stops.length - 1 ? 0 : index + 1
+
+		stops[nextIndex].focus({ preventScroll: true })
+	}
+
+	useEffect(() => {
+		const current = dialog.current
+		if (!props.open || !current) {
+			return
+		}
+
+		current.ownerDocument.addEventListener('keydown', onKeyDown, true)
+		return () => current.ownerDocument.removeEventListener('keydown', onKeyDown, true)
+	}, [props.open])
+
+	<>
+		<dialog
+			ref={dialog}
+			className="xplat-web-sheet"
+			aria-label={props.label ?? 'Bottom sheet'}
+			aria-modal="true"
+			style={{
+				'--xplat-sheet-scrim': props.scrimColor ?? 'rgb(0 0 0 / 0.4)',
+				'--xplat-sheet-container': props.containerColor ?? 'var(--sheet-bg, Canvas)',
+				'--xplat-sheet-content': props.contentColor ?? 'var(--sheet-fg, CanvasText)',
+				'--xplat-sheet-max-height': props.skipPartiallyExpanded ? '90vh' : '60vh',
+			}}
+			onCancel={onCancel}
+			onClick={(event: MouseEvent) => {
+				if (
+					event.target === event.currentTarget &&
+					(props.shouldDismissOnClickOutside ?? true)
+				) {
+					props.onDismissed?.()
+				}
+			}}
+		>
+			<div
+				ref={panel}
+				id={props.id}
+				className={'xplat-web-sheet-panel ' + (props.className ?? '')}
+				style={props.style}
+			>
+				{(props.showDragHandle ?? true) && (
+					<div
+						className="xplat-web-sheet-handle"
+						aria-hidden="true"
+						onPointerDown={onPointerDown}
+						onPointerMove={onPointerMove}
+						onPointerUp={onPointerUp}
+						onPointerCancel={resetDrag}
+					>
+						<div className="xplat-web-sheet-handle-mark" />
+					</div>
+				)}
+				{props.content?.()}
+			</div>
+		</dialog>
+	</>
+}