@octane-xplat/ui 0.9.0 → 0.11.0

package/src/Dialog.macos.tsrx

@@ -0,0 +1,59 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { LayerDepthProvider, useLayerDismissal } from './layer-dismissal.tsrx'
+import type { DialogHeaderProps, DialogProps } from './props'
+import { cx } from './cx'
+import { usePresentation } from './presentation.macos.tsrx'
+import { Button } from './controls.macos.tsrx'
+
+function DialogPanel(props: DialogProps & { dark?: boolean; layerDepth: number }) @{
+	<LayerDepthProvider value={props.layerDepth}>
+		<flexboxlayout flexDirection="column" id={props.id}
+			className={cx('vx-dialog', props.variant === 'fullscreen' && 'vx-dialog--fullscreen', props.dark && 'ns-dark', props.className)}
+			style={{ padding: (props.padding ?? 5) * 4, ...props.style }}>
+			{props.children}
+		</flexboxlayout>
+	</LayerDepthProvider>
+}
+
+function ScrollingDialogPanel(props: DialogProps & { dark?: boolean; layerDepth: number }) @{
+	<scrollview><DialogPanel {...props} /></scrollview>
+}
+
+export function Dialog(props: DialogProps) @{
+	const dismissal = useLayerDismissal({
+		get active() { return !!props.isOpen && !props.isInline },
+		dismiss: () => props.onOpenChange?.(false),
+		get behavior() { return props.purpose === 'required' ? 'block' : 'close' },
+		getFocusTarget: () => props.finalFocusRef?.current,
+		restoreFocus: false,
+	})
+
+	const panelProps = { ...props, layerDepth: dismissal.depth }
+	const owner = usePresentation(props.isOpen && !props.isInline, ScrollingDialogPanel, panelProps, {
+		kind: 'dialog', modal: true, purpose: props.purpose, width: props.width,
+		maxHeight: props.maxHeight, position: props.position,
+		fullscreen: props.variant === 'fullscreen', label: props.accessibilityLabel,
+		finalFocusRef: props.finalFocusRef,
+		canDismiss: () => dismissal.shouldClose(),
+		onDismiss: () => props.onOpenChange(false),
+	})
+
+	<>
+		@if (props.isInline && props.isOpen) { <DialogPanel {...panelProps} layerDepth={dismissal.depth - 1} /> }
+		@if (!props.isInline) { <flexboxlayout ref={owner} style={{ width: 0, height: 0 }} /> }
+	</>
+}
+
+export function DialogHeader(props: DialogHeaderProps) @{
+	<flexboxlayout flexDirection="column" className={cx('vx-dialog-header', props.className)} style={props.style}>
+		<flexboxlayout flexDirection="row" alignItems="center">
+			{props.startContent}
+			<flexboxlayout flexDirection="column" flexGrow={1} className="vx-dialog-header-text">
+				{props.title != null && <label className="vx-dialog-title">{props.title}</label>}
+				{props.subtitle != null && <label className="vx-dialog-subtitle">{props.subtitle}</label>}
+			</flexboxlayout>
+			{props.endContent}
+			{props.onOpenChange != null && <Button accessibilityLabel="Close dialog" onPress={() => props.onOpenChange?.(false)}>×</Button>}
+		</flexboxlayout>
+	</flexboxlayout>
+}

package/src/Dialog.tsrx

