@dloizides/ui-nav 1.37.0 → 1.38.0

package/dist/index.mjs

@@ -839,8 +839,8 @@ var SIDEBAR_WIDTH_PX = {
   lg: 288
 };
 var NAV_BRAND_DEFAULTS = {
-  brandPlacement: "sidebar",
-  sidebarWidth: "default",
+  placement: "sidebar",
+  railWidth: "default",
   drawerHeader: "none",
   drawerWidth: "default"
 };
@@ -861,7 +861,6 @@ var Sidebar = ({
   pathname,
   onNavigate,
   title,
-  width: railWidth = "default",
   regionLabel,
   navigateHint = (label) => label,
   expandHint = "",
@@ -909,7 +908,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
       ],
@@ -2188,7 +2187,7 @@ function renderShellSidebar({ sideRail, nav, width, showBrand }) {
     Sidebar,
     {
       collapseHint: sideRail.collapseHint,
-      containerStyle: sideRail.containerStyle,
+      containerStyle: { width: SIDEBAR_WIDTH_PX[width], ...StyleSheet.flatten(sideRail.containerStyle) },
       enableInlineSearch: sideRail.enableInlineSearch,
       expandHint: sideRail.expandHint,
       footer: sideRail.footer,
@@ -2202,7 +2201,6 @@ function renderShellSidebar({ sideRail, nav, width, showBrand }) {
       search: sideRail.search,
       searchQuery: sideRail.searchQuery,
       title: showBrand ? brandSlot : null,
-      width,
       onNavigate: nav.onNavigate,
       onSearchChange: sideRail.onSearchChange
     }
@@ -2210,14 +2208,15 @@ function renderShellSidebar({ sideRail, nav, width, showBrand }) {
 }
 var styles11 = 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 } = useWindowDimensions();
+  const { colors } = useUi().theme;
   if (width < RAIL_FULL_BREAKPOINT) return /* @__PURE__ */ jsx(Fragment, { children });
   return /* @__PURE__ */ jsxs(View, { style: styles11.row, testID, children: [
-    /* @__PURE__ */ jsx(View, { style: [styles11.brand, brandWidth !== void 0 ? { width: brandWidth } : null], testID: `${testID}-brand`, children: brand }),
+    /* @__PURE__ */ jsx(View, { style: [styles11.brand, { backgroundColor: colors.background, borderBottomColor: colors.border }, brandWidth !== void 0 ? { width: brandWidth } : null], testID: `${testID}-brand`, children: brand }),
     /* @__PURE__ */ jsx(View, { style: styles11.fill, children })
   ] });
 };
@@ -2239,10 +2238,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
 }) => {
@@ -2271,11 +2267,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__ */ 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__ */ 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__ */ jsx(
     CollapsedRail,