@momo-kits/foundation 0.169.6 → 0.169.7-beta.10

package/Application/BottomSheet.hooks.ts

@@ -51,10 +51,8 @@ export const useBottomSheetLayout = () => {
   };
 };
 
-/**
- * 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.
- */
+// KeyboardAvoidingView lifts the whole sheet past the top on iPhone Duo,
+// so lift it here and shrink maxHeight by the same amount instead
 export const useDuoKeyboardLift = (
   isDuo: boolean,
   useKeyboardAvoidingView: boolean,
@@ -138,10 +136,6 @@ 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,
@@ -149,6 +143,9 @@ export const useSheetDismiss = ({
   leftOptions,
   action,
 }: SheetDismissParams) => {
+  /**
+   * handler dismiss
+   */
   const onDismiss = useCallback(
     (force = false, callback?: () => void) => {
       if (barrierDismissible && !force) {
@@ -164,6 +161,9 @@ export const useSheetDismiss = ({
     [barrierDismissible, closeAnimation, navigator],
   );
 
+  /**
+   * on request close
+   */
   const onRequestClose = useCallback(
     (callback?: () => void) => {
       onDismiss(true, callback);

package/Application/BottomSheet.parts.tsx

@@ -34,52 +34,42 @@ export const renderSheetHeader = ({
   iconBack,
   options,
   leftOptions,
-}: SheetHeaderParams) => {
-  let backButton: React.ReactNode = null;
-  if (showBack) {
-    backButton = <ModalIconButton icon={iconBack} onPress={onPressBack} />;
-  }
-
-  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}
+}: 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}
 
-        {headerContent}
-        <ModalIconButton icon="navigation_close" onPress={onPressClose} />
-      </View>
+      {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} />
     </View>
-  );
-};
+  </View>
+);
 
 /**
  * Footer pinned under the sheet content, `null` when the sheet has none.

package/Application/BottomSheet.tsx

@@ -18,6 +18,7 @@ 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,
@@ -30,10 +31,6 @@ 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);
@@ -102,9 +99,8 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => draggable,
-      onMoveShouldSetPanResponder: (_, gestureState) => {
-        return draggable && gestureState.dy > 0;
-      },
+      onMoveShouldSetPanResponder: (_, gestureState) =>
+        draggable && gestureState.dy > 0,
       onPanResponderMove: (_, gestureState) => {
         if (gestureState.dy > 0) {
           translateY.value = gestureState.dy;
@@ -136,7 +132,10 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     backgroundColor = theme.colors.background.surface;
   }
 
-  // Mount only, so folding or rotating iPhone Duo doesn't emit a dismiss.
+  /**
+   * emit dismiss event, once: folding or rotating iPhone Duo changes the
+   * window height while the sheet stays open
+   */
   useEffect(() => {
     openAnimation();
     return () => {
@@ -144,14 +143,14 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
     };
   }, [openAnimation]);
 
-  const handlers = useSheetDismiss({
-    barrierDismissible,
-    closeAnimation,
-    navigator,
-    leftOptions,
-    action,
-  });
-  const { onDismiss, onRequestClose, onPressBack, onPressClose } = handlers;
+  const { onDismiss, onRequestClose, onPressBack, onPressClose } =
+    useSheetDismiss({
+      barrierDismissible,
+      closeAnimation,
+      navigator,
+      leftOptions,
+      action,
+    });
 
   const showBack = !!leftOptions?.onPressIconLeft;
   const iconBack = leftOptions?.iconLeft ?? 'ic_back';
@@ -175,31 +174,18 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
   );
 
   const screen = (
-    <Screen
-      {...props}
-      {...props.route.params}
-      onRequestClose={onRequestClose}
-    />
+    <AdoptionProbe
+      screenName={Screen?.name || 'Invalid'}
+      navigation={props.navigation}
+    >
+      <Screen
+        {...props}
+        {...props.route.params}
+        onRequestClose={onRequestClose}
+      />
+    </AdoptionProbe>
   );
 
-  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
@@ -245,7 +231,18 @@ const BottomSheet: React.FC<BottomSheetParams> = props => {
             }),
           ]}
         >
