@momo-kits/foundation 0.167.1-beta.7 → 0.167.1-duo.12

package/Input/InputMoney.tsx

@@ -9,11 +9,9 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
-  Platform,
   TextInput,
-  TextInputFocusEventData,
-  TextInputSelectionChangeEventData,
+  TextInputFocusEvent,
+  TextInputSelectionChangeEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -57,13 +55,10 @@ const caretFromDigitIndex = (display: string, digitIndex: number) => {
   return 0;
 };
 
-// Finds which range of `old` was replaced to produce `next`. `selection` is
-// the pre-edit selection on iOS and already the post-edit caret on Android,
-// where onSelectionChange fires before onChangeText.
 const detectEdit = (old: string, next: string, selection: Selection): Edit => {
   const { start, end } = selection;
   const removed = old.length - next.length;
-  const preEdit: Edit[] = [
+  const candidates: Edit[] = [
     {
       start,
       end,
@@ -72,26 +67,6 @@ const detectEdit = (old: string, next: string, selection: Selection): Edit => {
     { start: start - removed, end: start, inserted: '' },
     { start, end: start + removed, inserted: '' },
   ];
-  const postEdit: Edit[] = [];
-  const tail = next.length - start;
-  if (start === end && tail <= old.length) {
-    let prefix = 0;
-    while (
-      prefix < Math.min(start, old.length - tail) &&
-      old[prefix] === next[prefix]
-    ) {
-      prefix += 1;
-    }
-    postEdit.push({
-      start: prefix,
-      end: old.length - tail,
-      inserted: next.slice(prefix, start),
-    });
-  }
-  const candidates =
-    Platform.OS === 'android'
-      ? [...postEdit, ...preEdit]
-      : [...preEdit, ...postEdit];
   const match = candidates.find(
     e =>
       e.start >= 0 &&
@@ -196,9 +171,8 @@ const InputMoney = forwardRef(
     const selectionRef = useRef<Selection>({ start: 0, end: 0 });
     // Caret to push to native once the committed text is rendered.
     const pendingCaretRef = useRef<number | null>(null);
-    // Caret the native input reports for the raw, unformatted text. On iOS that
-    // event lands after onChangeText and must not override the formatted caret.
-    const rawCaretRef = useRef<number | null>(null);
+    const pendingSelectionRef = useRef<Selection | null>(null);
+    const editingRef = useRef(false);
     const inputRef = useRef<TextInput>(null);
     const componentName = 'InputMoney';
 
@@ -265,10 +239,13 @@ const InputMoney = forwardRef(
     const _onChangeText = (text: string) => {
       let digits = '';
       let caretDigit = 0;
-      rawCaretRef.current = 0;
+      pendingSelectionRef.current = null;
+      editingRef.current = true;
+      setTimeout(() => {
+        editingRef.current = false;
+      });
       if (text) {
         const edit = detectEdit(displayRef.current, text, selectionRef.current);
-        rawCaretRef.current = edit.start + edit.inserted.length;
         ({ digits, caretDigit } = applyEdit(
           displayRef.current,
           edit,
@@ -281,31 +258,34 @@ const InputMoney = forwardRef(
     };
 
     // Keeps the caret out of the currency suffix.
-    const _onSelectionChange = (
-      e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
-    ) => {
+    const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
       props.onSelectionChange?.(e);
-      const { start, end } = e.nativeEvent.selection;
-      const rawCaret = rawCaretRef.current;
-      rawCaretRef.current = null;
-      if (start === end && start === rawCaret) {
-        return;
-      }
-      const display = displayRef.current;
-      const max = display ? display.length - currency.length : 0;
-      const clamped = { start: Math.min(start, max), end: Math.min(end, max) };
-      selectionRef.current = clamped;
-      if (clamped.start !== start || clamped.end !== end) {
-        inputRef.current?.setSelection(clamped.start, clamped.end);
-      }
+      if (editingRef.current) return;
+      const selection = e.nativeEvent.selection;
+      pendingSelectionRef.current = selection;
+      setTimeout(() => {
+        if (pendingSelectionRef.current !== selection) return;
+        pendingSelectionRef.current = null;
+        const { start, end } = selection;
+        const display = displayRef.current;
+        const max = display ? display.length - currency.length : 0;
+        const clamped = {
+          start: Math.min(start, max),
+          end: Math.min(end, max),
+        };
+        selectionRef.current = clamped;
+        if (clamped.start !== start || clamped.end !== end) {
+          inputRef.current?.setSelection(clamped.start, clamped.end);
+        }
+      });
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/InputPhoneNumber.tsx

@@ -6,10 +6,9 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   StyleSheet,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -93,12 +92,12 @@ const InputPhoneNumber = forwardRef(
       onChangeText?.(text);
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Input/InputSearch.tsx

@@ -10,9 +10,8 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -166,12 +165,12 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     props.accessibilityLabel,
   );
 
-  const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const _onFocus = (e: TextInputFocusEvent) => {
     setFocused(true);
     onFocus?.(e);
   };
 
-  const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+  const _onBlur = (e: TextInputFocusEvent) => {
     setFocused(false);
     onBlur?.(e);
   };

package/Input/InputTextArea.tsx

@@ -7,9 +7,8 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
+  TextInputFocusEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -79,12 +78,12 @@ const InputTextArea = forwardRef(
       setInputValue(text);
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };

package/Layout/Card.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { Dimensions, View, ViewProps } from 'react-native';
-import { useGridSystem } from './utils';
+import { View, ViewProps } from 'react-native';
+import { useGridSystem, useScreenLayout } from './utils';
 import { GridContextProps } from './types';
-import { GridContext, GridSystem } from './index';
+import { GridContext } from './index';
 import { Image } from '../Image';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { ApplicationContext } from '../Context';
 import styles from './styles';
-import { Colors, Radius, Shadow, Spacing } from '../Consts';
+import { Radius, Shadow, Spacing } from '../Consts';
 
 export interface CardProps extends ViewProps {
   /**
@@ -27,12 +27,13 @@ const Card: React.FC<CardProps> = ({
   useShadow = false,
   ...props
 }) => {
-  const { showGrid, theme } = useContext(ApplicationContext);
+  const { theme } = useContext(ApplicationContext);
   const { numberOfColumns } = useGridSystem();
+  const { contentWidth } = useScreenLayout();
 
   const gutterSize = 8;
   const margin = 12;
-  const widthSection = Dimensions.get('window').width - margin * 2;
+  const widthSection = contentWidth - margin * 2;
   let sizePerSpan =
     (widthSection - margin * 2 - gutterSize * (numberOfColumns - 1)) /
       numberOfColumns -
@@ -47,23 +48,6 @@ const Card: React.FC<CardProps> = ({
     },
   };
 
-  /**
-   * render overlay only dev mode
-   */
-  const renderOverlay = () => {
-    return (
-      <>
-        <GridSystem
-          width={widthSection}
-          gutterSize={Spacing.S}
-          screenGrid={false}
-          gridColor={Colors.red_01}
-        />
-        <View pointerEvents={'none'} style={styles.boxGridCard} />
-      </>
-    );
-  };
-
   return (
     <GridContext.Provider value={gridContext}>
       <View
@@ -95,9 +79,7 @@ const Card: React.FC<CardProps> = ({
             ]}
           />
         )}
-        {/* Render only allowed children as valid React elements */}
         {children}
-        {showGrid && renderOverlay()}
       </View>
     </GridContext.Provider>
   );

package/Layout/FloatingButton.tsx

@@ -10,8 +10,8 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
-  runOnJS,
 } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
 import { ApplicationContext } from '../Context';
 import { Icon } from '../Icon';
 import { useScaleSize, exportFontFamily } from '../Text';
@@ -78,7 +78,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               minWidth,
               { duration: 100 },
               finished => {
-                if (finished) runOnJS(setShowText)(false);
+                if (finished) scheduleOnRN(setShowText, false);
               },
             );
           } else {
@@ -87,7 +87,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
               maxWidth.value,
               { duration: 100 },
               finished => {
-                if (finished) runOnJS(setShowText)(true);
+                if (finished) scheduleOnRN(setShowText, true);
               },
             );
           }

package/Layout/Item.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { View, ViewProps } from 'react-native';
 import { GridContext } from './index';
-import { ApplicationContext, MiniAppContext } from '../Context';
+import { MiniAppContext } from '../Context';
 import styles from './styles';
 import { SpanNumber } from './types';
 
@@ -23,19 +23,11 @@ const Item: React.FC<ItemProps> = ({
   children,
   style,
 }) => {
-  const { showGrid } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
   const grid = useContext(GridContext);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  /**
-   * render overlay view only dev mode
-   */
-  const renderOverlay = () => {
-    return <View pointerEvents={'none'} style={styles.boxGrid} />;
-  };
-
   return (
     <View
       style={[
@@ -49,7 +41,6 @@ const Item: React.FC<ItemProps> = ({
       ]}
     >
       {children}
-      {showGrid && renderOverlay()}
     </View>
   );
 };

package/Layout/ReservedRegions.tsx

@@ -0,0 +1,47 @@
+import React, { createContext, ReactNode, useState } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+export type ReservedRegion = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+// native probe is optional so apps without @momo-kits/reserved-regions still bundle
+let ReservedRegionsView: React.ComponentType<any> | undefined;
+try {
+  ReservedRegionsView =
+    require('@momo-kits/reserved-regions').ReservedRegionsView;
+} catch {
+  ReservedRegionsView = undefined;
+}
+
+/**
+ * screen regions the system currently occludes, in window coordinates
+ */
+const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
+
+/**
+ * tracks the system occlusion regions (iOS 27.1+), e.g. the iPhone Duo status bar
+ * cluster growing for a call or a Live Activity
+ */
+const ReservedRegionsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [regions, setRegions] = useState<ReservedRegion[]>([]);
+
+  return (
+    <ReservedRegionsContext.Provider value={regions}>
+      {children}
+      {Platform.OS === 'ios' && !!ReservedRegionsView && (
+        <ReservedRegionsView
+          style={StyleSheet.absoluteFill}
+          onRegionsChange={setRegions}
+        />
+      )}
+    </ReservedRegionsContext.Provider>
+  );
+};
+
+export { ReservedRegionsContext, ReservedRegionsProvider };