@momo-kits/foundation 0.167.2-beta.1 → 0.168.1-beta.1

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';
@@ -59,9 +58,11 @@ const TextTyping: FC<any> = ({
       listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
     };
 
-    currentIndex.current >= data?.length
-      ? handleResetList()
-      : handleAnimation();
+    if (currentIndex.current >= data?.length) {
+      handleResetList();
+    } else {
+      handleAnimation();
+    }
   };
 
   const showChar = (char?: string) => {
@@ -82,9 +83,12 @@ const TextTyping: FC<any> = ({
       }, timeDelayNextChar);
     };
 
-    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
-      ? handleResetString()
-      : handleShowChar();
+    const textLength = data?.[currentIndex.current]?.length || 0;
+    if (currentCharIndex.current >= textLength) {
+      handleResetString();
+    } else {
+      handleShowChar();
+    }
   };
 
   const reset = () => {
@@ -166,12 +170,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);
   };
@@ -303,6 +307,8 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
     inputState = 'filled';
   }
 
+  const inputBackground = backgroundColor ?? theme.colors.background.surface;
+
   return (
     <ComponentContext.Provider
       value={{
@@ -322,10 +328,7 @@ const InputSearch: ForwardRefRenderFunction<InputRef, InputSearchProps> = (
         <View
           style={[
             styles.searchInputWrapper,
-            {
-              backgroundColor:
-                backgroundColor ?? theme.colors.background.surface,
-            },
+            { backgroundColor: inputBackground },
           ]}
         >
           <Icon

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/Input/SystemTextInput.tsx

@@ -17,11 +17,10 @@ const SystemTextInput: FC<SystemTextInputProps> = props => {
   const needsAndroidWrapper =
     Platform.OS === 'android' && !editable && (onPressIn || onPressOut);
 
+  const noPressHandlers = { onPressIn: undefined, onPressOut: undefined };
   const inputProps: TextInputProps = {
     ...props,
-    ...(needsAndroidWrapper
-      ? { onPressIn: undefined, onPressOut: undefined }
-      : null),
+    ...(needsAndroidWrapper ? noPressHandlers : null),
     ...(editable === false ? { accessibilityState: undefined } : null),
   };
 

package/Input/TextTyping.tsx

@@ -36,9 +36,11 @@ const TextTyping: FC<TextTypingProps> = ({
       listChar.length !== 0 && showChar(listChar?.[currentCharIndex.current]);
     };
 
-    currentIndex.current >= data?.length
-      ? handleResetList()
-      : handleAnimation();
+    if (currentIndex.current >= data?.length) {
+      handleResetList();
+    } else {
+      handleAnimation();
+    }
   };
 
   const showChar = (char?: string) => {
@@ -59,9 +61,12 @@ const TextTyping: FC<TextTypingProps> = ({
       }, timeDelayNextChar);
     };
 
-    currentCharIndex.current >= (data?.[currentIndex.current]?.length || 0)
-      ? handleResetString()
-      : handleShowChar();
+    const textLength = data?.[currentIndex.current]?.length || 0;
+    if (currentCharIndex.current >= textLength) {
+      handleResetString();
+    } else {
+      handleShowChar();
+    }
   };
 
   const reset = () => {

package/Input/utils.ts

@@ -15,9 +15,8 @@ const formatNumberToMoney = (number: number, currency = '') => {
 
   const numberString = Math.abs(number).toString();
   if (numberString.length < 3) {
-    return isNegative
-      ? `-${numberString}${currency}`
-      : `${numberString}${currency}`;
+    const sign = isNegative ? '-' : '';
+    return `${sign}${numberString}${currency}`;
   }
 
   let count = 0;

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,78 @@
+import React, { createContext, ReactNode, useMemo } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+
+export type ReservedRegion = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type NativeReservedRegions = typeof import('react-native-reserved-regions');
+
+// native lib is optional so apps without react-native-reserved-regions still bundle
+let nativeLib: NativeReservedRegions | undefined;
+try {
+  nativeLib = require('react-native-reserved-regions');
+} catch {
+  nativeLib = undefined;
+}
+
+/**
+ * screen regions the system currently occludes, relative to the provider, which fills
+ * the root view so they line up with window coordinates
+ */
+const ReservedRegionsContext = createContext<ReservedRegion[]>([]);
+
+/**
+ * keeps the occlusion regions reported by the native provider, the only kind layout reads
+ */
+const OcclusionRegions: React.FC<{
+  useRegions: NativeReservedRegions['useReservedRegions'];
+  children: ReactNode;
+}> = ({ useRegions, children }) => {
+  const regions = useRegions();
+  const occlusion = useMemo(
+    () =>
+      regions
+        .filter(region => region.kind === 'occlusion')
+        .map(region => region.frame),
+    [regions],
+  );
+
+  return (
+    <ReservedRegionsContext.Provider value={occlusion}>
+      {children}
+    </ReservedRegionsContext.Provider>
+  );
+};
+
+/**
+ * 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,
+}) => {
+  if (Platform.OS !== 'ios' || !nativeLib) {
+    return <>{children}</>;
+  }
+
+  const { ReservedRegionsProvider: NativeProvider, useReservedRegions } =
+    nativeLib;
+  return (
+    <NativeProvider style={styles.container}>
+      <OcclusionRegions useRegions={useReservedRegions}>
+        {children}
+      </OcclusionRegions>
+    </NativeProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export { ReservedRegionsContext, ReservedRegionsProvider };