feat: Add inline editing for tables on desktop

src/CONST/index.ts

@@ -245,6 +245,8 @@ const CONST = {
     POPOVER_DROPDOWN_WIDTH: 334,
     POPOVER_DROPDOWN_MIN_HEIGHT: 0,
     POPOVER_DROPDOWN_MAX_HEIGHT: 416,
+    POPOVER_CATEGORY_PICKER_WIDTH: 350,
+    POPOVER_CATEGORY_PICKER_MAX_HEIGHT: 450,
     POPOVER_MENU_MAX_HEIGHT: 496,
     POPOVER_MENU_MAX_HEIGHT_MOBILE: 432,
     POPOVER_DATE_WIDTH: 338,
@@ -7501,6 +7503,7 @@ const CONST = {
                 COMPLETED: 'completed',
             },
         },
+        INLINE_EDITABLE_EXPENSE_STATUSES: new Set<string>(['', 'unreported', 'drafts', 'outstanding']),
         GROUP_COLUMN_PREFIX: 'group',
         TABLE_COLUMNS: {
             RECEIPT: 'receipt',
@@ -8569,6 +8572,9 @@ const CONST = {
             GROUP_SELECT_ALL_CHECKBOX: 'Search-GroupSelectAllCheckbox',
             SORTABLE_HEADER: 'Search-SortableHeader',
         },
+        TABLE: {
+            EDITABLE_CELL: 'Table-EditableCell',
+        },
         REPORT: {
             FLOATING_MESSAGE_COUNTER: 'Report-FloatingMessageCounter',
             LIST_BOUNDARY_LOADER_RETRY: 'Report-ListBoundaryLoaderRetry',

src/components/CategoryPicker/CategoryPickerModal.tsx

@@ -0,0 +1,104 @@
+import React, {useRef, useState} from 'react';
+import {View} from 'react-native';
+import ConfirmCancelButtonRow from '@components/ConfirmCancelButtonRow';
+import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
+import type PopoverWithMeasuredContentProps from '@components/PopoverWithMeasuredContent/types';
+import type {ListItem} from '@components/SelectionList/types';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+import CategoryPicker from '.';
+
+const DEFAULT_ANCHOR_ALIGNMENT = {
+    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+};
+
+const popoverDimensions = {
+    width: CONST.POPOVER_DROPDOWN_WIDTH,
+    height: CONST.POPOVER_DROPDOWN_MAX_HEIGHT,
+};
+
+type CategoryPickerModalProps = {
+    /** Callback to close the modal */
+    onClose: () => void;
+
+    /** The policy whose categories should be shown */
+    policyID: string | undefined;
+
+    /** Currently selected category */
+    selectedCategory?: string;
+
+    /** Called when the user confirms a category selection */
+    onSelected?: (item: ListItem) => void;
+} & Omit<PopoverWithMeasuredContentProps, 'anchorRef' | 'children' | 'onClose'>;
+
+function CategoryPickerModal({
+    isVisible,
+    onClose,
+    anchorPosition,
+    policyID,
+    selectedCategory,
+    onSelected,
+    anchorAlignment = DEFAULT_ANCHOR_ALIGNMENT,
+    shouldMeasureAnchorPositionFromTop = false,
+}: CategoryPickerModalProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+
+    // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHL and narrow layout
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+    const anchorRef = useRef<View>(null);
+
+    const [pendingItem, setPendingItem] = useState<ListItem | undefined>(undefined);
+
+    const handleConfirm = () => {
+        if (pendingItem) {
+            onSelected?.(pendingItem);
+        }
+        setPendingItem(undefined);
+        onClose();
+    };
+
+    const handleCancel = () => {
+        setPendingItem(undefined);
+        onClose();
+    };
+
+    return (
+        <PopoverWithMeasuredContent
+            anchorRef={anchorRef}
+            isVisible={isVisible}
+            onClose={handleCancel}
+            anchorPosition={anchorPosition}
+            popoverDimensions={popoverDimensions}
+            anchorAlignment={anchorAlignment}
+            innerContainerStyle={isSmallScreenWidth ? styles.w100 : {width: CONST.POPOVER_DROPDOWN_WIDTH}}
+            restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
+            shouldSwitchPositionIfOverflow
+            shouldEnableNewFocusManagement
+            shouldMeasureAnchorPositionFromTop={shouldMeasureAnchorPositionFromTop}
+            shouldSkipRemeasurement
+            shouldDisplayBelowModals
+        >
+            <View style={[StyleUtils.getHeight(CONST.POPOVER_DROPDOWN_MAX_HEIGHT), styles.flexColumn, styles.pt4]}>
+                <View style={styles.flex1}>
+                    <CategoryPicker
+                        policyID={policyID}
+                        selectedCategory={pendingItem?.keyForList ?? selectedCategory}
+                        onSubmit={setPendingItem}
+                    />
+                </View>
+                <ConfirmCancelButtonRow
+                    onConfirm={handleConfirm}
+                    onCancel={handleCancel}
+                    isConfirmDisabled={!pendingItem}
+                />
+            </View>
+        </PopoverWithMeasuredContent>
+    );
+}
+
+export default CategoryPickerModal;

src/components/CategoryPicker.tsx → src/components/CategoryPicker/index.tsx

@@ -1,4 +1,7 @@
 import React from 'react';
+import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
+import type {ListItem} from '@components/SelectionList/types';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -11,9 +14,6 @@ import {getHeaderMessageForNonUserList} from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
-import RadioListItem from './SelectionList/ListItem/RadioListItem';
-import SelectionListWithSections from './SelectionList/SelectionListWithSections';
-import type {ListItem} from './SelectionList/types';
 
 type CategoryPickerProps = {
     policyID: string | undefined;

src/components/ConfirmCancelButtonRow.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Button from './Button';
+
+type ConfirmCancelButtonRowProps = {
+    /** Called when the user presses Apply */
+    onConfirm: () => void;
+
+    /** Called when the user presses Cancel */
+    onCancel: () => void;
+
+    /** Whether the Apply button is disabled */
+    isConfirmDisabled?: boolean;
+};
+
+function ConfirmCancelButtonRow({onConfirm, onCancel, isConfirmDisabled = false}: ConfirmCancelButtonRowProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    return (
+        <View style={[styles.flexRow, styles.gap2, styles.ph4, styles.pb4]}>
+            <Button
+                style={[styles.flex1]}
+                text={translate('common.cancel')}
+                onPress={onCancel}
+            />
+            <Button
+                style={[styles.flex1]}
+                success
+                text={translate('common.apply')}
+                onPress={onConfirm}
+                isDisabled={isConfirmDisabled}
+            />
+        </View>
+    );
+}
+
+export default ConfirmCancelButtonRow;

src/components/DatePicker/DatePickerModal.tsx

@@ -1,6 +1,7 @@
 import {setYear} from 'date-fns';
 import React, {useEffect, useRef, useState} from 'react';
 import type {View} from 'react-native';
+import ConfirmCancelButtonRow from '@components/ConfirmCancelButtonRow';
 import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -31,10 +32,12 @@ function DatePickerModal({
     isVisible,
     onClose,
     anchorPosition,
+    anchorAlignment = DEFAULT_ANCHOR_ORIGIN,
     onSelected,
     shouldCloseWhenBrowserNavigationChanged = false,
     shouldPositionFromTop = false,
     forwardedFSClass,
+    shouldShowConfirmButtons = false,
 }: DatePickerProps) {
     const [selectedDate, setSelectedDate] = useState(value ?? defaultValue ?? undefined);
     const anchorRef = useRef<View>(null);
@@ -45,19 +48,39 @@ function DatePickerModal({
     const {isSmallScreenWidth} = useResponsiveLayout();
 
     useEffect(() => {
+        // In confirm mode, selectedDate is a pending selection and should not be synced with value until the user confirms
+        if (shouldShowConfirmButtons) {
+            return;
+        }
         if (shouldSaveDraft && formID) {
             setDraftValues(formID, {[inputID]: selectedDate});
         }
         if (selectedDate !== value) {
             setSelectedDate(value);
         }
-    }, [formID, inputID, selectedDate, shouldSaveDraft, value]);
+    }, [formID, inputID, selectedDate, shouldSaveDraft, shouldShowConfirmButtons, value]);
 
-    const handleDateSelection = (newValue: string) => {
-        onSelected?.(newValue);
+    const commitDate = (date: string) => {
+        onSelected?.(date);
         onTouched?.();
-        onInputChange?.(newValue);
+        onInputChange?.(date);
+        if (shouldSaveDraft && formID) {
+            setDraftValues(formID, {[inputID]: date});
+        }
+    };
+
+    const handleDateSelection = (newValue: string) => {
         setSelectedDate(newValue);
+        if (!shouldShowConfirmButtons) {
+            commitDate(newValue);
+        }
+    };
+
+    const handleConfirm = () => {
+        if (selectedDate) {
+            commitDate(selectedDate);
+        }
+        onClose();
     };
 
     return (
@@ -69,7 +92,7 @@ function DatePickerModal({
             popoverDimensions={popoverDimensions}
             shouldCloseWhenBrowserNavigationChanged={shouldCloseWhenBrowserNavigationChanged}
             innerContainerStyle={isSmallScreenWidth ? styles.w100 : {width: CONST.POPOVER_DATE_WIDTH}}
-            anchorAlignment={DEFAULT_ANCHOR_ORIGIN}
+            anchorAlignment={anchorAlignment}
             restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
             shouldSwitchPositionIfOverflow
             shouldEnableNewFocusManagement
@@ -84,6 +107,13 @@ function DatePickerModal({
                 value={selectedDate}
                 onSelected={handleDateSelection}
             />
+            {shouldShowConfirmButtons && (
+                <ConfirmCancelButtonRow
+                    onConfirm={handleConfirm}
+                    onCancel={onClose}
+                    isConfirmDisabled={!selectedDate}
+                />
+            )}
         </PopoverWithMeasuredContent>
     );
 }

src/components/DatePicker/types.ts

@@ -103,6 +103,9 @@ type DatePickerProps = {
 
     /** If the popover will be positioned from the top */
     shouldPositionFromTop?: boolean;
+
+    /** When true, shows Cancel/Confirm buttons instead of immediately firing onSelected on date pick */
+    shouldShowConfirmButtons?: boolean;
 } & Omit<BaseTextInputProps & PopoverWithMeasuredContentProps, 'anchorRef' | 'children'>;
 
 export type {DatePickerBaseProps, DatePickerModalProps, DateInputWithPickerProps, DatePickerProps};

src/components/MoneyRequestAmountInput.tsx

@@ -124,12 +124,15 @@ type MoneyRequestAmountInputProps = {
      */
     shouldWrapInputInContainer?: boolean;
 
+    /** Style applied to the outer ScrollView inside NumberWithSymbolForm */
+    scrollViewStyle?: StyleProp<ViewStyle>;
+
     /** Whether the input is disabled or not */
     disabled?: boolean;
 
     /** Reference to the outer element */
     ref?: ForwardedRef<BaseTextInputRef>;
-} & Pick<TextInputWithSymbolProps, 'autoGrowExtraSpace' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix' | 'onFocus' | 'onBlur'>;
+} & Pick<TextInputWithSymbolProps, 'autoGrowExtraSpace' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix' | 'onFocus' | 'onBlur' | 'symbolTextStyle'>;
 
 type Selection = {
     start: number;
@@ -166,6 +169,7 @@ function MoneyRequestAmountInput({
     shouldApplyPaddingToContainer = false,
     shouldUseDefaultLineHeightForPrefix = true,
     shouldWrapInputInContainer = true,
+    scrollViewStyle,
     isNegative = false,
     allowFlippingAmount = false,
     allowNegativeInput = false,
@@ -244,6 +248,7 @@ function MoneyRequestAmountInput({
             currency={currency}
             hideSymbol={hideCurrencySymbol}
             isSymbolPressable={isCurrencyPressable}
+            symbolTextStyle={props.symbolTextStyle}
             shouldShowBigNumberPad={shouldShowBigNumberPad}
             style={inputStyle}
             autoGrow={autoGrow}
@@ -253,6 +258,7 @@ function MoneyRequestAmountInput({
             shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
             shouldUseDefaultLineHeightForPrefix={shouldUseDefaultLineHeightForPrefix}
             shouldWrapInputInContainer={shouldWrapInputInContainer}
+            scrollViewStyle={scrollViewStyle}
             containerStyle={props.containerStyle}
             prefixStyle={props.prefixStyle}
             prefixContainerStyle={props.prefixContainerStyle}