@dloizides/ui-nav 1.6.1 → 1.7.0

package/dist/index.mjs

@@ -1,7 +1,8 @@
-import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, Pressable, ScrollView, ActivityIndicator } from 'react-native';
+import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, Pressable, ActivityIndicator, ScrollView } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import React5, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { ModalDropdown } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
@@ -12,6 +13,7 @@ function isRouteActive(pathname, route) {
   return pathname === route || pathname.startsWith(`${route}/`);
 }
 var ACTIVE_BORDER_RADIUS = 4;
+var NAV_LINK_GAP = 4;
 var navStyles = StyleSheet.create({
   // --- Sidebar ---
   sidebarContainer: {
@@ -94,22 +96,26 @@ var navBarStyles = StyleSheet.create({
     justifyContent: "center"
   },
   toggleGlyph: { fontSize: 20, fontWeight: "700" },
-  // Expanded links live inside a horizontal ScrollView so the bar stays ONE ROW no matter how many
-  // items an app passes: they never wrap onto a second line — any overflow scrolls instead, with the
-  // brand (left) and right slot pinned. `linksScroll` is the ScrollView's own box (a shrinkable,
-  // growable flex child that may collapse to 0 and scroll); `links` is its non-wrapping content row.
-  linksScroll: {
+  // Expanded links live on ONE ROW that never wraps: it is a shrinkable/growable flex child that
+  // fills the space between the pinned brand (left) and right slot, and CLIPS overflow. A measure
+  // pass (priority+) then keeps only the leading items that fit inline and collapses the rest behind
+  // the "More ▾" overflow trigger — so no item is ever cut off; the surplus moves into a dropdown.
+  // `overflow:'hidden'` only masks the single unmeasured first frame before the fit resolves.
+  linksRow: {
     flexGrow: 1,
     flexShrink: 1,
-    minWidth: 0
-  },
-  links: {
+    minWidth: 0,
     flexDirection: "row",
     alignItems: "center",
     flexWrap: "nowrap",
-    columnGap: 4,
-    rowGap: 4
+    columnGap: NAV_LINK_GAP,
+    overflow: "hidden"
   },
+  // Each inline link + the overflow trigger sit in a natural-width cell that never shrinks, so their
+  // measured widths are their true content widths (what the priority+ fit computation reasons about).
+  linkCell: { flexShrink: 0 },
+  overflowTrigger: { columnGap: 4 },
+  overflowChevron: { fontSize: 12, fontWeight: "700" },
   // Collapsed (below breakpoint): links drop onto their own full-width line,
   // stacked vertically — mirrors the v1 `.gn-links` responsive behaviour.
   linksStacked: {
@@ -355,7 +361,9 @@ var NAV_TEST_IDS = {
   /** responsive hamburger toggle in the horizontal NavBar (shown below the breakpoint). */
   navBarToggle: "navbar-toggle",
   /** links container in the horizontal NavBar. */
-  navBarLinks: "navbar-links"
+  navBarLinks: "navbar-links",
+  /** the "More ▾" priority+ overflow trigger in the horizontal NavBar (shown when items spill). */
+  navBarOverflow: "navbar-overflow"
 };
 var APP_SHELL_SUFFIX = {
   content: "-content",
@@ -570,6 +578,108 @@ var NavBarLink = ({
     }
   );
 };
+var TEXT_ON_PRIMARY3 = "#ffffff";
+var NO_ACTIVE_ROUTE = "";
+var NavOverflowMenu = ({
+  items,
+  pathname,
+  onNavigate,
+  colors,
+  label,
+  hint,
+  testID,
+  variant
+}) => {
+  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,
+    [items, pathname]
+  );
+  const optionTestID = useMemo(() => {
+    const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
+    return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
+  }, [items, testID]);
+  const hasActive = activeRoute !== NO_ACTIVE_ROUTE;
+  const textColor = hasActive ? TEXT_ON_PRIMARY3 : colors.rest;
+  const pillStyle = hasActive ? { backgroundColor: colors.activeBg } : void 0;
+  return /* @__PURE__ */ jsx(
+    ModalDropdown,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      optionTestID,
+      options,
+      testID,
+      value: activeRoute,
+      variant,
+      onChange: onNavigate,
+      renderTrigger: ({ isOpen }) => /* @__PURE__ */ jsxs(View, { style: [navBarStyles.link, navBarStyles.overflowTrigger, pillStyle], children: [
+        /* @__PURE__ */ jsx(Text, { style: [navBarStyles.linkText, { color: textColor }], children: label }),
+        /* @__PURE__ */ jsx(Text, { style: [navBarStyles.overflowChevron, { color: textColor }], children: isOpen ? "\u25B4" : "\u25BE" })
+      ] })
+    }
+  );
+};
+
+// src/computeVisibleCount.ts
+function sum(values) {
+  return values.reduce((acc, value) => acc + value, 0);
+}
+function computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }) {
+  const total = itemWidths.length;
+  if (total === 0) return 0;
+  if (availableWidth <= 0 || itemWidths.some((width) => width <= 0)) return total;
+  const fullRowWidth = sum(itemWidths) + gap * (total - 1);
+  if (fullRowWidth <= availableWidth) return total;
+  const reservedForMore = moreWidth + gap;
+  let used = 0;
+  let count = 0;
+  for (let index = 0; index < total; index += 1) {
+    const width = itemWidths[index] ?? 0;
+    const withGap = used + (count > 0 ? gap : 0) + width;
+    if (withGap + reservedForMore > availableWidth) break;
+    used = withGap;
+    count += 1;
+  }
+  return count;
+}
+
+// src/useNavOverflow.ts
+function resizeWidthBuffer(previous, count) {
+  const next = new Array(count).fill(0);
+  const shared = Math.min(previous.length, count);
+  for (let index = 0; index < shared; index += 1) next[index] = previous[index] ?? 0;
+  return next;
+}
+function useNavOverflow(itemCount, gap) {
+  const [availableWidth, setAvailableWidthState] = useState(0);
+  const [moreWidth, setMoreWidthState] = useState(0);
+  const [itemWidths, setItemWidths] = useState(() => new Array(itemCount).fill(0));
+  useEffect(() => {
+    setItemWidths((previous) => previous.length === itemCount ? previous : resizeWidthBuffer(previous, itemCount));
+  }, [itemCount]);
+  const setItemWidth = useCallback((index, width) => {
+    setItemWidths((previous) => {
+      if (index < 0 || index >= previous.length || previous[index] === width) return previous;
+      const next = previous.slice();
+      next[index] = width;
+      return next;
+    });
+  }, []);
+  const setAvailableWidth = useCallback(
+    (width) => setAvailableWidthState((previous) => previous === width ? previous : width),
+    []
+  );
+  const setMoreWidth = useCallback(
+    (width) => setMoreWidthState((previous) => previous === width ? previous : width),
+    []
+  );
+  const visibleCount = useMemo(
+    () => computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }),
+    [availableWidth, itemWidths, moreWidth, gap]
+  );
+  return { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth };
+}
 var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 function getReducedMotionQuery() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
