From eed097d41e938998be7106581ffe9da2beb7a675 Mon Sep 17 00:00:00 2001
From: Matiss Janis Aboltins <matiss@mja.lv>
Date: Wed, 19 Apr 2023 22:08:32 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20remove=20new=20autocomplete=20ex?=
=?UTF-8?q?periment=20(react-select)=20(#924)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Removing `react-select` and the new autocomplete. This experiment has
failed, so cleaning things up now.
---
packages/desktop-client/package.json | 1 -
.../desktop-client/src/components/Modals.js | 3 -
.../components/accounts/TransactionsTable.js | 22 +-
.../autocomplete/CategoryAutocomplete.js | 91 -------
.../autocomplete/NewAccountAutocomplete.js | 62 -----
.../autocomplete/NewAutocomplete.tsx | 166 ------------
.../autocomplete/NewPayeeAutocomplete.js | 165 ------------
.../src/components/budget/index.js | 2 -
.../src/components/budget/misc.js | 9 +-
.../budget/rollover/BudgetSummary.js | 22 +-
.../budget/rollover/TransferTooltip.js | 8 +-
.../budget/rollover/rollover-components.js | 20 +-
.../src/components/modals/EditField.js | 22 +-
.../components/modals/NordigenExternalMsg.js | 25 +-
.../components/modals/SelectLinkedAccounts.js | 37 ++-
.../src/components/modals/countries.js | 124 ++++-----
.../src/components/schedules/EditSchedule.js | 18 +-
.../src/components/settings/Experimental.js | 12 -
.../desktop-client/src/components/tooltips.js | 3 +-
.../src/components/util/GenericInput.js | 39 +--
.../src/hooks/useFeatureFlag.ts | 1 -
upcoming-release-notes/924.md | 6 +
yarn.lock | 238 +-----------------
23 files changed, 125 insertions(+), 971 deletions(-)
delete mode 100644 packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.js
delete mode 100644 packages/desktop-client/src/components/autocomplete/NewAccountAutocomplete.js
delete mode 100644 packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx
delete mode 100644 packages/desktop-client/src/components/autocomplete/NewPayeeAutocomplete.js
create mode 100644 upcoming-release-notes/924.md
diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
index 4aced71c8..f23d58eb8 100644
--- a/packages/desktop-client/package.json
+++ b/packages/desktop-client/package.json
@@ -50,7 +50,6 @@
"react-router-dom": "5.2.0",
"react-router-dom-v5-compat": "^6.4.1",
"react-scripts": "^5.0.1",
- "react-select": "^5.7.0",
"react-spring": "^8.0.27",
"react-virtualized-auto-sizer": "^1.0.2",
"redux": "^4.0.5",
diff --git a/packages/desktop-client/src/components/Modals.js b/packages/desktop-client/src/components/Modals.js
index 311e88be6..8b8d16860 100644
--- a/packages/desktop-client/src/components/Modals.js
+++ b/packages/desktop-client/src/components/Modals.js
@@ -41,7 +41,6 @@ function Modals({
budgetId,
actions,
}) {
- const isNewAutocompleteEnabled = useFeatureFlag('newAutocomplete');
const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
const syncServerStatus = useSyncServerStatus();
@@ -276,7 +275,6 @@ function Modals({
actions={actions}
name={options.name}
onSubmit={options.onSubmit}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
);
}}
@@ -288,7 +286,6 @@ function Modals({
modalProps={modalProps}
month={options.month}
actions={actions}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
isGoalTemplatesEnabled={isGoalTemplatesEnabled}
/>
</Route>
diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.js b/packages/desktop-client/src/components/accounts/TransactionsTable.js
index 81b92b7f0..f91361480 100644
--- a/packages/desktop-client/src/components/accounts/TransactionsTable.js
+++ b/packages/desktop-client/src/components/accounts/TransactionsTable.js
@@ -37,7 +37,6 @@ import {
titleFirst,
} from 'loot-core/src/shared/util';
-import useFeatureFlag from '../../hooks/useFeatureFlag';
import { useMergedRefs } from '../../hooks/useMergedRefs';
import usePrevious from '../../hooks/usePrevious';
import { useSelectedDispatch, useSelectedItems } from '../../hooks/useSelected';
@@ -48,12 +47,9 @@ import ArrowsSynchronize from '../../icons/v2/ArrowsSynchronize';
import CalendarIcon from '../../icons/v2/Calendar';
import Hyperlink2 from '../../icons/v2/Hyperlink2';
import { styles, colors } from '../../style';
-import LegacyAccountAutocomplete from '../autocomplete/AccountAutocomplete';
-import NewCategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
-import LegacyCategoryAutocomplete from '../autocomplete/CategorySelect';
-import NewAccountAutocomplete from '../autocomplete/NewAccountAutocomplete';
-import NewPayeeAutocomplete from '../autocomplete/NewPayeeAutocomplete';
-import LegacyPayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
+import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
+import CategoryAutocomplete from '../autocomplete/CategorySelect';
+import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
import { View, Text, Tooltip, Button } from '../common';
import { getStatusProps } from '../schedules/StatusBadge';
import DateSelect from '../select/DateSelect';
@@ -394,7 +390,6 @@ function PayeeCell({
onCreatePayee,
onManagePayees,
}) {
- const isNewAutocompleteEnabled = useFeatureFlag('newAutocomplete');
let isCreatingPayee = useRef(false);
// Filter out the account we're currently in as it is not a valid transfer
@@ -428,9 +423,6 @@ function PayeeCell({
shouldSaveFromKey,
inputStyle,
}) => {
- const PayeeAutocomplete = isNewAutocompleteEnabled
- ? NewPayeeAutocomplete
- : LegacyPayeeAutocomplete;
return (
<>
<PayeeAutocomplete
@@ -531,14 +523,6 @@ export const Transaction = React.memo(function Transaction(props) {
onToggleSplit,
} = props;
- const isNewAutocompleteEnabled = useFeatureFlag('newAutocomplete');
- const AccountAutocomplete = isNewAutocompleteEnabled
- ? NewAccountAutocomplete
- : LegacyAccountAutocomplete;
- const CategoryAutocomplete = isNewAutocompleteEnabled
- ? NewCategoryAutocomplete
- : LegacyCategoryAutocomplete;
-
let dispatchSelected = useSelectedDispatch();
let [prevShowZero, setPrevShowZero] = useState(showZeroInDeposit);
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.js b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.js
deleted file mode 100644
index d53c45639..000000000
--- a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { useMemo } from 'react';
-import { components as SelectComponents } from 'react-select';
-
-import Split from '../../icons/v0/Split';
-import { colors } from '../../style';
-import { View } from '../common';
-
-import Autocomplete from './NewAutocomplete';
-
-const SPLIT_TRANSACTION_KEY = 'split';
-
-export default function CategoryAutocomplete({
- value,
- categoryGroups,
- showSplitOption = false,
- multi = false,
- onSplit,
- ...props
-}) {
- const options = useMemo(() => {
- const suggestions = categoryGroups.map(group => ({
- label: group.name,
- options: group.categories.map(categ => ({
- value: categ.id,
- label: categ.name,
- })),
- }));
-
- if (showSplitOption) {
- suggestions.unshift({
- value: SPLIT_TRANSACTION_KEY,
- label: SPLIT_TRANSACTION_KEY,
- });
- }
-
- return suggestions;
- }, [categoryGroups, showSplitOption]);
-
- const allOptions = useMemo(
- () =>
- options.reduce(
- (carry, { options }) => [...carry, ...(options || [])],
- [],
- ),
- [options],
- );
-
- return (
- <Autocomplete
- options={options}
- value={
- multi
- ? allOptions.filter(item => value.includes(item.value))
- : allOptions.find(item => item.value === value)
- }
- isMulti={multi}
- components={{
- Option,
- }}
- {...props}
- />
- );
-}
-
-function Option(props) {
- if (props.value === SPLIT_TRANSACTION_KEY) {
- return (
- <SelectComponents.Option {...props}>
- <View
- style={{
- flexDirection: 'row',
- alignItems: 'center',
- fontSize: 11,
- color: colors.g8,
- marginLeft: -12,
- padding: '4px 0',
- }}
- data-testid="split-transaction-button"
- >
- <Split
- width={10}
- height={10}
- style={{ marginRight: 5, color: 'inherit' }}
- />
- Split Transaction
- </View>
- </SelectComponents.Option>
- );
- }
- return <SelectComponents.Option {...props} />;
-}
diff --git a/packages/desktop-client/src/components/autocomplete/NewAccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/NewAccountAutocomplete.js
deleted file mode 100644
index ef11d569c..000000000
--- a/packages/desktop-client/src/components/autocomplete/NewAccountAutocomplete.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { useCachedAccounts } from 'loot-core/src/client/data-hooks/accounts';
-
-import Autocomplete from './NewAutocomplete';
-
-export default function AccountAutocomplete({
- value,
- includeClosedAccounts = true,
- multi = false,
- ...props
-}) {
- const accounts = useCachedAccounts() || [];
-
- const availableAccounts = useMemo(
- () =>
- includeClosedAccounts ? accounts : accounts.filter(item => !item.closed),
- [accounts, includeClosedAccounts],
- );
-
- const options = useMemo(
- () => [
- {
- label: 'For Budget',
- options: availableAccounts
- .filter(item => !item.offbudget)
- .map(item => ({
- label: item.name,
- value: item.id,
- })),
- },
- {
- label: 'Off Budget',
- options: availableAccounts
- .filter(item => item.offbudget)
- .map(item => ({
- label: item.name,
- value: item.id,
- })),
- },
- ],
- [availableAccounts],
- );
-
- const allOptions = useMemo(
- () => options.reduce((carry, { options }) => [...carry, ...options], []),
- [options],
- );
-
- return (
- <Autocomplete
- options={options}
- value={
- multi
- ? allOptions.filter(item => value.includes(item.value))
- : allOptions.find(item => item.value === value)
- }
- isMulti={multi}
- {...props}
- />
- );
-}
diff --git a/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx
deleted file mode 100644
index 163817958..000000000
--- a/packages/desktop-client/src/components/autocomplete/NewAutocomplete.tsx
+++ /dev/null
@@ -1,166 +0,0 @@
-import React, { useState } from 'react';
-import Select from 'react-select';
-import type {
- GroupBase,
- Props as SelectProps,
- PropsValue,
- SingleValue,
- SelectInstance,
-} from 'react-select';
-
-import type { CreatableProps } from 'react-select/creatable';
-import CreatableSelect from 'react-select/creatable';
-
-import { NullComponent } from '../common';
-
-import styles from './autocomplete-styles';
-
-type OptionValue = {
- __isNew__?: boolean;
- label: string;
- value: string;
-};
-
-interface BaseAutocompleteProps {
- focused?: boolean;
- embedded?: boolean;
- onSelect: (value: string | string[]) => void;
- onCreateOption?: (value: string) => void;
- isCreatable?: boolean;
-}
-
-type SimpleAutocompleteProps = BaseAutocompleteProps & SelectProps<OptionValue>;
-type CreatableAutocompleteProps = BaseAutocompleteProps &
- CreatableProps<OptionValue, true, GroupBase<OptionValue>> & {
- isCreatable: true;
- };
-
-type AutocompleteProps = SimpleAutocompleteProps | CreatableAutocompleteProps;
-
-const isSingleValue = (
- value: PropsValue<OptionValue>,
-): value is SingleValue<OptionValue> => {
- return !Array.isArray(value);
-};
-
-const Autocomplete = React.forwardRef<SelectInstance, AutocompleteProps>(
- (
- {
- value,
- options = [],
- focused = false,
- embedded = false,
- onSelect,
- onCreateOption,
- isCreatable = false,
- components = {},
- ...props
- },
- ref,
- ) => {
- const [initialValue] = useState(value);
- const [isOpen, setIsOpen] = useState(focused || embedded);
-
- const [inputValue, setInputValue] = useState<
- AutocompleteProps['inputValue']
- >(() => (isSingleValue(value) ? value?.label : undefined));
- const [isInitialInputValue, setInitialInputValue] = useState(true);
-
- const onInputChange: AutocompleteProps['onInputChange'] = value => {
- setInputValue(value);
- setInitialInputValue(false);
- };
-
- const filterOption: AutocompleteProps['filterOption'] = (option, input) => {
- if (isInitialInputValue) {
- return true;
- }
-
- return (
- option.data?.__isNew__ ||
- option.label.toLowerCase().includes(input?.toLowerCase())
- );
- };
-
- const onChange: AutocompleteProps['onChange'] = (
- selected: PropsValue<OptionValue>,
- ) => {
- // Clear button clicked
- if (!selected) {
- onSelect(null);
- return;
- }
-
- // Create a new option
- if (isSingleValue(selected) && selected.__isNew__) {
- onCreateOption(selected.value);
- return;
- }
-
- // Close the menu when making a successful selection
- if (isSingleValue(selected)) {
- setIsOpen(false);
- }
-
- // Multi-select has multiple selections
- if (!isSingleValue(selected)) {
- onSelect(selected.map(option => option.value));
- return;
- }
-
- onSelect(selected.value);
- };
-
- const onKeyDown: AutocompleteProps['onKeyDown'] = event => {
- if (event.key === 'Escape') {
- onSelect(
- isSingleValue(initialValue)
- ? initialValue?.value
- : initialValue.map(val => val.value),
- );
- setIsOpen(false);
- return;
- }
-
- if (!isOpen) {
- setIsOpen(true);
- }
- };
-
- const Component = isCreatable ? CreatableSelect : Select;
-
- return (
- <Component
- ref={ref}
- value={value}
- menuIsOpen={isOpen}
- autoFocus={embedded}
- options={options}
- placeholder="(none)"
- captureMenuScroll={false}
- onChange={onChange}
- onKeyDown={onKeyDown}
- onCreateOption={onCreateOption}
- onBlur={() => setIsOpen(false)}
- onFocus={() => setIsOpen(true)}
- isClearable
- filterOption={filterOption}
- components={{
- IndicatorSeparator: NullComponent,
- DropdownIndicator: NullComponent,
- ...components,
- }}
- maxMenuHeight={200}
- styles={styles}
- data-embedded={embedded}
- menuPlacement="auto"
- menuPortalTarget={embedded ? undefined : document.body}
- inputValue={inputValue}
- onInputChange={onInputChange}
- {...props}
- />
- );
- },
-);
-
-export default Autocomplete;
diff --git a/packages/desktop-client/src/components/autocomplete/NewPayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/NewPayeeAutocomplete.js
deleted file mode 100644
index 6c4f31c8c..000000000
--- a/packages/desktop-client/src/components/autocomplete/NewPayeeAutocomplete.js
+++ /dev/null
@@ -1,165 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
-import { components as SelectComponents } from 'react-select';
-
-import { createPayee } from 'loot-core/src/client/actions/queries';
-import { getActivePayees } from 'loot-core/src/client/reducers/queries';
-
-import Add from '../../icons/v1/Add';
-import { colors } from '../../style';
-import { View } from '../common';
-
-import { AutocompleteFooter, AutocompleteFooterButton } from './Autocomplete';
-import Autocomplete from './NewAutocomplete';
-
-function getPayeeSuggestions(payees, focusTransferPayees, accounts) {
- let activePayees =
- (accounts ? getActivePayees(payees, accounts) : payees) || [];
-
- function formatOptions(options) {
- return options.map(row => ({
- value: row.id,
- label: row.name,
- }));
- }
-
- return [
- ...(focusTransferPayees
- ? []
- : [
- {
- label: 'Payees',
- options: formatOptions(activePayees.filter(p => !p.transfer_acct)),
- },
- ]),
- {
- label: 'Transfer To/From',
- options: formatOptions(activePayees.filter(p => p.transfer_acct)),
- },
- ];
-}
-
-function MenuListWithFooter(props) {
- return (
- <>
- <SelectComponents.MenuList {...props} />
- {props.selectProps.footer}
- </>
- );
-}
-
-export default function PayeeAutocomplete({
- payees,
- accounts,
- value,
- multi = false,
- showMakeTransfer = true,
- showManagePayees = false,
- defaultFocusTransferPayees = false,
- onSelect,
- onManagePayees,
- ...props
-}) {
- const [focusTransferPayees, setFocusTransferPayees] = useState(
- defaultFocusTransferPayees,
- );
- const options = useMemo(
- () => getPayeeSuggestions(payees, focusTransferPayees, accounts),
- [payees, focusTransferPayees, accounts],
- );
- const allOptions = useMemo(
- () => options.reduce((carry, { options }) => [...carry, ...options], []),
- [options],
- );
-
- const dispatch = useDispatch();
-
- return (
- <Autocomplete
- options={options}
- value={
- multi
- ? allOptions.filter(item => value.includes(item.value))
- : allOptions.find(item => item.value === value)
- }
- isValidNewOption={input => {
- if (focusTransferPayees || !input) {
- return false;
- }
-
- const lowercaseInput = input.toLowerCase();
- const hasExistingOption = allOptions.some(
- option => option.label.toLowerCase() === lowercaseInput,
- );
-
- return !hasExistingOption;
- }}
- isMulti={multi}
- onSelect={onSelect}
- onCreateOption={async selectedValue => {
- onSelect(await dispatch(createPayee(selectedValue)));
- }}
- createOptionPosition="first"
- formatCreateLabel={inputValue => (
- <View
- style={{
- display: 'block',
- color: colors.g8,
- fontSize: 11,
- fontWeight: 500,
- marginLeft: -10,
- padding: '4px 0',
- }}
- >
- <Add
- width={8}
- height={8}
- style={{
- color: colors.g8,
- marginRight: 5,
- display: 'inline-block',
- }}
- />
- Create Payee “{inputValue}â€
- </View>
- )}
- components={{
- MenuList: MenuListWithFooter,
- }}
- minMenuHeight={300}
- footer={
- <AutocompleteFooter show={showMakeTransfer || showManagePayees}>
- {showMakeTransfer && (
- <AutocompleteFooterButton
- title="Make Transfer"
- style={[
- showManagePayees && { marginBottom: 5 },
- focusTransferPayees && {
- backgroundColor: colors.y8,
- color: colors.g2,
- borderColor: colors.y8,
- },
- ]}
- hoveredStyle={
- focusTransferPayees && {
- backgroundColor: colors.y8,
- colors: colors.y2,
- }
- }
- onClick={() => {
- setFocusTransferPayees(!focusTransferPayees);
- }}
- />
- )}
- {showManagePayees && (
- <AutocompleteFooterButton
- title="Manage Payees"
- onClick={onManagePayees}
- />
- )}
- </AutocompleteFooter>
- }
- {...props}
- />
- );
-}
diff --git a/packages/desktop-client/src/components/budget/index.js b/packages/desktop-client/src/components/budget/index.js
index 6f7d896b5..ca479d03c 100644
--- a/packages/desktop-client/src/components/budget/index.js
+++ b/packages/desktop-client/src/components/budget/index.js
@@ -499,12 +499,10 @@ class Budget extends React.PureComponent {
const RolloverBudgetSummary = React.memo(props => {
const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
- const isNewAutocompleteEnabled = useFeatureFlag('newAutocomplete');
return (
<rollover.BudgetSummary
{...props}
isGoalTemplatesEnabled={isGoalTemplatesEnabled}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
);
});
diff --git a/packages/desktop-client/src/components/budget/misc.js b/packages/desktop-client/src/components/budget/misc.js
index afaade835..dba9a2418 100644
--- a/packages/desktop-client/src/components/budget/misc.js
+++ b/packages/desktop-client/src/components/budget/misc.js
@@ -1,5 +1,4 @@
import React, { useContext, useState, useMemo } from 'react';
-import { connect } from 'react-redux';
import * as monthUtils from 'loot-core/src/shared/months';
@@ -733,11 +732,7 @@ function ExpenseGroup({
);
}
-const ExpenseCategory = connect(state => ({
- isNewAutocompleteEnabled: state.prefs.local['flags.newAutocomplete'],
-}))(ExpenseCategoryInternal);
-
-function ExpenseCategoryInternal({
+function ExpenseCategory({
cat,
budgetArray,
editingCell,
@@ -751,7 +746,6 @@ function ExpenseCategoryInternal({
onShowActivity,
onDragChange,
onReorder,
- isNewAutocompleteEnabled,
}) {
let dragging = dragState && dragState.item === cat;
@@ -810,7 +804,6 @@ function ExpenseCategoryInternal({
onEdit: onEditMonth,
onBudgetAction,
onShowActivity,
- isNewAutocompleteEnabled,
}}
/>
</View>
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.js b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.js
index 69c0e1941..5edeb6f1f 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.js
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.js
@@ -134,13 +134,7 @@ function TotalsList({ prevMonthName, collapsed }) {
);
}
-function ToBudget({
- month,
- prevMonthName,
- collapsed,
- onBudgetAction,
- isNewAutocompleteEnabled,
-}) {
+function ToBudget({ month, prevMonthName, collapsed, onBudgetAction }) {
return (
<SheetValue binding={rolloverBudget.toBudget} initialValue={0}>
{node => {
@@ -237,7 +231,6 @@ function ToBudget({
category,
});
}}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
)}
</View>
@@ -250,11 +243,7 @@ function ToBudget({
);
}
-export function BudgetSummary({
- month,
- isGoalTemplatesEnabled,
- isNewAutocompleteEnabled,
-}) {
+export function BudgetSummary({ month, isGoalTemplatesEnabled }) {
let {
currentMonth,
summaryCollapsed: collapsed,
@@ -417,18 +406,13 @@ export function BudgetSummary({
prevMonthName={prevMonthName}
month={month}
onBudgetAction={onBudgetAction}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
</View>
) : (
<>
<TotalsList prevMonthName={prevMonthName} />
<View style={{ margin: '23px 0' }}>
- <ToBudget
- month={month}
- onBudgetAction={onBudgetAction}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
- />
+ <ToBudget month={month} onBudgetAction={onBudgetAction} />
</View>
</>
)}
diff --git a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.js b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.js
index 9f948f961..92bac1962 100644
--- a/packages/desktop-client/src/components/budget/rollover/TransferTooltip.js
+++ b/packages/desktop-client/src/components/budget/rollover/TransferTooltip.js
@@ -4,8 +4,7 @@ import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
import evalArithmetic from 'loot-core/src/shared/arithmetic';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
-import NewCategoryAutocomplete from '../../autocomplete/CategoryAutocomplete';
-import LegacyCategoryAutocomplete from '../../autocomplete/CategorySelect';
+import CategoryAutocomplete from '../../autocomplete/CategorySelect';
import { View, Button, Tooltip, InitialFocus, Input } from '../../common';
import NamespaceContext from '../../spreadsheet/NamespaceContext';
import { addToBeBudgetedGroup, CategoryGroupsContext } from '../util';
@@ -17,12 +16,7 @@ export default function TransferTooltip({
tooltipProps,
onSubmit,
onClose,
- isNewAutocompleteEnabled,
}) {
- const CategoryAutocomplete = isNewAutocompleteEnabled
- ? NewCategoryAutocomplete
- : LegacyCategoryAutocomplete;
-
let spreadsheet = useSpreadsheet();
let sheetName = useContext(NamespaceContext);
let categoryGroups = useContext(CategoryGroupsContext);
diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.js b/packages/desktop-client/src/components/budget/rollover/rollover-components.js
index 57496c283..dfdb7e815 100644
--- a/packages/desktop-client/src/components/budget/rollover/rollover-components.js
+++ b/packages/desktop-client/src/components/budget/rollover/rollover-components.js
@@ -5,8 +5,7 @@ import evalArithmetic from 'loot-core/src/shared/arithmetic';
import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
import { styles, colors } from '../../../style';
-import NewCategoryAutocomplete from '../../autocomplete/CategoryAutocomplete';
-import LegacyCategoryAutocomplete from '../../autocomplete/CategorySelect';
+import CategoryAutocomplete from '../../autocomplete/CategorySelect';
import {
View,
Text,
@@ -38,7 +37,6 @@ function CoverTooltip({
tooltipProps,
onSubmit,
onClose,
- isNewAutocompleteEnabled,
}) {
let categoryGroups = useContext(CategoryGroupsContext);
categoryGroups = addToBeBudgetedGroup(
@@ -53,10 +51,6 @@ function CoverTooltip({
}
}
- const CategoryAutocomplete = isNewAutocompleteEnabled
- ? NewCategoryAutocomplete
- : LegacyCategoryAutocomplete;
-
return (
<Tooltip
position="bottom-right"
@@ -108,13 +102,7 @@ function CoverTooltip({
);
}
-function BalanceTooltip({
- categoryId,
- tooltip,
- monthIndex,
- onBudgetAction,
- isNewAutocompleteEnabled,
-}) {
+function BalanceTooltip({ categoryId, tooltip, monthIndex, onBudgetAction }) {
let carryover = useSheetValue(rolloverBudget.catCarryover(categoryId));
let balance = useSheetValue(rolloverBudget.catBalance(categoryId));
let [menu, setMenu] = useState('menu');
@@ -172,7 +160,6 @@ function BalanceTooltip({
to: toCategory,
});
}}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
)}
@@ -186,7 +173,6 @@ function BalanceTooltip({
from: fromCategory,
});
}}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
)}
</>
@@ -306,7 +292,6 @@ export const ExpenseCategoryMonth = React.memo(function ExpenseCategoryMonth({
onEdit,
onBudgetAction,
onShowActivity,
- isNewAutocompleteEnabled,
}) {
let borderColor = colors.border;
let balanceTooltip = useTooltip();
@@ -400,7 +385,6 @@ export const ExpenseCategoryMonth = React.memo(function ExpenseCategoryMonth({
tooltip={balanceTooltip}
monthIndex={monthIndex}
onBudgetAction={onBudgetAction}
- isNewAutocompleteEnabled={isNewAutocompleteEnabled}
/>
)}
</Field>
diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
index 571c0c57f..5dcf73bf3 100644
--- a/packages/desktop-client/src/components/modals/EditField.js
+++ b/packages/desktop-client/src/components/modals/EditField.js
@@ -8,12 +8,9 @@ import { currentDay, dayFromDate } from 'loot-core/src/shared/months';
import { amountToInteger } from 'loot-core/src/shared/util';
import { colors } from '../../style';
-import LegacyAccountAutocomplete from '../autocomplete/AccountAutocomplete';
-import NewCategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
-import LegacyCategoryAutocomplete from '../autocomplete/CategorySelect';
-import NewAccountAutocomplete from '../autocomplete/NewAccountAutocomplete';
-import NewPayeeAutocomplete from '../autocomplete/NewPayeeAutocomplete';
-import LegacyPayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
+import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
+import CategoryAutocomplete from '../autocomplete/CategorySelect';
+import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
import { View, Modal, Input } from '../common';
import { SectionLabel } from '../forms';
import DateSelect from '../select/DateSelect';
@@ -28,7 +25,6 @@ function EditField({
onSubmit,
dateFormat,
createPayee,
- isNewAutocompleteEnabled,
}) {
function onSelect(value) {
if (value != null) {
@@ -49,18 +45,6 @@ function EditField({
containerProps: { style: { height: 275 } },
};
- const PayeeAutocomplete = isNewAutocompleteEnabled
- ? NewPayeeAutocomplete
- : LegacyPayeeAutocomplete;
-
- const AccountAutocomplete = isNewAutocompleteEnabled
- ? NewAccountAutocomplete
- : LegacyAccountAutocomplete;
-
- const CategoryAutocomplete = isNewAutocompleteEnabled
- ? NewCategoryAutocomplete
- : LegacyCategoryAutocomplete;
-
switch (name) {
case 'date': {
let today = currentDay();
diff --git a/packages/desktop-client/src/components/modals/NordigenExternalMsg.js b/packages/desktop-client/src/components/modals/NordigenExternalMsg.js
index d4a962db8..5d01dad6e 100644
--- a/packages/desktop-client/src/components/modals/NordigenExternalMsg.js
+++ b/packages/desktop-client/src/components/modals/NordigenExternalMsg.js
@@ -5,7 +5,7 @@ import { send } from 'loot-core/src/platform/client/fetch';
import AnimatedLoading from '../../icons/AnimatedLoading';
import { colors } from '../../style';
import { Error, Warning } from '../alerts';
-import Autocomplete from '../autocomplete/NewAutocomplete';
+import Autocomplete from '../autocomplete/Autocomplete';
import { View, Modal, Button, P } from '../common';
import { FormField, FormLabel } from '../forms';
@@ -27,7 +27,7 @@ function useAvailableBanks(country) {
const results = await send('nordigen-get-banks', country);
- setBanks(results.map(bank => ({ value: bank.id, label: bank.name })));
+ setBanks(results);
setIsLoading(false);
}
@@ -124,12 +124,13 @@ export default function NordigenExternalMsg({
<FormField>
<FormLabel title="Choose your country:" htmlFor="country-field" />
<Autocomplete
+ strict
+ highlightFirst
disabled={isConfigurationLoading}
- options={COUNTRY_OPTIONS}
+ suggestions={COUNTRY_OPTIONS}
onSelect={setCountry}
- value={COUNTRY_OPTIONS.find(({ value }) => value === country)}
- inputId="country-field"
- placeholder="(please select)"
+ value={country}
+ inputProps={{ id: 'country-field', placeholder: '(please select)' }}
/>
</FormField>
@@ -141,11 +142,15 @@ export default function NordigenExternalMsg({
<FormLabel title="Choose your bank:" htmlFor="bank-field" />
<Autocomplete
focused
- options={bankOptions}
+ strict
+ highlightFirst
+ suggestions={bankOptions}
onSelect={setInstitutionId}
- value={bankOptions.find(({ value }) => value === institutionId)}
- inputId="bank-field"
- placeholder="(please select)"
+ value={institutionId}
+ inputProps={{
+ id: 'bank-field',
+ placeholder: '(please select)',
+ }}
/>
</FormField>
))}
diff --git a/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js b/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
index 1be08bb16..db7e13c19 100644
--- a/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
+++ b/packages/desktop-client/src/components/modals/SelectLinkedAccounts.js
@@ -1,11 +1,11 @@
import React, { useState } from 'react';
import { colors } from '../../style';
-import Autocomplete from '../autocomplete/NewAutocomplete';
+import Autocomplete from '../autocomplete/Autocomplete';
import { View, Modal, Button, Text } from '../common';
import { TableHeader, Table, Row, Field } from '../table';
-const addAccountOption = { value: 'new', label: 'Create new account' };
+const addAccountOption = { id: 'new', name: 'Create new account' };
export default function SelectLinkedAccounts({
modalProps,
@@ -49,7 +49,7 @@ export default function SelectLinkedAccounts({
actions.linkAccount(
requisitionId,
externalAccount,
- chosenLocalAccountId !== addAccountOption.value
+ chosenLocalAccountId !== addAccountOption.id
? chosenLocalAccountId
: undefined,
);
@@ -108,11 +108,8 @@ export default function SelectLinkedAccounts({
<TableRow
externalAccount={item}
chosenAccount={
- chosenAccounts[item.account_id] === addAccountOption.value
- ? {
- id: addAccountOption.value,
- name: addAccountOption.label,
- }
+ chosenAccounts[item.account_id] === addAccountOption.id
+ ? addAccountOption
: localAccounts.find(
acc => chosenAccounts[item.account_id] === acc.id,
)
@@ -154,17 +151,9 @@ function TableRow({
}) {
const [focusedField, setFocusedField] = useState(null);
- const chosenAccountOption = chosenAccount && {
- value: chosenAccount.id,
- label: chosenAccount.name,
- };
-
const availableAccountOptions = [
- ...unlinkedAccounts.map(acct => ({
- value: acct.id,
- label: acct.name,
- })),
- chosenAccount?.id !== addAccountOption.value && chosenAccountOption,
+ ...unlinkedAccounts,
+ chosenAccount?.id !== addAccountOption.id && chosenAccount,
addAccountOption,
].filter(Boolean);
@@ -178,13 +167,17 @@ function TableRow({
>
{focusedField === 'account' ? (
<Autocomplete
- autoFocus
- options={availableAccountOptions}
+ focused
+ strict
+ highlightFirst
+ suggestions={availableAccountOptions}
onSelect={value => {
onSetLinkedAccount(externalAccount, value);
}}
- onBlur={() => setFocusedField(null)}
- value={chosenAccountOption}
+ inputProps={{
+ onBlur: () => setFocusedField(null),
+ }}
+ value={chosenAccount?.id}
/>
) : (
chosenAccount?.name
diff --git a/packages/desktop-client/src/components/modals/countries.js b/packages/desktop-client/src/components/modals/countries.js
index 9277ec95c..91de29306 100644
--- a/packages/desktop-client/src/components/modals/countries.js
+++ b/packages/desktop-client/src/components/modals/countries.js
@@ -1,126 +1,126 @@
export const COUNTRY_OPTIONS = [
{
- value: 'AT',
- label: 'Austria',
+ id: 'AT',
+ name: 'Austria',
},
{
- value: 'BE',
- label: 'Belgium',
+ id: 'BE',
+ name: 'Belgium',
},
{
- value: 'BG',
- label: 'Bulgaria',
+ id: 'BG',
+ name: 'Bulgaria',
},
{
- value: 'HR',
- label: 'Croatia',
+ id: 'HR',
+ name: 'Croatia',
},
{
- value: 'CY',
- label: 'Cyprus',
+ id: 'CY',
+ name: 'Cyprus',
},
{
- value: 'CZ',
- label: 'Czechia',
+ id: 'CZ',
+ name: 'Czechia',
},
{
- value: 'DK',
- label: 'Denmark',
+ id: 'DK',
+ name: 'Denmark',
},
{
- value: 'EE',
- label: 'Estonia',
+ id: 'EE',
+ name: 'Estonia',
},
{
- value: 'FI',
- label: 'Finland',
+ id: 'FI',
+ name: 'Finland',
},
{
- value: 'FR',
- label: 'France',
+ id: 'FR',
+ name: 'France',
},
{
- value: 'DE',
- label: 'Germany',
+ id: 'DE',
+ name: 'Germany',
},
{
- value: 'GR',
- label: 'Greece',
+ id: 'GR',
+ name: 'Greece',
},
{
- value: 'HU',
- label: 'Hungary',
+ id: 'HU',
+ name: 'Hungary',
},
{
- value: 'IS',
- label: 'Iceland',
+ id: 'IS',
+ name: 'Iceland',
},
{
- value: 'IE',
- label: 'Ireland',
+ id: 'IE',
+ name: 'Ireland',
},
{
- value: 'IT',
- label: 'Italy',
+ id: 'IT',
+ name: 'Italy',
},
{
- value: 'LV',
- label: 'Latvia',
+ id: 'LV',
+ name: 'Latvia',
},
{
- value: 'LI',
- label: 'Liechtenstein',
+ id: 'LI',
+ name: 'Liechtenstein',
},
{
- value: 'LT',
- label: 'Lithuania',
+ id: 'LT',
+ name: 'Lithuania',
},
{
- value: 'LU',
- label: 'Luxembourg',
+ id: 'LU',
+ name: 'Luxembourg',
},
{
- value: 'MT',
- label: 'Malta',
+ id: 'MT',
+ name: 'Malta',
},
{
- value: 'NL',
- label: 'Netherlands',
+ id: 'NL',
+ name: 'Netherlands',
},
{
- value: 'NO',
- label: 'Norway',
+ id: 'NO',
+ name: 'Norway',
},
{
- value: 'PL',
- label: 'Poland',
+ id: 'PL',
+ name: 'Poland',
},
{
- value: 'PT',
- label: 'Portugal',
+ id: 'PT',
+ name: 'Portugal',
},
{
- value: 'RO',
- label: 'Romania',
+ id: 'RO',
+ name: 'Romania',
},
{
- value: 'SK',
- label: 'Slovakia',
+ id: 'SK',
+ name: 'Slovakia',
},
{
- value: 'SI',
- label: 'Slovenia',
+ id: 'SI',
+ name: 'Slovenia',
},
{
- value: 'ES',
- label: 'Spain',
+ id: 'ES',
+ name: 'Spain',
},
{
- value: 'SE',
- label: 'Sweden',
+ id: 'SE',
+ name: 'Sweden',
},
{
- value: 'GB',
- label: 'United Kingdom',
+ id: 'GB',
+ name: 'United Kingdom',
},
];
diff --git a/packages/desktop-client/src/components/schedules/EditSchedule.js b/packages/desktop-client/src/components/schedules/EditSchedule.js
index 8d5361dc6..c795d2994 100644
--- a/packages/desktop-client/src/components/schedules/EditSchedule.js
+++ b/packages/desktop-client/src/components/schedules/EditSchedule.js
@@ -9,14 +9,11 @@ import { send, sendCatch } from 'loot-core/src/platform/client/fetch';
import * as monthUtils from 'loot-core/src/shared/months';
import { extractScheduleConds } from 'loot-core/src/shared/schedules';
-import useFeatureFlag from '../../hooks/useFeatureFlag';
import useSelected, { SelectedProvider } from '../../hooks/useSelected';
import { colors } from '../../style';
import SimpleTransactionsTable from '../accounts/SimpleTransactionsTable';
-import LegacyAccountAutocomplete from '../autocomplete/AccountAutocomplete';
-import NewAccountAutocomplete from '../autocomplete/NewAccountAutocomplete';
-import NewPayeeAutocomplete from '../autocomplete/NewPayeeAutocomplete';
-import LegacyPayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
+import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
+import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
import { Stack, View, Text, Button } from '../common';
import { FormField, FormLabel, Checkbox } from '../forms';
import { OpSelect } from '../modals/EditRule';
@@ -81,8 +78,6 @@ function updateScheduleConditions(schedule, fields) {
}
export default function ScheduleDetails() {
- const isNewAutocompleteEnabled = useFeatureFlag('newAutocomplete');
-
let { id, initialFields } = useParams();
let adding = id == null;
let payees = useCachedPayees({ idKey: true });
@@ -435,13 +430,6 @@ export default function ScheduleDetails() {
// This is derived from the date
let repeats = state.fields.date ? !!state.fields.date.frequency : false;
- const PayeeAutocomplete = isNewAutocompleteEnabled
- ? NewPayeeAutocomplete
- : LegacyPayeeAutocomplete;
- const AccountAutocomplete = isNewAutocompleteEnabled
- ? NewAccountAutocomplete
- : LegacyAccountAutocomplete;
-
return (
<Page
title={payee ? `Schedule: ${payee.name}` : 'Schedule'}
@@ -466,7 +454,6 @@ export default function ScheduleDetails() {
<FormLabel title="Payee" htmlFor="payee-field" />
<PayeeAutocomplete
value={state.fields.payee}
- inputId="payee-field"
inputProps={{ id: 'payee-field', placeholder: '(none)' }}
onSelect={id =>
dispatch({ type: 'set-field', field: 'payee', value: id })
@@ -480,7 +467,6 @@ export default function ScheduleDetails() {
<AccountAutocomplete
includeClosedAccounts={false}
value={state.fields.account}
- inputId="account-field"
inputProps={{ id: 'account-field', placeholder: '(none)' }}
onSelect={id =>
dispatch({ type: 'set-field', field: 'account', value: id })
diff --git a/packages/desktop-client/src/components/settings/Experimental.js b/packages/desktop-client/src/components/settings/Experimental.js
index 0be483712..7328c9164 100644
--- a/packages/desktop-client/src/components/settings/Experimental.js
+++ b/packages/desktop-client/src/components/settings/Experimental.js
@@ -63,18 +63,6 @@ export default function ExperimentalFeatures({ prefs, savePrefs }) {
/>{' '}
<View>Goal templates</View>
</label>
- <label style={{ display: 'flex' }}>
- <Checkbox
- id="new-autocomplete-flag"
- checked={flags.newAutocomplete}
- onChange={() => {
- savePrefs({
- 'flags.newAutocomplete': !flags.newAutocomplete,
- });
- }}
- />{' '}
- <View>New autocomplete component</View>
- </label>
</View>
) : (
<Link
diff --git a/packages/desktop-client/src/components/tooltips.js b/packages/desktop-client/src/components/tooltips.js
index 6c63cba6f..0b431b8bc 100644
--- a/packages/desktop-client/src/components/tooltips.js
+++ b/packages/desktop-client/src/components/tooltips.js
@@ -45,8 +45,7 @@ export class Tooltip extends React.Component {
// kind of things can be click that shouldn't close a tooltip?
if (
node.dataset.testid === 'tooltip' ||
- node.dataset.reachPopover != null ||
- node.id.startsWith('react-select')
+ node.dataset.reachPopover != null
) {
break;
}
diff --git a/packages/desktop-client/src/components/util/GenericInput.js b/packages/desktop-client/src/components/util/GenericInput.js
index f0f486631..4978cb76f 100644
--- a/packages/desktop-client/src/components/util/GenericInput.js
+++ b/packages/desktop-client/src/components/util/GenericInput.js
@@ -3,15 +3,10 @@ import { useSelector } from 'react-redux';
import { getMonthYearFormat } from 'loot-core/src/shared/months';
-import useFeatureFlag from '../../hooks/useFeatureFlag';
-import LegacyAccountAutocomplete from '../autocomplete/AccountAutocomplete';
-import LegacyAutocomplete from '../autocomplete/Autocomplete';
-import NewCategoryAutocomplete from '../autocomplete/CategoryAutocomplete';
-import LegacyCategoryAutocomplete from '../autocomplete/CategorySelect';
-import NewAccountAutocomplete from '../autocomplete/NewAccountAutocomplete';
-import NewAutocomplete from '../autocomplete/NewAutocomplete';
-import NewPayeeAutocomplete from '../autocomplete/NewPayeeAutocomplete';
-import LegacyPayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
+import AccountAutocomplete from '../autocomplete/AccountAutocomplete';
+import Autocomplete from '../autocomplete/Autocomplete';
+import CategoryAutocomplete from '../autocomplete/CategorySelect';
+import PayeeAutocomplete from '../autocomplete/PayeeAutocomplete';
import { View, Input } from '../common';
import { Checkbox } from '../forms';
import DateSelect from '../select/DateSelect';
@@ -27,17 +22,6 @@ export default function GenericInput({
style,
onChange,
}) {
- const isNewAutocompleteEnabled = useFeatureFlag('newAutocomplete');
- const PayeeAutocomplete = isNewAutocompleteEnabled
- ? NewPayeeAutocomplete
- : LegacyPayeeAutocomplete;
- const AccountAutocomplete = isNewAutocompleteEnabled
- ? NewAccountAutocomplete
- : LegacyAccountAutocomplete;
- const CategoryAutocomplete = isNewAutocompleteEnabled
- ? NewCategoryAutocomplete
- : LegacyCategoryAutocomplete;
-
let { payees, accounts, categoryGroups, dateFormat } = useSelector(state => {
return {
payees: state.queries.payees,
@@ -179,19 +163,8 @@ export default function GenericInput({
default:
if (multi) {
- content = isNewAutocompleteEnabled ? (
- <NewAutocomplete
- ref={inputRef}
- isMulti
- isCreatable
- formatCreateLabel={inputValue => `Add “${inputValue}â€`}
- noOptionsMessage={() => null}
- value={value.map(v => ({ value: v, label: v }))}
- onSelect={onChange}
- onCreateOption={selected => onChange([...value, selected])}
- />
- ) : (
- <LegacyAutocomplete
+ content = (
+ <Autocomplete
multi={true}
suggestions={[]}
value={value}
diff --git a/packages/desktop-client/src/hooks/useFeatureFlag.ts b/packages/desktop-client/src/hooks/useFeatureFlag.ts
index c379d5016..0d55d746a 100644
--- a/packages/desktop-client/src/hooks/useFeatureFlag.ts
+++ b/packages/desktop-client/src/hooks/useFeatureFlag.ts
@@ -1,7 +1,6 @@
import { useSelector } from 'react-redux';
const DEFAULT_FEATURE_FLAG_STATE: Record<string, boolean> = {
- newAutocomplete: false,
syncAccount: false,
goalTemplatesEnabled: false,
};
diff --git a/upcoming-release-notes/924.md b/upcoming-release-notes/924.md
new file mode 100644
index 000000000..c0ac7aabb
--- /dev/null
+++ b/upcoming-release-notes/924.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Remove `react-select` and the new autocomplete
diff --git a/yarn.lock b/yarn.lock
index 1dbedaa88..054995e0d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -99,7 +99,6 @@ __metadata:
react-router-dom: 5.2.0
react-router-dom-v5-compat: ^6.4.1
react-scripts: ^5.0.1
- react-select: ^5.7.0
react-spring: ^8.0.27
react-virtualized-auto-sizer: ^1.0.2
redux: ^4.0.5
@@ -344,7 +343,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.18.6":
+"@babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.18.6":
version: 7.18.6
resolution: "@babel/helper-module-imports@npm:7.18.6"
dependencies:
@@ -1594,7 +1593,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2":
version: 7.21.0
resolution: "@babel/runtime@npm:7.21.0"
dependencies:
@@ -1878,123 +1877,6 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/babel-plugin@npm:^11.10.6":
- version: 11.10.6
- resolution: "@emotion/babel-plugin@npm:11.10.6"
- dependencies:
- "@babel/helper-module-imports": ^7.16.7
- "@babel/runtime": ^7.18.3
- "@emotion/hash": ^0.9.0
- "@emotion/memoize": ^0.8.0
- "@emotion/serialize": ^1.1.1
- babel-plugin-macros: ^3.1.0
- convert-source-map: ^1.5.0
- escape-string-regexp: ^4.0.0
- find-root: ^1.1.0
- source-map: ^0.5.7
- stylis: 4.1.3
- checksum: 3eed138932e8edf2598352e69ad949b9db3051a4d6fcff190dacbac9aa838d7ef708b9f3e6c48660625d9311dae82d73477ae4e7a31139feef5eb001a5528421
- languageName: node
- linkType: hard
-
-"@emotion/cache@npm:^11.10.5, @emotion/cache@npm:^11.4.0":
- version: 11.10.5
- resolution: "@emotion/cache@npm:11.10.5"
- dependencies:
- "@emotion/memoize": ^0.8.0
- "@emotion/sheet": ^1.2.1
- "@emotion/utils": ^1.2.0
- "@emotion/weak-memoize": ^0.3.0
- stylis: 4.1.3
- checksum: 1dd2d9af2d3ecbd3d4469ecdf91a335eef6034c851b57a474471b2d2280613eb35bbed98c0368cc4625f188619fbdaf04cf07e8107aaffce94b2178444c0fe7b
- languageName: node
- linkType: hard
-
-"@emotion/hash@npm:^0.9.0":
- version: 0.9.0
- resolution: "@emotion/hash@npm:0.9.0"
- checksum: b63428f7c8186607acdca5d003700cecf0ded519d0b5c5cc3b3154eafcad6ff433f8361bd2bac8882715b557e6f06945694aeb6ba8b25c6095d7a88570e2e0bb
- languageName: node
- linkType: hard
-
-"@emotion/memoize@npm:^0.8.0":
- version: 0.8.0
- resolution: "@emotion/memoize@npm:0.8.0"
- checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928
- languageName: node
- linkType: hard
-
-"@emotion/react@npm:^11.8.1":
- version: 11.10.6
- resolution: "@emotion/react@npm:11.10.6"
- dependencies:
- "@babel/runtime": ^7.18.3
- "@emotion/babel-plugin": ^11.10.6
- "@emotion/cache": ^11.10.5
- "@emotion/serialize": ^1.1.1
- "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
- "@emotion/utils": ^1.2.0
- "@emotion/weak-memoize": ^0.3.0
- hoist-non-react-statics: ^3.3.1
- peerDependencies:
- react: ">=16.8.0"
- peerDependenciesMeta:
- "@types/react":
- optional: true
- checksum: 4762042e39126ffaffe76052dc65c9bb0ba6b8893013687ba3cc13ed4dd834c31597f1230684c3c078e90aecc13ab6cd0e3cde0dec8b7761affd2571f4d80019
- languageName: node
- linkType: hard
-
-"@emotion/serialize@npm:^1.1.1":
- version: 1.1.1
- resolution: "@emotion/serialize@npm:1.1.1"
- dependencies:
- "@emotion/hash": ^0.9.0
- "@emotion/memoize": ^0.8.0
- "@emotion/unitless": ^0.8.0
- "@emotion/utils": ^1.2.0
- csstype: ^3.0.2
- checksum: 24cfd5b16e6f2335c032ca33804a876e0442aaf8f9c94d269d23735ebd194fb1ed142542dd92191a3e6ef8bad5bd560dfc5aaf363a1b70954726dbd4dd93085c
- languageName: node
- linkType: hard
-
-"@emotion/sheet@npm:^1.2.1":
- version: 1.2.1
- resolution: "@emotion/sheet@npm:1.2.1"
- checksum: ce78763588ea522438156344d9f592203e2da582d8d67b32e1b0b98eaba26994c6c270f8c7ad46442fc9c0a9f048685d819cd73ca87e544520fd06f0e24a1562
- languageName: node
- linkType: hard
-
-"@emotion/unitless@npm:^0.8.0":
- version: 0.8.0
- resolution: "@emotion/unitless@npm:0.8.0"
- checksum: 176141117ed23c0eb6e53a054a69c63e17ae532ec4210907a20b2208f91771821835f1c63dd2ec63e30e22fcc984026d7f933773ee6526dd038e0850919fae7a
- languageName: node
- linkType: hard
-
-"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0":
- version: 1.0.0
- resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.0"
- peerDependencies:
- react: ">=16.8.0"
- checksum: 4f06a3b48258c832aa8022a262572061a31ff078d377e9164cccc99951309d70f4466e774fe704461b2f8715007a82ed625a54a5c7a127c89017d3ce3187d4f1
- languageName: node
- linkType: hard
-
-"@emotion/utils@npm:^1.2.0":
- version: 1.2.0
- resolution: "@emotion/utils@npm:1.2.0"
- checksum: 55457a49ddd4db6a014ea0454dc09eaa23eedfb837095c8ff90470cb26a303f7ceb5fcc1e2190ef64683e64cfd33d3ba3ca3109cd87d12bc9e379e4195c9a4dd
- languageName: node
- linkType: hard
-
-"@emotion/weak-memoize@npm:^0.3.0":
- version: 0.3.0
- resolution: "@emotion/weak-memoize@npm:0.3.0"
- checksum: f43ef4c8b7de70d9fa5eb3105921724651e4188e895beb71f0c5919dc899a7b8743e1fdd99d38b9092dd5722c7be2312ebb47fbdad0c4e38bea58f6df5885cc0
- languageName: node
- linkType: hard
-
"@eslint-community/eslint-utils@npm:^4.2.0":
version: 4.4.0
resolution: "@eslint-community/eslint-utils@npm:4.4.0"
@@ -2037,22 +1919,6 @@ __metadata:
languageName: node
linkType: hard
-"@floating-ui/core@npm:^1.2.3":
- version: 1.2.4
- resolution: "@floating-ui/core@npm:1.2.4"
- checksum: 1c163ea1804e2b0a28fda6e32efed0e242d0db8081fd24aab9d1cbb100f94a558709231c483bf74bf09a9204ea6e7845813d43b5322ceb6ee63285308f68f65b
- languageName: node
- linkType: hard
-
-"@floating-ui/dom@npm:^1.0.1":
- version: 1.2.4
- resolution: "@floating-ui/dom@npm:1.2.4"
- dependencies:
- "@floating-ui/core": ^1.2.3
- checksum: 5c24a2e8f04e436390646c8a4431c6cb79e03711fbb0f818b87d613a6be8971bc560a830b702aaa51a0ebc4d0c45deb06f3140c14125dc1ac770365bf66ee903
- languageName: node
- linkType: hard
-
"@formatjs/ecma402-abstract@npm:1.12.0":
version: 1.12.0
resolution: "@formatjs/ecma402-abstract@npm:1.12.0"
@@ -4144,15 +4010,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-transition-group@npm:^4.4.0":
- version: 4.4.5
- resolution: "@types/react-transition-group@npm:4.4.5"
- dependencies:
- "@types/react": "*"
- checksum: 265f1c74061556708ffe8d15559e35c60d6c11478c9950d3735575d2c116ca69f461d85effa06d73a613eb8b73c84fd32682feb57cf7c5f9e4284021dbca25b0
- languageName: node
- linkType: hard
-
"@types/react@npm:*":
version: 17.0.43
resolution: "@types/react@npm:17.0.43"
@@ -7084,13 +6941,6 @@ __metadata:
languageName: node
linkType: hard
-"convert-source-map@npm:^1.5.0":
- version: 1.9.0
- resolution: "convert-source-map@npm:1.9.0"
- checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
- languageName: node
- linkType: hard
-
"convert-source-map@npm:^2.0.0":
version: 2.0.0
resolution: "convert-source-map@npm:2.0.0"
@@ -8301,16 +8151,6 @@ __metadata:
languageName: node
linkType: hard
-"dom-helpers@npm:^5.0.1":
- version: 5.2.1
- resolution: "dom-helpers@npm:5.2.1"
- dependencies:
- "@babel/runtime": ^7.8.7
- csstype: ^3.0.2
- checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
- languageName: node
- linkType: hard
-
"dom-serializer@npm:0":
version: 0.2.2
resolution: "dom-serializer@npm:0.2.2"
@@ -9901,13 +9741,6 @@ __metadata:
languageName: node
linkType: hard
-"find-root@npm:^1.1.0":
- version: 1.1.0
- resolution: "find-root@npm:1.1.0"
- checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf
- languageName: node
- linkType: hard
-
"find-up@npm:^2.0.0":
version: 2.1.0
resolution: "find-up@npm:2.1.0"
@@ -10941,7 +10774,7 @@ __metadata:
languageName: node
linkType: hard
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0":
version: 3.3.2
resolution: "hoist-non-react-statics@npm:3.3.2"
dependencies:
@@ -13890,13 +13723,6 @@ __metadata:
languageName: node
linkType: hard
-"memoize-one@npm:^6.0.0":
- version: 6.0.0
- resolution: "memoize-one@npm:6.0.0"
- checksum: f185ea69f7cceae5d1cb596266dcffccf545e8e7b4106ec6aa93b71ab9d16460dd118ac8b12982c55f6d6322fcc1485de139df07eacffaae94888b9b3ad7675f
- languageName: node
- linkType: hard
-
"memory-fs@npm:^0.4.1":
version: 0.4.1
resolution: "memory-fs@npm:0.4.1"
@@ -16720,7 +16546,7 @@ __metadata:
languageName: node
linkType: hard
-"prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@@ -17293,26 +17119,6 @@ __metadata:
languageName: node
linkType: hard
-"react-select@npm:^5.7.0":
- version: 5.7.0
- resolution: "react-select@npm:5.7.0"
- dependencies:
- "@babel/runtime": ^7.12.0
- "@emotion/cache": ^11.4.0
- "@emotion/react": ^11.8.1
- "@floating-ui/dom": ^1.0.1
- "@types/react-transition-group": ^4.4.0
- memoize-one: ^6.0.0
- prop-types: ^15.6.0
- react-transition-group: ^4.3.0
- use-isomorphic-layout-effect: ^1.1.2
- peerDependencies:
- react: ^16.8.0 || ^17.0.0 || ^18.0.0
- react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
- checksum: 3d29f7bb6dd66ad55396d820f05da6112f1d21b67526422a8ff5aa6cd47c783804c1b73042ac2949ba0871056a3dc68c06a73a8281abb61571e475d72bbd80dc
- languageName: node
- linkType: hard
-
"react-spring@npm:^8.0.27":
version: 8.0.27
resolution: "react-spring@npm:8.0.27"
@@ -17326,21 +17132,6 @@ __metadata:
languageName: node
linkType: hard
-"react-transition-group@npm:^4.3.0":
- version: 4.4.5
- resolution: "react-transition-group@npm:4.4.5"
- dependencies:
- "@babel/runtime": ^7.5.5
- dom-helpers: ^5.0.1
- loose-envify: ^1.4.0
- prop-types: ^15.6.2
- peerDependencies:
- react: ">=16.6.0"
- react-dom: ">=16.6.0"
- checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1
- languageName: node
- linkType: hard
-
"react-virtualized-auto-sizer@npm:^1.0.2":
version: 1.0.6
resolution: "react-virtualized-auto-sizer@npm:1.0.6"
@@ -18651,7 +18442,7 @@ __metadata:
languageName: node
linkType: hard
-"source-map@npm:^0.5.0, source-map@npm:^0.5.6, source-map@npm:^0.5.7":
+"source-map@npm:^0.5.0, source-map@npm:^0.5.6":
version: 0.5.7
resolution: "source-map@npm:0.5.7"
checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d
@@ -19161,13 +18952,6 @@ __metadata:
languageName: node
linkType: hard
-"stylis@npm:4.1.3":
- version: 4.1.3
- resolution: "stylis@npm:4.1.3"
- checksum: d04dbffcb9bf2c5ca8d8dc09534203c75df3bf711d33973ea22038a99cc475412a350b661ebd99cbc01daa50d7eedcf0d130d121800eb7318759a197023442a6
- languageName: node
- linkType: hard
-
"sumchecker@npm:^3.0.1":
version: 3.0.1
resolution: "sumchecker@npm:3.0.1"
@@ -20253,18 +20037,6 @@ __metadata:
languageName: node
linkType: hard
-"use-isomorphic-layout-effect@npm:^1.1.2":
- version: 1.1.2
- resolution: "use-isomorphic-layout-effect@npm:1.1.2"
- peerDependencies:
- react: ^16.8.0 || ^17.0.0 || ^18.0.0
- peerDependenciesMeta:
- "@types/react":
- optional: true
- checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb
- languageName: node
- linkType: hard
-
"use@npm:^3.1.0":
version: 3.1.1
resolution: "use@npm:3.1.1"
--
GitLab