@dloizides/ui-nav 1.37.0 → 1.38.0

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.38.0
+
+- NAV-BRAND-1 D-NAVB-3 "One brand options prop": `NavShell` takes one `brand={{ placement, railWidth, drawerHeader, drawerWidth }}` prop instead of the four 1.37.0 props; `Sidebar.width` removed (the shell sets the rail width through `containerStyle`). The top-bar brand cell carries the top bar background and bottom border, so the header line runs over the rail.
+
 ## 1.37.0
 
 - NAV-BRAND-1 "Wider sidebar, logo and name in the top bar": `NavShell` gains `brandPlacement`, `sidebarWidth`, `drawerHeader`, `drawerWidth` (defaults = today); `Sidebar.width`; `AppShell.mobileMenu` takes `header` / `width` / `sidebar`. Exports `SIDEBAR_WIDTH_PX`, `NAV_BRAND_DEFAULTS`.

package/README.md

@@ -153,17 +153,17 @@ import { NavShell, type NavItem } from '@dloizides/ui-nav';
 
 ### Brand position, rail width and phone drawer (`NavShell`, NAV-BRAND-1)
 
-One prop per choice; every default keeps today's layout.
+One `brand` prop holds every choice; every default (`NAV_BRAND_DEFAULTS`) keeps today's layout.
 
-| Prop | Values | Default |
+| `brand` field | Values | Default |
 |---|---|---|
