Merge branch 'main' of https://github.com/Expensify/App into feat/#Ex…

…pensify#23220-bidirectional-pagination

android/app/build.gradle

@@ -90,8 +90,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001037210
-        versionName "1.3.72-10"
+        versionCode 1001037300
+        versionName "1.3.73-0"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.72</string>
+	<string>1.3.73</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.3.72.10</string>
+	<string>1.3.73.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.3.72</string>
+	<string>1.3.73</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.3.72.10</string>
+	<string>1.3.73.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.3.72-10",
+  "version": "1.3.73-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/ContextMenuItem.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {forwardRef, useImperativeHandle} from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from './MenuItem';
 import Icon from './Icon';
@@ -34,6 +34,12 @@ const propTypes = {
 
     /** The action accept for anonymous user or not */
     isAnonymousAction: PropTypes.bool,
+
+    /** Whether the menu item is focused or not */
+    isFocused: PropTypes.bool,
+
+    /** Forwarded ref to ContextMenuItem */
+    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
 
 const defaultProps = {
@@ -42,9 +48,11 @@ const defaultProps = {
     successText: '',
     description: '',
     isAnonymousAction: false,
+    isFocused: false,
+    innerRef: null,
 };
 
-function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction}) {
+function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
     const {windowWidth} = useWindowDimensions();
     const [isThrottledButtonActive, setThrottledButtonInactive] = useThrottledButtonState();
 
@@ -61,6 +69,8 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
         }
     };
 
+    useImperativeHandle(innerRef, () => ({triggerPressAndUpdateSuccess}));
+
     const itemIcon = !isThrottledButtonActive && successIcon ? successIcon : icon;
     const itemText = !isThrottledButtonActive && successText ? successText : text;
 
@@ -89,6 +99,7 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
             descriptionTextStyle={styles.breakAll}
             style={getContextMenuItemStyles(windowWidth)}
             isAnonymousAction={isAnonymousAction}
+            focused={isFocused}
         />
     );
 }
@@ -97,4 +108,10 @@ ContextMenuItem.propTypes = propTypes;
 ContextMenuItem.defaultProps = defaultProps;
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-export default ContextMenuItem;
+export default forwardRef((props, ref) => (
+    <ContextMenuItem
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        innerRef={ref}
+    />
+));

src/components/ReportActionItem/MoneyRequestPreview.js

@@ -23,6 +23,7 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import reportActionPropTypes from '../../pages/home/report/reportActionPropTypes';
 import {showContextMenuForReport} from '../ShowContextMenuContext';
 import * as OptionsListUtils from '../../libs/OptionsListUtils';
+import * as ReportActionsUtils from '../../libs/ReportActionsUtils';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import * as IOUUtils from '../../libs/IOUUtils';
 import * as ReportUtils from '../../libs/ReportUtils';
@@ -239,7 +240,9 @@ function MoneyRequestPreview(props) {
                             isHovered={isScanning}
                         />
                     )}