@@ -0,0 +1,216 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { LayerDepthProvider, useLayerDismissal } from './layer-dismissal.tsrx';
+import { useContext, useEffect, useId, useRef } from 'octane';
+import { GridLayout, isAndroid, isIOS } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { DialogHeaderProps, DialogProps } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout';
+import { createOverlayLifetime } from './overlay-lifetime';
+import { bindBottomInsetToKeyboard } from './keyboard-inset';
+import { attachTapToBlur } from './tap-to-blur';
+import { DialogContext, DialogProvider } from './dialog-context';
+import { spacingStep } from './spacing';
+import { Icon } from './Icon';
+import { Pressable } from './Pressable';
+
+/** The modal body rendered inside the dedicated overlay root — a centered
+ *  (or `position`-anchored) panel on the page's RootLayout. `purpose`
+ *  gates the shade tap; hardware back dismissal arrives via the host's
+ *  `closed` event and reports through `onOpenChange(false)`. */
+function DialogPanel(props: DialogProps & { layerDepth: number }) @{
+	const titleId = useId();
+	const purpose = props.purpose ?? 'info';
+	const isFullscreen = props.variant === 'fullscreen';
+	const padding = spacingStep(props.padding ?? 5) ?? 20;
+	const pos = props.position;
+
+	<gridlayout
+		className="vx-dialog-host"
+		rows="*"
+		columns="*"
+		width="100%"
+		height="100%"
+	>
+		<flexboxlayout
+			flexDirection="column"
+			className={cx(
+				'vx-dialog',
+				isFullscreen && 'vx-dialog--fullscreen',
+				props.className,
+			)}
+			style={{
+				padding,
+				width: typeof props.width === 'number' ? props.width : isFullscreen ? '100%' : undefined,
+				height: isFullscreen ? '100%' : undefined,
+				maxHeight:
+					typeof props.maxHeight === 'number'
+						? props.maxHeight
+						: undefined,
+				marginLeft: typeof pos?.start === 'number' ? pos.start : undefined,
+				marginRight: typeof pos?.end === 'number' ? pos.end : undefined,
+				marginTop: typeof pos?.top === 'number' ? pos.top : undefined,
+				marginBottom: typeof pos?.bottom === 'number' ? pos.bottom : undefined,
+				...props.style,
+			}}
+			verticalAlignment={
+				isFullscreen
+					? 'stretch'
+					: pos?.top != null
+						? 'top'
+						: pos?.bottom != null
+							? 'bottom'
+						: 'middle'
+			}
+			horizontalAlignment={
+				isFullscreen
+					? 'stretch'
+					: pos?.start != null
+						? 'left'
+						: pos?.end != null
+							? 'right'
+							: 'center'
+			}
+			width={isFullscreen ? '100%' : undefined}
+			height={isFullscreen ? '100%' : undefined}
+			accessible={true}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityRole={purpose === 'required' ? ('alert' as any) : undefined}
+		>
+			<DialogProvider value={{ titleId, isModal: true }}>
+				<LayerDepthProvider value={props.layerDepth}>{props.children}</LayerDepthProvider>
+			</DialogProvider>
+		</flexboxlayout>
+	</gridlayout>
+}
+
+/** Inline (non-modal) rendering — panel chrome without overlay. */
+function DialogInline(props: DialogProps) @{
+	const titleId = useId();
+	const padding = spacingStep(props.padding ?? 5) ?? 20;
+
+	<flexboxlayout
+		flexDirection="column"
+		className={cx('vx-dialog', 'vx-dialog--inline', props.className)}
+		style={{ padding, width: typeof props.width === 'number' ? props.width : undefined, ...props.style }}
+		accessibilityLabel={props.accessibilityLabel}
+	>
+		<DialogProvider value={{ titleId, isModal: false }}>
+			{props.children}
+		</DialogProvider>
+	</flexboxlayout>
+}
+
+/** Modal dialog (Astryx `Dialog`), native leaf — a GridLayout host on the
+ *  RootLayout enclosing the declaring component (same ownership model as
+ *  BottomSheet) with a dedicated Octane root. Hardware back / shade taps
+ *  go through the RootLayout's own dismissal path; `purpose` maps to
+ *  shade `tapToClose` (Android back is not blockable through RootLayout —
+ *  documented deviation). Focus restoration has no direct equivalent;
+ *  `finalFocusRef` calls the target's focus method when the declaration closes. */
+export function Dialog(props: DialogProps) @{
+	const dismissal = useLayerDismissal({ get active() { return !!props.isOpen && !props.isInline }, isPresent: () => !!shown.current, dismiss: () => props.onOpenChange?.(false), get behavior() { return props.purpose === 'required' ? 'block' : 'close' }, getFocusTarget: () => props.finalFocusRef?.current });
+
+	const sentinel = useRef<any>(null);
+	const shown = useRef<{
+		host: GridLayout;
+		root: any;
+		lifetime: ReturnType<typeof createOverlayLifetime>;
+	} | null>(null);
+
+	const dismiss = useRef(props.onOpenChange);
+	dismiss.current = props.onOpenChange;
+
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.isOpen) {
+			cur?.lifetime.close();
+			return;
+		}
+
+		const rl = rootLayoutFor(sentinel.current);
+		if (!rl) return;
+
+		if (cur) {
+			cur.root.render(DialogPanel as unknown as UniversalComponent, { ...props, layerDepth: dismissal.depth });
+			return;
+		}
+
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, 'vx-dialog-overlay');
+		host.horizontalAlignment = 'stretch';
+		host.verticalAlignment = 'stretch';
+		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, 'Dialog', (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.(false);
+		});
+
+		lifetime.own(unbindTheme);
+		// Keep the panel above the software keyboard and blur the field on
+		// outside taps — same affordances the sheet host owns.
+		lifetime.own(bindBottomInsetToKeyboard(host));
+		lifetime.own(attachTapToBlur(host));
+		shown.current = { host, root, lifetime };
+		root.render(DialogPanel as unknown as UniversalComponent, { ...props, layerDepth: dismissal.depth });
+
+		const purpose = props.purpose ?? 'info';
+		lifetime.open({
+			shadeCover: {
+				opacity: 0.4,
+				tapToClose: purpose === 'info',
+			},
+			animation: {
+				enterFrom: { opacity: 0, duration: 180 },
+				exitTo: { opacity: 0, duration: 140 },
+			},
+		});
+	}, [
+		props.isOpen,
+		props.children,
+		props.className,
+		props.style,
+		props.purpose,
+		props.variant,
+		props.width,
+		props.maxHeight,
+	]);
+
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
+	// Zero-size sentinel — the dialog resolves its owning RootLayout from
+	// the declaring component's ancestry.
+	<stacklayout ref={(v: any) => { sentinel.current = v; }} style={{ width: 0, height: 0 }} />
+}
+
+/** Dialog title row (Astryx `DialogHeader`), native leaf. */
+export function DialogHeader(props: DialogHeaderProps) @{
+	useContext(DialogContext); // keep provider membership for parity — the id only matters on web.
+
+	<flexboxlayout flexDirection="column" className={cx('vx-dialog-header', props.className)} style={props.style} id={props.id}>
+		<flexboxlayout flexDirection="row" alignItems="center">
+			{props.startContent != null && <flexboxlayout className="vx-dialog-header-start">{props.startContent}</flexboxlayout>}
+			<flexboxlayout flexDirection="column" flexGrow={1} className="vx-dialog-header-text">
+				{props.title != null && <label className="vx-dialog-title" textWrap={true}>{props.title}</label>}
+				{props.subtitle != null && <label className="vx-dialog-subtitle" textWrap={true}>{props.subtitle}</label>}
+			</flexboxlayout>
+			{(props.endContent != null || props.onOpenChange != null) && (
+				<flexboxlayout flexDirection="row" alignItems="center" className="vx-dialog-header-end">
+					{props.endContent}
+					{props.onOpenChange && (
+						<Pressable
+							className="vx-dialog-close"
+							accessibilityLabel="Close"
+							onPress={() => props.onOpenChange?.(false)}
+						>
+							<Icon name="xplat-close" />
+						</Pressable>
+					)}
+				</flexboxlayout>
+			)}
+		</flexboxlayout>
+		{(props.hasDivider ?? true) && <gridlayout className="vx-dialog-divider" height={1} />}
+	</flexboxlayout>
+}

