@octane-xplat/ui 0.9.0 → 0.10.0

package/dist/web/NavigationMenu.web.tsrx.js

@@ -1,92 +1,124 @@
 import { applyEscapeProps } from "./escape-props.web.js";
 import { Icon } from "./Icon.web.tsrx.js";
-import { __s, bag3, bag7, child, clone, componentSlot, createScopedElement, createScopedValue, delegateEvents, ifBlock, mapSlot, positionalChildren, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, sibling, template } from "octane";
-import { bindSignalAttribute, bindSignalChild, createElementFromConfig, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+import { useListFocus } from "./list-focus.web.tsrx.js";
+import { __s, bag7, bag8, bag9, child, clone, componentSlot, delegateEvents, forBlock, hookSlots, ifBlock, queueRefAttach, queueRefDetach, setAriaAttribute, setBooleanAttribute, setEventHandler, setStyle, sibling, template, withSlot } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, setURLAttribute, updateFreshClassAttr, updateFreshClassName } from "octane/internal/client";
 //#region src/NavigationMenu.web.tsrx
 enableSignalBindings(1, true);
-delegateEvents(["click", "keydown"]);
-var _t$0 = /* @__PURE__ */ template("<span class=\"vx-navmenu-label\"></span>");
-var _t$1 = /* @__PURE__ */ template("<span role=\"link\"><!><!></span>");
+delegateEvents([
+	"click",
+	"focusin",
+	"keydown"
+]);
+var _t$0 = /* @__PURE__ */ template("<a><!><!></a>", 3);
+var _t$1 = /* @__PURE__ */ template("<button type=\"button\"><!><!></button>");
 var _t$2 = /* @__PURE__ */ template("<nav><!></nav>");
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(6));
 var _key$0 = (item) => item.key;
