@dloizides/ui-nav 1.17.0 → 1.19.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # Changelog
 
+## 1.19.0
+
+**The "More ▾" overflow menu now opens at a readable width instead of cramping onto the trigger's tiny footprint.**
+
+`NavOverflowMenu` rendered the shared `@dloizides/ui-layout` `ModalDropdown` without a `menuMinWidth`,
+so the popover matched the width of the compact "More ▾" pill (~its own label). Option labels
+("Settings", "API docs") wrapped onto two lines, and the resulting tall rows overflowed the menu's
+max-height — so the lower items scrolled out of view and read as missing.
+
+- **`NavOverflowMenu`** now passes a 200px `menuMinWidth` floor, so the overflow menu opens wide
+  enough to show each label on one line. `ModalDropdown`/`InlineMenu` clamp a floored menu inside the
+  viewport (ui-layout ≥ 1.24.0, now the peer floor), so the extra width never pushes it off the right
+  edge. No public API changed.
+
+## 1.18.0
+
+Root-cause fix for sidebar leaf co-activation. Behavioral/additive — no breaking API.
+
+- **Fix (two sidebar leaves showed `aria-current="page"` at once).** On the live finreg
+  `/accounting/journals`, BOTH "Chart of Accounts" (route `/accounting`) and "Journals"
+  (route `/accounting/journals`) were marked active, because the active predicate was purely
+  prefix-based (`pathname === route || pathname.startsWith(route + '/')`) — a module-home leaf
+  routed at `/accounting` is a prefix of every `/accounting/*` sibling, so it co-activated on all
+  of them. (Second occurrence of this class; the first, CRM Contacts at `/crm`, was worked around
+  by moving the route.) Now resolution is **most-specific (longest) match wins**: among a nav
+  model's LEAF items, at most ONE is active for any path — the leaf whose route is the longest
+  prefix match. On `/accounting/journals` only Journals is active; on `/accounting` exactly only
+  Chart of Accounts is. For nav models with no parent/child route overlap (the common case)
+  behaviour is unchanged.
+  - **New export** `resolveActiveRoute(items, pathname)`: flattens the tree to its leaf routes and
+    returns the single longest matching route (honouring per-leaf `exact`), or `undefined`.
+  - `Sidebar` resolves the winning route once over the full leaf set and passes `activeRoute` to
+    each row; `NavExpandableItem` marks a leaf active iff `item.route === activeRoute` (falls back
+    to the per-item predicate when used standalone — backward compatible). Group HEADER expansion
+    (`hasActiveDescendant`) is a separate concern and is unchanged.
+  - The same winner-based resolution now backs `NavBar`, `PillNav`, `CollapsedRail` and
+    `NavOverflowMenu`, so the latent prefix co-activation cannot resurface in the horizontal navs.
+  - **Additive API**: new optional `NavItem.exact?: boolean` — a leaf active ONLY on its exact
+    path (never a nested one). A complementary escape hatch; the longest-match default is the real
+    fix, so no consumer needs to set it.
+  - `isRouteActive(pathname, route, exact?)` gains an optional third arg; the two-arg call is
+    unchanged.
+
 ## 1.17.0
 
 Two live-defect fixes to the shared sidebar chrome. Behavioral/additive — no breaking API.

package/dist/index.d.mts

@@ -5,12 +5,71 @@ import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
 
 /**
- * Active-route matcher shared by the sidebar entries. Ported verbatim from the
- * twin app sidebars: an item is active when the current pathname equals its
- * route or is nested under it (`/foo` matches `/foo` and `/foo/bar`, but `/`
- * only matches `/`).
+ * Public prop types for the `@dloizides/ui-nav` config-driven navigation shell.
+ *
+ * The rendering chrome (sidebar + topbar) was byte-identical across erevna-web
+ * and katalogos-web; only the *item data* (which routes, how they group) differs
+ * per app. So this package renders a caller-supplied `NavItem[]` — labels are
+ * pre-localized strings and icons are render slots, keeping the package free of
+ * any app's i18n helper, icon set, router, or store.
  */
