jfs-components 0.0.79 → 0.0.85

package/lib/module/components/AppBar/AppBar.js

@@ -7,10 +7,18 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider';
 import NavArrow from '../NavArrow/NavArrow';
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SubPage "slot wrap" geometry, taken directly from the Figma design
+// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
+// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
+// item so it fills / shrinks responsively within that box.
+const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192;
+const SUBPAGE_MIDDLE_HEIGHT = 32;
+const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21;
 export default function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
+  middleSlotWidth = SUBPAGE_MIDDLE_DEFAULT_WIDTH,
   actionsSlot,
   modes: propModes = EMPTY_MODES,
   onLeadingPress,
@@ -112,13 +120,50 @@ export default function AppBar({
     children: cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)
   }) : null;
 
-  // When there is no middleSlot we want leading & actions pinned to the
-  // outer edges, so we apply `space-between` at the wrapper. With a middle
-  // slot present, the middle (flex: 1) absorbs the remaining space, so
-  // `space-between` is a no-op.
+  // SubPage centers its middle slot via absolute positioning (see Figma
+  // "slot wrap"), so it never participates in the row flow. Only MainPage
+  // keeps the legacy in-flow middle slot.
+  const hasInFlowMiddle = isMain && !!processedMiddle;
+
+  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
+  // remaining space, so leading & actions sit at the edges naturally. In all
+  // other cases we pin leading & actions to the outer edges with
+  // `space-between`; the SubPage middle floats above, centered.
   const wrapperStyle = {
     ...containerStyle,
-    justifyContent: processedMiddle ? 'flex-start' : 'space-between'
+    justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
+  };
+
+  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
+  // centering a fixed-height box with `top/left: 50%` + transform (which on
+  // Android resolves the percentage against an intermediate, content-driven
+  // parent height and lands a few px too high), the overlay STRETCHES to fill
+  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
+  // flexbox. This uses the exact same full-height vertical reference as the
+  // leading/actions row (`alignItems: 'center'`), so the middle content always
+  // sits on the same line as the back arrow and end slot on every platform.
+  const subPageMiddleOverlayStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
+  // middle content from bleeding under the leading/actions slots while staying
+  // centered within the overlay above.
+  const subPageMiddleBoxStyle = {
+    width: middleSlotWidth,
+    height: SUBPAGE_MIDDLE_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SUBPAGE_MIDDLE_PADDING_HORIZONTAL,
+    overflow: 'hidden'
   };
   return /*#__PURE__*/_jsxs(View, {
     style: [wrapperStyle, style],
@@ -134,7 +179,7 @@ export default function AppBar({
         alignItems: 'center'
       },
       children: processedLeading
-    }), processedMiddle && /*#__PURE__*/_jsx(View, {
+    }), hasInFlowMiddle && /*#__PURE__*/_jsx(View, {
       style: {
         flex: 1,
         minWidth: 0,
@@ -147,6 +192,25 @@ export default function AppBar({
     }), /*#__PURE__*/_jsx(View, {
       style: actionsStyle,
       children: processedActions
+    }), isSub && processedMiddle && /*#__PURE__*/_jsx(View, {
+      style: subPageMiddleOverlayStyle,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(View, {
+        style: subPageMiddleBoxStyle,
+        pointerEvents: "box-none",
+        children: /*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1,
+            minWidth: 1,
+            height: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          pointerEvents: "box-none",
+          children: processedMiddle
+        })
+      })
     })]
   });
 }