-                    {_.isEmpty(props.transaction) ? (
+                    {_.isEmpty(props.transaction) &&
+                    !ReportActionsUtils.isMessageDeleted(props.action) &&
+                    lodashGet(props.action, 'pendingAction') !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE ? (
                         <MoneyRequestSkeletonView />
                     ) : (
                         <View style={styles.moneyRequestPreviewBoxText}>

src/components/SelectionList/BaseSelectionList.js

@@ -364,6 +364,7 @@ function BaseSelectionList({
                                 <SectionList
                                     ref={listRef}
                                     sections={sections}
+                                    stickySectionHeadersEnabled={false}
                                     renderSectionHeader={renderSectionHeader}
                                     renderItem={renderItem}
                                     getItemLayout={getItemLayout}

src/components/TextInput/BaseTextInput.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React, {useState, useRef, useEffect, useCallback} from 'react';
-import {Animated, View, AppState, Keyboard, StyleSheet} from 'react-native';
+import {Animated, View, StyleSheet} from 'react-native';
 import Str from 'expensify-common/lib/str';
 import RNTextInput from '../RNTextInput';
 import TextInputLabel from './TextInputLabel';
@@ -38,24 +38,6 @@ function BaseTextInput(props) {
     const input = useRef(null);
     const isLabelActive = useRef(initialActiveLabel);
 
-    useEffect(() => {
-        if (!props.disableKeyboard) {
-            return;
-        }
-
-        const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
-            if (!nextAppState.match(/inactive|background/)) {
-                return;
-            }
-
-            Keyboard.dismiss();
-        });
-
-        return () => {
-            appStateSubscription.remove();
-        };
-    }, [props.disableKeyboard]);
-
     // AutoFocus which only works on mount:
     useEffect(() => {
         // We are manually managing focus to prevent this issue: https://github.com/Expensify/App/issues/4514

src/components/TextInput/index.native.js

@@ -1,19 +1,40 @@
-import React, {forwardRef} from 'react';
+import React, {forwardRef, useEffect} from 'react';
+import {AppState, Keyboard} from 'react-native';
 import styles from '../../styles/styles';
 import BaseTextInput from './BaseTextInput';
 import * as baseTextInputPropTypes from './baseTextInputPropTypes';
 
-const TextInput = forwardRef((props, ref) => (
-    <BaseTextInput
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        // Setting autoCompleteType to new-password throws an error on Android/iOS, so fall back to password in that case
-        // eslint-disable-next-line react/jsx-props-no-multi-spaces
-        autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType}
-        innerRef={ref}
-        inputStyle={[styles.baseTextInput, ...props.inputStyle]}
-    />
-));
+const TextInput = forwardRef((props, ref) => {
+    useEffect(() => {
+        if (!props.disableKeyboard) {
+            return;
+        }
+
+        const appStateSubscription = AppState.addEventListener('change', (nextAppState) => {
+            if (!nextAppState.match(/inactive|background/)) {
+                return;
+            }
+
+            Keyboard.dismiss();
+        });
+
+        return () => {
+            appStateSubscription.remove();
+        };
+    }, [props.disableKeyboard]);
+
+    return (
+        <BaseTextInput
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            // Setting autoCompleteType to new-password throws an error on Android/iOS, so fall back to password in that case
+            // eslint-disable-next-line react/jsx-props-no-multi-spaces
+            autoCompleteType={props.autoCompleteType === 'new-password' ? 'password' : props.autoCompleteType}
+            innerRef={ref}
+            inputStyle={[styles.baseTextInput, ...props.inputStyle]}
+        />
+    );
+});
 
 TextInput.propTypes = baseTextInputPropTypes.propTypes;
 TextInput.defaultProps = baseTextInputPropTypes.defaultProps;

src/languages/en.ts

@@ -1361,7 +1361,6 @@ export default {
         reimburse: {
             captureReceipts: 'Capture receipts',
             fastReimbursementsHappyMembers: 'Fast reimbursements = happy members!',
-            kilometers: 'Kilometers',
             viewAllReceipts: 'View all receipts',
             reimburseReceipts: 'Reimburse receipts',
             trackDistance: 'Track distance',

src/languages/es.ts

@@ -1381,7 +1381,6 @@ export default {
         reimburse: {
             captureReceipts: 'Captura recibos',
             fastReimbursementsHappyMembers: '¡Reembolsos rápidos = miembros felices!',
-            kilometers: 'Kilómetros',
             viewAllReceipts: 'Ver todos los recibos',
             reimburseReceipts: 'Reembolsar recibos',
             trackDistance: 'Medir distancia',

src/libs/Firebase/index.native.js → src/libs/Firebase/index.native.ts

@@ -1,15 +1,11 @@
 /* eslint-disable no-unused-vars */
 import perf from '@react-native-firebase/perf';
-import lodashGet from 'lodash/get';
 import * as Environment from '../Environment/Environment';
-import Log from '../Log';
+import {StartTrace, StopTrace, TraceMap} from './types';
 
-const traceMap = {};
+const traceMap: TraceMap = {};
 
-/**
- * @param {String} customEventName
- */
-function startTrace(customEventName) {
+const startTrace: StartTrace = (customEventName) => {
     const start = global.performance.now();
     if (Environment.isDevelopment()) {
         return;
@@ -27,18 +23,16 @@ function startTrace(customEventName) {
                 start,
             };
         });
-}
+};
 
-/**
- * @param {String} customEventName
- */
-function stopTrace(customEventName) {
-    const stop = global.performance.now();
+const stopTrace: StopTrace = (customEventName) => {
+    // Uncomment to inspect logs on release builds
+    // const stop = global.performance.now();
     if (Environment.isDevelopment()) {
         return;
     }
 
-    const trace = lodashGet(traceMap, [customEventName, 'trace']);
+    const trace = traceMap[customEventName].trace;
     if (!trace) {
         return;
     }
@@ -50,7 +44,7 @@ function stopTrace(customEventName) {
     // Log.info(`sidebar_loaded: ${stop - start} ms`, true);
 
     delete traceMap[customEventName];
-}
+};
 
 export default {
     startTrace,

src/libs/Firebase/index.ts

@@ -0,0 +1,10 @@
+import {StartTrace, StopTrace} from './types';
+
+/** Web does not use Firebase for performance tracing */
+const startTrace: StartTrace = () => {};
+const stopTrace: StopTrace = () => {};
+
+export default {
+    startTrace,
+    stopTrace,
+};

src/libs/Firebase/types.ts

@@ -0,0 +1,11 @@
+import {FirebasePerformanceTypes} from '@react-native-firebase/perf';
+
+type Trace = {
+    trace: FirebasePerformanceTypes.Trace;
+    start: number;
+};
+type TraceMap = Record<string, Trace>;
+type StartTrace = (customEventName: string) => void;
+type StopTrace = (customEventName: string) => void;
+
+export type {StartTrace, StopTrace, TraceMap};

src/libs/UpdateMultilineInputRange/index.ios.js

@@ -0,0 +1,23 @@
+/**
+ * Place the cursor at the end of the value (if there is a value in the input).
+ *
+ * When a multiline input contains a text value that goes beyond the scroll height, the cursor will be placed
+ * at the end of the text value, and automatically scroll the input field to this position after the field gains
+ * focus. This provides a better user experience in cases where the text in the field has to be edited. The auto-
+ * scroll behaviour works on all platforms except iOS native.
+ * See https://github.com/Expensify/App/issues/20836 for more details.
+ *
+ * @param {Object} input the input element
+ */
+export default function updateMultilineInputRange(input) {
+    if (!input) {
+        return;
+    }
+
+    /*
+     * Adding this iOS specific patch because of the scroll issue in native iOS
+     * Issue: does not scroll multiline input when text exceeds the maximum number of lines
+     * For more details: https://github.com/Expensify/App/pull/27702#issuecomment-1728651132
+     */
+    input.focus();
+}

src/libs/focusAndUpdateMultilineInputRange.js → src/libs/UpdateMultilineInputRange/index.js

@@ -1,5 +1,5 @@
 /**
- * Focus a multiline text input and place the cursor at the end of the value (if there is a value in the input).
+ * Place the cursor at the end of the value (if there is a value in the input).
  *
  * When a multiline input contains a text value that goes beyond the scroll height, the cursor will be placed
  * at the end of the text value, and automatically scroll the input field to this position after the field gains
@@ -9,12 +9,11 @@
  *
  * @param {Object} input the input element
  */
-export default function focusAndUpdateMultilineInputRange(input) {
+export default function updateMultilineInputRange(input) {
     if (!input) {
         return;
     }
 
-    input.focus();
     if (input.value && input.setSelectionRange) {
         const length = input.value.length;
         input.setSelectionRange(length, length);