@octane-xplat/ui 0.3.0 → 0.5.0

package/dist/web/ui33.js

@@ -1,43 +1,159 @@
-import { __s, bag6, clone, queueRefAttach, queueRefDetach, setStyle, template } from "octane";
-import { childTextHoleUpdate, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/KeyboardAvoiding.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<div></div>");
-var _rm$1 = [
-	"r",
-	"b",
-	"a"
-];
-function applyWebProps(node, bag) {
-	if (!node || !bag) return;
-	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
-	else node[key] = value;
-}
-var KeyboardAvoiding = /* @__PURE__ */ __s(function KeyboardAvoiding(props, __s, __extra) {
+import { cx } from "./ui28.js";
+import { useThemeScheme } from "./ui29.js";
+import { positionPopover } from "./ui32.js";
+import { bag4, child, clone, componentSlotVoid, createElement, createPortal, createScopedElement, createScopedValue, drainFrag, hookSlots, ifBlock, positionalChildren, template, useEffect, useRef, useState, withSlot } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
+//#region src/Popover.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(6);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const dark = __extra[0];
+	const dismiss = __extra[1];
+	const panelRef = __extra[2];
+	const position = __extra[3];
+	const props = __extra[4];
+	const stopPointer = __extra[5];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1;
 		const _root = clone(_t$0);
-		queueRefAttach(__s, _m1 = (node) => applyWebProps(node, props.web), _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_b = bag6(__s, _root, _m0, _m1, void 0, void 0, null, void 0);
-		__s.refFields = _rm$1;
-	} else {
-		const _r = (node) => applyWebProps(node, props.web);
-		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		_m0 = __block.parentNode;
+		_m1 = child(_root);
+		drainFrag(_root, __block.parentNode, __block.endMarker);
+		_b = bag4(__s, null, _m0, _m1, null, void 0);
 	}
-	_b.c = updateFreshClassName(["vx-keyboard-avoiding", props.className], _b.c, _b.a);
 	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.a, _v, _b.d);
-			_b.d = _v;
+		const _v = /* @__PURE__ */ createPortal(createScopedValue(() => createScopedElement("div", {
+			className: cx("vx-popover-layer", dark && "dark"),
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: 1e3,
+				pointerEvents: "none"
+			}
+		}, () => positionalChildren([(props.dismissOnOutsideTap ?? true) && createScopedValue(() => createElement("div", {
+			className: "vx-popover-backdrop",
+			style: {
+				position: "fixed",
+				inset: 0,
+				zIndex: 0,
+				pointerEvents: "auto"
+			},
+			onPointerDown: stopPointer,
+			onClick: dismiss
+		})), createScopedValue(() => createScopedElement("div", {
+			ref: panelRef,
+			className: cx("vx-popover", props.className),
+			style: {
+				...props.style,
+				position: "fixed",
+				top: position.top,
+				left: position.left,
+				zIndex: 1,
+				pointerEvents: "auto"
+			},
+			...props.web
+		}, () => props.children))]))), document.body);
+		_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+		_b.d = _v;
+	}
+}
+function __then$3(__props, __s, __extra) {
+	const __block = __s.block;
+	const anchorElement = __extra[0];
+	const props = __extra[1];
+	componentSlotVoid(__s, 0, __block.parentNode, PopoverLayer, {
+		...props,
+		"anchorElement": anchorElement
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:541a23d1");
+}
+var PopoverLayer = function PopoverLayer(props, __s, __extra) {
+	const __block = __s.block;
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(1);
+	const dark = withSlot(_h$0, useThemeScheme) === "dark";
+	const panelRef = useRef(null, _hs$ + 1);
+	const [position, setPosition] = useState(null, _hs$ + 2);
+	const update = () => {
+		const anchor = props.anchorElement;
+		if (!anchor?.getBoundingClientRect) return;
+		const anchorRect = anchor.getBoundingClientRect();
+		const panelRect = panelRef.current?.getBoundingClientRect?.();
+		const placed = positionPopover({
+			left: anchorRect.left,
+			top: anchorRect.top,
+			width: anchorRect.width,
+			height: anchorRect.height
+		}, {
+			width: panelRect?.width ?? 0,
+			height: panelRect?.height ?? 0
+		}, {
+			left: 0,
+			top: 0,
+			width: window.innerWidth,
+			height: window.innerHeight
+		}, props.placement ?? "bottom");
+		setPosition((current) => current?.left === placed.left && current?.top === placed.top ? current : placed);
+	};
+	useEffect(() => {
+		if (!props.open || !props.anchorElement?.getBoundingClientRect) {
+			setPosition(null);
+			return;
 		}
+		update();
+		window.addEventListener("resize", update);
+		window.addEventListener("scroll", update, true);
+		const observer = typeof ResizeObserver === "undefined" || !panelRef.current ? null : new ResizeObserver(update);
+		if (observer && panelRef.current) observer.observe(panelRef.current);
+		return () => {
+			window.removeEventListener("resize", update);
+			window.removeEventListener("scroll", update, true);
+			observer?.disconnect();
+		};
+	}, [
+		props.open,
+		props.anchorElement,
+		props.placement,
+		props.children,
+		position === null
+	], _hs$ + 3);
+	const stopPointer = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (event) => event.stopPropagation());
+	const dismiss = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		props.onDismiss?.();
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	{
+		const __ifCondition = props.open && position;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [
+			dark,
+			dismiss,
+			panelRef,
+			position,
+			props,
+			stopPointer
+		] : void 0);
 	}
+};
+var Popover = function Popover(props, __s, __extra) {
+	const __block = __s.block;
+	const [anchorElement, setAnchorElement] = useState(null, _hs$ + 4);
+	useEffect(() => {
+		const next = props.anchor?.current ?? null;
+		if (next !== anchorElement) setAnchorElement(next);
+	}, [
+		props.anchor,
+		props.open,
+		anchorElement
+	], _hs$ + 5);
 	{
-		const _v = props.children;
-		_b.e = childTextHoleUpdate(__s, 1, _b.a, _v, _b.e, _b.f);
-		_b.f = _v;
+		const __ifCondition$ = props.open && anchorElement;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition$, __then$3, null, __block.endMarker, __ifCondition$ ? [anchorElement, props] : void 0);
 	}
