feat: add new event for tabs (#3833)

* feat: add new event for tab-list

* chore: moved tabSelect to DBTabs

* chore: update snapshots

packages/components/scripts/post-build/components.ts

@@ -71,6 +71,11 @@ export const getComponents = (): Component[] => [
 					to: 'scrollContainer: Element | null = null;'
 				}
 			]
+		},
+		config: {
+			react: {
+				propsPassingFilter: ['onTabSelect', 'onIndexChange']
+			}
 		}
 	},
 

packages/components/src/components/tabs/model.ts

@@ -22,7 +22,6 @@ export type DBTabsDefaultProps = {
 	 * Change amount of distance if you click on an arrow, only available with behavior="arrows"
 	 */
 	arrowScrollDistance?: number;
-
 	/**
 	 * Show a scrollbar or buttons with arrows to navigate for horizontal tabs with overflow visible
 	 */
@@ -43,6 +42,16 @@ export type DBTabsDefaultProps = {
 	 */
 	name?: string;
 
+	/**
+	 * Informs the user if the current tab index has changed.
+	 */
+	onIndexChange?: (index?: number) => void;
+
+	/**
+	 * Informs the user if another tab has been selected.
+	 */
+	onTabSelect?: (event?: Event) => void;
+
 	/**
 	 * Provide simple tabs with label + text as content
 	 */
@@ -65,6 +74,7 @@ export type DBTabsDefaultState = {
 	convertTabs: (tabs?: unknown[] | string | undefined) => DBSimpleTabProps[];
 	initTabList: () => void;
 	initTabs: (init?: boolean) => void;
+	handleChange: (event: any) => void;
 };
 
 export type DBTabsState = DBTabsDefaultState & GlobalState & InitializedState;

packages/components/src/components/tabs/tabs.lite.tsx

@@ -136,6 +136,24 @@ export default function DBTabs(props: DBTabsProps) {
 					);
 				}
 			}
+		},
+		handleChange: (event: any) => {
+			if (props.onIndexChange && event.target) {
+				const list = event.target.closest('ul');
+				const listItem =
+					// db-tab-item for angular and stencil wrapping elements
+					event.target.closest('db-tab-item') ??
+					event.target.closest('li');
+				if (list !== null && listItem !== null) {
+					props.onIndexChange(
+						Array.from(list.childNodes).indexOf(listItem)
+					);
+				}
+			}
+
+			if (props.onTabSelect) {
+				props.onTabSelect(event);
+			}
 		}
 	});
 
@@ -185,12 +203,14 @@ export default function DBTabs(props: DBTabsProps) {
 			data-orientation={props.orientation}
 			data-scroll-behavior={props.behavior}
 			data-alignment={props.alignment ?? 'start'}
-			data-width={props.width ?? 'auto'}>
+			data-width={props.width ?? 'auto'}
+			onInput={(event: any) => state.handleChange(event)}>
 			<Show when={state.showScrollLeft}>
 				<DBButton
 					class="tabs-scroll-left"
 					variant="ghost"
 					icon="chevron_left"
+					type="button"
 					noText
 					onClick={() => state.scroll(true)}>
 					Scroll left
@@ -226,6 +246,7 @@ export default function DBTabs(props: DBTabsProps) {
 					class="tabs-scroll-right"
 					variant="ghost"
 					icon="chevron_right"
+					type="button"
 					noText
 					onClick={() => state.scroll()}>
 					Scroll right