@dloizides/ui-nav 1.38.1 → 1.39.1

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ViewStyle, ImageSourcePropType, StyleProp } from 'react-native';
 import { UiTheme } from '@dloizides/ui-feedback';
 import { DropdownVariant } from '@dloizides/ui-layout';
@@ -498,9 +498,10 @@ interface BrandMarkProps {
     onNavigate: (route: string) => void;
     size?: number;
     iconOnly?: boolean;
+    mark?: ReactNode;
 }
-/** The app icon with its name, as a link to the app's home route. */
-declare const BrandMark: ({ source, name, route, label, onNavigate, size, iconOnly, }: BrandMarkProps) => React.ReactElement;
+/** The app icon (or a caller-drawn `mark` in the same box) with its name, as a link to the app's home route. */
+declare const BrandMark: ({ source, name, route, label, onNavigate, size, iconOnly, mark, }: BrandMarkProps) => React.ReactElement;
 
 /**
  * `Nav` — ONE component that renders EITHER the horizontal top bar (`NavBar`) or the
@@ -1169,6 +1170,7 @@ declare const NAV_TEST_IDS: {
     readonly topbarCenter: "topbar-center";
     readonly brandHome: "nav-brand-home";
     readonly brandMarkIcon: "nav-brand-mark-icon";
+    readonly brandMarkSlot: "nav-brand-mark-slot";
     readonly brandMarkName: "nav-brand-mark-name";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { ViewStyle, ImageSourcePropType, StyleProp } from 'react-native';
 import { UiTheme } from '@dloizides/ui-feedback';
 import { DropdownVariant } from '@dloizides/ui-layout';
@@ -498,9 +498,10 @@ interface BrandMarkProps {
     onNavigate: (route: string) => void;
     size?: number;
     iconOnly?: boolean;
+    mark?: ReactNode;
 }
-/** The app icon with its name, as a link to the app's home route. */
-declare const BrandMark: ({ source, name, route, label, onNavigate, size, iconOnly, }: BrandMarkProps) => React.ReactElement;
+/** The app icon (or a caller-drawn `mark` in the same box) with its name, as a link to the app's home route. */
+declare const BrandMark: ({ source, name, route, label, onNavigate, size, iconOnly, mark, }: BrandMarkProps) => React.ReactElement;
 
 /**
  * `Nav` — ONE component that renders EITHER the horizontal top bar (`NavBar`) or the
@@ -1169,6 +1170,7 @@ declare const NAV_TEST_IDS: {
     readonly topbarCenter: "topbar-center";
     readonly brandHome: "nav-brand-home";
     readonly brandMarkIcon: "nav-brand-mark-icon";
+    readonly brandMarkSlot: "nav-brand-mark-slot";
     readonly brandMarkName: "nav-brand-mark-name";
 };
 /** Suffixes appended to an `AppShell`'s required `testID` to name its regions. */

package/dist/index.js

@@ -986,6 +986,7 @@ var NAV_TEST_IDS = {
   topbarCenter: "topbar-center",
   brandHome: "nav-brand-home",
   brandMarkIcon: "nav-brand-mark-icon",
+  brandMarkSlot: "nav-brand-mark-slot",
   brandMarkName: "nav-brand-mark-name"
 };
 var APP_SHELL_SUFFIX = {
@@ -1109,13 +1110,13 @@ var Topbar = ({
           style: navStyles.accountNameBtn,
           testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
           onPress: richAccount.onAccount,
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
+          children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], children: richAccount.displayName })
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
+      ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, WRAP_ANYWHERE, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
       richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.Text,
         {
-          style: [navStyles.accountTenant, { color: colors.textSecondary }],
+          style: [navStyles.accountTenant, WRAP_ANYWHERE, { color: colors.textSecondary }],
           testID: NAV_TEST_IDS.accountTenant,
           children: richAccount.tenantName
         }
@@ -1726,19 +1727,21 @@ var BrandMark = ({
   label,
   onNavigate,
   size = DEFAULT_ICON_SIZE,
-  iconOnly = false
+  iconOnly = false,
+  mark
 }) => {
   const { theme } = uiFeedback.useUi();
+  const box = { height: size, width: size };
   return /* @__PURE__ */ jsxRuntime.jsx(BrandHomeLink, { label, route, onNavigate, children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles5.row, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
+    mark === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Image,
       {
         accessibilityElementsHidden: true,
         source,
-        style: { height: size, width: size },
+        style: box,
         testID: NAV_TEST_IDS.brandMarkIcon
       }
-    ),
+    ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { accessibilityElementsHidden: true, style: box, testID: NAV_TEST_IDS.brandMarkSlot, children: mark }),
     iconOnly ? null : /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Text,
       {