NEXT: Navigation - manual selection handling (#3228)

skeletonlabs · Feb 19, 2025 · 531b3e5 · 531b3e5
1 parent 1ad0db3
commit 531b3e5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/calm-crabs-lay.md b/.changeset/calm-crabs-lay.md
@@ -0,0 +1,6 @@
+---
+'@skeletonlabs/skeleton-svelte': minor
+'@skeletonlabs/skeleton-react': minor
+---
+
+feat: Navigation - manually handle `selected` state of NavTile
diff --git a/packages/skeleton-react/src/lib/components/Navigation/Navigation.tsx b/packages/skeleton-react/src/lib/components/Navigation/Navigation.tsx
@@ -156,7 +156,7 @@ export const NavTile: React.FC<NavTileProps> = ({
 	label,
 	labelExpanded,
 	title,
-	selected = false,
+	selected = undefined,
 	type = 'button',
 	// Root
 	base = 'flex items-center',
@@ -201,7 +201,8 @@ export const NavTile: React.FC<NavTileProps> = ({
 	const classesCollapsed = `${rxSize} ${padding} ${gap} ${classes}`;
 	const classesExtended = `${expandedPadding} ${expandedGap} ${expandedClasses}`;
 	const rxMode = ctx.expanded ? classesExtended : classesCollapsed;
-	const rxBackground = selected || ctx.value === id ? active : `${background} ${hover}`;
+	const isActive = selected !== undefined ? selected : ctx.value === id;
+	const rxBackground = isActive ? active : `${background} ${hover}`;
 
 	function onClickHandler() {
 		if (onClick && !id) throw new Error('No ID was provided');

diff --git a/packages/skeleton-svelte/src/lib/components/Navigation/NavTile.svelte b/packages/skeleton-svelte/src/lib/components/Navigation/NavTile.svelte
@@ -10,7 +10,7 @@
 		label,
 		labelExpanded,
 		title,
-		selected = false,
+		selected = undefined,
 		type = 'button',
 		// Root
 		base = 'flex items-center',
@@ -49,7 +49,8 @@
 	const classesCollapsed = $derived(`${rxSize} ${padding} ${gap} ${classes}`);
 	const classesExtended = $derived(`${expandedPadding} ${expandedGap} ${expandedClasses}`);
 	const rxMode = $derived(ctx.expanded ? classesExtended : classesCollapsed);
-	const rxBackground = $derived(selected || ctx.value === id ? active : `${background} ${hover}`);
+	const isActive = $derived(selected !== undefined ? selected : ctx.value === id)
+	const rxBackground = $derived(isActive ? active : `${background} ${hover}`);
 
 	function onClickHandler() {
 		if (onclick && !id) throw new Error('No ID was provided');