[Maintenance] Cleanup react aria packages and dedupe (#3450)

* Cleanup react aria packages and dedupe

* Release notes

packages/desktop-client/package.json

@@ -8,11 +8,6 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.41.1",
-    "@react-aria/focus": "^3.16.0",
-    "@react-aria/listbox": "^3.11.3",
-    "@react-aria/utils": "^3.23.0",
-    "@react-stately/collections": "^3.10.4",
-    "@react-stately/list": "^3.10.2",
     "@rollup/plugin-inject": "^5.0.5",
     "@svgr/cli": "^8.1.0",
     "@swc/core": "^1.5.3",
@@ -54,8 +49,8 @@
     "promise-retry": "^2.0.1",
     "re-resizable": "^6.9.17",
     "react": "18.2.0",
-    "react-aria": "^3.33.1",
-    "react-aria-components": "^1.2.1",
+    "react-aria": "^3.34.3",
+    "react-aria-components": "^1.3.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
@@ -69,6 +64,7 @@
     "react-router-dom": "6.21.3",
     "react-simple-pull-to-refresh": "^1.3.3",
     "react-spring": "^9.7.3",
+    "react-stately": "^3.10.9",
     "react-virtualized-auto-sizer": "^1.0.21",
     "recharts": "^2.10.4",
     "redux": "^4.2.1",

packages/desktop-client/src/components/filters/FiltersMenu.jsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useReducer } from 'react';
+import { FocusScope } from 'react-aria';
 import { Form } from 'react-aria-components';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
 
-import { FocusScope } from '@react-aria/focus';
 import {
   parse as parseDate,
   format as formatDate,

packages/desktop-client/src/components/mobile/transactions/ListBox.jsx

@@ -1,7 +1,6 @@
 import React, { useRef } from 'react';
-
-import { useListBox } from '@react-aria/listbox';
-import { useListState } from '@react-stately/list';
+import { useListBox } from 'react-aria';
+import { useListState } from 'react-stately';
 
 import { usePrevious } from '../../../hooks/usePrevious';
 import { useScroll } from '../../ScrollProvider';

packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
+import { useListBoxSection } from 'react-aria';
 
-import { useListBoxSection } from '@react-aria/listbox';
 import { css } from 'glamor';
 
 import { styles, theme } from '../../../style';

packages/desktop-client/src/components/mobile/transactions/Option.jsx

@@ -1,8 +1,5 @@
 import React, { useRef } from 'react';
-
-import { useFocusRing } from '@react-aria/focus';
-import { useOption } from '@react-aria/listbox';
-import { mergeProps } from '@react-aria/utils';
+import { useFocusRing, useOption, mergeProps } from 'react-aria';
 
 import { theme } from '../../../style';
 

packages/desktop-client/src/components/mobile/transactions/Transaction.jsx

@@ -1,11 +1,11 @@
 import React, { memo } from 'react';
+import { mergeProps } from 'react-aria';
 
 import {
   PressResponder,
   usePress,
   useLongPress,
 } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
 
 import { getScheduledAmount } from 'loot-core/src/shared/schedules';
 import { isPreviewId } from 'loot-core/src/shared/transactions';

packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx

@@ -6,8 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { useDispatch } from 'react-redux';
-
-import { Item, Section } from '@react-stately/collections';
+import { Item, Section } from 'react-stately';
 
 import { setNotificationInset } from 'loot-core/client/actions';
 import { groupById, integerToCurrency } from 'loot-core/shared/util';
@@ -28,7 +27,7 @@ import { AnimatedLoading } from '../../../icons/AnimatedLoading';
 import { SvgDelete } from '../../../icons/v0';
 import { SvgDotsHorizontalTriple } from '../../../icons/v1';
 import { styles, theme } from '../../../style';
-import { Button } from '../../common/Button';
+import { Button } from '../../common/Button2';
 import { Menu } from '../../common/Menu';
 import { Popover } from '../../common/Popover';
 import { Text } from '../../common/Text';
@@ -260,10 +259,10 @@ function SelectedTransactionsFloatingActionBar({ transactions, style }) {
           }}
         >
           <Button
-            type="bare"
+            variant="bare"
             {...buttonProps}
             style={{ ...buttonProps.style, marginRight: 4 }}
-            onClick={() => {
+            onPress={() => {
               if (selectedTransactions.size > 0) {
                 dispatchSelected({ type: 'select-none' });
               }
@@ -285,10 +284,10 @@ function SelectedTransactionsFloatingActionBar({ transactions, style }) {
           }}
         >
           <Button
-            type="bare"
+            variant="bare"
             ref={editMenuTriggerRef}
             aria-label="Edit fields"
-            onClick={() => {
+            onPress={() => {
               setIsEditMenuOpen(true);
             }}
             {...buttonProps}
@@ -394,10 +393,10 @@ function SelectedTransactionsFloatingActionBar({ transactions, style }) {
           </Popover>
 
           <Button
-            type="bare"
+            variant="bare"
             ref={moreOptionsMenuTriggerRef}
             aria-label="More options"
-            onClick={() => {
+            onPress={() => {
               setIsMoreOptionsMenuOpen(true);
             }}
             {...buttonProps}

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

@@ -737,7 +737,6 @@ function PayeeCell({
           onUpdate={(id, value) => onUpdate?.(value)}
           onSelect={onSave}
           onManagePayees={() => onManagePayees(payee?.id)}
-          menuPortalTarget={undefined}
         />
       )}
     </CustomCell>

upcoming-release-notes/3450.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Cleanup react-aria packages and dedupe packages.