From 5b685ecc64633304f638167cc8ad8068e77f59b3 Mon Sep 17 00:00:00 2001 From: Joel Jeremy Marquez Date: Mon, 16 Sep 2024 13:07:52 -0700 Subject: [PATCH] [Maintenance] Cleanup react aria packages and dedupe (#3450) * Cleanup react aria packages and dedupe * Release notes --- packages/desktop-client/package.json | 10 +- .../src/components/filters/FiltersMenu.jsx | 2 +- .../mobile/transactions/ListBox.jsx | 5 +- .../mobile/transactions/ListBoxSection.jsx | 2 +- .../components/mobile/transactions/Option.jsx | 5 +- .../mobile/transactions/Transaction.jsx | 2 +- .../mobile/transactions/TransactionList.jsx | 17 +- .../transactions/TransactionsTable.jsx | 1 - upcoming-release-notes/3450.md | 6 + yarn.lock | 2154 +++++++++-------- 10 files changed, 1108 insertions(+), 1096 deletions(-) create mode 100644 upcoming-release-notes/3450.md diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json index 112df73b7aa..ffb902de6ab 100644 --- a/packages/desktop-client/package.json +++ b/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", diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.jsx b/packages/desktop-client/src/components/filters/FiltersMenu.jsx index 30642fb7d81..7994eddc673 100644 --- a/packages/desktop-client/src/components/filters/FiltersMenu.jsx +++ b/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, diff --git a/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx b/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx index 402a950d8d3..980fce3db6e 100644 --- a/packages/desktop-client/src/components/mobile/transactions/ListBox.jsx +++ b/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'; diff --git a/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx b/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx index b12dc3e4161..8822acbb935 100644 --- a/packages/desktop-client/src/components/mobile/transactions/ListBoxSection.jsx +++ b/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'; diff --git a/packages/desktop-client/src/components/mobile/transactions/Option.jsx b/packages/desktop-client/src/components/mobile/transactions/Option.jsx index f8711105cb0..18f58cb2a63 100644 --- a/packages/desktop-client/src/components/mobile/transactions/Option.jsx +++ b/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'; diff --git a/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx b/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx index 0d4693ad5e2..25582ed8544 100644 --- a/packages/desktop-client/src/components/mobile/transactions/Transaction.jsx +++ b/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'; diff --git a/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx b/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx index 48c1dd97b1f..67cdfc68e77 100644 --- a/packages/desktop-client/src/components/mobile/transactions/TransactionList.jsx +++ b/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 }) { }} >