@octane-xplat/sheet 0.0.1 → 0.10.0

package/src/MaterialBottomSheet.android.tsrx

@@ -0,0 +1,102 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import { ComposeDataDriver, JetpackCompose, registerJetpackCompose } from '@nativescript/jetpack-compose'
+import { Application, GridLayout } from '@nativescript/core'
+import { createNativeScriptRoot } from '@nativescript-community/octane'
+import { useEffect, useRef, useState } from 'octane'
+import type { UniversalComponent } from 'octane/universal'
+import type { MaterialBottomSheetProps } from './android/types'
+
+declare const com: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatandroidsheet: Attributes<typeof JetpackCompose>
+	}
+}
+
+registerElement('xplatandroidsheet', JetpackCompose)
+registerJetpackCompose('xplat-material-sheet', (owner: any) =>
+	new ComposeDataDriver(new com.octanexplat.sheet.XplatSheetProvider(), owner),
+)
+
+// Dash-free ids — the registry keys feed the provider's AndroidView factory.
+let seq = 0
+
+function ContentRoot(props: { render: () => any }) @{
+	<>{props.render()}</>;
+}
+
+/** Renders a Material 3 ModalBottomSheet whose content is a detached
+ *  octane subtree hosted via XplatViewRegistry + AndroidView inside the
+ *  sheet's dialog window. */
+export function MaterialBottomSheet(props: MaterialBottomSheetProps) @{
+	const contentId = useRef<string>('')
+	if (!contentId.current) {
+		contentId.current = `xplatsheet${++seq}`
+	}
+
+	const mounted = useRef<{ host: any; root: any } | null>(null)
+	const [ready, setReady] = useState(false)
+
+	useEffect(() => {
+		const host = new GridLayout()
+		// See context-menu: _setupAsRootView needs a real Context on Android.
+
+		const context = (Application.android as any).foregroundActivity ?? (Application.android as any).startActivity
+		const nativeHost = host as any
+
+		nativeHost._setupAsRootView(context)
+		nativeHost.callLoaded()
+		const root = createNativeScriptRoot(host)
+		if (props.content) {
+			root.render(ContentRoot as unknown as UniversalComponent, { render: props.content })
+		}
+
+		com.octanexplat.sheet.XplatViewRegistry.register(contentId.current, host.android)
+		mounted.current = { host, root }
+		// Gate contentId on registration — AndroidView's factory resolves the
+		// host once contentId arrives in updateData.
+		setReady(true)
+
+		return () => {
+			com.octanexplat.sheet.XplatViewRegistry.unregister(contentId.current)
+			root.unmount?.()
+			mounted.current = null
+			setReady(false)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (props.content) {
+			mounted.current?.root?.render(ContentRoot as unknown as UniversalComponent, {
+				render: props.content,
+			})
+		}
+	}, [props.content])
+
+	<xplatandroidsheet
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		composeId="xplat-material-sheet"
+		data={{
+			open: (props.open ?? false) ? 1 : 0,
+			contentId: ready && props.content ? contentId.current : '',
+			skipPartiallyExpanded: (props.skipPartiallyExpanded ?? false) ? 1 : 0,
+			showDragHandle: (props.showDragHandle ?? true) ? 1 : 0,
+			sheetGesturesEnabled: (props.sheetGesturesEnabled ?? true) ? 1 : 0,
+			shouldDismissOnBackPress: (props.shouldDismissOnBackPress ?? true) ? 1 : 0,
+			shouldDismissOnClickOutside: (props.shouldDismissOnClickOutside ?? true) ? 1 : 0,
+			containerColor: props.containerColor,
+			contentColor: props.contentColor,
+			scrimColor: props.scrimColor,
+		}}
+		onComposeEvent={(event: any) => {
+			if (event.data?.dismissed) {
+				props.onDismissed?.()
+			}
+		}}
+	/>;
+}

package/src/SwiftUIBottomSheet.ios.tsrx

@@ -0,0 +1,119 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { registerElement } from '@nativescript-community/octane'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+import { SwiftUI, UIDataDriver, registerSwiftUI, SwiftUIManager } from '@nativescript/swift-ui'
+import { GridLayout } from '@nativescript/core'
+import { createNativeScriptRoot } from '@nativescript-community/octane'
+import { useEffect, useRef } from 'octane'
+import type { UniversalComponent, UniversalRoot } from 'octane/universal'
+import type { SwiftUIBottomSheetProps } from './ios/types'
+
+declare const XplatSheetProvider: any
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatiossheet: Attributes<typeof SwiftUI>
+	}
+}
+
+registerElement('xplatiossheet', SwiftUI)
+registerSwiftUI('xplat-swiftui-sheet', (owner: any) =>
+	new UIDataDriver(new XplatSheetProvider(), owner),
+)
+
+// Host views keyed by dash-free registry id — same mechanism as the
+// context-menu leaf (kept leaf-local while the shared-bridge question is open).
+const hosts = new Map<string, GridLayout>()
+const roots = new Map<string, UniversalRoot>()
+
+function mountSubtree(id: string, render: () => any): void {
+	let host = hosts.get(id)
+	if (!host) {
+		host = new GridLayout()
+		hosts.set(id, host)
+
+		SwiftUIManager.registerNativeScriptViews(
+			{ [id]: true },
+			{
+				create: (fullId: string) => hosts.get(fullId.split('-')[0]) as any,
+				destroy: (fullId: string) => {
+					hosts.delete(fullId.split('-')[0])
+				},
+			} as any,
+		)
+	}
+
+	let root = roots.get(id)
+	if (!root) {
+		root = createNativeScriptRoot(host)
+		roots.set(id, root)
+	}
+
+	root.render(ContentRoot as unknown as UniversalComponent, { render })
+}
+
+function unmountSubtree(id: string): void {
+	roots.get(id)?.unmount?.()
+	roots.delete(id)
+	hosts.delete(id)
+}
+
+function ContentRoot(props: { render: () => any }) @{
+	<>{props.render()}</>;
+}
+
+let seq = 0
+
+/** Renders a SwiftUI .sheet whose content is a detached octane subtree
+ *  embedded through NativeScriptViewFactory-by-id. `fitToContents` uses the
+ *  ported size-reader → `.presentationDetents([.height(size)])`. */
+export function SwiftUIBottomSheet(props: SwiftUIBottomSheetProps) @{
+	const contentId = useRef<string>('')
+	if (!contentId.current) {
+		contentId.current = `xplatsheet${++seq}`
+	}
+
+	useEffect(() => {
+		if (props.content) {
+			mountSubtree(contentId.current, props.content)
+		}
+
+		return () => {
+			unmountSubtree(contentId.current)
+		}
+	}, [])
+
+	useEffect(() => {
+		if (props.content) {
+			mountSubtree(contentId.current, props.content)
+		}
+	}, [props.content])
+
+	<xplatiossheet
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		swiftId="xplat-swiftui-sheet"
+		data={{
+			isPresented: props.open ?? false,
+			contentId: props.content ? contentId.current : '',
+			fitToContents: props.fitToContents ?? false,
+			detents: props.detents ?? ['medium'],
+			customHeight: props.customHeight,
+			customFraction: props.customFraction,
+			showDragIndicator: props.showDragIndicator ?? false,
+			interactiveDismissDisabled: props.interactiveDismissDisabled ?? false,
+		}}
+		onSwiftUIEvent={(event: any) => {
+			if (event.data?.dismissed) {
+				props.onDismissed?.()
+				return
+			}
+
+			const presented = event.data?.isPresented
+			if (typeof presented === 'boolean') {
+				props.onPresentedChange?.(presented)
+			}
+		}}
+	/>;
+}

