@dloizides/ui-nav 1.17.0 → 1.19.0

package/dist/index.mjs

@@ -122,10 +122,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;
@@ -503,6 +524,7 @@ var NavExpandableItem = ({
   expandHint,
   collapseHint,
   renderChevron,
+  activeRoute,
   depth = 0
 }) => {
   const [expanded, setExpanded] = useState(() => hasActiveDescendant(item, pathname));
@@ -516,7 +538,7 @@ var NavExpandableItem = ({
   const onHoverOut = 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 = useMemo(
     () => ({ borderLeftWidth: ACTIVE_ACCENT_WIDTH, borderLeftColor: primaryColor }),
@@ -604,6 +626,7 @@ var NavExpandableItem = ({
     /* @__PURE__ */ jsx(Collapse, { open: expanded, children: /* @__PURE__ */ jsx(View, { style: expandableStyles.childrenContainer, children: item.children?.map((child) => /* @__PURE__ */ jsx(
       NavExpandableItem,
       {
+        activeRoute,
         collapseHint,
         depth: depth + 1,
         expandHint,
@@ -754,6 +777,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__ */ jsxs(
     View,
     {
@@ -791,6 +815,7 @@ var Sidebar = ({
         showEmpty && search !== void 0 ? /* @__PURE__ */ jsx(Text, { style: [navStyles.sidebarEmpty, { color: colors.textSecondary }], testID: "sidebar-search-empty", children: search.emptyText }) : visibleItems.map((item) => /* @__PURE__ */ jsx(
           NavExpandableItem,
           {
+            activeRoute,
             collapseHint,
             expandHint,
             item,
@@ -1043,6 +1068,7 @@ var NavBarLink = ({
 };
 var TEXT_ON_PRIMARY3 = "#ffffff";
 var NO_ACTIVE_ROUTE = "";
+var OVERFLOW_MENU_MIN_WIDTH = 200;
 var NavOverflowMenu = ({
   items,
   pathname,
@@ -1055,7 +1081,7 @@ var NavOverflowMenu = ({
 }) => {
   const options = useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
   const activeRoute = useMemo(
-    () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
+    () => resolveActiveRoute(items, pathname) ?? NO_ACTIVE_ROUTE,
     [items, pathname]
   );
   const optionTestID = useMemo(() => {
@@ -1070,6 +1096,7 @@ var NavOverflowMenu = ({
     {
       accessibilityHint: hint,
       accessibilityLabel: label,
+      menuMinWidth: OVERFLOW_MENU_MIN_WIDTH,
       optionTestID,
       options,
       testID,
@@ -1188,6 +1215,7 @@ var NavBarInner = ({
     },
     [onNavigate]
   );
+  const activeRoute = resolveActiveRoute(items, pathname);
   const linkColors = useMemo(
     () => ({
       rest: colors.textSecondary,
@@ -1235,7 +1263,7 @@ var NavBarInner = ({
               collapsed,
               colors: linkColors,
               iconSize: NAV_ICON_SIZE,
-              isActive: isRouteActive(pathname, item.route),
+              isActive: item.route === activeRoute,
               item,
               navigateHint,
               reducedMotion,
@@ -1597,6 +1625,7 @@ var CollapsedRail = ({
   const { theme } = useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
+  const activeRoute = resolveActiveRoute(items, pathname);
   return /* @__PURE__ */ jsxs(
     View,
     {
@@ -1611,7 +1640,7 @@ var CollapsedRail = ({
       children: [
         header !== void 0 ? /* @__PURE__ */ jsx(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__ */ jsx(
             FocusableTouchable,
@@ -1739,6 +1768,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__ */ jsx(
     View,
     {
@@ -1747,7 +1777,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__ */ jsxs(
@@ -2005,6 +2035,6 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
 }
 
-export { ACTIVE_BORDER_RADIUS, ACTIVE_TINT_OPACITY, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, Topbar, 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, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, CollapsedRail, CommandPalette, CommandPaletteTrigger, DEFAULT_COLLAPSED_RAIL_MAX, DEFAULT_SEARCH_BREAKPOINT, DarkModeControl, HOVER_TINT_OPACITY, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_ROW_RADIUS, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, NavShell, PillNav, RAIL_FULL_BREAKPOINT, Sidebar, SidebarChevron, SidebarSearch, Topbar, accessibleNavItems, collapsedRailStyles, darkModeStyles, expandableStyles, filterCommands, filterNavItems, isFilterActive, isRouteActive, navStyles, pillNavStyles, resolveActiveRoute, resolveContentMaxWidth, resolveRailMode, resolveSearchAffordance, roleRoutesToNavItems, searchTokens, useCommandPaletteHotkey, useContentMaxWidth };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map