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

package/Input/InputMoney.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import React, {
   forwardRef,
   useContext,
@@ -9,10 +8,9 @@ import React, {
   useState,
 } from 'react';
 import {
-  NativeSyntheticEvent,
   TextInput,
-  TextInputFocusEventData,
-  TextInputSelectionChangeEventData,
+  TextInputFocusEvent,
+  TextInputSelectionChangeEvent,
   TouchableOpacity,
   View,
 } from 'react-native';
@@ -44,7 +42,6 @@ const countDigits = (text: string) => text.replace(/\D/g, '').length;
 const groupDigits = (digits: string) =>
   digits.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
 
-// Caret position right after the `digitIndex`-th digit of `display`.
 const caretFromDigitIndex = (display: string, digitIndex: number) => {
   let count = 0;
   for (let i = 0; i < display.length && count < digitIndex; i++) {
@@ -98,9 +95,6 @@ const detectEdit = (old: string, next: string, selection: Selection): Edit => {
   };
 };
 
-// Applies `edit` to the digits of `display`. Separators and currency are never
-// deleted: removing a separator deletes the digit before it instead, removing
-// only the currency leaves the digits untouched.
 const applyEdit = (display: string, edit: Edit, digitLimit: number) => {
   const digits = display.replace(/\D/g, '');
   let left = countDigits(display.slice(0, edit.start));
@@ -166,11 +160,10 @@ const InputMoney = forwardRef(
     const inputFontFamily = exportFontFamily('bold');
     const [focused, setFocused] = useState(false);
     const [displayValue, setDisplayValue] = useState('');
-    const [numericValue, setNumericValue] = useState('');
     const [commitCount, setCommitCount] = useState(0);
     const displayRef = useRef('');
+    const digitsRef = useRef('');
     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);
     const pendingSelectionRef = useRef<Selection | null>(null);
     const editingRef = useRef(false);
@@ -184,55 +177,39 @@ const InputMoney = forwardRef(
       props.accessibilityLabel,
     );
 
-    const digitLimit =
-      typeof (props as any)?.maxLength === 'number'
-        ? (props as any).maxLength
-        : Number.POSITIVE_INFINITY;
+    const digitLimit = props.maxLength ?? Number.POSITIVE_INFINITY;
 
     useEffect(() => {
       if (value !== undefined && typeof value === 'string') {
         const cleanValue = value.replace(/\D/g, '').replace(/^0+(?=\d)/, '');
-        if (cleanValue !== numericValue) {
+        if (cleanValue !== digitsRef.current) {
           commit(cleanValue, cleanValue.length);
         }
       }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
 
-    // Always set the caret imperatively: a controlled `selection` prop is only
-    // sent to native when it differs from the last native selection, so it is
-    // skipped whenever a stale selection event already reported the same value.
     useLayoutEffect(() => {
       const caret = pendingCaretRef.current;
-      if (caret === null) return;
+      if (caret === null || !inputRef.current?.isFocused()) return;
       pendingCaretRef.current = null;
-      if (inputRef.current?.isFocused()) {
-        inputRef.current.setSelection(caret, caret);
-      }
+      inputRef.current.setSelection(caret, caret);
     }, [commitCount]);
 
     const commit = (digits: string, caretDigit: number) => {
       const display = digits ? `${groupDigits(digits)}${currency}` : '';
       const caret = caretFromDigitIndex(display, caretDigit);
-      const changed = digits !== numericValue;
+      const changed = digits !== digitsRef.current;
       displayRef.current = display;
+      digitsRef.current = digits;
       selectionRef.current = { start: caret, end: caret };
       pendingCaretRef.current = caret;
       setCommitCount(count => count + 1);
       setDisplayValue(display);
-      setNumericValue(digits);
       return changed;
     };
 
-    const parseInputText = (text: string): string => {
-      if (!text) return '';
-      const currencyRegex = new RegExp(` ?${currency}$`, 'g');
-      const textWithoutCurrency = text.replace(currencyRegex, '').trim();
-      return textWithoutCurrency.replace(/[^\d]/g, '');
-    };
-
     const onClearText = () => {
-      inputRef?.current?.clear();
-      inputRef.current?.setNativeProps({ text: '' });
       commit('', 0);
       onChangeText?.('');
     };
@@ -258,10 +235,7 @@ const InputMoney = forwardRef(
       }
     };
 
-    // Keeps the caret out of the currency suffix.
-    const _onSelectionChange = (
-      e: NativeSyntheticEvent<TextInputSelectionChangeEventData>,
-    ) => {
+    const _onSelectionChange = (e: TextInputSelectionChangeEvent) => {
       props.onSelectionChange?.(e);
       if (editingRef.current) return;
       const selection = e.nativeEvent.selection;
@@ -283,23 +257,25 @@ const InputMoney = forwardRef(
       });
     };
 
-    const _onFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onFocus = (e: TextInputFocusEvent) => {
       setFocused(true);
+      const caret = pendingCaretRef.current;
+      pendingCaretRef.current = null;
+      if (caret !== null && !props.selectTextOnFocus) {
+        selectionRef.current = { start: caret, end: caret };
+        inputRef.current?.setSelection(caret, caret);
+      }
       onFocus?.(e);
     };
 
-    const _onBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const _onBlur = (e: TextInputFocusEvent) => {
       setFocused(false);
       onBlur?.(e);
     };
 
     const _setText = (text: string) => {
-      if (!text) {
-        commit('', 0);
-        onChangeText?.('');
-        return;
-      }
-      const digits = parseInputText(text)
+      const digits = text
+        .replace(/\D/g, '')
         .replace(/^0+(?=\d)/, '')
         .slice(0, digitLimit);
       if (commit(digits, digits.length)) {
@@ -350,6 +326,7 @@ const InputMoney = forwardRef(
               accessibilityLabel={`${componentId}`}
               textAlignVertical="center"
               ref={inputRef}
+              editable={props.editable !== false && !disabled}
               accessibilityState={{
                 disabled: disabled,
                 ...props.accessibilityState,

package/Input/InputOTP.tsx

@@ -64,8 +64,8 @@ const OTPCaret: FC<CaretProps> = ({ index, length }) => {
     opacity: opacity.value,
   }));
 
-  const spacingStyle = !isNaN(Number(length)) &&
-    index !== Number(length) - 1 && { marginRight: Spacing.L };
+  const hasNextInput = !isNaN(Number(length)) && index !== Number(length) - 1;
+  const spacingStyle = hasNextInput && { marginRight: Spacing.L };
 
   return (
     <View style={[Styles.rowCenter, spacingStyle]}>
@@ -162,6 +162,7 @@ const InputOTP = forwardRef(
 
     const renderInputs = (inputLength: number) => {
       const TextInputs: React.ReactNode[] = [];
+      const textColors = theme.colors.text;
       for (let i = 0; i < inputLength; i++) {
         TextInputs.push(
           <View key={`otp-input-${i}`}>
@@ -170,9 +171,7 @@ const InputOTP = forwardRef(
             ) : (
               <Text
                 style={i !== inputLength - 1 && { marginRight: Spacing.L }}
-                color={
-                  value[i] ? theme.colors.text.default : theme.colors.text.hint
-                }
+                color={value[i] ? textColors.default : textColors.hint}
                 typography={value[i] ? 'header_m_bold' : 'body_default_regular'}
               >
                 {value[i] || '-'}
@@ -201,16 +200,14 @@ const InputOTP = forwardRef(
       return (
         <View style={Styles.row}>
           {splitValue.map((letter, index) => {
+            const isLast = index === value.length - 1;
+            const isTyping = focused && value.length !== MAX_LENGTH;
+            const isCompact = fontScale > 1 && value.length > 6;
+            const marginRight = isCompact ? Spacing.M : Spacing.L;
             return (
               <Text
                 key={`otp-letter-${index}`}
-                style={
-                  (index !== value.length - 1 ||
-                    (focused && value.length !== MAX_LENGTH)) && {
-                    marginRight:
-                      fontScale > 1 && value.length > 6 ? Spacing.M : Spacing.L,
-                  }
-                }
+                style={(!isLast || isTyping) && { marginRight }}
                 typography={'header_m_bold'}
               >
                 {letter}

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 };