@neovici/cosmoz-tabs 7.5.0 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "7.5.0",
+	"version": "7.6.0",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"

package/src/next/use-tabs.d.ts

@@ -11,6 +11,7 @@ export interface RenderTab extends Tab {
 
 export interface Options {
 	hashParam?: string;
+	onActivate?: (name: string) => void;
 }
 
 type Unpacked<T> = T extends (infer U)[] ? U : T;
@@ -30,7 +31,7 @@ export type RenderTabs<T extends Tab> = Pick<
 
 export declare const useTabs: <T extends Tab, P extends Options>(
 	tabs: T[],
-	opts: P
+	opts?: P
 ) => Result<T>;
 
 export interface RenderOptions<T extends RenderTab> {

package/src/next/use-tabs.js

@@ -16,15 +16,21 @@ const isValid = (tab) => !tab.hidden && !tab.disabled,
 		return tab && isValid(tab) ? tab : valid(tabs);
 	};
 
-export const useTabs = (tabs, { hashParam }) => {
+export const useTabs = (tabs, { hashParam, onActivate }) => {
 	const [name, activate] = useHashParam(hashParam),
 		ref = useRef([]),
 		active = useMemo(() => choose(tabs, name), [tabs, name]),
 		activated = useMemo(() => {
 			const name = active.name;
 			return (ref.current = [...ref.current.filter((i) => i !== name), name]);
-		}, [active]),
-		onActivate = useCallback(
+		}, [active]);
+
+	return {
+		tabs,
+		active,
+		activated,
+		activate,
+		onActivate: useCallback(
 			(e) => {
 				if (e.button !== 0 || e.metaKey || e.ctrlKey) {
 					return;
@@ -33,17 +39,11 @@ export const useTabs = (tabs, { hashParam }) => {
 				if (!name) {
 					return;
 				}
+				onActivate?.(name);
 				activate(name);
 			},
-			[activate]
-		);
-
-	return {
-		tabs,
-		active,
-		activated,
-		activate,
-		onActivate,
+			[activate, onActivate]
+		),
 	};
 };