-function __then$2(__props, __s, __extra) {
+function __then$3(__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:402f6945");
+	componentSlot(__s, 0, __block.parentNode, Icon, {
+		"name": item.icon,
+		"size": 16
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:e7b4dfb9");
 }
-function __then$5(__props, __s, __extra) {
+function __then$2(__props, __s, __extra) {
 	const item = __extra[0];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
-		let _m0;
+		let _m1, _m4, _m5;
 		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:2bbe82f6", null, void 0, void 0, void 0, true);
+		_m1 = _root;
+		setEventHandler(_root, "$$click", () => item.onSelect?.());
+		const _el0 = child(_root);
+		_m4 = _el0;
+		_m5 = sibling(_el0, 1);
+		_b = bag8(__s, _root, void 0, _m1, void 0, void 0, _m4, _m5, null, void 0);
+	} else setEventHandler(_b.b, "$$click", () => item.onSelect?.());
+	_b.a = updateFreshClassAttr(["vx-navmenu-strip-item", item.active && "vx-navmenu-strip-item--active"], _b.a, _b.b);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "href", item.href, "b:710f8b23", setURLAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "aria-current", item.active ? "page" : void 0, "b:042287c9", setAriaAttribute);
+	ifBlock(__s, 1, _b.b, item.icon, __then$3, null, _b.e, __extra);
+	_b.i = bindSignalChild(__s, _b.i, 2, _b.b, item.label, "b:7d65f3d3", _b.f, true, void 0, void 0, void 0);
 }
-function __item$1(item, __s, __extra) {
+function __then$8(__props, __s, __extra) {
+	const __block = __s.block;
+	const item = __extra[0];
+	componentSlot(__s, 0, __block.parentNode, Icon, {
+		"name": item.icon,
+		"size": 16
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:663c2849");
+}
+function __else$7(__props, __s, __extra) {
+	const item = __extra[0];
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m1, _m5, _m6;
 		const _root = clone(_t$1);
 		_m1 = _root;
-		setEventHandler(_root, "$$click", item.disabled ? void 0 : item.onSelect);
-		setEventHandler(_root, "$$keydown", (e) => {
-			if (!item.disabled && e.key === "Enter") item.onSelect?.();
+		setEventHandler(_root, "$$click", () => {
+			if (!item.disabled) item.onSelect?.();
 		});
 		const _el0 = child(_root);
 		_m5 = _el0;
 		_m6 = sibling(_el0, 1);
-		_b = bag7(__s, _root, void 0, _m1, void 0, void 0, void 0, _m5, _m6);
-	} else {
-		setEventHandler(_b.b, "$$click", item.disabled ? void 0 : item.onSelect);
-		setEventHandler(_b.b, "$$keydown", (e) => {
-			if (!item.disabled && e.key === "Enter") item.onSelect?.();
-		});
-	}
-	_b.a = bindSignalAttribute(__s, _b.a, _b.b, "aria-current", item.active ? "page" : void 0, "b:36065b56", setAriaAttribute);
-	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "aria-disabled", item.disabled || void 0, "b:0a1edf7c", setAriaAttribute);
-	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "tabindex", item.disabled ? void 0 : 0, "b:09198478", setPlainAttribute);
-	_b.e = updateFreshClassName([
-		"vx-navmenu-item",
-		item.active ? "vx-navmenu-item--on" : void 0,
-		item.disabled ? "vx-navmenu-item--disabled" : void 0
-	], _b.e, _b.b);
-	{
-		const __ifCondition = item.icon;
-		ifBlock(__s, 1, _b.b, __ifCondition, __then$2, null, _b.f, __ifCondition ? [item] : void 0);
-	}
-	{
-		const __ifCondition$ = item.label != null;
-		ifBlock(__s, 2, _b.b, __ifCondition$, __then$5, null, _b.g, __ifCondition$ ? [item] : void 0);
-	}
+		_b = bag9(__s, _root, void 0, _m1, void 0, void 0, void 0, _m5, _m6, null, void 0);
+	} else setEventHandler(_b.b, "$$click", () => {
+		if (!item.disabled) item.onSelect?.();
+	});
+	_b.a = updateFreshClassName(["vx-navmenu-strip-item", item.active && "vx-navmenu-strip-item--active"], _b.a, _b.b);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.b, "disabled", item.disabled, "b:d0a5a69e", setBooleanAttribute);
+	_b.d = bindSignalAttribute(__s, _b.d, _b.b, "aria-disabled", item.disabled || void 0, "b:e5fcd038", setAriaAttribute);
+	_b.e = bindSignalAttribute(__s, _b.e, _b.b, "aria-current", item.active ? "page" : void 0, "b:999d621b", setAriaAttribute);
+	ifBlock(__s, 1, _b.b, item.icon, __then$8, null, _b.f, __extra);
+	_b.j = bindSignalChild(__s, _b.j, 2, _b.b, item.label, "b:718e2b46", _b.g, true, void 0, void 0, void 0);
 }
-var _rm$9 = [
+function __item$1(item, __s, __extra) {
+	const __block = __s.block;
+	ifBlock(__s, 0, __block.parentNode, item.href != null && !item.disabled, __then$2, __else$7, __block.endMarker, [item]);
+}
+var _rm$14 = [
 	"r",
 	"b",
 	"a"
 ];
 var NavigationMenu = /* @__PURE__ */ __s(function NavigationMenu(props, __s, __extra) {
-	let __mapItems;
-	let __mapMethod;
+	const { listRef, handleKeyDown, handleFocus } = withSlot(_h$0, useListFocus, {
+		itemSelector: ".vx-navmenu-strip-item",
+		orientation: props.horizontal === false ? "vertical" : "horizontal"
+	});
+	const isHorizontal = props.horizontal !== false;
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
 	let _b = __s.slots[0];
 	if (_b === void 0) {
 		let _m0, _m1, _m6;
 		const _root = clone(_t$2);
-		queueRefAttach(__s, _m1 = (e) => applyEscapeProps(e, props), _m0 = _root);
+		queueRefAttach(__s, _m1 = (el) => {
+			listRef.current = el;
+			applyEscapeProps(el, props);
+		}, _m0 = _root);
 		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		setEventHandler(_root, "$$keydown", handleKeyDown);
+		setEventHandler(_root, "$$focusin", handleFocus);
 		_m6 = child(_root);
 		_b = bag7(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, _m6);
-		__s.refFields = _rm$9;
+		__s.refFields = _rm$14;
 	} else {
-		const _r = (e) => applyEscapeProps(e, props);
-		if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		{
+			const _r = (el) => {
+				listRef.current = el;
+				applyEscapeProps(el, props);
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.a, "$$keydown", handleKeyDown);
+		setEventHandler(_b.a, "$$focusin", handleFocus);
 	}
-	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:ef165b7e", setPlainAttribute);
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:872c9c5a", setPlainAttribute);
 	_b.d = updateFreshClassName([
-		"vx-navmenu",
-		props.horizontal === false ? "vx-navmenu--col" : "vx-navmenu--row",
+		"vx-navmenu-strip",
+		!isHorizontal && "vx-navmenu-strip--vertical",
 		props.className
 	], _b.d, _b.a);
 	{
@@ -96,23 +128,8 @@ var NavigationMenu = /* @__PURE__ */ __s(function NavigationMenu(props, __s, __e
 			_b.e = _v;
 		}
 	}
-	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", props.accessibilityLabel, "b:096aff78", setAriaAttribute);
-	mapSlot(__s, 1, _b.a, (__mapItems = props.items, __mapMethod = __mapItems.map, __mapItems), __mapMethod, (item) => createScopedElement("span", {
-		key: item.key,
-		role: "link",
-		"aria-current": item.active ? "page" : void 0,
-		"aria-disabled": item.disabled || void 0,
-		tabIndex: item.disabled ? void 0 : 0,
-		className: [
-			"vx-navmenu-item",
-			item.active ? "vx-navmenu-item--on" : void 0,
-			item.disabled ? "vx-navmenu-item--disabled" : void 0
-		],
-		onClick: item.disabled ? void 0 : item.onSelect,
-		onKeyDown: (e) => {
-			if (!item.disabled && e.key === "Enter") item.onSelect?.();
-		}
-	}, () => positionalChildren([item.icon ? createScopedValue(() => createElementFromConfig("c:d7ecfcc6", Icon, { name: item.icon })) : null, item.label != null ? createScopedElement("span", { className: "vx-navmenu-label" }, () => item.label) : null])), _key$0, __item$1, 26, void 0, _b.g, 1);
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", props.accessibilityLabel, "b:36527fc7", setAriaAttribute);
+	forBlock(__s, 1, _b.a, props.items, _key$0, __item$1, 10, void 0, null, _b.g, true);
 });
 //#endregion
 export { NavigationMenu };

package/dist/web/Outline.web.tsrx.js

@@ -0,0 +1,279 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { __s, bag11, bag4, child, clone, createScopedElement, delegateEvents, hookSlots, ifBlock, isHydratingStyle, queueRefAttach, queueRefDetach, setAriaAttribute, setEventHandler, setStyle, setStyleProperties, setStyleProperty, sibling, template, useEffect, useRef, useState } from "octane";
+import { bindSignalAttribute, bindSignalChild, enableSignalBindings, replaceRef, setPlainAttribute, updateFreshClassName } from "octane/internal/client";
+//#region src/Outline.web.tsrx
+enableSignalBindings(1, true);
+delegateEvents(["keydown"]);
+var _t$0 = /* @__PURE__ */ template("<span class=\"vx-outline-indicator\" aria-hidden=\"true\"></span>");
+var _t$1 = /* @__PURE__ */ template("<nav role=\"navigation\"><div class=\"vx-outline-track\" role=\"list\"><!><!></div></nav>");
+var _hs$ = /* @__PURE__ */ hookSlots(10);
+function __then$0(__props, __s, __extra) {
+	const indicator = __extra[0];
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m3;
+		const _root = clone(_t$0);
+		_m3 = _root;
+		_b = bag4(__s, _root, __s, void 0, void 0, _m3);
+	}
+	{
+		const _v0 = `translateY(${indicator.top}px)`;
+		const _v1 = indicator.height;
+		if (_b.a === __s || isHydratingStyle()) {
+			setStyleProperties(_b.d, [
+				"transform",
+				_v0,
+				"height",
+				_v1
+			], "");
+			_b.a = null;
+			_b.b = _v0;
+			_b.c = _v1;
+		} else {
+			if (_b.b !== _v0) {
+				setStyleProperty(_b.d, "transform", _v0, "", _b.b);
+				_b.b = _v0;
+			}
+			if (_b.c !== _v1) {
+				setStyleProperty(_b.d, "height", _v1, "", _b.c);
+				_b.c = _v1;
+			}
+		}
+	}
+}
+var _rm$3 = [
+	"r",
+	"b",
+	"a"
+];
+var DEFAULT_LABEL = "Table of contents";
+var SPY_EDGE = 8;
+var SETTLE_MS = 120;
+function isScrollable(el) {
+	const style = getComputedStyle(el);
+	return /(auto|scroll)/.test(style.overflowY) && el.scrollHeight > el.clientHeight;
+}
+function resolveScrollContainer(navEl, ref) {
+	if (ref?.current) return ref.current;
+	let node = navEl?.parentElement ?? null;
+	while (node) {
+		if (isScrollable(node)) return node;
+		node = node.parentElement;
+	}
+	return document.documentElement;
+}
+function headingEl(container, id) {
+	if (container instanceof Document) return container.getElementById(id);
+	const escaped = globalThis.CSS?.escape ? CSS.escape(id) : id.replace(/"/g, "\\\"");
+	return container.querySelector(`[id="${escaped}"]`);
+}
+function headingTop(container, el) {
+	if (container instanceof Document || container === document.documentElement) return el.getBoundingClientRect().top + window.scrollY;
+	const ce = container;
+	return el.getBoundingClientRect().top - ce.getBoundingClientRect().top + ce.scrollTop;
+}
+function scrollTopOf(container) {
+	return container instanceof Document || container === document.documentElement ? window.scrollY : container.scrollTop;
+}
+function scrollToTop(container, top, smooth) {
+	const opts = {
+		top,
+		behavior: smooth ? "smooth" : "auto"
+	};
+	if (container instanceof Document || container === document.documentElement) window.scrollTo(opts);
+	else container.scrollTo(opts);
+}
+var Outline = /* @__PURE__ */ __s(function Outline(props, __s, __extra) {
+	const items = props.items ?? [];
+	const label = props.label ?? DEFAULT_LABEL;
+	const density = props.density ?? "default";
+	const offset = props.offset ?? 0;
+	const hasScrollOnClick = props.hasScrollOnClick ?? true;
+	const controlled = props.activeId !== void 0;
+	const [internalActive, setInternalActive] = useState(items[0]?.id, _hs$ + 0);
+	const activeId = controlled ? props.activeId : internalActive;
+	const navRef = useRef(null, _hs$ + 1);
+	const itemEls = useRef(/* @__PURE__ */ new Map(), _hs$ + 2);
+	const [indicator, setIndicator] = useState(null, _hs$ + 3);
+	const [focusId, setFocusId] = useState(items[0]?.id, _hs$ + 4);
+	const settleTimer = useRef(void 0, _hs$ + 5);
+	const navigating = useRef(void 0, _hs$ + 6);
+	const setActive = (id) => {
+		if (!controlled) setInternalActive(id);
+		props.onActiveIdChange?.(id);
+	};
+	const container = () => resolveScrollContainer(navRef.current, props.scrollContainerRef);
+	useEffect(() => {
+		if (controlled || items.length === 0) return;
+		const c = container();
+		const target = c instanceof Document || c === document.documentElement ? window : c;
+		const spy = () => {
+			const tops = items.map((item) => {
+				const el = headingEl(c, item.id);
+				return el ? {
+					id: item.id,
+					top: headingTop(c, el)
+				} : null;
+			}).filter(Boolean);
+			const edge = scrollTopOf(c) + offset + SPY_EDGE;
+			let current = tops[0]?.id;
+			for (const t of tops) if (t.top <= edge) current = t.id;
+			else break;
+			if (current && current !== activeIdRef.current) setActive(current);
+		};
+		target.addEventListener("scroll", spy, { passive: true });
+		spy();
+		return () => target.removeEventListener("scroll", spy);
+	}, [
+		controlled,
+		items,
+		offset
+	], _hs$ + 7);
+	const activeIdRef = useRef(activeId, _hs$ + 8);
+	activeIdRef.current = activeId;
+	useEffect(() => {
+		const el = activeId ? itemEls.current.get(activeId) : void 0;
+		const host = navRef.current;
+		if (!el || !host) {
+			setIndicator(null);
+			return;
+		}
+		setIndicator({
+			top: el.offsetTop,
+			height: el.offsetHeight
+		});
+	}, [
+		activeId,
+		items,
+		density
+	], _hs$ + 9);
+	const settle = () => {
+		if (navigating.current != null) {
+			props.onNavigateEnd?.(navigating.current);
+			navigating.current = void 0;
+		}
+	};
+	const activate = (id) => {
+		if (!items.find((i) => i.id === id)) return;
+		setFocusId(id);
+		setActive(id);
+		navigating.current = id;
+		props.onNavigateStart?.(id);
+		if (hasScrollOnClick) {
+			const c = container();
+			const target = headingEl(c, id);
+			if (target) {
+				scrollToTop(c, headingTop(c, target) - offset, true);
+				if (typeof history !== "undefined" && history.replaceState) history.replaceState(null, "", `#${id}`);
+			}
+		}
+		const c = container();
+		const scrollTarget = c instanceof Document || c === document.documentElement ? window : c;
+		const onScroll = () => {
+			if (settleTimer.current !== void 0) clearTimeout(settleTimer.current);
+			settleTimer.current = setTimeout(() => {
+				scrollTarget.removeEventListener("scroll", onScroll);
+				settle();
+			}, SETTLE_MS);
+		};
+		scrollTarget.addEventListener("scroll", onScroll, { passive: true });
+		onScroll();
+	};
+	const onKeyDown = (e) => {
+		const idx = items.findIndex((i) => i.id === focusId);
+		const move = (next) => {
+			const item = items[Math.max(0, Math.min(items.length - 1, next))];
+			if (!item) return;
+			setFocusId(item.id);
+			itemEls.current.get(item.id)?.focus();
+		};
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault();
+				move(idx + 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault();
+				move(idx - 1);
+				break;
+			case "Home":
+				e.preventDefault();
+				move(0);
+				break;
+			case "End":
+				e.preventDefault();
+				move(items.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault();
+				if (focusId) activate(focusId);
+		}
+	};
+	if (__s.block.pending && !__s.block.crossRenderUpdate) return;
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m6, _m7, _m8;
+		const _root = clone(_t$1);
+		queueRefAttach(__s, _m1 = (e) => {
+			navRef.current = e;
+			applyEscapeProps(e, props);
+		}, _m0 = _root);
+		(__s.cleanups ??= []).push(() => _b && queueRefDetach(_b.b, _b.a));
+		const _el0 = child(_root);
+		_m6 = _el0;
+		setEventHandler(_el0, "$$keydown", onKeyDown);
+		const _el1 = child(_el0);
+		_m7 = _el1;
+		_m8 = sibling(_el1, 1);
+		_b = bag11(__s, _root, _m0, _m1, void 0, void 0, void 0, void 0, _m6, _m7, _m8, null, void 0);
+		__s.refFields = _rm$3;
+	} else {
+		{
+			const _r = (e) => {
+				navRef.current = e;
+				applyEscapeProps(e, props);
+			};
+			if (_r !== _b.b) _b.b = replaceRef(__s, _b.b, _r, _b.a);
+		}
+		setEventHandler(_b.g, "$$keydown", onKeyDown);
+	}
+	_b.c = bindSignalAttribute(__s, _b.c, _b.a, "id", props.id, "b:76d0d182", setPlainAttribute);
+	_b.d = updateFreshClassName([
+		"vx-outline",
+		`vx-outline--${density}`,
+		props.className
+	], _b.d, _b.a);
+	{
+		const _v = props.style;
+		if (_b.e !== _v) {
+			setStyle(_b.a, _v, _b.e);
+			_b.e = _v;
+		}
+	}
+	_b.f = bindSignalAttribute(__s, _b.f, _b.a, "aria-label", label, "b:eee2219e", setAriaAttribute);
+	{
+		const __ifCondition = indicator;
+		ifBlock(__s, 1, _b.g, __ifCondition, __then$0, null, _b.h, __ifCondition ? [indicator] : void 0);
+	}
+	_b.l = bindSignalChild(__s, _b.l, 2, _b.g, items.map((item) => {
+		const isActive = item.id === activeId;
+		return createScopedElement("button", {
+			key: item.id,
+			ref: (e) => {
+				if (e) itemEls.current.set(item.id, e);
+				else itemEls.current.delete(item.id);
+			},
+			type: "button",
+			role: "listitem",
+			className: ["vx-outline-item", isActive && "vx-outline-item--active"],
+			style: { paddingInlineStart: 8 + (item.level - 1) * 12 },
+			tabIndex: item.id === focusId ? 0 : -1,
+			"aria-current": isActive ? "location" : void 0,
+			onClick: () => activate(item.id),
+			onFocus: () => setFocusId(item.id)
+		}, () => item.label);
+	}), "b:9d03456f", _b.i, true, void 0, void 0, void 0);
+});
+//#endregion
+export { Outline };