@octane-xplat/ui 0.7.3 → 0.10.0

package/dist/web/Dialog.web.tsrx.js

@@ -0,0 +1,253 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { spacingStep } from "./spacing.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { cx } from "./cx.js";
+import { LayerDepthProvider, useLayerDismissal } from "./layer-dismissal.tsrx.js";
+import { useThemeScheme } from "./theme/theme-scheme.js";
+import { DialogContext, DialogProvider } from "./dialog-context.js";
+import { bag4, bagOf, child, clone, componentSlot, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, setStyle, sibling, template, useContext, useEffect, useId, useRef, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, compilerMemoRegion, createElementFromConfig, enableSignalBindings, hookMemoCreate, hookMemoPublish0, setPlainAttribute, textHoleUpdate } from "octane/internal/client";
+//#region src/Dialog.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<div><!><div class=\"vx-dialog-header-text\"><!><!></div><!></div><!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(9);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, DialogInline, { ...props }, __block.endMarker, void 0, void 0, void 0, void 0, "c:e0343097");
+}
+function __then$3(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1;
+		const _root = clone(_t$0);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
+	}
+	{
+		const _v = /* @__PURE__ */ createPortal(createScopedValue(() => createElementFromConfig("c:f035940b", DialogModal, { ...props })), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+function __else$2(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	ifBlock(__s, 0, __block.parentNode, props.isOpen, __then$3, null, __block.endMarker, __extra);
+}
+var toPx = (v) => v == null ? void 0 : typeof v === "number" ? `${v}px` : v;
+var DialogModal = function DialogModal(props, __s, __extra) {
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	const titleId = useId(_hs$ + 1);
+	const dialogRef = useRef(null, _hs$ + 2);
+	const layerRef = useRef(null, _hs$ + 3);
+	const restoreScroll = useRef(null, _hs$ + 4);
+	const purpose = props.purpose ?? "info";
+	const isFullscreen = props.variant === "fullscreen";
+	const padding = spacingStep(props.padding ?? 5) ?? 20;
+	const dismiss = useRef(props.onOpenChange, _hs$ + 5);
+	dismiss.current = props.onOpenChange;
+	const pos = props.position;
+	const dismissal = withSlot(_h$6, 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", "");
+		const root = document.documentElement;
+		restoreScroll.current = root.style.overflow || "";
+		root.style.overflow = "hidden";
+		const autofocusEl = dialog.querySelector("[data-autofocus]");
+		const titleEl = dialog.querySelector("[data-vx-dialog-title]");
+		if (autofocusEl) autofocusEl.focus({ preventScroll: true });
+		else if (titleEl) titleEl.focus({ preventScroll: true });
+		else if (!canModal) dialog.focus?.({ preventScroll: true });
+		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.");
+		const onCancel = (event) => {
+			event.preventDefault();
+			if (props.purpose !== "required" && dismissal.shouldClose()) dismiss.current?.(false);
+		};
+		const onClick = (event) => {
+			if (event.target === event.currentTarget && purpose === "info") dismiss.current?.(false);
+		};
+		let detachFallback;
+		if (!canModal && layer) {
+			const onLayerClick = (event) => {
+				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 ?? "";
+		};
+	}, [], _hs$ + 7);
+	return createScopedValue(() => createScopedElement("div", {
+		ref: layerRef,
+		className: cx("vx-dialog-layer", dark && "dark")
+	}, () => createScopedValue(() => createScopedElement(DialogProvider, { value: {
+		titleId,
+		isModal: true
+	} }, () => createScopedValue(() => createScopedElement("dialog", {
+		ref: (el) => {
+			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%" : void 0,
+			maxHeight: isFullscreen ? "none" : toPx(props.maxHeight) ?? "75dvh",
+			maxWidth: isFullscreen ? "none" : void 0,
+			...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 ? void 0 : titleId,
+		...purpose === "required" ? { role: "alertdialog" } : {},
+		tabIndex: -1
+	}, () => createScopedValue(() => createScopedElement(LayerDepthProvider, { value: dismissal.depth }, () => props.children, "c:10107313")))), "c:e007bf54"))));
+};
+var DialogInline = function DialogInline(props, __s, __extra) {
+	const titleId = useId(_hs$ + 8);
+	const padding = spacingStep(props.padding ?? 5) ?? 20;
+	return createScopedValue(() => createScopedElement(DialogProvider, { value: {
+		titleId,
+		isModal: false
+	} }, () => createScopedValue(() => createScopedElement("div", {
+		ref: (el) => 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 ? void 0 : titleId
+	}, () => props.children)), "c:cd0e25d1"));
+};
+var Dialog = function Dialog(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, props.isInline, __then$0, __else$2, __block.endMarker, [props]);
+};
+var DialogHeader = function DialogHeader(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 6);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(2);
+	const ctx = useContext(DialogContext);
+	const pad = __hk[0] !== true ? hookMemoPublish0(__hk, 0, spacingStep(5) ?? 20) : __hk[1];
+	const compensate = props.endContentEdgeCompensation === "inline" || props.endContentEdgeCompensation === "all";
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m7, _m8, _m11, _m14, _m17, _m18;
+		const _root = clone(_t$1);
+		const _el0 = child(_root);
+		_m1 = _el0;
+		const _el1 = child(_el0);
+		_m4 = _el1;
+		const _el2 = sibling(_el1, 1);
+		_m7 = _el2;
+		const _el3 = child(_el2);
+		_m8 = _el3;
+		_m11 = sibling(_el3, 1);
+		_m14 = sibling(_el2, 1);
+		_m17 = __block.parentNode;
+		_m18 = sibling(_el0, 1);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bagOf(__s, null, {
+			a: void 0,
+			b: _m1,
+			c: void 0,
+			d: void 0,
+			e: _m4,
+			f: null,
+			g: void 0,
+			h: _m7,
+			i: _m8,
+			j: null,
+			k: void 0,
+			l: _m11,
+			m: null,
+			n: void 0,
+			o: _m14,
+			p: null,
+			q: void 0,
+			r: _m17,
+			s: _m18,
+			t: null,
+			u: void 0
+		});
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "class", cx("vx-dialog-header", props.className), "b:56010482", "class");
+	{
+		const _v = props.style;
+		if (_b.c !== _v) {
+			setStyle(_b.b, _v, _b.c);
+			_b.c = _v;
+		}
+	}
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "id", props.id, "b:004303c3", setPlainAttribute);
+	_b.v = bindSignalChild(__s, _b.v, 1, _b.b, props.startContent != null && createScopedElement("div", { className: "vx-dialog-header-start" }, () => props.startContent), "b:90b11d07", _b.e, true, void 0, void 0, void 0);
+	_b.w = bindSignalChild(__s, _b.w, 2, _b.h, props.title != null && createScopedValue(() => createScopedElement("div", {
+		className: "vx-dialog-title",
+		id: ctx?.titleId,
+		"data-vx-dialog-title": ctx?.isModal ? "" : void 0,
+		tabIndex: ctx?.isModal ? -1 : void 0
+	}, () => props.title)), "b:31734ea6", _b.i, true, void 0, void 0, void 0);
+	_b.x = bindSignalChild(__s, _b.x, 3, _b.h, props.subtitle != null && createScopedElement("div", { className: "vx-dialog-subtitle" }, () => props.subtitle), "b:3812d1f8", _b.l, true, void 0, void 0, void 0);
+	_b.y = bindSignalChild(__s, _b.y, 4, _b.b, (props.endContent != null || props.onOpenChange != null) && createScopedValue(() => createScopedElement("div", {
+		className: "vx-dialog-header-end",
+		style: compensate ? { marginInlineEnd: `${-pad / 2}px` } : void 0
+	}, () => positionalChildren([props.endContent, props.onOpenChange && createScopedElement(Pressable, {
+		className: "vx-dialog-close",
+		accessibilityLabel: "Close",
+		onPress: () => props.onOpenChange?.(false)
+	}, () => createElementFromConfig("c:be6933b0", Icon, { name: "xplat-close" }), "c:639daa78")]))), "b:84c1b2ca", _b.o, true, void 0, void 0, void 0);
+	_b.z = bindSignalChild(__s, _b.z, 5, _b.r, (props.hasDivider ?? true) && createElement("div", { className: "vx-dialog-divider" }), "b:07871b92", _b.s, true, void 0, void 0, void 0);
+};
+//#endregion
+export { Dialog, DialogHeader };

