@dloizides/ui-nav 1.26.0 → 1.26.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 1.26.2
+
+- KEFI-LAUNCH-1 "Do every open Kefi task before the public launch": a long account name no longer overlaps the `Topbar` center slot at 360 px. The center slot keeps its content width (`flexShrink: 0`); only the account name gives way. The overlap dates from 1.24.0, when the slot was added.
+
+## 1.26.1
+
+- KEFI-LAUNCH-1 "Do every open Kefi task before the public launch": the `Topbar` left slot no longer wraps beside a long account name at 360 px. The left slot keeps its width (`flexShrink: 0`) and the account name truncates to one line.
+
 ## 1.25.0
 
 - `PillNav` / `PillNavMenu` get an optional `menuHeading`: a visible, non-focusable heading at the top of the open `Menu` that also names it (needs `@dloizides/ui-layout` >= 1.30.0) (KEFI-EDITOR-HEADER-1 "Compact the landing editor header").

package/dist/index.d.mts

@@ -1356,7 +1356,8 @@ declare const navStyles: {
         justifyContent: "space-between";
     };
     topbarLeft: {
-        flex: number;
+        flexGrow: number;
+        flexShrink: number;
     };
     topbarCenter: {
         flexShrink: number;
@@ -1368,6 +1369,8 @@ declare const navStyles: {
     topbarRight: {
         flexDirection: "row";
         alignItems: "center";
+        flexShrink: number;
+        minWidth: number;
     };
     topbarRowItem: {
         marginHorizontal: number;
@@ -1382,11 +1385,16 @@ declare const navStyles: {
     userBlock: {
         marginHorizontal: number;
         alignItems: "flex-end";
+        flexShrink: number;
+        minWidth: number;
     };
     userName: {
         fontWeight: "600";
+        maxWidth: "100%";
     };
     accountNameBtn: {
+        flexShrink: number;
+        maxWidth: "100%";
         minHeight: number;
         minWidth: number;
         justifyContent: "center";

package/dist/index.d.ts

@@ -1356,7 +1356,8 @@ declare const navStyles: {
         justifyContent: "space-between";
     };
     topbarLeft: {
-        flex: number;
+        flexGrow: number;
+        flexShrink: number;
     };
     topbarCenter: {
         flexShrink: number;
@@ -1368,6 +1369,8 @@ declare const navStyles: {
     topbarRight: {
         flexDirection: "row";
         alignItems: "center";
+        flexShrink: number;
+        minWidth: number;
     };
     topbarRowItem: {
         marginHorizontal: number;
@@ -1382,11 +1385,16 @@ declare const navStyles: {
     userBlock: {
         marginHorizontal: number;
         alignItems: "flex-end";
+        flexShrink: number;
+        minWidth: number;
     };
     userName: {
         fontWeight: "600";
+        maxWidth: "100%";
     };
     accountNameBtn: {
+        flexShrink: number;
+        maxWidth: "100%";
         minHeight: number;
         minWidth: number;
         justifyContent: "center";

package/dist/index.js

@@ -70,9 +70,9 @@ var navStyles = reactNative.StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between"
   },
-  topbarLeft: { flex: 1 },
-  topbarCenter: { flexShrink: 1, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
-  topbarRight: { flexDirection: "row", alignItems: "center" },
+  topbarLeft: { flexGrow: 1, flexShrink: 0 },
+  topbarCenter: { flexShrink: 0, minWidth: 0, flexDirection: "row", alignItems: "center", marginHorizontal: 8 },
+  topbarRight: { flexDirection: "row", alignItems: "center", flexShrink: 1, minWidth: 0 },
   topbarRowItem: {
     marginHorizontal: 8,
     alignItems: "center",
@@ -81,14 +81,9 @@ var navStyles = reactNative.StyleSheet.create({
     minWidth: MIN_TOUCH_TARGET
   },
   topbarLabel: { fontSize: 14 },
-  userBlock: { marginHorizontal: 12, alignItems: "flex-end" },
-  userName: { fontWeight: "600" },
-  accountNameBtn: {
-    minHeight: MIN_TOUCH_TARGET,
-    minWidth: MIN_TOUCH_TARGET,
-    justifyContent: "center",
-    alignItems: "flex-end"
-  },
+  userBlock: { marginHorizontal: 12, alignItems: "flex-end", flexShrink: 1, minWidth: 0 },
+  userName: { fontWeight: "600", maxWidth: "100%" },
+  accountNameBtn: { flexShrink: 1, maxWidth: "100%", minHeight: MIN_TOUCH_TARGET, minWidth: MIN_TOUCH_TARGET, justifyContent: "center", alignItems: "flex-end" },
   userEmail: { fontSize: 12 },
   accountBtn: {
     marginLeft: 8,
@@ -1001,9 +996,9 @@ var Topbar = ({
                 style: navStyles.accountNameBtn,
                 testID: richAccount.accountTestID ?? NAV_TEST_IDS.accountName,
                 onPress: richAccount.onAccount,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], children: richAccount.displayName })
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
+            ) : /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [navStyles.userName, { color: colors.text }], testID: NAV_TEST_IDS.accountName, children: richAccount.displayName }),
             richAccount.tenantName !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
               reactNative.Text,
               {