@stainless-api/ui-primitives 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/scripts/index.js

@@ -1,2 +1,35 @@
-export * from './dropdown-button';
-//# sourceMappingURL=index.js.map
+//#region src/scripts/dropdown-button.ts
+function initDropdownButton({ dropdownId, onSelect, onPrimaryAction }) {
+	const dropdown = document.getElementById(dropdownId);
+	if (!dropdown) return;
+	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();
+		});
+	});
+	primaryAction.addEventListener("click", () => {
+		onPrimaryAction(primaryAction);
+	});
+}
+
+//#endregion
+export { initDropdownButton };