@dloizides/ui-nav 1.8.0 → 1.10.0

package/dist/index.mjs

@@ -534,6 +534,7 @@ var Topbar = ({
               accessibilityLabel: language.label,
               ringColor: primaryColor,
               style: navStyles.topbarRowItem,
+              testID: language.testID,
               onPress: language.onPress,
               children: /* @__PURE__ */ jsx(Text, { style: [navStyles.topbarLabel, { color: colors.text }], children: language.label })
             }
@@ -547,10 +548,10 @@ var Topbar = ({
             richAccount.onAccount ? /* @__PURE__ */ jsx(
               FocusableTouchable,
               {
-                accessibilityHint: richAccount.displayName,
+                accessibilityHint: richAccount.accountHint ?? richAccount.displayName,
                 accessibilityLabel: richAccount.displayName,
                 ringColor: primaryColor,
-                testID: NAV_TEST_IDS.accountName,
+                testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
                 children: /* @__PURE__ */ jsx(Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
               }
@@ -800,7 +801,8 @@ var NavBarInner = ({
   collapseBelow = DEFAULT_COLLAPSE_BELOW,
   overflowLabel = "More",
   overflowHint = "",
-  containerStyle
+  containerStyle,
+  contentMaxWidth
 }) => {
   const { theme } = useUi();
   const colors = theme.colors;
@@ -812,6 +814,10 @@ var NavBarInner = ({
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
+  const innerCapStyle = useMemo(
+    () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
+    [contentMaxWidth]
+  );
   const toggleMenu = useCallback(() => setOpen((v) => !v), []);
   const handlePress = useCallback(
     (route) => {
@@ -841,7 +847,7 @@ var NavBarInner = ({
         { backgroundColor: colors.surface, borderBottomColor: colors.border },
         containerStyle
       ],
-      children: /* @__PURE__ */ jsxs(View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap], children: [
+      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,
         collapsed ? /* @__PURE__ */ jsx(
           Pressable,
@@ -1230,8 +1236,8 @@ var CollapsedRail = ({
     }
   );
 };
-function wantsTopBar(layout, hasHeader, hasTopBar) {
-  return layout === "top" || layout === "both" || hasHeader || layout === "side" && hasTopBar;
+function wantsTopBar(layout, hasHeader) {
+  return layout === "top" || layout === "both" || hasHeader;
 }
 function wantsSideRail(layout, hasSideRail) {
   return (layout === "side" || layout === "both") && hasSideRail;
@@ -1250,7 +1256,7 @@ var NavShell = ({
   collapsedRailRange: collapsedRailRangeProp,
   ...shellProps
 }) => {
-  const showTopBar = wantsTopBar(layout, header !== void 0, topBar !== void 0);
+  const showTopBar = wantsTopBar(layout, header !== void 0);
   const showSideRail = wantsSideRail(layout, sideRail !== void 0);
   const headerNode = header !== void 0 ? header : showTopBar && topBar !== void 0 ? /* @__PURE__ */ jsx(
     NavBar,
@@ -1259,6 +1265,7 @@ var NavShell = ({
       brand: topBar.brand,
       collapseBelow: topBar.collapseBelow,
       containerStyle: topBar.containerStyle,
+      contentMaxWidth: topBar.contentMaxWidth,
       items: topBar.items,
       menuHint: topBar.menuHint,
       menuLabel: topBar.menuLabel,