@momo-kits/foundation 0.169.5-beta.1 → 0.169.5

package/Application/BottomSheet.hooks.ts

@@ -51,8 +51,10 @@ export const useBottomSheetLayout = () => {
   };
 };
 
-// KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
-// so lift it here and shrink maxHeight by the same amount instead
+/**
+ * Keyboard lift of the sheet on iPhone Duo, where KeyboardAvoidingView pushes
+ * the whole sheet past the top; the sheet lifts by it and shrinks its maxHeight.
+ */
 export const useDuoKeyboardLift = (
   isDuo: boolean,
   useKeyboardAvoidingView: boolean,
@@ -136,6 +138,10 @@ type SheetDismissParams = {
   action: MutableRefObject<undefined | string>;
 };
 
+/**
+ * Close handlers of a bottom sheet. A non-forced dismiss (scrim tap, hardware
+ * back) is ignored while `barrierDismissible` is set.
+ */
 export const useSheetDismiss = ({
   barrierDismissible,
   closeAnimation,
@@ -143,9 +149,6 @@ export const useSheetDismiss = ({
   leftOptions,
   action,
 }: SheetDismissParams) => {
-  /**
-   * handler dismiss
-   */
   const onDismiss = useCallback(
     (force = false, callback?: () => void) => {
       if (barrierDismissible && !force) {
@@ -161,9 +164,6 @@ export const useSheetDismiss = ({
     [barrierDismissible, closeAnimation, navigator],
   );
 
-  /**
-   * on request close
-   */
   const onRequestClose = useCallback(
     (callback?: () => void) => {
       onDismiss(true, callback);

package/Application/BottomSheet.parts.tsx

@@ -34,42 +34,52 @@ export const renderSheetHeader = ({
   iconBack,
   options,
   leftOptions,
-}: SheetHeaderParams) => (
-  <View {...panHandlers}>
-    <View style={{ height: INDICATOR_HEIGHT }}>
-      <View style={styles.indicator} />
-    </View>
-    <View
-      style={[
-        styles.header,
-        useDivider && styles.headerDivider,
-        useDivider && {
-          borderBottomColor: theme.colors.border.default,
-        },
-      ]}
-    >
-      {showBack ? (
-        <ModalIconButton icon={iconBack} onPress={onPressBack} />
-      ) : null}
+}: SheetHeaderParams) => {
+  let backButton: React.ReactNode = null;
+  if (showBack) {
+    backButton = <ModalIconButton icon={iconBack} onPress={onPressBack} />;
+  }
 
-      {options.header ? (
-        <View style={Styles.flex}>{options.header}</View>
-      ) : (
-        <>
-          {!leftOptions ? <View style={styles.iconButtonSpace} /> : null}
-          <Text
-            style={[Styles.flex, styles.title]}
-            numberOfLines={1}
-            typography="header_default_bold"
-          >
-            {options.title ?? ''}
-          </Text>
-        </>
-      )}
-      <ModalIconButton icon="navigation_close" onPress={onPressClose} />
+  let headerContent: React.ReactNode;
+  if (options.header) {
+    headerContent = <View style={Styles.flex}>{options.header}</View>;
+  } else {
+    headerContent = (
+      <>
+        {!leftOptions ? <View style={styles.iconButtonSpace} /> : null}
+        <Text
+          style={[Styles.flex, styles.title]}
+          numberOfLines={1}
+          typography="header_default_bold"
+        >
+          {options.title ?? ''}
+        </Text>
+      </>
+    );
+  }
+
+  return (
+    <View {...panHandlers}>
+      <View style={{ height: INDICATOR_HEIGHT }}>
+        <View style={styles.indicator} />
+      </View>
+      <View
+        style={[
+          styles.header,
+          useDivider && styles.headerDivider,
+          useDivider && {
+            borderBottomColor: theme.colors.border.default,
+          },
+        ]}
+      >
+        {backButton}
+
+        {headerContent}
+        <ModalIconButton icon="navigation_close" onPress={onPressClose} />
+      </View>
     </View>
-  </View>
-);
+  );
+};
 
 /**
  * Footer pinned under the sheet content, `null` when the sheet has none.

package/Application/BottomSheet.tsx

@@ -18,7 +18,6 @@ import Animated, {
 } from 'react-native-reanimated';
 import { scheduleOnRN } from 'react-native-worklets';
 import { DUO_ORIENTATIONS, styles } from './BottomSheet.styles';
-import { AdoptionProbe } from './KitAdoption';
 import {
   useBottomSheetLayout,
   useDuoKeyboardLift,
@@ -31,6 +30,10 @@ import {
   renderSheetHeader,
 } from './BottomSheet.parts';
 
+/**
+ * Bottom sheet route of the modal stack: slides the given screen up under a
+ * drag handle and header, and reports how it was closed through `onDismiss`.
+ */
 const BottomSheet: React.FC<BottomSheetParams> = props => {
   const { theme, navigator } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -99,8 +102,9 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
-      onMoveShouldSetPanResponder: (_, gestureState) =>
-        draggable && gestureState.dy > 0,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return draggable && gestureState.dy > 0;
+      },
       onPanResponderMove: (_, gestureState) => {
         if (gestureState.dy > 0) {
           translateY.value = gestureState.dy;
@@ -132,10 +136,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     backgroundColor = theme.colors.background.surface;
   }
 
-  /**
-   * emit dismiss event, once: folding or rotating iPhone Duo changes the
-   * window height while the sheet stays open
-   */
+  // Mount only, so folding or rotating iPhone Duo doesn't emit a dismiss.
   useEffect(() => {
     openAnimation();
     return () => {
@@ -143,14 +144,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   }, [openAnimation]);
 
-  const { onDismiss, onRequestClose, onPressBack, onPressClose } =
-    useSheetDismiss({
-      barrierDismissible,
-      closeAnimation,
-      navigator,
-      leftOptions,
-      action,
-    });
+  const handlers = useSheetDismiss({
+    barrierDismissible,
+    closeAnimation,
+    navigator,
+    leftOptions,
+    action,
+  });
+  const { onDismiss, onRequestClose, onPressBack, onPressClose } = handlers;
 
   const showBack = !!leftOptions?.onPressIconLeft;
   const iconBack = leftOptions?.iconLeft ?? 'ic_back';
@@ -174,18 +175,31 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <AdoptionProbe
-      screenName={Screen?.name || 'Invalid'}
-      navigation={props.navigation}
-    >
-      <Screen
-        {...props}
-        {...props.route.params}
-        onRequestClose={onRequestClose}
-      />
-    </AdoptionProbe>
+    <Screen
+      {...props}
+      {...props.route.params}
+      onRequestClose={onRequestClose}
+    />
   );
 
+  let content: React.ReactNode;
+  if (isFoldable) {
+    // Content shrinks so a tall sheet keeps its header and footer.
+    content = (
+      <View style={styles.shrink}>
+        {renderSheetHeader(headerParams)}
+        <View style={styles.shrink}>{screen}</View>
+      </View>
+    );
+  } else {
+    content = (
+      <>
+        {renderSheetHeader(headerParams)}
+        {screen}
+      </>
+    );
+  }
+
   return (
     <Container
       transparent
@@ -231,18 +245,7 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             }),
           ]}
         >
-          {isFoldable ? (
-            // content shrinks so a tall sheet keeps its header and footer
-            <View style={styles.shrink}>
-              {renderSheetHeader(headerParams)}
-              <View style={styles.shrink}>{screen}</View>
-            </View>
-          ) : (
-            <>
-              {renderSheetHeader(headerParams)}
-              {screen}
-            </>
-          )}
+          {content}
           {renderSheetFooter({ footerComponent, theme })}
           {useBottomInset && (
             <View

package/Application/BottomTab/ActiveIndicator.tsx

@@ -19,8 +19,8 @@ type Props = {
 };
 
 /**
- * one active indicator per bar (Background/tonal with its inner shadows) sliding to the
- * selected item; it lands in place on the first measure and slides from then on
+ * The single active indicator of a bar (Background/tonal with inner shadows) that slides
+ * to the selected item. It lands in place on the first measure and slides from then on.
  */
 const ActiveIndicator: React.FC<Props> = ({
   axis,
@@ -49,18 +49,19 @@ const ActiveIndicator: React.FC<Props> = ({
     position.value = withTiming(offset, TabBarMotion.indicator);
   }, [offset, extent, position, size, visible]);
 
-  const animatedStyle = useAnimatedStyle(() =>
-    axis === 'x'
-      ? {
-          opacity: visible.value,
-          width: size.value,
-          transform: [{ translateX: position.value }],
-        }
-      : {
-          opacity: visible.value,
-          transform: [{ translateY: position.value }],
-        },
-  );
+  const animatedStyle = useAnimatedStyle(() => {
+    if (axis === 'x') {
+      return {
+        opacity: visible.value,
+        width: size.value,
+        transform: [{ translateX: position.value }],
+      };
+    }
+    return {
+      opacity: visible.value,
+      transform: [{ translateY: position.value }],
+    };
+  });
 
   return (
     <Animated.View

package/Application/BottomTab/BottomTabBar.tsx

@@ -27,24 +27,28 @@ type Props = BottomTabBarProps & {
 };
 
 /**
- * the center action needs a tab on each side: Special type takes 2 or 4 tabs
+ * Whether the bar shows the center action. It needs a tab on each side, so the
+ * Special type takes 2 or 4 tabs.
  */
-const hasCenterAction = (floatingButton: unknown, tabCount: number) =>
-  !!floatingButton && tabCount % 2 === 0;
+const hasCenterAction = (floatingButton: unknown, tabCount: number) => {
+  return !!floatingButton && tabCount % 2 === 0;
+};
 
 /**
- * gap under the container: the home indicator / gesture bar area
+ * Gap under the bar container for the home indicator / gesture bar area, at
+ * least `Spacing.S`; iOS caps it at the indicator height.
  */
-const getSystemIndicatorHeight = (bottomInset: number) =>
-  Math.max(
-    Platform.OS === 'ios'
-      ? Math.min(bottomInset, TabBarMetrics.systemIndicatorHeight)
-      : bottomInset,
-    Spacing.S,
-  );
+const getSystemIndicatorHeight = (bottomInset: number) => {
+  let height = bottomInset;
+  if (Platform.OS === 'ios') {
+    height = Math.min(bottomInset, TabBarMetrics.systemIndicatorHeight);
+  }
+  return Math.max(height, Spacing.S);
+};
 
 /**
- * center action press: the button shrinks while held; the label stays plain text
+ * Press feedback of the center action: the button shrinks while held, the label
+ * stays still.
  */
 const useCenterActionPress = () => {
   const scale = useSharedValue(1);
@@ -64,7 +68,7 @@ const useCenterActionPress = () => {
 };
 
 /**
- * center action (.Nav/CTA): button rising out of the notch, label under it
+ * Center action (.Nav/CTA): a button rising out of the notch, its label below.
  */
 const CenterAction: React.FC<{
   floatingButton: FloatingButtonProps;
@@ -85,6 +89,22 @@ const CenterAction: React.FC<{
     </Text>
   );
 
+  let iconNode = icon;
+  if (typeof icon === 'string') {
+    iconNode = (
+      <Icon
+        source={icon}
+        size={TabBarMetrics.ctaIconSize}
+        color={Colors.black_01}
+      />
+    );
+  }
+
+  let labelNode = labelText;
+  if (fixedFontScale) {
+    labelNode = <FixedScaleText>{labelText}</FixedScaleText>;
+  }
+
   return (
     <View style={[styles.ctaSlot, showBaseLineDebug && styles.debugBaseLine]}>
       <Pressable
@@ -102,22 +122,10 @@ const CenterAction: React.FC<{
             buttonStyle,
           ]}
         >
-          {typeof icon === 'string' ? (
-            <Icon
-              source={icon}
-              size={TabBarMetrics.ctaIconSize}
-              color={Colors.black_01}
-            />
-          ) : (
-            icon
-          )}
+          {iconNode}
         </Animated.View>
         <View style={styles.ctaLabel}>
-          {fixedFontScale ? (
-            <FixedScaleText>{labelText}</FixedScaleText>
-          ) : (
-            labelText
-          )}
+          {labelNode}
           {labelContent && (
             <View pointerEvents={'none'} style={styles.ctaLabelOverlay}>
               {labelContent}
@@ -130,8 +138,8 @@ const CenterAction: React.FC<{
 };
 
 /**
- * horizontal navigation bar: floating container, items split evenly, Special type puts
- * the center action in a notch in the middle
+ * Horizontal navigation bar: a floating container with evenly split items; the
+ * Special type puts the center action in a notch in the middle.
  */
 const HorizontalTabBar: React.FC<{
   items: TabItem[];
@@ -154,8 +162,8 @@ const HorizontalTabBar: React.FC<{
   >({});
   const selected = layouts[items.find(item => item.focused)?.route.key ?? ''];
 
-  const renderItems = (data: TabItem[]) =>
-    data.map(item => (
+  const renderItems = (data: TabItem[]) => {
+    return data.map(item => (
       <CustomBottomTabItem
         key={item.route.key}
         onLayout={e => {
@@ -176,6 +184,7 @@ const HorizontalTabBar: React.FC<{
         fixedFontScale={fixedFontScale}
       />
     ));
+  };
 
   const renderContent = () => {
     if (withCta && floatingButton) {
@@ -227,9 +236,9 @@ const HorizontalTabBar: React.FC<{
 };
 
 /**
- * phone tab bar: the horizontal navigation bar floating over the tab content above the home
- * indicator, so the content shows around it and through the notch. The transparent strip
- * above it keeps the rising center action touchable
+ * Phone tab bar: the horizontal bar floats over the tab content above the home indicator,
+ * so content shows around it and through the notch. The transparent strip above it keeps
+ * the rising center action touchable.
  */
 export default function BottomTabBar(props: Props) {
   const { state, floatingButton, activeTintColor, inactiveTintColor } = props;

package/Application/BottomTab/BottomTabInset.tsx

@@ -1,11 +1,15 @@
 import { createContext } from 'react';
 
 type BottomTabInset = {
-  // space the floating tab bar takes over the bottom of a tab's content (bar + home
-  // indicator area, plus the rising center action when shown); 0 on the iPhone Duo rail
+  /**
+   * Space the floating tab bar takes over the bottom of a tab's content (bar + home
+   * indicator area, plus the rising center action when shown); 0 on the iPhone Duo rail.
+   */
   inset: number;
-  // a Screen in the tab keeps its content clear of the bar itself (inside its scroll view,
-  // or above the bar when static), so the tab stops padding its content
+  /**
+   * Called by a Screen in the tab that keeps its content clear of the bar itself (inside
+   * its scroll view, or above the bar when static), so the tab stops padding its content.
+   */
   claim?: () => void;
 };
 

package/Application/BottomTab/CurvedContainer.tsx

@@ -15,16 +15,18 @@ type Props = {
 
 // room for the floating shadow around the shape: the key shadow reaches 12 + 3 × 16 below it
 const SHADOW_PADDING = 64;
-// Figma Shadow/floating: 12% blur 24, plus 4% blur 32 spread -16 offset 12; svg blur takes
-// half the CSS blur radius, the spread shrinks the shape the key shadow is cast from
+/**
+ * Figma Shadow/floating: 12% blur 24, plus 4% blur 32 spread -16 offset 12. SVG blur takes
+ * half the CSS blur radius; the spread shrinks the shape the key shadow is cast from.
+ */
 const AMBIENT_BLUR = 12;
 const KEY_BLUR = 16;
 const KEY_SPREAD = 16;
 const KEY_OFFSET_Y = 12;
 
 /**
- * rounded container path placed at (`x`, `y`) on the canvas, with the notch dipped into the
- * top edge around `notchCenterX`
+ * SVG path of the rounded container placed at (`x`, `y`) on the canvas, with the notch
+ * dipped into the top edge around `notchCenterX`.
  */
 const getContainerPath = (
   width: number,
@@ -43,11 +45,10 @@ const getContainerPath = (
   if (notchCenterX !== undefined) {
     const cx = x + notchCenterX;
     const point = ([dx, dy]: [number, number]) => `${cx + dx} ${top + dy}`;
-    notch =
-      ` L ${cx - NOTCH_HALF_WIDTH} ${top}` +
-      NOTCH_CURVES.map(
-        ([c1, c2, end]) => ` C ${point(c1)} ${point(c2)} ${point(end)}`,
-      ).join('');
+    const curves = NOTCH_CURVES.map(([c1, c2, end]) => {
+      return ` C ${point(c1)} ${point(c2)} ${point(end)}`;
+    });
+    notch = ` L ${cx - NOTCH_HALF_WIDTH} ${top}${curves.join('')}`;
   }
   return (
     `M ${left + r} ${top}` +
@@ -64,8 +65,8 @@ const getContainerPath = (
 };
 
 /**
- * navigation bar container: surface fill with the floating shadow, drawn as a shape so
- * the shadow follows the notch
+ * Navigation bar container: surface fill with the floating shadow, drawn as an SVG shape
+ * so the shadow follows the notch.
  */
 const CurvedContainer: React.FC<Props> = ({
   width,
@@ -87,6 +88,7 @@ const CurvedContainer: React.FC<Props> = ({
     SHADOW_PADDING,
     notchCenterX,
   );
+  const hasKeyShadow = width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD;
 
   return (
     <Svg
@@ -123,7 +125,7 @@ const CurvedContainer: React.FC<Props> = ({
         fillOpacity={0.12}
         filter={'url(#ambientShadow)'}
       />
-      {width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD && (
+      {hasKeyShadow && (
         <Path
           d={getContainerPath(
             width - 2 * KEY_SPREAD,

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -37,8 +37,8 @@ type TabItemContentProps = {
 };
 
 /**
- * icon in its indicator slot, label under it. The bar slides one shared active indicator
- * behind the slots; the icon and label tint cross-fade on focus
+ * Tab item body: the icon in its indicator slot with the label under it. The bar slides one
+ * shared active indicator behind the slots; icon and label tints cross-fade on focus.
  */
 const TabItemContent: React.FC<TabItemContentProps> = ({
   label,
@@ -72,7 +72,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
     </Text>
   );
 
-  // the active label fades in over the inactive one
+  // The active label fades in over the inactive one.
   const text = (
     <View style={!vertical && styles.labelBox}>
       {renderText(inactiveTintColor)}
@@ -85,6 +85,11 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
     </View>
   );
 
+  let labelNode = text;
+  if (fixedFontScale) {
+    labelNode = <FixedScaleText>{text}</FixedScaleText>;
+  }
+
   return (
     <>
       <View style={vertical ? styles.railSlot : styles.slot}>
@@ -97,8 +102,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
           renderIcon={icon}
         />
       </View>
-      {!hideLabel &&
-        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
+      {!hideLabel && labelNode}
     </>
   );
 };
@@ -112,7 +116,7 @@ type CustomBottomTabItemProps = TabItemContentProps & {
 };
 
 /**
- * horizontal navigation item (.Nav/itemTab): fills an even share of the container
+ * Horizontal navigation item (.Nav/itemTab), filling an even share of the container.
  */
 const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   onPress,

package/Application/BottomTab/DuoBarCompression.tsx

@@ -28,9 +28,9 @@ type DuoBarCompression = {
 
 // space kept between the top and the bottom groups (HIG Vertical controls)
 const GROUP_GAP = Spacing.M;
+const BACK_SLOT_HEIGHT = DuoMetrics.controlSize + Spacing.M;
 // Back, then the right toolkit: help + home capsule
-const DEFAULT_TOOLBAR_HEIGHT =
-  DuoMetrics.controlSize + Spacing.M + 2 * DuoMetrics.itemPitch;
+const DEFAULT_TOOLBAR_HEIGHT = BACK_SLOT_HEIGHT + 2 * DuoMetrics.itemPitch;
 // Back, then the single button the toolbar folds into
 const COMPRESSED_TOOLBAR_HEIGHT = 2 * DuoMetrics.controlSize + Spacing.M;
 
@@ -39,16 +39,12 @@ const NO_COMPRESSION: DuoBarCompression = {
   tabBarCompressed: false,
 };
 
-const DuoBarCompressionContext =
-  createContext<DuoBarCompression>(NO_COMPRESSION);
+const DuoBarCompressionContext = createContext(NO_COMPRESSION);
 
 /**
- * keeps the side bar's toolbar and tab bar clear of each other (HIG, Designing for
- * iPhone Duo: Vertical controls):
- * - both fit: both stay whole
- * - one fits whole beside the other compressed: one is compressed, tapping it swaps them
- * - otherwise both rest compressed; tapping one opens it for a moment (the rail closes
- *   again once a tab is picked)
+ * Keeps the Duo side bar's toolbar and tab bar clear of each other (HIG Vertical controls):
+ * both stay whole if they fit, else one is compressed and tapping it swaps them, else both
+ * rest compressed and tapping one opens it until a tab is picked.
  */
 const DuoBarCompressionProvider: React.FC<{
   behavior?: DuoBarCompressionBehavior;
@@ -71,18 +67,16 @@ const DuoBarCompressionProvider: React.FC<{
     }
     const room = height - sideBar.bottom - sideBar.top - GROUP_GAP;
     const tabBar = getRailHeight(tabCount, hasQr);
-    const compressedTabBar =
-      DuoMetrics.controlSize +
-      (hasQr ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
+    const qrHeight = TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight;
+    const compressedTabBar = DuoMetrics.controlSize + (hasQr ? qrHeight : 0);
     const fits = (toolbar: number, tabs: number) => toolbar + tabs <= room;
 
     if (fits(toolbarHeight, tabBar)) {
       return { ...NO_COMPRESSION, setToolbarHeight };
     }
-    const canSwap =
-      fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar) &&
-      fits(toolbarHeight, compressedTabBar);
-    if (canSwap) {
+    const canCompressToolbar = fits(COMPRESSED_TOOLBAR_HEIGHT, tabBar);
+    const canCompressTabBar = fits(toolbarHeight, compressedTabBar);
+    if (canCompressToolbar && canCompressTabBar) {
       return {
         toolbarCompressed: expanded === 'tabBar',
         tabBarCompressed: expanded === 'toolbar',
@@ -97,8 +91,7 @@ const DuoBarCompressionProvider: React.FC<{
       expandTabBar: () => setOpened('tabBar'),
       setToolbarHeight,
     };
-    // an opened rail always shows, even when only the gap between the groups is short:
-    // it closes again once a tab is picked
+    // An opened rail shows even if only the group gap is short; picking a tab closes it.
     if (opened === 'tabBar') {
       return {
         ...open,
@@ -122,6 +115,7 @@ const DuoBarCompressionProvider: React.FC<{
   );
 };
 
+/** Compression state of the Duo side bars; no compression outside the provider. */
 const useDuoBarCompression = () => useContext(DuoBarCompressionContext);
 
 export { DuoBarCompressionProvider, useDuoBarCompression };