@multiplatform.one/components 7.81.2 → 7.82.0

package/dist/cjs/layouts/page.cjs

@@ -40,6 +40,7 @@ var import_theme = require("@multiplatform.one/theme");
 var import_forms = require("@multiplatform.one/forms");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
+var import_barTitleSpan = require("./barTitleSpan.cjs");
 var import_tamagui = require("tamagui");
 var import_bottomChrome = require("../appShell/bottomChrome.cjs");
 var import_componentColors = require("../componentColors.cjs");
@@ -455,6 +456,94 @@ function PageSection({
     }) : children]
   });
 }
+function useBarTitleSpan() {
+  const none = {
+    x: 0,
+    width: 0
+  };
+  const [box, setBox] = (0, import_react2.useState)({
+    row: 0,
+    leading: none,
+    trailing: none,
+    title: 0
+  });
+  const set = (key, value) => setBox(prev => JSON.stringify(prev[key]) === JSON.stringify(value) ? prev : {
+    ...prev,
+    [key]: value
+  });
+  const extent = event => {
+    const {
+      x,
+      width
+    } = event.nativeEvent.layout;
+    return {
+      x,
+      width
+    };
+  };
+  return {
+    span: (0, import_barTitleSpan.barTitleSpan)({
+      row: box.row,
+      title: box.title,
+      ...(0, import_barTitleSpan.sideExtents)(box.row, box.leading, box.trailing)
+    }),
+    measureRow: event => set("row", Math.floor(extent(event).width)),
+    measureLeading: event => set("leading", extent(event)),
+    measureTrailing: event => set("trailing", extent(event)),
+    measureTitle: event => set("title", Math.ceil(extent(event).width))
+  };
+}
+function BarTitle({
+  title,
+  span,
+  onTitleWidth,
+  shown = true,
+  ...rest
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "ScreenToolbar"
+  });
+  const text = {
+    ...knobProps.body,
+    fontWeight: "600",
+    color: "$color12",
+    numberOfLines: 1
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [shown ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: 0,
+      pointerEvents: "none",
+      "aria-hidden": true,
+      onLayout: onTitleWidth,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...text,
+        children: title
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: span.left,
+      right: span.right,
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      "aria-hidden": !shown,
+      "data-bar-title": "",
+      opacity: shown ? 1 : 0,
+      ...rest,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...text,
+        children: title
+      })
+    })]
+  });
+}
 function ScreenToolbar(props) {
   const slot = (0, import_screenScroll.useTopBarSlot)();
   return slot ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PinnedTopBar, {
@@ -467,6 +556,7 @@ function ScreenToolbar(props) {
 function InlineToolbar({
   leading,
   trailing,
+  title,
   children,
   ...rest
 }) {
@@ -475,6 +565,7 @@ function InlineToolbar({
   } = (0, import_theme.useResolvedKnobs)({
     component: "ScreenToolbar"
   });
+  const titleSpan = useBarTitleSpan();
   const insetToken = (0, import_pageHeadingScope.usePageChromeInset)();
   const bleed = insetToken ? {
     marginHorizontal: negateSpaceToken(insetToken)
@@ -486,8 +577,12 @@ function InlineToolbar({
       "data-testid": "screen-toolbar",
       justifyContent: "space-between",
       alignItems: "center",
-      flexWrap: oneRow ? "nowrap" : "wrap",
+      flexWrap: oneRow || title ? "nowrap" : "wrap",
       minHeight: import_theme.MIN_PRESS_TARGET,
+      ...(title ? {
+        position: "relative",
+        onLayout: titleSpan.measureRow
+      } : null),
       ...bleed,
       ...(insetToken ? {
         paddingHorizontal: insetToken
@@ -500,6 +595,9 @@ function InlineToolbar({
         flexWrap: "wrap",
         flexShrink: oneRow ? 1e3 : 1,
         minWidth: 0,
+        ...(title ? {
+          onLayout: titleSpan.measureLeading
+        } : null),
         children: leading
       }), children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.IconButtonGroup, {
         ...knobProps.gap,
@@ -507,14 +605,22 @@ function InlineToolbar({
         flexShrink: 1,
         minWidth: 0,
         justifyContent: "flex-end",
+        ...(title ? {
+          onLayout: titleSpan.measureTrailing
+        } : null),
         children: trailing
-      })]
+      }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(BarTitle, {
+        title,
+        span: titleSpan.span,
+        onTitleWidth: titleSpan.measureTitle
+      }) : null]
     })
   });
 }
 function PinnedTopBar({
   leading,
   trailing,
+  title: inlineTitle,
   children,
   slot,
   ...rest
@@ -527,21 +633,11 @@ function PinnedTopBar({
   const {
     scrolled,
     collapsed,
-    title
+    title: largeTitle
   } = (0, import_screenScroll.useScreenScroll)();
-  const [sides, setSides] = (0, import_react2.useState)({
-    leading: 0,
-    trailing: 0
-  });
-  const measureSide = side => event => {
-    const width = Math.ceil(event.nativeEvent.layout.width);
-    setSides(prev => prev[side] === width ? prev : {
-      ...prev,
-      [side]: width
-    });
-  };
+  const titleSpan = useBarTitleSpan();
   const motion = (0, import_theme.transitionProps)(knobProps.motion.control);
-  const clearance = Math.max(sides.leading, sides.trailing);
+  const title = inlineTitle ?? largeTitle;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Surface, {
     bar: true,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -564,6 +660,7 @@ function PinnedTopBar({
         alignItems: "center",
         flexWrap: "nowrap",
         position: "relative",
+        onLayout: titleSpan.measureRow,
         paddingHorizontal: slot.inset ?? knobProps.panelPadding.padding,
         ...knobProps.gap,
         ...rest,
@@ -572,7 +669,7 @@ function PinnedTopBar({
           alignItems: "center",
           flexShrink: 1e3,
           minWidth: 0,
-          onLayout: measureSide("leading"),
+          onLayout: titleSpan.measureLeading,
           children: leading
         }), children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
           flexGrow: 1
@@ -581,28 +678,14 @@ function PinnedTopBar({
           flexShrink: 1,
           minWidth: 0,
           justifyContent: "flex-end",
-          onLayout: measureSide("trailing"),
+          onLayout: titleSpan.measureTrailing,
           children: trailing
-        }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          position: "absolute",
-          top: 0,
-          bottom: 0,
-          left: clearance,
-          right: clearance,
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none",
-          "aria-hidden": !collapsed,
-          "data-bar-title": "",
-          opacity: collapsed ? 1 : 0,
-          ...motion,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            ...knobProps.body,
-            fontWeight: "600",
-            color: "$color12",
-            numberOfLines: 1,
-            children: title
-          })
+        }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(BarTitle, {
+          title,
+          span: titleSpan.span,
+          onTitleWidth: titleSpan.measureTitle,
+          shown: Boolean(inlineTitle) || collapsed,
+          ...motion
         }) : null]
       })
     })
@@ -621,16 +704,22 @@ function useTopBarControl() {
   };
 }
 const CARET_OPTICAL_INSET = 72 / 256;
-function backCaret(Caret) {
+const CARET_INK_OFFSET = 8 / 256;
+function backCaret(Caret, inkSign) {
   return function BackCaret({
     size = 22,
     color,
     weight,
     ...stroke
   }) {
+    const plated = (0, import_forms.useGlyphOnPlate)();
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       "data-back-caret": "",
-      marginInlineStart: -Math.round(size * CARET_OPTICAL_INSET),
+      ...(plated ? {
+        x: inkSign * size * CARET_INK_OFFSET
+      } : {
+        marginInlineStart: -Math.round(size * CARET_OPTICAL_INSET)
+      }),
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Caret, {
         size,
         color,
@@ -640,8 +729,8 @@ function backCaret(Caret) {
     });
   };
 }
-const BackCaretLeft = backCaret(import_react.CaretLeftIcon);
-const BackCaretRight = backCaret(import_react.CaretRightIcon);
+const BackCaretLeft = backCaret(import_react.CaretLeftIcon, 1);
+const BackCaretRight = backCaret(import_react.CaretRightIcon, -1);
 function PageBackButton({
   label,
   ...props

package/dist/cjs/layouts/page.native.js

@@ -43,13 +43,14 @@ var import_theme = require("@multiplatform.one/theme");
 var import_forms = require("@multiplatform.one/forms");
 var import_react = require("@phosphor-icons/react");
 var import_react2 = require("react");
+var import_barTitleSpan = require("./barTitleSpan.native.js");
 var import_tamagui = require("tamagui");
 var import_bottomChrome = require("../appShell/bottomChrome.native.js");
 var import_componentColors = require("../componentColors.native.js");
 var import_useDirection = require("../hooks/useDirection.native.js");
 var import_i18n = require("../shared/i18n.native.js");
-var import_ScrollView = require("../ScrollView");
-var import_KeyboardAvoidingWrapper = require("./KeyboardAvoidingWrapper");
+var import_ScrollView = require("../ScrollView/index.native.js");
+var import_KeyboardAvoidingWrapper = require("./KeyboardAvoidingWrapper/index.native.js");
 var import_bottomAccessory = require("./bottomAccessory.native.js");
 var import_screenScroll = require("./screenScroll.native.js");
 var import_pageHeadingScope = require("./pageHeadingScope.native.js");
@@ -476,6 +477,107 @@ function PageSection(param) {
     }) : children]
   });
 }
