Merge branch 'main' into jnowakow/build-hybrid-adhoc-from-mobile-expe…

…nsify-only

.github/actions/composite/setupNode/action.yml

@@ -6,6 +6,10 @@ inputs:
     description: "Indicates if node is set up for hybrid app"
     required: false
     default: 'false'
+  IS_DESKTOP_BUILD:
+    description: "Indicates if node is set up for desktop app"
+    required: false
+    default: 'false'
 
 outputs:
   cache-hit:
@@ -41,6 +45,7 @@ runs:
         key: ${{ runner.os }}-node-modules-${{ hashFiles('Mobile-Expensify/package-lock.json', 'Mobile-Expensify/patches/**') }}
 
     - id: cache-desktop-node-modules
+      if: inputs.IS_DESKTOP_BUILD == 'true'
       uses: actions/cache@v4
       with:
         path: desktop/node_modules
@@ -60,7 +65,7 @@ runs:
         command: npm ci
 
     - name: Install node packages for desktop submodule
-      if: steps.cache-desktop-node-modules.outputs.cache-hit != 'true'
+      if: inputs.IS_DESKTOP_BUILD == 'true' && steps.cache-desktop-node-modules.outputs.cache-hit != 'true'
       uses: nick-fields/retry@3f757583fb1b1f940bc8ef4bf4734c8dc02a5847
       with:
         timeout_minutes: 30

.github/workflows/deploy.yml

@@ -288,6 +288,8 @@ jobs:
 
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
+        with:
+          IS_DESKTOP_BUILD: true
 
       - name: Load Desktop credentials from 1Password
         id: load-credentials

.github/workflows/lint-changed.yml

@@ -22,6 +22,8 @@ jobs:
 
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
+        with:
+          IS_DESKTOP_BUILD: true
 
       - name: Run ESLint to check for deprecation warnings
         run: |

.github/workflows/lint.yml

@@ -22,6 +22,8 @@ jobs:
 
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
+        with:
+          IS_DESKTOP_BUILD: true
 
       - name: Lint JavaScript and Typescript with ESLint
         run: npm run lint

.github/workflows/prettier.yml

@@ -22,6 +22,8 @@ jobs:
 
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
+        with:
+          IS_DESKTOP_BUILD: true
 
       - name: Verify there's no Prettier diff
         run: |

.github/workflows/testBuild.yml

@@ -231,6 +231,8 @@ jobs:
 
       - name: Setup Node
         uses: ./.github/actions/composite/setupNode
+        with:
+          IS_DESKTOP_BUILD: true
 
       - name: Load Desktop credentials from 1Password
         id: load-credentials

.github/workflows/typecheck.yml

@@ -19,6 +19,8 @@ jobs:
       - uses: actions/checkout@v4
 
       - uses: ./.github/actions/composite/setupNode
+        with:
+          IS_DESKTOP_BUILD: true
 
       - name: Type check with TypeScript
         run: npm run typecheck

patches/react-native-draggable-flatlist+4.0.1+002+fix-console-error-ref-measureLayout.patch

@@ -0,0 +1,16 @@
+diff --git a/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx b/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx
+index 1559352..b84ee99 100644
+--- a/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx
++++ b/node_modules/react-native-draggable-flatlist/src/components/NestableDraggableFlatList.tsx
+@@ -56,6 +56,11 @@ function NestableDraggableFlatListInner<T>(
+     const onFail = () => {
+       console.log("## nested draggable list measure fail");
+     };
++
++    if (typeof nodeHandle === "number" ) {
++      return;
++    }
++
+     //@ts-ignore
+     containerRef.current.measureLayout(nodeHandle, onSuccess, onFail);
+   });

src/CONST.ts

@@ -1388,6 +1388,12 @@ const CONST = {
             DELETE: 'delete',
             PRESERVE: 'preserve',
         },
+        ANIMATION_TIMING: {
+            DEFAULT_IN: 300,
+            DEFAULT_OUT: 200,
+            FAB_IN: 350,
+            FAB_OUT: 200,
+        },
     },
     TIMING: {
         GET_ORDERED_REPORT_IDS: 'get_ordered_report_ids',

src/components/AvatarWithDisplayName.tsx

@@ -29,6 +29,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Policy, Report} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
+import {getButtonRole} from './Button/utils';
 import CaretWrapper from './CaretWrapper';
 import DisplayNames from './DisplayNames';
 import {FallbackAvatar} from './Icon/Expensicons';
