@dloizides/ui-nav 1.4.0 → 1.6.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, Pressable, ActivityIndicator, ScrollView } from 'react-native';
+import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, Pressable, ScrollView, ActivityIndicator } from 'react-native';
 import { useUi } from '@dloizides/ui-feedback';
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
 
@@ -74,7 +74,7 @@ var navBarStyles = StyleSheet.create({
     rowGap: 4,
     paddingVertical: 8
   },
-  brand: { marginRight: 16 },
+  brand: { marginRight: 16, flexShrink: 0 },
   toggle: {
     marginLeft: "auto",
     paddingHorizontal: 10,
@@ -87,10 +87,19 @@ 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: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0
+  },
   links: {
     flexDirection: "row",
     alignItems: "center",
-    flexWrap: "wrap",
+    flexWrap: "nowrap",
     columnGap: 4,
     rowGap: 4
   },
@@ -119,6 +128,7 @@ var navBarStyles = StyleSheet.create({
   linkText: { fontSize: 15, fontWeight: "600" },
   right: {
     marginLeft: "auto",
+    flexShrink: 0,
     flexDirection: "row",
     alignItems: "center",
     columnGap: 8
@@ -346,6 +356,12 @@ var APP_SHELL_SUFFIX = {
   nav: "-nav",
   /** The persistent left rail of the back-office layout (only when `sidebar` is supplied). */
   sidebar: "-sidebar",
+  /** Mobile hamburger that opens the nav drawer (back-office layout, below the breakpoint). */
+  menuToggle: "-menu-toggle",
+  /** The mobile nav drawer panel (holds the `sidebar` slot when opened on a narrow viewport). */
+  drawer: "-drawer",
+  /** The mobile nav drawer scrim (tap to close). */
+  scrim: "-drawer-scrim",
   banner: "-banner",
   pending: "-pending",
   loading: "-loading",
@@ -642,33 +658,115 @@ var NavBar = ({
             children: typeof renderMenuIcon === "function" ? renderMenuIcon(colors.text, open) : /* @__PURE__ */ jsx(Text, { style: [navBarStyles.toggleGlyph, { color: colors.text }], children: MENU_GLYPH })
           }
         ) : null,
-        showLinks ? /* @__PURE__ */ jsx(
-          View,
-          {
-            nativeID: LINKS_REGION_ID,
-            style: collapsed ? navBarStyles.linksStacked : navBarStyles.links,
-            testID: NAV_TEST_IDS.navBarLinks,
-            children: items.map((item) => /* @__PURE__ */ jsx(
-              NavBarLink,
-              {
-                collapsed,
-                colors: linkColors,
-                iconSize: NAV_ICON_SIZE,
-                isActive: isRouteActive(pathname, item.route),
-                item,
-                navigateHint,
-                reducedMotion,
-                onPress: handlePress
-              },
-              item.key
-            ))
-          }
-        ) : null,
+        showLinks ? (() => {
+          const links = items.map((item) => /* @__PURE__ */ jsx(
+            NavBarLink,
+            {
+              collapsed,
+              colors: linkColors,
+              iconSize: NAV_ICON_SIZE,
+              isActive: isRouteActive(pathname, item.route),
+              item,
+              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,
+            {
+              horizontal: true,
+              showsHorizontalScrollIndicator: false,
+              nativeID: LINKS_REGION_ID,
+              style: navBarStyles.linksScroll,
+              contentContainerStyle: navBarStyles.links,
+              testID: NAV_TEST_IDS.navBarLinks,
+              children: links
+            }
+          );
+        })() : null,
         showLinks && right !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
       ] })
     }
   );
 };
+var MOBILE_BREAKPOINT = 768;
+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;
+var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
+var DEFAULT_DRAWER_LABELS = {
+  openLabel: "Menu",
+  openHint: "Open the navigation menu",
+  closeLabel: "Close menu",
+  closeHint: "Close the navigation menu"
+};
+var styles = StyleSheet.create({
+  overlay: { ...StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
+  scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR },
+  panel: { position: "absolute", top: 0, bottom: 0, left: 0 },
+  menuToggle: {
+    minWidth: MENU_MIN_TARGET,
+    minHeight: MENU_MIN_TARGET,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: MENU_TOGGLE_PADDING
+  },
+  menuToggleGlyph: { fontSize: MENU_GLYPH_FONT_SIZE, fontWeight: "700" }
+});
+var MenuToggle = ({ label, hint, onOpen, testID }) => {
+  const { theme } = useUi();
+  return /* @__PURE__ */ jsx(
+    FocusableTouchable,
+    {
+      accessibilityHint: hint,
+      accessibilityLabel: label,
+      ringColor: theme.palette.primary["500"],
+      style: styles.menuToggle,
+      testID,
+      onPress: onOpen,
+      children: /* @__PURE__ */ jsx(Text, { style: [styles.menuToggleGlyph, { color: theme.colors.text }], children: MENU_GLYPH2 })
+    }
+  );
+};
+var MobileDrawer = ({
+  sidebar,
+  labels,
+  onClose,
+  drawerTestID,
+  scrimTestID
+}) => {
+  const panelRef = useRef(null);
+  useEffect(() => {
+    const node = panelRef.current;
+    if (node === null || typeof node.addEventListener !== "function") return void 0;
+    const handleClick = (event) => {
+      const target = event.target;
+      const onNavItem = target !== null && target.closest(NAV_ACTIVATABLE_SELECTOR) !== null;
+      if (onNavItem) onClose();
+    };
+    node.addEventListener("click", handleClick);
+    return () => node.removeEventListener("click", handleClick);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs(View, { style: styles.overlay, children: [
+    /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        accessibilityHint: labels.closeHint,
+        accessibilityLabel: labels.closeLabel,
+        accessibilityRole: "button",
+        style: styles.scrim,
+        testID: scrimTestID,
+        onPress: onClose
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles.panel, testID: drawerTestID, children: sidebar })
+  ] });
+};
 function resolveContentMaxWidth(width, viewport) {
   if (width === "full") return "full";
   const wideMinViewport = width.wideMinViewport ?? Number.POSITIVE_INFINITY;
@@ -686,11 +784,14 @@ var CARD_BORDER_WIDTH = 1;
 var CARD_TITLE_FONT_SIZE = 16;
 var CARD_MESSAGE_FONT_SIZE = 14;
 var CARD_TITLE_MARGIN_BOTTOM = 8;
-var styles = StyleSheet.create({
+var styles2 = StyleSheet.create({
   root: { flex: 1 },
   centerFill: { flex: 1, justifyContent: "center", alignItems: "center" },
   scroll: { flex: 1 },
   scrollContent: { flexGrow: 1 },
+  // Mobile back-office header: the hamburger sits inline before the header slot.
+  headerRow: { flexDirection: "row", alignItems: "center" },
+  headerFill: { flex: 1 },
   // Back-office layout: a persistent left rail beside the scrolling content column.
   bodyRow: { flex: 1, flexDirection: "row" },
   columnFull: { flex: 1 },
@@ -716,11 +817,11 @@ function MessageCard({
   return /* @__PURE__ */ jsxs(
     View,
     {
-      style: [styles.card, { backgroundColor: colors.surface, borderColor: accentColor }],
+      style: [styles2.card, { backgroundColor: colors.surface, borderColor: accentColor }],
       testID,
       children: [
-        /* @__PURE__ */ jsx(Text, { style: [styles.cardTitle, { color: accentColor }], children: message.titleText }),
-        /* @__PURE__ */ jsx(Text, { style: [styles.cardMessage, { color: colors.textSecondary }], children: message.messageText })
+        /* @__PURE__ */ jsx(Text, { style: [styles2.cardTitle, { color: accentColor }], children: message.titleText }),
+        /* @__PURE__ */ jsx(Text, { style: [styles2.cardMessage, { color: colors.textSecondary }], children: message.messageText })
       ]
     }
   );
@@ -734,13 +835,14 @@ function useContentBody(state, children, testID) {
   if (state?.error)
     return /* @__PURE__ */ jsx(MessageCard, { accentColor: errorColor, message: state.error, testID: `${testID}${APP_SHELL_SUFFIX.error}` });
   if (state?.loading === true)
-    return /* @__PURE__ */ jsx(View, { style: styles.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsx(View, { style: styles2.centerFill, testID: `${testID}${APP_SHELL_SUFFIX.loading}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
   return children;
 }
 var AppShell = ({
   header,
   nav,
   sidebar,
+  mobileMenu,
   banner,
   width = "full",
   contentPadding = DEFAULT_CONTENT_PADDING,
@@ -754,32 +856,65 @@ var AppShell = ({
   const primary = theme.palette.primary["500"];
   const maxWidth = useContentMaxWidth(width);
   const body = useContentBody(state, children, testID);
+  const { width: viewportWidth } = useWindowDimensions();
+  const isNarrow = viewportWidth < MOBILE_BREAKPOINT;
+  const useDrawer = sidebar !== void 0 && isNarrow;
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const openDrawer = useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = useCallback(() => setDrawerOpen(false), []);
+  useEffect(() => {
+    if (!isNarrow && drawerOpen) setDrawerOpen(false);
+  }, [isNarrow, drawerOpen]);
+  const drawerLabels = { ...DEFAULT_DRAWER_LABELS, ...mobileMenu };
   const isUnauthenticated = gate !== void 0 && !gate.pending && !gate.authenticated;
   useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
-    return /* @__PURE__ */ jsx(View, { style: [styles.root, styles.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
+    return /* @__PURE__ */ jsx(View, { style: [styles2.root, styles2.centerFill, { backgroundColor: theme.colors.background }], testID: `${testID}${APP_SHELL_SUFFIX.pending}`, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: primary, size: "large" }) });
   if (isUnauthenticated) return null;
-  const columnStyle = maxWidth === "full" ? styles.columnFull : [styles.columnCapped, { maxWidth }];
-  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
+  const columnStyle = maxWidth === "full" ? styles2.columnFull : [styles2.columnCapped, { maxWidth }];
+  const navInnerStyle = chromeAlignment === "content" && maxWidth !== "full" ? [styles2.chromeCapped, { maxWidth, paddingHorizontal: contentPadding }] : void 0;
   const scroller = /* @__PURE__ */ jsx(
     ScrollView,
     {
-      contentContainerStyle: [styles.scrollContent, { padding: contentPadding }],
-      style: styles.scroll,
+      contentContainerStyle: [styles2.scrollContent, { padding: contentPadding }],
+      style: styles2.scroll,
       testID: `${testID}${APP_SHELL_SUFFIX.content}`,
       children: /* @__PURE__ */ jsx(View, { style: columnStyle, children: body })
     }
   );
-  return /* @__PURE__ */ jsxs(View, { style: [styles.root, { backgroundColor: theme.colors.background }], testID, children: [
-    /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header }),
+  const headerRegion = useDrawer ? /* @__PURE__ */ jsxs(View, { style: styles2.headerRow, testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: [
+    /* @__PURE__ */ jsx(
+      MenuToggle,
+      {
+        hint: drawerLabels.openHint,
+        label: drawerLabels.openLabel,
+        testID: `${testID}${APP_SHELL_SUFFIX.menuToggle}`,
+        onOpen: openDrawer
+      }
+    ),
+    /* @__PURE__ */ jsx(View, { style: styles2.headerFill, children: header })
+  ] }) : /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header });
+  const showRail = sidebar !== void 0 && !isNarrow;
+  return /* @__PURE__ */ jsxs(View, { style: [styles2.root, { backgroundColor: theme.colors.background }], testID, children: [
+    headerRegion,
     nav !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsx(View, { style: navInnerStyle, children: nav }) : nav }) : null,
     banner !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: banner }) : null,
-    sidebar !== void 0 ? /* @__PURE__ */ jsxs(View, { style: styles.bodyRow, children: [
+    showRail ? /* @__PURE__ */ jsxs(View, { style: styles2.bodyRow, children: [
       /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }),
       scroller
-    ] }) : scroller
+    ] }) : scroller,
+    useDrawer && drawerOpen ? /* @__PURE__ */ jsx(
+      MobileDrawer,
+      {
+        drawerTestID: `${testID}${APP_SHELL_SUFFIX.drawer}`,
+        labels: drawerLabels,
+        scrimTestID: `${testID}${APP_SHELL_SUFFIX.scrim}`,
+        sidebar,
+        onClose: closeDrawer
+      }
+    ) : null
   ] });
 };
 function roleRoutesToNavItems(routes, translate) {