@dloizides/ui-nav 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.9.0
+
+**`NavBar.contentMaxWidth` — a full-bleed bar with a centred content column.**
+An optional content-column cap (px), forwarded via `NavShell.topBar.contentMaxWidth`.
+When set, the OUTER `NavBar` container — which carries the bar background + bottom
+border (from `barTheme` / theme surface + any `containerStyle`, e.g. the AML
+radial-glow appbar) — stays FULL WIDTH (full-bleed), while the INNER row (brand +
+links + right) is capped to `contentMaxWidth` and centred. This restores the v1-console
+`.ui-appbar` (full-bleed) + `.ui-appbar-inner { max-width; margin: 0 auto }` shape:
+previously an app had to put the cap on the container's `containerStyle`, which also
+capped the dark background and left light gutters on wide viewports. Omit it and the
+inner spans the full container (unchanged — byte-identical to before). The priority+
+overflow "…" fit measures the capped inner's rendered width, so it keeps working
+against the content column, not the full-bleed container. Purely additive.
+
 ## 1.8.0
 
 The navigation shell becomes the ONE shell for every portal: a first-class

package/README.md

@@ -126,6 +126,7 @@ import { NavShell, type NavItem } from '@dloizides/ui-nav';
     right: <><LanguageSwitcher /><UserChip /></>,
     overflowLabel: FM('menu.more'),
     barTheme: darkChromeTheme,          // optional: dark bar over a light page