-declare function isRouteActive(pathname: string, route: string): boolean;
+
+/** One navigation entry. Labels are already localized by the caller. */
+interface NavItem {
+    /** Stable key + default testID. */
+    key: string;
+    /** Localized display label. */
+    label: string;
+    /** Route/path this item navigates to (passed back to `onNavigate`). */
+    route: string;
+    /** Optional testID override (defaults to `key`). */
+    testID?: string;
+    /**
+     * Optional leading icon. Receives the resolved foreground colour and a size,
+     * so the app supplies its own icon component without this package importing
+     * an icon set.
+     */
+    renderIcon?: (color: string, size: number) => React.ReactNode;
+    /** Optional nested items — rendered as an expandable section. */
+    children?: NavItem[];
+    /**
+     * Opt this leaf out of prefix matching: when `true` it is active ONLY when the
+     * pathname equals its route exactly (never for a nested `route/child` path). A
+     * complementary escape hatch — the default most-specific/longest-match resolution
+     * (see `resolveActiveRoute`) already prevents a module-home leaf like `/accounting`
+     * from co-activating with `/accounting/journals`, so most consumers never need
+     * this. Reach for it only when a leaf must NEVER light up on any descendant path
+     * even when no longer sibling route exists.
+     */
+    exact?: boolean;
+}
+
+/**
+ * Active-route matching for the nav shells.
+ *
+ * `isRouteActive` is the low-level per-route predicate (prefix-based, ported
+ * verbatim from the twin app sidebars): a route is active when the current
+ * pathname equals it or is nested under it (`/foo` matches `/foo` and `/foo/bar`,
+ * but `/` only matches `/`). With `exact`, only an exact path matches.
+ *
+ * `resolveActiveRoute` is the CROSS-ITEM resolver that fixes the sidebar
+ * co-activation bug: because a module-home leaf (`/accounting`) is a prefix of
+ * every sibling (`/accounting/journals`), the naive per-item predicate lights up
+ * BOTH on `/accounting/journals`. `resolveActiveRoute` instead returns the ONE
+ * most-specific (longest) leaf route that matches — so at most one leaf is ever
+ * active, the longest wins on nested paths, and the module-home leaf is active
+ * only on its own exact path. For a nav model with no parent/child route overlap
+ * (the common case) this is identical to the old behaviour.
+ */
+
+declare function isRouteActive(pathname: string, route: string, exact?: boolean): boolean;
+/**
+ * The single active leaf route for `pathname`: the LONGEST leaf route that
+ * matches (most-specific wins). Returns `undefined` when no leaf matches. Marking
+ * a leaf active iff `item.route === resolveActiveRoute(items, pathname)` guarantees
+ * at most one active leaf — the whack-a-mole prefix co-activation fix.
+ */
+declare function resolveActiveRoute(items: NavItem[], pathname: string): string | undefined;
 
 /**
  * SidebarSearch — the persistent, DESKTOP inline search field that lives at the
@@ -51,36 +110,6 @@ interface SidebarSearchProps {
 /** The inline sidebar search field (desktop) with a clear button. */
 declare const SidebarSearch: ({ value, onChangeText, onClear, labels, testID, }: SidebarSearchProps) => React.ReactElement;
 