+function useBarTitleSpan() {
+  var none = {
+    x: 0,
+    width: 0
+  };
+  var [box, setBox] = (0, import_react2.useState)({
+    row: 0,
+    leading: none,
+    trailing: none,
+    title: 0
+  });
+  var set = function set2(key, value) {
+    return setBox(function (prev) {
+      return JSON.stringify(prev[key]) === JSON.stringify(value) ? prev : {
+        ...prev,
+        [key]: value
+      };
+    });
+  };
+  var extent = function extent2(event) {
+    var {
+      x,
+      width
+    } = event.nativeEvent.layout;
+    return {
+      x,
+      width
+    };
+  };
+  return {
+    span: (0, import_barTitleSpan.barTitleSpan)({
+      row: box.row,
+      title: box.title,
+      ...(0, import_barTitleSpan.sideExtents)(box.row, box.leading, box.trailing)
+    }),
+    measureRow: function measureRow(event) {
+      return set("row", Math.floor(extent(event).width));
+    },
+    measureLeading: function measureLeading(event) {
+      return set("leading", extent(event));
+    },
+    measureTrailing: function measureTrailing(event) {
+      return set("trailing", extent(event));
+    },
+    measureTitle: function measureTitle(event) {
+      return set("title", Math.ceil(extent(event).width));
+    }
+  };
+}
+function BarTitle(param) {
+  var {
+    title,
+    span,
+    onTitleWidth,
+    shown = true,
+    ...rest
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)({
+    component: "ScreenToolbar"
+  });
+  var text = {
+    ...knobProps.body,
+    fontWeight: "600",
+    color: "$color12",
+    numberOfLines: 1
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    children: [shown ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      opacity: 0,
+      pointerEvents: "none",
+      "aria-hidden": true,
+      onLayout: onTitleWidth,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...text,
+        children: title
+      })
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      left: span.left,
+      right: span.right,
+      alignItems: "center",
+      justifyContent: "center",
+      pointerEvents: "none",
+      "aria-hidden": !shown,
+      "data-bar-title": "",
+      opacity: shown ? 1 : 0,
+      ...rest,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+        ...text,
+        children: title
+      })
+    })]
+  });
+}
 function ScreenToolbar(props) {
   var slot = (0, import_screenScroll.useTopBarSlot)();
   return slot ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(PinnedTopBar, {
@@ -489,6 +591,7 @@ function InlineToolbar(param) {
   var {
     leading,
     trailing,
+    title,
     children,
     ...rest
   } = param;
@@ -497,6 +600,7 @@ function InlineToolbar(param) {
   } = (0, import_theme.useResolvedKnobs)({
     component: "ScreenToolbar"
   });
+  var titleSpan = useBarTitleSpan();
   var insetToken = (0, import_pageHeadingScope.usePageChromeInset)();
   var bleed = insetToken ? {
     marginHorizontal: negateSpaceToken(insetToken)
@@ -508,8 +612,12 @@ function InlineToolbar(param) {
       "data-testid": "screen-toolbar",
       justifyContent: "space-between",
       alignItems: "center",
-      flexWrap: oneRow ? "nowrap" : "wrap",
+      flexWrap: oneRow || title ? "nowrap" : "wrap",
       minHeight: import_theme.MIN_PRESS_TARGET,
+      ...(title ? {
+        position: "relative",
+        onLayout: titleSpan.measureRow
+      } : null),
       ...bleed,
       ...(insetToken ? {
         paddingHorizontal: insetToken
@@ -523,6 +631,9 @@ function InlineToolbar(param) {
         // Shrink weight, not a size: the back label gives way before the actions wrap.
         flexShrink: oneRow ? 1e3 : 1,
         minWidth: 0,
+        ...(title ? {
+          onLayout: titleSpan.measureLeading
+        } : null),
         children: leading
       }), children, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.IconButtonGroup, {
         ...knobProps.gap,
@@ -530,8 +641,15 @@ function InlineToolbar(param) {
         flexShrink: 1,
         minWidth: 0,
         justifyContent: "flex-end",
+        ...(title ? {
+          onLayout: titleSpan.measureTrailing
+        } : null),
         children: trailing
-      })]
+      }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(BarTitle, {
+        title,
+        span: titleSpan.span,
+        onTitleWidth: titleSpan.measureTitle
+      }) : null]
     })
   });
 }
