Merge branch 'main' into @OlGierd03/correct-color-scroll-bar-in-help-panel

Author: OlGierd03

Mobile-Expensify

@@ -13,7 +13,7 @@ C+ are contributors who are experienced at working with Expensify and have gaine
 - If C+ ever applies to work at Expensify, they’ve got a leg up on the competition because they're familiar with the company and processes.  View job openings at https://we.are.expensify.com.
 
 ## Requirements to join C+
-- Have had 10 PRs deployed to production without regressions.  
+- Have had 30 PRs deployed to production without regressions.  
 - Follow our Code of Conduct, Contributing.md and README.md docs and processes.
 - Comment and fix bugs in a timely manner.
 - Clear communicator

contributingGuides/HOW_TO_BECOME_A_CONTRIBUTOR_PLUS.md

@@ -2847,7 +2847,7 @@ PODS:
   - RNGoogleSignin (10.0.1):
     - GoogleSignIn (~> 7.0)
     - React-Core
-  - RNLiveMarkdown (0.1.288):
+  - RNLiveMarkdown (0.1.294):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -3716,7 +3716,7 @@ SPEC CHECKSUMS:
   AirshipServiceExtension: 9c73369f426396d9fb9ff222d86d842fac76ba46
   AppAuth: 501c04eda8a8d11f179dbe8637b7a91bb7e5d2fa
   AppLogs: 3bc4e9b141dbf265b9464409caaa40416a9ee0e0
-  boost: 659a89341ea4ab3df8259733813b52f26d8be9a5
+  boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
   EXAV: 13d43af15268a3f448a6b994e91574c939f065e6
   EXImageLoader: ab4fcf9240cf3636a83c00e3fc5229d692899428
@@ -3867,7 +3867,7 @@ SPEC CHECKSUMS:
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 5d8431415d4b8518e86e289e9ad5bb9be78f6dba
   RNGoogleSignin: ccaa4a81582cf713eea562c5dd9dc1961a715fd0
-  RNLiveMarkdown: 1c09c5813366c29885b757b4c0a5e163a89f8d55
+  RNLiveMarkdown: 6e4972e95cf3b5ad0d164e08c72a6098d84e0b9d
   RNLocalize: d4b8af4e442d4bcca54e68fc687a2129b4d71a81
   rnmapbox-maps: ef00aafe2cbef8808f2aa6168e3f86ce103058bc
   RNNitroSQLite: 44e596c1fb8f852f9a158eb07c647f706df13514

ios/Podfile.lock

@@ -86,7 +86,7 @@
     "@expensify/nitro-utils": "file:./modules/ExpensifyNitroUtils",
     "@expensify/react-native-background-task": "file:./modules/background-task",
     "@expensify/react-native-hybrid-app": "file:./modules/hybrid-app",
-    "@expensify/react-native-live-markdown": "0.1.289",
+    "@expensify/react-native-live-markdown": "0.1.294",
     "@expensify/react-native-wallet": "^0.1.5",
     "@expo/metro-runtime": "^5.0.4",
     "@firebase/app": "^0.10.10",

package-lock.json

@@ -176,3 +176,10 @@
 - Upstream PR/issue: 🛑
 - E/App issue: 🛑
 - PR Introducing Patch: https://github.com/Expensify/App/pull/60421
