@octane-xplat/ui 0.7.3 → 0.10.0

package/src/Lightbox.tsrx

@@ -0,0 +1,277 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useRef, useState } from 'octane';
+import { GridLayout } from '@nativescript/core';
+import { createNativeScriptRoot } from '@nativescript-community/octane';
+import type { UniversalComponent } from 'octane/universal';
+import type { LightboxProps, LightboxMedia } from './props';
+import { cx } from './cx';
+import { applyThemeClasses } from './theme/theme-scheme';
+import { rootLayoutFor } from './root-layout';
+import { createOverlayLifetime } from './overlay-lifetime';
+import { Icon } from './Icon';
+import { Pressable } from './Pressable';
+import { Text } from './Text';
+
+const clampIndex = (i: number, count: number) =>
+	count <= 0 ? 0 : Math.min(Math.max(i, 0), count - 1);
+
+/** The overlay-root body: dark stage, centered media, swipe to navigate,
+ *  buttons + counter + caption chrome. */
+function LightboxPanel(props: {
+	media: LightboxMedia[];
+	index: number;
+	setIndex: (i: number) => void;
+	onClose: () => void;
+	hasZoom: boolean;
+	ios?: Record<string, any>;
+	android?: Record<string, any>;
+	className?: any;
+}) @{
+	const { media, index } = props;
+	const count = media.length;
+	const item = media[index];
+	const [zoomed, setZoomed] = useState(false);
+	const isVideo = item?.type === 'video';
+	const stage = useRef<any>(null);
+
+	// Pan to pan while zoomed — accumulate translate on the image view.
+	const imgView = useRef<any>(null);
+	const panAcc = useRef({ x: 0, y: 0 });
+	const onStagePan = (e: any) => {
+		const el = imgView.current;
+		if (!zoomed || !el) return;
+		if (e.state === 1) {
+			return;
+		}
+
+		if (e.state === 0 || e.state === 3) {
+			return;
+		}
+
+		panAcc.current = { x: e.deltaX, y: e.deltaY };
+		el.translateX = e.deltaX;
+		el.translateY = e.deltaY;
+	};
+
+	const toggleZoom = () => {
+		const el = imgView.current;
+		const next = !zoomed;
+		setZoomed(next);
+		if (el?.animate) {
+			el.animate({
+				scale: next ? { x: 2, y: 2 } : { x: 1, y: 1 },
+				translate: { x: 0, y: 0 },
+				duration: 160,
+			});
+		} else if (el) {
+			el.scaleX = next ? 2 : 1;
+			el.scaleY = next ? 2 : 1;
+			el.translateX = 0;
+			el.translateY = 0;
+		}
+
+		panAcc.current = { x: 0, y: 0 };
+	};
+
+	const onSwipe = (e: any) => {
+		// SwipeDirection: right=1, left=2
+		if (e.direction === 2) {
+			props.setIndex(Math.min(index + 1, count - 1));
+		} else if (e.direction === 1) {
+			props.setIndex(Math.max(index - 1, 0));
+		}
+	};
+
+	<gridlayout
+		ref={(v: any) => {
+			stage.current = v;
+		}}
+		className={cx('vx-lightbox', props.className)}
+		rows="*"
+		columns="*"
+		width="100%"
+		height="100%"
+		onSwipe={onSwipe}
+		onPan={onStagePan}
+		accessibilityLabel={item?.alt ?? 'Media viewer'}
+	>
+		{/* Tap the backdrop edges to close; the centered media eats its own
+		 *  taps through the double-tap zoom. */}
+		{count > 0 && (
+			<gridlayout
+				rows="*,auto"
+				columns="*"
+				verticalAlignment="stretch"
+				horizontalAlignment="stretch"
+			>
+				<gridlayout row={0} verticalAlignment="stretch" horizontalAlignment="stretch">
+					{item != null && (
+						isVideo ? (
+							// No in-package video player — @octane-xplat/video owns the
+							// video widget. Honest fallback: show the alt text.
+							<flexboxlayout
+								flexDirection="column"
+								className="vx-lightbox-video-fallback"
+								verticalAlignment="middle"
+								horizontalAlignment="center"
+							>
+								<label className="vx-lightbox-caption" textWrap={true}>
+									{item.alt}
+								</label>
+							</flexboxlayout>
+						) : (
+							<image
+								ref={(v: any) => {
+									imgView.current = v;
+								}}
+								src={item.src}
+								stretch="aspectFit"
+								className="vx-lightbox-media"
+								verticalAlignment="middle"
+								horizontalAlignment="center"
+								accessibilityLabel={item.alt}
+								onDoubleTap={props.hasZoom ? toggleZoom : undefined}
+							/>
+						)
+					)}
+				</gridlayout>
+				<flexboxlayout row={1} flexDirection="row" className="vx-lightbox-footer" justifyContent="space-between" alignItems="center">
+					<Pressable
+						className="vx-lightbox-nav"
+						accessibilityLabel="Previous"
+						onPress={() => props.setIndex(Math.max(index - 1, 0))}
+						disabled={index <= 0}
+					>
+						<Icon name="xplat-chevron-left" />
+					</Pressable>
+					<flexboxlayout flexDirection="column" alignItems="center" flexGrow={1}>
+						{count > 1 && <Text className="vx-lightbox-counter">{`${index + 1} of ${count}`}</Text>}
+						{item?.caption != null && (
+							typeof item.caption === 'string' ? (
+								<Text className="vx-lightbox-caption">{item.caption}</Text>
+							) : (
+								item.caption
+							)
+						)}
+					</flexboxlayout>
+					<flexboxlayout flexDirection="row" alignItems="center">
+						<Pressable
+							className="vx-lightbox-nav"
+							accessibilityLabel="Next"
+							onPress={() => props.setIndex(Math.min(index + 1, count - 1))}
+							disabled={index >= count - 1}
+						>
+							<Icon name="xplat-chevron-right" />
+						</Pressable>
+						<Pressable
+							className="vx-lightbox-close"
+							accessibilityLabel="Close"
+							onPress={() => props.onClose()}
+						>
+							<Icon name="xplat-close" />
+						</Pressable>
+					</flexboxlayout>
+				</flexboxlayout>
+			</gridlayout>
+		)}
+	</gridlayout>
+}
+
+/** Full-screen media viewer (Astryx `Lightbox`), native leaf — a dedicated
+ *  overlay root on the declaring component's RootLayout, shaded + tap-to-
+ *  close through the RootLayout scrim, swipe gestures for prev/next,
+ *  double-tap zoom on images. `type:'video'` falls back to alt text — the
+ *  video widget lives in the `@octane-xplat/video` leaf package. */
+export function Lightbox(props: LightboxProps) @{
+	const sentinel = useRef<any>(null);
+	const shown = useRef<{
+		host: GridLayout;
+		root: any;
+		lifetime: ReturnType<typeof createOverlayLifetime>;
+	} | null>(null);
+
+	const [internal, setInternal] = useState(props.defaultIndex ?? 0);
+	const indexRef = useRef(internal);
+	const mediaRef = useRef(props.media);
+	const dismiss = useRef(props.onOpenChange);
+	dismiss.current = props.onOpenChange;
+	const onIndexChange = useRef(props.onIndexChange);
+	onIndexChange.current = props.onIndexChange;
+
+	const count = props.media.length;
+	const index = clampIndex(props.index ?? internal, count);
+	indexRef.current = index;
+	mediaRef.current = props.media;
+
+	const renderPanel = (root: any) => {
+		const panel = (panelProps: any) => (
+			<LightboxPanel
+				media={mediaRef.current}
+				index={indexRef.current}
+				setIndex={setIndex}
+				onClose={() => dismiss.current(false)}
+				hasZoom={props.hasZoom ?? true}
+				className={props.className}
+			/>
+		);
+
+		root.render(panel as unknown as UniversalComponent, {});
+	};
+
+	const setIndex = (i: number) => {
+		const clamped = clampIndex(i, count);
+		if (props.index == null) {
+			setInternal(clamped);
+		}
+
+		if (clamped !== indexRef.current) {
+			onIndexChange.current?.(clamped);
+		}
+
+		indexRef.current = clamped;
+		if (shown.current) {
+			renderPanel(shown.current.root);
+		}
+	};
+
+	useEffect(() => {
+		const cur = shown.current;
+		if (!props.isOpen || count === 0) {
+			cur?.lifetime.close();
+			return;
+		}
+
+		if (cur) {
+			renderPanel(cur.root);
+			return;
+		}
+
+		const rl = rootLayoutFor(sentinel.current);
+		if (!rl) return;
+
+		const host = new GridLayout();
+		const unbindTheme = applyThemeClasses(host, 'vx-lightbox-host');
+		host.horizontalAlignment = 'stretch';
+		host.verticalAlignment = 'stretch';
+		const root = createNativeScriptRoot(host);
+		const lifetime = createOverlayLifetime(rl, host, root, 'Lightbox', (dismissed) => {
+			if (shown.current?.host === host) shown.current = null;
+			if (dismissed) dismiss.current?.(false);
+		});
+
+		lifetime.own(unbindTheme);
+		shown.current = { host, root, lifetime };
+		renderPanel(root);
+		lifetime.open({
+			shadeCover: { opacity: 0.85, tapToClose: true },
+			animation: {
+				enterFrom: { opacity: 0, duration: 160 },
+				exitTo: { opacity: 0, duration: 140 },
+			},
+		});
+	}, [props.isOpen, props.media, props.index, props.className]);
+
+	useEffect(() => () => shown.current?.lifetime.close(), []);
+
+	<stacklayout ref={(v: any) => { sentinel.current = v; }} style={{ width: 0, height: 0 }} />
+}

