@krak-stack/registry 0.1.45 → 0.1.46

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @krak-stack/registry
 
+## 0.1.46
+
+### Patch Changes
+
+- Highlight sidebar sections on nested routes using TanStack Router's built-in link matching. Add an exact option for overview and index links that should only highlight their own page. Ignore search parameters when determining active links.
+
 ## 0.1.45
 
 ### Patch Changes

package/dist/components/ui/sidebar-layout.d.ts

@@ -2,6 +2,8 @@ import type { LucideIcon } from "lucide-react";
 type NavItem = {
     label: () => string;
     href: string;
+    /** Match only this page instead of also highlighting its nested routes. */
+    exact?: boolean;
     icon?: LucideIcon;
     badge?: () => string;
     external?: boolean;

package/dist/components/ui/sidebar-layout.js

@@ -1,5 +1,5 @@
 // ../../src/components/ui/sidebar-layout.tsx
-import { Link, Outlet, useRouterState } from "@tanstack/react-router";
+import { Link, Outlet } from "@tanstack/react-router";
 import { Option, Schema as Schema2 } from "effect";
 import { Cookies } from "effect/http";
 import { useState as useState3 } from "react";
@@ -607,9 +607,6 @@ var useSidebarLayout = () => {
 };
 function AppSidebar({ collapsible, footer, groups, header }) {
   const { isMobile, setOpenMobile } = useSidebar();
-  const pathname = useRouterState({
-    select: (state) => state.location.pathname
-  });
   const closeMobileSidebar = () => {
     if (isMobile)
       setOpenMobile(false);
@@ -635,11 +632,15 @@ function AppSidebar({ collapsible, footer, groups, header }) {
                     target: "_blank",
                     rel: "noreferrer"
                   }) : /* @__PURE__ */ jsx5(Link, {
-                    to: item.href
+                    to: item.href,
+                    activeOptions: {
+                      exact: item.exact ?? false,
+                      includeSearch: false
+                    },
+                    activeProps: { "data-active": "" }
                   });
                   return /* @__PURE__ */ jsx5(SidebarMenuItem, {
                     children: /* @__PURE__ */ jsxs4(SidebarMenuButton, {
-                      isActive: !item.external && pathname === item.href,
                       onClick: closeMobileSidebar,
                       render,
                       tooltip: item.label(),

package/dist/lib/docs.js

@@ -799,7 +799,7 @@ function SearchMenu({
 }
 
 // ../../src/components/ui/sidebar-layout.tsx
-import { Link as Link2, Outlet, useRouterState } from "@tanstack/react-router";
+import { Link as Link2, Outlet } from "@tanstack/react-router";
 import { Option, Schema as Schema2 } from "effect";
 import { Cookies } from "effect/http";
 import { useState as useState5 } from "react";
@@ -1317,9 +1317,6 @@ var getSidebarDefaultOpen = (defaultOpen) => {
 };
 function AppSidebar({ collapsible, footer, groups, header }) {
   const { isMobile, setOpenMobile } = useSidebar();
-  const pathname = useRouterState({
-    select: (state) => state.location.pathname
-  });
   const closeMobileSidebar = () => {
     if (isMobile)
       setOpenMobile(false);
@@ -1345,11 +1342,15 @@ function AppSidebar({ collapsible, footer, groups, header }) {
                     target: "_blank",
                     rel: "noreferrer"
                   }) : /* @__PURE__ */ jsx13(Link2, {
-                    to: item.href
+                    to: item.href,
+                    activeOptions: {
+                      exact: item.exact ?? false,
+                      includeSearch: false
+                    },
+                    activeProps: { "data-active": "" }
                   });
                   return /* @__PURE__ */ jsx13(SidebarMenuItem, {
                     children: /* @__PURE__ */ jsxs10(SidebarMenuButton, {
-                      isActive: !item.external && pathname === item.href,
                       onClick: closeMobileSidebar,
                       render,
                       tooltip: item.label(),

package/dist/lib/docs.server.js

@@ -119,7 +119,7 @@ import { XIcon } from "lucide-react";
 import { useKrakstackLocale as useKrakstackLocale3 } from "@krak-stack/registry/krakstack-provider";
 
 // ../../src/components/ui/sidebar-layout.tsx
-import { Link as Link2, Outlet, useRouterState } from "@tanstack/react-router";
+import { Link as Link2, Outlet } from "@tanstack/react-router";
 import { Option, Schema as Schema2 } from "effect";
 import { Cookies } from "effect/http";
 import { useState as useState5 } from "react";

package/dist/lib/documentation-toolkit.js

@@ -119,7 +119,7 @@ import { XIcon } from "lucide-react";
 import { useKrakstackLocale as useKrakstackLocale3 } from "@krak-stack/registry/krakstack-provider";
 
 // ../../src/components/ui/sidebar-layout.tsx
-import { Link as Link2, Outlet, useRouterState } from "@tanstack/react-router";
+import { Link as Link2, Outlet } from "@tanstack/react-router";
 import { Option, Schema as Schema2 } from "effect";
 import { Cookies } from "effect/http";
 import { useState as useState5 } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krak-stack/registry",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "description": "Tree-shakable KrakStack components and Effect services.",
   "license": "MIT",
   "repository": {