Merge branch 'main' into ts/ScreenWrapper

src/CONST.ts

@@ -512,6 +512,7 @@ const CONST = {
                 CLOSED: 'CLOSED',
                 CREATED: 'CREATED',
                 IOU: 'IOU',
+                MARKEDREIMBURSED: 'MARKEDREIMBURSED',
                 MODIFIEDEXPENSE: 'MODIFIEDEXPENSE',
                 MOVED: 'MOVED',
                 REIMBURSEMENTQUEUED: 'REIMBURSEMENTQUEUED',

src/NAVIGATORS.ts

@@ -4,6 +4,7 @@
  * */
 export default {
     CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator',
+    LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator',
     RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator',
     FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator',
 } as const;

src/SCREENS.ts

@@ -81,10 +81,12 @@ const SCREENS = {
     SAVE_THE_WORLD: {
         ROOT: 'SaveTheWorld_Root',
     },
+    LEFT_MODAL: {
+        SEARCH: 'Search',
+    },
     RIGHT_MODAL: {
         SETTINGS: 'Settings',
         NEW_CHAT: 'NewChat',
-        SEARCH: 'Search',
         DETAILS: 'Details',
         PROFILE: 'Profile',
         REPORT_DETAILS: 'Report_Details',

src/components/AttachmentModal.js

@@ -366,7 +366,7 @@ function AttachmentModal(props) {
         setIsAuthTokenRequired(props.isAuthTokenRequired);
     }, [props.isAuthTokenRequired]);
 
-    const sourceForAttachmentView = props.source || source;
+    const sourceForAttachmentView = source || props.source;
 
     const threeDotsMenuItems = useMemo(() => {
         if (!props.isReceiptAttachment || !props.parentReport || !props.parentReportActions) {

src/components/Button/index.tsx

@@ -221,7 +221,7 @@ function Button(
                             <View style={[styles.mr1, iconStyles]}>
                                 <Icon
                                     src={icon}
-                                    fill={iconFill ?? theme.textLight}
+                                    fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                     small={small}
                                 />
                             </View>
@@ -232,7 +232,7 @@ function Button(
                         <View style={[styles.justifyContentCenter, styles.ml1, iconRightStyles]}>
                             <Icon
                                 src={iconRight}
-                                fill={iconFill ?? theme.textLight}
+                                fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}
                                 small={small}
                             />
                         </View>

src/components/CurrencySymbolButton.js → src/components/CurrencySymbolButton.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -7,15 +6,15 @@ import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
 import Tooltip from './Tooltip';
 
-const propTypes = {
+type CurrencySymbolButtonProps = {
     /** Currency symbol of selected currency */
-    currencySymbol: PropTypes.string.isRequired,
+    currencySymbol: string;
 
     /** Function to call when currency button is pressed */
-    onCurrencyButtonPress: PropTypes.func.isRequired,
+    onCurrencyButtonPress: () => void;
 };
 
-function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}) {
+function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}: CurrencySymbolButtonProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (
@@ -31,7 +30,6 @@ function CurrencySymbolButton({onCurrencyButtonPress, currencySymbol}) {
     );
 }
 
-CurrencySymbolButton.propTypes = propTypes;
 CurrencySymbolButton.displayName = 'CurrencySymbolButton';
 
 export default CurrencySymbolButton;

src/components/DotIndicatorMessage.tsx

@@ -84,9 +84,9 @@ function DotIndicatorMessage({messages = {}, style, type, textStyles}: DotIndica
                                 key={i}
                                 style={styles.offlineFeedback.text}
                             >
-                                <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{Localize.translateLocal('iou.error.receiptFailureMessage')}</Text>
-                                <Text style={[styles.optionAlternateText, styles.textLabelSupporting, styles.link]}>{Localize.translateLocal('iou.error.saveFileMessage')}</Text>
-                                <Text style={[styles.optionAlternateText, styles.textLabelSupporting]}>{Localize.translateLocal('iou.error.loseFileMessage')}</Text>
+                                <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage)]}>{Localize.translateLocal('iou.error.receiptFailureMessage')}</Text>
+                                <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage), styles.link]}>{Localize.translateLocal('iou.error.saveFileMessage')}</Text>
+                                <Text style={[StyleUtils.getDotIndicatorTextStyles(isErrorMessage)]}>{Localize.translateLocal('iou.error.loseFileMessage')}</Text>
                             </Text>
                         </PressableWithoutFeedback>
                     ) : (

src/components/LocationErrorMessage/BaseLocationErrorMessage.js → src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -7,29 +6,25 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import Tooltip from '@components/Tooltip';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
-import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
+import LocationErrorMessageProps from './types';
 
-const propTypes = {
+type BaseLocationErrorMessageProps = LocationErrorMessageProps & {
     /** A callback that runs when 'allow location permission' link is pressed */
-    onAllowLocationLinkPress: PropTypes.func.isRequired,
-
-    // eslint-disable-next-line react/forbid-foreign-prop-types
-    ...locationErrorMessagePropTypes.propTypes,
-
-    /* Onyx Props */
-    ...withLocalizePropTypes,
+    onAllowLocationLinkPress: () => void;
 };
 
-function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode, translate}) {
+function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode}: BaseLocationErrorMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+
     if (!locationErrorCode) {
         return null;
     }
