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

package/Application/BottomSheet.tsx

@@ -16,9 +16,7 @@ import {
   PanResponder,
   Platform,
   Pressable,
-  StatusBar,
   StyleSheet,
-  TouchableOpacity,
   useWindowDimensions,
   View,
 } from 'react-native';
@@ -27,7 +25,6 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 import { BottomSheetParams } from './types';
 import { Colors, Radius, Spacing, Styles } from '../Consts';
 import { Text } from '../Text';
-import { Icon } from '../Icon';
 import { useHeaderHeight } from '@react-navigation/elements';
 import Animated, {
   Easing,
@@ -40,54 +37,26 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import layoutStyles from '../Layout/styles';
-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;
+import { isIPhoneDuo } from './device';
+import { useModalLayout } from './modalLayout';
+import { MODAL_ICON_BUTTON_SIZE, ModalIconButton } from './ModalIconButton';
 
 const INDICATOR_HEIGHT = 16;
 const HEADER_HEIGHT = 56;
 const DUO_ORIENTATIONS = ['portrait', 'landscape'];
-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 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;
+  const { isFoldable, placement, sheet, scrimOpacity } = useModalLayout();
   // '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;
@@ -113,7 +82,6 @@ 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
@@ -269,39 +237,15 @@ 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 showButtons = !hasSideColumn;
     return (
       <View {...panResponder.panHandlers}>
         <View style={{ height: INDICATOR_HEIGHT }}>
-          <View
-            style={[
-              styles.indicator,
-              indicatorShift !== 0 && {
-                transform: [{ translateX: indicatorShift }],
-              },
-            ]}
-          />
+          <View style={styles.indicator} />
         </View>
         <View
           style={[
@@ -312,25 +256,17 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             },
           ]}
         >
-          {showButtons && showBack ? (
-            <TouchableOpacity style={styles.iconButton} onPress={onPressBack}>
-              <Icon source={iconBack} />
-            </TouchableOpacity>
+          {showBack ? (
+            <ModalIconButton icon={iconBack} onPress={onPressBack} />
           ) : null}
 
           {options.header ? (
             <View style={Styles.flex}>{options.header}</View>
           ) : (
             <>
-              {showButtons && !leftOptions ? (
-                <View style={styles.iconButton} />
-              ) : null}
+              {!leftOptions ? <View style={styles.iconButtonSpace} /> : null}
               <Text
-                style={[
-                  Styles.flex,
-                  styles.title,
-                  !showButtons && styles.titleInset,
-                ]}
+                style={[Styles.flex, styles.title]}
                 numberOfLines={1}
                 typography="header_default_bold"
               >
@@ -338,18 +274,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               </Text>
             </>
           )}
-          {showButtons ? (
-            <TouchableOpacity style={styles.iconButton} onPress={onPressClose}>
-              <Icon source="navigation_close" />
-            </TouchableOpacity>
-          ) : null}
+          <ModalIconButton icon="navigation_close" onPress={onPressClose} />
         </View>
       </View>
     );
   }, [
-    hasSideColumn,
     iconBack,
-    indicatorShift,
     leftOptions,
     onPressBack,
     onPressClose,
@@ -361,41 +291,6 @@ 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 }],
@@ -407,17 +302,12 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
       opacity: interpolate(
         translateY.value,
         [0, heightDevice],
-        [1, 0],
+        [scrimOpacity, 0],
         Extrapolation.CLAMP,
       ),
     };
   });
 
-  const sideInsetStyle = isDuoFloating && {
-    paddingLeft: sideInsetLeft,
-    paddingRight: sideInsetRight,
-  };
-
   const screen = (
     <Screen
       {...props}
@@ -458,41 +348,31 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
         </Pressable>
 
         <Animated.View
-          onLayout={
-            isDuoFloating ? e => setSheetTop(e.nativeEvent.layout.y) : undefined
-          }
           style={[
             animatedStyle,
             {
               backgroundColor,
-              borderTopLeftRadius: isDuo ? Radius.XL : Radius.M,
-              borderTopRightRadius: isDuo ? Radius.XL : Radius.M,
+              borderTopLeftRadius: sheet.radius,
+              borderTopRightRadius: sheet.radius,
               overflow: 'hidden',
             },
-            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',
-            },
+            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,
+              },
             showBaseLineDebug && styles.debugBaseLine,
           ]}
         >
-          {isDuo ? (
+          {isFoldable ? (
             // content shrinks so a tall sheet keeps its header and footer
-            <View style={[styles.shrink, sideInsetStyle]}>
+            <View style={styles.shrink}>
               {renderHeader()}
               <View style={styles.shrink}>{screen}</View>
             </View>
@@ -510,7 +390,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
                   paddingBottom: Spacing.S,
                   backgroundColor: theme.colors.background.surface,
                 },
-                sideInsetStyle,
               ]}
             >
               {footerComponent}
@@ -524,7 +403,6 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
               }}
             />
           )}
