@momo-kits/foundation 0.169.1 → 0.169.2

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 './utils';
+import { isIPhoneDuo } from './utils';
+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/index.ts

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

package/Application/modalLayout.ts

@@ -0,0 +1,177 @@
+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 './utils';
+
+// 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/Application/types.tabs.ts

@@ -40,4 +40,9 @@ export type FloatingButtonProps = {
   icon: string | React.ReactNode;
   label: string;
   onPress: () => void;
+  /**
+   * Drawn over the label text, which stays, e.g. a Lottie of the label; centered on the
+   * label and unclipped. `icon` takes the button part (inside the 48 button)
+   */
+  labelContent?: React.ReactNode;
 };

package/Application/utils.ts

@@ -1,13 +1,8 @@
 import { Animated, Dimensions, Platform, ScaledSize } from 'react-native';
 import type { NavigationState, PartialState } from '@react-navigation/native';
 import type { SharedValue } from 'react-native-reanimated';
-import type { EdgeInsets } from 'react-native-safe-area-context';
-import { Spacing } from '../Consts';
 
 const IPHONE_MAX_SHORT_SIDE = 440;
-const DUO_MODAL_MAX_WIDTH = 440;
-const DUO_MODAL_MAX_HEIGHT = 640;
-const DUO_SIDE_STATUS_BAR_SCALE = 2;
 
 /**
  * Animation runtimes an internal header component may receive. Public Screen
@@ -100,35 +95,6 @@ const isIPhoneDuo = () => {
   return Math.max(screenSide, windowSide) > IPHONE_MAX_SHORT_SIDE;
 };
 
-/**
- * Top inset on iPhone Duo. In portrait the status bar sits on the side, about
- * twice as tall as its inset is wide, so the larger of the two wins.
- */
-const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) => {
-  if (width >= height) {
-    return insets.top;
-  }
-  const sideInset = Math.max(insets.left, insets.right);
-  return Math.max(insets.top, sideInset * DUO_SIDE_STATUS_BAR_SCALE);
-};
-
-/**
- * Max modal size on iPhone Duo: inside the safe area, clear of the side
- * toolbar, and capped so it stays a dialog on the inner display.
- */
-const getDuoModalBounds = (
-  insets: EdgeInsets,
-  width: number,
-  height: number,
-) => {
-  const safeWidth = width - insets.left - insets.right - Spacing.XL * 2;
-  const safeHeight = height - insets.top - insets.bottom - Spacing.XL * 2;
-  return {
-    maxWidth: Math.min(safeWidth, DUO_MODAL_MAX_WIDTH),
-    maxHeight: Math.min(safeHeight, DUO_MODAL_MAX_HEIGHT),
-  };
-};
-
 export type { AnimatedCompatValue, NavigationTreeState };
 export {
   hasMethod,
@@ -138,6 +104,4 @@ export {
   getStackDepth,
   isWhiteListDesignSystem,
   isIPhoneDuo,
-  getDuoTopInset,
-  getDuoModalBounds,
 };

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/Screen.tsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
 } from 'react';
 import {
@@ -26,7 +27,7 @@ import { getOptions } from '../Application/navigationOptions';
 import { useScreenLayout } from './utils';
 import { HeaderExtendHeader } from '../Application';
 import { DuoScrollGradient } from '../Application/Components/DuoGlassBackground';
-import { useDuoTabBarInset } from '../Application/BottomTab/DuoTabBar';
+import { BottomTabInsetContext } from '../Application/BottomTab/BottomTabInset';
 import { ScreenProps } from './screenTypes';
 import { renderAnimatedHeader, renderContent } from './screenContent';
 import { createScrollHandlers } from './screenScroll';
@@ -94,7 +95,15 @@ const Screen = forwardRef(
     }, [customAnimatedValue, internalShared]);
 
     const isTab = !!screen?.bottomTab;
-    const duoTabInset = useDuoTabBarInset();
+    const tabBarInset = useContext(BottomTabInsetContext);
+    const duoTabInset = isTab ? tabBarInset.inset : 0;
+    const claimTabBarInset = tabBarInset.claim;
+    // this screen keeps its content clear of the floating tab bar, so the tab stops padding it
+    useLayoutEffect(() => {
+      if (duoTabInset) {
+        claimTabBarInset?.();
+      }
+    }, [duoTabInset, claimTabBarInset]);
 
     const isIOS = Platform.OS === 'ios';
     const bottomInset = isIOS ? Math.min(insets.bottom, 21) : insets.bottom;

package/Layout/index.ts

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