Merge branch 'main' into @chrispader/restructure-styles-and-theme-swi…

…tching

desktop/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "electron-context-menu": "^2.3.0",
     "electron-log": "^4.4.7",
-    "electron-serve": "^1.0.0",
+    "electron-serve": "^1.2.0",
     "electron-updater": "^6.1.6",
     "node-machine-id": "^1.1.12"
   },

src/CONST.ts

@@ -255,6 +255,7 @@ const CONST = {
         BETA_COMMENT_LINKING: 'commentLinking',
         POLICY_ROOMS: 'policyRooms',
         VIOLATIONS: 'violations',
+        REPORT_FIELDS: 'reportFields',
     },
     BUTTON_STATES: {
         DEFAULT: 'default',

src/components/Composer/index.js

@@ -8,6 +8,7 @@ import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import withNavigation from '@components/withNavigation';
+import useIsScrollBarVisible from '@hooks/useIsScrollBarVisible';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -86,6 +87,9 @@ const propTypes = {
     /** Whether the sull composer is open */
     isComposerFullSize: PropTypes.bool,
 
+    /** Should make the input only scroll inside the element avoid scroll out to parent */
+    shouldContainScroll: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -113,6 +117,7 @@ const defaultProps = {
     checkComposerVisibility: () => false,
     isReportActionCompose: false,
     isComposerFullSize: false,
+    shouldContainScroll: false,
 };
 
 /**
@@ -164,6 +169,7 @@ function Composer({
     selection: selectionProp,
     isReportActionCompose,
     isComposerFullSize,
+    shouldContainScroll,
     ...props
 }) {
     const theme = useTheme();
@@ -180,6 +186,7 @@ function Composer({
     const [caretContent, setCaretContent] = useState('');
     const [valueBeforeCaret, setValueBeforeCaret] = useState('');
     const [textInputWidth, setTextInputWidth] = useState('');
+    const isScrollBarVisible = useIsScrollBarVisible(textInput, value);
 
     useEffect(() => {
         if (!shouldClear) {
@@ -418,18 +425,26 @@ function Composer({
         </View>
     );
 
-    const inputStyleMemo = useMemo(
-        () => [
+    const scrollStyleMemo = useMemo(() => {
+        if (shouldContainScroll) {
+            return isScrollBarVisible ? [styles.overflowScroll, styles.overscrollBehaviorContain] : styles.overflowHidden;
+        }
+        return [
             // We are hiding the scrollbar to prevent it from reducing the text input width,
             // so we can get the correct scroll height while calculating the number of lines.
             numberOfLines < maxLines ? styles.overflowHidden : {},
+        ];
+    }, [shouldContainScroll, isScrollBarVisible, maxLines, numberOfLines, styles.overflowHidden, styles.overflowScroll, styles.overscrollBehaviorContain]);
 
+    const inputStyleMemo = useMemo(
+        () => [
             StyleSheet.flatten([style, {outline: 'none'}]),
             StyleUtils.getComposeTextAreaPadding(numberOfLines, isComposerFullSize),
             Browser.isMobileSafari() || Browser.isSafari() ? styles.rtlTextRenderForSafari : {},
+            scrollStyleMemo,
         ],
 
-        [numberOfLines, maxLines, styles.overflowHidden, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize],
+        [numberOfLines, scrollStyleMemo, styles.rtlTextRenderForSafari, style, StyleUtils, isComposerFullSize],
     );
 
     return (

src/hooks/useIsScrollBarVisible/index.native.ts

@@ -0,0 +1,7 @@
+/**
+ * Native doesn't have the DOM, so we just return null.
+ *
+ */
+const useIsScrollBarVisible = () => null;
+
+export default useIsScrollBarVisible;

src/hooks/useIsScrollBarVisible/index.ts

@@ -0,0 +1,28 @@
+import {useCallback, useEffect, useState} from 'react';
+
+const useIsScrollBarVisible = (ref: React.RefObject<HTMLDivElement | HTMLTextAreaElement>, value: string) => {
+    const [isScrollBarVisible, setIsScrollBarVisible] = useState(false);
+
+    const handleResize = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const {scrollHeight, clientHeight} = ref.current;
+        setIsScrollBarVisible(scrollHeight > clientHeight);
+    }, [ref]);
+
+    useEffect(() => {
+        if (!ref.current || !('ResizeObserver' in (window || {}))) {
+            return;
+        }
+
+        const resizeObserver = new ResizeObserver(handleResize);
+        resizeObserver.observe(ref.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [handleResize, ref, value]);
+    return isScrollBarVisible;
+};
+
+export default useIsScrollBarVisible;

src/libs/Permissions.ts

@@ -18,6 +18,10 @@ function canUseCommentLinking(betas: OnyxEntry<Beta[]>): boolean {
     return !!betas?.includes(CONST.BETAS.BETA_COMMENT_LINKING) || canUseAllBetas(betas);
 }
 
+function canUseReportFields(betas: OnyxEntry<Beta[]>): boolean {
+    return !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas);
+}
+
 /**
  * We're requiring you to be added to the policy rooms beta on dev,
  * since contributors have been reporting a number of false issues related to the feature being under development.
@@ -45,4 +49,5 @@ export default {
     canUsePolicyRooms,
     canUseLinkPreviews,
     canUseViolations,
+    canUseReportFields,
 };

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

@@ -13,6 +13,7 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as Browser from '@libs/Browser';
 import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus';
 import compose from '@libs/compose';
 import * as ComposerUtils from '@libs/ComposerUtils';
@@ -561,6 +562,7 @@ function ComposerWithSuggestions({
                         setComposerHeight(composerLayoutHeight);
                     }}
                     onScroll={hideSuggestionMenu}
+                    shouldContainScroll={Browser.isMobileSafari()}
                 />
             </View>