@dloizides/ui-nav 1.10.0 → 1.10.2

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { StyleSheet, Platform, TouchableOpacity, View, Text, useWindowDimensions, ActivityIndicator, ScrollView, Pressable } from 'react-native';
 import { useUi, UiProvider } from '@dloizides/ui-feedback';
-import React5, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import React2, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ModalDropdown } from '@dloizides/ui-layout';
 import { resolveAccessibleRoutes } from '@dloizides/auth-web';
@@ -378,6 +378,17 @@ var NavExpandableItem = ({
     )) }) : null
   ] });
 };
+function isBareText(node) {
+  return typeof node === "string" || typeof node === "number";
+}
+function renderTextSlot(node, style) {
+  if (node === void 0 || node === null) return node;
+  if (isBareText(node)) return /* @__PURE__ */ jsx(Text, { style, children: node });
+  return React2.Children.map(
+    node,
+    (child) => isBareText(child) ? /* @__PURE__ */ jsx(Text, { style, children: child }) : child
+  );
+}
 var Sidebar = ({
   items,
   pathname,
@@ -407,7 +418,7 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
-        header,
+        renderTextSlot(header, { color: colors.text }),
         items.map((item) => /* @__PURE__ */ jsx(
           NavExpandableItem,
           {
@@ -422,7 +433,7 @@ var Sidebar = ({
           item.key
         )),
         /* @__PURE__ */ jsx(View, { style: navStyles.sidebarSpacer }),
-        footer
+        renderTextSlot(footer, { color: colors.text })
       ]
     }
   );
@@ -525,7 +536,7 @@ var Topbar = ({
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsx(View, { style: navStyles.topbarLeft, children: left }),
+        /* @__PURE__ */ jsx(View, { style: navStyles.topbarLeft, children: renderTextSlot(left, { color: colors.text }) }),
         /* @__PURE__ */ jsxs(View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsx(
             FocusableTouchable,
@@ -539,7 +550,7 @@ var Topbar = ({
               children: /* @__PURE__ */ jsx(Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
             }
           ) : null,
-          notificationSlot,
+          renderTextSlot(notificationSlot, { color: colors.text }),
           user ? /* @__PURE__ */ jsxs(View, { style: navStyles.userBlock, children: [
             /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
             /* @__PURE__ */ jsx(Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
@@ -848,7 +859,7 @@ var NavBarInner = ({
         containerStyle
       ],
       children: /* @__PURE__ */ jsxs(View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap, innerCapStyle], children: [
-        brand !== void 0 ? /* @__PURE__ */ jsx(View, { style: navBarStyles.brand, children: brand }) : null,
+        brand !== void 0 ? /* @__PURE__ */ jsx(View, { style: navBarStyles.brand, children: renderTextSlot(brand, { color: colors.text }) }) : null,
         collapsed ? /* @__PURE__ */ jsx(
           Pressable,
           {
@@ -881,7 +892,7 @@ 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(React5.Fragment, { children: renderLink(item) }, item.key)) });
+            return /* @__PURE__ */ jsx(View, { nativeID: LINKS_REGION_ID, style: navBarStyles.linksStacked, testID: NAV_TEST_IDS.navBarLinks, children: items.map((item) => /* @__PURE__ */ jsx(React2.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -925,7 +936,7 @@ var NavBarInner = ({
             }
           );
         })() : null,
-        showLinks && right !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
+        showLinks && right !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: renderTextSlot(right, { color: colors.text }) }) : null
       ] })
     }
   );
@@ -987,6 +998,9 @@ var MENU_MIN_TARGET = 44;
 var MENU_GLYPH_FONT_SIZE = 20;
 var MENU_TOGGLE_PADDING = 12;
 var DRAWER_Z_INDEX = 50;
+var DRAWER_WIDTH = 280;
+var SCRIM_Z_INDEX = 1;
+var PANEL_Z_INDEX = 2;
 var NAV_ACTIVATABLE_SELECTOR = 'a, [role="button"], [role="link"]';
 var DEFAULT_DRAWER_LABELS = {
   openLabel: "Menu",
@@ -996,8 +1010,22 @@ var DEFAULT_DRAWER_LABELS = {
 };
 var styles2 = StyleSheet.create({
   overlay: { ...StyleSheet.absoluteFillObject, zIndex: DRAWER_Z_INDEX },
-  scrim: { ...StyleSheet.absoluteFillObject, backgroundColor: SCRIM_COLOR },
-  panel: { position: "absolute", top: 0, bottom: 0, left: 0 },
+  // The scrim's tap-to-close hit area is anchored to the RIGHT of the panel
+  // (`left: DRAWER_WIDTH`), so it NEVER overlaps the panel: nav-item taps always
+  // reach the Sidebar's TouchableOpacity, while taps beside the drawer still close.
+  scrim: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: DRAWER_WIDTH,
+    right: 0,
+    backgroundColor: SCRIM_COLOR,
+    zIndex: SCRIM_Z_INDEX
+  },
+  // The panel gets an explicit width (a real drawer) AND a zIndex above the scrim,
+  // so on react-native-web it — and the nav leaves inside it — sit above the scrim
+  // 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,
@@ -1029,6 +1057,7 @@ var MobileDrawer = ({
   drawerTestID,
   scrimTestID
 }) => {
+  const { theme } = useUi();
   const panelRef = useRef(null);
   useEffect(() => {
     const node = panelRef.current;
@@ -1053,7 +1082,17 @@ var MobileDrawer = ({
         onPress: onClose
       }
     ),
-    /* @__PURE__ */ jsx(View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: sidebar })
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        ref: panelRef,
+        "aria-modal": true,
+        role: "dialog",
+        style: [styles2.panel, { backgroundColor: theme.colors.surface }],
+        testID: drawerTestID,
+        children: renderTextSlot(sidebar, { color: theme.colors.text })
+      }
+    )
   ] });
 };
 
@@ -1160,13 +1199,13 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsx(View, { style: styles3.headerFill, children: header })
-  ] }) : /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header });
-  const railRegion = railMode === "full" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }) : railMode === "collapsed" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: collapsedSidebar }) : null;
+    /* @__PURE__ */ jsx(View, { style: styles3.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+  ] }) : /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
+  const railRegion = railMode === "full" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
   return /* @__PURE__ */ jsxs(View, { style: [styles3.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,
+    nav !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsx(View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
+    banner !== void 0 ? /* @__PURE__ */ jsx(View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
     railRegion !== null ? /* @__PURE__ */ jsxs(View, { style: styles3.bodyRow, children: [
       railRegion,
       scroller
@@ -1212,7 +1251,7 @@ var CollapsedRail = ({
         containerStyle
       ],
       children: [
-        header !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsedRailStyles.slot, children: header }) : null,
+        header !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsedRailStyles.slot, children: renderTextSlot(header, { color: colors.text }) }) : null,
         items.map((item) => {
           const active = isRouteActive(pathname, item.route);
           const iconColor = active ? primaryColor : colors.textSecondary;
@@ -1231,7 +1270,7 @@ var CollapsedRail = ({
           );
         }),
         /* @__PURE__ */ jsx(View, { style: collapsedRailStyles.spacer }),
-        footer !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsedRailStyles.slot, children: footer }) : null
+        footer !== void 0 ? /* @__PURE__ */ jsx(View, { style: collapsedRailStyles.slot, children: renderTextSlot(footer, { color: colors.text }) }) : null
       ]
     }
   );