package/src/android/index.ts

@@ -0,0 +1,2 @@
+export { MaterialBottomSheet } from '../MaterialBottomSheet.android.tsrx'
+export type { MaterialBottomSheetProps } from './types'

package/src/android/types.ts

@@ -0,0 +1,27 @@
+export interface MaterialBottomSheetProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Controls sheet visibility. */
+	open?: boolean
+	/** Called when the sheet asks to close (swipe, scrim, back). */
+	onDismissed?: () => void
+	/** Skip the half-expanded detent; only fully expanded/hidden remain. */
+	skipPartiallyExpanded?: boolean
+	/** Show the drag handle affordance. @default true */
+	showDragHandle?: boolean
+	/** Allow swipe gestures on the sheet surface. @default true
+	 *  Not supported by the material3 version the app resolves — prop is
+	 *  accepted but ignored. */
+	sheetGesturesEnabled?: boolean
+	/** @default true */
+	shouldDismissOnBackPress?: boolean
+	/** @default true — accepted but ignored on the resolved material3. */
+	shouldDismissOnClickOutside?: boolean
+	containerColor?: string
+	contentColor?: string
+	scrimColor?: string
+	/** Render fn producing the sheet content — hosted inside the sheet's
+	 *  dialog window through AndroidView. */
+	content?: () => any
+}

