@dloizides/ui-nav 1.10.0 → 1.10.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 1.10.1
+
+- **Fix (a plain-string slot logged `console.error` on EVERY render, in all seven portals).**
+  Every caller-supplied slot in the kit is typed `React.ReactNode`, which legitimately includes
+  `string` — and callers pass exactly that (`brand: FM('app.name')`, a plain localized string).
+  The slot was dropped straight into a `<View>`, and react-native-web refuses to render a bare
+  text node there: `Unexpected text node: <s>. A text node cannot be a child of a <View>.`
+  Nothing in the type system objected, so the defect only ever surfaced as browser console
+  noise — which is why it survived to 1.10.0 across the whole fleet.
+  - Fixed once, in the kit, via the new internal `renderTextSlot` helper: a `string`/`number`
+    slot is wrapped in `<Text>` (routed through the theme's `colors.text`, so it honours dark
+    mode rather than defaulting to black); an element slot passes through **untouched**, so
+    every existing caller renders byte-identically. Array slots have each string member wrapped
+    individually, keys preserved.
+  - Applied to **all 12 slot render sites**, not just the reported one — `NavBar` (`brand`,
+    `right`), `Topbar` (`left`, `notificationSlot`), `Sidebar` (`header`, `footer`),
+    `CollapsedRail` (`header`, `footer`), `AppShell` (`header`, `nav`, `sidebar`,
+    `collapsedSidebar`, `banner`) and `MobileDrawer` (`sidebar`).
+  - Guarded by `src/rawTextSlots.test.tsx`, which spies on `console.error` and asserts silence.
+    Unit tests that only assert "the slot rendered" pass against the bug; this one does not.
+  - **No API change.** Consumers need no edit — the `<Text>` wrapper they were expected to
+    remember is now the kit's job.
+
 ## 1.10.0
 
 - **Fix (`layout` was not authoritative — `layout="side"` rendered a top bar anyway).**

package/dist/index.js

@@ -2,14 +2,14 @@
 
 var reactNative = require('react-native');
 var uiFeedback = require('@dloizides/ui-feedback');
-var React5 = require('react');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var uiLayout = require('@dloizides/ui-layout');
 var authWeb = require('@dloizides/auth-web');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React5__default = /*#__PURE__*/_interopDefault(React5);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/Sidebar.tsx
 
@@ -299,21 +299,21 @@ var NavExpandableItem = ({
   renderChevron,
   depth = 0
 }) => {
-  const [expanded, setExpanded] = React5.useState(false);
-  const [focused, setFocused] = React5.useState(false);
+  const [expanded, setExpanded] = React2.useState(false);
+  const [focused, setFocused] = React2.useState(false);
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
   const primaryColor = theme.palette.primary["500"];
-  const toggle = React5.useCallback(() => setExpanded((v) => !v), []);
+  const toggle = React2.useCallback(() => setExpanded((v) => !v), []);
   const indent = depth * BASE_INDENT;
   const hasChildren = Array.isArray(item.children) && item.children.length > 0;
   const isActive = isRouteActive(pathname, item.route);
-  const activeItemStyle = React5.useMemo(
+  const activeItemStyle = React2.useMemo(
     () => ({ backgroundColor: colors.border, borderRadius: ACTIVE_BORDER_RADIUS }),
     [colors.border]
   );
-  const paddingStyle = React5.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
-  const headerPaddingStyle = React5.useMemo(() => ({ paddingLeft: indent }), [indent]);
+  const paddingStyle = React2.useMemo(() => ({ paddingLeft: indent + BASE_INDENT }), [indent]);
+  const headerPaddingStyle = React2.useMemo(() => ({ paddingLeft: indent }), [indent]);
   if (!hasChildren)
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.TouchableOpacity,
@@ -384,6 +384,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__ */ jsxRuntime.jsx(reactNative.Text, { style, children: node });
+  return React2__default.default.Children.map(
+    node,
+    (child) => isBareText(child) ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style, children: child }) : child
+  );
+}
 var Sidebar = ({
   items,
   pathname,
@@ -413,7 +424,7 @@ var Sidebar = ({
       ],
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { accessibilityRole: "header", style: [navStyles.sidebarTitle, { color: colors.text }], children: title }),
-        header,
+        renderTextSlot(header, { color: colors.text }),
         items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
           NavExpandableItem,
           {
@@ -428,7 +439,7 @@ var Sidebar = ({
           item.key
         )),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.sidebarSpacer }),
-        footer
+        renderTextSlot(footer, { color: colors.text })
       ]
     }
   );