-          {content}
+          {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}
+            </>
+          )}
           {renderSheetFooter({ footerComponent, theme })}
           {useBottomInset && (
             <View

package/Application/BottomTab/ActiveIndicator.tsx

@@ -19,8 +19,8 @@ type Props = {
 };
 
 /**
- * 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.
+ * 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
  */
 const ActiveIndicator: React.FC<Props> = ({
   axis,
@@ -49,19 +49,18 @@ const ActiveIndicator: React.FC<Props> = ({
     position.value = withTiming(offset, TabBarMotion.indicator);
   }, [offset, extent, position, size, visible]);
 
-  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 }],
-    };
-  });
+  const animatedStyle = useAnimatedStyle(() =>
+    axis === 'x'
+      ? {
+          opacity: visible.value,
+          width: size.value,
+          transform: [{ translateX: position.value }],
+        }
+      : {
+          opacity: visible.value,
+          transform: [{ translateY: position.value }],
+        },
+  );
 
   return (
     <Animated.View

package/Application/BottomTab/BottomTabBar.tsx

@@ -17,6 +17,7 @@ import { CurvedContainer } from './CurvedContainer';
 import { ActiveIndicator } from './ActiveIndicator';
 import { getHorizontalBarWidth, TabBarMetrics, TabBarMotion } from './metrics';
 import { getTabItems, TabItem } from './tabItems';
+import { FixedScaleText } from './TabBarIcon';
 import { styles } from './BottomTabBar.styles';
 
 type Props = BottomTabBarProps & {
@@ -26,28 +27,24 @@ type Props = BottomTabBarProps & {
 };
 
 /**
- * Whether the bar shows the center action. It needs a tab on each side, so the
- * Special type takes 2 or 4 tabs.
+ * the center action needs a tab on each side: Special type takes 2 or 4 tabs
  */
-const hasCenterAction = (floatingButton: unknown, tabCount: number) => {
-  return !!floatingButton && tabCount % 2 === 0;
-};
+const hasCenterAction = (floatingButton: unknown, tabCount: number) =>
+  !!floatingButton && tabCount % 2 === 0;
 
 /**
- * Gap under the bar container for the home indicator / gesture bar area, at
- * least `Spacing.S`; iOS caps it at the indicator height.
+ * gap under the container: the home indicator / gesture bar area
  */
-const getSystemIndicatorHeight = (bottomInset: number) => {
-  let height = bottomInset;
-  if (Platform.OS === 'ios') {
-    height = Math.min(bottomInset, TabBarMetrics.systemIndicatorHeight);
-  }
-  return Math.max(height, Spacing.S);
-};
+const getSystemIndicatorHeight = (bottomInset: number) =>
+  Math.max(
+    Platform.OS === 'ios'
+      ? Math.min(bottomInset, TabBarMetrics.systemIndicatorHeight)
+      : bottomInset,
+    Spacing.S,
+  );
 
 /**
- * Press feedback of the center action: the button shrinks while held, the label
- * stays still.
+ * center action press: the button shrinks while held; the label stays plain text
  */
 const useCenterActionPress = () => {
   const scale = useSharedValue(1);
@@ -67,27 +64,26 @@ const useCenterActionPress = () => {
 };
 
 /**
- * Center action (.Nav/CTA): a button rising out of the notch, its label below
- * (growing downward when scaled).
+ * center action (.Nav/CTA): button rising out of the notch, label under it
  */
-const CenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
-  floatingButton,
-}) => {
+const CenterAction: React.FC<{
+  floatingButton: FloatingButtonProps;
+  fixedFontScale?: boolean;
+}> = ({ floatingButton, fixedFontScale }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const { icon, label, onPress, labelContent } = floatingButton;
   const { buttonStyle, onPressIn, onPressOut } = useCenterActionPress();
-  let iconNode = icon;
-  if (typeof icon === 'string') {
-    iconNode = (
-      <Icon
-        source={icon}
-        size={TabBarMetrics.ctaIconSize}
-        color={Colors.black_01}
-      />
-    );
-  }
+  const labelText = (
+    <Text
+      numberOfLines={1}
+      typography={'label_s_medium'}
+      color={theme.colors.text.secondary}
+    >
+      {label}
+    </Text>
+  );
 
   return (
     <View style={[styles.ctaSlot, showBaseLineDebug && styles.debugBaseLine]}>
@@ -106,16 +102,22 @@ const CenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
             buttonStyle,
           ]}
         >
-          {iconNode}
+          {typeof icon === 'string' ? (
+            <Icon
+              source={icon}
+              size={TabBarMetrics.ctaIconSize}
+              color={Colors.black_01}
+            />
+          ) : (
+            icon
+          )}
         </Animated.View>
         <View style={styles.ctaLabel}>
-          <Text
-            numberOfLines={1}
-            typography={'label_s_medium'}
-            color={theme.colors.text.secondary}
-          >
-            {label}
-          </Text>
+          {fixedFontScale ? (
+            <FixedScaleText>{labelText}</FixedScaleText>
+          ) : (
+            labelText
+          )}
           {labelContent && (
             <View pointerEvents={'none'} style={styles.ctaLabelOverlay}>
               {labelContent}
@@ -128,8 +130,8 @@ const CenterAction: React.FC<{ floatingButton: FloatingButtonProps }> = ({
 };
 
 /**
- * Horizontal navigation bar: a floating container with evenly split items; the
- * Special type puts the center action in a notch in the middle.
+ * horizontal navigation bar: floating container, items split evenly, Special type puts
+ * the center action in a notch in the middle
  */
 const HorizontalTabBar: React.FC<{
   items: TabItem[];
@@ -137,15 +139,23 @@ const HorizontalTabBar: React.FC<{
   activeTintColor: string;
   inactiveTintColor: string;
   floatingButton?: FloatingButtonProps;
-}> = ({ items, width, activeTintColor, inactiveTintColor, floatingButton }) => {
+  fixedFontScale?: boolean;
+}> = ({
+  items,
+  width,
+  activeTintColor,
+  inactiveTintColor,
+  floatingButton,
+  fixedFontScale,
+}) => {
   const withCta = hasCenterAction(floatingButton, items.length);
   const [layouts, setLayouts] = useState<
     Record<string, { x: number; y: number; width: number }>
   >({});
   const selected = layouts[items.find(item => item.focused)?.route.key ?? ''];
 
-  const renderItems = (data: TabItem[]) => {
-    return data.map(item => (
+  const renderItems = (data: TabItem[]) =>
+    data.map(item => (
       <CustomBottomTabItem
         key={item.route.key}
         onLayout={e => {
@@ -163,9 +173,9 @@ const HorizontalTabBar: React.FC<{
         onLongPress={item.onLongPress}
         activeTintColor={activeTintColor}
         inactiveTintColor={inactiveTintColor}
+        fixedFontScale={fixedFontScale}
       />
     ));
-  };
 
   const renderContent = () => {
     if (withCta && floatingButton) {
@@ -173,7 +183,10 @@ const HorizontalTabBar: React.FC<{
       return (
         <>
           {renderItems(items.slice(0, middle))}
-          <CenterAction floatingButton={floatingButton} />
+          <CenterAction
+            floatingButton={floatingButton}
+            fixedFontScale={fixedFontScale}
+          />
           {renderItems(items.slice(middle))}
         </>
       );
@@ -214,9 +227,9 @@ const HorizontalTabBar: React.FC<{
 };
 
 /**
- * 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.
+ * 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
  */
 export default function BottomTabBar(props: Props) {
   const { state, floatingButton, activeTintColor, inactiveTintColor } = props;

package/Application/BottomTab/BottomTabInset.tsx

@@ -1,15 +1,11 @@
 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;
-  /**
-   * 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.
-   */
+  // 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
   claim?: () => void;
 };
 

package/Application/BottomTab/CurvedContainer.tsx

@@ -15,18 +15,16 @@ 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;
 
 /**
- * SVG path of the rounded container placed at (`x`, `y`) on the canvas, with the notch
- * dipped into the top edge around `notchCenterX`.
+ * rounded container path placed at (`x`, `y`) on the canvas, with the notch dipped into the
+ * top edge around `notchCenterX`
  */
 const getContainerPath = (
   width: number,
@@ -45,10 +43,11 @@ const getContainerPath = (
   if (notchCenterX !== undefined) {
     const cx = x + notchCenterX;
     const point = ([dx, dy]: [number, number]) => `${cx + dx} ${top + dy}`;
-    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('')}`;
+    notch =
+      ` L ${cx - NOTCH_HALF_WIDTH} ${top}` +
+      NOTCH_CURVES.map(
+        ([c1, c2, end]) => ` C ${point(c1)} ${point(c2)} ${point(end)}`,
+      ).join('');
   }
   return (
     `M ${left + r} ${top}` +
@@ -65,8 +64,8 @@ const getContainerPath = (
 };
 
 /**
- * Navigation bar container: surface fill with the floating shadow, drawn as an SVG shape
- * so the shadow follows the notch.
+ * navigation bar container: surface fill with the floating shadow, drawn as a shape so
+ * the shadow follows the notch
  */
 const CurvedContainer: React.FC<Props> = ({
   width,
@@ -88,7 +87,6 @@ const CurvedContainer: React.FC<Props> = ({
     SHADOW_PADDING,
     notchCenterX,
   );
-  const hasKeyShadow = width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD;
 
   return (
     <Svg
@@ -125,7 +123,7 @@ const CurvedContainer: React.FC<Props> = ({
         fillOpacity={0.12}
         filter={'url(#ambientShadow)'}
       />
-      {hasKeyShadow && (
+      {width > 2 * KEY_SPREAD && height > 2 * KEY_SPREAD && (
         <Path
           d={getContainerPath(
             width - 2 * KEY_SPREAD,

package/Application/BottomTab/CustomBottomTabItem.tsx

@@ -10,7 +10,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { TabBarIcon } from './TabBarIcon';
+import { FixedScaleText, TabBarIcon } from './TabBarIcon';
 import { Text } from '../../Text';
 import { MiniAppContext } from '../../Context';
 import { Colors, Spacing } from '../../Consts';
@@ -31,12 +31,14 @@ type TabItemContentProps = {
   badge?: string | number;
   // rail item (.Nav/Duo/Item) instead of the horizontal one (.Nav/itemTab)
   vertical?: boolean;
+  // keep the label at its design size, the Duo displays otherwise scale it up
+  fixedFontScale?: boolean;
   hideLabel?: boolean;
 };
 
 /**
- * Tab item body: the icon in its indicator slot, the label in a fixed slot under it so a
- * scaled label grows down. The bar slides one shared active indicator behind the icon slots.
+ * 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
  */
 const TabItemContent: React.FC<TabItemContentProps> = ({
   label,
@@ -46,6 +48,7 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
   icon,
   badge,
   vertical,
+  fixedFontScale,
   hideLabel,
 }) => {
   const progress = useSharedValue(focused ? 1 : 0);
@@ -69,9 +72,9 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
     </Text>
   );
 
-  // Active label fades in over the inactive one; a scaled label overflows down.
-  const labelNode = (
-    <View style={vertical ? styles.railLabelSlot : styles.labelSlot}>
+  // the active label fades in over the inactive one
+  const text = (
+    <View style={!vertical && styles.labelBox}>
       {renderText(inactiveTintColor)}
       <Animated.View
         pointerEvents={'none'}
@@ -94,7 +97,8 @@ const TabItemContent: React.FC<TabItemContentProps> = ({
           renderIcon={icon}
         />
       </View>
-      {!hideLabel && labelNode}
+      {!hideLabel &&
+        (fixedFontScale ? <FixedScaleText>{text}</FixedScaleText> : text)}
     </>
   );
 };
@@ -108,7 +112,7 @@ type CustomBottomTabItemProps = TabItemContentProps & {
 };
 
 /**
- * Horizontal navigation item (.Nav/itemTab), filling an even share of the container.
+ * horizontal navigation item (.Nav/itemTab): fills an even share of the container
  */
 const CustomBottomTabItem: React.FC<CustomBottomTabItemProps> = ({
   onPress,
@@ -160,13 +164,9 @@ const styles = StyleSheet.create({
     paddingVertical: TabBarMetrics.railIndicatorPaddingVertical,
     paddingHorizontal: TabBarMetrics.indicatorPaddingHorizontal,
   },
-  labelSlot: {
-    height: TabBarMetrics.labelHeight,
+  labelBox: {
     alignSelf: 'stretch',
   },
-  railLabelSlot: {
-    height: TabBarMetrics.railLabelHeight,
-  },
   label: {
     textAlign: 'center',
   },