-/**
- * Public prop types for the `@dloizides/ui-nav` config-driven navigation shell.
- *
- * The rendering chrome (sidebar + topbar) was byte-identical across erevna-web
- * and katalogos-web; only the *item data* (which routes, how they group) differs
- * per app. So this package renders a caller-supplied `NavItem[]` — labels are
- * pre-localized strings and icons are render slots, keeping the package free of
- * any app's i18n helper, icon set, router, or store.
- */
-
-/** One navigation entry. Labels are already localized by the caller. */
-interface NavItem {
-    /** Stable key + default testID. */
-    key: string;
-    /** Localized display label. */
-    label: string;
-    /** Route/path this item navigates to (passed back to `onNavigate`). */
-    route: string;
-    /** Optional testID override (defaults to `key`). */
-    testID?: string;
-    /**
-     * Optional leading icon. Receives the resolved foreground colour and a size,
-     * so the app supplies its own icon component without this package importing
-     * an icon set.
-     */
-    renderIcon?: (color: string, size: number) => React.ReactNode;
-    /** Optional nested items — rendered as an expandable section. */
-    children?: NavItem[];
-}
-
 /**
  * Sidebar — the config-driven left navigation shell promoted from the
  * byte-identical erevna-web / katalogos-web `Sidebar`. It renders a caller
@@ -1080,6 +1109,15 @@ interface NavExpandableItemProps {
     item: NavItem;
     pathname: string;
     onNavigate: (route: string) => void;
+    /**
+     * The single winning active leaf route for the whole nav model, resolved once by
+     * the parent via `resolveActiveRoute` (most-specific/longest match wins). A leaf
+     * is active iff `item.route === activeRoute`, so at most one leaf ever carries
+     * `aria-current="page"` — the fix for `/accounting` co-activating with
+     * `/accounting/journals`. When omitted (standalone use) each leaf falls back to
+     * the per-item prefix predicate, preserving the pre-1.18 behaviour.
+     */
+    activeRoute?: string;
     /** a11y hint for a leaf item, given its label. */
     navigateHint: (label: string) => string;
     /** a11y hint shown when the section is collapsed (press expands). */
@@ -1094,7 +1132,7 @@ interface NavExpandableItemProps {
     renderChevron?: (expanded: boolean, color: string, size: number) => React.ReactNode;
     depth?: number;
 }
-declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, depth, }: NavExpandableItemProps) => React.ReactElement;
+declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, activeRoute, depth, }: NavExpandableItemProps) => React.ReactElement;
 
 /**
  * Pure matching logic for the {@link CommandPalette}. Kept framework-free so the
@@ -1489,4 +1527,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.d.ts

@@ -5,12 +5,71 @@ import { DropdownVariant } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes, RoleRouteTable, RoleRoute } from '@dloizides/auth-web';
 
 /**
- * Active-route matcher shared by the sidebar entries. Ported verbatim from the
- * twin app sidebars: an item is active when the current pathname equals its
- * route or is nested under it (`/foo` matches `/foo` and `/foo/bar`, but `/`
- * only matches `/`).
+ * Public prop types for the `@dloizides/ui-nav` config-driven navigation shell.
+ *
+ * The rendering chrome (sidebar + topbar) was byte-identical across erevna-web
+ * and katalogos-web; only the *item data* (which routes, how they group) differs
+ * per app. So this package renders a caller-supplied `NavItem[]` — labels are
+ * pre-localized strings and icons are render slots, keeping the package free of
+ * any app's i18n helper, icon set, router, or store.
  */
