@dloizides/ui-nav 1.21.0 → 1.23.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { Platform, StyleSheet, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator } from 'react-native';
+import { StyleSheet, Platform, Pressable, Text, View, TextInput, useWindowDimensions, ScrollView, ActivityIndicator } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse } from '@dloizides/ui-motion';
@@ -7,146 +7,7 @@ import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown } from '@dloizides/ui-layout'
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
-var IS_WEB = Platform.OS === "web";
-var FOCUS_RING_WIDTH = 2;
-var FOCUS_RING_OFFSET = 2;
-var HOVER_TRANSITION_MS = 150;
-var TINT_TRANSITION_MS = 160;
-function focusRingStyle(focused, ringColor) {
-  if (!IS_WEB || !focused) return void 0;
-  const ring = {
-    outlineWidth: FOCUS_RING_WIDTH,
-    outlineStyle: "solid",
-    outlineColor: ringColor,
-    outlineOffset: FOCUS_RING_OFFSET
-  };
-  return ring;
-}
-function webTransition(properties, durationMs, reducedMotion) {
-  if (!IS_WEB) return void 0;
-  const transition = {
-    transitionProperty: properties,
-    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
-  };
-  return transition;
-}
-function hoverTransitionStyle(reducedMotion) {
-  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
-}
-function tintTransitionStyle(reducedMotion) {
-  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
-}
-function rotateTransitionStyle(reducedMotion) {
-  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
-}
-var MIN_TARGET = 36;
-var styles = StyleSheet.create({
-  trigger: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    columnGap: 8,
-    paddingHorizontal: 12,
-    minHeight: MIN_TARGET,
-    borderWidth: 1,
-    borderRadius: 8
-  },
-  label: { fontSize: 14 },
-  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
-  badgeText: { fontSize: 11, fontWeight: "700" }
-});
-var CommandPaletteTrigger = ({
-  label,
-  hint,
-  shortcut,
-  onPress,
-  testID
-}) => {
-  const { theme } = useUi();
-  const colors = theme.colors;
-  const primary = theme.palette.primary["500"];
-  const [focused, setFocused] = React.useState(false);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityHint: hint,
-      accessibilityLabel: label,
-      accessibilityRole: "button",
-      style: [
-        styles.trigger,
-        { backgroundColor: colors.surface, borderColor: colors.border },
-        focusRingStyle(focused, primary)
-      ],
-      testID,
-      onBlur: () => setFocused(false),
-      onFocus: () => setFocused(true),
-      onPress,
-      children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label }),
-        /* @__PURE__ */ jsx(View, { style: [styles.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: colors.textSecondary }], children: shortcut }) })
-      ]
-    }
-  );
-};
-
-// src/sidebarFilter.ts
-function searchTokens(query) {
-  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
-}
-function labelMatches(item, tokens) {
-  const label = item.label.toLowerCase();
-  return tokens.every((token) => label.includes(token));
-}
-function filterNavItems(items, query) {
-  const tokens = searchTokens(query);
-  if (tokens.length === 0) return [...items];
-  return filterByTokens(items, tokens);
-}
-function filterByTokens(items, tokens) {
-  const kept = [];
-  for (const item of items) {
-    const selfMatch = labelMatches(item, tokens);
-    const children = item.children ?? [];
-    if (selfMatch) {
-      kept.push(item);
-      continue;
-    }
-    if (children.length === 0) continue;
-    const prunedChildren = filterByTokens(children, tokens);
-    if (prunedChildren.length > 0) kept.push({ ...item, children: prunedChildren });
-  }
-  return kept;
-}
-function isFilterActive(query) {
-  return searchTokens(query).length > 0;
-}
-
-// src/isRouteActive.ts
-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 MIN_TOUCH_TARGET = 44;
 var ACTIVE_BORDER_RADIUS = 4;
 var ACTIVE_ACCENT_WIDTH = 3;
 var NAV_ROW_RADIUS = 8;
