fix(tabs): recalculate indicator styles on resize (#458)

Author: Brendonovich

packages/core/package.json

@@ -24,9 +24,7 @@
 	},
 	"license": "MIT",
 	"author": "jer3m01 <[email protected]>",
-	"contributors": [
-		"Fabien Marie-Louise <[email protected]>"
-	],
+	"contributors": ["Fabien Marie-Louise <[email protected]>"],
 	"sideEffects": false,
 	"type": "module",
 	"exports": {
@@ -47,18 +45,11 @@
 	"types": "dist/index.d.ts",
 	"typesVersions": {
 		"*": {
-			"*": [
-				"./dist/*/index.d.ts",
-				"./dist/index.d.ts"
-			]
+			"*": ["./dist/*/index.d.ts", "./dist/index.d.ts"]
 		}
 	},
 	"source": "src/index.tsx",
-	"files": [
-		"dist",
-		"src",
-		"NOTICE.txt"
-	],
+	"files": ["dist", "src", "NOTICE.txt"],
 	"scripts": {
 		"build": "pnpm build:cp && pnpm build:tsup",
 		"build:cp": "cp ../../NOTICE.txt .",
@@ -75,11 +66,12 @@
 		"@internationalized/number": "^3.2.1",
 		"@kobalte/utils": "^0.9.0",
 		"@solid-primitives/props": "^3.1.8",
+		"@solid-primitives/resize-observer": "^2.0.26",
 		"solid-presence": "^0.1.6",
 		"solid-prevent-scroll": "^0.1.4"
 	},
 	"devDependencies": {
-		"@kobalte/tests": "^0.6.0",
+		"@kobalte/tests": "workspace:*",
 		"esbuild-plugin-solid": "^0.5.0",
 		"tsup": "7.2.0"
 	},

packages/core/src/tabs/tabs-indicator.tsx

@@ -17,6 +17,7 @@ import {
 
 import type { Orientation } from "@kobalte/utils";
 import { combineStyle } from "@solid-primitives/props";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
 import { useLocale } from "../i18n";
 import {
 	type ElementOf,
@@ -114,12 +115,36 @@ export function TabsIndicator<T extends ValidComponent = "div">(
 		),
 	);
 
+	const [resizing, setResizing] = createSignal(false);
+
+	let timeout: NodeJS.Timeout | null = null;
+	let prevTarget: any = null;
+	createResizeObserver(context.selectedTab, (_, t) => {
+		if (prevTarget !== t) {
+			prevTarget = t;
+			return;
+		}
+
+		setResizing(true);
+
+		if (timeout) clearTimeout(timeout);
+
+		// gives the browser a chance to skip any animations that are disabled while resizing
+		timeout = setTimeout(() => {
+			timeout = null;
+			setResizing(false);
+		}, 1);
+
+		computeStyle();
+	});
+
 	return (
 		<Polymorphic<TabsIndicatorRenderProps>
 			as="div"
 			role="presentation"
 			style={combineStyle(style(), local.style)}
 			data-orientation={context.orientation()}
+			data-resizing={resizing()}
 			{...others}
 		/>
 	);