@neovici/cosmoz-tabs 6.1.0 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "6.1.0",
+	"version": "7.1.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -68,10 +68,11 @@
 	},
 	"dependencies": {
 		"@neovici/cosmoz-router": "^10.0.0",
-		"@neovici/cosmoz-utils": "^4.0.0",
+		"@neovici/cosmoz-utils": "^5.0.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
 		"compute-scroll-into-view": "^1.0.17",
+		"eslint-import-resolver-typescript": "^3.2.7",
 		"haunted": "^5.0.0",
 		"lit-html": "^2.0.0"
 	},

package/src/next/use-tabs.js

@@ -2,7 +2,7 @@
 import { html, useMemo, useCallback, useRef } from 'haunted';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 /* eslint-disable-next-line import/no-unresolved */
-import { useHashParam } from '@neovici/cosmoz-page-router/use-hash-param';
+import { useHashParam } from '@neovici/cosmoz-router/use-hash-param';
 
 const isValid = (tab) => !tab.hidden && !tab.disaebled,
 	valid = (tabs) => tabs.find(isValid),

package/src/use-tab.js

@@ -1,26 +1,35 @@
-import {
-	useEffect, useCallback
-} from 'haunted';
-import { useNotifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
+import { useEffect, useCallback } from 'haunted';
+import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 
-const useTab = host => {
+const useTab = (host) => {
 	useEffect(() => {
-		host.dispatchEvent(new CustomEvent('cosmoz-tab-alter', {
-			bubbles: true,
-			composed: true
-		}));
-	}, [host.hidden, host.disabled, host.heading, host.badge, host.icon, host.iconStyle]);
+		host.dispatchEvent(
+			new CustomEvent('cosmoz-tab-alter', {
+				bubbles: true,
+				composed: true,
+			})
+		);
+	}, [
+		host.hidden,
+		host.disabled,
+		host.heading,
+		host.badge,
+		host.icon,
+		host.iconStyle,
+	]);
 
 	useNotifyProperty('isSelected', host.isSelected);
 
 	return {
-		onSlot: useCallback(({ target }) => host.toggleAttribute(
-			'has-cards',
-			target.assignedElements().some(el => el.matches('cosmoz-tab-card'))
-		), [])
+		onSlot: useCallback(
+			({ target }) =>
+				host.toggleAttribute(
+					'has-cards',
+					target.assignedElements().some((el) => el.matches('cosmoz-tab-card, [has-cards]'))
+				),
+			[]
+		),
 	};
 };
 
-export {
-	useTab
-};
+export { useTab };

package/src/use-tabs.js

@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'haunted';
-import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
+import { notifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property';
 /* eslint-disable-next-line import/no-unresolved */
 import { useHashParam, link } from '@neovici/cosmoz-router/use-hash-param';
 import { choose, collect, getName, isValid } from './utils';
@@ -18,7 +18,9 @@ const useTabSelectedEffect = (host, selectedTab) => {
 			selectedTab.toggleAttribute('is-selected', true);
 			const eventOpts = { composed: true };
 			if (!selectedTab._active) {
-				selectedTab.dispatchEvent(new CustomEvent('tab-first-select', eventOpts));
+				selectedTab.dispatchEvent(
+					new CustomEvent('tab-first-select', eventOpts)
+				);
 				selectedTab._active = true;
 			}
 			selectedTab.dispatchEvent(new CustomEvent('tab-select', eventOpts));
@@ -29,41 +31,48 @@ const useTabSelectedEffect = (host, selectedTab) => {
 				selectedTab.toggleAttribute('is-selected', false);
 				selectedTab._fallbackFor = undefined;
 			};
-
 		}, [selectedTab]);
 	},
-
 	useAutoScroll = (host, selectedTab) => {
 		useEffect(() => {
 			const el = host.shadowRoot.querySelector('a[aria-selected]');
 			if (!el) {
 				return;
 			}
-			computeScroll(el, { block: 'nearest', inline: 'center', boundary: el.parentElement })
-				.forEach(({ el, top, left }) => el.scroll({ top, left, behavior: 'smooth' }));
+			computeScroll(el, {
+				block: 'nearest',
+				inline: 'center',
+				boundary: el.parentElement,
+			}).forEach(({ el, top, left }) =>
+				el.scroll({ top, left, behavior: 'smooth' })
+			);
 		}, [selectedTab]);
 	},
-
-	useTabs = host => {
-		const {
-				selected, hashParam
-			} = host,
+	useTabs = (host) => {
+		const { selected, hashParam } = host,
 			[tabs, setTabs] = useState([]),
 			[param] = useHashParam(hashParam),
-			selection = hashParam == null || param == null && selected != null ? selected : param,
+			selection =
+				hashParam == null || (param == null && selected != null)
+					? selected
+					: param,
 			selectedTab = useMemo(() => choose(tabs, selection), [tabs, selection]);
 
 		useTabSelectedEffect(host, selectedTab);
 
 		useEffect(() => {
-			const onTabAlter = e => {
+			const onTabAlter = (e) => {
 				e.stopPropagation();
 				const { target: tab } = e;
-				if (selectedTab != null && selectedTab._fallbackFor === tab && isValid(tab)) {
+				if (
+					selectedTab != null &&
+					selectedTab._fallbackFor === tab &&
+					isValid(tab)
+				) {
 					selectedTab._fallbackFor = undefined;
 					host.selected = getName(tab);
 				}
-				setTabs(prev => prev.slice());
+				setTabs((prev) => prev.slice());
 			};
 			host.addEventListener('cosmoz-tab-alter', onTabAlter);
 			return () => host.removeEventListener('cosmoz-tab-alter', onTabAlter);
@@ -71,13 +80,19 @@ const useTabSelectedEffect = (host, selectedTab) => {
 
 		useAutoScroll(host, selectedTab);
 
-		const href = useCallback(tab => isValid(tab) ? link(hashParam, getName(tab)) : undefined, [hashParam]);
+		const href = useCallback(
+			(tab) => (isValid(tab) ? link(hashParam, getName(tab)) : undefined),
+			[hashParam]
+		);
 
 		return {
 			tabs,
 			selectedTab,
-			onSlot: useCallback(({ target }) => requestAnimationFrame(() => setTabs(collect(target))), []),
-			onSelect: useCallback(e => {
+			onSlot: useCallback(
+				({ target }) => requestAnimationFrame(() => setTabs(collect(target))),
+				[]
+			),
+			onSelect: useCallback((e) => {
 				if (e.button !== 0 || e.metaKey || e.ctrlKey) {
 					return;
 				}
@@ -90,9 +105,11 @@ const useTabSelectedEffect = (host, selectedTab) => {
 
 				e.preventDefault();
 				window.history.pushState({}, '', href(tab));
-				requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('hashchange')));
+				requestAnimationFrame(() =>
+					window.dispatchEvent(new CustomEvent('hashchange'))
+				);
 			}, []),
-			href
+			href,
 		};
 	};