-| `brandPlacement` | `'sidebar'` (rail top) · `'topbar'` (top-left of the header, >= 768 px) | `'sidebar'` |
-| `sidebarWidth` | `'default'` 220 · `'sm'` 240 · `'md'` 264 · `'lg'` 288 px (`SIDEBAR_WIDTH_PX`) | `'default'` |
+| `placement` | `'sidebar'` (rail top) · `'topbar'` (top-left of the header, >= 768 px, same background and bottom border as the top bar) | `'sidebar'` |
+| `railWidth` | `'default'` 220 · `'sm'` 240 · `'md'` 264 · `'lg'` 288 px (`SIDEBAR_WIDTH_PX`) | `'default'` |
 | `drawerHeader` | `'none'` · `'brand'` (brand once in the open drawer's header, with a close button) | `'none'` |
 | `drawerWidth` | `'default'` (280 px panel + scrim) · `'full'` (whole screen, close button) | `'default'` |
 
 ```tsx
-<NavShell layout="side" brandPlacement="topbar" sidebarWidth="sm" drawerHeader="brand" drawerWidth="full"
+<NavShell layout="side" brand={{ placement: 'topbar', railWidth: 'sm', drawerHeader: 'brand', drawerWidth: 'full' }}
   sideRail={{ items, title, brand: <AppBrand /> }} header={<Topbar ... />} {...rest} />
 ```
 

package/dist/index.d.mts

@@ -53,10 +53,10 @@ type DrawerHeader = 'none' | 'brand';
 type DrawerWidth = 'default' | 'full';
 /** Pixel width of each named side-rail width token. */
 declare const SIDEBAR_WIDTH_PX: Readonly<Record<SidebarWidth, number>>;
-/** Shell brand and drawer options; each is one prop with a default that keeps today's layout. */
+/** Fields of NavShell's one `brand` prop; each has a default that keeps today's layout. */
 interface NavBrandOptions {
-    brandPlacement?: BrandPlacement;
-    sidebarWidth?: SidebarWidth;
+    placement?: BrandPlacement;
+    railWidth?: SidebarWidth;
     drawerHeader?: DrawerHeader;
     drawerWidth?: DrawerWidth;
 }
@@ -175,8 +175,6 @@ interface SidebarProps {
     onNavigate: (route: string) => void;
     /** Localized menu title (heading); `null` leaves the slot empty. */
     title: React.ReactNode;
-    /** Named rail width (default 220 px). */
-    width?: SidebarWidth;
     /** Localized accessibility label for the navigation landmark. */
     regionLabel: string;
     /** a11y hint for a leaf item, given its label. Defaults to the label. */
@@ -215,7 +213,7 @@ interface SidebarProps {
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const Sidebar: ({ items, pathname, onNavigate, title, width: railWidth, regionLabel, navigateHint, expandHint, collapseHint, renderChevron, enableInlineSearch, search, paletteTrigger, searchQuery, onSearchChange, header, footer, containerStyle, }: SidebarProps) => React.ReactElement;
+declare const Sidebar: ({ items, pathname, onNavigate, title, regionLabel, navigateHint, expandHint, collapseHint, renderChevron, enableInlineSearch, search, paletteTrigger, searchQuery, onSearchChange, header, footer, containerStyle, }: SidebarProps) => React.ReactElement;
 
 /**
  * SidebarChevron — the built-in disclosure caret for an expandable sidebar
@@ -871,7 +869,9 @@ interface NavShellSideRail {
  * auth gate, state cards, banner, and width policy — passes through untouched.
  */
 type ForwardedShellProps = Omit<AppShellProps, 'header' | 'sidebar' | 'children'>;
-interface NavShellProps extends ForwardedShellProps, NavBrandOptions {
+interface NavShellProps extends ForwardedShellProps {
+    /** Brand placement, rail width and phone drawer options; defaults keep today's layout. */
+    brand?: NavBrandOptions;
     /** Which regions to render: a top bar, a side rail, or both. */
     layout: NavShellLayout;
     /** Current active route/path — drives active highlighting on both regions. */
@@ -903,7 +903,7 @@ interface NavShellProps extends ForwardedShellProps, NavBrandOptions {
     sideRail?: NavShellSideRail;
     children: React.ReactNode;
 }
-declare const NavShell: ({ layout, pathname, onNavigate, regionLabel, navigateHint, topBar, header, sideRail, children, collapsedSidebar: collapsedSidebarProp, collapsedRailRange: collapsedRailRangeProp, brandPlacement, sidebarWidth, drawerHeader, drawerWidth, mobileMenu, ...shellProps }: NavShellProps) => React.ReactElement | null;
+declare const NavShell: ({ layout, pathname, onNavigate, regionLabel, navigateHint, topBar, header, sideRail, children, collapsedSidebar: collapsedSidebarProp, collapsedRailRange: collapsedRailRangeProp, brand, mobileMenu, ...shellProps }: NavShellProps) => React.ReactElement | null;
 
 /**
  * CollapsedRail — the icon-only vertical rail for the intermediate (tablet) tier

package/dist/index.d.ts

@@ -53,10 +53,10 @@ type DrawerHeader = 'none' | 'brand';
 type DrawerWidth = 'default' | 'full';
 /** Pixel width of each named side-rail width token. */
 declare const SIDEBAR_WIDTH_PX: Readonly<Record<SidebarWidth, number>>;
-/** Shell brand and drawer options; each is one prop with a default that keeps today's layout. */
+/** Fields of NavShell's one `brand` prop; each has a default that keeps today's layout. */
 interface NavBrandOptions {
-    brandPlacement?: BrandPlacement;
-    sidebarWidth?: SidebarWidth;
+    placement?: BrandPlacement;
+    railWidth?: SidebarWidth;
     drawerHeader?: DrawerHeader;
     drawerWidth?: DrawerWidth;
 }
@@ -175,8 +175,6 @@ interface SidebarProps {
     onNavigate: (route: string) => void;
     /** Localized menu title (heading); `null` leaves the slot empty. */
     title: React.ReactNode;
-    /** Named rail width (default 220 px). */
-    width?: SidebarWidth;
     /** Localized accessibility label for the navigation landmark. */
     regionLabel: string;
     /** a11y hint for a leaf item, given its label. Defaults to the label. */
@@ -215,7 +213,7 @@ interface SidebarProps {
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
 }
-declare const Sidebar: ({ items, pathname, onNavigate, title, width: railWidth, regionLabel, navigateHint, expandHint, collapseHint, renderChevron, enableInlineSearch, search, paletteTrigger, searchQuery, onSearchChange, header, footer, containerStyle, }: SidebarProps) => React.ReactElement;
+declare const Sidebar: ({ items, pathname, onNavigate, title, regionLabel, navigateHint, expandHint, collapseHint, renderChevron, enableInlineSearch, search, paletteTrigger, searchQuery, onSearchChange, header, footer, containerStyle, }: SidebarProps) => React.ReactElement;
 
 /**
  * SidebarChevron — the built-in disclosure caret for an expandable sidebar
@@ -871,7 +869,9 @@ interface NavShellSideRail {
  * auth gate, state cards, banner, and width policy — passes through untouched.
  */
 type ForwardedShellProps = Omit<AppShellProps, 'header' | 'sidebar' | 'children'>;
-interface NavShellProps extends ForwardedShellProps, NavBrandOptions {
+interface NavShellProps extends ForwardedShellProps {
+    /** Brand placement, rail width and phone drawer options; defaults keep today's layout. */
+    brand?: NavBrandOptions;
     /** Which regions to render: a top bar, a side rail, or both. */
     layout: NavShellLayout;
     /** Current active route/path — drives active highlighting on both regions. */
@@ -903,7 +903,7 @@ interface NavShellProps extends ForwardedShellProps, NavBrandOptions {
     sideRail?: NavShellSideRail;
     children: React.ReactNode;
 }
-declare const NavShell: ({ layout, pathname, onNavigate, regionLabel, navigateHint, topBar, header, sideRail, children, collapsedSidebar: collapsedSidebarProp, collapsedRailRange: collapsedRailRangeProp, brandPlacement, sidebarWidth, drawerHeader, drawerWidth, mobileMenu, ...shellProps }: NavShellProps) => React.ReactElement | null;
+declare const NavShell: ({ layout, pathname, onNavigate, regionLabel, navigateHint, topBar, header, sideRail, children, collapsedSidebar: collapsedSidebarProp, collapsedRailRange: collapsedRailRangeProp, brand, mobileMenu, ...shellProps }: NavShellProps) => React.ReactElement | null;
 
 /**
  * CollapsedRail — the icon-only vertical rail for the intermediate (tablet) tier

package/dist/index.js

@@ -845,8 +845,8 @@ var SIDEBAR_WIDTH_PX = {
   lg: 288
 };
 var NAV_BRAND_DEFAULTS = {
-  brandPlacement: "sidebar",
-  sidebarWidth: "default",
+  placement: "sidebar",
+  railWidth: "default",
   drawerHeader: "none",
   drawerWidth: "default"
 };
@@ -867,7 +867,6 @@ var Sidebar = ({
   pathname,
   onNavigate,
   title,
-  width: railWidth = "default",
   regionLabel,
   navigateHint = (label) => label,
   expandHint = "",
@@ -915,7 +914,7 @@ var Sidebar = ({
       role: "navigation",
       style: [
         navStyles.sidebarContainer,
-        { width: SIDEBAR_WIDTH_PX[railWidth] },
+        { width: SIDEBAR_WIDTH_PX.default },
         { backgroundColor: colors.surface, borderRightColor: colors.border },
         containerStyle
       ],
@@ -2194,7 +2193,7 @@ function renderShellSidebar({ sideRail, nav, width, showBrand }) {
     Sidebar,
     {
       collapseHint: sideRail.collapseHint,
-      containerStyle: sideRail.containerStyle,
+      containerStyle: { width: SIDEBAR_WIDTH_PX[width], ...reactNative.StyleSheet.flatten(sideRail.containerStyle) },
       enableInlineSearch: sideRail.enableInlineSearch,
       expandHint: sideRail.expandHint,
       footer: sideRail.footer,
@@ -2208,7 +2207,6 @@ function renderShellSidebar({ sideRail, nav, width, showBrand }) {
       search: sideRail.search,
       searchQuery: sideRail.searchQuery,
       title: showBrand ? brandSlot : null,
-      width,
       onNavigate: nav.onNavigate,
       onSearchChange: sideRail.onSearchChange
     }
@@ -2216,14 +2214,15 @@ function renderShellSidebar({ sideRail, nav, width, showBrand }) {
 }
 var styles11 = reactNative.StyleSheet.create({
   row: { flexDirection: "row", alignItems: "center" },
-  brand: { justifyContent: "center", paddingHorizontal: 12 },
+  brand: { justifyContent: "center", alignSelf: "stretch", paddingHorizontal: 12, borderBottomWidth: 1 },
   fill: { flex: 1 }
 });
 var TopbarBrandRow = ({ brand, brandWidth, testID, children }) => {
   const { width } = reactNative.useWindowDimensions();
+  const { colors } = uiFeedback.useUi().theme;
   if (width < RAIL_FULL_BREAKPOINT) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles11.row, testID, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.brand, brandWidth !== void 0 ? { width: brandWidth } : null], testID: `${testID}-brand`, children: brand }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: [styles11.brand, { backgroundColor: colors.background, borderBottomColor: colors.border }, brandWidth !== void 0 ? { width: brandWidth } : null], testID: `${testID}-brand`, children: brand }),
     /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles11.fill, children })
   ] });
 };
@@ -2245,10 +2244,7 @@ var NavShell = ({
   children,
   collapsedSidebar: collapsedSidebarProp,
   collapsedRailRange: collapsedRailRangeProp,
-  brandPlacement = NAV_BRAND_DEFAULTS.brandPlacement,
-  sidebarWidth = NAV_BRAND_DEFAULTS.sidebarWidth,
-  drawerHeader = NAV_BRAND_DEFAULTS.drawerHeader,
-  drawerWidth = NAV_BRAND_DEFAULTS.drawerWidth,
+  brand,
   mobileMenu,
   ...shellProps
 }) => {
@@ -2277,11 +2273,12 @@ var NavShell = ({
   ) : null;
   const nav = { pathname, onNavigate, regionLabel, navigateHint };
   const rail = showSideRail ? sideRail : void 0;
-  const brandInBar = brandPlacement === "topbar" && rail?.brand !== void 0;
+  const { placement, railWidth, drawerHeader, drawerWidth } = { ...NAV_BRAND_DEFAULTS, ...brand };
+  const brandInBar = placement === "topbar" && rail?.brand !== void 0;
   const brandInDrawer = drawerHeader === "brand" ? rail?.brand : void 0;
-  const sidebarNode = rail === void 0 ? void 0 : renderShellSidebar({ sideRail: rail, nav, width: sidebarWidth, showBrand: !brandInBar });
-  const drawerSidebar = rail !== void 0 && brandInDrawer !== void 0 && !brandInBar ? renderShellSidebar({ sideRail: rail, nav, width: sidebarWidth, showBrand: false }) : void 0;
-  const shellHeader = brandInBar ? /* @__PURE__ */ jsxRuntime.jsx(TopbarBrandRow, { brand: rail?.brand, brandWidth: SIDEBAR_WIDTH_PX[sidebarWidth], testID: `${shellProps.testID}-topbar-brand-row`, children: headerNode }) : headerNode;
+  const sidebarNode = rail === void 0 ? void 0 : renderShellSidebar({ sideRail: rail, nav, width: railWidth, showBrand: !brandInBar });
+  const drawerSidebar = rail !== void 0 && brandInDrawer !== void 0 && !brandInBar ? renderShellSidebar({ sideRail: rail, nav, width: railWidth, showBrand: false }) : void 0;
+  const shellHeader = brandInBar ? /* @__PURE__ */ jsxRuntime.jsx(TopbarBrandRow, { brand: rail?.brand, brandWidth: SIDEBAR_WIDTH_PX[railWidth], testID: `${shellProps.testID}-topbar-brand-row`, children: headerNode }) : headerNode;
   const collapsedCfg = showSideRail ? sideRail?.collapsed : void 0;
   const collapsedNode = collapsedCfg !== void 0 && sideRail !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
     CollapsedRail,