@octane-xplat/ui 0.9.0 → 0.11.0

package/dist/web/ComplexSelector.web.tsrx.js

@@ -0,0 +1,173 @@
+import { Icon } from "./Icon.web.tsrx.js";
+import { cx } from "./cx.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { Tooltip } from "./Tooltip.web.tsrx.js";
+import { Fragment, __s, bagOf, child, clone, createElement, createScopedElement, createScopedValue, hookSlots, positionalChildren, setStyle, sibling, template, useEffect, useId, useImperativeHandle, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, setPlainAttribute } from "octane/internal/client";
+//#region src/ComplexSelector.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div><!><!><!><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _frag$0 = /* @__PURE__ */ __s(function _frag$0(props, __s, __extra) {
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m1, _m4, _m7, _m10, _m13, _m16;
+		const _root = clone(_t$0);
+		_m1 = _root;
+		const _el0 = child(_root);
+		_m4 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m7 = _el1;
+		const _el2 = sibling(_el1, 1);
+		_m10 = _el2;
+		const _el3 = sibling(_el2, 1);
+		_m13 = _el3;
+		_m16 = sibling(_el3, 1);
+		_b = bagOf(__s, _root, {
+			a: void 0,
+			b: _m1,
+			c: void 0,
+			d: void 0,
+			e: _m4,
+			f: null,
+			g: void 0,
+			h: _m7,
+			i: null,
+			j: void 0,
+			k: _m10,
+			l: null,
+			m: void 0,
+			n: _m13,
+			o: null,
+			p: void 0,
+			q: _m16,
+			r: null,
+			s: void 0
+		});
+	}
+	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "id", props.h0, "b:7dc1a898", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "class", props.h1, "b:f2e0e6fb", "class");
+	{
+		const _v = props.h2;
+		if (_b.d !== _v) {
+			setStyle(_b.b, _v, _b.d);
+			_b.d = _v;
+		}
+	}
+	_b.t = bindSignalChild(__s, _b.t, 1, _b.b, props.h3, "b:c3d5184d", _b.e, true, void 0, void 0, void 0);
+	_b.u = bindSignalChild(__s, _b.u, 2, _b.b, props.h4, "b:02d1085d", _b.h, true, void 0, void 0, void 0);
+	_b.v = bindSignalChild(__s, _b.v, 3, _b.b, props.h5, "b:38978ff0", _b.k, true, void 0, void 0, void 0);
+	_b.w = bindSignalChild(__s, _b.w, 4, _b.b, props.h6, "b:19756791", _b.n, true, void 0, void 0, void 0);
+	_b.x = bindSignalChild(__s, _b.x, 5, _b.b, props.h7, "b:4fc92753", _b.q, true, void 0, void 0, void 0);
+});
+var ComplexSelector = function ComplexSelector(props, __s, __extra) {
+	const triggerId = useId(_hs$ + 0);
+	const contentId = useId(_hs$ + 1);
+	const anchor = useRef(null, _hs$ + 2);
+	const [isOpen, setIsOpen] = useState(false, _hs$ + 3);
+	const [isBusy, setIsBusy] = useState(false, _hs$ + 4);
+	const [optimisticValue, setOptimisticValue] = useState(props.value, _hs$ + 5);
+	useEffect(() => {
+		setOptimisticValue(props.value);
+	}, [props.value], _hs$ + 6);
+	const setOpen = (next) => {
+		setIsOpen(next);
+		props.onOpenChange?.(next);
+		if (!next) anchor.current?.focus?.();
+	};
+	const handle = {
+		open: () => setOpen(true),
+		close: () => setOpen(false),
+		toggle: () => setOpen(!isOpen),
+		isOpen: () => isOpen
+	};
+	useImperativeHandle(props.ref, () => handle, [props.ref, isOpen], _hs$ + 7);
+	const commit = async (next) => {
+		const previous = optimisticValue;
+		setOptimisticValue(next);
+		props.onChange?.(next);
+		if (!props.changeAction) return;
+		setIsBusy(true);
+		try {
+			await props.changeAction(next);
+		} catch {
+			setOptimisticValue(previous);
+			props.onChange?.(previous);
+		} finally {
+			setIsBusy(false);
+		}
+	};
+	const trigger = createScopedValue(() => createScopedElement("button", {
+		ref: (el) => {
+			anchor.current = el;
+		},
+		type: "button",
+		id: triggerId,
+		className: cx("vx-complex-selector-trigger", `vx-complex-selector-trigger--${props.variant ?? "input"}`, props.className),
+		"aria-controls": contentId,
+		disabled: props.isDisabled || props.isReadOnly || isBusy || props.isLoading,
+		"aria-label": props.label,
+		"aria-expanded": isOpen,
+		"aria-haspopup": "dialog",
+		onClick: () => setOpen(!isOpen)
+	}, () => positionalChildren([
+		typeof props.startIcon === "string" ? createScopedValue(() => createElementFromConfig("c:65da66ac", Icon, {
+			name: props.startIcon,
+			size: 16
+		})) : props.startIcon,
+		createScopedValue(() => createScopedElement("span", { className: cx("vx-complex-selector-value", props.triggerLabel == null && props.value == null && "vx-complex-selector-placeholder") }, () => props.triggerLabel ?? (props.value == null ? props.placeholder ?? "" : String(props.value)))),
+		props.isLoading || isBusy ? createElement("span", {
+			className: "vx-complex-selector-spinner",
+			role: "status",
+			"aria-label": "Loading"
+		}) : null
+	])));
+	const content = createScopedValue(() => createScopedElement("div", {
+		id: contentId,
+		role: "dialog"
+	}, () => props.children(optimisticValue, commit, () => setOpen(false), {
+		isOpen,
+		isBusy: isBusy || Boolean(props.isLoading),
+		triggerId,
+		contentId
+	})));
+	const label = props.label != null && !props.isLabelHidden ? createScopedValue(() => createScopedElement("label", {
+		className: "vx-field-label",
+		htmlFor: triggerId
+	}, () => props.isRequired && !props.isOptional ? `${props.label} *` : props.isOptional ? `${props.label} (Optional)` : props.label)) : null;
+	const labelWithTooltip = props.labelTooltip && label ? createScopedValue(() => createElementFromConfig("c:7291564a", Tooltip, {
+		trigger: createScopedElement("div", { className: "vx-field-label-row" }, () => positionalChildren([label, createScopedValue(() => createElement("button", {
+			type: "button",
+			className: "vx-field-info",
+			"aria-label": `More about ${props.label}`,
+			onClick: (event) => event.preventDefault()
+		}, "i"))])),
+		content: props.labelTooltip,
+		placement: "top"
+	})) : label;
+	const popup = createScopedValue(() => createScopedElement(Popover, {
+		anchor,
+		open: isOpen,
+		placement: props.placement ?? "bottom",
+		alignment: props.alignment ?? "start",
+		onDismiss: () => setOpen(false),
+		className: props.contentClassName,
+		style: props.contentXstyle
+	}, () => content, "c:07966e47"));
+	if (props.variant === "ghost") return createScopedElement(Fragment, {}, () => positionalChildren([trigger, popup]));
+	return createElementFromConfig("c:1c7ce729", _frag$0, {
+		h0: props.id,
+		h1: cx("vx-field", props.status && `vx-field--${props.status.type}`, props.statusVariant === "detached" && "vx-field--status-detached", props.isDisabled && "vx-field--disabled", props.className),
+		h2: {
+			...props.width != null ? { width: props.width } : {},
+			...props.style
+		},
+		h3: labelWithTooltip,
+		h4: props.description && !props.isLabelHidden ? createScopedElement("div", { className: "vx-field-description" }, () => props.description) : null,
+		h5: trigger,
+		h6: props.status?.message ? createScopedValue(() => createScopedElement("div", { className: cx("vx-field-status", `vx-field-status--${props.status.type}`, props.statusVariant === "detached" && "vx-field-status--detached") }, () => props.status.message)) : null,
+		h7: popup
+	});
+};
+//#endregion
+export { ComplexSelector };