@@ -481,7 +492,7 @@ var FocusableTouchable = ({
   testID,
   children
 }) => {
-  const [focused, setFocused] = React5.useState(false);
+  const [focused, setFocused] = React2.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
@@ -531,7 +542,7 @@ var Topbar = ({
         containerStyle
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: left }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navStyles.topbarLeft, children: renderTextSlot(left, { color: colors.text }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.topbarRight, children: [
           language ? /* @__PURE__ */ jsxRuntime.jsx(
             FocusableTouchable,
@@ -545,7 +556,7 @@ var Topbar = ({
               children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
             }
           ) : null,
-          notificationSlot,
+          renderTextSlot(notificationSlot, { color: colors.text }),
           user ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: navStyles.userBlock, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: user.name }),
             /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userEmail, { color: colors.textSecondary }], children: user.email })
@@ -634,8 +645,8 @@ var NavBarLink = ({
   navigateHint,
   onPress
 }) => {
-  const [hovered, setHovered] = React5.useState(false);
-  const [focused, setFocused] = React5.useState(false);
+  const [hovered, setHovered] = React2.useState(false);
+  const [focused, setFocused] = React2.useState(false);
   const isHovered = hovered && !isActive;
   const textColor = isActive ? TEXT_ON_PRIMARY2 : isHovered ? colors.hoverText : colors.rest;
   const pillStyle = isActive ? { backgroundColor: colors.activeBg } : isHovered ? { backgroundColor: colors.hoverBg } : void 0;
@@ -679,12 +690,12 @@ var NavOverflowMenu = ({
   testID,
   variant
 }) => {
-  const options = React5.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
-  const activeRoute = React5.useMemo(
+  const options = React2.useMemo(() => items.map((item) => ({ label: item.label, value: item.route })), [items]);
+  const activeRoute = React2.useMemo(
     () => items.find((item) => isRouteActive(pathname, item.route))?.route ?? NO_ACTIVE_ROUTE,
     [items, pathname]
   );
-  const optionTestID = React5.useMemo(() => {
+  const optionTestID = React2.useMemo(() => {
     const byRoute = new Map(items.map((item) => [item.route, item.testID ?? item.key]));
     return (route) => byRoute.get(route) ?? `${testID}-option-${route}`;
   }, [items, testID]);
@@ -741,13 +752,13 @@ function resizeWidthBuffer(previous, count) {
   return next;
 }
 function useNavOverflow(itemCount, gap) {
-  const [availableWidth, setAvailableWidthState] = React5.useState(0);
-  const [moreWidth, setMoreWidthState] = React5.useState(0);
-  const [itemWidths, setItemWidths] = React5.useState(() => new Array(itemCount).fill(0));
-  React5.useEffect(() => {
+  const [availableWidth, setAvailableWidthState] = React2.useState(0);
+  const [moreWidth, setMoreWidthState] = React2.useState(0);
+  const [itemWidths, setItemWidths] = React2.useState(() => new Array(itemCount).fill(0));
+  React2.useEffect(() => {
     setItemWidths((previous) => previous.length === itemCount ? previous : resizeWidthBuffer(previous, itemCount));
   }, [itemCount]);
-  const setItemWidth = React5.useCallback((index, width) => {
+  const setItemWidth = React2.useCallback((index, width) => {
     setItemWidths((previous) => {
       if (index < 0 || index >= previous.length || previous[index] === width) return previous;
       const next = previous.slice();
@@ -755,15 +766,15 @@ function useNavOverflow(itemCount, gap) {
       return next;
     });
   }, []);
-  const setAvailableWidth = React5.useCallback(
+  const setAvailableWidth = React2.useCallback(
     (width) => setAvailableWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const setMoreWidth = React5.useCallback(
+  const setMoreWidth = React2.useCallback(
     (width) => setMoreWidthState((previous) => previous === width ? previous : width),
     []
   );
-  const visibleCount = React5.useMemo(
+  const visibleCount = React2.useMemo(
     () => computeVisibleCount({ availableWidth, itemWidths, moreWidth, gap }),
     [availableWidth, itemWidths, moreWidth, gap]
   );
@@ -775,8 +786,8 @@ function getReducedMotionQuery() {
   return window.matchMedia(REDUCED_MOTION_QUERY);
 }
 function useReducedMotion() {
-  const [reduced, setReduced] = React5.useState(() => getReducedMotionQuery()?.matches ?? false);
-  React5.useEffect(() => {
+  const [reduced, setReduced] = React2.useState(() => getReducedMotionQuery()?.matches ?? false);
+  React2.useEffect(() => {
     const mql = getReducedMotionQuery();
     if (mql === void 0 || mql.addEventListener === void 0) return void 0;
     const onChange = () => setReduced(mql.matches);
@@ -815,24 +826,24 @@ var NavBarInner = ({
   const primaryColor = theme.palette.primary["500"];
   const { width } = reactNative.useWindowDimensions();
   const reducedMotion = useReducedMotion();
-  const [open, setOpen] = React5.useState(false);
-  const [toggleFocused, setToggleFocused] = React5.useState(false);
+  const [open, setOpen] = React2.useState(false);
+  const [toggleFocused, setToggleFocused] = React2.useState(false);
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
-  const innerCapStyle = React5.useMemo(
+  const innerCapStyle = React2.useMemo(
     () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
     [contentMaxWidth]
   );
-  const toggleMenu = React5.useCallback(() => setOpen((v) => !v), []);
-  const handlePress = React5.useCallback(
+  const toggleMenu = React2.useCallback(() => setOpen((v) => !v), []);
+  const handlePress = React2.useCallback(
     (route) => {
       setOpen(false);
       onNavigate(route);
     },
     [onNavigate]
   );
-  const linkColors = React5.useMemo(
+  const linkColors = React2.useMemo(
     () => ({
       rest: colors.textSecondary,
       hoverText: colors.text,
@@ -854,7 +865,7 @@ var NavBarInner = ({
         containerStyle
       ],
       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: brand }) : null,
+        brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: renderTextSlot(brand, { color: colors.text }) }) : null,
         collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
@@ -887,7 +898,7 @@ 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(React5__default.default.Fragment, { children: renderLink(item) }, item.key)) });
+            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(React2__default.default.Fragment, { children: renderLink(item) }, item.key)) });
           }
           const visibleItems = items.slice(0, visibleCount);
           const overflowItems = items.slice(visibleCount);
@@ -931,7 +942,7 @@ var NavBarInner = ({
             }
           );
         })() : null,
-        showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: right }) : null
+        showLinks && right !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsed ? navBarStyles.rightStacked : navBarStyles.right, children: renderTextSlot(right, { color: colors.text }) }) : null
       ] })
     }
   );
@@ -1035,8 +1046,9 @@ var MobileDrawer = ({
   drawerTestID,
   scrimTestID
 }) => {
-  const panelRef = React5.useRef(null);
-  React5.useEffect(() => {
+  const { theme } = uiFeedback.useUi();
+  const panelRef = React2.useRef(null);
+  React2.useEffect(() => {
     const node = panelRef.current;
     if (node === null || typeof node.addEventListener !== "function") return void 0;
     const handleClick = (event) => {
@@ -1059,7 +1071,7 @@ var MobileDrawer = ({
         onPress: onClose
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: sidebar })
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: panelRef, "aria-modal": true, role: "dialog", style: styles2.panel, testID: drawerTestID, children: renderTextSlot(sidebar, { color: theme.colors.text }) })
   ] });
 };
 
@@ -1131,15 +1143,15 @@ var AppShell = ({
     range: railRange
   });
   const useDrawer = railMode === "drawer";
-  const [drawerOpen, setDrawerOpen] = React5.useState(false);
-  const openDrawer = React5.useCallback(() => setDrawerOpen(true), []);
-  const closeDrawer = React5.useCallback(() => setDrawerOpen(false), []);
-  React5.useEffect(() => {
+  const [drawerOpen, setDrawerOpen] = React2.useState(false);
+  const openDrawer = React2.useCallback(() => setDrawerOpen(true), []);
+  const closeDrawer = React2.useCallback(() => setDrawerOpen(false), []);
+  React2.useEffect(() => {
     if (!useDrawer && drawerOpen) setDrawerOpen(false);
   }, [useDrawer, drawerOpen]);
   const drawerLabels = { ...DEFAULT_DRAWER_LABELS, ...mobileMenu };
   const isUnauthenticated = gate !== void 0 && !gate.pending && !gate.authenticated;
-  React5.useEffect(() => {
+  React2.useEffect(() => {
     if (isUnauthenticated && gate !== void 0) gate.onRedirect();
   }, [isUnauthenticated, gate]);
   if (gate?.pending === true)
@@ -1166,13 +1178,13 @@ var AppShell = ({
         onOpen: openDrawer
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.headerFill, children: header })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: header });
-  const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: sidebar }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: collapsedSidebar }) : null;
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.headerFill, children: renderTextSlot(header, { color: theme.colors.text }) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.header}`, children: renderTextSlot(header, { color: theme.colors.text }) });
+  const railRegion = railMode === "full" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.sidebar}`, children: renderTextSlot(sidebar, { color: theme.colors.text }) }) : railMode === "collapsed" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.collapsedSidebar}`, children: renderTextSlot(collapsedSidebar, { color: theme.colors.text }) }) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles3.root, { backgroundColor: theme.colors.background }], testID, children: [
     headerRegion,
-    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: nav }) : nav }) : null,
-    banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: banner }) : null,
+    nav !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.nav}`, children: navInnerStyle !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navInnerStyle, children: renderTextSlot(nav, { color: theme.colors.text }) }) : renderTextSlot(nav, { color: theme.colors.text }) }) : null,
+    banner !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: `${testID}${APP_SHELL_SUFFIX.banner}`, children: renderTextSlot(banner, { color: theme.colors.text }) }) : null,
     railRegion !== null ? /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.bodyRow, children: [
       railRegion,
       scroller
@@ -1218,7 +1230,7 @@ var CollapsedRail = ({
         containerStyle
       ],
       children: [
-        header !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: header }) : null,
+        header !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.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;
@@ -1237,7 +1249,7 @@ var CollapsedRail = ({
           );
         }),
         /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.spacer }),
-        footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: footer }) : null
+        footer !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: collapsedRailStyles.slot, children: renderTextSlot(footer, { color: colors.text }) }) : null
       ]
     }
   );
@@ -1391,7 +1403,7 @@ var DarkModeControl = ({
   const primaryColor = theme.palette.primary["500"];
   const currentIndex = options.findIndex((option) => option.value === value);
   const current = currentIndex >= 0 ? options[currentIndex] : options[0];
-  const advance = React5.useCallback(() => {
+  const advance = React2.useCallback(() => {
     if (options.length === 0) return;
     const from = currentIndex >= 0 ? currentIndex : 0;
     const next = options[(from + 1) % options.length];