@@ -539,6 +657,7 @@ function PinnedTopBar(param) {
   var {
     leading,
     trailing,
+    title: inlineTitle,
     children,
     slot,
     ...rest
@@ -552,25 +671,11 @@ function PinnedTopBar(param) {
   var {
     scrolled,
     collapsed,
-    title
+    title: largeTitle
   } = (0, import_screenScroll.useScreenScroll)();
-  var [sides, setSides] = (0, import_react2.useState)({
-    leading: 0,
-    trailing: 0
-  });
-  var measureSide = function measureSide2(side) {
-    return function (event) {
-      var width = Math.ceil(event.nativeEvent.layout.width);
-      setSides(function (prev) {
-        return prev[side] === width ? prev : {
-          ...prev,
-          [side]: width
-        };
-      });
-    };
-  };
+  var titleSpan = useBarTitleSpan();
   var motion = (0, import_theme.transitionProps)(knobProps.motion.control);
-  var clearance = Math.max(sides.leading, sides.trailing);
+  var title = inlineTitle !== null && inlineTitle !== void 0 ? inlineTitle : largeTitle;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Surface, {
     bar: true,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -594,6 +699,7 @@ function PinnedTopBar(param) {
         flexWrap: "nowrap",
         // The collapsed title is placed against this row, not the page.
         position: "relative",
+        onLayout: titleSpan.measureRow,
         paddingHorizontal: (_slot_inset = slot.inset) !== null && _slot_inset !== void 0 ? _slot_inset : knobProps.panelPadding.padding,
         ...knobProps.gap,
         ...rest,
@@ -602,7 +708,7 @@ function PinnedTopBar(param) {
           alignItems: "center",
           flexShrink: 1e3,
           minWidth: 0,
-          onLayout: measureSide("leading"),
+          onLayout: titleSpan.measureLeading,
           children: leading
         }), children,
         /* Pushes the actions to the trailing edge (LC-102: no space-between)
@@ -615,28 +721,14 @@ function PinnedTopBar(param) {
           flexShrink: 1,
           minWidth: 0,
           justifyContent: "flex-end",
-          onLayout: measureSide("trailing"),
+          onLayout: titleSpan.measureTrailing,
           children: trailing
-        }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          position: "absolute",
-          top: 0,
-          bottom: 0,
-          left: clearance,
-          right: clearance,
-          alignItems: "center",
-          justifyContent: "center",
-          pointerEvents: "none",
-          "aria-hidden": !collapsed,
-          "data-bar-title": "",
-          opacity: collapsed ? 1 : 0,
-          ...motion,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
-            ...knobProps.body,
-            fontWeight: "600",
-            color: "$color12",
-            numberOfLines: 1,
-            children: title
-          })
+        }), title ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(BarTitle, {
+          title,
+          span: titleSpan.span,
+          onTitleWidth: titleSpan.measureTitle,
+          shown: Boolean(inlineTitle) || collapsed,
+          ...motion
         }) : null]
       })
     })
@@ -655,7 +747,8 @@ function useTopBarControl() {
   };
 }
 var CARET_OPTICAL_INSET = 72 / 256;
-function backCaret(Caret) {
+var CARET_INK_OFFSET = 8 / 256;
+function backCaret(Caret, inkSign) {
   return function BackCaret(param) {
     var {
       size = 22,
@@ -663,9 +756,14 @@ function backCaret(Caret) {
       weight,
       ...stroke
     } = param;
+    var plated = (0, import_forms.useGlyphOnPlate)();
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
       "data-back-caret": "",
-      marginInlineStart: -Math.round(size * CARET_OPTICAL_INSET),
+      ...(plated ? {
+        x: inkSign * size * CARET_INK_OFFSET
+      } : {
+        marginInlineStart: -Math.round(size * CARET_OPTICAL_INSET)
+      }),
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Caret, {
         size,
         color,
@@ -675,8 +773,8 @@ function backCaret(Caret) {
     });
   };
 }
-var BackCaretLeft = backCaret(import_react.CaretLeftIcon);
-var BackCaretRight = backCaret(import_react.CaretRightIcon);
+var BackCaretLeft = backCaret(import_react.CaretLeftIcon, 1);
+var BackCaretRight = backCaret(import_react.CaretRightIcon, -1);
 function PageBackButton(param) {
   var {
     label,