Merge pull request Expensify#83127 from mohammadjafarinejad/fix/82534

feat: Add inline editing for tables on desktop

Author: puneetlath

src/App.tsx

@@ -31,6 +31,7 @@ import SafeArea from './components/SafeArea';
 import ScrollOffsetContextProvider from './components/ScrollOffsetContextProvider';
 import SidePanelContextProvider from './components/SidePanel/SidePanelContextProvider';
 import SVGDefinitionsProvider from './components/SVGDefinitionsProvider';
+import {EditingCellProvider} from './components/Table/EditableCell';
 import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider';
 import ThemeProvider from './components/ThemeProvider';
 import ThemeStylesProvider from './components/ThemeStylesContextProvider';
@@ -115,6 +116,7 @@ function App() {
                                         FullScreenLoaderContextProvider,
                                         ModalProvider,
                                         SidePanelContextProvider,
+                                        EditingCellProvider,
                                     ]}
                                 >
                                     <CustomStatusBarAndBackground />

src/CONST/index.ts

@@ -257,6 +257,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,
@@ -8933,6 +8935,9 @@ const CONST = {
             SORTABLE_HEADER: 'Search-SortableHeader',
             UNREPORTED_EXPENSE_LIST_ITEM: 'UnreportedExpenseListItem',
         },
+        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,86 @@
+import React, {useRef} from 'react';
+import {View} from 'react-native';
+import PopoverWithMeasuredContent from '@components/PopoverWithMeasuredContent';
+import type PopoverWithMeasuredContentProps from '@components/PopoverWithMeasuredContent/types';
+import type {ListItem} from '@components/SelectionList/types';
+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();
+    const anchorRef = useRef<View>(null);
+
+    const handleCategorySelect = (item: ListItem) => {
+        // If clicking the same category that's already selected, treat it as deselection
+        if (item.keyForList === selectedCategory) {
+            onSelected?.({keyForList: '', searchText: ''});
+        } else {
+            onSelected?.(item);
+        }
+        onClose();
+    };
+
+    return (
+        <PopoverWithMeasuredContent
+            anchorRef={anchorRef}
+            isVisible={isVisible}
+            onClose={onClose}
+            anchorPosition={anchorPosition}
+            popoverDimensions={popoverDimensions}
+            anchorAlignment={anchorAlignment}
+            innerContainerStyle={StyleUtils.getWidthStyle(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]}>
+                <CategoryPicker
+                    selectedCategory={selectedCategory}
+                    policyID={policyID}
+                    onSubmit={handleCategorySelect}
+                />
+            </View>
+        </PopoverWithMeasuredContent>
+    );
+}
+
+export default CategoryPickerModal;

src/components/CategoryPicker.tsx src/components/CategoryPicker/index.tsxsrc/components/CategoryPicker.tsx renamed to src/components/CategoryPicker/index.tsx

@@ -1,4 +1,8 @@
 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 type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
@@ -12,10 +16,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';
-import type {BaseTextInputRef} from './TextInput/BaseTextInput/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

@@ -13,6 +13,7 @@ const DEFAULT_ANCHOR_ORIGIN = {
     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
 };