-          {renderSideColumn()}
         </Animated.View>
       </KeyboardAvoidingView>
     </Container>
@@ -538,7 +416,7 @@ const styles = StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    backgroundColor: Colors.black_20,
   },
   indicator: {
     width: 40,
@@ -553,23 +431,15 @@ const styles = StyleSheet.create({
     height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
+    paddingHorizontal: Spacing.M,
+    gap: Spacing.S,
   },
   title: { textAlign: 'center' },
-  titleInset: { paddingHorizontal: Spacing.M },
-  iconButton: {
-    width: 24,
-    height: 24,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginHorizontal: Spacing.M,
+  iconButtonSpace: {
+    width: MODAL_ICON_BUTTON_SIZE,
+    height: MODAL_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/ModalIconButton.tsx

@@ -0,0 +1,66 @@
+import React, { useContext } from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import { ApplicationContext } from '../Context';
+import { Radius, Spacing } from '../Consts';
+import { Icon } from '../Icon';
+
+// modal spec: icon button 32, icon 20, shared with the Compose / SwiftUI kits
+const MODAL_ICON_BUTTON_SIZE = Spacing.XXL;
+const MODAL_ICON_SIZE = 20;
+
+type ModalIconButtonProps = {
+  icon: string;
+  onPress: () => void;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Close / back button of popups and bottom sheet headers
+ */
+const ModalIconButton: React.FC<ModalIconButtonProps> = ({
+  icon,
+  onPress,
+  accessibilityLabel,
+  style,
+}) => {
+  const { theme } = useContext(ApplicationContext);
+  return (
+    <TouchableOpacity
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      style={[
+        styles.button,
+        {
+          backgroundColor: theme.colors.background.surface,
+          borderColor: theme.colors.border.default,
+        },
+        style,
+      ]}
+    >
+      <Icon
+        source={icon}
+        color={theme.colors.text.default}
+        size={MODAL_ICON_SIZE}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: MODAL_ICON_BUTTON_SIZE,
+    height: MODAL_ICON_BUTTON_SIZE,
+    borderRadius: Radius.L,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export { ModalIconButton, MODAL_ICON_BUTTON_SIZE };

package/Application/ModalScreen.tsx

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

package/Application/__tests__/modalLayout.test.ts

@@ -0,0 +1,128 @@
+// 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/device.ts

@@ -1,13 +1,8 @@
 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 = () => {
@@ -23,30 +18,4 @@ const 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 };
+export { isIPhoneDuo };

package/Application/index.ts

@@ -18,6 +18,8 @@ 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,
@@ -31,4 +33,8 @@ export {
   exportHeaderTitle,
   ScaleSizeProvider,
   useTooltipPortal,
+  getModalLayout,
+  useModalLayout,
 };
+
+export type { ModalLayout, ModalRect };

package/Application/modalLayout.ts

@@ -0,0 +1,180 @@
+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,
+};

package/Badge/BadgeRibbon.tsx

@@ -46,7 +46,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
     >
       <View
         collapsable={false}
-        style={{ transform: textTransform, marginVertical: -2 }}
+        style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
       >
         <Text
           style={styles.ribbonLabel}
@@ -60,7 +60,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
   );
 
   const renderSkewContent = () => (
-    <View style={{ flexDirection: 'row', marginTop: skewMargin }}>
+    <View style={[styles.ribbonSkewRow, { marginTop: skewMargin }]}>
       <View
         collapsable={false}
         style={[
@@ -70,7 +70,7 @@ const BadgeRibbon: FC<BadgeRibbonProps> = ({
       >
         <View
           collapsable={false}
-          style={{ transform: textTransform, marginVertical: -2 }}
+          style={[styles.ribbonLabelWrapper, { transform: textTransform }]}
         >
           <Text
             style={styles.ribbonLabel}

package/Badge/styles.ts

@@ -118,6 +118,8 @@ export default StyleSheet.create({
   ribbonLabel: {
     color: Colors.black_01,
   },
+  ribbonLabelWrapper: {marginVertical: -2},
+  ribbonSkewRow: {flexDirection: 'row'},
   skew: {width: 8, height: 16},
   tail: {width: 5, height: 20},
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },

package/Layout/ReservedRegions.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, ReactNode, useMemo } from 'react';
+import React, { createContext, ReactNode, useContext, useMemo } from 'react';
 import { Platform, StyleSheet } from 'react-native';
 
 export type ReservedRegion = {
@@ -25,7 +25,15 @@ try {
 const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
 
 /**
- * keeps the occlusion regions reported by the native provider, the only kind layout reads
+ * 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
  */
 const OcclusionRegions: React.FC<{
   useRegions: NativeReservedRegions['useReservedRegions'];
@@ -39,10 +47,19 @@ 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}>
-      {children}
+      <HingeContext.Provider value={hinge}>{children}</HingeContext.Provider>
     </ReservedRegionsContext.Provider>
   );
 };
@@ -75,4 +92,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export { ReservedRegionsContext, ReservedRegionsProvider };
+export { ReservedRegionsContext, ReservedRegionsProvider, useHinge };

package/Layout/index.ts

@@ -10,6 +10,7 @@ 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,
@@ -31,4 +32,5 @@ export {
   ItemSectionList,
   Screen,
   TrackingScope,
+  useHinge,
 };

package/Popup/PopupNotify.tsx

@@ -1,19 +1,15 @@
 import React, { useContext, useRef, useState } from 'react';
-import { ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
 import { ApplicationContext, MiniAppContext } from '../Context';
 import { Button } from '../Button';
-import { Colors, Radius, Spacing, Styles } from '../Consts';
-import { Icon } from '../Icon';
+import { Colors, Spacing, Styles } from '../Consts';
 import { Image } from '../Image';
 import { Text, useScaleSize } from '../Text';
 import { PopupNotifyProps } from './types';
 import { scheduleOnRN } from 'react-native-worklets';
-import {
-  getPopupRadius,
-  splitHighlightText,
-  usePopupMaxHeight,
-  usePopupWidth,
-} from './utils';
+import { useModalLayout } from '../Application/modalLayout';
+import { ModalIconButton } from '../Application/ModalIconButton';
+import { splitHighlightText } from './utils';
 
 const PopupNotify: React.FC<PopupNotifyProps> = ({
   image,
@@ -30,16 +26,19 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
   const [scrollContent, setScrollContent] = useState(false);
-  const popupWidth = usePopupWidth();
-  const maxHeight = usePopupMaxHeight();
-  const radius = getPopupRadius();
+  const { isFoldable, popup } = useModalLayout();
+  const { width: popupWidth, maxHeight, radius } = popup;
   const scaledMaxHeight = useScaleSize(172);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
   let descriptionStyle = {};
   let Description: any = View;
-  if (scrollContent) {
+  if (isFoldable) {
+    // foldables cap the popup height, the description takes what is left
+    Description = ScrollView;
+    descriptionStyle = styles.shrink;
+  } else if (scrollContent) {
     Description = ScrollView;
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
@@ -165,34 +164,20 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
    * build close action
    */
   const buildCloseIcon = () => {
-    if (typeof onIconClose === 'function') {
-      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>
-      );
+    if (typeof onIconClose !== 'function') {
+      return null;
     }
+    return (
+      <ModalIconButton
+        icon="navigation_close"
+        accessibilityLabel={'ic_popup_close'}
+        style={styles.iconClose}
+        onPress={() => {
+          closeAction.current = 'icon_close';
+          onAction(onIconClose);
+        }}
+      />
+    );
   };
 
   const body = (
@@ -206,11 +191,17 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
           ]}
         />
       )}
-      <View style={styles.content}>
+      <View style={[styles.content, isFoldable && styles.shrink]}>
         <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={
+            !image &&
+            typeof onIconClose === 'function' &&
+            styles.titleClearClose
+          }
         >
           {title}
         </Text>
@@ -262,20 +253,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         showBaseLineDebug && styles.debugBaseLine,
       ]}
     >
-      {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>
-      )}
+      {body}
       <View style={styles.contentAction}>{buildAction()}</View>
       {buildCloseIcon()}
     </View>
@@ -288,7 +266,7 @@ const styles = StyleSheet.create({
     aspectRatio: 1.7777,
     overflow: 'hidden',
   },
-  body: { flexShrink: 1, overflow: 'hidden' },
+  shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },
   description: {
     marginTop: Spacing.S,
@@ -304,19 +282,11 @@ const styles = StyleSheet.create({
     width: Spacing.S,
     height: Spacing.S,
   },
-  iconCloseContainer: {
-    position: 'absolute',
-    top: -Spacing.M,
-    right: -Spacing.M,
-    padding: Spacing.XS,
-  },
+  titleClearClose: { paddingRight: Spacing.XL },
   iconClose: {
-    width: 20,
-    height: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: Radius.M,
-    borderWidth: 2,
+    position: 'absolute',
+    top: Spacing.M,
+    right: Spacing.M,
   },
 });
 

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

package/Popup/utils.ts

@@ -1,30 +1,5 @@
-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;
@@ -76,4 +51,4 @@ const splitHighlightText = (
   return segments;
 };
 
-export { usePopupWidth, usePopupMaxHeight, getPopupRadius, splitHighlightText };
+export { splitHighlightText };

package/package.json

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