From 2cf2fbe186bc820065d97db0d711b7e1df2992e1 Mon Sep 17 00:00:00 2001
From: Meghea Iulian <iulian.meghea@gmail.com>
Date: Wed, 23 Sep 2020 22:06:32 +0300
Subject: [PATCH] fix(review): improve api

---
 lib/render.js   |  8 ++++----
 lib/use-tabs.js | 27 +++++++++++++--------------
 lib/utils.js    |  8 ++++----
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/lib/render.js b/lib/render.js
index d7e1068..3ba1dec 100644
--- a/lib/render.js
+++ b/lib/render.js
@@ -96,16 +96,16 @@ const style = `
 }`,
 
 	renderTab = ({
-		elected,
-		onElect,
+		selectedTab,
+		onSelect,
 		href
 	}) => tab => {
-		const isSelected = elected === tab,
+		const isSelected = selectedTab === tab,
 			icon = getIcon(tab, isSelected);
 		return html`<a class="tab" tabindex="-1" role="tab"
 			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
 			?aria-selected=${ isSelected }
-			@click=${ onElect }
+			@click=${ onSelect }
 			.tab=${ tab }
 			href=${ ifDefined(href(tab)) }
 		>
diff --git a/lib/use-tabs.js b/lib/use-tabs.js
index f2893bb..dde9b19 100644
--- a/lib/use-tabs.js
+++ b/lib/use-tabs.js
@@ -6,7 +6,7 @@ import {
 	useHashParam, link
 } from './use-hash-param';
 import {
-	elect, getName, isValid
+	choose, getName, isValid
 } from './utils';
 
 const useTabs = host => {
@@ -16,29 +16,29 @@ const useTabs = host => {
 		[tabs, setTabs] = useState([]),
 		param = useHashParam(hashParam),
 		selection = hashParam == null || param == null && selected != null ? selected : param,
-		elected = useMemo(() => elect(tabs, selection), [tabs, selection]);
+		selectedTab = useMemo(() => choose(tabs, selection), [tabs, selection]);
 
 	useEffect(() => {
-		if (!elected) {
+		if (!selectedTab) {
 			return;
 		}
-		elected.toggleAttribute('is-selected', true);
+		selectedTab.toggleAttribute('is-selected', true);
 		const opts = {
 			bubbles: false,
 			composed: true
 		};
-		if (!elected._active) {
-			elected.dispatchEvent(new CustomEvent('tab-first-select', opts));
-			elected._active = true;
+		if (!selectedTab._active) {
+			selectedTab.dispatchEvent(new CustomEvent('tab-first-select', opts));
+			selectedTab._active = true;
 		}
 
-		elected.dispatchEvent(new CustomEvent('tab-select', opts));
+		selectedTab.dispatchEvent(new CustomEvent('tab-select', opts));
 		requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
 		return () => {
-			elected.toggleAttribute('is-selected', false);
+			selectedTab.toggleAttribute('is-selected', false);
 		};
 
-	}, [elected]);
+	}, [selectedTab]);
 
 	useEffect(() => {
 		const onTabAlter = e => {
@@ -53,9 +53,9 @@ const useTabs = host => {
 
 	return {
 		tabs,
-		elected,
+		selectedTab,
 		onSlot: useCallback(({ target }) => setTabs(target.assignedElements().filter(el => el.matches('cosmoz-tab'))), []),
-		onElect: useCallback(e => {
+		onSelect: useCallback(e => {
 			if (e.button !== 0 || e.metaKey || e.ctrlKey) {
 				return;
 			}
@@ -68,8 +68,7 @@ const useTabs = host => {
 
 			e.preventDefault();
 			window.history.pushState({}, '', href(tab));
-			queueMicrotask(() => window.dispatchEvent(new CustomEvent('hash-changed')));
-
+			requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('hash-changed')));
 		}, []),
 		href
 	};
diff --git a/lib/utils.js b/lib/utils.js
index 8313580..a7fab0f 100644
--- a/lib/utils.js
+++ b/lib/utils.js
@@ -24,17 +24,17 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 			.join(';');
 	},
 
-	elect = (tabs, selected) => {
+	choose = (tabs, selected) => {
 		if (selected == null) {
 			return tabs.find(isValid);
 		}
-		const selection = tabs.find(tab => getName(tab) === selected);
-		return selection && isValid(selection) ? selection : tabs.find(isValid);
+		const selectedTab = tabs.find(tab => getName(tab) === selected);
+		return selectedTab && isValid(selectedTab) ? selectedTab : tabs.find(isValid);
 	};
 
 
 export {
-	elect,
+	choose,
 	isValid,
 	getIcon,
 	getIconStyle,