@@ -81,6 +76,5 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr
 }
 
 BaseLocationErrorMessage.displayName = 'BaseLocationErrorMessage';
-BaseLocationErrorMessage.propTypes = propTypes;
-BaseLocationErrorMessage.defaultProps = locationErrorMessagePropTypes.defaultProps;
-export default withLocalize(BaseLocationErrorMessage);
+
+export default BaseLocationErrorMessage;

src/components/LocationErrorMessage/index.native.js → src/components/LocationErrorMessage/index.native.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {Linking} from 'react-native';
 import BaseLocationErrorMessage from './BaseLocationErrorMessage';
-import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
+import LocationErrorMessageProps from './types';
 
 /** Opens app level settings from the native system settings  */
 const openAppSettings = () => {
     Linking.openSettings();
 };
 
-function LocationErrorMessage(props) {
+function LocationErrorMessage(props: LocationErrorMessageProps) {
     return (
         <BaseLocationErrorMessage
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -19,6 +19,5 @@ function LocationErrorMessage(props) {
 }
 
 LocationErrorMessage.displayName = 'LocationErrorMessage';
-LocationErrorMessage.propTypes = locationErrorMessagePropTypes.propTypes;
-LocationErrorMessage.defaultProps = locationErrorMessagePropTypes.defaultProps;
+
 export default LocationErrorMessage;

src/components/LocationErrorMessage/index.js → src/components/LocationErrorMessage/index.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import {Linking} from 'react-native';
 import CONST from '@src/CONST';
 import BaseLocationErrorMessage from './BaseLocationErrorMessage';
-import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
+import LocationErrorMessageProps from './types';
 
 /** Opens expensify help site in a new browser tab */
 const navigateToExpensifyHelpSite = () => {
     Linking.openURL(CONST.NEWHELP_URL);
 };
 
-function LocationErrorMessage(props) {
+function LocationErrorMessage(props: LocationErrorMessageProps) {
     return (
         <BaseLocationErrorMessage
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -20,6 +20,5 @@ function LocationErrorMessage(props) {
 }
 
 LocationErrorMessage.displayName = 'LocationErrorMessage';
-LocationErrorMessage.propTypes = locationErrorMessagePropTypes.propTypes;
-LocationErrorMessage.defaultProps = locationErrorMessagePropTypes.defaultProps;
+
 export default LocationErrorMessage;

src/components/LocationErrorMessage/locationErrorMessagePropTypes.js → src/components/LocationErrorMessage/types.ts

@@ -1,8 +1,6 @@
-import PropTypes from 'prop-types';
-
-const propTypes = {
+type LocationErrorMessageProps = {
     /** A callback that runs when close icon is pressed */
-    onClose: PropTypes.func.isRequired,
+    onClose: () => void;
 
     /**
      * The location error code from onyx
@@ -11,11 +9,7 @@ const propTypes = {
      * - code 2 = location is unavailable or there is some connection issue
      * - code 3 = location fetch timeout
      */
-    locationErrorCode: PropTypes.oneOf([-1, 1, 2, 3]),
-};
-
-const defaultProps = {
-    locationErrorCode: null,
+    locationErrorCode?: -1 | 1 | 2 | 3;
 };
 
-export {propTypes, defaultProps};
+export default LocationErrorMessageProps;

src/components/MenuItem.tsx

@@ -49,14 +49,14 @@ type UnresponsiveProps = {
 
 type IconProps = {
     /** Flag to choose between avatar image or an icon */
-    iconType: typeof CONST.ICON_TYPE_ICON;
+    iconType?: typeof CONST.ICON_TYPE_ICON;
 
     /** Icon to display on the left side of component */
     icon: IconAsset;
 };
 
 type AvatarProps = {
-    iconType: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
+    iconType?: typeof CONST.ICON_TYPE_AVATAR | typeof CONST.ICON_TYPE_WORKSPACE;
 
     icon: AvatarSource;
 };
@@ -85,7 +85,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         titleStyle?: ViewStyle;
 
         /** Any adjustments to style when menu item is hovered or pressed */
-        hoverAndPressStyle: StyleProp<AnimatedStyle<ViewStyle>>;
+        hoverAndPressStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
 
         /** Additional styles to style the description text below the title */
         descriptionTextStyle?: StyleProp<TextStyle>;
@@ -175,7 +175,7 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         isSelected?: boolean;
 
         /** Prop to identify if we should load avatars vertically instead of diagonally */
-        shouldStackHorizontally: boolean;
+        shouldStackHorizontally?: boolean;
 
         /** Prop to represent the size of the avatar images to be shown */
         avatarSize?: (typeof CONST.AVATAR_SIZE)[keyof typeof CONST.AVATAR_SIZE];
@@ -220,10 +220,10 @@ type MenuItemProps = (ResponsiveProps | UnresponsiveProps) &
         furtherDetails?: string;
 
         /** The function that should be called when this component is LongPressed or right-clicked. */
-        onSecondaryInteraction: () => void;
+        onSecondaryInteraction?: () => void;
 
         /** Array of objects that map display names to their corresponding tooltip */
-        titleWithTooltips: DisplayNameWithTooltip[];
+        titleWithTooltips?: DisplayNameWithTooltip[];
 
         /** Icon should be displayed in its own color */
         displayInDefaultIconColor?: boolean;

src/components/Popover/popoverPropTypes.js

@@ -26,6 +26,9 @@ const propTypes = {
 
     /** The ref of the popover */
     withoutOverlayRef: refPropTypes,
+
+    /** Whether we want to show the popover on the right side of the screen */
+    fromSidebarMediumScreen: PropTypes.bool,
 };
 
 const defaultProps = {

src/components/Popover/types.ts

@@ -1,7 +1,15 @@
+import type {ValueOf} from 'type-fest';
 import BaseModalProps, {PopoverAnchorPosition} from '@components/Modal/types';
 import {WindowDimensionsProps} from '@components/withWindowDimensions/types';
+import CONST from '@src/CONST';
 
-type AnchorAlignment = {horizontal: string; vertical: string};
+type AnchorAlignment = {
+    /** The horizontal anchor alignment of the popover */
+    horizontal: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL>;
+
+    /** The vertical anchor alignment of the popover */
+    vertical: ValueOf<typeof CONST.MODAL.ANCHOR_ORIGIN_VERTICAL>;
+};
 
 type PopoverDimensions = {
     width: number;
@@ -39,4 +47,4 @@ type PopoverProps = BaseModalProps & {
 
 type PopoverWithWindowDimensionsProps = PopoverProps & WindowDimensionsProps;
 
-export type {PopoverProps, PopoverWithWindowDimensionsProps};
+export type {PopoverProps, PopoverWithWindowDimensionsProps, AnchorAlignment};