@dloizides/ui-nav 1.22.0 → 1.23.1

package/dist/index.js

@@ -6,6 +6,7 @@ var uiFeedback = require('@dloizides/ui-feedback');
 var jsxRuntime = require('react/jsx-runtime');
 var uiMotion = require('@dloizides/ui-motion');
 var uiLayout = require('@dloizides/ui-layout');
+var designTokens = require('@dloizides/design-tokens');
 var authWeb = require('@dloizides/auth-web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -148,13 +149,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 +1191,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 +1232,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 +1282,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 +1317,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 +1370,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
       ] })
     }
   );
@@ -1413,7 +1461,7 @@ var SCRIM_COLOR = "rgba(0, 0, 0, 0.5)";
 var MENU_GLYPH2 = "\u2630";
 var MENU_GLYPH_FONT_SIZE = 20;
 var MENU_TOGGLE_PADDING = 12;
-var DRAWER_Z_INDEX = 50;
+var DRAWER_Z_INDEX = designTokens.Z_INDEX.drawer;
 var DRAWER_WIDTH = 280;
 var SCRIM_Z_INDEX = 1;
 var PANEL_Z_INDEX = 2;
@@ -1930,7 +1978,7 @@ function filterCommands(items, query) {
   });
 }
 var SCRIM_COLOR2 = "rgba(0, 0, 0, 0.5)";
-var OVERLAY_Z_INDEX = 60;
+var OVERLAY_Z_INDEX = designTokens.Z_INDEX.palette;
 var PANEL_MAX_WIDTH = 560;
 var PANEL_TOP_OFFSET = 88;
 var LIST_MAX_HEIGHT = 360;