@stainless-api/ui-primitives 0.1.0-beta.22 → 0.1.0-beta.24

package/dist/scripts/index.js

@@ -1,33 +1,161 @@
+//#region src/scripts/dropdown.ts
+function initDropdown({ root, onSelect, initialValue }) {
+	if (!root) {
+		console.error("Dropdown root element not found");
+		return;
+	}
+	const trigger = root.querySelector("[data-part=\"trigger\"]");
+	const menu = root.querySelector("[data-part=\"menu\"]");
+	if (!trigger) {
+		console.error("Dropdown trigger not found");
+		return;
+	}
+	if (!menu) {
+		console.error("Dropdown menu not found");
+		return;
+	}
+	const selectedSlot = trigger.querySelector("[data-part=\"trigger-selected\"]");
+	const items = Array.from(menu.querySelectorAll("[data-part=\"item\"]"));
+	function open() {
+		if (!trigger || !menu || !root) return;
+		root.setAttribute("aria-expanded", "true");
+		menu.dataset.state = "open";
+		menu.removeAttribute("aria-hidden");
+		const triggerRect = trigger.getBoundingClientRect();
+		const menuHeight = menu.offsetHeight;
+		const spaceBelow = window.innerHeight - triggerRect.bottom;
+		const spaceAbove = triggerRect.top;
+		menu.classList.remove("stl-ui-dropdown-menu--above", "stl-ui-dropdown-menu--below");
+		if (spaceBelow < menuHeight && spaceAbove > spaceBelow) menu.classList.add("stl-ui-dropdown-menu--above");
+		else menu.classList.add("stl-ui-dropdown-menu--below");
+	}
+	function close() {
+		if (!trigger || !menu || !root) return;
+		root.setAttribute("aria-expanded", "false");
+		menu.dataset.state = "closed";
+		menu.setAttribute("aria-hidden", "true");
+	}
+	function renderSelectedFromItem(item) {
+		if (!selectedSlot) return;
+		const tmpl = item.querySelector("template[data-part=\"selected-template\"]");
+		if (!tmpl) {
+			console.error("Dropdown item template not found");
+			return;
+		}
+		selectedSlot.innerHTML = "";
+		selectedSlot.appendChild(tmpl.content.cloneNode(true));
+		selectedSlot.removeAttribute("data-placeholder");
+	}
+	function selectItem(item) {
+		if (!trigger) {
+			console.error("Dropdown trigger not found");
+			return;
+		}
+		items.forEach((i) => i.setAttribute("aria-selected", String(i === item)));
+		trigger.dataset.value = item.getAttribute("data-value") || "";
+		renderSelectedFromItem(item);
+	}
+	function handleItemSelection(e) {
+		const item = e.target.closest("[data-part=\"item\"]");
+		if (!item) {
+			console.error("Dropdown item not found");
+			return;
+		}
+		if (!trigger) {
+			console.error("Dropdown trigger not found");
+			return;
+		}
+		selectItem(item);
+		onSelect?.(item.getAttribute("data-value") || "");
+		close();
+		trigger.focus();
+	}
+	function handleTriggerClick() {
+		if (!root) return false;
+		if (root.getAttribute("aria-expanded") === "true") {
+			close();
+			return false;
+		} else {
+			open();
+			return true;
+		}
+	}
+	const initial = (initialValue ? items.find((i) => i.getAttribute("data-value") === initialValue) : items.find((i) => i.getAttribute("aria-selected") === "true")) ?? items[0];
+	if (initial) selectItem(initial);
+	trigger.addEventListener("click", () => {
+		handleTriggerClick();
+	});
+	trigger.addEventListener("keydown", (e) => {
+		if (e.key !== "Enter" && e.key !== " ") return;
+		e.preventDefault();
+		if (handleTriggerClick()) items[0]?.focus();
+	});
+	menu.addEventListener("click", (e) => {
+		handleItemSelection(e);
+	});
+	document.addEventListener("keydown", (e) => {
+		if (!(root.getAttribute("aria-expanded") === "true")) return;
+		if (e.key === "Escape") {
+			close();
+			trigger.focus();
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			const activeElement = document.activeElement;
+			if (activeElement === trigger) {
+				items[0]?.focus();
+				return;
+			}
+			let nextSibling = activeElement?.nextElementSibling;
+			while (nextSibling && nextSibling.tagName.toLowerCase() === "hr") nextSibling = nextSibling.nextElementSibling;
+			if (nextSibling instanceof HTMLElement && items.includes(nextSibling)) nextSibling.focus();
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			const activeElement = document.activeElement;
+			if (activeElement === trigger) {
+				items[items.length - 1]?.focus();
+				return;
+			}
+			let prevSibling = activeElement?.previousElementSibling;
+			while (prevSibling && prevSibling.tagName.toLowerCase() === "hr") prevSibling = prevSibling.previousElementSibling;
+			if (prevSibling instanceof HTMLElement && items.includes(prevSibling)) prevSibling.focus();
+			return;
+		}
+	});
+	document.addEventListener("click", (e) => {
+		if (!root.contains(e.target)) close();
+	});
+}
+
+//#endregion
 //#region src/scripts/dropdown-button.ts
 function initDropdownButton({ dropdown, onSelect, onPrimaryAction }) {
 	const trigger = dropdown.querySelector("[data-part=\"trigger\"]");
 	const menu = dropdown.querySelector("[data-part=\"menu\"]");
 	const primaryAction = dropdown.querySelector("[data-part=\"primary-action\"]");
-	if (!trigger || !menu || !primaryAction) return;
-	let isOpen = false;
-	function toggleDropdown() {
-		if (!trigger || !menu) return;
-		isOpen = !isOpen;
-		menu.dataset.state = isOpen ? "open" : "closed";
-		trigger.setAttribute("aria-expanded", String(isOpen));
-	}
-	trigger.addEventListener("click", toggleDropdown);
-	document.addEventListener("click", (event) => {
-		if (!isOpen) return;
-		if (!dropdown.contains(event.target)) toggleDropdown();
-		if (primaryAction && primaryAction.contains(event.target)) toggleDropdown();
-	});
-	dropdown.querySelectorAll("[data-part=\"item\"]").forEach((item) => {
-		item.addEventListener("click", () => {
-			const value = item.getAttribute("data-value");
-			if (value) onSelect(value);
-			toggleDropdown();
-		});
-	});
+	if (!trigger) {
+		console.error("Dropdown trigger not found");
+		return;
+	}
+	if (!menu) {
+		console.error("Dropdown menu not found");
+		return;
+	}
+	if (!primaryAction) {
+		console.error("Dropdown primary action not found");
+		return;
+	}
 	primaryAction.addEventListener("click", () => {
 		onPrimaryAction(primaryAction);
 	});
+	initDropdown({
+		root: dropdown,
+		onSelect
+	});
 }
 
 //#endregion
-export { initDropdownButton };
+export { initDropdown, initDropdownButton };