@@ -134,22 +135,24 @@ function AvatarWithDisplayName({policy, report, isAnonymous = false, size = CONS
                     <PressableWithoutFeedback
                         onPress={showActorDetails}
                         accessibilityLabel={title}
-                        role={CONST.ROLE.BUTTON}
+                        role={getButtonRole(true)}
                     >
-                        {shouldShowSubscriptAvatar ? (
-                            <SubscriptAvatar
-                                backgroundColor={avatarBorderColor}
-                                mainAvatar={icons.at(0) ?? fallbackIcon}
-                                secondaryAvatar={icons.at(1)}
-                                size={size}
-                            />
-                        ) : (
-                            <MultipleAvatars
-                                icons={icons}
-                                size={size}
-                                secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
-                            />
-                        )}
+                        <View accessibilityLabel={title}>
+                            {shouldShowSubscriptAvatar ? (
+                                <SubscriptAvatar
+                                    backgroundColor={avatarBorderColor}
+                                    mainAvatar={icons.at(0) ?? fallbackIcon}
+                                    secondaryAvatar={icons.at(1)}
+                                    size={size}
+                                />
+                            ) : (
+                                <MultipleAvatars
+                                    icons={icons}
+                                    size={size}
+                                    secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
+                                />
+                            )}
+                        </View>
                     </PressableWithoutFeedback>
                     <View style={[styles.flex1, styles.flexColumn]}>
                         <CaretWrapper>

src/components/Button/index.tsx

@@ -17,6 +17,7 @@ import HapticFeedback from '@libs/HapticFeedback';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
+import {getButtonRole, getButtonStyle} from './utils';
 import validateSubmitShortcut from './validateSubmitShortcut';
 
 type ButtonProps = Partial<ChildrenProps> & {
@@ -146,6 +147,9 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Whether the Enter keyboard listening is active whether or not the screen that contains the button is focused */
     isPressOnEnterActive?: boolean;
 
+    /** Whether is a nested button inside other button, since nesting buttons isn't valid html */
+    isNested?: boolean;
+
     /** The text displays under the first line */
     secondLineText?: string;
 };
@@ -249,6 +253,7 @@ function Button(
         link = false,
         isContentCentered = false,
         isPressOnEnterActive,
+        isNested = false,
         secondLineText = '',
         ...rest
     }: ButtonProps,
@@ -414,10 +419,10 @@ function Button(
                     isDisabled && !danger && !success ? styles.buttonDisabled : undefined,
                     shouldRemoveRightBorderRadius ? styles.noRightBorderRadius : undefined,
                     shouldRemoveLeftBorderRadius ? styles.noLeftBorderRadius : undefined,
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                     text && shouldShowRightIcon ? styles.alignItemsStretch : undefined,
                     innerStyles,
                     link && styles.bgTransparent,
+                    getButtonStyle(styles, isNested),
                 ]}
                 hoverStyle={[
                     shouldUseDefaultHover && !isDisabled ? styles.buttonDefaultHovered : undefined,
@@ -429,7 +434,7 @@ function Button(
                 id={id}
                 testID={testID}
                 accessibilityLabel={accessibilityLabel}
-                role={CONST.ROLE.BUTTON}
+                role={getButtonRole(isNested)}
                 hoverDimmingValue={1}
                 onHoverIn={() => setIsHovered(true)}
                 onHoverOut={() => setIsHovered(false)}

src/components/Button/utils/index.ts

@@ -0,0 +1,6 @@
+import CONST from '@src/CONST';
+import type {GetButtonRole, GetButtonStyle} from './types';
+
+const getButtonStyle: GetButtonStyle = () => undefined;
+const getButtonRole: GetButtonRole = () => CONST.ROLE.BUTTON;
+export {getButtonStyle, getButtonRole};

src/components/Button/utils/index.web.ts

@@ -0,0 +1,7 @@
+import CONST from '@src/CONST';
+import type {GetButtonRole, GetButtonStyle} from './types';
+
+const getButtonStyle: GetButtonStyle = (styles, isNested) => (isNested ? styles.cursorPointer : undefined);
+const getButtonRole: GetButtonRole = (isNested) => (isNested ? CONST.ROLE.PRESENTATION : CONST.ROLE.BUTTON);
+
+export {getButtonStyle, getButtonRole};

src/components/Button/utils/types.ts

@@ -0,0 +1,7 @@
+import type {Role, StyleProp, ViewStyle} from 'react-native';
+
+type GetButtonStyle = (styles: {cursorPointer: ViewStyle}, isNested: boolean) => StyleProp<ViewStyle> | undefined;
+
+type GetButtonRole = (isNested: boolean) => Role | undefined;
+
+export type {GetButtonStyle, GetButtonRole};

src/components/FloatingActionButton.tsx

@@ -2,9 +2,8 @@ import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef} from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, Role, Text, View} from 'react-native';
-import {Platform} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import Animated, {createAnimatedPropAdapter, Easing, interpolateColor, processColor, useAnimatedProps, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import Animated, {Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import Svg, {Path} from 'react-native-svg';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
@@ -21,30 +20,6 @@ import EducationalTooltip from './Tooltip/EducationalTooltip';
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 AnimatedPath.displayName = 'AnimatedPath';
 
-type AdapterPropsRecord = {
-    type: number;
-    payload?: number | null;
-};
-
-type AdapterProps = {
-    fill?: string | AdapterPropsRecord;
-    stroke?: string | AdapterPropsRecord;
-};
-
-const adapter = createAnimatedPropAdapter(
-    (props: AdapterProps) => {
-        if (Object.keys(props).includes('fill')) {
-            // eslint-disable-next-line no-param-reassign
-            props.fill = {type: 0, payload: processColor(props.fill)};
-        }
-        if (Object.keys(props).includes('stroke')) {
-            // eslint-disable-next-line no-param-reassign
-            props.stroke = {type: 0, payload: processColor(props.stroke)};
-        }
-    },
-    ['fill', 'stroke'],
-);
-
 type FloatingActionButtonProps = {
     /* Callback to fire on request to toggle the FloatingActionButton */
     onPress: (event: GestureResponderEvent | KeyboardEvent | undefined) => void;
@@ -63,7 +38,7 @@ type FloatingActionButtonProps = {
 };
 
 function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTooltipAllowed}: FloatingActionButtonProps, ref: ForwardedRef<HTMLDivElement | View | Text>) {
-    const {success, buttonDefaultBG, textLight, textDark} = useTheme();
+    const {success, buttonDefaultBG, textLight} = useTheme();
     const styles = useThemeStyles();
     const borderRadius = styles.floatingActionButton.borderRadius;
     const fabPressable = useRef<HTMLDivElement | View | Text | null>(null);
@@ -95,22 +70,9 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
         return {
             transform: [{rotate: `${sharedValue.get() * 135}deg`}],
             backgroundColor,
-            borderRadius,
         };
     });
 
-    const animatedProps = useAnimatedProps(
-        () => {
-            const fill = interpolateColor(sharedValue.get(), [0, 1], [textLight, textDark]);
-
-            return {
-                fill,
-            };
-        },
-        undefined,
-        Platform.OS === 'web' ? undefined : adapter,
-    );
-
     const toggleFabAction = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
         hideProductTrainingTooltip();
         // Drop focus to avoid blue focus ring.
@@ -145,14 +107,14 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role, isTo
                 role={role}
                 shouldUseHapticsOnLongPress={false}
             >
-                <Animated.View style={[styles.floatingActionButton, animatedStyle]}>
+                <Animated.View style={[styles.floatingActionButton, {borderRadius}, animatedStyle]}>
                     <Svg
                         width={variables.iconSizeNormal}
                         height={variables.iconSizeNormal}
                     >
                         <AnimatedPath
                             d="M12,3c0-1.1-0.9-2-2-2C8.9,1,8,1.9,8,3v5H3c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h5v5c0,1.1,0.9,2,2,2c1.1,0,2-0.9,2-2v-5h5c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2h-5V3z"
-                            animatedProps={animatedProps}
+                            fill={textLight}
                         />
                     </Svg>
                 </Animated.View>

src/components/HTMLEngineProvider/HTMLRenderers/DeletedActionRenderer.tsx

@@ -43,7 +43,14 @@ function DeletedActionRenderer({tnode}: CustomRendererProps<TText | TPhrasing>)
                     const data = firstChild && 'data' in firstChild ? firstChild.data : null;
 
                     if (typeof data === 'string') {
-                        return <Text style={(styles.textLabelSupporting, styles.textStrong)}>{data}</Text>;
+                        return (
+                            <Text
+                                key={data}
+                                style={(styles.textLabelSupporting, styles.textStrong)}
+                            >
+                                {data}
+                            </Text>
+                        );
                     }
                     return props.childElement;
                 }}