@dloizides/ui-nav 1.22.0 → 1.23.1

package/dist/index.mjs

@@ -4,6 +4,7 @@ import { useUi, UiProvider } from '@dloizides/ui-feedback';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Collapse } from '@dloizides/ui-motion';
 import { LAYOUT_COLLAPSE_BREAKPOINT, ModalDropdown } from '@dloizides/ui-layout';
+import { Z_INDEX } from '@dloizides/design-tokens';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
 // src/Sidebar.tsx
@@ -142,13 +143,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,
@@ -1178,9 +1185,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 };
 }
@@ -1204,13 +1226,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]
@@ -1245,6 +1276,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(
@@ -1279,7 +1311,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);
@@ -1323,7 +1364,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
       ] })
     }
   );
@@ -1407,7 +1455,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 = Z_INDEX.drawer;
 var DRAWER_WIDTH = 280;
 var SCRIM_Z_INDEX = 1;
 var PANEL_Z_INDEX = 2;
@@ -1924,7 +1972,7 @@ function filterCommands(items, query) {
   });
 }
 var SCRIM_COLOR2 = "rgba(0, 0, 0, 0.5)";
-var OVERLAY_Z_INDEX = 60;
+var OVERLAY_Z_INDEX = Z_INDEX.palette;
 var PANEL_MAX_WIDTH = 560;
 var PANEL_TOP_OFFSET = 88;
 var LIST_MAX_HEIGHT = 360;