-declare function isRouteActive(pathname: string, route: string): boolean;
+
+/** One navigation entry. Labels are already localized by the caller. */
+interface NavItem {
+    /** Stable key + default testID. */
+    key: string;
+    /** Localized display label. */
+    label: string;
+    /** Route/path this item navigates to (passed back to `onNavigate`). */
+    route: string;
+    /** Optional testID override (defaults to `key`). */
+    testID?: string;
+    /**
+     * Optional leading icon. Receives the resolved foreground colour and a size,
+     * so the app supplies its own icon component without this package importing
+     * an icon set.
+     */
+    renderIcon?: (color: string, size: number) => React.ReactNode;
+    /** Optional nested items — rendered as an expandable section. */
+    children?: NavItem[];
+    /**
+     * Opt this leaf out of prefix matching: when `true` it is active ONLY when the
+     * pathname equals its route exactly (never for a nested `route/child` path). A
+     * complementary escape hatch — the default most-specific/longest-match resolution
+     * (see `resolveActiveRoute`) already prevents a module-home leaf like `/accounting`
+     * from co-activating with `/accounting/journals`, so most consumers never need
+     * this. Reach for it only when a leaf must NEVER light up on any descendant path
+     * even when no longer sibling route exists.
+     */
+    exact?: boolean;
+}
+
+/**
+ * Active-route matching for the nav shells.
+ *
+ * `isRouteActive` is the low-level per-route predicate (prefix-based, ported
+ * verbatim from the twin app sidebars): a route is active when the current
+ * pathname equals it or is nested under it (`/foo` matches `/foo` and `/foo/bar`,
+ * but `/` only matches `/`). With `exact`, only an exact path matches.
+ *
+ * `resolveActiveRoute` is the CROSS-ITEM resolver that fixes the sidebar
+ * co-activation bug: because a module-home leaf (`/accounting`) is a prefix of
+ * every sibling (`/accounting/journals`), the naive per-item predicate lights up
+ * BOTH on `/accounting/journals`. `resolveActiveRoute` instead returns the ONE
+ * most-specific (longest) leaf route that matches — so at most one leaf is ever
+ * active, the longest wins on nested paths, and the module-home leaf is active
+ * only on its own exact path. For a nav model with no parent/child route overlap
+ * (the common case) this is identical to the old behaviour.
+ */
+
+declare function isRouteActive(pathname: string, route: string, exact?: boolean): boolean;
+/**
+ * The single active leaf route for `pathname`: the LONGEST leaf route that
+ * matches (most-specific wins). Returns `undefined` when no leaf matches. Marking
+ * a leaf active iff `item.route === resolveActiveRoute(items, pathname)` guarantees
+ * at most one active leaf — the whack-a-mole prefix co-activation fix.
+ */
+declare function resolveActiveRoute(items: NavItem[], pathname: string): string | undefined;
 
 /**
  * SidebarSearch — the persistent, DESKTOP inline search field that lives at the
@@ -51,36 +110,6 @@ interface SidebarSearchProps {
 /** The inline sidebar search field (desktop) with a clear button. */
 declare const SidebarSearch: ({ value, onChangeText, onClear, labels, testID, }: SidebarSearchProps) => React.ReactElement;
 
-/**
- * Public prop types for the `@dloizides/ui-nav` config-driven navigation shell.
- *
- * The rendering chrome (sidebar + topbar) was byte-identical across erevna-web
- * and katalogos-web; only the *item data* (which routes, how they group) differs
- * per app. So this package renders a caller-supplied `NavItem[]` — labels are
- * pre-localized strings and icons are render slots, keeping the package free of
- * any app's i18n helper, icon set, router, or store.
- */
-
-/** One navigation entry. Labels are already localized by the caller. */
-interface NavItem {
-    /** Stable key + default testID. */
-    key: string;
-    /** Localized display label. */
-    label: string;
-    /** Route/path this item navigates to (passed back to `onNavigate`). */
-    route: string;
-    /** Optional testID override (defaults to `key`). */
-    testID?: string;
-    /**
-     * Optional leading icon. Receives the resolved foreground colour and a size,
-     * so the app supplies its own icon component without this package importing
-     * an icon set.
-     */
-    renderIcon?: (color: string, size: number) => React.ReactNode;
-    /** Optional nested items — rendered as an expandable section. */
-    children?: NavItem[];
-}
-
 /**
  * Sidebar — the config-driven left navigation shell promoted from the
  * byte-identical erevna-web / katalogos-web `Sidebar`. It renders a caller
@@ -1080,6 +1109,15 @@ interface NavExpandableItemProps {
     item: NavItem;
     pathname: string;
     onNavigate: (route: string) => void;
+    /**
+     * The single winning active leaf route for the whole nav model, resolved once by
+     * the parent via `resolveActiveRoute` (most-specific/longest match wins). A leaf
+     * is active iff `item.route === activeRoute`, so at most one leaf ever carries
+     * `aria-current="page"` — the fix for `/accounting` co-activating with
+     * `/accounting/journals`. When omitted (standalone use) each leaf falls back to
+     * the per-item prefix predicate, preserving the pre-1.18 behaviour.
+     */
+    activeRoute?: string;
     /** a11y hint for a leaf item, given its label. */
     navigateHint: (label: string) => string;
     /** a11y hint shown when the section is collapsed (press expands). */
@@ -1094,7 +1132,7 @@ interface NavExpandableItemProps {
     renderChevron?: (expanded: boolean, color: string, size: number) => React.ReactNode;
     depth?: number;
 }
-declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, depth, }: NavExpandableItemProps) => React.ReactElement;
+declare const NavExpandableItem: ({ item, pathname, onNavigate, navigateHint, expandHint, collapseHint, renderChevron, activeRoute, depth, }: NavExpandableItemProps) => React.ReactElement;
 
 /**
  * Pure matching logic for the {@link CommandPalette}. Kept framework-free so the
@@ -1489,4 +1527,4 @@ declare const NAV_ICON_SIZE = 14;
 /** Chevron icon size for expandable sections. */
 declare const CHEVRON_ICON_SIZE = 12;
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, type AccountPlan, type AccountState, AppShell, type AppShellProps, type AppShellWidth, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, type CollapsedRailProps, type CollapsedRailRange, type CommandItem, CommandPalette, type CommandPaletteLabels, type CommandPaletteProps, CommandPaletteTrigger, type CommandPaletteTriggerProps, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, type DarkModeControlProps, type DarkModeOption, type DarkModeVariant, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, type NavBarProps, NavExpandableItem, type NavExpandableItemProps, type NavItem, type NavOrientation, NavOverflowMenu, type NavOverflowMenuProps, type NavProps, NavShell, type NavShellCollapsedRail, type NavShellLayout, type NavShellProps, type NavShellSideRail, type NavShellTopBar, type NavUser, PillNav, type PillNavProps, RAIL_FULL_BREAKPOINT, type RailMode, type ResolveRailModeArgs, type SearchAffordance, type ShellMessage, Sidebar, SidebarChevron, type SidebarChevronProps, type SidebarPaletteTriggerConfig, type SidebarProps, SidebarSearch, type SidebarSearchConfig, type SidebarSearchLabels, type SidebarSearchProps, Topbar, type TopbarAction, type TopbarProps, type TopbarUser, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };

package/dist/index.js

@@ -128,10 +128,31 @@ function isFilterActive(query) {
 }
 
 // src/isRouteActive.ts
