diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx index 26989686e7..60a6f7a171 100644 --- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx +++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudget.tsx @@ -1,4 +1,9 @@ -import React, { useRef, useState, type CSSProperties } from 'react'; +import React, { + useRef, + useState, + type CSSProperties, + useCallback, +} from 'react'; import { envelopeBudget } from 'loot-core/src/client/queries'; @@ -11,6 +16,7 @@ import { TransferMenu } from '../TransferMenu'; import { ToBudgetAmount } from './ToBudgetAmount'; import { ToBudgetMenu } from './ToBudgetMenu'; +import { useFeatureFlag } from '../../../../hooks/useFeatureFlag'; type ToBudgetProps = { month: string; @@ -28,8 +34,17 @@ export function ToBudget({ amountStyle, isCollapsed = false, }: ToBudgetProps) { - const [menuOpen, setMenuOpen] = useState(null); + const [menuOpen, _setMenuOpen] = useState(null); const triggerRef = useRef(null); + + const ref = useRef(null); + const setMenuOpen = useCallback( + (menu: string | null) => { + if (menu) ref.current?.focus(); + _setMenuOpen(menu); + }, + [triggerRef], + ); const sheetValue = useEnvelopeSheetValue({ name: envelopeBudget.toBudget, value: 0, @@ -41,6 +56,7 @@ export function ToBudget({ ); } const isMenuOpen = Boolean(menuOpen); + const contextMenusEnabled = useFeatureFlag('contextMenus'); return ( <> @@ -51,6 +67,11 @@ export function ToBudget({ style={style} amountStyle={amountStyle} isTotalsListTooltipDisabled={!isCollapsed || isMenuOpen} + onContextMenu={e => { + if (!contextMenusEnabled) return; + e.preventDefault(); + setMenuOpen('actions'); + }} /> @@ -62,48 +83,50 @@ export function ToBudget({ style={{ width: 200 }} isNonModal > - {menuOpen === 'actions' && ( - setMenuOpen('transfer')} - onCover={() => setMenuOpen('cover')} - onHoldBuffer={() => setMenuOpen('buffer')} - onResetHoldBuffer={() => { - onBudgetAction(month, 'reset-hold'); - setMenuOpen(null); - }} - /> - )} - {menuOpen === 'buffer' && ( - setMenuOpen(null)} - onSubmit={amount => { - onBudgetAction(month, 'hold', { amount }); - }} - /> - )} - {menuOpen === 'transfer' && ( - setMenuOpen(null)} - onSubmit={(amount, categoryId) => { - onBudgetAction(month, 'transfer-available', { - amount, - category: categoryId, - }); - }} - /> - )} - {menuOpen === 'cover' && ( - setMenuOpen(null)} - onSubmit={categoryId => { - onBudgetAction(month, 'cover-overbudgeted', { - category: categoryId, - }); - }} - /> - )} + + {menuOpen === 'actions' && ( + setMenuOpen('transfer')} + onCover={() => setMenuOpen('cover')} + onHoldBuffer={() => setMenuOpen('buffer')} + onResetHoldBuffer={() => { + onBudgetAction(month, 'reset-hold'); + setMenuOpen(null); + }} + /> + )} + {menuOpen === 'buffer' && ( + setMenuOpen(null)} + onSubmit={amount => { + onBudgetAction(month, 'hold', { amount }); + }} + /> + )} + {menuOpen === 'transfer' && ( + setMenuOpen(null)} + onSubmit={(amount, categoryId) => { + onBudgetAction(month, 'transfer-available', { + amount, + category: categoryId, + }); + }} + /> + )} + {menuOpen === 'cover' && ( + setMenuOpen(null)} + onSubmit={categoryId => { + onBudgetAction(month, 'cover-overbudgeted', { + category: categoryId, + }); + }} + /> + )} + ); diff --git a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx index 4176e43178..5eecae6527 100644 --- a/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx +++ b/packages/desktop-client/src/components/budget/envelope/budgetsummary/ToBudgetAmount.tsx @@ -1,10 +1,9 @@ -import React, { type CSSProperties } from 'react'; +import React, { type CSSProperties, type MouseEventHandler } from 'react'; import { css } from '@emotion/css'; import { envelopeBudget } from 'loot-core/src/client/queries'; -import { useFeatureFlag } from '../../../../hooks/useFeatureFlag'; import { theme, styles } from '../../../../style'; import { Block } from '../../../common/Block'; import { Tooltip } from '../../../common/Tooltip'; @@ -23,6 +22,7 @@ type ToBudgetAmountProps = { style?: CSSProperties; amountStyle?: CSSProperties; onClick: () => void; + onContextMenu?: MouseEventHandler; isTotalsListTooltipDisabled?: boolean; }; @@ -32,6 +32,7 @@ export function ToBudgetAmount({ amountStyle, onClick, isTotalsListTooltipDisabled = false, + onContextMenu, }: ToBudgetAmountProps) { const sheetName = useEnvelopeSheetName(envelopeBudget.toBudget); const sheetValue = useEnvelopeSheetValue({ @@ -47,7 +48,6 @@ export function ToBudgetAmount({ } const num = availableValue ?? 0; const isNegative = num < 0; - const contextMenusEnabled = useFeatureFlag('contextMenus'); return ( @@ -73,11 +73,7 @@ export function ToBudgetAmount({ > { - if (!contextMenusEnabled) return; - e.preventDefault(); - onClick(); - }} + onContextMenu={onContextMenu} data-cellname={sheetName} className={css([ styles.veryLargeText,