package/dist/web/ContextMenu.web.tsrx.js

@@ -1,126 +1,89 @@
 import { applyEscapeProps } from "./escape-props.web.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
 import { Popover } from "./Popover.web.tsrx.js";
-import { Icon } from "./Icon.web.tsrx.js";
-import { __s, bag10, bag2, bag3, bag5, child, clone, componentSlot, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, evt2e, evt2u, hookSlots, ifBlock, mapSlot, markChildrenBlock, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template, useEffect, useRef, useState } from "octane";
-import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+import { MenuSurface } from "./MenuSurface.web.tsrx.js";
+import { MenuData } from "./MenuParts.web.tsrx.js";
+import { __s, bag15, bag5, child, clone, componentSlotVoid, createScopedElement, createScopedValue, delegateEvents, drainFrag, evt1e, evt1u, evt2e, evt2u, hookSlots, markChildrenBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setStyle, sibling, template, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
 //#region src/ContextMenu.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["click", "contextmenu"]);
-var _t$0 = /* @__PURE__ */ template("<span class=\"vx-menu-item-label\"></span>");
-var _t$1 = /* @__PURE__ */ template("<div role=\"menuitem\"><!><!></div>");
-var _t$2 = /* @__PURE__ */ template("<div role=\"menu\" class=\"vx-menu-list\"><!></div>");
-var _t$3 = /* @__PURE__ */ template("<div><!><!></div>");
-var _hs$ = /* @__PURE__ */ hookSlots(5);
-var __event = (e, props, setOpen) => {
-	if (props.disabled) return;
+delegateEvents(["contextmenu", "keydown"]);
+var _t$0 = /* @__PURE__ */ template("<!><!>", 3, 1);
+var _t$1 = /* @__PURE__ */ template("<div tabindex=\"0\" aria-haspopup=\"menu\"><!><!><!></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(3);
+var __event = (event, setOpen) => {
+	if (event.isComposing || event.keyCode === 229 || event.defaultPrevented) return;
+	if (event.key === "ContextMenu" || event.shiftKey && event.key === "F10") {
+		event.preventDefault();
+		setOpen(true);
+	}
+};
+var __event$ = (e, props, setOpen) => {
+	if (props.isDisabled ?? props.disabled) return;
 	e.preventDefault();
 	setOpen(true);
 };
-var _key$3 = (item) => item.key;
-function __then$5(__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:61362e82");
-}
-function __then$8(__props, __s, __extra) {
-	const item = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = _root;
-		_b = bag3(__s, _root, _m0, null, void 0);
-	}
-	_b.d = bindSignalChild(__s, _b.d, 1, _b.a, item.label, "b:6f8390fb", null, void 0, void 0, void 0, true);
-}
-function __item$4(item, __s, __extra) {
-	const select = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m1, _m3, _m4;
-		const _root = clone(_t$1);
-		_m1 = _root;
-		setEventHandler(_root, "$$click", item.disabled ? void 0 : () => select(item));
-		const _el0 = child(_root);
-		_m3 = _el0;
-		_m4 = sibling(_el0, 1);
-		_b = bag5(__s, _root, void 0, _m1, void 0, _m3, _m4);
-	} else setEventHandler(_b.b, "$$click", item.disabled ? void 0 : () => select(item));
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-disabled", item.disabled || void 0, "b:7b8eac99", setAriaAttribute);
-	_b.c = updateFreshClassName(["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0], _b.c, _b.b);
-	{
-		const __ifCondition = item.icon;
-		ifBlock(__s, 1, _b.b, __ifCondition, __then$5, null, _b.d, __ifCondition ? [item] : void 0);
-	}
-	{
-		const __ifCondition$ = item.label != null;
-		ifBlock(__s, 2, _b.b, __ifCondition$, __then$8, null, _b.e, __ifCondition$ ? [item] : void 0);
-	}
-}
 var __childrenBody = {};
-var _rm$12 = [
+var __childrenBody$ = {};
+var _rm$8 = [
 	"r",
 	"b",
 	"a"
 ];
 var ContextMenu = /* @__PURE__ */ __s(function ContextMenu(props, __s, __extra) {
+	__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 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 ((props.isDisabled ?? props.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$2(__props, __s, __extra) {
-		let __mapItems;
-		let __mapMethod;
-		let _b = __s.slots[0];
-		if (_b === void 0) {
-			let _m0, _m1;
-			const _root = clone(_t$2);
-			_m0 = _root;
-			_m1 = child(_root);
-			_b = bag2(__s, _root, _m0, _m1);
+	function __children$3(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$5(__props, __s, __extra) {
+			const __block = __s.block;
+			let _b = __s.slots[0];
+			if (_b === void 0) {
+				let _m0, _m1, _m2;
+				const _root = clone(_t$0);
+				_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);
+			}
+			componentSlotVoid(__s, 1, _b.a, MenuData, { "items": props.items }, _b.b, void 0, 2, void 0, void 0, "c:61ab7c30");
+			_b.f = bindSignalChild(__s, _b.f, 2, _b.a, props.menu, "b:1dfde2c8", _b.c, true, void 0, void 0, void 0);
 		}
-		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,
-			className: ["vx-menu-item", item.disabled ? "vx-menu-item--disabled" : void 0],
-			onClick: item.disabled ? void 0 : () => select(item)
-		}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:a3074f03", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-menu-item-label" }, () => item.label) : null])), _key$3, __item$4, 26, [select], _b.b, 1);
+		componentSlotVoid(__s, 0, __block.parentNode, MenuSurface, {
+			"closeMenu": () => setOpen(false),
+			"label": props.accessibilityLabel,
+			"children": markChildrenBlock(__children$5, __childrenBody)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:30304890");
 	}
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0, _m1, _m5, _m6, _m9;
-		const _root = clone(_t$3);
+		let _m0, _m1, _m6, _m7, _m8, _m11, _m14;
+		const _root = clone(_t$1);
 		queueRefAttach(__s, _m1 = (e) => {
 			anchor.current = e;
 			if (e) applyEscapeProps(e, props);
 		}, _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m5 = evt2e(_root, "$$contextmenu", __event, props, setOpen);
+		_m6 = evt1e(_root, "$$keydown", __event, setOpen);
+		_m7 = evt2e(_root, "$$contextmenu", __event$, props, setOpen);
 		const _el0 = child(_root);
-		_m6 = _el0;
-		_m9 = sibling(_el0, 1);
-		_b = bag10(__s, _root, _m0, _m1, void 0, void 0, void 0, _m5, _m6, null, void 0, _m9);
-		__s.refFields = _rm$12;
+		_m8 = _el0;
+		const _el1 = sibling(_el0, 1);
+		_m11 = _el1;
+		_m14 = sibling(_el1, 1);
+		_b = bag15(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, _m6, _m7, _m8, null, void 0, _m11, null, void 0, _m14);
+		__s.refFields = _rm$8;
 	} else {
 		{
 			const _r = (e) => {
@@ -129,9 +92,10 @@ var ContextMenu = /* @__PURE__ */ __s(function ContextMenu(props, __s, __extra)
 			};
 			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
 		}
-		evt2u(_b.f, __event, props, setOpen);
+		evt1u(_b.g, __event, setOpen);
+		evt2u(_b.h, __event$, props, setOpen);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:8e5eb6d9", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:eb7a26f3", setPlainAttribute);
 	_b.d = updateFreshClassName(["vx-contextmenu", props.className], _b.d, _b.a);
 	{
 		const _v = props.style;
@@ -140,15 +104,22 @@ var ContextMenu = /* @__PURE__ */ __s(function ContextMenu(props, __s, __extra)
 			_b.e = _v;
 		}
 	}
-	_b.k = bindSignalChild(__s, _b.k, 1, _b.a, props.children, "b:1b76a8a6", _b.g, true, void 0, void 0, void 0);
-	componentSlotVoid(__s, 2, _b.a, Popover, {
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-expanded", open, "b:c3aa7464", setAriaAttribute);
+	_b.p = bindSignalChild(__s, _b.p, 1, _b.a, props.children, "b:0c744534", _b.i, true, void 0, void 0, void 0);
+	_b.q = bindSignalChild(__s, _b.q, 2, _b.a, props.trigger && createScopedValue(() => createScopedElement(Pressable, {
+		accessibilityLabel: props.accessibilityLabel ?? "Open actions",
+		disabled: props.isDisabled ?? props.disabled,
+		onPress: () => setOpen(!open)
+	}, () => props.trigger, "c:153fc7e3")), "b:be8d56b2", _b.l, true, void 0, void 0, void 0);
+	componentSlotVoid(__s, 3, _b.a, Popover, {
 		"anchor": anchor,
 		"open": open,
-		"placement": "bottom",
+		"placement": props.placement ?? "bottom",
+		"alignment": props.alignment,
 		"onDismiss": () => setOpen(false),
-		"className": "vx-menu",
-		"children": markChildrenBlock(__children$2, __childrenBody)
-	}, _b.j, void 0, void 0, void 0, void 0, "c:09c4a2fd");
+		"className": ["vx-menu", props.menuClassName],
+		"children": markChildrenBlock(__children$3, __childrenBody$)
+	}, _b.o, void 0, void 0, void 0, void 0, "c:0bb519b4");
 });
 //#endregion
 export { ContextMenu };