-function isRouteActive(pathname, route) {
+function isRouteActive(pathname, route, exact = false) {
+  if (exact) return pathname === route;
   if (route === "/") return pathname === "/";
   return pathname === route || pathname.startsWith(`${route}/`);
 }
+function leafRoutes(items) {
+  return items.flatMap((item) => {
+    const children = item.children ?? [];
+    const isGroup = children.length > 0;
+    return isGroup ? leafRoutes(children) : [{ route: item.route, exact: item.exact === true }];
+  });
+}
+function resolveActiveRoute(items, pathname) {
+  let winner;
+  let winnerLength = -1;
+  for (const leaf of leafRoutes(items)) {
+    const matches = isRouteActive(pathname, leaf.route, leaf.exact);
+    const isLonger = leaf.route.length > winnerLength;
+    if (matches && isLonger) {
+      winner = leaf.route;
+      winnerLength = leaf.route.length;
+    }
+  }
+  return winner;
+}
 var ACTIVE_BORDER_RADIUS = 4;
 var ACTIVE_ACCENT_WIDTH = 3;
 var NAV_ROW_RADIUS = 8;
@@ -509,6 +530,7 @@ var NavExpandableItem = ({
   expandHint,
   collapseHint,
   renderChevron,
+  activeRoute,
   depth = 0
 }) => {
   const [expanded, setExpanded] = React.useState(() => hasActiveDescendant(item, pathname));
@@ -522,7 +544,7 @@ var NavExpandableItem = ({
   const onHoverOut = React.useCallback(() => setHovered(false), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
-  const isActive = isRouteActive(pathname, item.route);
+  const isActive = activeRoute !== void 0 ? item.route === activeRoute : isRouteActive(pathname, item.route, item.exact === true);
   const isSectionHeader = hasChildren && depth === 0;
   const activeAccentStyle = React.useMemo(
     () => ({ borderLeftWidth: ACTIVE_ACCENT_WIDTH, borderLeftColor: primaryColor }),
@@ -610,6 +632,7 @@ var NavExpandableItem = ({
     /* @__PURE__ */ jsxRuntime.jsx(uiMotion.Collapse, { open: expanded, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
       NavExpandableItem,
       {
+        activeRoute,
         collapseHint,
         depth: depth + 1,
         expandHint,
@@ -760,6 +783,7 @@ var Sidebar = ({
   const showPaletteTrigger = paletteTrigger !== void 0 && !isInlineAffordance;
   const visibleItems = showInlineSearch ? filterNavItems(items, query) : items;
   const showEmpty = showInlineSearch && isFilterActive(query) && visibleItems.length === 0;
+  const activeRoute = resolveActiveRoute(items, pathname);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -797,6 +821,7 @@ var Sidebar = ({
         showEmpty && search !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           NavExpandableItem,
           {
+            activeRoute,
             collapseHint,
             expandHint,
             item,
@@ -1049,6 +1074,7 @@ var NavBarLink = ({
 };
 var TEXT_ON_PRIMARY3 = "#ffffff";
 var NO_ACTIVE_ROUTE = "";
+var OVERFLOW_MENU_MIN_WIDTH = 200;
 var NavOverflowMenu = ({
   items,
   pathname,
@@ -1061,7 +1087,7 @@ var NavOverflowMenu = ({
 }) => {
   const options = React.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
   const activeRoute = React.useMemo(
-    () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
+    () => resolveActiveRoute(items, pathname) ?? NO_ACTIVE_ROUTE,
     [items, pathname]
   );
   const optionTestID = React.useMemo(() => {
@@ -1076,6 +1102,7 @@ var NavOverflowMenu = ({
     {
       accessibilityHint: hint,
       accessibilityLabel: label,
+      menuMinWidth: OVERFLOW_MENU_MIN_WIDTH,
       optionTestID,
       options,
       testID,
@@ -1194,6 +1221,7 @@ var NavBarInner = ({
     },
     [onNavigate]
   );
+  const activeRoute = resolveActiveRoute(items, pathname);
   const linkColors = React.useMemo(
     () => ({
       rest: colors.textSecondary,
@@ -1241,7 +1269,7 @@ var NavBarInner = ({
               collapsed,
               colors: linkColors,
               iconSize: NAV_ICON_SIZE,
-              isActive: isRouteActive(pathname, item.route),
+              isActive: item.route === activeRoute,
               item,
               navigateHint,
               reducedMotion,
@@ -1603,6 +1631,7 @@ var CollapsedRail = ({
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
+  const activeRoute = resolveActiveRoute(items, pathname);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
@@ -1617,7 +1646,7 @@ var CollapsedRail = ({
       children: [
         header !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: renderTextSlot(header, { color: colors.text }) }) : null,
         items.map((item) => {
-          const active = isRouteActive(pathname, item.route);
+          const active = item.route === activeRoute;
           const iconColor = active ? primaryColor : colors.textSecondary;
           return /* @__PURE__ */ jsxRuntime.jsx(
             FocusableTouchable,
@@ -1745,6 +1774,7 @@ var PillNav = ({
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
   if (items.length < minItems) return null;
+  const activeRoute = resolveActiveRoute(items, pathname);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.View,
     {
@@ -1753,7 +1783,7 @@ var PillNav = ({
       role: "navigation",
       style: [pillNavStyles.container, containerStyle],
       children: items.map((item) => {
-        const active = isRouteActive(pathname, item.route);
+        const active = item.route === activeRoute;
         const textColor = active ? TEXT_ON_PRIMARY4 : colors.textSecondary;
         const pillStyle = active ? { backgroundColor: primaryColor } : { backgroundColor: colors.surfaceElevated };
         return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2049,6 +2079,7 @@ exports.isFilterActive = isFilterActive;
 exports.isRouteActive = isRouteActive;
 exports.navStyles = navStyles;
 exports.pillNavStyles = pillNavStyles;
+exports.resolveActiveRoute = resolveActiveRoute;
 exports.resolveContentMaxWidth = resolveContentMaxWidth;
 exports.resolveRailMode = resolveRailMode;
 exports.resolveSearchAffordance = resolveSearchAffordance;