package/src/Dialog.web.tsrx

@@ -0,0 +1,258 @@
+import { LayerDepthProvider, useLayerDismissal } from './layer-dismissal.tsrx';
+import { createPortal, useContext, useEffect, useId, useRef } from 'octane';
+import type { DialogHeaderProps, DialogProps } from './props';
+import { applyEscapeProps } from './escape-props';
+import { useThemeScheme } from './theme/theme-scheme';
+import { DialogContext, DialogProvider } from './dialog-context';
+import { spacingStep } from './spacing';
+import { cx } from './cx';
+import { Icon } from './Icon.web.tsrx';
+import { Pressable } from './Pressable.web.tsrx';
+
+const toPx = (v: number | string | undefined) =>
+	v == null ? undefined : typeof v === 'number' ? `${v}px` : v;
+
+/** Modal/inline panel rendered when isOpen — owns the real `<dialog>`
+ *  element where the browser supports it (focus trap, top layer,
+ *  ::backdrop, inert background are native platform behavior), plus a
+ *  fallback fixed layer for engines without `HTMLDialogElement.showModal`. */
+function DialogModal(props: DialogProps) @{
+	const dark = useThemeScheme() === 'dark';
+	const titleId = useId();
+	const dialogRef = useRef<HTMLDialogElement | null>(null);
+	const layerRef = useRef<HTMLDivElement | null>(null);
+	const restoreScroll = useRef<string | null>(null);
+	const purpose = props.purpose ?? 'info';
+	const isFullscreen = props.variant === 'fullscreen';
+	const padding = spacingStep(props.padding ?? 5) ?? 20;
+	const dismiss = useRef(props.onOpenChange);
+	dismiss.current = props.onOpenChange;
+	const pos = props.position;
+	const dismissal = useLayerDismissal({ active: true, dismiss: () => dismiss.current?.(false), get behavior() { return props.purpose === 'required' ? 'block' : 'close' }, getFocusTarget: () => props.finalFocusRef?.current, contains: (target) => !!dialogRef.current?.contains(target) });
+
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		const layer = layerRef.current;
+		if (!dialog) {
+			return;
+		}
+
+		const canModal = typeof dialog.showModal === 'function';
+		if (canModal) {
+			try {
+				dialog.showModal();
+			} catch {
+				dialog.setAttribute('open', '');
+			}
+		} else {
+			dialog.setAttribute('open', '');
+		}
+
+		// Page scroll lock for the modal's lifetime.
+		const root = document.documentElement;
+		restoreScroll.current = root.style.overflow || '';
+		root.style.overflow = 'hidden';
+
+		// Initial focus: an explicit [data-autofocus] wins, then the
+		// DialogHeader title, then the dialog itself (showModal already
+		// focuses it; make that explicit for the fallback path).
+		const autofocusEl = dialog.querySelector<HTMLElement>('[data-autofocus]');
+		const titleEl = dialog.querySelector<HTMLElement>('[data-vx-dialog-title]');
+		if (autofocusEl) {
+			autofocusEl.focus({ preventScroll: true });
+		} else if (titleEl) {
+			titleEl.focus({ preventScroll: true });
+		} else if (!canModal) {
+			dialog.focus?.({ preventScroll: true });
+		}
+
+		// An open modal without a name is an a11y defect — warn once.
+		if (
+			!props.accessibilityLabel &&
+			!dialog.hasAttribute('aria-labelledby') &&
+			!titleEl
+		) {
+			console.warn(
+				'[Dialog] an open modal dialog has no accessible name — provide `accessibilityLabel` or render a <DialogHeader> with a title.',
+			);
+		}
+
+		// Escape: the UA fires `cancel` before closing. `required` swallows
+		// it; other purposes report the dismissal through onOpenChange.
+		const onCancel = (event: Event) => {
+			event.preventDefault();
+			if (props.purpose !== 'required' && dismissal.shouldClose()) {
+				dismiss.current?.(false);
+			}
+		};
+
+		// Backdrop clicks land on the <dialog> itself (padding included).
+		const onClick = (event: MouseEvent) => {
+			if (event.target === event.currentTarget && purpose === 'info') {
+				dismiss.current?.(false);
+			}
+		};
+
+		// Fallback path (no showModal): no top layer, no inert — emulate the
+		// essentials on the wrapper layer.
+		let detachFallback: (() => void) | undefined;
+		if (!canModal && layer) {
+			const onLayerClick = (event: MouseEvent) => {
+				if (event.target === layer && purpose === 'info') {
+					dismiss.current?.(false);
+				}
+			};
+
+			layer.addEventListener('mousedown', onLayerClick);
+			detachFallback = () => {
+				layer.removeEventListener('mousedown', onLayerClick);
+			};
+		}
+
+		dialog.addEventListener('cancel', onCancel);
+		dialog.addEventListener('click', onClick);
+		return () => {
+			dialog.removeEventListener('cancel', onCancel);
+			dialog.removeEventListener('click', onClick);
+			detachFallback?.();
+			root.style.overflow = restoreScroll.current ?? '';
+		};
+	}, []);
+
+	return (
+		<div ref={layerRef} className={cx('vx-dialog-layer', dark && 'dark')}>
+			<DialogProvider value={{ titleId, isModal: true }}>
+				<dialog
+					ref={(el: HTMLDialogElement | null) => {
+						dialogRef.current = el;
+						applyEscapeProps(el, props);
+						props.web?.ref?.(el);
+					}}
+					id={props.id}
+					className={cx(
+						'vx-dialog',
+						isFullscreen && 'vx-dialog--fullscreen',
+						pos && 'vx-dialog--anchored',
+						props.className,
+					)}
+					style={{
+						padding: `${padding}px`,
+						width: isFullscreen ? '100%' : (toPx(props.width) ?? '400px'),
+						height: isFullscreen ? '100%' : undefined,
+						maxHeight: isFullscreen ? 'none' : (toPx(props.maxHeight) ?? '75dvh'),
+						maxWidth: isFullscreen ? 'none' : undefined,
+						...(pos
+							? {
+									position: 'fixed',
+									margin: 0,
+									top: toPx(pos.top),
+									bottom: toPx(pos.bottom),
+									insetInlineStart: toPx(pos.start),
+									insetInlineEnd: toPx(pos.end),
+								}
+							: {}),
+						...props.style,
+					}}
+					aria-label={props.accessibilityLabel}
+					aria-labelledby={props.accessibilityLabel ? undefined : titleId}
+					{...(purpose === 'required' ? { role: 'alertdialog' } : {})}
+					tabIndex={-1}
+				>
+					<LayerDepthProvider value={dismissal.depth}>{props.children}</LayerDepthProvider>
+				</dialog>
+			</DialogProvider>
+		</div>
+	);
+}
+
+/** Inline (non-modal) rendering — same panel chrome, no overlay. */
+function DialogInline(props: DialogProps) @{
+	const titleId = useId();
+	const padding = spacingStep(props.padding ?? 5) ?? 20;
+
+	return (
+		<DialogProvider value={{ titleId, isModal: false }}>
+			<div
+				ref={(el: any) => applyEscapeProps(el, props)}
+				id={props.id}
+				className={cx('vx-dialog', 'vx-dialog--inline', props.className)}
+				style={{
+					padding: `${padding}px`,
+					width: toPx(props.width) ?? '400px',
+					maxHeight: toPx(props.maxHeight),
+					...props.style,
+				}}
+				role={props.purpose === 'required' ? 'alertdialog' : 'dialog'}
+				aria-label={props.accessibilityLabel}
+				aria-labelledby={props.accessibilityLabel ? undefined : titleId}
+			>
+				{props.children}
+			</div>
+		</DialogProvider>
+	);
+}
+
+/** Modal dialog (Astryx `Dialog`). Web leaf renders a real `<dialog>` in
+ *  the top layer: background inertness, focus trap, Escape→cancel and
+ *  `::backdrop` come from the platform. `purpose` gates dismissal —
+ *  'info' allows backdrop tap + Escape, 'form' keeps Escape only,
+ *  'required' blocks both and carries `role="alertdialog"`. */
+export function Dialog(props: DialogProps) @{
+	@if (props.isInline) {
+		<DialogInline {...props} />
+	} @else {
+		@if (props.isOpen) {
+			<>{createPortal(<DialogModal {...props} />, document.body)}</>
+		}
+	}
+}
+
+/** Dialog title row (Astryx `DialogHeader`). The title carries the
+ *  dialog's label id and the modal autofocus marker; `onOpenChange`
+ *  supplies the close affordance. */
+export function DialogHeader(props: DialogHeaderProps) @{
+	const ctx = useContext(DialogContext);
+	const pad = spacingStep(5) ?? 20;
+	const compensate =
+		props.endContentEdgeCompensation === 'inline' ||
+		props.endContentEdgeCompensation === 'all';
+
+	<>
+		<div className={cx('vx-dialog-header', props.className)} style={props.style} id={props.id}>
+			{props.startContent != null && (
+				<div className="vx-dialog-header-start">{props.startContent}</div>
+			)}
+			<div className="vx-dialog-header-text">
+				{props.title != null && (
+					<div
+						className="vx-dialog-title"
+						id={ctx?.titleId}
+						data-vx-dialog-title={ctx?.isModal ? '' : undefined}
+						tabIndex={ctx?.isModal ? -1 : undefined}
+					>
+						{props.title}
+					</div>
+				)}
+				{props.subtitle != null && <div className="vx-dialog-subtitle">{props.subtitle}</div>}
+			</div>
+			{(props.endContent != null || props.onOpenChange != null) && (
+				<div
+					className="vx-dialog-header-end"
+					style={compensate ? { marginInlineEnd: `${-pad / 2}px` } : undefined}
+				>
+					{props.endContent}
+					{props.onOpenChange && (
+						<Pressable
+							className="vx-dialog-close"
+							accessibilityLabel="Close"
+							onPress={() => props.onOpenChange?.(false)}
+						>
+							<Icon name="xplat-close" />
+						</Pressable>
+					)}
+				</div>
+			)}
+		</div>
+		{(props.hasDivider ?? true) && <div className="vx-dialog-divider" />}
+	</>;
+}