+
 const popoverDimensions = {
     height: CONST.POPOVER_DATE_MIN_HEIGHT,
     width: CONST.POPOVER_DATE_WIDTH,
@@ -31,6 +32,7 @@ function DatePickerModal({
     isVisible,
     onClose,
     anchorPosition,
+    anchorAlignment = DEFAULT_ANCHOR_ORIGIN,
     onSelected,
     shouldCloseWhenBrowserNavigationChanged = false,
     shouldPositionFromTop = false,
@@ -69,7 +71,8 @@ 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
             shouldReturnFocus={false}
             shouldMeasureAnchorPositionFromTop={shouldPositionFromTop}

src/components/MoneyRequestAmountInput.tsx

@@ -124,6 +124,15 @@ type MoneyRequestAmountInputProps = {
      */
     shouldWrapInputInContainer?: boolean;
 
+    /** Style applied to the outer ScrollView inside NumberWithSymbolForm */
+    scrollViewStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Whether to refocus the input when clicking on the ScrollView empty space.
+     * Prevents focus loss when clicking empty space left of the right-aligned input.
+     */
+    shouldRefocusOnScrollViewClick?: boolean;
+
     /** Whether the input is disabled or not */
     disabled?: boolean;
 
@@ -132,7 +141,7 @@ type MoneyRequestAmountInputProps = {
 
     /** Determines which keyboard to open */
     keyboardType?: KeyboardTypeOptions;
-} & Pick<TextInputWithSymbolProps, 'autoGrowExtraSpace' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix' | 'onFocus' | 'onBlur'>;
+} & Pick<TextInputWithSymbolProps, 'autoGrowExtraSpace' | 'submitBehavior' | 'shouldUseDefaultLineHeightForPrefix' | 'onFocus' | 'onBlur' | 'symbolTextStyle'>;
 
 type Selection = {
     start: number;
@@ -167,6 +176,8 @@ function MoneyRequestAmountInput({
     shouldApplyPaddingToContainer = false,
     shouldUseDefaultLineHeightForPrefix = true,
     shouldWrapInputInContainer = true,
+    scrollViewStyle,
+    shouldRefocusOnScrollViewClick = false,
     isNegative = false,
     allowFlippingAmount = false,
     allowNegativeInput = false,
@@ -245,6 +256,7 @@ function MoneyRequestAmountInput({
             currency={currency}
             hideSymbol={hideCurrencySymbol}
             isSymbolPressable={isCurrencyPressable}
+            symbolTextStyle={props.symbolTextStyle}
             shouldShowBigNumberPad={shouldShowBigNumberPad}
             style={inputStyle}
             autoGrow={autoGrow}
@@ -254,6 +266,8 @@ function MoneyRequestAmountInput({
             shouldApplyPaddingToContainer={shouldApplyPaddingToContainer}
             shouldUseDefaultLineHeightForPrefix={shouldUseDefaultLineHeightForPrefix}
             shouldWrapInputInContainer={shouldWrapInputInContainer}
+            scrollViewStyle={scrollViewStyle}
+            shouldRefocusOnScrollViewClick={shouldRefocusOnScrollViewClick}
             containerStyle={props.containerStyle}
             prefixStyle={props.prefixStyle}
             prefixContainerStyle={props.prefixContainerStyle}

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -5,13 +5,15 @@ import {getButtonRole} from '@components/Button/utils';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import type {SearchColumnType, TableColumnSize} from '@components/Search/types';
+import {useEditingCellState} from '@components/Table/EditableCell';
 import TransactionItemRow from '@components/TransactionItemRow';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useTransactionInlineEdit from '@hooks/useTransactionInlineEdit';
 import useTransactionViolations from '@hooks/useTransactionViolations';
 import ControlSelection from '@libs/ControlSelection';
 import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen';
@@ -91,6 +93,7 @@ function MoneyRequestReportTransactionItem({
 }: MoneyRequestReportTransactionItemProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {isEditingCell} = useEditingCellState();
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth, isMediumScreenWidth} = useResponsiveLayout();
     const {shouldUseNarrowLayout} = useResponsiveLayoutOnWideRHP();
@@ -100,6 +103,22 @@ function MoneyRequestReportTransactionItem({
     // Filter violations based on user visibility and dismissal state at the row level.
     const filteredViolations = useTransactionViolations(transaction.transactionID);
 
+    const {
+        canEditDate,
+        canEditMerchant,
+        canEditDescription,
+        canEditCategory,
+        canEditAmount,
+        canEditTag,
+        onEditDate,
+        onEditMerchant,
+        onEditDescription,
+        onEditCategory,
+        onEditAmount,
+        onEditTag,
+        wasEditingOnMouseDownRef,
+    } = useTransactionInlineEdit({transactionID: transaction.transactionID, reportID: transaction.reportID});
+
     const viewRef = useRef<View>(null);
 
     // This useEffect scrolls to this transaction when it is newly added to the report
@@ -124,6 +143,12 @@ function MoneyRequestReportTransactionItem({
             <PressableWithFeedback
                 key={transaction.transactionID}
                 onPress={() => {
+                    // If a cell was being edited when the user tapped the row, suppress navigation
+                    // so the second tap doesn't immediately open the transaction detail.
+                    if (wasEditingOnMouseDownRef.current) {
+                        wasEditingOnMouseDownRef.current = false;
+                        return;
+                    }
                     handleOnPress(transaction.transactionID);
                 }}
                 accessibilityLabel={translate('iou.viewDetails')}
@@ -134,7 +159,12 @@ function MoneyRequestReportTransactionItem({
                 style={[styles.transactionListItemStyle]}
                 hoverStyle={[!isPendingDelete && styles.hoveredComponentBG, isSelected && styles.activeComponentBG]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
-                onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+                onPressIn={() => {
+                    wasEditingOnMouseDownRef.current = isEditingCell;
+                    if (canUseTouchScreen()) {
+                        ControlSelection.block();
+                    }
+                }}
                 onPressOut={() => ControlSelection.unblock()}
                 onLongPress={() => {
                     handleLongPress(transaction.transactionID);
@@ -166,6 +196,18 @@ function MoneyRequestReportTransactionItem({
                         onArrowRightPress={() => onArrowRightPress?.(transaction.transactionID)}
                         isHover={hovered}
                         nonPersonalAndWorkspaceCards={nonPersonalAndWorkspaceCards}
+                        canEditDate={canEditDate}
+                        canEditMerchant={canEditMerchant}
+                        canEditDescription={canEditDescription}
+                        canEditCategory={canEditCategory}
+                        canEditAmount={canEditAmount}
+                        canEditTag={canEditTag}
+                        onEditDate={onEditDate}
+                        onEditMerchant={onEditMerchant}
+                        onEditDescription={onEditDescription}
+                        onEditCategory={onEditCategory}
+                        onEditAmount={onEditAmount}
+                        onEditTag={onEditTag}
                     />
                 )}
             </PressableWithFeedback>