@dloizides/ui-nav 1.37.0 → 1.38.1

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
       ],
@@ -1909,7 +1908,7 @@ var styles9 = 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,
@@ -1947,6 +1946,8 @@ var MobileDrawer = ({
   const { theme } = useUi();
   const panelRef = useRef(null);
   const isFull = width === "full";
+  const viewport = useWindowDimensions();
+  const windowSize = isFull ? [styles9.windowFill, { width: viewport.width, height: viewport.height }] : null;
   const showHeaderBar = header !== void 0 || isFull;
   useEffect(() => {
     const node = panelRef.current;
@@ -1961,7 +1962,7 @@ var MobileDrawer = ({
     node.addEventListener("click", handleClick);
     return () => node.removeEventListener("click", handleClick);
   }, [onClose]);
-  return /* @__PURE__ */ jsxs(View, { style: styles9.overlay, children: [
+  return /* @__PURE__ */ jsxs(View, { style: [styles9.overlay, windowSize], children: [
     isFull ? null : /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1979,7 +1980,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__ */ jsx(
@@ -2188,7 +2189,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 +2203,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 +2210,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 +2240,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 +2269,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,