+
+### [react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch](react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch)
+
+- Reason: This patch updates Yoga to correctly update the subtrees of `display: contents` nodes so that they are in sync with their React Native counterparts.
+- Upstream PR/issue: https://github.com/facebook/react-native/pull/52530
+- E/App issue: https://github.com/Expensify/App/issues/65268
+- PR introducing patch: [#65925](https://github.com/Expensify/App/pull/65925)

package.json

@@ -0,0 +1,120 @@
+diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
+index 3618474..ab5b828 100644
+--- a/node_modules/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
++++ b/node_modules/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
+@@ -476,16 +476,19 @@ static void zeroOutLayoutRecursively(yoga::Node* const node) {
+ }
+ 
+ static void cleanupContentsNodesRecursively(yoga::Node* const node) {
+-  for (auto child : node->getChildren()) {
+-    if (child->style().display() == Display::Contents) {
+-      child->getLayout() = {};
+-      child->setLayoutDimension(0, Dimension::Width);
+-      child->setLayoutDimension(0, Dimension::Height);
+-      child->setHasNewLayout(true);
+-      child->setDirty(false);
+-      child->cloneChildrenIfNeeded();
+-
+-      cleanupContentsNodesRecursively(child);
++  if (node->hasContentsChildren()) [[unlikely]] {
++    node->cloneContentsChildrenIfNeeded();
++    for (auto child : node->getChildren()) {
++      if (child->style().display() == Display::Contents) {
++        child->getLayout() = {};
++        child->setLayoutDimension(0, Dimension::Width);
++        child->setLayoutDimension(0, Dimension::Height);
++        child->setHasNewLayout(true);
++        child->setDirty(false);
++        child->cloneChildrenIfNeeded();
++        
++        cleanupContentsNodesRecursively(child);
++      }
+     }
+   }
+ }
+diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.cpp
+index dce42fb..f1bc5e8 100644
+--- a/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.cpp
++++ b/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.cpp
+@@ -181,6 +181,17 @@ void Node::setDirty(bool isDirty) {
+   }
+ }
+ 
++void Node::setChildren(const std::vector<Node*>& children) {
++  children_ = children;
++
++  contentsChildrenCount_ = 0;
++  for (const auto& child : children) {
++    if (child->style().display() == Display::Contents) {
++      contentsChildrenCount_++;
++    }
++  }
++}
++
+ bool Node::removeChild(Node* child) {
+   auto p = std::find(children_.begin(), children_.end(), child);
+   if (p != children_.end()) {
+@@ -379,6 +390,23 @@ void Node::cloneChildrenIfNeeded() {
+     if (child->getOwner() != this) {
+       child = resolveRef(config_->cloneNode(child, this, i));
+       child->setOwner(this);
++      
++      if (child->hasContentsChildren()) [[unlikely]] {
++        child->cloneContentsChildrenIfNeeded();
++      }
++    }
++    i += 1;
++  }
++}
++
++void Node::cloneContentsChildrenIfNeeded() {
++  size_t i = 0;
++  for (Node*& child : children_) {
++    if (child->style().display() == Display::Contents &&
++        child->getOwner() != this) {
++      child = resolveRef(config_->cloneNode(child, this, i));
++      child->setOwner(this);
++      child->cloneChildrenIfNeeded();
+     }
+     i += 1;
+   }
+diff --git a/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.h b/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.h
+index 5ae7d43..3454d54 100644
+--- a/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.h
++++ b/node_modules/react-native/ReactCommon/yoga/yoga/node/Node.h
+@@ -96,6 +96,10 @@ class YG_EXPORT Node : public ::YGNode {
+     return config_->hasErrata(errata);
+   }
+   
++  bool hasContentsChildren() const {
++    return contentsChildrenCount_ != 0;
++  }
++
+   YGDirtiedFunc getDirtiedFunc() const {
+     return dirtiedFunc_;
+   }
+@@ -244,15 +248,12 @@ class YG_EXPORT Node : public ::YGNode {
+     owner_ = owner;
+   }
+ 
+-  void setChildren(const std::vector<Node*>& children) {
+-    children_ = children;
+-  }
+-
+   // TODO: rvalue override for setChildren
+ 
+   void setConfig(Config* config);
+ 
+   void setDirty(bool isDirty);
++  void setChildren(const std::vector<Node*>& children);
+   void setLayoutLastOwnerDirection(Direction direction);
+   void setLayoutComputedFlexBasis(FloatOptional computedFlexBasis);
+   void setLayoutComputedFlexBasisGeneration(
+@@ -286,6 +287,7 @@ class YG_EXPORT Node : public ::YGNode {
+   void removeChild(size_t index);
+ 
+   void cloneChildrenIfNeeded();
++  void cloneContentsChildrenIfNeeded();
+   void markDirtyAndPropagate();
+   float resolveFlexGrow() const;
+   float resolveFlexShrink() const;

patches/react-native/details.md

@@ -39,7 +39,7 @@ function BrokenConnectionDescription({transactionID, policy, report}: BrokenConn
         return translate('violations.brokenConnection530Error');
     }
 
-    if (isPolicyAdmin && !isCurrentUserSubmitter(report?.reportID)) {
+    if (isPolicyAdmin && !isCurrentUserSubmitter(report)) {
         return (
             <>
                 {`${translate('violations.adminBrokenConnectionError')}`}

patches/react-native/react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch

@@ -596,7 +596,10 @@ function MoneyRequestReportPreviewContent({
     }, [carouselTransactions.length]);
 
     return (
-        <View onLayout={onWrapperLayout}>
+        <View
+            onLayout={onWrapperLayout}
+            testID="MoneyRequestReportPreviewContent-wrapper"
+        >
             <OfflineWithFeedback
                 pendingAction={iouReport?.pendingFields?.preview}
                 shouldDisableOpacity={!!(action.pendingAction ?? action.isOptimisticAction)}

src/components/BrokenConnectionDescription.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent, ListRenderItem} from 'react-native';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
@@ -52,11 +52,42 @@ function MoneyRequestReportPreview({
     const lastTransactionViolations = useTransactionViolations(lastTransaction?.transactionID);
     const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action);
     const isSplitBillAction = isSplitBillActionReportActionsUtils(action);
-    const [currentWidth, setCurrentWidth] = useState<number>(0);
-    const [currentWrapperWidth, setCurrentWrapperWidth] = useState<number>(0);
+
+    const widthsRef = useRef<{currentWidth: number | null; currentWrapperWidth: number | null}>({currentWidth: null, currentWrapperWidth: null});
+    const [widths, setWidths] = useState({currentWidth: 0, currentWrapperWidth: 0});
+
+    const updateWidths = useCallback(() => {
+        const {currentWidth, currentWrapperWidth} = widthsRef.current;
+
+        if (currentWidth && currentWrapperWidth) {
+            setWidths({currentWidth, currentWrapperWidth});
+        }
+    }, []);
+
+    const onCarouselLayout = useCallback(
+        (e: LayoutChangeEvent) => {
+            const newWidth = e.nativeEvent.layout.width;
+            if (widthsRef.current.currentWidth !== newWidth) {
+                widthsRef.current.currentWidth = newWidth;
+                updateWidths();
+            }
+        },
+        [updateWidths],
+    );
+    const onWrapperLayout = useCallback(
+        (e: LayoutChangeEvent) => {
+            const newWrapperWidth = e.nativeEvent.layout.width;
+            if (widthsRef.current.currentWrapperWidth !== newWrapperWidth) {
+                widthsRef.current.currentWrapperWidth = newWrapperWidth;
+                updateWidths();
+            }
+        },
+        [updateWidths],
+    );
+
     const reportPreviewStyles = useMemo(
-        () => StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, transactions.length, currentWidth, currentWrapperWidth),
-        [StyleUtils, currentWidth, currentWrapperWidth, shouldUseNarrowLayout, transactions.length],
+        () => StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, transactions.length, widths.currentWidth, widths.currentWrapperWidth),
+        [StyleUtils, widths, shouldUseNarrowLayout, transactions.length],
     );
     const shouldShowPayerAndReceiver = useMemo(() => {
         if (!isIOUReport(iouReport) && action.childType !== CONST.REPORT.TYPE.IOU) {
@@ -121,13 +152,9 @@ function MoneyRequestReportPreview({
             invoiceReceiverPolicy={invoiceReceiverPolicy}
             lastTransactionViolations={lastTransactionViolations}
             renderTransactionItem={renderItem}
-            onCarouselLayout={(e: LayoutChangeEvent) => {
-                setCurrentWidth(e.nativeEvent.layout.width);
-            }}
-            onWrapperLayout={(e: LayoutChangeEvent) => {
-                setCurrentWrapperWidth(e.nativeEvent.layout.width);
-            }}
-            currentWidth={currentWidth}
+            onCarouselLayout={onCarouselLayout}
+            onWrapperLayout={onWrapperLayout}
+            currentWidth={widths.currentWidth}
             reportPreviewStyles={reportPreviewStyles}
             shouldDisplayContextMenu={shouldDisplayContextMenu}
             isInvoice={isInvoice}