package/dist/web/DropdownMenu.web.tsrx.js

@@ -1,98 +1,32 @@
 import { Pressable } from "./Pressable.web.tsrx.js";
+import { useButtonGroup } from "./button-group-context.js";
 import { Popover } from "./Popover.web.tsrx.js";
-import { Icon } from "./Icon.web.tsrx.js";
-import { bag2, bag3, bag4, bag6, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, drainFrag, hookSlots, ifBlock, mapSlot, markChildrenBlock, positionalChildren, setAriaAttribute, setEventHandler, sibling, template, useEffect, useRef, useState } from "octane";
-import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, setPlainAttribute, textHoleUpdate, updateFreshClassName } from "octane/internal/client";
+import { MenuSurface } from "./MenuSurface.web.tsrx.js";
+import { MenuData } from "./MenuParts.web.tsrx.js";
+import { bag4, bag5, child, clone, componentSlotVoid, drainFrag, hookSlots, markChildrenBlock, sibling, template, useRef, useState, withSlot } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
 //#region src/DropdownMenu.web.tsrx
-enableSignalBindings(1, true);
-delegateEvents(["click", "keydown"]);
 var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
-var _t$1 = /* @__PURE__ */ template("<span class=\"vx-menu-item-label\"></span>");
-var _t$2 = /* @__PURE__ */ template("<div role=\"menuitem\"><!><!></div>");
-var _t$3 = /* @__PURE__ */ template("<div role=\"menu\" class=\"vx-menu-list\"><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(6);
+var _t$1 = /* @__PURE__ */ template("<!><!>", 3, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(4);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 var __childrenBody = {};
-var _key$5 = (item) => item.key;
-function __then$7(__props, __s, __extra) {
-	const __block = __s.block;
-	const item = __extra[0];
-	componentSlot(__s, 0, __block.parentNode, Icon, { "name": item.icon }, __block.endMarker, void 0, 2, void 0, void 0, "c:5e6489f9");
-}
-function __then$10(__props, __s, __extra) {
-	const item = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$1);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.label, "b:d3c10474", null, void 0, void 0, void 0, true);
-}
-function __item$6(item, __s, __extra) {
-	const select = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m4, _m5;
-		const _root = clone(_t$2);
-		_m1 = _root;
-		setEventHandler(_root, "$$click", item.disabled ? void 0 : () => select(item));
-		setEventHandler(_root, "$$keydown", (e) => {
-			if (!item.disabled && (e.key === " " || e.key === "Enter")) {
-				e.preventDefault();
-				select(item);
-			}
-		});
-		const _el0 = child(_root);
-		_m4 = _el0;
-		_m5 = sibling(_el0, 1);
-		_b = bag6(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5);
-	} else {
-		setEventHandler(_b.b, "$$click", item.disabled ? void 0 : () => select(item));
-		setEventHandler(_b.b, "$$keydown", (e) => {
-			if (!item.disabled && (e.key === " " || e.key === "Enter")) {
-				e.preventDefault();
-				select(item);
-			}
-		});
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-disabled", item.disabled || void 0, "b:071205b9", setAriaAttribute);
-	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "tabindex", item.disabled ? void 0 : 0, "b:f88238cc", setPlainAttribute);
-	_b.d = updateFreshClassName(["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0], _b.d, _b.b);
-	{
-		const __ifCondition = item.icon;
-		ifBlock(__s, 1, _b.b, __ifCondition, __then$7, null, _b.e, __ifCondition ? [item] : void 0);
-	}
-	{
-		const __ifCondition$ = item.label != null;
-		ifBlock(__s, 2, _b.b, __ifCondition$, __then$10, null, _b.f, __ifCondition$ ? [item] : void 0);
-	}
-}
 var __childrenBody$ = {};
+var __childrenBody$2 = {};
 var DropdownMenu = function DropdownMenu(props, __s, __extra) {
 	const __block = __s.block;
 	const anchor = useRef(null, _hs$ + 0);
-	const [internal, setInternal] = useState(props.defaultOpen ?? false, _hs$ + 1);
-	const controlled = props.open !== void 0;
-	const open = controlled ? props.open : internal;
+	const initialFocus = useRef("container", _hs$ + 1);
+	const group = withSlot(_h$2, useButtonGroup);
+	const disabled = !!((props.isDisabled ?? props.disabled) || group?.isDisabled);
+	const [internal, setInternal] = useState(props.defaultOpen ?? false, _hs$ + 3);
+	const controlled = props.isOpen !== void 0 || props.open !== void 0;
+	const open = props.isOpen ?? props.open ?? internal;
 	const setOpen = (next) => {
-		if (props.disabled && next) return;
+		if (disabled && next) return;
 		if (!controlled) setInternal(next);
 		props.onOpenChange?.(next);
 	};
-	useEffect(() => {
-		if (!open) return;
-		const onKey = (e) => {
-			if (e.key === "Escape") setOpen(false);
-		};
-		window.addEventListener("keydown", onKey);
-		return () => window.removeEventListener("keydown", onKey);
-	}, [open], _hs$ + 2);
-	const select = (item) => {
-		if (item.disabled) return;
-		setOpen(false);
-		item.onSelect?.();
-	};
 	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	function __children$1(__props, __s, __extra) {
 		const __block = __s.block;
@@ -112,51 +46,78 @@ var DropdownMenu = function DropdownMenu(props, __s, __extra) {
 		}
 	}
 	function __children$4(__props, __s, __extra) {
-		let __mapItems;
-		let __mapMethod;
-		let _b = __s.slots[0];
-		if (_b === void 0) {
-			let _m0, _m1;
-			const _root = clone(_t$3);
-			_m0 = _root;
-			_m1 = child(_root);
-			_b = bag2(__s, _root, _m0, _m1);
-		}
-		mapSlot(__s, 1, _b.a, (__mapItems = props.items, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (item) => createScopedElement("div", {
-			key: item.key,
-			role: "menuitem",
-			"aria-disabled": item.disabled || void 0,
-			tabIndex: item.disabled ? void 0 : 0,
-			className: ["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0],
-			onClick: item.disabled ? void 0 : () => select(item),
-			onKeyDown: (e) => {
-				if (!item.disabled && (e.key === " " || e.key === "Enter")) {
-					e.preventDefault();
-					select(item);
-				}
+		const __block = __s.block;
+		function __children$6(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1, _m2;
+				const _root = clone(_t$1);
+				_m0 = __block.parentNode;
+				const _el0 = child(_root);
+				_m1 = _el0;
+				_m2 = sibling(_el0, 1);
+				drainFrag(_root, __block.parentNode, __block.endMarker);
+				_b = bag5(__s, null, _m0, _m1, _m2, null, void 0);
 			}
-		}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:f5fcf024", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label) : null])), _key$5, __item$6, 26, [select], _b.b, 1);
+			componentSlotVoid(__s, 1, _b.a, MenuData, { "items": props.items }, _b.b, void 0, 2, void 0, void 0, "c:7dce2b8f");
+			{
+				const _v = props.children;
+				_b.d = textHoleUpdate(__s, 2, _b.a, _v, _b.d, _b.e, _b.c, true);
+				_b.e = _v;
+			}
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, MenuSurface, {
+			"initialFocus": initialFocus.current,
+			"closeMenu": () => setOpen(false),
+			"label": props.accessibilityLabel,
+			"children": markChildrenBlock(__children$6, __childrenBody$)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:509f7101");
 	}
 	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
-		"bind": (e) => {
+		"ref": (e) => {
 			anchor.current = e;
 		},
 		"id": props.id,
-		"className": ["vx-menu-trigger", props.className],
+		"className": [
+			"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,
 		"onPress": () => setOpen(!open),
-		"accessibilityState": { disabled: props.disabled },
+		"accessibilityState": { disabled },
+		"web": {
+			onpointerdown: () => {
+				initialFocus.current = "container";
+			},
+			"aria-haspopup": "menu",
+			"aria-expanded": String(open),
+			onkeydown: (event) => {
+				if (event.isComposing || event.keyCode === 229 || event.defaultPrevented) return;
+				if (event.key === "Enter" || event.key === " ") initialFocus.current = "first";
+				if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+					event.preventDefault();
+					initialFocus.current = event.key === "ArrowUp" ? "last" : "first";
+					setOpen(true);
+				}
+			}
+		},
 		"children": markChildrenBlock(__children$1, __childrenBody)
-	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fa171407");
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:3da5312b");
 	componentSlotVoid(__s, 1, __block.parentNode, Popover, {
 		"anchor": anchor,
 		"open": open,
 		"placement": props.placement ?? "bottom",
+		"alignment": props.alignment,
 		"onDismiss": () => setOpen(false),
-		"className": "vx-menu",
-		"children": markChildrenBlock(__children$4, __childrenBody$)
-	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:beadb637");
+		"className": ["vx-menu", props.menuClassName],
+		"children": markChildrenBlock(__children$4, __childrenBody$2)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:251108c9");
 };
 //#endregion
 export { DropdownMenu };