package/src/Drawer.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { DrawerProps } from './props';
 import { cx } from './cx';
 import { applyEscapeProps } from './escape-props';

package/src/DropdownMenu.macos.tsrx

@@ -1,40 +1,39 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { MenuData } from './MenuParts.macos.tsrx';
+import { MenuSurface } from './MenuSurface.macos.tsrx';
 import { useRef, useState } from 'octane';
-import type { DropdownMenuProps, MenuItem } from "./props";
+import type { DropdownMenuProps } from "./props";
 import { cx } from "./cx";
-import { applyEscapeProps } from "./escape-props";
 import { Pressable } from './Pressable.macos.tsrx';
 import { Popover } from './Popover.macos.tsrx';
-import { Icon } from './Icon.macos.tsrx';
+import { useButtonGroup } from './button-group-context';
 
 /** Self-drawn dropdown menu — `trigger` plus an anchored item list via
  *  Popover. The same anchored listbox renders on every target (decision
  *  #48): bounded, unvirtualized items. */
 export function DropdownMenu(props: DropdownMenuProps) @{
 	const anchor = useRef<any>(null);
+	const group = useButtonGroup();
+	const disabled = !!((props.isDisabled ?? props.disabled) || group?.isDisabled);
 	const [internal, setInternal] = useState(props.defaultOpen ?? false);
-	const controlled = props.open !== undefined;
-	const open = controlled ? props.open : internal;
+	const controlled = props.isOpen !== undefined || props.open !== undefined;
+	const open = props.isOpen ?? props.open ?? internal;
 
 	const setOpen = (next: boolean) => {
-		if (props.disabled && next) return;
+		if (disabled && next) return;
 		if (!controlled) setInternal(next);
 		props.onOpenChange?.(next);
 	};
 
-	const select = (item: MenuItem) => {
-		if (item.disabled) return;
-		setOpen(false);
-		item.onSelect?.();
-	};
-
 	<>
 		<Pressable
-			bind={(v: any) => { anchor.current = v; }}
+			ref={(v: any) => { anchor.current = v; }}
 			id={props.id}
-			className={cx('vx-menu-trigger', props.className)}
+			className={cx('vx-menu-trigger', props.triggerClassName, group && `vx-button--group-${group.position}`, group?.size && `vx-button--size-${group.size}`, props.className)}
 			style={props.style}
-			disabled={props.disabled}
+			disabled={disabled}
+			accessibilityLabel={props.accessibilityLabel}
+			web={{ 'aria-haspopup': 'menu', 'aria-expanded': open }}
 			onPress={() => setOpen(!open)}
 		>
 			{props.trigger}
@@ -43,21 +42,13 @@ export function DropdownMenu(props: DropdownMenuProps) @{
 			anchor={anchor}
 			open={open}
 			placement={props.placement ?? 'bottom'}
+			alignment={props.alignment}
 			onDismiss={() => setOpen(false)}
-			className="vx-menu"
+			className={cx('vx-menu', props.menuClassName)}
 		>
-			<flexboxlayout className="vx-menu-list">
-				{props.items.map((item: MenuItem) => (
-					<flexboxlayout
-						key={item.key}
-						className={cx('vx-menu-item', item.disabled && 'vx-menu-item--disabled')}
-						onTap={item.disabled ? undefined : () => select(item)}
-					>
-						{item.icon ? <Icon name={item.icon} /> : null}
-						{item.label != null ? <label className="vx-menu-item-label" text={item.label} /> : null}
-					</flexboxlayout>
-				))}
-			</flexboxlayout>
+			<MenuSurface closeMenu={() => setOpen(false)} label={props.accessibilityLabel}>
+				<MenuData items={props.items} />{props.children}
+			</MenuSurface>
 		</Popover>
 	</>
 }