Merge pull request Expensify#89166 from mohammadjafarinejad/fix/82534-v2

feat: Add inline editing for tables on desktop (V2)

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

@@ -9004,6 +9004,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 popoverDimensions = {
+    width: CONST.POPOVER_DROPDOWN_WIDTH,
+    height: CONST.POPOVER_DROPDOWN_MAX_HEIGHT,
+};
+
+const DEFAULT_ANCHOR_ALIGNMENT = {
+    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+};
+
+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(popoverDimensions.width)}
+            restoreFocusType={CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE}
+            shouldSwitchPositionIfOverflow
+            shouldEnableNewFocusManagement
+            shouldMeasureAnchorPositionFromTop={shouldMeasureAnchorPositionFromTop}
+            shouldSkipRemeasurement
+            shouldDisplayBelowModals
+        >
+            <View style={[StyleUtils.getHeight(popoverDimensions.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 SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+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 SingleSelectListItem from './SelectionList/ListItem/SingleSelectListItem';
-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/DatePicker/CalendarPicker/MonthPickerModal.tsx

@@ -22,9 +22,12 @@ type MonthPickerModalProps = {
 
     /** Function to call when the user closes the month picker */
     onClose?: () => void;
+
+    /** Whether RIGHT_DOCKED modal should keep backdrop in narrow pane context */
+    shouldEnableBackdropInNarrowPane?: boolean;
 };
 
-function MonthPickerModal({isVisible, currentMonth = new Date().getMonth(), onMonthChange, onClose}: MonthPickerModalProps) {
+function MonthPickerModal({isVisible, currentMonth = new Date().getMonth(), onMonthChange, onClose, shouldEnableBackdropInNarrowPane = false}: MonthPickerModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
@@ -66,6 +69,7 @@ function MonthPickerModal({isVisible, currentMonth = new Date().getMonth(), onMo
             shouldHandleNavigationBack
             shouldUseCustomBackdrop
             onBackdropPress={onClose}
+            shouldKeepRightDockedBackdropInNarrowPane={shouldEnableBackdropInNarrowPane}
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -25,9 +25,12 @@ type YearPickerModalProps = {
 
     /** Function to call when the user closes the year picker */
     onClose?: () => void;
+
+    /** Whether RIGHT_DOCKED modal should keep backdrop in narrow pane context */
+    shouldEnableBackdropInNarrowPane?: boolean;
 };
 
-function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose}: YearPickerModalProps) {
+function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear(), onYearChange, onClose, shouldEnableBackdropInNarrowPane = false}: YearPickerModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
@@ -67,6 +70,7 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
             shouldHandleNavigationBack
             shouldUseCustomBackdrop
             onBackdropPress={onClose}
+            shouldKeepRightDockedBackdropInNarrowPane={shouldEnableBackdropInNarrowPane}
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper

src/components/DatePicker/CalendarPicker/index.tsx

@@ -40,6 +40,9 @@ type CalendarPickerProps = {
 
     /** Optional style override for the header container */
     headerContainerStyle?: StyleProp<ViewStyle>;
+
+    /** Whether Month/Year right-docked picker modals should keep backdrop in narrow pane context */
+    shouldEnableMonthYearBackdropInNarrowPane?: boolean;
 };
 
 function getInitialCurrentDateView(value: Date | string, minDate: Date, maxDate: Date) {
@@ -71,6 +74,7 @@ function CalendarPicker({
     DayComponent = Day,
     selectableDates,
     headerContainerStyle,
+    shouldEnableMonthYearBackdropInNarrowPane = false,
 }: CalendarPickerProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -424,12 +428,14 @@ function CalendarPicker({
                 currentYear={currentYearView}
                 onYearChange={onYearSelected}
                 onClose={() => setIsYearPickerVisible(false)}
+                shouldEnableBackdropInNarrowPane={shouldEnableMonthYearBackdropInNarrowPane}
             />
             <MonthPickerModal
                 isVisible={isMonthPickerVisible}
                 currentMonth={currentMonthView}
                 onMonthChange={onMonthSelected}
                 onClose={() => setIsMonthPickerVisible(false)}
+                shouldEnableBackdropInNarrowPane={shouldEnableMonthYearBackdropInNarrowPane}
             />
         </View>
     );

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,10 +32,12 @@ function DatePickerModal({
     isVisible,
     onClose,
     anchorPosition,
+    anchorAlignment = DEFAULT_ANCHOR_ORIGIN,
     onSelected,
     shouldCloseWhenBrowserNavigationChanged = false,
     shouldPositionFromTop = false,
     forwardedFSClass,
+    shouldEnableMonthYearBackdropInNarrowPane = false,
 }: DatePickerProps) {
     const [selectedDate, setSelectedDate] = useState(value ?? defaultValue ?? undefined);
     const anchorRef = useRef<View>(null);
@@ -69,7 +72,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}
@@ -82,6 +86,7 @@ function DatePickerModal({
                 maxDate={maxDate}
                 value={selectedDate}
                 onSelected={handleDateSelection}
+                shouldEnableMonthYearBackdropInNarrowPane={shouldEnableMonthYearBackdropInNarrowPane}
             />
         </PopoverWithMeasuredContent>
     );

src/components/DatePicker/types.ts

@@ -35,6 +35,12 @@ type DatePickerBaseProps = ForwardedFSClassProps & {
 
     /** ID of the wrapping form */
     formID?: keyof OnyxFormValuesMapping;
+
+    /**
+     * Whether Month/Year right-docked picker modals should keep backdrop in narrow pane context.
+     * Used by inline editing flows that require background dimming.
+     */
+    shouldEnableMonthYearBackdropInNarrowPane?: boolean;
 };
 
 type DateInputWithPickerProps = DatePickerBaseProps &
@@ -93,6 +99,12 @@ type DatePickerProps = {
 
     /** If the popover will be positioned from the top */
     shouldPositionFromTop?: boolean;
+
+    /**
+     * Whether Month/Year right-docked picker modals should keep backdrop in narrow pane context.
+     * Used by inline editing flows that require background dimming.
+     */
+    shouldEnableMonthYearBackdropInNarrowPane?: boolean;
 } & Omit<BaseTextInputProps & PopoverWithMeasuredContentProps, 'anchorRef' | 'children'>;
 
 export type {DateInputWithPickerProps, DatePickerProps};

src/components/Modal/BaseModal.tsx

@@ -73,6 +73,7 @@ function BaseModal({
     forwardedFSClass = CONST.FULLSTORY.CLASS.UNMASK,
     ref,
     shouldDisplayBelowModals = false,
+    shouldKeepRightDockedBackdropInNarrowPane = false,
     shouldWrapModalChildrenInScrollViewIfBottomDockedInLandscapeMode = true,
 }: BaseModalProps) {
     // When the `enableEdgeToEdgeBottomSafeAreaPadding` prop is explicitly set, we enable edge-to-edge mode.
@@ -305,8 +306,10 @@ function BaseModal({
     const {originalValues} = useContext(ScreenWrapperOfflineIndicatorContext);
     const offlineIndicatorContextValue = useMemo(() => (isInNarrowPane ? (originalValues ?? {}) : {}), [isInNarrowPane, originalValues]);
 
+    const shouldSuppressRightDockedBackdrop =
+        type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && !isSmallScreenWidth && (isInNarrowPane || isInNarrowPaneModal) && !shouldKeepRightDockedBackdropInNarrowPane;
     const backdropOpacityAdjusted =
-        hideBackdrop || (type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && !isSmallScreenWidth && (isInNarrowPane || isInNarrowPaneModal)) // right_docked modals shouldn't add backdrops when opened in same-width RHP
+        hideBackdrop || shouldSuppressRightDockedBackdrop // right_docked modals shouldn't add backdrops when opened in same-width RHP
             ? 0
             : backdropOpacity;