@momo-kits/foundation 0.168.1-beta.32 → 0.168.1-beta.33

package/Application/BottomSheet.tsx

@@ -16,6 +16,7 @@ import {
   PanResponder,
   Platform,
   Pressable,
+  StatusBar,
   StyleSheet,
   TouchableOpacity,
   useWindowDimensions,
@@ -39,28 +40,54 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
-import { isIPhoneDuo } from './device';
-import { useModalLayout } from './modalLayout';
+import { DuoMetrics, InnerEdgeStyles, useScreenLayout } from '../Layout/utils';
+import { getDuoTopInset, isIPhoneDuo } from './device';
+import { SideBarButton } from './Components/SideBarButton';
+
+// iPhone Duo inner display: center the sheet instead of spanning the width
+const DUO_REGULAR_MIN_WIDTH = 600;
 
 const INDICATOR_HEIGHT = 16;
 const HEADER_HEIGHT = 56;
 const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-// foldable spec: icon button 32, icon 20
-const FOLDABLE_ICON_BUTTON_SIZE = 32;
-const FOLDABLE_ICON_SIZE = 20;
+const SIDE_COLUMN_OFFSET =
+  INDICATOR_HEIGHT + (HEADER_HEIGHT - DuoMetrics.controlSize) / 2;
+
+const getSideInset = (inset: number) => Math.max(inset - Spacing.M, 0);
 
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const windowSize = useWindowDimensions();
   const isDuo = isIPhoneDuo();
-  const { isFoldable, placement, sheet, scrimOpacity } = useModalLayout();
+  const isDuoCentered =
+    isDuo &&
+    Math.min(windowSize.width, windowSize.height) >= DUO_REGULAR_MIN_WIDTH;
+  const isDuoFloating = isDuo && !isDuoCentered;
+  const { sideBar } = useScreenLayout();
+  const sideColumnWidth = (sideBar?.width ?? 0) - Spacing.M;
+  const sideColumn =
+    isDuoFloating &&
+    sideColumnWidth >= DuoMetrics.controlSize + Spacing.M &&
+    sideBar
+      ? sideBar
+      : undefined;
+  const hasSideColumn = !!sideColumn;
   // 'screen' is the outer display on iPhone Duo, even when unfolded
   const screenHeight = Dimensions.get('screen').height;
   const heightDevice = isDuo ? windowSize.height : screenHeight;
   const action = useRef<undefined | string>(undefined);
   const insets = useSafeAreaInsets();
   const heightHeader = useHeaderHeight();
+  const topGap = Math.max(
+    sideColumn
+      ? insets.top
+      : getDuoTopInset(insets, windowSize.width, windowSize.height),
+    Spacing.XL,
+  );
+  const sideInsetLeft = isDuoFloating ? getSideInset(insets.left) : 0;
+  const sideInsetRight = isDuoFloating ? getSideInset(insets.right) : 0;
+  const indicatorShift = (sideInsetRight - sideInsetLeft) / 2;
   const isIOS = Platform.OS === 'ios';
   const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;
   const keyboardOffset = heightHeader - bottomInset;
@@ -86,6 +113,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const onDismissRef = useRef(props.route.params?.onDismiss);
   onDismissRef.current = props.route.params?.onDismiss;
   const [keyboardLift, setKeyboardLift] = useState(0);
+  const [sheetTop, setSheetTop] = useState(windowSize.height);
 
   // KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
   // so lift it here and shrink maxHeight by the same amount instead
@@ -241,20 +269,39 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
 
   const showBack = !!leftOptions?.onPressIconLeft;
   const iconBack = leftOptions?.iconLeft ?? 'ic_back';
+  const sideColumnCount = showBack ? 2 : 1;
+  const sideColumnHeight =
+    sideColumnCount * DuoMetrics.controlSize +
+    (sideColumnCount - 1) * Spacing.M;
+  const coversStatusBar = !!sideColumn && sheetTop < sideColumn.top;
+
+  useEffect(() => {
+    if (!coversStatusBar) {
+      return;
+    }
+    const entry = StatusBar.pushStackEntry({
+      barStyle: theme.dark ? 'light-content' : 'dark-content',
+      animated: true,
+    });
+    return () => StatusBar.popStackEntry(entry);
+  }, [coversStatusBar, theme.dark]);
 
   /**
    * render header
    */
   const renderHeader = useCallback(() => {
-    const iconButtonStyle = [
-      styles.iconButton,
-      isFoldable && styles.foldableIconButton,
-    ];
-    const iconSize = isFoldable ? FOLDABLE_ICON_SIZE : undefined;
+    const showButtons = !hasSideColumn;
     return (
       <View {...panResponder.panHandlers}>
         <View style={{ height: INDICATOR_HEIGHT }}>
-          <View style={styles.indicator} />
+          <View
+            style={[
+              styles.indicator,
+              indicatorShift !== 0 && {
+                transform: [{ translateX: indicatorShift }],
+              },
+            ]}
+          />
         </View>
         <View
           style={[
@@ -265,9 +312,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {showBack ? (
-            <TouchableOpacity style={iconButtonStyle} onPress={onPressBack}>
-              <Icon source={iconBack} size={iconSize} />
+          {showButtons && showBack ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
+              <Icon source={iconBack} />
             </TouchableOpacity>
           ) : null}
 
@@ -275,9 +322,15 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {!leftOptions ? <View style={iconButtonStyle} /> : null}
+              {showButtons && !leftOptions ? (
+                <View style={styles.iconButton} />
+              ) : null}
               <Text
-                style={[Styles.flex, styles.title]}
+                style={[
+                  Styles.flex,
+                  styles.title,
+                  !showButtons && styles.titleInset,
+                ]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -285,15 +338,18 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          <TouchableOpacity style={iconButtonStyle} onPress={onPressClose}>
-            <Icon source="navigation_close" size={iconSize} />
-          </TouchableOpacity>
+          {showButtons ? (
+            <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
+              <Icon source="navigation_close" />
+            </TouchableOpacity>
+          ) : null}
         </View>
       </View>
     );
   }, [
+    hasSideColumn,
     iconBack,
-    isFoldable,
+    indicatorShift,
     leftOptions,
     onPressBack,
     onPressClose,
@@ -305,6 +361,41 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     useDivider,
   ]);
 
+  /**
+   * iPhone Duo folded: back and close move to the side bar column, drawn on
+   * the part of the sheet under the side safe area. They line up with the
+   * header row, stay below the status bar cluster on a tall sheet and above a
+   * camera at the bottom end of the strip.
+   */
+  const renderSideColumn = () => {
+    if (!sideColumn) {
+      return null;
+    }
+    const lowestTop =
+      windowSize.height - sideColumn.bottom - sideColumnHeight - sheetTop;
+    const top = Math.min(
+      Math.max(sideColumn.top - sheetTop, SIDE_COLUMN_OFFSET),
+      lowestTop,
+    );
+
+    return (
+      <View
+        pointerEvents={'box-none'}
+        style={[
+          styles.sideColumn,
+          sideColumn.edge === 'right' ? styles.alignRight : styles.alignLeft,
+          InnerEdgeStyles[sideColumn.edge],
+          { top, width: sideColumnWidth },
+        ]}
+      >
+        {showBack ? (
+          <SideBarButton icon={iconBack} onPress={onPressBack} />
+        ) : null}
+        <SideBarButton icon="navigation_close" onPress={onPressClose} />
+      </View>
+    );
+  };
+
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{ translateY: translateY.value }],
@@ -316,12 +407,17 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       opacity: interpolate(
         translateY.value,
         [0, heightDevice],
-        [scrimOpacity, 0],
+        [1, 0],
         Extrapolation.CLAMP,
       ),
     };
   });
 
+  const sideInsetStyle = isDuoFloating && {
+    paddingLeft: sideInsetLeft,
+    paddingRight: sideInsetRight,
+  };
+
   const screen = (
     <Screen
       {...props}
@@ -362,31 +458,41 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
+          onLayout={
+            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
+          }
           style={[
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: sheet.radius,
-              borderTopRightRadius: sheet.radius,
+              borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
+              borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
               overflow: 'hidden',
             },
-            isDuo && { marginBottom: keyboardLift },
-            isFoldable &&
-              sheet.width !== undefined &&
-              sheet.maxHeight !== undefined && {
-                // centered in the placement area, clear of the iPhone Duo
-                // control column and on the right half when half folded
-                width: sheet.width,
-                marginLeft: placement.x + (placement.width - sheet.width) / 2,
-                maxHeight: sheet.maxHeight - keyboardLift,
-                minHeight: sheet.minHeight,
-              },
+            isDuo && {
+              maxHeight: windowSize.height - topGap - keyboardLift,
+              marginBottom: keyboardLift,
+            },
+            isDuoFloating && { marginHorizontal: Spacing.M },
+            sideColumn && {
+              minHeight:
+                SIDE_COLUMN_OFFSET + sideColumnHeight + sideColumn.bottom,
+            },
+            isDuoCentered && {
+              // keeps the portrait width in landscape, like system sheets
+              width: Math.min(
+                Math.min(windowSize.width, windowSize.height) - Spacing.L * 2,
+                windowSize.width -
+                  Math.max(insets.left, insets.right, Spacing.L) * 2,
+              ),
+              alignSelf: 'center',
+            },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {isFoldable ? (
+          {isDuo ? (
             // content shrinks so a tall sheet keeps its header and footer
-            <View style={styles.shrink}>
+            <View style={[styles.shrink, sideInsetStyle]}>
               {renderHeader()}
               <View style={styles.shrink}>{screen}</View>
             </View>
@@ -404,6 +510,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
+                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -417,6 +524,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
+          {renderSideColumn()}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
@@ -430,7 +538,7 @@ const styles = StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    backgroundColor: Colors.black_20,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
   },
   indicator: {
     width: 40,
@@ -447,6 +555,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   title: { textAlign: 'center' },
+  titleInset: { paddingHorizontal: Spacing.M },
   iconButton: {
     width: 24,
     height: 24,
@@ -454,11 +563,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginHorizontal: Spacing.M,
   },
-  foldableIconButton: {
-    width: FOLDABLE_ICON_BUTTON_SIZE,
-    height: FOLDABLE_ICON_BUTTON_SIZE,
-  },
   shrink: { flexShrink: 1 },
+  sideColumn: {
+    position: 'absolute',
+    gap: Spacing.M,
+  },
+  alignRight: { right: 0 },
+  alignLeft: { left: 0 },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/ModalScreen.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import {
   Animated,
   BackHandler,
@@ -17,14 +11,14 @@ import {
   useWindowDimensions,
   View,
 } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ApplicationContext, MiniAppContext } from '../Context';
-import { Colors, Styles } from '../Consts';
+import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { isIPhoneDuo } from './device';
-import { useModalLayout } from './modalLayout';
+import { getDuoModalBounds, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -46,9 +40,9 @@ const Modal: React.FC<ModalParams> = props => {
     title,
   } = props.route.params;
   const Component = useRef(screen).current;
-  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const windowSize = useWindowDimensions();
   const isDuo = isIPhoneDuo();
-  const { isFoldable, placement, popup, scrimOpacity } = useModalLayout();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -67,15 +61,6 @@ const Modal: React.FC<ModalParams> = props => {
 
   const opacity = useRef(new Animated.Value(0)).current;
   const scale = useRef(new Animated.Value(0.8)).current;
-  const scrimStyle = useMemo(
-    () => ({
-      opacity: opacity.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, scrimOpacity],
-      }),
-    }),
-    [opacity, scrimOpacity],
-  );
 
   const navigation = new Navigation(props.navigation);
   const params = {
@@ -161,7 +146,7 @@ const Modal: React.FC<ModalParams> = props => {
           style={StyleSheet.absoluteFillObject}
           onPress={() => onDismiss(undefined, barrierDismissible)}
         >
-          <Animated.View style={[styles.overlayContent, scrimStyle]} />
+          <Animated.View style={[styles.overlayContent, { opacity }]} />
         </Pressable>
         <Animated.View
           style={[
@@ -169,15 +154,13 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
-            // centered in the placement area, at most a popup wide
-            isFoldable && styles.shrink,
-            isFoldable && {
-              marginTop: placement.y,
-              marginBottom: height - placement.y - placement.height,
-              marginLeft: placement.x,
-              marginRight: width - placement.x - placement.width,
-              maxWidth: popup.width,
-              maxHeight: popup.maxHeight,
+            isDuo && styles.shrink,
+            isDuo && {
+              marginTop: insets.top,
+              marginBottom: insets.bottom,
+              marginLeft: insets.left,
+              marginRight: insets.right,
+              ...getDuoModalBounds(insets, windowSize.width, windowSize.height),
             },
             modalStyle,
           ]}
@@ -194,7 +177,7 @@ const DUO_ORIENTATIONS = ['portrait', 'landscape'];
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,
-    backgroundColor: Colors.black_20,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
   },
   shrink: { flexShrink: 1 },
 });

package/Application/device.ts

@@ -1,8 +1,13 @@
 import { Dimensions, Platform, ScaledSize } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
 
 // widest short side of any single-display iPhone
 const IPHONE_MAX_SHORT_SIDE = 440;
 
+const DUO_MODAL_MAX_WIDTH = 440;
+const DUO_MODAL_MAX_HEIGHT = 640;
+
 // iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
 // still matches when Split View narrows the window
 const isIPhoneDuo = () => {
@@ -18,4 +23,30 @@ const isIPhoneDuo = () => {
   );
 };
 
-export { isIPhoneDuo };
+// portrait side status bar is about twice as tall as its inset is wide
+const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
+  Math.max(
+    insets.top,
+    height > width ? Math.max(insets.left, insets.right) * 2 : 0,
+  );
+
+/**
+ * Max modal size on iPhone Duo: inside the safe area, so clear of the side
+ * toolbar strip, and capped so it stays a dialog on the inner display.
+ */
+const getDuoModalBounds = (
+  insets: EdgeInsets,
+  width: number,
+  height: number,
+) => ({
+  maxWidth: Math.min(
+    width - insets.left - insets.right - Spacing.XL * 2,
+    DUO_MODAL_MAX_WIDTH,
+  ),
+  maxHeight: Math.min(
+    height - insets.top - insets.bottom - Spacing.XL * 2,
+    DUO_MODAL_MAX_HEIGHT,
+  ),
+});
+
+export { isIPhoneDuo, getDuoTopInset, getDuoModalBounds };

package/Application/index.ts

@@ -18,8 +18,6 @@ import Navigation from './Navigation';
 import Navigator from './Navigator';
 import ScaleSizeProvider from './ScaleSizeProvider';
 import { useTooltipPortal } from './TooltipPortal';
-import { getModalLayout, useModalLayout } from './modalLayout';
-import type { ModalLayout, ModalRect } from './modalLayout';
 
 export {
   NavigationContainer,
@@ -33,8 +31,4 @@ export {
   exportHeaderTitle,
   ScaleSizeProvider,
   useTooltipPortal,
-  getModalLayout,
-  useModalLayout,
 };
-
-export type { ModalLayout, ModalRect };

package/Layout/ReservedRegions.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useContext, useMemo } from 'react';
+import React, { createContext, ReactNode, useMemo } from 'react';
 import { Platform, StyleSheet } from 'react-native';
 
 export type ReservedRegion = {
@@ -25,15 +25,7 @@ try {
 const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
 
 /**
- * vertical seam splitting the display into left and right halves, e.g. iPhone Duo
- * half folded. `undefined` while the display is flat or the system reports none
- */
-const HingeContext = createContext<ReservedRegion | undefined>(undefined);
-
-const useHinge = () => useContext(HingeContext);
-
-/**
- * keeps the occlusion regions and the vertical division reported by the native provider
+ * keeps the occlusion regions reported by the native provider, the only kind layout reads
  */
 const OcclusionRegions: React.FC<{
   useRegions: NativeReservedRegions['useReservedRegions'];
@@ -47,19 +39,10 @@ const OcclusionRegions: React.FC<{
         .map(region => region.frame),
     [regions],
   );
-  const hinge = useMemo(
-    () =>
-      regions.find(
-        region =>
-          region.kind === 'division' &&
-          region.frame.height > region.frame.width,
-      )?.frame,
-    [regions],
-  );
 
   return (
     <ReservedRegionsContext.Provider value={occlusion}>
-      <HingeContext.Provider value={hinge}>{children}</HingeContext.Provider>
+      {children}
     </ReservedRegionsContext.Provider>
   );
 };
@@ -92,4 +75,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export { ReservedRegionsContext, ReservedRegionsProvider, useHinge };
+export { ReservedRegionsContext, ReservedRegionsProvider };

package/Layout/index.ts

@@ -10,7 +10,6 @@ import ItemSectionList from './ItemSectionList';
 import Screen from './Screen';
 import { TrackingScope } from './TrackingScope';
 import { ScreenProps } from './Screen';
-import { useHinge } from './ReservedRegions';
 
 const GridContext = createContext<GridContextProps>({
   numberOfColumns: 12,
@@ -32,5 +31,4 @@ export {
   ItemSectionList,
   Screen,
   TrackingScope,
-  useHinge,
 };

package/Popup/PopupNotify.tsx

@@ -8,16 +8,18 @@ import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
-import { useModalLayout } from '../Application/modalLayout';
-
-// foldable spec: icon button 32, icon 20
-const FOLDABLE_CLOSE_SIZE = 32;
-const FOLDABLE_CLOSE_ICON_SIZE = 20;
+import {
+  getPopupRadius,
+  splitHighlightText,
+  usePopupMaxHeight,
+  usePopupWidth,
+} from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
   title = 'Title',
   description = 'Description',
+  highlightText,
   error,
   secondary,
   primary,
@@ -28,19 +30,16 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const { isFoldable, popup } = useModalLayout();
-  const { width: popupWidth, maxHeight, radius } = popup;
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
+  const radius = getPopupRadius();
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
-  if (isFoldable) {
-    // foldables cap the popup height, the description takes what is left
-    Description = ScrollView;
-    descriptionStyle = styles.shrink;
-  } else if (scrollContent) {
+  if (scrollContent) {
     Description = ScrollView;
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
@@ -142,57 +141,58 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     return renderColumn();
   };
 
+  /**
+   * build description text, highlighted keywords keep size/lineHeight and use weight 600
+   */
+  const renderDescription = (text: string) => {
+    const segments = splitHighlightText(text, highlightText);
+    if (!segments) {
+      return text;
+    }
+    return segments.map((segment, index) => {
+      if (segment.highlight) {
+        return (
+          <Text key={index} typography={'header_s_semibold'}>
+            {segment.text}
+          </Text>
+        );
+      }
+      return segment.text;
+    });
+  };
+
   /**
    * build close action
    */
   const buildCloseIcon = () => {
-    if (typeof onIconClose !== 'function') {
-      return null;
-    }
-    if (isFoldable) {
+    if (typeof onIconClose === 'function') {
       return (
         <TouchableOpacity
           accessibilityLabel={'ic_popup_close'}
-          style={styles.foldableClose}
+          style={styles.iconCloseContainer}
           onPress={() => {
             closeAction.current = 'icon_close';
             onAction(onIconClose);
           }}
         >
-          <Icon
-            source="navigation_close"
-            color={theme.colors.text.default}
-            size={FOLDABLE_CLOSE_ICON_SIZE}
-          />
+          <View
+            style={[
+              styles.iconClose,
+              {
+                backgroundColor: theme.colors.text.default,
+                borderColor: theme.colors.background.surface,
+              },
+            ]}
+          >
+            <Icon
+              source="navigation_close"
+              color={theme.colors.background.surface}
+              size={14}
+            />
+          </View>
         </TouchableOpacity>
       );
     }
-    return (
-      <TouchableOpacity
-        accessibilityLabel={'ic_popup_close'}
-        style={styles.iconCloseContainer}
-        onPress={() => {
-          closeAction.current = 'icon_close';
-          onAction(onIconClose);
-        }}
-      >
-        <View
-          style={[
-            styles.iconClose,
-            {
-              backgroundColor: theme.colors.text.default,
-              borderColor: theme.colors.background.surface,
-            },
-          ]}
-        >
-          <Icon
-            source="navigation_close"
-            color={theme.colors.background.surface}
-            size={14}
-          />
-        </View>
-      </TouchableOpacity>
-    );
   };
 
   const body = (
@@ -206,18 +206,11 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           ]}
         />
       )}
-      <View style={[styles.content, isFoldable && styles.shrink]}>
+      <View style={styles.content}>
         <Text
           typography={'header_default_bold'}
           numberOfLines={3}
           accessibilityLabel={'title_popup_notify'}
-          // keeps the title clear of the close button on a text only popup
-          style={
-            isFoldable &&
-            !image &&
-            typeof onIconClose === 'function' &&
-            styles.titleClearClose
-          }
         >
           {title}
         </Text>
@@ -233,7 +226,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 }
               }}
             >
-              {description}
+              {renderDescription(description)}
             </Text>
           ) : (
             description
@@ -269,7 +262,20 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
-      {body}
+      {maxHeight === undefined ? (
+        body
+      ) : (
+        // scrolls when iPhone Duo landscape is too short; actions stay visible
+        <ScrollView
+          style={[
+            styles.body,
+            { borderTopLeftRadius: radius, borderTopRightRadius: radius },
+          ]}
+          bounces={false}
+        >
+          {body}
+        </ScrollView>
+      )}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -282,7 +288,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
-  shrink: { flexShrink: 1 },
+  body: { flexShrink: 1, overflow: 'hidden' },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,
@@ -304,16 +310,6 @@ const styles = StyleSheet.create({
     right: -Spacing.M,
     padding: Spacing.XS,
   },
-  titleClearClose: { paddingRight: Spacing.XL },
-  foldableClose: {
-    position: 'absolute',
-    top: Spacing.M,
-    right: Spacing.M,
-    width: FOLDABLE_CLOSE_SIZE,
-    height: FOLDABLE_CLOSE_SIZE,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   iconClose: {
     width: 20,
     height: 20,

package/Popup/PopupPromotion.tsx

@@ -5,7 +5,7 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { Image } from '../Image';
 import { Colors, Radius, Spacing } from '../Consts';
 import { Icon } from '../Icon';
-import { useModalLayout } from '../Application/modalLayout';
+import { usePopupMaxHeight, usePopupWidth } from './utils';
 
 const ASPECT_RATIO = 0.72;
 const ICON_CLOSE_SIZE = 20;
@@ -20,10 +20,9 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator } = useContext(ApplicationContext);
-  const {
-    popup: { width: popupWidth, maxHeight },
-  } = useModalLayout();
-  // fit the portrait image by height when a foldable leaves too little room
+  const popupWidth = usePopupWidth();
+  const maxHeight = usePopupMaxHeight();
+  // fit the portrait image by height when iPhone Duo leaves too little room
   let imageWidth = popupWidth;
   if (maxHeight !== undefined) {
     const heightFitWidth = (maxHeight - CLOSE_ROW_HEIGHT) * ASPECT_RATIO;

package/Popup/types.ts

@@ -20,6 +20,13 @@ export type PopupNotifyProps = {
    */
   description?: string | React.ReactNode;
 
+  /**
+   * `highlightText`: Optional. List of words/phrases within `description` to be rendered in semibold.
+   * Only applies when `description` is a string. Matching is whole-word and case-sensitive;
+   * every occurrence of each string is highlighted.
+   */
+  highlightText?: string[];
+
   /**
    * `error`: Optional. Represents additional error text to be displayed in the PopupNotify component.
    */

package/Popup/utils.ts

@@ -0,0 +1,79 @@
+import { Dimensions, useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Radius, Spacing } from '../Consts';
+import { getDuoModalBounds, isIPhoneDuo } from '../Application/device';
+
+type HighlightSegment = { text: string; highlight: boolean };
+
+const usePopupWidth = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return Dimensions.get('window').width - Spacing.XL * 2;
+  }
+  return getDuoModalBounds(insets, width, height).maxWidth;
+};
+
+const usePopupMaxHeight = () => {
+  const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  if (!isIPhoneDuo()) {
+    return undefined;
+  }
+  return getDuoModalBounds(insets, width, height).maxHeight;
+};
+
+const getPopupRadius = () => (isIPhoneDuo() ? Radius.XL : Radius.L);
+
+const isWordChar = (char?: string) => {
+  if (!char) {
+    return false;
+  }
+  const isLetter = char.toLowerCase() !== char.toUpperCase();
+  return isLetter || /[0-9_]/.test(char);
+};
+
+/**
+ * Split `text` into plain/highlighted segments (same matching as Information `highlightText`):
+ * whole-word, case-sensitive, every occurrence, longest keyword first.
+ * Returns `undefined` when there is nothing to highlight.
+ */
+const splitHighlightText = (
+  text: string,
+  highlightText?: string[],
+): HighlightSegment[] | undefined => {
+  const keywords = highlightText?.filter(keyword => {
+    if (typeof keyword !== 'string') {
+      return false;
+    }
+    return keyword.length > 0;
+  });
+  if (!keywords?.length) {
+    return undefined;
+  }
+  const pattern = [...keywords]
+    .sort((a, b) => b.length - a.length)
+    .map(keyword => keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|');
+  const regex = new RegExp(pattern, 'g');
+  const segments: HighlightSegment[] = [];
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(text))) {
+    const start = match.index;
+    const end = start + match[0].length;
+    if (isWordChar(text[start - 1]) || isWordChar(text[end])) {
+      regex.lastIndex = start + 1;
+      continue;
+    }
+    if (start > lastIndex) {
+      segments.push({ text: text.slice(lastIndex, start), highlight: false });
+    }
+    segments.push({ text: match[0], highlight: true });
+    lastIndex = end;
+  }
+  segments.push({ text: text.slice(lastIndex), highlight: false });
+  return segments;
+};
+
+export { usePopupWidth, usePopupMaxHeight, getPopupRadius, splitHighlightText };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.168.1-beta.32",
+    "version": "0.168.1-beta.33",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Application/__tests__/modalLayout.test.ts

@@ -1,128 +0,0 @@
-// document/__mocks__ shadows react-native with react-native-web for the doc site
-jest.mock('react-native', () => jest.requireActual('react-native'));
-
-import { getModalLayout } from '../modalLayout';
-
-const NO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
-
-describe('getModalLayout', () => {
-  it('keeps the phone look', () => {
-    const layout = getModalLayout({
-      width: 390,
-      height: 844,
-      insets: { top: 47, right: 0, bottom: 34, left: 0 },
-      isDuo: false,
-    });
-    expect(layout.isFoldable).toBe(false);
-    expect(layout.popup.width).toBe(342);
-    expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(16);
-    expect(layout.sheet.width).toBeUndefined();
-    expect(layout.sheet.maxHeight).toBeUndefined();
-    expect(layout.sheet.radius).toBe(12);
-    expect(layout.scrimOpacity).toBe(0.6);
-  });
-
-  it('keeps the phone look in landscape', () => {
-    const layout = getModalLayout({
-      width: 844,
-      height: 390,
-      insets: { top: 0, right: 47, bottom: 21, left: 47 },
-      isDuo: false,
-    });
-    expect(layout.isFoldable).toBe(false);
-    expect(layout.popup.width).toBe(844 - 48);
-    expect(layout.popup.maxHeight).toBeUndefined();
-    expect(layout.popup.radius).toBe(16);
-    expect(layout.sheet.width).toBeUndefined();
-    expect(layout.scrimOpacity).toBe(0.6);
-  });
-
-  it('caps popup and sheet on a wide foldable window', () => {
-    const layout = getModalLayout({
-      width: 884,
-      height: 1104,
-      insets: { top: 24, right: 0, bottom: 20, left: 0 },
-      isDuo: false,
-    });
-    expect(layout.isFoldable).toBe(true);
-    expect(layout.popup).toMatchObject({
-      width: 450,
-      minWidth: 280,
-      maxWidth: 450,
-      maxHeight: 600,
-      margin: 24,
-      radius: 24,
-    });
-    expect(layout.sheet).toMatchObject({
-      width: 653,
-      maxHeight: 1104 - 24 - 12,
-      minHeight: 230,
-      margin: 12,
-      radius: 24,
-    });
-    expect(layout.scrimOpacity).toBe(0.2);
-  });
-
-  it('limits popup height to the safe area minus 48', () => {
-    const layout = getModalLayout({
-      width: 900,
-      height: 600,
-      insets: { top: 24, right: 0, bottom: 20, left: 0 },
-      isDuo: false,
-    });
-    expect(layout.popup.maxHeight).toBe(600 - 24 - 20 - 48);
-  });
-
-  it('places modals left of the control column on the iPhone Duo outer display', () => {
-    const layout = getModalLayout({
-      width: 420,
-      height: 760,
-      insets: { top: 0, right: 64, bottom: 20, left: 0 },
-      isDuo: true,
-    });
-    expect(layout.isFoldable).toBe(true);
-    expect(layout.placement).toEqual({ x: 0, y: 0, width: 356, height: 740 });
-    expect(layout.popup.margin).toBe(12);
-    expect(layout.popup.width).toBe(356 - 24);
-    expect(layout.sheet.width).toBe(356 - 24);
-  });
-
-  it('never grows past the margins when the space is under the min width', () => {
-    const layout = getModalLayout({
-      width: 300,
-      height: 600,
-      insets: NO_INSETS,
-      isDuo: true,
-    });
-    expect(layout.popup.width).toBe(300 - 24);
-    expect(layout.popup.minWidth).toBe(300 - 24);
-    expect(layout.sheet.width).toBe(300 - 24);
-  });
-
-  it('moves to the right half when iPhone Duo is half folded', () => {
-    const layout = getModalLayout({
-      width: 1000,
-      height: 800,
-      insets: NO_INSETS,
-      isDuo: true,
-      hinge: { x: 495, y: 0, width: 10, height: 800 },
-    });
-    expect(layout.placement).toEqual({ x: 505, y: 0, width: 495, height: 800 });
-    expect(layout.popup.margin).toBe(12);
-    expect(layout.popup.width).toBe(450);
-    expect(layout.sheet.width).toBe(495 - 24);
-  });
-
-  it('ignores a division off the iPhone Duo', () => {
-    const layout = getModalLayout({
-      width: 1000,
-      height: 800,
-      insets: NO_INSETS,
-      isDuo: false,
-      hinge: { x: 495, y: 0, width: 10, height: 800 },
-    });
-    expect(layout.placement.x).toBe(0);
-    expect(layout.popup.margin).toBe(24);
-  });
-});

package/Application/modalLayout.ts

@@ -1,180 +0,0 @@
-import { useWindowDimensions } from 'react-native';
-import {
-  EdgeInsets,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-import { Radius, Spacing } from '../Consts';
-import { ReservedRegion, useHinge } from '../Layout/ReservedRegions';
-import { isIPhoneDuo } from './device';
-
-// Foldable modal spec, shared with the Compose / SwiftUI kits
-const POPUP_MAX_WIDTH = 450;
-const POPUP_MIN_WIDTH = 280;
-const POPUP_MAX_HEIGHT = 600;
-const SHEET_MAX_WIDTH = 653;
-const SHEET_MIN_WIDTH = 296;
-const SHEET_MIN_HEIGHT = 230;
-const FOLDABLE_MIN_WIDTH = 600;
-
-const SCRIM_OPACITY = 0.6;
-const FOLDABLE_SCRIM_OPACITY = 0.2;
-
-export type ModalRect = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-};
-
-export type ModalLayout = {
-  /**
-   * iPhone Duo, or a window whose short side is at least 600 (Galaxy Z Fold / Pixel
-   * Fold inner display). Phones, landscape included, keep the regular modal look.
-   */
-  isFoldable: boolean;
-
-  /**
-   * Area popups and sheets are placed in: the safe area, left of the control column on
-   * the iPhone Duo outer display, the right half when iPhone Duo is half folded.
-   */
-  placement: ModalRect;
-
-  popup: {
-    width: number;
-    minWidth: number;
-    maxWidth: number;
-    /**
-     * `undefined` on phones, the popup grows with its content.
-     */
-    maxHeight?: number;
-    margin: number;
-    radius: number;
-  };
-
-  sheet: {
-    /**
-     * `undefined` on phones, the sheet spans the window.
-     */
-    width?: number;
-    maxHeight?: number;
-    minHeight?: number;
-    margin: number;
-    radius: number;
-  };
-
-  scrimOpacity: number;
-};
-
-type ModalLayoutInput = {
-  width: number;
-  height: number;
-  insets: EdgeInsets;
-  isDuo: boolean;
-  /**
-   * vertical division reported by the system, iPhone Duo half folded
-   */
-  hinge?: ReservedRegion;
-};
-
-const clamp = (value: number, min: number, max: number) =>
-  Math.min(Math.max(value, min), max);
-
-/**
- * Modal geometry for a window, pure so it can be tested without a device
- */
-const getModalLayout = ({
-  width,
-  height,
-  insets,
-  isDuo,
-  hinge,
-}: ModalLayoutInput): ModalLayout => {
-  const shortSide = Math.min(width, height);
-  // short side, so a phone in landscape stays a phone
-  const isFoldable = isDuo || shortSide >= FOLDABLE_MIN_WIDTH;
-  const isDuoOuter = isDuo && shortSide < FOLDABLE_MIN_WIDTH;
-  const hingeRight = hinge ? hinge.x + hinge.width : 0;
-  const isHalfFolded =
-    isDuo && !!hinge && hinge.x > 0 && hingeRight < width - insets.right;
-
-  const safeLeft = isHalfFolded ? hingeRight : insets.left;
-  const placement = {
-    x: safeLeft,
-    y: insets.top,
-    width: width - insets.right - safeLeft,
-    height: height - insets.top - insets.bottom,
-  };
-
-  if (!isFoldable) {
-    const popupWidth = width - Spacing.XL * 2;
-    return {
-      isFoldable,
-      placement,
-      popup: {
-        width: popupWidth,
-        minWidth: popupWidth,
-        maxWidth: popupWidth,
-        margin: Spacing.XL,
-        radius: Radius.L,
-      },
-      sheet: { margin: 0, radius: Radius.M },
-      scrimOpacity: SCRIM_OPACITY,
-    };
-  }
-
-  const popupMargin = isDuoOuter || isHalfFolded ? Spacing.M : Spacing.XL;
-  const popupSpace = placement.width - popupMargin * 2;
-  const popupMinWidth = Math.min(POPUP_MIN_WIDTH, popupSpace);
-
-  const sheetMargin = Spacing.M;
-  const sheetSpace = placement.width - sheetMargin * 2;
-  const sheetMaxHeight = height - insets.top - Spacing.M;
-
-  return {
-    isFoldable,
-    placement,
-    popup: {
-      width: clamp(popupSpace, popupMinWidth, POPUP_MAX_WIDTH),
-      minWidth: popupMinWidth,
-      maxWidth: POPUP_MAX_WIDTH,
-      maxHeight: Math.min(POPUP_MAX_HEIGHT, placement.height - Spacing.XL * 2),
-      margin: popupMargin,
-      radius: Radius.XL,
-    },
-    sheet: {
-      width: clamp(
-        sheetSpace,
-        Math.min(SHEET_MIN_WIDTH, sheetSpace),
-        SHEET_MAX_WIDTH,
-      ),
-      maxHeight: sheetMaxHeight,
-      minHeight: Math.min(SHEET_MIN_HEIGHT, sheetMaxHeight),
-      margin: sheetMargin,
-      radius: Radius.XL,
-    },
-    scrimOpacity: FOLDABLE_SCRIM_OPACITY,
-  };
-};
-
-/**
- * Modal geometry for the current window, follows fold, unfold, rotation and the
- * iPhone Duo hinge
- */
-const useModalLayout = (): ModalLayout => {
-  const { width, height } = useWindowDimensions();
-  const insets = useSafeAreaInsets();
-  const hinge = useHinge();
-  return getModalLayout({ width, height, insets, isDuo: isIPhoneDuo(), hinge });
-};
-
-export {
-  getModalLayout,
-  useModalLayout,
-  POPUP_MAX_WIDTH,
-  POPUP_MIN_WIDTH,
-  POPUP_MAX_HEIGHT,
-  SHEET_MAX_WIDTH,
-  SHEET_MIN_WIDTH,
-  SHEET_MIN_HEIGHT,
-  FOLDABLE_MIN_WIDTH,
-};