package/src/ios/index.ts

@@ -0,0 +1,2 @@
+export { SwiftUIBottomSheet } from '../SwiftUIBottomSheet.ios.tsrx'
+export type { SwiftUIBottomSheetProps, SwiftUISheetDetent } from './types'

package/src/ios/types.ts

@@ -0,0 +1,26 @@
+export type SwiftUISheetDetent = 'medium' | 'large' | 'fraction' | 'height'
+
+export interface SwiftUIBottomSheetProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Controls sheet presentation. */
+	open?: boolean
+	/** Reports the platform-side presented state (echo-suppressed). */
+	onPresentedChange?: (presented: boolean) => void
+	/** Called when the sheet dismisses. */
+	onDismissed?: () => void
+	/** Measure content height and use it as the single detent (iOS 16+). */
+	fitToContents?: boolean
+	/** Detent set — 'fraction' reads `customFraction`, 'height' reads
+	 *  `customHeight` (iOS 16+). @default ['medium'] */
+	detents?: SwiftUISheetDetent[]
+	customFraction?: number
+	customHeight?: number
+	/** Show the grabber. @default false (SwiftUI default is hidden). */
+	showDragIndicator?: boolean
+	interactiveDismissDisabled?: boolean
+	/** Render fn producing the sheet content — hosted inside the sheet
+	 *  presentation through NativeScriptViewFactory. */
+	content?: () => any
+}

package/src/macos/index.ts

@@ -0,0 +1,2 @@
+export { AppKitSheet } from '../AppKitSheet.macos.tsrx'
+export type { AppKitSheetProps } from './types'

package/src/macos/types.ts

@@ -0,0 +1,12 @@
+export interface AppKitSheetProps {
+	id?: string
+	className?: any
+	style?: any
+	/** Controls sheet presentation. */
+	open?: boolean
+	/** Called when the sheet window closes (close button or `open`→false). */
+	onDismissed?: () => void
+	/** Render fn producing the sheet content — hosted in the sheet's own
+	 *  octane root inside the presented window. */
+	content?: () => any
+}

package/src/web/index.ts

@@ -0,0 +1,4 @@
+import './styles.css'
+
+export { BottomSheet } from '../BottomSheet.web.tsrx'
+export type { BottomSheetProps } from './types'

package/src/web/styles.css