@@ -606,6 +716,8 @@ var NavBar = ({
   menuHint = "",
   renderMenuIcon,
   collapseBelow = DEFAULT_COLLAPSE_BELOW,
+  overflowLabel = "More",
+  overflowHint = "",
   containerStyle
 }) => {
   const { theme } = useUi();
@@ -615,6 +727,7 @@ var NavBar = ({
   const reducedMotion = useReducedMotion();
   const [open, setOpen] = useState(false);
   const [toggleFocused, setToggleFocused] = useState(false);
+  const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
   const toggleMenu = useCallback(() => setOpen((v) => !v), []);
@@ -666,7 +779,7 @@ var NavBar = ({
           }
         ) : null,
         showLinks ? (() => {
-          const links = items.map((item) => /* @__PURE__ */ jsx(
+          const renderLink = (item) => /* @__PURE__ */ jsx(
             NavBarLink,
             {
               collapsed,
@@ -677,19 +790,50 @@ var NavBar = ({
               navigateHint,
               reducedMotion,
               onPress: handlePress
-            },
-            item.key
-          ));
-          return collapsed ? /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: links }) : /* @__PURE__ */ jsx(
-            ScrollView,
+            }
+          );
+          if (collapsed) {
+            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React5.Fragment, { children: renderLink(item) }, item.key)) });
+          }
+          const visibleItems = items.slice(0, visibleCount);
+          const overflowItems = items.slice(visibleCount);
+          return /* @__PURE__ */ jsxs(
+            View,
             {
-              horizontal: true,
-              showsHorizontalScrollIndicator: false,
               nativeID: LINKS_REGION_ID,
-              style: navBarStyles.linksScroll,
-              contentContainerStyle: navBarStyles.links,
+              style: navBarStyles.linksRow,
               testID: NAV_TEST_IDS.navBarLinks,
-              children: links
+              onLayout: (event) => setAvailableWidth(event.nativeEvent.layout.width),
+              children: [
+                visibleItems.map((item, index) => /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: navBarStyles.linkCell,
+                    onLayout: (event) => setItemWidth(index, event.nativeEvent.layout.width),
+                    children: renderLink(item)
+                  },
+                  item.key
+                )),
+                overflowItems.length > 0 ? /* @__PURE__ */ jsx(
+                  View,
+                  {
+                    style: navBarStyles.linkCell,
+                    onLayout: (event) => setMoreWidth(event.nativeEvent.layout.width),
+                    children: /* @__PURE__ */ jsx(
+                      NavOverflowMenu,
+                      {
+                        colors: linkColors,
+                        hint: overflowHint,
+                        items: overflowItems,
+                        label: overflowLabel,
+                        pathname,
+                        testID: NAV_TEST_IDS.navBarOverflow,
+                        onNavigate: handlePress
+                      }
+                    )
+                  }
+                ) : null
+              ]
             }
           );
         })() : null,
@@ -698,6 +842,12 @@ var NavBar = ({
     }
   );
 };
+var Nav = (props) => {
+  if (props.orientation === "vertical") {
+    return /* @__PURE__ */ jsx(Sidebar, { ...props });
+  }
+  return /* @__PURE__ */ jsx(NavBar, { ...props });
+};
 var MOBILE_BREAKPOINT = 768;
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
@@ -935,6 +1085,6 @@ function accessibleNavItems(user, table, translate) {
   return roleRoutesToNavItems(resolveAccessibleRoutes(user, table), translate);
 }
 
-export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NAV_TEST_IDS, NavBar, NavExpandableItem, Sidebar, Topbar, accessibleNavItems, expandableStyles, isRouteActive, navStyles, resolveContentMaxWidth, roleRoutesToNavItems, useContentMaxWidth };
+export { ACTIVE_BORDER_RADIUS, APP_SHELL_SUFFIX, AppShell, BASE_INDENT, CHEVRON_ICON_SIZE, NAV_ICON_SIZE, NAV_LINK_GAP, NAV_TEST_IDS, Nav, NavBar, NavExpandableItem, NavOverflowMenu, Sidebar, Topbar, accessibleNavItems, expandableStyles, isRouteActive, navStyles, resolveContentMaxWidth, roleRoutesToNavItems, useContentMaxWidth };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map