@@ -209,7 +70,15 @@ var navStyles = StyleSheet.create({
   userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
   userName: { fontWeight: "600" },
   userEmail: { fontSize: 12 },
-  accountBtn: { marginLeft: 8, paddingHorizontal: 10, paddingVertical: 6, borderRadius: 4 },
+  accountBtn: {
+    marginLeft: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 4,
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    justifyContent: "center"
+  },
   accountText: { fontWeight: "600" },
   // --- Rich account-state header (Move 1c) ---
   accountTenant: { fontSize: 12 },
@@ -245,8 +114,8 @@ var navBarStyles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: 4,
     // a11y: keep the hamburger a comfortable ≥44×44 touch target.
-    minWidth: 44,
-    minHeight: 44,
+    minWidth: MIN_TOUCH_TARGET,
+    minHeight: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center"
   },
@@ -273,13 +142,19 @@ var navBarStyles = StyleSheet.create({
   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.
+  // SHOWCASE-1: this is a ScrollView — `maxHeight` (viewport minus bar) is applied at render time,
+  // so a long menu scrolls within the viewport instead of running off a body:overflow:hidden page.
   linksStacked: {
     width: "100%",
     flexBasis: "100%",
+    flexGrow: 0,
+    flexShrink: 0,
+    marginTop: 8
+  },
+  linksStackedContent: {
     flexDirection: "column",
     alignItems: "stretch",
-    rowGap: 2,
-    marginTop: 8
+    rowGap: 2
   },
   link: {
     paddingVertical: 8,
@@ -288,7 +163,7 @@ var navBarStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     // a11y: comfortable ≥44 tall touch target (rounded-pill hover/active affordance).
-    minHeight: 44,
+    minHeight: MIN_TOUCH_TARGET,
     justifyContent: "center"
   },
   linkStacked: { paddingVertical: 10 },
@@ -324,7 +199,7 @@ var pillNavStyles = StyleSheet.create({
     paddingHorizontal: 16,
     paddingVertical: 8,
     borderRadius: 999,
-    minHeight: 36,
+    minHeight: MIN_TOUCH_TARGET,
     flexDirection: "row",
     alignItems: "center",
     columnGap: 6,
@@ -345,7 +220,8 @@ var darkModeStyles = StyleSheet.create({
   segment: {
     paddingHorizontal: 12,
     paddingVertical: 8,
-    minHeight: 36,
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
     flexDirection: "row",
     alignItems: "center",
     columnGap: 6,
@@ -356,8 +232,8 @@ var darkModeStyles = StyleSheet.create({
   cycle: {
     paddingHorizontal: 12,
     paddingVertical: 8,
-    minHeight: 44,
-    minWidth: 44,
+    minHeight: MIN_TOUCH_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
     borderRadius: 8,
     flexDirection: "row",
     alignItems: "center",
@@ -402,6 +278,7 @@ var expandableStyles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     paddingVertical: 9,
+    minHeight: MIN_TOUCH_TARGET,
     borderLeftWidth: ACTIVE_ACCENT_WIDTH,
     borderLeftColor: "transparent"
   },
@@ -429,7 +306,8 @@ var expandableStyles = StyleSheet.create({
     borderRadius: NAV_ROW_RADIUS,
     flexDirection: "row",
     alignItems: "center",
-    paddingVertical: 8
+    paddingVertical: 8,
+    minHeight: MIN_TOUCH_TARGET
   },
   // Depth-0 module groups render as docs-style SECTION HEADERS: extra top rhythm
   // to separate one module from the next.
@@ -449,6 +327,145 @@ var expandableStyles = StyleSheet.create({
 var BASE_INDENT = 12;
 var NAV_ICON_SIZE = 14;
 var CHEVRON_ICON_SIZE = 12;
+var IS_WEB = Platform.OS === "web";
+var FOCUS_RING_WIDTH = 2;
+var FOCUS_RING_OFFSET = 2;
+var HOVER_TRANSITION_MS = 150;
+var TINT_TRANSITION_MS = 160;
+function focusRingStyle(focused, ringColor) {
+  if (!IS_WEB || !focused) return void 0;
+  const ring = {
+    outlineWidth: FOCUS_RING_WIDTH,
+    outlineStyle: "solid",
+    outlineColor: ringColor,
+    outlineOffset: FOCUS_RING_OFFSET
+  };
+  return ring;
+}
+function webTransition(properties, durationMs, reducedMotion) {
+  if (!IS_WEB) return void 0;
+  const transition = {
+    transitionProperty: properties,
+    transitionDuration: reducedMotion ? "0ms" : `${durationMs}ms`
+  };
+  return transition;
+}
+function hoverTransitionStyle(reducedMotion) {
+  return webTransition("color, background-color", HOVER_TRANSITION_MS, reducedMotion);
+}
+function tintTransitionStyle(reducedMotion) {
+  return webTransition("opacity", TINT_TRANSITION_MS, reducedMotion);
+}
+function rotateTransitionStyle(reducedMotion) {
+  return webTransition("transform", TINT_TRANSITION_MS, reducedMotion);
+}
+var styles = StyleSheet.create({
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    columnGap: 8,
+    paddingHorizontal: 12,
+    minHeight: MIN_TOUCH_TARGET,
+    borderWidth: 1,
+    borderRadius: 8
+  },
+  label: { fontSize: 14 },
+  badge: { paddingHorizontal: 6, paddingVertical: 2, borderRadius: 4, borderWidth: 1 },
+  badgeText: { fontSize: 11, fontWeight: "700" }
+});
+var CommandPaletteTrigger = ({
+  label,
+  hint,
+  shortcut,
+  onPress,
+  testID
+}) => {
+  const { theme } = useUi();
+  const colors = theme.colors;
+  const primary = theme.palette.primary["500"];
+  const [focused, setFocused] = React.useState(false);
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      accessibilityRole: "button",
+      style: [
+        styles.trigger,
+        { backgroundColor: colors.surface, borderColor: colors.border },
+        focusRingStyle(focused, primary)
+      ],
+      testID,
+      onBlur: () => setFocused(false),
+      onFocus: () => setFocused(true),
+      onPress,
+      children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: colors.textSecondary }], children: label }),
+        /* @__PURE__ */ jsx(View, { style: [styles.badge, { borderColor: colors.border }], children: /* @__PURE__ */ jsx(Text, { style: [styles.badgeText, { color: colors.textSecondary }], children: shortcut }) })
+      ]
+    }
+  );
+};
+
+// src/sidebarFilter.ts
+function searchTokens(query) {
+  return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+}
+function labelMatches(item, tokens) {
+  const label = item.label.toLowerCase();
+  return tokens.every((token) => label.includes(token));
+}
+function filterNavItems(items, query) {
+  const tokens = searchTokens(query);
+  if (tokens.length === 0) return [...items];
+  return filterByTokens(items, tokens);
+}
+function filterByTokens(items, tokens) {
+  const kept = [];
+  for (const item of items) {
+    const selfMatch = labelMatches(item, tokens);
+    const children = item.children ?? [];
+    if (selfMatch) {
+      kept.push(item);
+      continue;
+    }
+    if (children.length === 0) continue;
+    const prunedChildren = filterByTokens(children, tokens);
+    if (prunedChildren.length > 0) kept.push({ ...item, children: prunedChildren });
+  }
+  return kept;
+}
+function isFilterActive(query) {
+  return searchTokens(query).length > 0;
+}
+
+// src/isRouteActive.ts
+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 REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
 function getReducedMotionQuery() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return void 0;
@@ -646,7 +663,6 @@ function resolveSearchAffordance(viewport, breakpoint = DEFAULT_SEARCH_BREAKPOIN
 }
 var FIELD_MIN_HEIGHT = 38;
 var CLEAR_GLYPH = "\u2715";
-var CLEAR_MIN_TARGET = 28;
 var styles2 = StyleSheet.create({
   wrap: {
     flexDirection: "row",
@@ -664,8 +680,8 @@ var styles2 = StyleSheet.create({
     minHeight: FIELD_MIN_HEIGHT
   },
   clear: {
-    minWidth: CLEAR_MIN_TARGET,
-    minHeight: CLEAR_MIN_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    minHeight: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 6
@@ -1168,9 +1184,24 @@ function useNavOverflow(itemCount, gap) {
   );
   return { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth };
 }
+
+// src/stackedMenuMaxHeight.ts
+var DEFAULT_BAR_HEIGHT = 64;
+var MIN_STACKED_MENU_HEIGHT = 3 * 44;
+function computeStackedMenuMaxHeight({
+  windowHeight,
+  barHeight,
+  reservedBelow
+}) {
+  const bar = barHeight > 0 ? barHeight : DEFAULT_BAR_HEIGHT;
+  const reserved = Math.max(0, reservedBelow);
+  return Math.max(MIN_STACKED_MENU_HEIGHT, windowHeight - bar - reserved);
+}
 var LINKS_REGION_ID = "navbar-links-region";
 var DEFAULT_COLLAPSE_BELOW = 760;
 var MENU_GLYPH = "\u2630";
+var STACKED_MENU_CHROME = 12;
+var STACKED_RIGHT_CHROME = 8;
 function ariaControlsProps(id) {
   return { "aria-controls": id };
 }
@@ -1194,13 +1225,22 @@ var NavBarInner = ({
   const { theme } = useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const { width } = useWindowDimensions();
+  const { width, height } = useWindowDimensions();
   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 [barHeight, setBarHeight] = useState(0);
+  const [rightHeight, setRightHeight] = useState(0);
+  const hasRight = right !== void 0;
+  const stackedMaxHeight = computeStackedMenuMaxHeight({
+    windowHeight: height,
+    barHeight,
+    reservedBelow: STACKED_MENU_CHROME + (hasRight ? STACKED_RIGHT_CHROME + rightHeight : 0)
+  });
+  const measureBar = collapsed && !open;
   const innerCapStyle = useMemo(
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
@@ -1235,6 +1275,7 @@ var NavBarInner = ({
         { backgroundColor: colors.surface, borderBottomColor: colors.border },
         containerStyle
       ],
+      onLayout: measureBar ? (event) => setBarHeight(event.nativeEvent.layout.height) : void 0,
       children: /* @__PURE__ */ jsxs(View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap, innerCapStyle], children: [
         brand !== void 0 ? /* @__PURE__ */ jsx(View, { style: navBarStyles.brand, children: renderTextSlot(brand, { color: colors.text }) }) : null,
         collapsed ? /* @__PURE__ */ jsx(
@@ -1269,7 +1310,16 @@ var NavBarInner = ({
             }
           );
           if (collapsed) {
-            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsx(
+              ScrollView,
+              {
+                contentContainerStyle: navBarStyles.linksStackedContent,
+                nativeID: LINKS_REGION_ID,
+                style: [navBarStyles.linksStacked, { maxHeight: stackedMaxHeight }],
+                testID: NAV_TEST_IDS.navBarLinks,
+                children: items.map((item) => /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item) }, item.key))
+              }
+            );
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -1313,7 +1363,14 @@ var NavBarInner = ({
             }
           );
         })() : null,
-        showLinks && right !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: renderTextSlot(right, { color: colors.text }) }) : null
+        showLinks && hasRight ? /* @__PURE__ */ jsx(
+          View,
+          {
+            style: collapsed ? navBarStyles.rightStacked : navBarStyles.right,
+            onLayout: collapsed ? (event) => setRightHeight(event.nativeEvent.layout.height) : void 0,
+            children: renderTextSlot(right, { color: colors.text })
+          }
+        ) : null
       ] })
     }
   );
@@ -1395,7 +1452,6 @@ function useContentBody(state, children, testID) {
 }
 var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
-var MENU_MIN_TARGET = 44;
 var MENU_GLYPH_FONT_SIZE = 20;
 var MENU_TOGGLE_PADDING = 12;
 var DRAWER_Z_INDEX = 50;
@@ -1433,8 +1489,8 @@ var styles4 = StyleSheet.create({
   // and receive presses instead of the scrim swallowing them.
   panel: { position: "absolute", top: 0, bottom: 0, left: 0, width: DRAWER_WIDTH, zIndex: PANEL_Z_INDEX },
   menuToggle: {
-    minWidth: MENU_MIN_TARGET,
-    minHeight: MENU_MIN_TARGET,
+    minWidth: MIN_TOUCH_TARGET,
+    minHeight: MIN_TOUCH_TARGET,
     alignItems: "center",
     justifyContent: "center",
     paddingHorizontal: MENU_TOGGLE_PADDING