@@ -0,0 +1,57 @@
+/* xplat-web-only:start */
+.xplat-web-sheet {
+	position: fixed;
+	inset: 0;
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	overflow: visible;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+}
+.xplat-web-sheet::backdrop {
+	background: var(--xplat-sheet-scrim, rgb(0 0 0 / 0.4));
+}
+
+.xplat-web-sheet-panel {
+	box-sizing: border-box;
+	width: 100%;
+	max-height: var(--xplat-sheet-max-height, 60vh);
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	background: var(--xplat-sheet-container, var(--sheet-bg, Canvas));
+	color: var(--xplat-sheet-content, var(--sheet-fg, CanvasText));
+	border-radius: 16px 16px 0 0;
+	box-shadow: 0 -4px 24px rgb(0 0 0 / 0.2);
+	transform: translateY(var(--xplat-sheet-drag-offset, 0px));
+	transition: transform 180ms ease-out;
+}
+
+.xplat-web-sheet-handle {
+	display: flex;
+	justify-content: center;
+	padding: 8px 0;
+	cursor: grab;
+	touch-action: none;
+}
+
+.xplat-web-sheet-handle-mark {
+	width: 36px;
+	height: 4px;
+	border-radius: 2px;
+	background: color-mix(in srgb, CanvasText 30%, transparent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.xplat-web-sheet-panel {
+		transition: none;
+	}
+}
+/* xplat-web-only:end */

package/src/web/types.ts

@@ -0,0 +1,27 @@
+/** Minimal element shape used by the Web focus-restoration ref. */
+export type WebFocusTarget = {
+	focus(options?: { preventScroll?: boolean }): void
+	isConnected: boolean
+	closest(selector: string): object | null
+}
+
+export interface BottomSheetProps {
+	id?: string
+	/** Accessible name for the modal dialog. */
+	label?: string
+	/** Element that should regain focus when the sheet closes. */
+	finalFocusRef?: { current: WebFocusTarget | null }
+	className?: any
+	style?: any
+	open?: boolean
+	onDismissed?: () => void
+	skipPartiallyExpanded?: boolean
+	showDragHandle?: boolean
+	sheetGesturesEnabled?: boolean
+	shouldDismissOnBackPress?: boolean
+	shouldDismissOnClickOutside?: boolean
+	containerColor?: string
+	contentColor?: string
+	scrimColor?: string
+	content?: () => any
+}

package/types/android/index.d.ts

@@ -0,0 +1,18 @@
+export interface MaterialBottomSheetProps {
+	id?: string
+	className?: any
+	style?: any
+	open?: boolean
+	onDismissed?: () => void
+	skipPartiallyExpanded?: boolean
+	showDragHandle?: boolean
+	sheetGesturesEnabled?: boolean
+	shouldDismissOnBackPress?: boolean
+	shouldDismissOnClickOutside?: boolean
+	containerColor?: string
+	contentColor?: string
+	scrimColor?: string
+	content?: () => any
+}
+
+export declare function MaterialBottomSheet(props: MaterialBottomSheetProps): unknown

package/types/ios/index.d.ts

@@ -0,0 +1,19 @@
+export type SwiftUISheetDetent = 'medium' | 'large' | 'fraction' | 'height'
+
+export interface SwiftUIBottomSheetProps {
+	id?: string
+	className?: any
+	style?: any
+	open?: boolean
+	onPresentedChange?: (presented: boolean) => void
+	onDismissed?: () => void
+	fitToContents?: boolean
+	detents?: SwiftUISheetDetent[]
+	customFraction?: number
+	customHeight?: number
+	showDragIndicator?: boolean
+	interactiveDismissDisabled?: boolean
+	content?: () => any
+}
+
+export declare function SwiftUIBottomSheet(props: SwiftUIBottomSheetProps): unknown

package/types/macos/index.d.ts

@@ -0,0 +1,10 @@
+export interface AppKitSheetProps {
+	id?: string
+	className?: any
+	style?: any
+	open?: boolean
+	onDismissed?: () => void
+	content?: () => any
+}
+
+export declare function AppKitSheet(props: AppKitSheetProps): unknown

package/types/web/index.d.ts

@@ -0,0 +1,29 @@
+/** Minimal element shape used by the Web focus-restoration ref. */
+type WebFocusTarget = {
+	focus(options?: { preventScroll?: boolean }): void
+	isConnected: boolean
+	closest(selector: string): object | null
+}
+
+export interface BottomSheetProps {
+	id?: string
+	/** Accessible name for the modal dialog. */
+	label?: string
+	/** Element that should regain focus when the sheet closes. */
+	finalFocusRef?: { current: WebFocusTarget | null }
+	className?: any
+	style?: any
+	open?: boolean
+	onDismissed?: () => void
+	skipPartiallyExpanded?: boolean
+	showDragHandle?: boolean
+	sheetGesturesEnabled?: boolean
+	shouldDismissOnBackPress?: boolean
+	shouldDismissOnClickOutside?: boolean
+	containerColor?: string
+	contentColor?: string
+	scrimColor?: string
+	content?: () => any
+}
+
+export declare function BottomSheet(props: BottomSheetProps): unknown

package/index.d.ts

@@ -1 +0,0 @@
-export {}

package/index.js

@@ -1,2 +0,0 @@
-// Reservation stub; implementation will arrive in a later release.
-module.exports = {}