-});
+};
 //#endregion
-export { KeyboardAvoiding };
+export { Popover };

package/dist/web/ui34.js

@@ -1,67 +1,150 @@
-import { __s, bag3, bag8, child, clone, drainFrag, ifBlock, queueRefAttach, queueRefDetach, setStyle, sibling, template } from "octane";
-import { childTextHoleUpdate, replaceRef, updateFreshClassName } from "octane/internal/client";
-//#region src/Drawer.web.tsrx
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-drawer-backdrop\" aria-hidden=\"true\"></div><div class=\"vx-drawer-panel\"></div>", 0, 1);
-var _t$1 = /* @__PURE__ */ template("<div><div class=\"vx-drawer-main\"></div><!></div>");
-function __then$1(__props, __s, __extra) {
+import { View } from "./ui5.js";
+import { Popover } from "./ui33.js";
+import { bag4, bag5, child, clone, componentSlotVoid, drainFrag, hookSlots, markChildrenBlock, sibling, template, useEffect, useRef, useState } from "octane";
+import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
+//#region src/Hoverable.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _t$1 = /* @__PURE__ */ template("<!><!>", 3, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(7);
+var __childrenBody = {};
+var __childrenBody$ = {};
+var __childrenBody$2 = {};
+var Hoverable = function Hoverable(props, __s, __extra) {
 	const __block = __s.block;
-	const props = __extra[0];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0;
-		const _root = clone(_t$0);
-		_m0 = sibling(child(_root), 1);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag3(__s, null, _m0, null, void 0);
-	}
-	{
-		const _v = props.drawer;
-		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
-		_b.c = _v;
-	}
-}
-var _rm$4 = [
-	"r",
-	"b",
-	"a"
-];
-function applyWebProps(node, bag) {
-	if (!node || !bag) return;
-	for (const [key, value] of Object.entries(bag)) if (key.includes("-")) node.setAttribute(key, String(value));
-	else node[key] = value;
-}
-var Drawer = /* @__PURE__ */ __s(function Drawer(props, __s, __extra) {
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1, _m4, _m5;
-		const _root = clone(_t$1);
-		queueRefAttach(__s, _m1 = (node) => applyWebProps(node, props.web), _m0 = _root);
-		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
-		_m4 = sibling(child(_root), 1);
-		_m5 = child(_root);
-		_b = bag8(__s, _root, _m0, _m1, void 0, void 0, _m4, _m5, null, void 0);
-		__s.refFields = _rm$4;
-	} else {
-		const _r = (node) => applyWebProps(node, props.web);
-		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
-	}
-	_b.c = updateFreshClassName(["vx-drawer", props.className], _b.c, _b.a);
-	{
-		const _v = props.style;
-		if (_b.d !== _v) {
-			setStyle(_b.a, _v, _b.d);
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(3);
+	const [open, setOpen] = useState(false, _hs$ + 0);
+	const anchor = useRef(null, _hs$ + 1);
+	const anchorBinding = useRef(null, _hs$ + 2);
+	const cardBinding = useRef(null, _hs$ + 3);
+	const openTimer = useRef(null, _hs$ + 4);
+	const closeTimer = useRef(null, _hs$ + 5);
+	const clearOpen = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, () => {
+		if (openTimer.current !== null) clearTimeout(openTimer.current);
+		openTimer.current = null;
+	});
+	const clearClose = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, () => {
+		if (closeTimer.current !== null) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	});
+	const scheduleClose = () => {
+		clearClose();
+		closeTimer.current = setTimeout(() => {
+			closeTimer.current = null;
+			setOpen(false);
+		}, Math.max(0, props.closeDelay ?? 120));
+	};
+	const startOpen = () => {
+		clearClose();
+		clearOpen();
+		openTimer.current = setTimeout(() => {
+			openTimer.current = null;
+			setOpen(true);
+		}, Math.max(0, props.openDelay ?? 500));
+	};
+	const unbind = __hk[2] ?? hookMemoPublishInvariant(__hk, 2, (binding) => {
+		if (!binding) return;
+		binding.node.removeEventListener("mouseenter", binding.enter);
+		binding.node.removeEventListener("mouseleave", binding.leave);
+	});
+	const bindAnchor = (node) => {
+		anchor.current = node;
+		if (anchorBinding.current?.node === node) return;
+		unbind(anchorBinding.current);
+		anchorBinding.current = null;
+		if (!node) return;
+		const binding = {
+			node,
+			enter: startOpen,
+			leave: () => {
+				clearOpen();
+				scheduleClose();
+			}
+		};
+		node.addEventListener("mouseenter", binding.enter);
+		node.addEventListener("mouseleave", binding.leave);
+		anchorBinding.current = binding;
+	};
+	const bindCard = (node) => {
+		if (cardBinding.current?.node === node) return;
+		unbind(cardBinding.current);
+		cardBinding.current = null;
+		if (!node) return;
+		const binding = {
+			node,
+			enter: clearClose,
+			leave: scheduleClose
+		};
+		node.addEventListener("mouseenter", binding.enter);
+		node.addEventListener("mouseleave", binding.leave);
+		cardBinding.current = binding;
+	};
+	useEffect(() => () => {
+		clearOpen();
+		clearClose();
+		unbind(anchorBinding.current);
+		unbind(cardBinding.current);
+	}, [], _hs$ + 6);
+	function __children$1(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$4(__props, __s, __extra) {
+			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;
+					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 = props.card;
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			componentSlotVoid(__s, 0, __block.parentNode, View, {
+				"bind": bindCard,
+				"className": props.cardClassName,
+				"style": props.cardStyle,
+				"children": markChildrenBlock(__children$6, __childrenBody)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:efc5cf17");
+		}
+		let _b = __s.slots[0];
+		if (_b === void 0) {
+			let _m0, _m1, _m4;
+			const _root = clone(_t$1);
+			_m0 = __block.parentNode;
+			const _el0 = child(_root);
+			_m1 = _el0;
+			_m4 = sibling(_el0, 1);
+			drainFrag(_root, __block.parentNode, __block.endMarker);
+			_b = bag5(__s, null, _m0, _m1, null, void 0, _m4);
+		}
+		{
+			const _v = props.children;
+			_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true);
 			_b.d = _v;
 		}
+		componentSlotVoid(__s, 2, _b.a, Popover, {
+			"open": open,
+			"anchor": anchor,
+			"placement": props.placement ?? "bottom",
+			"dismissOnOutsideTap": false,
+			"children": markChildrenBlock(__children$4, __childrenBody$)
+		}, _b.e, void 0, void 0, void 0, void 0, "c:258d2497");
 	}
-	{
-		const _v = props.main;
-		_b.g = childTextHoleUpdate(__s, 1, _b.f, _v, _b.g, _b.h);
-		_b.h = _v;
-	}
-	{
-		const __ifCondition = props.open;
-		ifBlock(__s, 2, _b.a, __ifCondition, __then$1, null, _b.e, __ifCondition ? [props] : void 0);
-	}
-});
+	componentSlotVoid(__s, 0, __block.parentNode, View, {
+		"className": props.className,
+		"style": props.style,
+		"bind": bindAnchor,
+		"web": props.web,
+		"children": markChildrenBlock(__children$1, __childrenBody$2)
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:df012d7f");
+};
 //#endregion
-export { Drawer };
+export { Hoverable };

package/dist/web/ui35.js

@@ -1,9 +1,142 @@
-//#region src/platformProps.web.ts
-/** Apply a web escape-hatch bag after the primitive's standard props. */
-function applyWebProps(el, props) {
-	if (!el || !props) return;
-	for (const [name, value] of Object.entries(props)) if (name.includes("-")) el.setAttribute(name, String(value));
-	else el[name] = value;
+import { cx } from "./ui28.js";
+import { applyThemeClasses } from "./ui29.js";
+import { Popover } from "./ui33.js";
+import { bag1, bag3, clone, componentSlot, componentSlotVoid, createRoot, ifBlock, markChildrenBlock, template } from "octane";
+import { childTextHoleUpdate } from "octane/internal/client";
+//#region src/toast-anchor.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<div class=\"vx-toast\"></div>");
+function __then$3(__props, __s, __extra) {
+	const props = __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);
+	}
+	{
+		const _v = props.content;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+function __else$5(__props, __s, __extra) {
+	const Component = __extra[0].content;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag1(__s, _root, _m0);
+	}
+	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:46bd91a2");
+}
+var __childrenBody = {};
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$2(__props, __s, __extra) {
+		const __block = __s.block;
+		ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$3, __else$5, __block.endMarker, [props]);
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Popover, {
+		"open": props.open,
+		"anchor": props.options.anchor,
+		"placement": props.options.placement ?? placementFor(props.options.position),
+		"dismissOnOutsideTap": false,
+		"children": markChildrenBlock(__children$2, __childrenBody)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fb0a2e5d");
+}
+function __then$9(__props, __s, __extra) {
+	const props = __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);
+	}
+	{
+		const _v = props.content;
+		_b.b = childTextHoleUpdate(__s, 1, _b.a, _v, _b.b, _b.c);
+		_b.c = _v;
+	}
+}
+function __else$11(__props, __s, __extra) {
+	const Component = __extra[0].content;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0;
+		const _root = clone(_t$0);
+		_m0 = _root;
+		_b = bag1(__s, _root, _m0);
+	}
+	componentSlot(__s, 1, _b.a, Component, {}, void 0, void 0, void 0, void 0, void 0, "c:75cbf224");
+}
+function __else$8(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	ifBlock(__s, 0, __block.parentNode, typeof props.content === "string", __then$9, __else$11, __block.endMarker, __extra);
+}
+var queue = [];
+var active = false;
+var ToastBody = function ToastBody(props, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, props.options.anchor, __then$0, __else$8, __block.endMarker, [props]);
+};
+function placementFor(position = "bottom") {
+	return position.startsWith("top") ? "top" : "bottom";
+}
+function applyWebProps(host, props) {
+	for (const [key, value] of Object.entries(props ?? {})) if (key.includes("-")) host.setAttribute(key, String(value));
+	else host[key] = value;
+}
+function alignmentFor(position = "bottom") {
+	if (position.endsWith("-start")) return "flex-start";
+	if (position.endsWith("-end")) return "flex-end";
+	return "center";
+}
+function showNext() {
+	if (active || queue.length === 0) return;
+	active = true;
+	const entry = queue.shift();
+	const anchored = Boolean(entry.options.anchor);
+	const host = document.createElement("div");
+	const position = entry.options.position ?? "bottom";
+	const unbindTheme = applyThemeClasses(host, cx("vx-toast-host", placementFor(position) === "top" ? "vx-toast-top" : "vx-toast-bottom"));
+	applyWebProps(host, entry.options.web);
+	if (anchored) host.style.display = "none";
+	else host.style.justifyContent = alignmentFor(position);
+	document.body.appendChild(host);
+	const root = createRoot(host);
+	root.render(ToastBody, {
+		...entry,
+		open: true
+	});
+	const finish = () => {
+		const cleanup = () => {
+			unbindTheme();
+			root.unmount();
+			host.remove();
+			active = false;
+			showNext();
+		};
+		if (anchored) {
+			root.render(ToastBody, {
+				...entry,
+				open: false
+			});
+			setTimeout(cleanup, 0);
+		} else cleanup();
+	};
+	setTimeout(finish, Math.max(0, entry.options.duration ?? 3e3));
+}
+function showToast(content, options = {}) {
+	queue.push({
+		content,
+		options
+	});
+	showNext();
 }
 //#endregion
-export { applyWebProps };
+export { showToast };