+    contentMaxWidth: 1180,              // optional: full-bleed bar, inner capped + centred
   }}
   sideRail={{
     items: sectionItems,                // side sections (leaf + expandable)
@@ -169,6 +170,19 @@ are re-passed so labels keep localizing; every colour still flows through the th
 (style-only). Custom appbar backgrounds (e.g. a radial-glow gradient) stay
 expressible via `containerStyle`.
 
+### Full-bleed bar with a centred content column (`NavBar.contentMaxWidth`)
+
+Pass `contentMaxWidth` (px) — via `NavBar.contentMaxWidth` or
+`NavShell.topBar.contentMaxWidth` — to make the bar **full-bleed** while its content
+stays in a centred column. The OUTER container (which carries the bar background +
+bottom border from `barTheme` / theme surface + any `containerStyle`, e.g. AML's
+radial-glow appbar) spans the full viewport width; the INNER row (brand + links +
+right) is capped to `contentMaxWidth` and centred — the v1-console `.ui-appbar`
+(full-bleed) + `.ui-appbar-inner { max-width; margin: 0 auto }` shape. Omit it and
+the inner spans the full container (unchanged). The priority+ overflow "…" fit
+measures the capped inner's rendered width, so it keeps working against the content
+column, not the full-bleed container.
+
 ### Cross-navigation pills (`PillNav`)
 
 A row of fully-rounded pills from a `NavItem[]` — kefi's coral dashboard switcher.

package/dist/index.d.mts

@@ -210,6 +210,16 @@ interface NavBarProps {
     overflowHint?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
+    /**
+     * Optional content-column cap (px). When set, the OUTER container — which carries
+     * the background + bottom border (`barTheme`/theme surface + any `containerStyle`,
+     * e.g. the AML radial-glow appbar) — stays FULL WIDTH (full-bleed), while the INNER
+     * row (brand + links + right) is capped to this width and centred. Omit for the
+     * default where the inner spans the full container. The priority+ overflow "…" fit
+     * measures the (now capped) inner's rendered width via `onLayout`, so it keeps
+     * working against the capped column, not the full-bleed container.
+     */
+    contentMaxWidth?: number;
     /**
      * Optional CHROME theme override — re-provisions the `@dloizides/ui-feedback`
      * theme for the bar ONLY, so the top bar can be dark while the page below keeps
@@ -508,6 +518,13 @@ interface NavShellTopBar {
      * `ViewStyle`, the AML radial-glow appbar). Style-only.
      */
     containerStyle?: ViewStyle | ViewStyle[];
+    /**
+     * Optional content-column cap (px) for the top bar. When set, the bar's
+     * background + bottom border (from `containerStyle` / `barTheme`) stay FULL WIDTH
+     * (full-bleed) while the inner brand + links + right row is capped to this width
+     * and centred — the AML v1-console appbar shape. Forwarded to `NavBar.contentMaxWidth`.
+     */
+    contentMaxWidth?: number;
     /**
      * Optional CHROME theme override for the top bar only (dark bar over a light
      * page). Forwarded to `NavBar.barTheme`. Style-only — see `NavBar`.

package/dist/index.d.ts

@@ -210,6 +210,16 @@ interface NavBarProps {
     overflowHint?: string;
     /** Extra container style overrides. */
     containerStyle?: ViewStyle | ViewStyle[];
+    /**
+     * Optional content-column cap (px). When set, the OUTER container — which carries
+     * the background + bottom border (`barTheme`/theme surface + any `containerStyle`,
+     * e.g. the AML radial-glow appbar) — stays FULL WIDTH (full-bleed), while the INNER
+     * row (brand + links + right) is capped to this width and centred. Omit for the
+     * default where the inner spans the full container. The priority+ overflow "…" fit
+     * measures the (now capped) inner's rendered width via `onLayout`, so it keeps
+     * working against the capped column, not the full-bleed container.
+     */
+    contentMaxWidth?: number;
     /**
      * Optional CHROME theme override — re-provisions the `@dloizides/ui-feedback`
      * theme for the bar ONLY, so the top bar can be dark while the page below keeps
@@ -508,6 +518,13 @@ interface NavShellTopBar {
      * `ViewStyle`, the AML radial-glow appbar). Style-only.
      */
     containerStyle?: ViewStyle | ViewStyle[];
+    /**
+     * Optional content-column cap (px) for the top bar. When set, the bar's
+     * background + bottom border (from `containerStyle` / `barTheme`) stay FULL WIDTH
+     * (full-bleed) while the inner brand + links + right row is capped to this width
+     * and centred — the AML v1-console appbar shape. Forwarded to `NavBar.contentMaxWidth`.
+     */
+    contentMaxWidth?: number;
     /**
      * Optional CHROME theme override for the top bar only (dark bar over a light
      * page). Forwarded to `NavBar.barTheme`. Style-only — see `NavBar`.

package/dist/index.js

@@ -806,7 +806,8 @@ var NavBarInner = ({
   collapseBelow = DEFAULT_COLLAPSE_BELOW,
   overflowLabel = "More",
   overflowHint = "",
-  containerStyle
+  containerStyle,
+  contentMaxWidth
 }) => {
   const { theme } = uiFeedback.useUi();
   const colors = theme.colors;
@@ -818,6 +819,10 @@ var NavBarInner = ({
   const { visibleCount, setAvailableWidth, setItemWidth, setMoreWidth } = useNavOverflow(items.length, NAV_LINK_GAP);
   const collapsed = width < collapseBelow;
   const showLinks = !collapsed || open;
+  const innerCapStyle = React5.useMemo(
+    () => contentMaxWidth === void 0 ? null : { maxWidth: contentMaxWidth, width: "100%", alignSelf: "center" },
+    [contentMaxWidth]
+  );
   const toggleMenu = React5.useCallback(() => setOpen((v) => !v), []);
   const handlePress = React5.useCallback(
     (route) => {
@@ -847,7 +852,7 @@ var NavBarInner = ({
         { backgroundColor: colors.surface, borderBottomColor: colors.border },
         containerStyle
       ],
-      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap], children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [navBarStyles.inner, collapsed ? null : navBarStyles.innerNoWrap, innerCapStyle], children: [
         brand !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: navBarStyles.brand, children: brand }) : null,
         collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
@@ -1265,6 +1270,7 @@ var NavShell = ({
       brand: topBar.brand,
       collapseBelow: topBar.collapseBelow,
       containerStyle: topBar.containerStyle,
+      contentMaxWidth: topBar.contentMaxWidth,
       items: topBar.items,
       menuHint: topBar.menuHint,
       menuLabel: topBar.menuLabel,