@dloizides/ui-nav 1.38.0 → 1.39.0

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 = {
@@ -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,
       {
@@ -1914,7 +1917,7 @@ var styles9 = reactNative.StyleSheet.create({
   // 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 },
-  panelFull: { width: "100%" },
+  windowFill: { right: void 0, bottom: void 0 },
   panelBody: { flex: 1 },
   menuToggle: {
     minWidth: MIN_TOUCH_TARGET,
@@ -1952,6 +1955,8 @@ var MobileDrawer = ({
   const { theme } = uiFeedback.useUi();
   const panelRef = React.useRef(null);
   const isFull = width === "full";
+  const viewport = reactNative.useWindowDimensions();
+  const windowSize = isFull ? [styles9.windowFill, { width: viewport.width, height: viewport.height }] : null;
   const showHeaderBar = header !== void 0 || isFull;
   React.useEffect(() => {
     const node = panelRef.current;
@@ -1966,7 +1971,7 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles9.overlay, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles9.overlay, windowSize], children: [
     isFull ? null : /* @__PURE__ */ jsxRuntime.jsx(
       reactNative.Pressable,
       {
@@ -1984,7 +1989,7 @@ var MobileDrawer = ({
         ref: panelRef,
         "aria-modal": true,
         role: "dialog",
-        style: [styles9.panel, isFull ? styles9.panelFull : null, { backgroundColor: theme.colors.surface }],
+        style: [styles9.panel, windowSize, { backgroundColor: theme.colors.surface }],
         testID: drawerTestID,
         children: [
           showHeaderBar ? /* @__PURE__ */ jsxRuntime.jsx(