@dloizides/ui-nav 1.22.0 → 1.23.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.23.0
+
+**The NavBar's stacked mobile menu now scrolls within the viewport (SHOWCASE-1).**
+
+Below `collapseBelow` the open hamburger menu grew to its natural height (734px with ~15 items on
+ui.dloizides.com at 360x640). Portals set `body { overflow: hidden }`, so the last items sat below
+the fold and neither wheel nor touch could reach them — in every portal with more than ~10 items.
+
+- The stacked links region is now a `ScrollView` capped to `windowHeight - closedBarHeight -
+  stackedRightSlot - chrome` (pure `computeStackedMenuMaxHeight`, unit-tested; floor of three 44px
+  rows). Rows keep their 44px minimum; nothing depends on hover.
+
 ## 1.20.0
 
 **The auth-pending and page-loading spinners now OVERLAY stably-mounted children instead of

package/dist/index.js

@@ -148,13 +148,19 @@ var navBarStyles = reactNative.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,
@@ -1184,9 +1190,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 };
 }
@@ -1210,13 +1231,22 @@ var NavBarInner = ({
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const { width } = reactNative.useWindowDimensions();
+  const { width, height } = reactNative.useWindowDimensions();
   const reducedMotion = useReducedMotion();
   const [open, setOpen] = React.useState(false);
   const [toggleFocused, setToggleFocused] = React.useState(false);
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
+  const [barHeight, setBarHeight] = React.useState(0);
+  const [rightHeight, setRightHeight] = React.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 = React.useMemo(
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
@@ -1251,6 +1281,7 @@ var NavBarInner = ({
         { backgroundColor: colors.surface, borderBottomColor: colors.border },
         containerStyle
       ],
+      onLayout: measureBar ? (event) => setBarHeight(event.nativeEvent.layout.height) : void 0,
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap, innerCapStyle], children: [
         brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: renderTextSlot(brand, { color: colors.text }) }) : null,
         collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1285,7 +1316,16 @@ var NavBarInner = ({
             }
           );
           if (collapsed) {
-            return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.ScrollView,
+              {
+                contentContainerStyle: navBarStyles.linksStackedContent,
+                nativeID: LINKS_REGION_ID,
+                style: [navBarStyles.linksStacked, { maxHeight: stackedMaxHeight }],
+                testID: NAV_TEST_IDS.navBarLinks,
+                children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: renderLink(item) }, item.key))
+              }
+            );
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -1329,7 +1369,14 @@ var NavBarInner = ({
             }
           );
         })() : null,
-        showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: renderTextSlot(right, { color: colors.text }) }) : null
+        showLinks && hasRight ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.View,
+          {
+            style: collapsed ? navBarStyles.rightStacked : navBarStyles.right,
+            onLayout: collapsed ? (event) => setRightHeight(event.nativeEvent.layout.height) : void 0,
+            children: renderTextSlot(right, { color: colors.text })
+          }
+        ) : null
       ] })
     }
   );