package/src/Lightbox.web.tsrx

@@ -0,0 +1,258 @@
+import { createPortal, useCallback, useEffect, useRef, useState } from 'octane';
+import type { LightboxMedia, LightboxProps } from './props';
+import { cx } from './cx';
+import { isolateModalFocus } from './modal-focus.web';
+import { applyEscapeProps } from './escape-props';
+import { Icon } from './Icon.web.tsrx';
+import { Pressable } from './Pressable.web.tsrx';
+import { Text } from './Text.web.tsrx';
+
+const clampIndex = (i: number, count: number) =>
+	count <= 0 ? 0 : Math.min(Math.max(i, 0), count - 1);
+
+/** The open viewer — rendered once per Lightbox while `isOpen`. Handles
+ *  keyboard nav, scroll lock, focus isolation, and image zoom/pan. */
+function LightboxLayer(props: {
+	media: LightboxMedia[];
+	index: number;
+	setIndex: (i: number) => void;
+	onClose: () => void;
+	hasZoom: boolean;
+	hasAutoPlay: boolean;
+	finalFocusRef?: { current: any };
+	className?: any;
+	style?: any;
+	id?: string;
+	web?: Record<string, any>;
+}) @{
+	const { media, index } = props;
+	const count = media.length;
+	const item = media[index];
+	const layer = useRef<HTMLDivElement | null>(null);
+	const stage = useRef<HTMLDivElement | null>(null);
+	const imgEl = useRef<HTMLImageElement | null>(null);
+	const [zoomed, setZoomed] = useState(false);
+	const pan = useRef({ x: 0, y: 0 });
+	const drag = useRef<{ x: number; y: number } | null>(null);
+	const onClose = useRef(props.onClose);
+	onClose.current = props.onClose;
+	const setIndex = useRef(props.setIndex);
+	setIndex.current = props.setIndex;
+
+	const isVideo = item?.type === 'video';
+	const zoomOn = (props.hasZoom ?? true) && !isVideo;
+
+	const next = useCallback(() => {
+		setIndex.current(clampIndex(props.index + 1, count) === props.index ? props.index : props.index + 1);
+	}, [props.index, count]);
+
+	const prev = useCallback(() => {
+		setIndex.current(props.index - 1 >= 0 ? props.index - 1 : props.index);
+	}, [props.index]);
+
+	useEffect(() => {
+		const el = layer.current;
+		const panel = stage.current;
+		if (!el || !panel) return;
+
+		const restoreScroll = document.documentElement.style.overflow || '';
+		document.documentElement.style.overflow = 'hidden';
+		const releaseFocus = isolateModalFocus(el, panel, () => {
+			const target = props.finalFocusRef?.current;
+			onClose.current();
+		});
+
+		const rtl = getComputedStyle(el).direction === 'rtl';
+		const onKey = (event: KeyboardEvent) => {
+			if (event.isComposing) return;
+			const fwd = rtl ? 'ArrowLeft' : 'ArrowRight';
+			const back = rtl ? 'ArrowRight' : 'ArrowLeft';
+			if (event.key === fwd) {
+				setIndex.current(Math.min(index + 1, count - 1));
+			} else if (event.key === back) {
+				setIndex.current(Math.max(index - 1, 0));
+			}
+		};
+
+		document.addEventListener('keydown', onKey);
+		return () => {
+			document.removeEventListener('keydown', onKey);
+			releaseFocus();
+			document.documentElement.style.overflow = restoreScroll;
+			const target = props.finalFocusRef?.current;
+			if (target && typeof target.focus === 'function' && target.isConnected !== false) {
+				target.focus({ preventScroll: true });
+			}
+		};
+	}, [index, count]);
+
+	// Zoom: click toggles 1↔2.5, drag pans while zoomed.
+	const applyZoom = (on: boolean, keepPan = false) => {
+		const el = imgEl.current;
+		if (!el) return;
+		setZoomed(on);
+		if (!keepPan) {
+			pan.current = { x: 0, y: 0 };
+		}
+
+		el.style.transform = on
+			? `scale(2.5) translate(${pan.current.x}px, ${pan.current.y}px)`
+			: '';
+
+		el.style.cursor = on ? 'grab' : 'zoom-in';
+	};
+
+	const onMediaClick = () => {
+		if (zoomOn) {
+			applyZoom(!zoomed);
+		}
+	};
+
+	const onPointerDown = (event: PointerEvent) => {
+		if (!zoomed || !imgEl.current) return;
+		drag.current = { x: event.clientX, y: event.clientY };
+		imgEl.current.setPointerCapture?.(event.pointerId);
+		imgEl.current.style.cursor = 'grabbing';
+	};
+
+	const onPointerMove = (event: PointerEvent) => {
+		const start = drag.current;
+		const el = imgEl.current;
+		if (!start || !el) return;
+		pan.current = {
+			x: pan.current.x + (event.clientX - start.x) / 2.5,
+			y: pan.current.y + (event.clientY - start.y) / 2.5,
+		};
+
+		drag.current = { x: event.clientX, y: event.clientY };
+		el.style.transform = `scale(2.5) translate(${pan.current.x}px, ${pan.current.y}px)`;
+	};
+
+	const onPointerUp = () => {
+		drag.current = null;
+		if (imgEl.current) {
+			imgEl.current.style.cursor = zoomed ? 'grab' : 'zoom-in';
+		}
+	};
+
+	return (
+		<div
+			ref={layer}
+			id={props.id}
+			className={cx('vx-lightbox-layer', props.className)}
+			style={props.style}
+			role="dialog"
+			aria-modal={true}
+			aria-label={item?.alt ?? 'Media viewer'}
+			onClick={(e: MouseEvent) => {
+				if (e.target === e.currentTarget) {
+					onClose.current();
+				}
+			}}
+			{...props.web}
+		>
+			<div ref={stage} className="vx-lightbox-stage" tabIndex={-1}>
+				{item != null && (
+					isVideo ? (
+						<video
+							className="vx-lightbox-media"
+							src={item.src}
+							controls
+							autoPlay={props.hasAutoPlay}
+							aria-label={item.alt}
+						/>
+					) : (
+						<img
+							ref={imgEl}
+							className="vx-lightbox-media"
+							src={item.src}
+							alt={item.alt}
+							draggable={false}
+							style={{ cursor: zoomOn ? (zoomed ? 'grab' : 'zoom-in') : undefined }}
+							onClick={onMediaClick}
+							onPointerDown={onPointerDown}
+							onPointerMove={onPointerMove}
+							onPointerUp={onPointerUp}
+							onPointerCancel={onPointerUp}
+						/>
+					)
+				)}
+				{count > 1 && (
+					<>
+						<Pressable
+							className="vx-lightbox-nav vx-lightbox-prev"
+							accessibilityLabel="Previous"
+							onPress={() => setIndex.current(Math.max(index - 1, 0))}
+							disabled={index <= 0}
+						>
+							<Icon name="xplat-chevron-left" />
+						</Pressable>
+						<Pressable
+							className="vx-lightbox-nav vx-lightbox-next"
+							accessibilityLabel="Next"
+							onPress={() => setIndex.current(Math.min(index + 1, count - 1))}
+							disabled={index >= count - 1}
+						>
+							<Icon name="xplat-chevron-right" />
+						</Pressable>
+					</>
+				)}
+				<Pressable
+					className="vx-lightbox-close"
+					accessibilityLabel="Close"
+					onPress={() => onClose.current()}
+				>
+					<Icon name="xplat-close" />
+				</Pressable>
+				{count > 1 && (
+					<div className="vx-lightbox-counter" aria-live="polite">
+						{index + 1} of {count}
+					</div>
+				)}
+				{item?.caption != null && (
+					<div className="vx-lightbox-caption">
+						{typeof item.caption === 'string' ? <Text>{item.caption}</Text> : item.caption}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+/** Full-screen media viewer (Astryx `Lightbox`), web leaf — portal layer
+ *  with platform focus trap/scroll lock, keyboard navigation
+ *  (Escape/←/→), backdrop click, click-zoom + drag-pan on images. */
+export function Lightbox(props: LightboxProps) @{
+	const [internal, setInternal] = useState(props.defaultIndex ?? 0);
+	const count = props.media.length;
+	const index = clampIndex(props.index ?? internal, count);
+	const setIndex = (i: number) => {
+		const clamped = clampIndex(i, count);
+		if (props.index == null) {
+			setInternal(clamped);
+		}
+
+		if (clamped !== index) {
+			props.onIndexChange?.(clamped);
+		}
+	};
+
+	@if (props.isOpen && count > 0) {
+		<>{createPortal(
+			<LightboxLayer
+				media={props.media}
+				index={index}
+				setIndex={setIndex}
+				onClose={() => props.onOpenChange(false)}
+				hasZoom={props.hasZoom ?? true}
+				hasAutoPlay={props.hasAutoPlay ?? false}
+				finalFocusRef={props.finalFocusRef}
+				className={props.className}
+				style={props.style}
+				id={props.id}
+				web={props.web}
+			/>,
+			document.body,
+		)}</>
+	}
+}

package/src/Link.macos.tsrx

@@ -1,4 +1,4 @@
-/** @jsxImportSource @xplat/macos/renderer */
+/** @jsxImportSource @octane-xplat/macos-renderer */
 import type { LinkProps } from './props'
 import { Pressable } from './Pressable.macos.tsrx'
 import { pushDeepLink } from './route.macos'

package/src/Link.tsrx

@@ -1,7 +1,7 @@
 /** @jsxImportSource @nativescript-community/octane */
 import { Utils } from '@nativescript/core';
 import type { LinkProps } from './props';
-import { Pressable } from './Pressable.tsrx';
+import { Pressable } from './Pressable';
 
 export function Link(props: LinkProps) @{
 	<Pressable className={props.className} onPress={() => { Utils.openUrl(props.href); }}>

package/src/List.macos.tsrx

@@ -0,0 +1,51 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { ListProps } from './props'
+import { cx } from './cx'
+import { applyEscapeProps } from './escape-props'
+import { toChildArray, mapChildren } from './child-array'
+import { ListProvider } from './list-context'
+
+/** List — column of rows; markers/dividers are drawn on the per-child
+ *  wrapper row (no CSS counters on this target). */
+export function List(props: ListProps) @{
+	const listStyle = props.listStyle ?? 'none'
+	const density = props.density ?? 'balanced'
+	const items = toChildArray(props.children)
+	const start = props.start ?? 1
+	const contextValue = { density, hasDividers: props.hasDividers === true, listStyle, edgeCompensation: props.edgeCompensation, start }
+	const markerFor = (index: number) =>
+		listStyle === 'decimal'
+			? <label className={cx('vx-list-marker', 'vx-list-marker--number')} text={`${start + index}.`} />
+			: listStyle === 'disc'
+				? <flexboxlayout className={cx('vx-list-marker', 'vx-list-marker--disc')}><flexboxlayout className="vx-list-marker-dot" /></flexboxlayout>
+				: listStyle === 'circle'
+					? <flexboxlayout className={cx('vx-list-marker', 'vx-list-marker--circle')}><flexboxlayout className="vx-list-marker-circle" /></flexboxlayout>
+					: null
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<ListProvider value={contextValue}>
+		<flexboxlayout
+			id={props.id}
+			ref={forwardedRef}
+			flexDirection="column"
+			className={cx('vx-list', `vx-list--density-${density}`, props.hasDividers && 'vx-list--dividers', props.className)}
+			style={props.style}
+			accessibilityLabel={props.accessibilityLabel}
+		>
+			{props.header != null ? <flexboxlayout className="vx-list-header">{props.header}</flexboxlayout> : null}
+			{mapChildren(items, (child: any, index: number) => (
+				<flexboxlayout
+					className={cx('vx-list-row', props.hasDividers && index < items.length - 1 && 'vx-list-row--divider')}
+					flexDirection="row"
+					alignItems="stretch"
+				>
+					{markerFor(index)}
+					<flexboxlayout flexGrow={1} style={{ minWidth: 0 }}>{child}</flexboxlayout>
+				</flexboxlayout>
+			))}
+		</flexboxlayout>
+	</ListProvider>
+}

package/src/List.tsrx

@@ -0,0 +1,61 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useMemo } from 'octane'
+import { refList } from './ref-list'
+import type { ListProps } from './props';
+import { cx } from './cx';
+import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
+import { toChildArray, mapChildren } from './child-array';
+import { ListProvider } from './list-context';
+
+/** List — a vertical content list (not virtualized; that's VirtualList).
+ *  Native has no list element or CSS counters: the leaf renders a column
+ *  and wraps each child in a row carrying the marker (dot / outline /
+ *  number) and the divider, so `listStyle`/`hasDividers`/`start` produce
+ *  the same visuals as web. Each `ListItem` still reads density from the
+ *  context. */
+export function List(props: ListProps) @{
+	const listStyle = props.listStyle ?? 'none';
+	const density = props.density ?? 'balanced';
+	const items = toChildArray(props.children);
+	const start = props.start ?? 1;
+	const contextValue = { density, hasDividers: props.hasDividers === true, listStyle, edgeCompensation: props.edgeCompensation, start };
+	const markerFor = (index: number) =>
+		listStyle === 'decimal'
+			? <label className={cx('vx-list-marker', 'vx-list-marker--number')} text={`${start + index}.`} />
+			: listStyle === 'disc'
+				? <flexboxlayout className={cx('vx-list-marker', 'vx-list-marker--disc')}><flexboxlayout className="vx-list-marker-dot" /></flexboxlayout>
+				: listStyle === 'circle'
+					? <flexboxlayout className={cx('vx-list-marker', 'vx-list-marker--circle')}><flexboxlayout className="vx-list-marker-circle" /></flexboxlayout>
+					: null;
+
+	const forwardedRef = useMemo(() => refList((v: any) => { if (v) { applyEscapeProps(v, props); } }, props.ref), [props.ref, props.ios, props.android, props.web]);
+
+	<ListProvider value={contextValue}>
+		<flexboxlayout
+			id={props.id}
+			ref={forwardedRef}
+			flexDirection="column"
+			className={cx('vx-list', `vx-list--density-${density}`, props.hasDividers && 'vx-list--dividers', props.className)}
+			style={props.style}
+			accessible={props.accessible}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
+			accessibilityHint={props.accessibilityHint}
+			accessibilityValue={props.accessibilityValue}
+			accessibilityState={nativeAccessibilityState(props.accessibilityState) as any}
+			accessibilityLiveRegion={props.accessibilityLiveRegion as any}
+		>
+			{props.header != null ? <flexboxlayout className="vx-list-header">{props.header}</flexboxlayout> : null}
+			{mapChildren(items, (child: any, index: number) => (
+				<flexboxlayout
+					className={cx('vx-list-row', props.hasDividers && index < items.length - 1 && 'vx-list-row--divider')}
+					flexDirection="row"
+					alignItems="stretch"
+				>
+					{markerFor(index)}
+					<flexboxlayout flexGrow={1} style={{ minWidth: 0 }}>{child}</flexboxlayout>
+				</flexboxlayout>
+			))}
+		</flexboxlayout>
+	</ListProvider>
+}