SONAR-16746 Upgrade react-select major frontend dependency

- Remove package from core-extension-license as it's not used in it
- Update related components and tests
- Add some CSS helper classes
- Remove some code smells
- Update integration testing ReactSelect JAVA class definition

---------

Co-authored-by: Philippe Perrin <philippe.perrin@sonarsource.com>

diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json
index 6d8fdaecb6a618560ad842c79e77fb290326dd85..62a5f9addda18c5ecf1a61a7cc313a28f0f67644 100644 (file)
--- a/server/sonar-web/package.json
+++ b/server/sonar-web/package.json
@@ -30,7 +30,7 @@
     "react-intl": "3.12.1",
     "react-modal": "3.16.1",
     "react-router-dom": "6.7.0",
-    "react-select": "4.3.1",
+    "react-select": "5.7.0",
     "react-virtualized": "9.22.3",
     "regenerator-runtime": "0.13.11",
     "valid-url": "1.0.9"
@@ -61,7 +61,6 @@
     "@types/react-dom": "16.9.17",
     "@types/react-helmet": "6.1.6",
     "@types/react-modal": "3.13.1",
-    "@types/react-select": "4.0.18",
     "@types/react-virtualized": "9.21.21",
     "@types/valid-url": "1.0.3",
     "@typescript-eslint/eslint-plugin": "5.49.0",

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/RegulatoryReport.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/RegulatoryReport.tsx
index 5ad1bdb149343ed5c1ed219776b5e7da42ab3bef..3da859b87b96548f39357e92fa081d71a806d99b 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/RegulatoryReport.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/RegulatoryReport.tsx
@@ -18,20 +18,20 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import classNames from 'classnames';
+import { orderBy } from 'lodash';
 import * as React from 'react';
-import { BranchLike } from '../../../../../../types/branch-like';
 import { getBranches } from '../../../../../../api/branches';
 import { getRegulatoryReportUrl } from '../../../../../../api/regulatory-report';
 import { ButtonLink } from '../../../../../../components/controls/buttons';
-import Select, { BasicSelectOption } from '../../../../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../../../../components/controls/Select';
 import {
   getBranchLikeDisplayName,
   isBranch,
   isMainBranch,
 } from '../../../../../../helpers/branch-like';
 import { translate } from '../../../../../../helpers/l10n';
+import { BranchLike } from '../../../../../../types/branch-like';
 import { Component } from '../../../../../../types/types';
-import { orderBy } from 'lodash';
 
 interface Props {
   component: Pick<Component, 'key' | 'name'>;
@@ -42,7 +42,7 @@ interface Props {
 interface State {
   downloadStarted: boolean;
   selectedBranch: string;
-  branchLikesOptions: BasicSelectOption[];
+  branchLikesOptions: LabelValueSelectOption[];
 }
 
 export default class RegulatoryReport extends React.PureComponent<Props, State> {
@@ -87,7 +87,7 @@ export default class RegulatoryReport extends React.PureComponent<Props, State>
       });
   }
 
-  onBranchSelect = (newOption: BasicSelectOption) => {
+  onBranchSelect = (newOption: LabelValueSelectOption) => {
     this.setState({ selectedBranch: newOption.value, downloadStarted: false });
   };
 

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/__tests__/RegulatoryReport-it.tsx b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/__tests__/RegulatoryReport-it.tsx
index 63d784551b03af6d975cb9acd3f75573099d396a..7607277012039b6e17ebe9cf984e24ad877dfaf9 100644 (file)
--- a/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/__tests__/RegulatoryReport-it.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/component/projectInformation/projectRegulatoryReport/__tests__/RegulatoryReport-it.tsx
@@ -41,7 +41,7 @@ it('should open the regulatory report page', async () => {
   expect(screen.getByText('regulatory_report.description1')).toBeInTheDocument();
   expect(screen.getByText('regulatory_report.description2')).toBeInTheDocument();
 
-  const branchSelect = screen.getByRole('textbox');
+  const branchSelect = screen.getByRole('combobox', { name: 'regulatory_page.select_branch' });
   expect(branchSelect).toBeInTheDocument();
 
   await user.click(branchSelect);

diff --git a/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx b/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx
index e3bcc746f788b74a6b865e4c7f7c99643fc795dc..02ec79d5a7458a7e0719d527548e4be3acd5f362 100644 (file)
--- a/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx
+++ b/server/sonar-web/src/main/js/apps/account/__tests__/Account-it.tsx
@@ -292,16 +292,24 @@ describe('security page', () => {
 
       // eslint-disable-next-line jest/no-conditional-in-test
       if (tokenTypeOption === TokenType.Project) {
-        await selectEvent.select(screen.getAllByRole('textbox')[1], [tokenTypeLabel]);
+        await selectEvent.select(screen.getByRole('combobox', { name: 'users.tokens.type' }), [
+          tokenTypeLabel,
+        ]);
         // eslint-disable-next-line jest/no-conditional-expect
         expect(generateButton).toBeDisabled();
         // eslint-disable-next-line jest/no-conditional-expect
-        expect(screen.getAllByRole('textbox')).toHaveLength(4);
-        await selectEvent.select(screen.getAllByRole('textbox')[2], ['Project Name 1']);
+        expect(screen.getByRole('textbox', { name: 'users.tokens.name' })).toBeInTheDocument();
+        // eslint-disable-next-line jest/no-conditional-expect
+        expect(screen.getAllByRole('combobox')).toHaveLength(3);
+        await selectEvent.select(screen.getByRole('combobox', { name: 'users.tokens.project' }), [
+          'Project Name 1',
+        ]);
         // eslint-disable-next-line jest/no-conditional-expect
         expect(generateButton).toBeEnabled();
       } else {
-        await selectEvent.select(screen.getAllByRole('textbox')[1], [tokenTypeLabel]);
+        await selectEvent.select(screen.getByRole('combobox', { name: 'users.tokens.type' }), [
+          tokenTypeLabel,
+        ]);
         // eslint-disable-next-line jest/no-conditional-expect
         expect(generateButton).toBeEnabled();
       }
@@ -389,7 +397,7 @@ describe('security page', () => {
       securityPagePath
     );
 
-    selectEvent.openMenu(screen.getAllByRole('textbox')[1]);
+    selectEvent.openMenu(screen.getByRole('combobox', { name: 'users.tokens.type' }));
     expect(screen.queryByText(`users.tokens.${TokenType.Project}`)).not.toBeInTheDocument();
   });
 
@@ -417,7 +425,7 @@ describe('security page', () => {
       securityPagePath
     );
 
-    await selectEvent.select(screen.getAllByRole('textbox')[1], [
+    await selectEvent.select(screen.getByRole('combobox', { name: 'users.tokens.type' }), [
       `users.tokens.${TokenType.Project}`,
     ]);
 

diff --git a/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-it.tsx b/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-it.tsx
index 9e435c7e46d364aaf77b411d7e32971925fbff81..d5a391828aa31998856cba9e095f7cb5c00f073c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/audit-logs/components/__tests__/AuditApp-it.tsx
@@ -67,6 +67,8 @@ const ui = {
   downloadSentenceStart: byText('audit_logs.download_start.sentence.1'),
   startDateInput: byPlaceholderText('start_date'),
   endDateInput: byPlaceholderText('end_date'),
+  dateInputMonthSelect: byRole('combobox', { name: 'select_month' }),
+  dateInputYearSelect: byRole('combobox', { name: 'select_year' }),
 };
 
 let handler: SettingsServiceMock;
@@ -115,21 +117,13 @@ it('should handle download button click', async () => {
   expect(ui.downloadButton.get()).toHaveAttribute('aria-disabled', 'true');
   await user.click(ui.startDateInput.get());
 
-  await selectEvent.select(screen.getByRole('textbox', { name: 'select_month' }), [
-    getShortMonthName(getMonth(startDay)),
-  ]);
-  await selectEvent.select(screen.getByRole('textbox', { name: 'select_year' }), [
-    getYear(startDay),
-  ]);
+  await selectEvent.select(ui.dateInputMonthSelect.get(), [getShortMonthName(getMonth(startDay))]);
+  await selectEvent.select(ui.dateInputYearSelect.get(), [getYear(startDay)]);
   await user.click(screen.getByText(getDate(startDay)));
   await user.click(ui.endDateInput.get());
 
-  await selectEvent.select(screen.getByRole('textbox', { name: 'select_month' }), [
-    getShortMonthName(getMonth(endDate)),
-  ]);
-  await selectEvent.select(screen.getByRole('textbox', { name: 'select_year' }), [
-    getYear(endDate),
-  ]);
+  await selectEvent.select(ui.dateInputMonthSelect.get(), [getShortMonthName(getMonth(endDate))]);
+  await selectEvent.select(ui.dateInputYearSelect.get(), [getYear(endDate)]);
   await user.click(screen.getByText(getDate(endDate)));
 
   expect(await ui.downloadButton.find()).toHaveAttribute('aria-disabled', 'false');

diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
index c1bac2d34aed4ada3cea636815f8c12f9415d3c9..2c6d4d0278d523e5e2bd0521e38998ba174ee489 100644 (file)
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatusFilter.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select, { BasicSelectOption } from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { TaskStatuses } from '../../../types/tasks';
 import { STATUSES } from '../constants';
@@ -32,7 +32,7 @@ interface StatusFilterProps {
 export default function StatusFilter(props: StatusFilterProps) {
   const { id, value, onChange } = props;
 
-  const options: BasicSelectOption[] = [
+  const options: LabelValueSelectOption[] = [
     { value: STATUSES.ALL, label: translate('background_task.status.ALL') },
     {
       value: STATUSES.ALL_EXCEPT_PENDING,
@@ -46,7 +46,7 @@ export default function StatusFilter(props: StatusFilterProps) {
   ];
 
   const handleChange = React.useCallback(
-    ({ value }: BasicSelectOption) => {
+    ({ value }: LabelValueSelectOption) => {
       onChange(value);
     },
     [onChange]

diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
index 36f94f7008ddbfa7dcaee3bb08a8bf3e7a54acf2..c5fe7304c507eb868928a943b54680ccb18b97dd 100644 (file)
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/TypesFilter.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import Select, { BasicSelectOption } from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { ALL_TYPES } from '../constants';
 
@@ -30,7 +30,7 @@ interface Props {
 }
 
 export default class TypesFilter extends React.PureComponent<Props> {
-  handleChange = ({ value }: BasicSelectOption) => {
+  handleChange = ({ value }: LabelValueSelectOption) => {
     this.props.onChange(value);
   };
 
@@ -43,7 +43,7 @@ export default class TypesFilter extends React.PureComponent<Props> {
       };
     });
 
-    const allOptions: BasicSelectOption[] = [
+    const allOptions: LabelValueSelectOption[] = [
       { value: ALL_TYPES, label: translate('background_task.type.ALL') },
       ...options,
     ];

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
index 900194d53cda04cb1b2bc73ef5c94a77b8688ae5..00fe9b0ff433be3397bf98a8af5e9f7815ac31c9 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
+++ b/server/sonar-web/src/main/js/apps/coding-rules/__tests__/CodingRules-it.ts
@@ -19,6 +19,7 @@
  */
 import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { byRole } from 'testing-library-selector';
 import CodingRulesMock from '../../../api/mocks/CodingRulesMock';
 import { mockCurrentUser, mockLoggedInUser } from '../../../helpers/testMocks';
 import { renderAppRoutes } from '../../../helpers/testReactTestingUtils';
@@ -30,6 +31,11 @@ jest.mock('../../../api/issues');
 jest.mock('../../../api/users');
 jest.mock('../../../api/quality-profiles');
 
+const ui = {
+  activateInSelectOption: byRole('combobox', { name: 'coding_rules.activate_in' }),
+  deactivateInSelectOption: byRole('combobox', { name: 'coding_rules.deactivate_in' }),
+};
+
 let handler: CodingRulesMock;
 
 beforeAll(() => {
@@ -276,7 +282,7 @@ it('no quality profile for bulk cahnge base on language search', async () => {
 
   expect(dialog).toBeInTheDocument();
   const dialogScreen = within(dialog);
-  await user.click(dialogScreen.getByRole('textbox', { name: 'coding_rules.activate_in' }));
+  await user.click(ui.activateInSelectOption.get());
   expect(dialogScreen.getByText('coding_rules.bulk_change.no_quality_profile')).toBeInTheDocument();
 });
 
@@ -297,7 +303,7 @@ it('should be able to bulk activate quality profile', async () => {
   expect(dialog).toBeInTheDocument();
 
   let dialogScreen = within(dialog);
-  await user.click(dialogScreen.getByRole('textbox', { name: 'coding_rules.activate_in' }));
+  await user.click(ui.activateInSelectOption.get());
   await user.click(
     dialogScreen.getByText(`${selectQPSuccess.name} - ${selectQPSuccess.languageName}`)
   );
@@ -326,7 +332,7 @@ it('should be able to bulk activate quality profile', async () => {
       name: `coding_rules.activate_in_quality_profile (${handler.allRulesCount()} coding_rules._rules)`,
     })
   );
-  await user.click(dialogScreen.getByRole('textbox', { name: 'coding_rules.activate_in' }));
+  await user.click(ui.activateInSelectOption.get());
   await user.click(
     dialogScreen.getByText(`${selectQPWarning.name} - ${selectQPWarning.languageName}`)
   );
@@ -354,7 +360,7 @@ it('should be able to bulk deactivate quality profile', async () => {
       name: `coding_rules.deactivate_in_quality_profile (${handler.allRulesCount()} coding_rules._rules)`,
     })
   );
-  await user.click(dialogScreen.getByRole('textbox', { name: 'coding_rules.deactivate_in' }));
+  await user.click(ui.deactivateInSelectOption.get());
 
   await user.click(dialogScreen.getByText(`${selectQP.name} - ${selectQP.languageName}`));
   await user.click(dialogScreen.getByRole('button', { name: 'apply' }));

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
index 45c035e444c30fa6ce07b0a0626b21f0fe79b141..98031fd32542d81831a3a536065fbfd7bd93bfd1 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/ActivationFormModal.tsx
@@ -19,11 +19,10 @@
  */
 import classNames from 'classnames';
 import * as React from 'react';
-import { OptionTypeBase } from 'react-select';
 import { activateRule, Profile } from '../../../api/quality-profiles';
 import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import Modal from '../../../components/controls/Modal';
-import Select from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import { Alert } from '../../../components/ui/Alert';
 import { translate } from '../../../helpers/l10n';
 import { sanitizeString } from '../../../helpers/sanitize';
@@ -141,7 +140,7 @@ export default class ActivationFormModal extends React.PureComponent<Props, Stat
     this.setState({ profile });
   };
 
-  handleSeverityChange = ({ value }: OptionTypeBase) => {
+  handleSeverityChange = ({ value }: LabelValueSelectOption) => {
     this.setState({ severity: value });
   };
 
@@ -176,7 +175,7 @@ export default class ActivationFormModal extends React.PureComponent<Props, Stat
                 isClearable={false}
                 isDisabled={submitting || profilesWithDepth.length === 1}
                 onChange={this.handleProfileChange}
-                getOptionLabel={(p) => '   '.repeat(p.depth) + p.name}
+                getOptionLabel={(p: ProfileWithDeph) => '   '.repeat(p.depth) + p.name}
                 options={profilesWithDepth}
                 value={profile}
               />

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
index b1702f45b0752e2ae0e122295f12153b0d58c7a2..aab3d76897b7a62a27628bd8bd0586e912c8d9f9 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/CustomRuleFormModal.tsx
@@ -18,12 +18,12 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { components, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
+import { components, OptionProps, SingleValueProps } from 'react-select';
 import { createRule, updateRule } from '../../../api/rules';
 import FormattingTips from '../../../components/common/FormattingTips';
 import { ResetButtonLink, SubmitButton } from '../../../components/controls/buttons';
 import Modal from '../../../components/controls/Modal';
-import Select from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import TypeHelper from '../../../components/shared/TypeHelper';
 import { Alert } from '../../../components/ui/Alert';
 import MandatoryFieldMarker from '../../../components/ui/MandatoryFieldMarker';
@@ -33,7 +33,7 @@ import { csvEscape } from '../../../helpers/csv';
 import { translate } from '../../../helpers/l10n';
 import { sanitizeString } from '../../../helpers/sanitize';
 import { latinize } from '../../../helpers/strings';
-import { Dict, RuleDetails, RuleParameter } from '../../../types/types';
+import { Dict, RuleDetails, RuleParameter, RuleType } from '../../../types/types';
 import { SeveritySelect } from './SeveritySelect';
 
 interface Props {
@@ -144,11 +144,12 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
   handleDescriptionChange = (event: React.SyntheticEvent<HTMLTextAreaElement>) =>
     this.setState({ description: event.currentTarget.value });
 
-  handleTypeChange = ({ value }: { value: string }) => this.setState({ type: value });
+  handleTypeChange = ({ value }: LabelValueSelectOption<RuleType>) =>
+    this.setState({ type: value });
 
   handleSeverityChange = ({ value }: { value: string }) => this.setState({ severity: value });
 
-  handleStatusChange = ({ value }: { value: string }) => this.setState({ status: value });
+  handleStatusChange = ({ value }: LabelValueSelectOption) => this.setState({ status: value });
 
   handleParameterChange = (event: React.SyntheticEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = event.currentTarget;
@@ -213,7 +214,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
     </div>
   );
 
-  renderTypeOption = (props: OptionProps<OptionTypeBase, false>) => {
+  renderTypeOption = (props: OptionProps<LabelValueSelectOption<RuleType>, false>) => {
     return (
       <components.Option {...props}>
         <TypeHelper type={props.data.value} />
@@ -221,7 +222,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
     );
   };
 
-  renderTypeSingleValue = (props: SingleValueProps<OptionTypeBase>) => {
+  renderTypeSingleValue = (props: SingleValueProps<LabelValueSelectOption<RuleType>, false>) => {
     return (
       <components.SingleValue {...props}>
         <TypeHelper className="display-flex-center" type={props.data.value} />
@@ -230,7 +231,7 @@ export default class CustomRuleFormModal extends React.PureComponent<Props, Stat
   };
 
   renderTypeField = () => {
-    const ruleTypeOption = RULE_TYPES.map((type) => ({
+    const ruleTypeOption: LabelValueSelectOption<RuleType>[] = RULE_TYPES.map((type) => ({
       label: translate('issue.type', type),
       value: type,
     }));

diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx
index daf1f69c15ef811dc79047c8daad1c8b9b53d395..ff27e2ac8c546bd79bfeea01e89feb77e94d3d2e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/SeveritySelect.tsx
@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { components, OptionProps, OptionTypeBase, SingleValueProps } from 'react-select';
-import Select from '../../../components/controls/Select';
+import { components, OptionProps, SingleValueProps } from 'react-select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import SeverityHelper from '../../../components/shared/SeverityHelper';
 import { SEVERITIES } from '../../../helpers/constants';
 import { translate } from '../../../helpers/l10n';
@@ -28,7 +28,23 @@ export interface SeveritySelectProps {
   isDisabled: boolean;
   severity: string;
   ariaLabelledby: string;
-  onChange: (value: OptionTypeBase) => void;
+  onChange: (value: LabelValueSelectOption) => void;
+}
+
+function Option(props: OptionProps<LabelValueSelectOption, false>) {
+  return (
+    <components.Option {...props}>
+      <SeverityHelper className="display-flex-center" severity={props.data.value} />
+    </components.Option>
+  );
+}
+
+function SingleValue(props: SingleValueProps<LabelValueSelectOption, false>) {
+  return (
+    <components.SingleValue {...props}>
+      <SeverityHelper className="display-flex-center" severity={props.data.value} />
+    </components.SingleValue>
+  );
 }
 
 export function SeveritySelect(props: SeveritySelectProps) {
@@ -38,22 +54,6 @@ export function SeveritySelect(props: SeveritySelectProps) {
     value: severity,
   }));
 
-  function Option(props: OptionProps<OptionTypeBase, false>) {
-    return (
-      <components.Option {...props}>
-        <SeverityHelper className="display-flex-center" severity={props.data.value} />
-      </components.Option>
-    );
-  }
-
-  function SingleValue(props: SingleValueProps<OptionTypeBase>) {
-    return (
-      <components.SingleValue {...props}>
-        <SeverityHelper className="display-flex-center" severity={props.data.value} />
-      </components.SingleValue>
-    );
-  }
-
   return (
     <Select
       aria-labelledby={ariaLabelledby}

diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx
index 180b529153fdf90cceb9193a4893cfe0dcc1e80a..d4eda50883225fd5c50dfd61e1cae87dc4ef052a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureViewSelect.tsx
@@ -80,7 +80,7 @@ export default class MeasureViewSelect extends React.PureComponent<Props> {
     </components.Option>
   );
 
-  renderValue = (props: SingleValueProps<ViewOption>) => (
+  renderValue = (props: SingleValueProps<ViewOption, false>) => (
     <components.SingleValue {...props} className="display-flex-center">
       {props.data.icon}
       <span className="little-spacer-left">{props.data.label}</span>

diff --git a/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx b/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
index 4ed9341063f7239100b42671eabb8d20ed418c1b..95b7fbbcf4a5b82520b69f7ba14ce54ddf72a01a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/GitHubProjectCreateRenderer.tsx
@@ -27,7 +27,7 @@ import { Button } from '../../../components/controls/buttons';
 import ListFooter from '../../../components/controls/ListFooter';
 import Radio from '../../../components/controls/Radio';
 import SearchBox from '../../../components/controls/SearchBox';
-import Select, { BasicSelectOption } from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import CheckIcon from '../../../components/icons/CheckIcon';
 import QualifierIcon from '../../../components/icons/QualifierIcon';
 import { Alert } from '../../../components/ui/Alert';
@@ -265,7 +265,7 @@ export default function GitHubProjectCreateRenderer(props: GitHubProjectCreateRe
                 inputId="github-choose-organization"
                 className="input-super-large"
                 options={organizations.map(orgToOption)}
-                onChange={({ value }: BasicSelectOption) => props.onSelectOrganization(value)}
+                onChange={({ value }: LabelValueSelectOption) => props.onSelectOrganization(value)}
                 value={selectedOrganization ? orgToOption(selectedOrganization) : null}
               />
             ) : (

diff --git a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
index c62b019f4d8ede9f445128555db763969f750150..d21fe46459b6d52f48f6abcdb76d24a3dff268a7 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/__tests__/IssuesApp-it.tsx
@@ -94,7 +94,7 @@ it('should be able to bulk change', async () => {
   await user.keyboard('New Comment');
   expect(screen.getByRole('button', { name: 'apply' })).toBeDisabled();
 
-  await selectEvent.select(screen.getByRole('textbox', { name: 'issue.set_type' }), [
+  await selectEvent.select(screen.getByRole('combobox', { name: 'issue.set_type' }), [
     'issue.type.BUG',
   ]);
   await user.click(screen.getByRole('button', { name: 'apply' }));

diff --git a/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx b/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx
index e1e2e2aeff7a1ba66a68965b127f0e91f722d6aa..63a8af9d327527166022c0d3c857744d54308d1c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/AssigneeSelect.tsx
@@ -20,7 +20,7 @@
 import { debounce } from 'lodash';
 import * as React from 'react';
 import { components, OptionProps, SingleValueProps } from 'react-select';
-import { BasicSelectOption, SearchSelect } from '../../../components/controls/Select';
+import { LabelValueSelectOption, SearchSelect } from '../../../components/controls/Select';
 import Avatar from '../../../components/ui/Avatar';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Issue } from '../../../types/types';
@@ -31,7 +31,7 @@ const DEBOUNCE_DELAY = 250;
 // exported for test
 export const MIN_QUERY_LENGTH = 2;
 
-export interface AssigneeOption extends BasicSelectOption {
+export interface AssigneeOption extends LabelValueSelectOption {
   avatar?: string;
   email?: string;
   label: string;
@@ -113,7 +113,7 @@ export default class AssigneeSelect extends React.Component<AssigneeSelectProps>
     <components.Option {...props}>{this.renderAssignee(props.data)}</components.Option>
   );
 
-  renderSingleAssignee = (props: SingleValueProps<AssigneeOption>) => (
+  renderSingleAssignee = (props: SingleValueProps<AssigneeOption, false>) => (
     <components.SingleValue {...props}>{this.renderAssignee(props.data)}</components.SingleValue>
   );
 

diff --git a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
index 1f6b087f5fc3244cb8e63f2d16263d7e03837b0a..220f5f173d95036db9806e779003ad79dbce9c18 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/BulkChangeModal.tsx
@@ -29,8 +29,8 @@ import HelpTooltip from '../../../components/controls/HelpTooltip';
 import Modal from '../../../components/controls/Modal';
 import Radio from '../../../components/controls/Radio';
 import Select, {
-  BasicSelectOption,
   CreatableSelect,
+  LabelValueSelectOption,
   SearchSelect,
 } from '../../../components/controls/Select';
 import IssueTypeIcon from '../../../components/icons/IssueTypeIcon';
@@ -45,7 +45,7 @@ import AssigneeSelect, { AssigneeOption } from './AssigneeSelect';
 
 const DEBOUNCE_DELAY = 250;
 
-interface TagOption extends BasicSelectOption {
+interface TagOption extends LabelValueSelectOption {
   label: string;
   value: string;
 }
@@ -89,6 +89,41 @@ enum InputField {
 
 export const MAX_PAGE_SIZE = 500;
 
+function typeFieldTypeRenderer(option: LabelValueSelectOption) {
+  return (
+    <div className="display-flex-center">
+      <IssueTypeIcon query={option.value} />
+      <span className="little-spacer-left">{option.label}</span>
+    </div>
+  );
+}
+
+function TypeFieldOptionComponent(props: OptionProps<LabelValueSelectOption, false>) {
+  return <components.Option {...props}>{typeFieldTypeRenderer(props.data)}</components.Option>;
+}
+
+function TypeFieldSingleValueComponent(props: SingleValueProps<LabelValueSelectOption, false>) {
+  return (
+    <components.SingleValue {...props}>{typeFieldTypeRenderer(props.data)}</components.SingleValue>
+  );
+}
+
+function SeverityFieldOptionComponent(props: OptionProps<LabelValueSelectOption, false>) {
+  return (
+    <components.Option {...props}>
+      {<SeverityHelper className="display-flex-center" severity={props.data.value} />}
+    </components.Option>
+  );
+}
+
+function SeverityFieldSingleValueComponent(props: SingleValueProps<LabelValueSelectOption, false>) {
+  return (
+    <components.SingleValue {...props}>
+      {<SeverityHelper className="display-flex-center" severity={props.data.value} />}
+    </components.SingleValue>
+  );
+}
+
 export default class BulkChangeModal extends React.PureComponent<Props, State> {
   mounted = false;
 
@@ -161,13 +196,14 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     this.setState({ comment: event.currentTarget.value });
   };
 
-  handleSelectFieldChange = (field: 'severity' | 'type') => (data: BasicSelectOption | null) => {
-    if (data) {
-      this.setState<keyof FormFields>({ [field]: data.value });
-    } else {
-      this.setState<keyof FormFields>({ [field]: undefined });
-    }
-  };
+  handleSelectFieldChange =
+    (field: 'severity' | 'type') => (data: LabelValueSelectOption | null) => {
+      if (data) {
+        this.setState<keyof FormFields>({ [field]: data.value });
+      } else {
+        this.setState<keyof FormFields>({ [field]: undefined });
+      }
+    };
 
   handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -303,18 +339,11 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     }
 
     const types: IssueType[] = ['BUG', 'VULNERABILITY', 'CODE_SMELL'];
-    const options: BasicSelectOption[] = types.map((type) => ({
+    const options: LabelValueSelectOption[] = types.map((type) => ({
       label: translate('issue.type', type),
       value: type,
     }));
 
-    const typeRenderer = (option: BasicSelectOption) => (
-      <div className="display-flex-center">
-        <IssueTypeIcon query={option.value} />
-        <span className="little-spacer-left">{option.label}</span>
-      </div>
-    );
-
     const input = (
       <Select
         className="input-super-large"
@@ -322,12 +351,8 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
         isClearable={true}
         isSearchable={false}
         components={{
-          Option: (props: OptionProps<BasicSelectOption, false>) => (
-            <components.Option {...props}>{typeRenderer(props.data)}</components.Option>
-          ),
-          SingleValue: (props: SingleValueProps<BasicSelectOption>) => (
-            <components.SingleValue {...props}>{typeRenderer(props.data)}</components.SingleValue>
-          ),
+          Option: TypeFieldOptionComponent,
+          SingleValue: TypeFieldSingleValueComponent,
         }}
         onChange={this.handleSelectFieldChange('type')}
         options={options}
@@ -346,7 +371,7 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
     }
 
     const severities = ['BLOCKER', 'CRITICAL', 'MAJOR', 'MINOR', 'INFO'];
-    const options: BasicSelectOption[] = severities.map((severity) => ({
+    const options: LabelValueSelectOption[] = severities.map((severity) => ({
       label: translate('severity', severity),
       value: severity,
     }));
@@ -359,16 +384,8 @@ export default class BulkChangeModal extends React.PureComponent<Props, State> {
         isSearchable={false}
         onChange={this.handleSelectFieldChange('severity')}
         components={{
-          Option: (props: OptionProps<BasicSelectOption, false>) => (
-            <components.Option {...props}>
-              {<SeverityHelper className="display-flex-center" severity={props.data.value} />}
-            </components.Option>
-          ),
-          SingleValue: (props: SingleValueProps<BasicSelectOption>) => (
-            <components.SingleValue {...props}>
-              {<SeverityHelper className="display-flex-center" severity={props.data.value} />}
-            </components.SingleValue>
-          ),
+          Option: SeverityFieldOptionComponent,
+          SingleValue: SeverityFieldSingleValueComponent,
         }}
         options={options}
       />

diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx b/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx
index b446d59933a09ef5efd2bce583aefb5c41849aeb..af11d1b37f6b9ea726d790707be70a24792d14c8 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/AssigneeSelect-test.tsx
@@ -19,7 +19,8 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { Props as ReactSelectAsyncProps } from 'react-select/async';
+import { GroupBase } from 'react-select';
+import { AsyncProps } from 'react-select/async';
 import { SearchSelect } from '../../../../components/controls/Select';
 import Avatar from '../../../../components/ui/Avatar';
 import { mockCurrentUser, mockIssue, mockLoggedInUser } from '../../../../helpers/testMocks';
@@ -97,12 +98,12 @@ it('should render options correctly', () => {
 it('should render noOptionsMessage correctly', () => {
   const wrapper = shallowRender();
   expect(
-    wrapper.find<ReactSelectAsyncProps<AssigneeOption, false>>(SearchSelect).props()
+    wrapper.find<AsyncProps<AssigneeOption, false, GroupBase<AssigneeOption>>>(SearchSelect).props()
       .noOptionsMessage!({ inputValue: 'a' })
   ).toBe(`select2.tooShort.${MIN_QUERY_LENGTH}`);
 
   expect(
-    wrapper.find<ReactSelectAsyncProps<AssigneeOption, false>>(SearchSelect).props()
+    wrapper.find<AsyncProps<AssigneeOption, false, GroupBase<AssigneeOption>>>(SearchSelect).props()
       .noOptionsMessage!({ inputValue: 'droids' })
   ).toBe('select2.noMatches');
 });

diff --git a/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-test.tsx b/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-test.tsx
index 4ec31762871a15407047594e70276b1345285956..f71b112243138b95200935e57656fa2c8ab183b6 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-test.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/__tests__/BulkChangeModal-test.tsx
@@ -20,7 +20,6 @@
 import { shallow } from 'enzyme';
 import * as React from 'react';
 import { Props as ReactSelectProps } from 'react-select';
-import { SelectComponentsProps } from 'react-select/src/Select';
 import { searchIssueTags } from '../../../../api/issues';
 import { SubmitButton } from '../../../../components/controls/buttons';
 import Select, { CreatableSelect, SearchSelect } from '../../../../components/controls/Select';
@@ -72,7 +71,7 @@ it.each([
   const wrapper = getWrapper([mockIssue(false, { actions: [action] })]);
   await waitAndUpdate(wrapper);
 
-  const { Option, SingleValue } = wrapper.find<SelectComponentsProps>(Select).props().components;
+  const { Option, SingleValue } = wrapper.find(Select).props().components;
 
   expect(Option({ data: { label: 'label', value: 'value' } })).toMatchSnapshot('Option');
   expect(SingleValue({ data: { label: 'label', value: 'value' } })).toMatchSnapshot('SingleValue');

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/BaselineSettingReferenceBranch-test.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/BaselineSettingReferenceBranch-test.tsx
index b4e983875f45c375f960f6c2dec3370379bd3a1f..c240643795de12721d9b8b95c7a353bec9a0c217 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/BaselineSettingReferenceBranch-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/BaselineSettingReferenceBranch-test.tsx
@@ -95,7 +95,7 @@ describe('renderOption', () => {
     expect(
       renderBranchOption({
         ...props,
-        data: { value: 'branch-nope', isMain: false, isInvalid: true },
+        data: { label: 'branch-nope', value: 'branch-nope', isMain: false, isInvalid: true },
       })
     ).toMatchSnapshot("branch doesn't exist");
   });

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
index 3f0251dba3a6a0b07bdd56a465d3957ca04ecc7f..e2eb5c63fdc9b7c3efe76f207404fbf449fbfbb3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/__tests__/__snapshots__/BaselineSettingReferenceBranch-test.tsx.snap
@@ -24,6 +24,7 @@ exports[`renderOption should render correctly: branch doesn't exist 1`] = `
     {
       "isInvalid": true,
       "isMain": false,
+      "label": "branch-nope",
       "value": "branch-nope",
     }
   }

diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
index d177ea7a804cdddf33646d77ab400c2315d6c211..1568592b95e971cee159e39b5637dfd2d1d036cc 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityGate/ProjectQualityGateAppRenderer.tsx
@@ -27,7 +27,7 @@ import Link from '../../components/common/Link';
 import { SubmitButton } from '../../components/controls/buttons';
 import HelpTooltip from '../../components/controls/HelpTooltip';
 import Radio from '../../components/controls/Radio';
-import Select, { BasicSelectOption } from '../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../components/controls/Select';
 import Suggestions from '../../components/embed-docs-modal/Suggestions';
 import { Alert } from '../../components/ui/Alert';
 import { translate } from '../../helpers/l10n';
@@ -51,7 +51,7 @@ function hasConditionOnNewCode(qualityGate: QualityGate): boolean {
   return !!qualityGate.conditions?.some((condition) => isDiffMetric(condition.metric));
 }
 
-interface QualityGateOption extends BasicSelectOption {
+interface QualityGateOption extends LabelValueSelectOption {
   isDisabled: boolean;
 }
 

diff --git a/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/ProjectQualityGateApp-it.tsx b/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/ProjectQualityGateApp-it.tsx
index 847fb98c4acc0e13c37f40d2f75159e1c2f5839f..72f27addb6537944a2044044e5f8b56c1165d3aa 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/ProjectQualityGateApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityGate/__tests__/ProjectQualityGateApp-it.tsx
@@ -42,7 +42,7 @@ const ui = {
     name: /project_quality_gate.always_use_default/,
   }),
   specificRadioQualityGate: byRole('radio', { name: /project_quality_gate.always_use_specific/ }),
-  qualityGatesSelect: byRole('textbox', { name: 'project_quality_gate.select_specific_qg' }),
+  qualityGatesSelect: byRole('combobox', { name: 'project_quality_gate.select_specific_qg' }),
   QGWithoutConditionsOptionLabel: byRole('radio', {
     name: /option QG without conditions selected/,
   }),

diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx
index 4601712346b5fb4aa61b11cf044240aeeda52279..9c1839d1b468947a7533e9664769f9881340759c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/AddLanguageModal.tsx
@@ -22,7 +22,7 @@ import * as React from 'react';
 import { Profile } from '../../../api/quality-profiles';
 import withLanguagesContext from '../../../app/components/languages/withLanguagesContext';
 import { ButtonLink, SubmitButton } from '../../../components/controls/buttons';
-import Select, { BasicSelectOption } from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import SimpleModal from '../../../components/controls/SimpleModal';
 import { translate } from '../../../helpers/l10n';
 import { Languages } from '../../../types/languages';
@@ -47,7 +47,7 @@ export function AddLanguageModal(props: AddLanguageModalProps) {
 
   const header = translate('project_quality_profile.add_language_modal.title');
 
-  const languageOptions: BasicSelectOption[] = difference(
+  const languageOptions: LabelValueSelectOption[] = difference(
     Object.keys(profilesByLanguage),
     unavailableLanguages
   ).map((l) => ({ value: l, label: languages[l].name }));
@@ -90,7 +90,7 @@ export function AddLanguageModal(props: AddLanguageModalProps) {
                   className="abs-width-300"
                   isDisabled={submitting}
                   id="language"
-                  onChange={({ value }: BasicSelectOption) => {
+                  onChange={({ value }: LabelValueSelectOption) => {
                     setSelected({ language: value, key: undefined });
                   }}
                   options={languageOptions}

diff --git a/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/LanguageProfileSelectOption.tsx b/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/LanguageProfileSelectOption.tsx
index b90369d81fb987eb3e6097fd6dc865be783f041a..d45c08fcc6ba13129d14333cea96ab9d1159818a 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/LanguageProfileSelectOption.tsx
+++ b/server/sonar-web/src/main/js/apps/projectQualityProfiles/components/LanguageProfileSelectOption.tsx
@@ -21,11 +21,11 @@ import * as React from 'react';
 import { components, OptionProps } from 'react-select';
 import DisableableSelectOption from '../../../components/common/DisableableSelectOption';
 import Link from '../../../components/common/Link';
-import { BasicSelectOption } from '../../../components/controls/Select';
+import { LabelValueSelectOption } from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
 import { getQualityProfileUrl } from '../../../helpers/urls';
 
-export interface ProfileOption extends BasicSelectOption {
+export interface ProfileOption extends LabelValueSelectOption {
   language: string;
   isDisabled: boolean;
 }

diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
index c176a8d91de1a4e9bfc8b27c3f6fca929992e8ae..4fde70375e6b4dda62fe7b84777bfe0057b80f30 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/ProjectsSortingSelect-test.tsx
@@ -19,7 +19,7 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { GroupTypeBase } from 'react-select';
+import { GroupBase } from 'react-select';
 import { mockReactSelectOptionProps } from '../../../../helpers/mocks/react-select';
 import { click } from '../../../../helpers/testUtils';
 import ProjectsSortingSelect, { Option } from '../ProjectsSortingSelect';
@@ -44,7 +44,7 @@ it('should render option correctly', () => {
   expect(
     shallow(
       <SortOption
-        {...mockReactSelectOptionProps<Option, false, GroupTypeBase<Option>>({
+        {...mockReactSelectOptionProps<Option, false, GroupBase<Option>>({
           label: 'foo',
           value: 'foo',
           short: 'fo',
@@ -55,7 +55,7 @@ it('should render option correctly', () => {
   expect(
     shallow(
       <SortOption
-        {...mockReactSelectOptionProps<Option, false, GroupTypeBase<Option>>({
+        {...mockReactSelectOptionProps<Option, false, GroupBase<Option>>({
           label: 'foo',
           value: 'foo',
         })}

diff --git a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/SearchableFilterFooter-test.tsx b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/SearchableFilterFooter-test.tsx
index 20d042e7387e0a92b6d799128d52e4a9668f5814..a4190c94c74654dd40b79789890348b7cedb724c 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projects/filters/__tests__/SearchableFilterFooter-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/filters/__tests__/SearchableFilterFooter-test.tsx
@@ -19,7 +19,6 @@
  */
 import { shallow } from 'enzyme';
 import * as React from 'react';
-import { SelectComponentsProps } from 'react-select/src/Select';
 import Select from '../../../../components/controls/Select';
 import SearchableFilterFooter from '../SearchableFilterFooter';
 
@@ -38,7 +37,7 @@ it('should render items without the ones in the facet', () => {
       query={{ languages: ['java'] }}
     />
   );
-  expect(wrapper.find<SelectComponentsProps>(Select).props().options).toMatchSnapshot();
+  expect(wrapper.find(Select).props().options).toMatchSnapshot();
 });
 
 it('should properly handle a change of the facet value', () => {

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
index bf1bce7b499747eab9e1888abcfd559d22710d8d..c231ca1f3c68b165b95ce23c935308ffb952b33d 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/Search.tsx
@@ -27,7 +27,7 @@ import Checkbox from '../../components/controls/Checkbox';
 import DateInput from '../../components/controls/DateInput';
 import HelpTooltip from '../../components/controls/HelpTooltip';
 import SearchBox from '../../components/controls/SearchBox';
-import Select from '../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../components/controls/Select';
 import QualifierIcon from '../../components/icons/QualifierIcon';
 import { translate } from '../../helpers/l10n';
 import { AppState } from '../../types/appstate';
@@ -64,7 +64,6 @@ interface State {
 const QUALIFIERS_ORDER = ['TRK', 'VW', 'APP'];
 
 export class Search extends React.PureComponent<Props, State> {
-  mounted = false;
   state: State = { bulkApplyTemplateModal: false, deleteModal: false };
 
   getQualifierOptions = () => {
@@ -104,17 +103,19 @@ export class Search extends React.PureComponent<Props, State> {
     this.setState({ bulkApplyTemplateModal: false });
   };
 
-  handleQualifierChange = ({ value }: { value: string }) => this.props.onQualifierChanged(value);
+  handleQualifierChange = ({ value }: LabelValueSelectOption) =>
+    this.props.onQualifierChanged(value);
 
-  handleVisibilityChange = ({ value }: { value: string }) => this.props.onVisibilityChanged(value);
+  handleVisibilityChange = ({ value }: LabelValueSelectOption) =>
+    this.props.onVisibilityChanged(value);
 
-  optionRenderer = (props: OptionProps<{ value: string }, false>) => (
+  optionRenderer = (props: OptionProps<LabelValueSelectOption, false>) => (
     <components.Option {...props}>{this.renderQualifierOption(props.data)}</components.Option>
   );
 
-  singleValueRenderer = (props: SingleValueProps<{ value: string }>) => (
+  singleValueRenderer = (props: SingleValueProps<LabelValueSelectOption, false>) => (
     <components.SingleValue {...props}>
-      {this.renderQualifierOption(props.data as { value: string; label: string })}
+      {this.renderQualifierOption(props.data)}
     </components.SingleValue>
   );
 
@@ -137,7 +138,7 @@ export class Search extends React.PureComponent<Props, State> {
     );
   };
 
-  renderQualifierOption = (option: { label: string; value: string }) => (
+  renderQualifierOption = (option: LabelValueSelectOption) => (
     <div className="display-flex-center">
       <QualifierIcon className="little-spacer-right" qualifier={option.value} />
       {option.label}

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/Search-test.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/Search-test.tsx
index a891ccfecfd2f64bb219b7af7572faf034ee9608..f059a49c50fcfd779ca338233345b60ce4b8347e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/Search-test.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/Search-test.tsx
@@ -63,10 +63,12 @@ it('renders optionrenderer and singlevaluerenderer', () => {
   const OptionRendererer = wrapper.instance().optionRenderer;
   const SingleValueRendererer = wrapper.instance().singleValueRenderer;
   expect(
-    shallow(<OptionRendererer {...mockReactSelectOptionProps({ value: 'val' })} />)
+    shallow(<OptionRendererer {...mockReactSelectOptionProps({ label: 'Val', value: 'val' })} />)
   ).toMatchSnapshot('option renderer');
   expect(
-    shallow(<SingleValueRendererer {...mockReactSelectOptionProps({ value: 'val' })} />)
+    shallow(
+      <SingleValueRendererer {...mockReactSelectOptionProps({ label: 'Val', value: 'val' })} />
+    )
   ).toMatchSnapshot('single value renderer');
 });
 

diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
index 4dd30d3fa729ba47b876663fc15ee5dd8835149e..9179058e21c6153b0c868e75652a605bae335566 100644 (file)
--- a/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/__tests__/__snapshots__/Search-test.tsx.snap
@@ -309,6 +309,7 @@ exports[`renders optionrenderer and singlevaluerenderer: option renderer 1`] = `
 <Option
   data={
     {
+      "label": "Val",
       "value": "val",
     }
   }
@@ -320,6 +321,7 @@ exports[`renders optionrenderer and singlevaluerenderer: option renderer 1`] = `
       className="little-spacer-right"
       qualifier="val"
     />
+    Val
   </div>
 </Option>
 `;
@@ -328,6 +330,7 @@ exports[`renders optionrenderer and singlevaluerenderer: single value renderer 1
 <SingleValue
   data={
     {
+      "label": "Val",
       "value": "val",
     }
   }
@@ -339,6 +342,7 @@ exports[`renders optionrenderer and singlevaluerenderer: single value renderer 1
       className="little-spacer-right"
       qualifier="val"
     />
+    Val
   </div>
 </SingleValue>
 `;

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
index 32cfa51a0c42938809c8c9032d48b7096e2eb160..7949b8447c755038dd22e16d2be82731fdcdd85e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/QualityGatePermissionsAddModalRenderer.tsx
@@ -56,8 +56,11 @@ export default function QualityGatePermissionsAddModalRenderer(
       <form onSubmit={props.onSubmit}>
         <div className="modal-body">
           <div className="modal-field">
-            <label>{translate('quality_gates.permissions.search')}</label>
+            <label htmlFor="quality-gate-permissions-add-modal-select-input">
+              {translate('quality_gates.permissions.search')}
+            </label>
             <SearchSelect
+              inputId="quality-gate-permissions-add-modal-select-input"
               autoFocus={true}
               isClearable={false}
               placeholder=""
@@ -103,7 +106,7 @@ function optionRenderer(props: OptionProps<OptionWithValue, false>) {
   return <components.Option {...props}>{customOptions(props.data)}</components.Option>;
 }
 
-function singleValueRenderer(props: SingleValueProps<OptionWithValue>) {
+function singleValueRenderer(props: SingleValueProps<OptionWithValue, false>) {
   return <components.SingleValue {...props}>{customOptions(props.data)}</components.SingleValue>;
 }
 

diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx
index c50a17e3ce7eabd29fe79f8a0573cc128730d910..d98d0b873e97fb6abacea1c3877be4918e301a92 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/__tests__/QualityGate-it.tsx
@@ -189,7 +189,7 @@ it('should be able to add a condition', async () => {
   let dialog = within(screen.getByRole('dialog'));
 
   await user.click(dialog.getByRole('radio', { name: 'quality_gates.conditions.new_code' }));
-  await selectEvent.select(dialog.getByRole('textbox'), ['Issues']);
+  await selectEvent.select(dialog.getByRole('combobox'), ['Issues']);
   await user.click(dialog.getByRole('textbox', { name: 'quality_gates.conditions.value' }));
   await user.keyboard('12{Enter}');
 
@@ -201,7 +201,7 @@ it('should be able to add a condition', async () => {
   await user.click(await screen.findByText('quality_gates.add_condition'));
 
   dialog = within(screen.getByRole('dialog'));
-  await selectEvent.select(dialog.getByRole('textbox'), ['Info Issues']);
+  await selectEvent.select(dialog.getByRole('combobox'), ['Info Issues']);
   await user.click(dialog.getByRole('radio', { name: 'quality_gates.conditions.overall_code' }));
   await user.click(dialog.getByLabelText('quality_gates.conditions.operator'));
 
@@ -219,7 +219,7 @@ it('should be able to add a condition', async () => {
 
   dialog = within(screen.getByRole('dialog'));
   await user.click(dialog.getByRole('radio', { name: 'quality_gates.conditions.overall_code' }));
-  await selectEvent.select(dialog.getByRole('textbox'), ['Maintainability Rating']);
+  await selectEvent.select(dialog.getByRole('combobox'), ['Maintainability Rating']);
   await user.click(dialog.getByLabelText('quality_gates.conditions.value'));
   await user.click(dialog.getByText('B'));
   await user.click(dialog.getByRole('button', { name: 'quality_gates.add_condition' }));
@@ -555,7 +555,9 @@ describe('The Permissions section', () => {
     });
     await user.click(grantPermissionButton);
     const popup = screen.getByRole('dialog');
-    const searchUserInput = within(popup).getByRole('textbox');
+    const searchUserInput = within(popup).getByRole('combobox', {
+      name: 'quality_gates.permissions.search',
+    });
     expect(searchUserInput).toBeInTheDocument();
     const addUserButton = screen.getByRole('button', {
       name: 'add_verb',
@@ -603,7 +605,9 @@ describe('The Permissions section', () => {
     });
     await user.click(grantPermissionButton);
     const popup = screen.getByRole('dialog');
-    const searchUserInput = within(popup).getByRole('textbox');
+    const searchUserInput = within(popup).getByRole('combobox', {
+      name: 'quality_gates.permissions.search',
+    });
     const addUserButton = screen.getByRole('button', {
       name: 'add_verb',
     });
@@ -635,7 +639,9 @@ describe('The Permissions section', () => {
     });
     await user.click(grantPermissionButton);
     const popup = screen.getByRole('dialog');
-    const searchUserInput = within(popup).getByRole('textbox');
+    const searchUserInput = within(popup).getByRole('combobox', {
+      name: 'quality_gates.permissions.search',
+    });
     await user.click(searchUserInput);
 
     expect(screen.getByText('no_results')).toBeInTheDocument();

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx
index 78c0d9ab5e65c9ba9d8768d28ef1e24859607275..b63ffbf6ff65b579df44a7acbd990a72aef0ce85 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/__tests__/QualityProfilesApp-it.tsx
@@ -50,7 +50,7 @@ const ui = {
   }),
   createButton: byRole('button', { name: 'create' }),
   compareButton: byRole('link', { name: 'compare' }),
-  compareDropdown: byRole('textbox', { name: 'quality_profiles.compare_with' }),
+  compareDropdown: byRole('combobox', { name: 'quality_profiles.compare_with' }),
   changelogLink: byRole('link', { name: 'changelog' }),
   popup: byRole('dialog'),
   copyRadio: byRole('radio', {
@@ -65,7 +65,7 @@ const ui = {
     }),
   activateConfirmButton: byRole('button', { name: 'coding_rules.activate' }),
   namePropupInput: byRole('textbox', { name: 'quality_profiles.new_name field_required' }),
-  filterByLang: byRole('textbox', { name: 'quality_profiles.filter_by:' }),
+  filterByLang: byRole('combobox', { name: 'quality_profiles.filter_by:' }),
   listLinkCQualityProfile: byRole('link', { name: 'c quality profile' }),
   listLinkNewCQualityProfile: byRole('link', { name: 'New c quality profile' }),
   listLinkNewCQualityProfileFromCreateButton: byRole('link', {
@@ -73,11 +73,11 @@ const ui = {
   }),
   listLinkJavaQualityProfile: byRole('link', { name: 'java quality profile' }),
   returnToList: byRole('link', { name: 'quality_profiles.page' }),
-  languageSelect: byRole('textbox', { name: 'language field_required' }),
-  profileExtendSelect: byRole('textbox', {
+  languageSelect: byRole('combobox', { name: 'language field_required' }),
+  profileExtendSelect: byRole('combobox', {
     name: 'quality_profiles.creation.choose_parent_quality_profile field_required',
   }),
-  profileCopySelect: byRole('textbox', {
+  profileCopySelect: byRole('combobox', {
     name: 'quality_profiles.creation.choose_copy_quality_profile field_required',
   }),
   nameCreatePopupInput: byRole('textbox', { name: 'name field_required' }),

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
index fd45c725dcaf3a18971a33cd4e119aef71ab5728..3f1aefd4892749f714f86e5e2224aefce64c0be3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
@@ -51,7 +51,7 @@ export default class ComparisonForm extends React.PureComponent<Props> {
 
   singleValueRenderer = (
     options: Option[],
-    props: SingleValueProps<Omit<Option, 'label' | 'isDefault'>>
+    props: SingleValueProps<Omit<Option, 'label' | 'isDefault'>, false>
   ) => (
     <components.SingleValue {...props}>{renderValue(props.data, options)}</components.SingleValue>
   );

diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
index e0a1bf62bcfd93b33ef0b3b35393f74dda8eea44..d5416291ba72ea70d8d0e577c06d3fcefe1fdd9b 100644 (file)
--- a/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/details/ProfilePermissionsFormSelect.tsx
@@ -53,7 +53,7 @@ export default class ProfilePermissionsFormSelect extends React.PureComponent<Pr
     return <components.Option {...props}>{customOptions(data)}</components.Option>;
   }
 
-  singleValueRenderer = (props: SingleValueProps<OptionWithValue>) => (
+  singleValueRenderer = (props: SingleValueProps<OptionWithValue, false>) => (
     <components.SingleValue {...props}>{customOptions(props.data)}</components.SingleValue>
   );
 

diff --git a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
index 6231711692f92c2feec916592ec7cddb1663caec..0f0c017aea47674cda21aabe70853e8980571ca7 100644 (file)
--- a/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
+++ b/server/sonar-web/src/main/js/apps/users/components/TokensForm.tsx
@@ -23,7 +23,7 @@ import { getScannableProjects } from '../../../api/components';
 import { generateToken, getTokens } from '../../../api/user-tokens';
 import withCurrentUserContext from '../../../app/components/current-user/withCurrentUserContext';
 import { SubmitButton } from '../../../components/controls/buttons';
-import Select, { BasicSelectOption } from '../../../components/controls/Select';
+import Select, { LabelValueSelectOption } from '../../../components/controls/Select';
 import DeferredSpinner from '../../../components/ui/DeferredSpinner';
 import { translate } from '../../../helpers/l10n';
 import {
@@ -53,8 +53,8 @@ interface State {
   newTokenName: string;
   newTokenType?: TokenType;
   tokens: UserToken[];
-  projects: BasicSelectOption[];
-  selectedProject?: BasicSelectOption;
+  projects: LabelValueSelectOption[];
+  selectedProject?: LabelValueSelectOption;
   newTokenExpiration: TokenExpiration;
   tokenExpirationOptions: { value: TokenExpiration; label: string }[];
   tokenTypeOptions: Array<{ label: string; value: TokenType }>;
@@ -128,7 +128,7 @@ export class TokensForm extends React.PureComponent<Props, State> {
     return projects;
   };
 
-  constructTokenTypeOptions = (projects: BasicSelectOption[]) => {
+  constructTokenTypeOptions = (projects: LabelValueSelectOption[]) => {
     const { currentUser } = this.props;
 
     const tokenTypeOptions = [
@@ -256,7 +256,7 @@ export class TokensForm extends React.PureComponent<Props, State> {
     this.setState({ newTokenType: value });
   };
 
-  handleProjectChange = (selectedProject: BasicSelectOption) => {
+  handleProjectChange = (selectedProject: LabelValueSelectOption) => {
     this.setState({ selectedProject });
   };
 
@@ -300,7 +300,7 @@ export class TokensForm extends React.PureComponent<Props, State> {
                 {translate('users.tokens.type')}
               </label>
               <Select
-                id="token-select-type"
+                inputId="token-select-type"
                 className="spacer-top it__token-type"
                 isSearchable={false}
                 onChange={this.handleNewTokenTypeChange}
@@ -319,7 +319,7 @@ export class TokensForm extends React.PureComponent<Props, State> {
                   {translate('users.tokens.project')}
                 </label>
                 <Select
-                  id="token-select-project"
+                  inputId="token-select-project"
                   className="spacer-top it__project"
                   onChange={this.handleProjectChange}
                   options={projects}
@@ -335,7 +335,7 @@ export class TokensForm extends React.PureComponent<Props, State> {
             {translate('users.tokens.expires_in')}
           </label>
           <Select
-            id="token-select-expiration"
+            inputId="token-select-expiration"
             className="spacer-top"
             isSearchable={false}
             onChange={this.handleNewTokenExpirationChange}

diff --git a/server/sonar-web/src/main/js/components/controls/Select.tsx b/server/sonar-web/src/main/js/components/controls/Select.tsx
index 8264eb6e4b7616cc415aaee72c1a0fb54231f26a..4b4183571343ddcc2d15c956676ef3b3fb94ff31 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/Select.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Select.tsx
@@ -22,20 +22,17 @@ import classNames from 'classnames';
 import { omit } from 'lodash';
 import * as React from 'react';
 import ReactSelect, {
+  ClearIndicatorProps,
   components,
-  GroupTypeBase,
-  IndicatorProps,
-  NamedProps,
-  OptionProps,
-  OptionTypeBase,
+  DropdownIndicatorProps,
+  GroupBase,
+  LoadingIndicatorProps,
+  MultiValueRemoveProps,
+  Props as NamedProps,
   StylesConfig,
 } from 'react-select';
 import AsyncReactSelect, { AsyncProps } from 'react-select/async';
-import AsyncCreatableReactSelect, {
-  Props as AsyncCreatableProps,
-} from 'react-select/async-creatable';
-import { LoadingIndicatorProps } from 'react-select/src/components/indicators';
-import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
+import AsyncCreatableReactSelect, { AsyncCreatableProps } from 'react-select/async-creatable';
 import { colors, others, sizes, zIndexes } from '../../app/theme';
 import { ClearButton } from './buttons';
 
@@ -48,9 +45,9 @@ const ArrowSpan = styled.span`
   width: 0;
 `;
 
-export interface BasicSelectOption {
+export interface LabelValueSelectOption<V = string> {
   label: string;
-  value: string;
+  value: V;
 }
 
 interface StyleExtensionProps {
@@ -58,31 +55,30 @@ interface StyleExtensionProps {
 }
 
 export function dropdownIndicator<
-  Option extends OptionTypeBase,
-  IsMulti extends boolean = false,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
->({ innerProps }: IndicatorProps<Option, IsMulti, Group>) {
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({ innerProps }: DropdownIndicatorProps<Option, IsMulti, Group>) {
   return <ArrowSpan {...innerProps} />;
 }
 
 export function clearIndicator<
-  Option extends OptionTypeBase,
-  IsMulti extends boolean = false,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
->({ innerProps }: IndicatorProps<Option, IsMulti, Group>) {
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(props: ClearIndicatorProps<Option, IsMulti, Group>) {
+  const { innerProps } = props;
   return (
-    <ClearButton
-      className="button-tiny spacer-left spacer-right text-middle"
-      iconProps={{ size: 12 }}
-      {...innerProps}
-    />
+    <div {...innerProps} className="spacer-left spacer-right">
+      <ClearButton className="button-tiny" iconProps={{ size: 12 }} />
+    </div>
   );
 }
 
 export function loadingIndicator<
-  Option extends OptionTypeBase,
-  IsMulti extends boolean,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
 >({ innerProps }: LoadingIndicatorProps<Option, IsMulti, Group>) {
   return (
     <i className={classNames('deferred-spinner spacer-left spacer-right', innerProps.className)} />
@@ -90,27 +86,22 @@ export function loadingIndicator<
 }
 
 export function multiValueRemove<
-  Option extends OptionTypeBase,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
->(props: MultiValueRemoveProps<Option, Group>) {
-  return <div {...props.innerProps}>×</div>;
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(props: MultiValueRemoveProps<Option, IsMulti, Group>) {
+  return <components.MultiValueRemove {...props}>&times;</components.MultiValueRemove>;
 }
 
-export type SelectOptionProps<T extends OptionTypeBase, IsMulti extends boolean> = OptionProps<
-  T,
-  IsMulti
->;
-export const SelectOption = components.Option;
-
 /* Keeping it as a class to simplify a dozen tests */
 export default class Select<
-  Option extends OptionTypeBase,
-  IsMulti extends boolean = false,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
 > extends React.Component<NamedProps<Option, IsMulti, Group> & StyleExtensionProps> {
   render() {
     return (
-      <ReactSelect
+      <ReactSelect<Option, IsMulti, Group>
         {...omit(this.props, 'className', 'large')}
         styles={selectStyle<Option, IsMulti, Group>(this.props)}
         className={classNames('react-select', this.props.className)}
@@ -127,14 +118,14 @@ export default class Select<
 }
 
 export function CreatableSelect<
-  Option extends OptionTypeBase,
-  isMulti extends boolean,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
->(props: AsyncCreatableProps<Option, isMulti, Group>) {
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(props: AsyncCreatableProps<Option, IsMulti, Group>) {
   return (
-    <AsyncCreatableReactSelect
+    <AsyncCreatableReactSelect<Option, IsMulti, Group>
       {...props}
-      styles={selectStyle<Option, isMulti, Group>()}
+      styles={selectStyle<Option, IsMulti, Group>()}
       components={{
         ...props.components,
         DropdownIndicator: dropdownIndicator,
@@ -147,12 +138,16 @@ export function CreatableSelect<
 }
 
 export function SearchSelect<
-  Option extends OptionTypeBase,
-  IsMulti extends boolean,
-  Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
->(props: NamedProps<Option, IsMulti, Group> & AsyncProps<Option, Group> & StyleExtensionProps) {
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>(
+  props: NamedProps<Option, IsMulti, Group> &
+    AsyncProps<Option, IsMulti, Group> &
+    StyleExtensionProps
+) {
   return (
-    <AsyncReactSelect
+    <AsyncReactSelect<Option, IsMulti, Group>
       {...omit(props, 'className', 'large')}
       styles={selectStyle<Option, IsMulti, Group>(props)}
       className={classNames('react-select', props.className)}
@@ -169,11 +164,13 @@ export function SearchSelect<
 }
 
 export function selectStyle<
-  Option extends OptionTypeBase,
-  IsMulti extends boolean,
-  Group extends GroupTypeBase<Option>
+  Option = LabelValueSelectOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
 >(
-  props?: NamedProps<Option, IsMulti, Group> & AsyncProps<Option, Group> & StyleExtensionProps
+  props?: NamedProps<Option, IsMulti, Group> &
+    AsyncProps<Option, IsMulti, Group> &
+    StyleExtensionProps
 ): StylesConfig<Option, IsMulti, Group> {
   return {
     container: () => ({
@@ -247,6 +244,12 @@ export function selectStyle<
       width: '20px',
       paddingRight: '5px',
       flex: 1,
+      display: 'flex',
+      justifyContent: 'end',
+      alignItems: 'center',
+    }),
+    indicatorSeparator: () => ({
+      display: 'none',
     }),
     multiValue: () => ({
       display: 'inline-block',

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx
index af90bfeb906e0c4b1238fc10a77c98452f8bc4ad..33ce945bec82c152290498fbbca247652e4780bd 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/Select-test.tsx
@@ -21,14 +21,16 @@ import { shallow } from 'enzyme';
 import * as React from 'react';
 import {
   components,
-  GroupTypeBase,
+  GroupBase,
   InputProps,
-  OptionTypeBase,
+  LoadingIndicatorProps,
+  MultiValueRemoveProps,
   Props as ReactSelectProps,
 } from 'react-select';
-import { LoadingIndicatorProps } from 'react-select/src/components/indicators';
-import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
-import { mockReactSelectIndicatorProps } from '../../../helpers/mocks/react-select';
+import {
+  mockReactSelectClearIndicatorProps,
+  mockReactSelectDropdownIndicatorProps,
+} from '../../../helpers/mocks/react-select';
 import Select, {
   clearIndicator,
   CreatableSelect,
@@ -60,11 +62,13 @@ describe('Select', () => {
   });
 
   it('should render clearIndicator correctly', () => {
-    expect(clearIndicator(mockReactSelectIndicatorProps({ value: '' }))).toMatchSnapshot();
+    expect(clearIndicator(mockReactSelectClearIndicatorProps({ value: '' }))).toMatchSnapshot();
   });
 
   it('should render dropdownIndicator correctly', () => {
-    expect(dropdownIndicator(mockReactSelectIndicatorProps({ value: '' }))).toMatchSnapshot();
+    expect(
+      dropdownIndicator(mockReactSelectDropdownIndicatorProps({ value: '' }))
+    ).toMatchSnapshot();
   });
 
   it('should render loadingIndicator correctly', () => {
@@ -81,9 +85,9 @@ describe('Select', () => {
   });
 
   function shallowRender<
-    Option extends OptionTypeBase,
-    IsMulti extends boolean = false,
-    Group extends GroupTypeBase<Option> = GroupTypeBase<Option>
+    Option = unknown,
+    IsMulti extends boolean = boolean,
+    Group extends GroupBase<Option> = GroupBase<Option>
   >(props: Partial<ReactSelectProps<Option, IsMulti, Group>> = {}) {
     return shallow<ReactSelectProps<Option, IsMulti, Group>>(<Select {...props} />);
   }

diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap
index bca0cddafdf9784a4853c6e3c5d90160c3c2995a..8413389018c61bbb400c36fa13204a6f61a35122 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Select-test.tsx.snap
@@ -1,18 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Select should render clearIndicator correctly 1`] = `
-<ClearButton
-  className="button-tiny spacer-left spacer-right text-middle"
-  iconProps={
-    {
-      "size": 12,
+<div
+  className="spacer-left spacer-right"
+>
+  <ClearButton
+    className="button-tiny"
+    iconProps={
+      {
+        "size": 12,
+      }
     }
-  }
-/>
+  />
+</div>
 `;
 
 exports[`Select should render complex select component: other props 1`] = `
-<StateManager
+<ForwardRef
   className="react-select"
   classNamePrefix="react-select"
   components={
@@ -23,15 +27,13 @@ exports[`Select should render complex select component: other props 1`] = `
       "MultiValueRemove": [Function],
     }
   }
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={null}
   isClearable={true}
   isLoading={true}
   styles={
     {
       "container": [Function],
       "control": [Function],
+      "indicatorSeparator": [Function],
       "indicatorsContainer": [Function],
       "input": [Function],
       "loadingIndicator": [Function],
@@ -52,7 +54,7 @@ exports[`Select should render complex select component: other props 1`] = `
 `;
 
 exports[`Select should render correctly: default 1`] = `
-<StateManager
+<ForwardRef
   className="react-select"
   classNamePrefix="react-select"
   components={
@@ -62,13 +64,11 @@ exports[`Select should render correctly: default 1`] = `
       "MultiValueRemove": [Function],
     }
   }
-  defaultInputValue=""
-  defaultMenuIsOpen={false}
-  defaultValue={null}
   styles={
     {
       "container": [Function],
       "control": [Function],
+      "indicatorSeparator": [Function],
       "indicatorsContainer": [Function],
       "input": [Function],
       "loadingIndicator": [Function],
@@ -97,137 +97,2228 @@ exports[`Select should render loadingIndicator correctly 1`] = `
 `;
 
 exports[`Select should render multiValueRemove correctly 1`] = `
-<div>
+<MultiValueRemove
+  innerProps={{}}
+>
   ×
-</div>
+</MultiValueRemove>
 `;
 
 exports[`should render CreatableSelect correctly 1`] = `
-<Creatable
-  allowCreateWhileLoading={false}
-  cacheOptions={false}
-  components={
+<SelectContainer
+  clearValue={[Function]}
+  cx={[Function]}
+  getClassNames={[Function]}
+  getStyles={[Function]}
+  getValue={[Function]}
+  hasValue={false}
+  innerProps={
     {
-      "ClearIndicator": [Function],
-      "DropdownIndicator": [Function],
-      "LoadingIndicator": [Function],
-      "MultiValueRemove": [Function],
+      "id": undefined,
+      "onKeyDown": [Function],
     }
   }
-  createOptionPosition="last"
-  defaultOptions={false}
-  filterOption={null}
-  formatCreateLabel={[Function]}
-  getNewOptionData={[Function]}
-  getOptionLabel={[Function]}
-  getOptionValue={[Function]}
-  inputValue=""
-  isLoading={false}
-  isValidNewOption={[Function]}
-  menuIsOpen={false}
-  onChange={[Function]}
-  onInputChange={[Function]}
-  onMenuClose={[Function]}
-  onMenuOpen={[Function]}
+  isDisabled={false}
+  isFocused={false}
+  isMulti={false}
+  isRtl={false}
   options={[]}
-  styles={
+  selectOption={[Function]}
+  selectProps={
     {
-      "container": [Function],
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "input": [Function],
-      "loadingIndicator": [Function],
-      "menu": [Function],
-      "menuList": [Function],
-      "menuPortal": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
+      "aria-live": "polite",
+      "backspaceRemovesValue": true,
+      "blurInputOnSelect": true,
+      "captureMenuScroll": false,
+      "classNames": {},
+      "closeMenuOnScroll": false,
+      "closeMenuOnSelect": true,
+      "components": {
+        "ClearIndicator": [Function],
+        "DropdownIndicator": [Function],
+        "LoadingIndicator": [Function],
+        "MultiValueRemove": [Function],
+      },
+      "controlShouldRenderValue": true,
+      "escapeClearsValue": false,
+      "filterOption": null,
+      "formatGroupLabel": [Function],
+      "getOptionLabel": [Function],
+      "getOptionValue": [Function],
+      "inputValue": "",
+      "isDisabled": false,
+      "isLoading": false,
+      "isMulti": false,
+      "isOptionDisabled": [Function],
+      "isRtl": false,
+      "isSearchable": true,
+      "loadingMessage": [Function],
+      "maxMenuHeight": 300,
+      "menuIsOpen": false,
+      "menuPlacement": "bottom",
+      "menuPosition": "absolute",
+      "menuShouldBlockScroll": false,
+      "menuShouldScrollIntoView": true,
+      "minMenuHeight": 140,
       "noOptionsMessage": [Function],
-      "option": [Function],
-      "placeholder": [Function],
-      "singleValue": [Function],
-      "valueContainer": [Function],
+      "onChange": [Function],
+      "onInputChange": [Function],
+      "onMenuClose": [Function],
+      "onMenuOpen": [Function],
+      "openMenuOnClick": true,
+      "openMenuOnFocus": false,
+      "options": [],
+      "pageSize": 5,
+      "placeholder": "Select...",
+      "screenReaderStatus": [Function],
+      "styles": {
+        "container": [Function],
+        "control": [Function],
+        "indicatorSeparator": [Function],
+        "indicatorsContainer": [Function],
+        "input": [Function],
+        "loadingIndicator": [Function],
+        "menu": [Function],
+        "menuList": [Function],
+        "menuPortal": [Function],
+        "multiValue": [Function],
+        "multiValueLabel": [Function],
+        "multiValueRemove": [Function],
+        "noOptionsMessage": [Function],
+        "option": [Function],
+        "placeholder": [Function],
+        "singleValue": [Function],
+        "valueContainer": [Function],
+      },
+      "tabIndex": 0,
+      "tabSelectsValue": true,
+      "unstyled": false,
+      "value": null,
     }
   }
-  value={null}
-/>
+  setValue={[Function]}
+  theme={
+    {
+      "borderRadius": 4,
+      "colors": {
+        "danger": "#DE350B",
+        "dangerLight": "#FFBDAD",
+        "neutral0": "hsl(0, 0%, 100%)",
+        "neutral10": "hsl(0, 0%, 90%)",
+        "neutral20": "hsl(0, 0%, 80%)",
+        "neutral30": "hsl(0, 0%, 70%)",
+        "neutral40": "hsl(0, 0%, 60%)",
+        "neutral5": "hsl(0, 0%, 95%)",
+        "neutral50": "hsl(0, 0%, 50%)",
+        "neutral60": "hsl(0, 0%, 40%)",
+        "neutral70": "hsl(0, 0%, 30%)",
+        "neutral80": "hsl(0, 0%, 20%)",
+        "neutral90": "hsl(0, 0%, 10%)",
+        "primary": "#2684FF",
+        "primary25": "#DEEBFF",
+        "primary50": "#B2D4FF",
+        "primary75": "#4C9AFF",
+      },
+      "spacing": {
+        "baseUnit": 4,
+        "controlHeight": 38,
+        "menuGutter": 8,
+      },
+    }
+  }
+>
+  <LiveRegion
+    ariaSelection={null}
+    clearValue={[Function]}
+    cx={[Function]}
+    focusableOptions={[]}
+    focusedOption={null}
+    focusedValue={null}
+    getClassNames={[Function]}
+    getStyles={[Function]}
+    getValue={[Function]}
+    hasValue={false}
+    id="react-select-2-live-region"
+    isFocused={false}
+    isMulti={false}
+    isRtl={false}
+    options={[]}
+    selectOption={[Function]}
+    selectProps={
+      {
+        "aria-live": "polite",
+        "backspaceRemovesValue": true,
+        "blurInputOnSelect": true,
+        "captureMenuScroll": false,
+        "classNames": {},
+        "closeMenuOnScroll": false,
+        "closeMenuOnSelect": true,
+        "components": {
+          "ClearIndicator": [Function],
+          "DropdownIndicator": [Function],
+          "LoadingIndicator": [Function],
+          "MultiValueRemove": [Function],
+        },
+        "controlShouldRenderValue": true,
+        "escapeClearsValue": false,
+        "filterOption": null,
+        "formatGroupLabel": [Function],
+        "getOptionLabel": [Function],
+        "getOptionValue": [Function],
+        "inputValue": "",
+        "isDisabled": false,
+        "isLoading": false,
+        "isMulti": false,
+        "isOptionDisabled": [Function],
+        "isRtl": false,
+        "isSearchable": true,
+        "loadingMessage": [Function],
+        "maxMenuHeight": 300,
+        "menuIsOpen": false,
+        "menuPlacement": "bottom",
+        "menuPosition": "absolute",
+        "menuShouldBlockScroll": false,
+        "menuShouldScrollIntoView": true,
+        "minMenuHeight": 140,
+        "noOptionsMessage": [Function],
+        "onChange": [Function],
+        "onInputChange": [Function],
+        "onMenuClose": [Function],
+        "onMenuOpen": [Function],
+        "openMenuOnClick": true,
+        "openMenuOnFocus": false,
+        "options": [],
+        "pageSize": 5,
+        "placeholder": "Select...",
+        "screenReaderStatus": [Function],
+        "styles": {
+          "container": [Function],
+          "control": [Function],
+          "indicatorSeparator": [Function],
+          "indicatorsContainer": [Function],
+          "input": [Function],
+          "loadingIndicator": [Function],
+          "menu": [Function],
+          "menuList": [Function],
+          "menuPortal": [Function],
+          "multiValue": [Function],
+          "multiValueLabel": [Function],
+          "multiValueRemove": [Function],
+          "noOptionsMessage": [Function],
+          "option": [Function],
+          "placeholder": [Function],
+          "singleValue": [Function],
+          "valueContainer": [Function],
+        },
+        "tabIndex": 0,
+        "tabSelectsValue": true,
+        "unstyled": false,
+        "value": null,
+      }
+    }
+    selectValue={[]}
+    setValue={[Function]}
+    theme={
+      {
+        "borderRadius": 4,
+        "colors": {
+          "danger": "#DE350B",
+          "dangerLight": "#FFBDAD",
+          "neutral0": "hsl(0, 0%, 100%)",
+          "neutral10": "hsl(0, 0%, 90%)",
+          "neutral20": "hsl(0, 0%, 80%)",
+          "neutral30": "hsl(0, 0%, 70%)",
+          "neutral40": "hsl(0, 0%, 60%)",
+          "neutral5": "hsl(0, 0%, 95%)",
+          "neutral50": "hsl(0, 0%, 50%)",
+          "neutral60": "hsl(0, 0%, 40%)",
+          "neutral70": "hsl(0, 0%, 30%)",
+          "neutral80": "hsl(0, 0%, 20%)",
+          "neutral90": "hsl(0, 0%, 10%)",
+          "primary": "#2684FF",
+          "primary25": "#DEEBFF",
+          "primary50": "#B2D4FF",
+          "primary75": "#4C9AFF",
+        },
+        "spacing": {
+          "baseUnit": 4,
+          "controlHeight": 38,
+          "menuGutter": 8,
+        },
+      }
+    }
+  />
+  <Control
+    clearValue={[Function]}
+    cx={[Function]}
+    getClassNames={[Function]}
+    getStyles={[Function]}
+    getValue={[Function]}
+    hasValue={false}
+    innerProps={
+      {
+        "onMouseDown": [Function],
+        "onTouchEnd": [Function],
+      }
+    }
+    innerRef={[Function]}
+    isDisabled={false}
+    isFocused={false}
+    isMulti={false}
+    isRtl={false}
+    menuIsOpen={false}
+    options={[]}
+    selectOption={[Function]}
+    selectProps={
+      {
+        "aria-live": "polite",
+        "backspaceRemovesValue": true,
+        "blurInputOnSelect": true,
+        "captureMenuScroll": false,
+        "classNames": {},
+        "closeMenuOnScroll": false,
+        "closeMenuOnSelect": true,
+        "components": {
+          "ClearIndicator": [Function],
+          "DropdownIndicator": [Function],
+          "LoadingIndicator": [Function],
+          "MultiValueRemove": [Function],
+        },
+        "controlShouldRenderValue": true,
+        "escapeClearsValue": false,
+        "filterOption": null,
+        "formatGroupLabel": [Function],
+        "getOptionLabel": [Function],
+        "getOptionValue": [Function],
+        "inputValue": "",
+        "isDisabled": false,
+        "isLoading": false,
+        "isMulti": false,
+        "isOptionDisabled": [Function],
+        "isRtl": false,
+        "isSearchable": true,
+        "loadingMessage": [Function],
+        "maxMenuHeight": 300,
+        "menuIsOpen": false,
+        "menuPlacement": "bottom",
+        "menuPosition": "absolute",
+        "menuShouldBlockScroll": false,
+        "menuShouldScrollIntoView": true,
+        "minMenuHeight": 140,
+        "noOptionsMessage": [Function],
+        "onChange": [Function],
+        "onInputChange": [Function],
+        "onMenuClose": [Function],
+        "onMenuOpen": [Function],
+        "openMenuOnClick": true,
+        "openMenuOnFocus": false,
+        "options": [],
+        "pageSize": 5,
+        "placeholder": "Select...",
+        "screenReaderStatus": [Function],
+        "styles": {
+          "container": [Function],
+          "control": [Function],
+          "indicatorSeparator": [Function],
+          "indicatorsContainer": [Function],
+          "input": [Function],
+          "loadingIndicator": [Function],
+          "menu": [Function],
+          "menuList": [Function],
+          "menuPortal": [Function],
+          "multiValue": [Function],
+          "multiValueLabel": [Function],
+          "multiValueRemove": [Function],
+          "noOptionsMessage": [Function],
+          "option": [Function],
+          "placeholder": [Function],
+          "singleValue": [Function],
+          "valueContainer": [Function],
+        },
+        "tabIndex": 0,
+        "tabSelectsValue": true,
+        "unstyled": false,
+        "value": null,
+      }
+    }
+    setValue={[Function]}
+    theme={
+      {
+        "borderRadius": 4,
+        "colors": {
+          "danger": "#DE350B",
+          "dangerLight": "#FFBDAD",
+          "neutral0": "hsl(0, 0%, 100%)",
+          "neutral10": "hsl(0, 0%, 90%)",
+          "neutral20": "hsl(0, 0%, 80%)",
+          "neutral30": "hsl(0, 0%, 70%)",
+          "neutral40": "hsl(0, 0%, 60%)",
+          "neutral5": "hsl(0, 0%, 95%)",
+          "neutral50": "hsl(0, 0%, 50%)",
+          "neutral60": "hsl(0, 0%, 40%)",
+          "neutral70": "hsl(0, 0%, 30%)",
+          "neutral80": "hsl(0, 0%, 20%)",
+          "neutral90": "hsl(0, 0%, 10%)",
+          "primary": "#2684FF",
+          "primary25": "#DEEBFF",
+          "primary50": "#B2D4FF",
+          "primary75": "#4C9AFF",
+        },
+        "spacing": {
+          "baseUnit": 4,
+          "controlHeight": 38,
+          "menuGutter": 8,
+        },
+      }
+    }
+  >
+    <ValueContainer
+      clearValue={[Function]}
+      cx={[Function]}
+      getClassNames={[Function]}
+      getStyles={[Function]}
+      getValue={[Function]}
+      hasValue={false}
+      isDisabled={false}
+      isMulti={false}
+      isRtl={false}
+      options={[]}
+      selectOption={[Function]}
+      selectProps={
+        {
+          "aria-live": "polite",
+          "backspaceRemovesValue": true,
+          "blurInputOnSelect": true,
+          "captureMenuScroll": false,
+          "classNames": {},
+          "closeMenuOnScroll": false,
+          "closeMenuOnSelect": true,
+          "components": {
+            "ClearIndicator": [Function],
+            "DropdownIndicator": [Function],
+            "LoadingIndicator": [Function],
+            "MultiValueRemove": [Function],
+          },
+          "controlShouldRenderValue": true,
+          "escapeClearsValue": false,
+          "filterOption": null,
+          "formatGroupLabel": [Function],
+          "getOptionLabel": [Function],
+          "getOptionValue": [Function],
+          "inputValue": "",
+          "isDisabled": false,
+          "isLoading": false,
+          "isMulti": false,
+          "isOptionDisabled": [Function],
+          "isRtl": false,
+          "isSearchable": true,
+          "loadingMessage": [Function],
+          "maxMenuHeight": 300,
+          "menuIsOpen": false,
+          "menuPlacement": "bottom",
+          "menuPosition": "absolute",
+          "menuShouldBlockScroll": false,
+          "menuShouldScrollIntoView": true,
+          "minMenuHeight": 140,
+          "noOptionsMessage": [Function],
+          "onChange": [Function],
+          "onInputChange": [Function],
+          "onMenuClose": [Function],
+          "onMenuOpen": [Function],
+          "openMenuOnClick": true,
+          "openMenuOnFocus": false,
+          "options": [],
+          "pageSize": 5,
+          "placeholder": "Select...",
+          "screenReaderStatus": [Function],
+          "styles": {
+            "container": [Function],
+            "control": [Function],
+            "indicatorSeparator": [Function],
+            "indicatorsContainer": [Function],
+            "input": [Function],
+            "loadingIndicator": [Function],
+            "menu": [Function],
+            "menuList": [Function],
+            "menuPortal": [Function],
+            "multiValue": [Function],
+            "multiValueLabel": [Function],
+            "multiValueRemove": [Function],
+            "noOptionsMessage": [Function],
+            "option": [Function],
+            "placeholder": [Function],
+            "singleValue": [Function],
+            "valueContainer": [Function],
+          },
+          "tabIndex": 0,
+          "tabSelectsValue": true,
+          "unstyled": false,
+          "value": null,
+        }
+      }
+      setValue={[Function]}
+      theme={
+        {
+          "borderRadius": 4,
+          "colors": {
+            "danger": "#DE350B",
+            "dangerLight": "#FFBDAD",
+            "neutral0": "hsl(0, 0%, 100%)",
+            "neutral10": "hsl(0, 0%, 90%)",
+            "neutral20": "hsl(0, 0%, 80%)",
+            "neutral30": "hsl(0, 0%, 70%)",
+            "neutral40": "hsl(0, 0%, 60%)",
+            "neutral5": "hsl(0, 0%, 95%)",
+            "neutral50": "hsl(0, 0%, 50%)",
+            "neutral60": "hsl(0, 0%, 40%)",
+            "neutral70": "hsl(0, 0%, 30%)",
+            "neutral80": "hsl(0, 0%, 20%)",
+            "neutral90": "hsl(0, 0%, 10%)",
+            "primary": "#2684FF",
+            "primary25": "#DEEBFF",
+            "primary50": "#B2D4FF",
+            "primary75": "#4C9AFF",
+          },
+          "spacing": {
+            "baseUnit": 4,
+            "controlHeight": 38,
+            "menuGutter": 8,
+          },
+        }
+      }
+    >
+      <Placeholder
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        innerProps={
+          {
+            "id": "react-select-2-placeholder",
+          }
+        }
+        isDisabled={false}
+        isFocused={false}
+        isMulti={false}
+        isRtl={false}
+        key="placeholder"
+        options={[]}
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+      >
+        Select...
+      </Placeholder>
+      <Input
+        aria-autocomplete="list"
+        aria-describedby="react-select-2-placeholder"
+        aria-expanded={false}
+        aria-haspopup={true}
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect="off"
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        id="react-select-2-input"
+        innerRef={[Function]}
+        isDisabled={false}
+        isHidden={false}
+        isMulti={false}
+        isRtl={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        options={[]}
+        role="combobox"
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        spellCheck="false"
+        tabIndex={0}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+        type="text"
+        value=""
+      />
+    </ValueContainer>
+    <IndicatorsContainer
+      clearValue={[Function]}
+      cx={[Function]}
+      getClassNames={[Function]}
+      getStyles={[Function]}
+      getValue={[Function]}
+      hasValue={false}
+      isDisabled={false}
+      isMulti={false}
+      isRtl={false}
+      options={[]}
+      selectOption={[Function]}
+      selectProps={
+        {
+          "aria-live": "polite",
+          "backspaceRemovesValue": true,
+          "blurInputOnSelect": true,
+          "captureMenuScroll": false,
+          "classNames": {},
+          "closeMenuOnScroll": false,
+          "closeMenuOnSelect": true,
+          "components": {
+            "ClearIndicator": [Function],
+            "DropdownIndicator": [Function],
+            "LoadingIndicator": [Function],
+            "MultiValueRemove": [Function],
+          },
+          "controlShouldRenderValue": true,
+          "escapeClearsValue": false,
+          "filterOption": null,
+          "formatGroupLabel": [Function],
+          "getOptionLabel": [Function],
+          "getOptionValue": [Function],
+          "inputValue": "",
+          "isDisabled": false,
+          "isLoading": false,
+          "isMulti": false,
+          "isOptionDisabled": [Function],
+          "isRtl": false,
+          "isSearchable": true,
+          "loadingMessage": [Function],
+          "maxMenuHeight": 300,
+          "menuIsOpen": false,
+          "menuPlacement": "bottom",
+          "menuPosition": "absolute",
+          "menuShouldBlockScroll": false,
+          "menuShouldScrollIntoView": true,
+          "minMenuHeight": 140,
+          "noOptionsMessage": [Function],
+          "onChange": [Function],
+          "onInputChange": [Function],
+          "onMenuClose": [Function],
+          "onMenuOpen": [Function],
+          "openMenuOnClick": true,
+          "openMenuOnFocus": false,
+          "options": [],
+          "pageSize": 5,
+          "placeholder": "Select...",
+          "screenReaderStatus": [Function],
+          "styles": {
+            "container": [Function],
+            "control": [Function],
+            "indicatorSeparator": [Function],
+            "indicatorsContainer": [Function],
+            "input": [Function],
+            "loadingIndicator": [Function],
+            "menu": [Function],
+            "menuList": [Function],
+            "menuPortal": [Function],
+            "multiValue": [Function],
+            "multiValueLabel": [Function],
+            "multiValueRemove": [Function],
+            "noOptionsMessage": [Function],
+            "option": [Function],
+            "placeholder": [Function],
+            "singleValue": [Function],
+            "valueContainer": [Function],
+          },
+          "tabIndex": 0,
+          "tabSelectsValue": true,
+          "unstyled": false,
+          "value": null,
+        }
+      }
+      setValue={[Function]}
+      theme={
+        {
+          "borderRadius": 4,
+          "colors": {
+            "danger": "#DE350B",
+            "dangerLight": "#FFBDAD",
+            "neutral0": "hsl(0, 0%, 100%)",
+            "neutral10": "hsl(0, 0%, 90%)",
+            "neutral20": "hsl(0, 0%, 80%)",
+            "neutral30": "hsl(0, 0%, 70%)",
+            "neutral40": "hsl(0, 0%, 60%)",
+            "neutral5": "hsl(0, 0%, 95%)",
+            "neutral50": "hsl(0, 0%, 50%)",
+            "neutral60": "hsl(0, 0%, 40%)",
+            "neutral70": "hsl(0, 0%, 30%)",
+            "neutral80": "hsl(0, 0%, 20%)",
+            "neutral90": "hsl(0, 0%, 10%)",
+            "primary": "#2684FF",
+            "primary25": "#DEEBFF",
+            "primary50": "#B2D4FF",
+            "primary75": "#4C9AFF",
+          },
+          "spacing": {
+            "baseUnit": 4,
+            "controlHeight": 38,
+            "menuGutter": 8,
+          },
+        }
+      }
+    >
+      <IndicatorSeparator
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        isDisabled={false}
+        isFocused={false}
+        isMulti={false}
+        isRtl={false}
+        options={[]}
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+      />
+      <dropdownIndicator
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        innerProps={
+          {
+            "aria-hidden": "true",
+            "onMouseDown": [Function],
+            "onTouchEnd": [Function],
+          }
+        }
+        isDisabled={false}
+        isFocused={false}
+        isMulti={false}
+        isRtl={false}
+        options={[]}
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+      />
+    </IndicatorsContainer>
+  </Control>
+</SelectContainer>
 `;
 
 exports[`should render SearchSelect correctly 1`] = `
-<Select
-  aria-live="polite"
-  backspaceRemovesValue={true}
-  blurInputOnSelect={true}
-  cacheOptions={false}
-  captureMenuScroll={false}
+<SelectContainer
   className="react-select"
-  classNamePrefix="react-select"
-  closeMenuOnScroll={false}
-  closeMenuOnSelect={true}
-  components={
+  clearValue={[Function]}
+  cx={[Function]}
+  getClassNames={[Function]}
+  getStyles={[Function]}
+  getValue={[Function]}
+  hasValue={false}
+  innerProps={
     {
-      "ClearIndicator": [Function],
-      "DropdownIndicator": [Function],
-      "LoadingIndicator": [Function],
-      "MultiValueRemove": [Function],
+      "id": undefined,
+      "onKeyDown": [Function],
     }
   }
-  controlShouldRenderValue={true}
-  defaultOptions={false}
-  escapeClearsValue={false}
-  filterOption={null}
-  formatGroupLabel={[Function]}
-  getOptionLabel={[Function]}
-  getOptionValue={[Function]}
-  inputValue=""
   isDisabled={false}
-  isLoading={false}
+  isFocused={false}
   isMulti={false}
-  isOptionDisabled={[Function]}
   isRtl={false}
-  isSearchable={true}
-  loadingMessage={[Function]}
-  maxMenuHeight={300}
-  menuIsOpen={false}
-  menuPlacement="bottom"
-  menuPosition="absolute"
-  menuShouldBlockScroll={false}
-  menuShouldScrollIntoView={true}
-  minMenuHeight={140}
-  noOptionsMessage={[Function]}
-  onChange={[Function]}
-  onInputChange={[Function]}
-  onMenuClose={[Function]}
-  onMenuOpen={[Function]}
-  openMenuOnClick={true}
-  openMenuOnFocus={false}
   options={[]}
-  pageSize={5}
-  placeholder="Select..."
-  screenReaderStatus={[Function]}
-  styles={
+  selectOption={[Function]}
+  selectProps={
     {
-      "container": [Function],
-      "control": [Function],
-      "indicatorsContainer": [Function],
-      "input": [Function],
-      "loadingIndicator": [Function],
-      "menu": [Function],
-      "menuList": [Function],
-      "menuPortal": [Function],
-      "multiValue": [Function],
-      "multiValueLabel": [Function],
-      "multiValueRemove": [Function],
+      "aria-live": "polite",
+      "backspaceRemovesValue": true,
+      "blurInputOnSelect": true,
+      "captureMenuScroll": false,
+      "className": "react-select",
+      "classNamePrefix": "react-select",
+      "classNames": {},
+      "closeMenuOnScroll": false,
+      "closeMenuOnSelect": true,
+      "components": {
+        "ClearIndicator": [Function],
+        "DropdownIndicator": [Function],
+        "LoadingIndicator": [Function],
+        "MultiValueRemove": [Function],
+      },
+      "controlShouldRenderValue": true,
+      "escapeClearsValue": false,
+      "filterOption": null,
+      "formatGroupLabel": [Function],
+      "getOptionLabel": [Function],
+      "getOptionValue": [Function],
+      "inputValue": "",
+      "isDisabled": false,
+      "isLoading": false,
+      "isMulti": false,
+      "isOptionDisabled": [Function],
+      "isRtl": false,
+      "isSearchable": true,
+      "loadingMessage": [Function],
+      "maxMenuHeight": 300,
+      "menuIsOpen": false,
+      "menuPlacement": "bottom",
+      "menuPosition": "absolute",
+      "menuShouldBlockScroll": false,
+      "menuShouldScrollIntoView": true,
+      "minMenuHeight": 140,
       "noOptionsMessage": [Function],
-      "option": [Function],
-      "placeholder": [Function],
-      "singleValue": [Function],
-      "valueContainer": [Function],
+      "onChange": [Function],
+      "onInputChange": [Function],
+      "onMenuClose": [Function],
+      "onMenuOpen": [Function],
+      "openMenuOnClick": true,
+      "openMenuOnFocus": false,
+      "options": [],
+      "pageSize": 5,
+      "placeholder": "Select...",
+      "screenReaderStatus": [Function],
+      "styles": {
+        "container": [Function],
+        "control": [Function],
+        "indicatorSeparator": [Function],
+        "indicatorsContainer": [Function],
+        "input": [Function],
+        "loadingIndicator": [Function],
+        "menu": [Function],
+        "menuList": [Function],
+        "menuPortal": [Function],
+        "multiValue": [Function],
+        "multiValueLabel": [Function],
+        "multiValueRemove": [Function],
+        "noOptionsMessage": [Function],
+        "option": [Function],
+        "placeholder": [Function],
+        "singleValue": [Function],
+        "valueContainer": [Function],
+      },
+      "tabIndex": 0,
+      "tabSelectsValue": true,
+      "unstyled": false,
+      "value": null,
     }
   }
-  tabIndex="0"
-  tabSelectsValue={true}
-  value={null}
-/>
+  setValue={[Function]}
+  theme={
+    {
+      "borderRadius": 4,
+      "colors": {
+        "danger": "#DE350B",
+        "dangerLight": "#FFBDAD",
+        "neutral0": "hsl(0, 0%, 100%)",
+        "neutral10": "hsl(0, 0%, 90%)",
+        "neutral20": "hsl(0, 0%, 80%)",
+        "neutral30": "hsl(0, 0%, 70%)",
+        "neutral40": "hsl(0, 0%, 60%)",
+        "neutral5": "hsl(0, 0%, 95%)",
+        "neutral50": "hsl(0, 0%, 50%)",
+        "neutral60": "hsl(0, 0%, 40%)",
+        "neutral70": "hsl(0, 0%, 30%)",
+        "neutral80": "hsl(0, 0%, 20%)",
+        "neutral90": "hsl(0, 0%, 10%)",
+        "primary": "#2684FF",
+        "primary25": "#DEEBFF",
+        "primary50": "#B2D4FF",
+        "primary75": "#4C9AFF",
+      },
+      "spacing": {
+        "baseUnit": 4,
+        "controlHeight": 38,
+        "menuGutter": 8,
+      },
+    }
+  }
+>
+  <LiveRegion
+    ariaSelection={null}
+    clearValue={[Function]}
+    cx={[Function]}
+    focusableOptions={[]}
+    focusedOption={null}
+    focusedValue={null}
+    getClassNames={[Function]}
+    getStyles={[Function]}
+    getValue={[Function]}
+    hasValue={false}
+    id="react-select-3-live-region"
+    isFocused={false}
+    isMulti={false}
+    isRtl={false}
+    options={[]}
+    selectOption={[Function]}
+    selectProps={
+      {
+        "aria-live": "polite",
+        "backspaceRemovesValue": true,
+        "blurInputOnSelect": true,
+        "captureMenuScroll": false,
+        "className": "react-select",
+        "classNamePrefix": "react-select",
+        "classNames": {},
+        "closeMenuOnScroll": false,
+        "closeMenuOnSelect": true,
+        "components": {
+          "ClearIndicator": [Function],
+          "DropdownIndicator": [Function],
+          "LoadingIndicator": [Function],
+          "MultiValueRemove": [Function],
+        },
+        "controlShouldRenderValue": true,
+        "escapeClearsValue": false,
+        "filterOption": null,
+        "formatGroupLabel": [Function],
+        "getOptionLabel": [Function],
+        "getOptionValue": [Function],
+        "inputValue": "",
+        "isDisabled": false,
+        "isLoading": false,
+        "isMulti": false,
+        "isOptionDisabled": [Function],
+        "isRtl": false,
+        "isSearchable": true,
+        "loadingMessage": [Function],
+        "maxMenuHeight": 300,
+        "menuIsOpen": false,
+        "menuPlacement": "bottom",
+        "menuPosition": "absolute",
+        "menuShouldBlockScroll": false,
+        "menuShouldScrollIntoView": true,
+        "minMenuHeight": 140,
+        "noOptionsMessage": [Function],
+        "onChange": [Function],
+        "onInputChange": [Function],
+        "onMenuClose": [Function],
+        "onMenuOpen": [Function],
+        "openMenuOnClick": true,
+        "openMenuOnFocus": false,
+        "options": [],
+        "pageSize": 5,
+        "placeholder": "Select...",
+        "screenReaderStatus": [Function],
+        "styles": {
+          "container": [Function],
+          "control": [Function],
+          "indicatorSeparator": [Function],
+          "indicatorsContainer": [Function],
+          "input": [Function],
+          "loadingIndicator": [Function],
+          "menu": [Function],
+          "menuList": [Function],
+          "menuPortal": [Function],
+          "multiValue": [Function],
+          "multiValueLabel": [Function],
+          "multiValueRemove": [Function],
+          "noOptionsMessage": [Function],
+          "option": [Function],
+          "placeholder": [Function],
+          "singleValue": [Function],
+          "valueContainer": [Function],
+        },
+        "tabIndex": 0,
+        "tabSelectsValue": true,
+        "unstyled": false,
+        "value": null,
+      }
+    }
+    selectValue={[]}
+    setValue={[Function]}
+    theme={
+      {
+        "borderRadius": 4,
+        "colors": {
+          "danger": "#DE350B",
+          "dangerLight": "#FFBDAD",
+          "neutral0": "hsl(0, 0%, 100%)",
+          "neutral10": "hsl(0, 0%, 90%)",
+          "neutral20": "hsl(0, 0%, 80%)",
+          "neutral30": "hsl(0, 0%, 70%)",
+          "neutral40": "hsl(0, 0%, 60%)",
+          "neutral5": "hsl(0, 0%, 95%)",
+          "neutral50": "hsl(0, 0%, 50%)",
+          "neutral60": "hsl(0, 0%, 40%)",
+          "neutral70": "hsl(0, 0%, 30%)",
+          "neutral80": "hsl(0, 0%, 20%)",
+          "neutral90": "hsl(0, 0%, 10%)",
+          "primary": "#2684FF",
+          "primary25": "#DEEBFF",
+          "primary50": "#B2D4FF",
+          "primary75": "#4C9AFF",
+        },
+        "spacing": {
+          "baseUnit": 4,
+          "controlHeight": 38,
+          "menuGutter": 8,
+        },
+      }
+    }
+  />
+  <Control
+    clearValue={[Function]}
+    cx={[Function]}
+    getClassNames={[Function]}
+    getStyles={[Function]}
+    getValue={[Function]}
+    hasValue={false}
+    innerProps={
+      {
+        "onMouseDown": [Function],
+        "onTouchEnd": [Function],
+      }
+    }
+    innerRef={[Function]}
+    isDisabled={false}
+    isFocused={false}
+    isMulti={false}
+    isRtl={false}
+    menuIsOpen={false}
+    options={[]}
+    selectOption={[Function]}
+    selectProps={
+      {
+        "aria-live": "polite",
+        "backspaceRemovesValue": true,
+        "blurInputOnSelect": true,
+        "captureMenuScroll": false,
+        "className": "react-select",
+        "classNamePrefix": "react-select",
+        "classNames": {},
+        "closeMenuOnScroll": false,
+        "closeMenuOnSelect": true,
+        "components": {
+          "ClearIndicator": [Function],
+          "DropdownIndicator": [Function],
+          "LoadingIndicator": [Function],
+          "MultiValueRemove": [Function],
+        },
+        "controlShouldRenderValue": true,
+        "escapeClearsValue": false,
+        "filterOption": null,
+        "formatGroupLabel": [Function],
+        "getOptionLabel": [Function],
+        "getOptionValue": [Function],
+        "inputValue": "",
+        "isDisabled": false,
+        "isLoading": false,
+        "isMulti": false,
+        "isOptionDisabled": [Function],
+        "isRtl": false,
+        "isSearchable": true,
+        "loadingMessage": [Function],
+        "maxMenuHeight": 300,
+        "menuIsOpen": false,
+        "menuPlacement": "bottom",
+        "menuPosition": "absolute",
+        "menuShouldBlockScroll": false,
+        "menuShouldScrollIntoView": true,
+        "minMenuHeight": 140,
+        "noOptionsMessage": [Function],
+        "onChange": [Function],
+        "onInputChange": [Function],
+        "onMenuClose": [Function],
+        "onMenuOpen": [Function],
+        "openMenuOnClick": true,
+        "openMenuOnFocus": false,
+        "options": [],
+        "pageSize": 5,
+        "placeholder": "Select...",
+        "screenReaderStatus": [Function],
+        "styles": {
+          "container": [Function],
+          "control": [Function],
+          "indicatorSeparator": [Function],
+          "indicatorsContainer": [Function],
+          "input": [Function],
+          "loadingIndicator": [Function],
+          "menu": [Function],
+          "menuList": [Function],
+          "menuPortal": [Function],
+          "multiValue": [Function],
+          "multiValueLabel": [Function],
+          "multiValueRemove": [Function],
+          "noOptionsMessage": [Function],
+          "option": [Function],
+          "placeholder": [Function],
+          "singleValue": [Function],
+          "valueContainer": [Function],
+        },
+        "tabIndex": 0,
+        "tabSelectsValue": true,
+        "unstyled": false,
+        "value": null,
+      }
+    }
+    setValue={[Function]}
+    theme={
+      {
+        "borderRadius": 4,
+        "colors": {
+          "danger": "#DE350B",
+          "dangerLight": "#FFBDAD",
+          "neutral0": "hsl(0, 0%, 100%)",
+          "neutral10": "hsl(0, 0%, 90%)",
+          "neutral20": "hsl(0, 0%, 80%)",
+          "neutral30": "hsl(0, 0%, 70%)",
+          "neutral40": "hsl(0, 0%, 60%)",
+          "neutral5": "hsl(0, 0%, 95%)",
+          "neutral50": "hsl(0, 0%, 50%)",
+          "neutral60": "hsl(0, 0%, 40%)",
+          "neutral70": "hsl(0, 0%, 30%)",
+          "neutral80": "hsl(0, 0%, 20%)",
+          "neutral90": "hsl(0, 0%, 10%)",
+          "primary": "#2684FF",
+          "primary25": "#DEEBFF",
+          "primary50": "#B2D4FF",
+          "primary75": "#4C9AFF",
+        },
+        "spacing": {
+          "baseUnit": 4,
+          "controlHeight": 38,
+          "menuGutter": 8,
+        },
+      }
+    }
+  >
+    <ValueContainer
+      clearValue={[Function]}
+      cx={[Function]}
+      getClassNames={[Function]}
+      getStyles={[Function]}
+      getValue={[Function]}
+      hasValue={false}
+      isDisabled={false}
+      isMulti={false}
+      isRtl={false}
+      options={[]}
+      selectOption={[Function]}
+      selectProps={
+        {
+          "aria-live": "polite",
+          "backspaceRemovesValue": true,
+          "blurInputOnSelect": true,
+          "captureMenuScroll": false,
+          "className": "react-select",
+          "classNamePrefix": "react-select",
+          "classNames": {},
+          "closeMenuOnScroll": false,
+          "closeMenuOnSelect": true,
+          "components": {
+            "ClearIndicator": [Function],
+            "DropdownIndicator": [Function],
+            "LoadingIndicator": [Function],
+            "MultiValueRemove": [Function],
+          },
+          "controlShouldRenderValue": true,
+          "escapeClearsValue": false,
+          "filterOption": null,
+          "formatGroupLabel": [Function],
+          "getOptionLabel": [Function],
+          "getOptionValue": [Function],
+          "inputValue": "",
+          "isDisabled": false,
+          "isLoading": false,
+          "isMulti": false,
+          "isOptionDisabled": [Function],
+          "isRtl": false,
+          "isSearchable": true,
+          "loadingMessage": [Function],
+          "maxMenuHeight": 300,
+          "menuIsOpen": false,
+          "menuPlacement": "bottom",
+          "menuPosition": "absolute",
+          "menuShouldBlockScroll": false,
+          "menuShouldScrollIntoView": true,
+          "minMenuHeight": 140,
+          "noOptionsMessage": [Function],
+          "onChange": [Function],
+          "onInputChange": [Function],
+          "onMenuClose": [Function],
+          "onMenuOpen": [Function],
+          "openMenuOnClick": true,
+          "openMenuOnFocus": false,
+          "options": [],
+          "pageSize": 5,
+          "placeholder": "Select...",
+          "screenReaderStatus": [Function],
+          "styles": {
+            "container": [Function],
+            "control": [Function],
+            "indicatorSeparator": [Function],
+            "indicatorsContainer": [Function],
+            "input": [Function],
+            "loadingIndicator": [Function],
+            "menu": [Function],
+            "menuList": [Function],
+            "menuPortal": [Function],
+            "multiValue": [Function],
+            "multiValueLabel": [Function],
+            "multiValueRemove": [Function],
+            "noOptionsMessage": [Function],
+            "option": [Function],
+            "placeholder": [Function],
+            "singleValue": [Function],
+            "valueContainer": [Function],
+          },
+          "tabIndex": 0,
+          "tabSelectsValue": true,
+          "unstyled": false,
+          "value": null,
+        }
+      }
+      setValue={[Function]}
+      theme={
+        {
+          "borderRadius": 4,
+          "colors": {
+            "danger": "#DE350B",
+            "dangerLight": "#FFBDAD",
+            "neutral0": "hsl(0, 0%, 100%)",
+            "neutral10": "hsl(0, 0%, 90%)",
+            "neutral20": "hsl(0, 0%, 80%)",
+            "neutral30": "hsl(0, 0%, 70%)",
+            "neutral40": "hsl(0, 0%, 60%)",
+            "neutral5": "hsl(0, 0%, 95%)",
+            "neutral50": "hsl(0, 0%, 50%)",
+            "neutral60": "hsl(0, 0%, 40%)",
+            "neutral70": "hsl(0, 0%, 30%)",
+            "neutral80": "hsl(0, 0%, 20%)",
+            "neutral90": "hsl(0, 0%, 10%)",
+            "primary": "#2684FF",
+            "primary25": "#DEEBFF",
+            "primary50": "#B2D4FF",
+            "primary75": "#4C9AFF",
+          },
+          "spacing": {
+            "baseUnit": 4,
+            "controlHeight": 38,
+            "menuGutter": 8,
+          },
+        }
+      }
+    >
+      <Placeholder
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        innerProps={
+          {
+            "id": "react-select-3-placeholder",
+          }
+        }
+        isDisabled={false}
+        isFocused={false}
+        isMulti={false}
+        isRtl={false}
+        key="placeholder"
+        options={[]}
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "className": "react-select",
+            "classNamePrefix": "react-select",
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+      >
+        Select...
+      </Placeholder>
+      <Input
+        aria-autocomplete="list"
+        aria-describedby="react-select-3-placeholder"
+        aria-expanded={false}
+        aria-haspopup={true}
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect="off"
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        id="react-select-3-input"
+        innerRef={[Function]}
+        isDisabled={false}
+        isHidden={false}
+        isMulti={false}
+        isRtl={false}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        options={[]}
+        role="combobox"
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "className": "react-select",
+            "classNamePrefix": "react-select",
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        spellCheck="false"
+        tabIndex={0}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+        type="text"
+        value=""
+      />
+    </ValueContainer>
+    <IndicatorsContainer
+      clearValue={[Function]}
+      cx={[Function]}
+      getClassNames={[Function]}
+      getStyles={[Function]}
+      getValue={[Function]}
+      hasValue={false}
+      isDisabled={false}
+      isMulti={false}
+      isRtl={false}
+      options={[]}
+      selectOption={[Function]}
+      selectProps={
+        {
+          "aria-live": "polite",
+          "backspaceRemovesValue": true,
+          "blurInputOnSelect": true,
+          "captureMenuScroll": false,
+          "className": "react-select",
+          "classNamePrefix": "react-select",
+          "classNames": {},
+          "closeMenuOnScroll": false,
+          "closeMenuOnSelect": true,
+          "components": {
+            "ClearIndicator": [Function],
+            "DropdownIndicator": [Function],
+            "LoadingIndicator": [Function],
+            "MultiValueRemove": [Function],
+          },
+          "controlShouldRenderValue": true,
+          "escapeClearsValue": false,
+          "filterOption": null,
+          "formatGroupLabel": [Function],
+          "getOptionLabel": [Function],
+          "getOptionValue": [Function],
+          "inputValue": "",
+          "isDisabled": false,
+          "isLoading": false,
+          "isMulti": false,
+          "isOptionDisabled": [Function],
+          "isRtl": false,
+          "isSearchable": true,
+          "loadingMessage": [Function],
+          "maxMenuHeight": 300,
+          "menuIsOpen": false,
+          "menuPlacement": "bottom",
+          "menuPosition": "absolute",
+          "menuShouldBlockScroll": false,
+          "menuShouldScrollIntoView": true,
+          "minMenuHeight": 140,
+          "noOptionsMessage": [Function],
+          "onChange": [Function],
+          "onInputChange": [Function],
+          "onMenuClose": [Function],
+          "onMenuOpen": [Function],
+          "openMenuOnClick": true,
+          "openMenuOnFocus": false,
+          "options": [],
+          "pageSize": 5,
+          "placeholder": "Select...",
+          "screenReaderStatus": [Function],
+          "styles": {
+            "container": [Function],
+            "control": [Function],
+            "indicatorSeparator": [Function],
+            "indicatorsContainer": [Function],
+            "input": [Function],
+            "loadingIndicator": [Function],
+            "menu": [Function],
+            "menuList": [Function],
+            "menuPortal": [Function],
+            "multiValue": [Function],
+            "multiValueLabel": [Function],
+            "multiValueRemove": [Function],
+            "noOptionsMessage": [Function],
+            "option": [Function],
+            "placeholder": [Function],
+            "singleValue": [Function],
+            "valueContainer": [Function],
+          },
+          "tabIndex": 0,
+          "tabSelectsValue": true,
+          "unstyled": false,
+          "value": null,
+        }
+      }
+      setValue={[Function]}
+      theme={
+        {
+          "borderRadius": 4,
+          "colors": {
+            "danger": "#DE350B",
+            "dangerLight": "#FFBDAD",
+            "neutral0": "hsl(0, 0%, 100%)",
+            "neutral10": "hsl(0, 0%, 90%)",
+            "neutral20": "hsl(0, 0%, 80%)",
+            "neutral30": "hsl(0, 0%, 70%)",
+            "neutral40": "hsl(0, 0%, 60%)",
+            "neutral5": "hsl(0, 0%, 95%)",
+            "neutral50": "hsl(0, 0%, 50%)",
+            "neutral60": "hsl(0, 0%, 40%)",
+            "neutral70": "hsl(0, 0%, 30%)",
+            "neutral80": "hsl(0, 0%, 20%)",
+            "neutral90": "hsl(0, 0%, 10%)",
+            "primary": "#2684FF",
+            "primary25": "#DEEBFF",
+            "primary50": "#B2D4FF",
+            "primary75": "#4C9AFF",
+          },
+          "spacing": {
+            "baseUnit": 4,
+            "controlHeight": 38,
+            "menuGutter": 8,
+          },
+        }
+      }
+    >
+      <IndicatorSeparator
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        isDisabled={false}
+        isFocused={false}
+        isMulti={false}
+        isRtl={false}
+        options={[]}
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "className": "react-select",
+            "classNamePrefix": "react-select",
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+      />
+      <dropdownIndicator
+        clearValue={[Function]}
+        cx={[Function]}
+        getClassNames={[Function]}
+        getStyles={[Function]}
+        getValue={[Function]}
+        hasValue={false}
+        innerProps={
+          {
+            "aria-hidden": "true",
+            "onMouseDown": [Function],
+            "onTouchEnd": [Function],
+          }
+        }
+        isDisabled={false}
+        isFocused={false}
+        isMulti={false}
+        isRtl={false}
+        options={[]}
+        selectOption={[Function]}
+        selectProps={
+          {
+            "aria-live": "polite",
+            "backspaceRemovesValue": true,
+            "blurInputOnSelect": true,
+            "captureMenuScroll": false,
+            "className": "react-select",
+            "classNamePrefix": "react-select",
+            "classNames": {},
+            "closeMenuOnScroll": false,
+            "closeMenuOnSelect": true,
+            "components": {
+              "ClearIndicator": [Function],
+              "DropdownIndicator": [Function],
+              "LoadingIndicator": [Function],
+              "MultiValueRemove": [Function],
+            },
+            "controlShouldRenderValue": true,
+            "escapeClearsValue": false,
+            "filterOption": null,
+            "formatGroupLabel": [Function],
+            "getOptionLabel": [Function],
+            "getOptionValue": [Function],
+            "inputValue": "",
+            "isDisabled": false,
+            "isLoading": false,
+            "isMulti": false,
+            "isOptionDisabled": [Function],
+            "isRtl": false,
+            "isSearchable": true,
+            "loadingMessage": [Function],
+            "maxMenuHeight": 300,
+            "menuIsOpen": false,
+            "menuPlacement": "bottom",
+            "menuPosition": "absolute",
+            "menuShouldBlockScroll": false,
+            "menuShouldScrollIntoView": true,
+            "minMenuHeight": 140,
+            "noOptionsMessage": [Function],
+            "onChange": [Function],
+            "onInputChange": [Function],
+            "onMenuClose": [Function],
+            "onMenuOpen": [Function],
+            "openMenuOnClick": true,
+            "openMenuOnFocus": false,
+            "options": [],
+            "pageSize": 5,
+            "placeholder": "Select...",
+            "screenReaderStatus": [Function],
+            "styles": {
+              "container": [Function],
+              "control": [Function],
+              "indicatorSeparator": [Function],
+              "indicatorsContainer": [Function],
+              "input": [Function],
+              "loadingIndicator": [Function],
+              "menu": [Function],
+              "menuList": [Function],
+              "menuPortal": [Function],
+              "multiValue": [Function],
+              "multiValueLabel": [Function],
+              "multiValueRemove": [Function],
+              "noOptionsMessage": [Function],
+              "option": [Function],
+              "placeholder": [Function],
+              "singleValue": [Function],
+              "valueContainer": [Function],
+            },
+            "tabIndex": 0,
+            "tabSelectsValue": true,
+            "unstyled": false,
+            "value": null,
+          }
+        }
+        setValue={[Function]}
+        theme={
+          {
+            "borderRadius": 4,
+            "colors": {
+              "danger": "#DE350B",
+              "dangerLight": "#FFBDAD",
+              "neutral0": "hsl(0, 0%, 100%)",
+              "neutral10": "hsl(0, 0%, 90%)",
+              "neutral20": "hsl(0, 0%, 80%)",
+              "neutral30": "hsl(0, 0%, 70%)",
+              "neutral40": "hsl(0, 0%, 60%)",
+              "neutral5": "hsl(0, 0%, 95%)",
+              "neutral50": "hsl(0, 0%, 50%)",
+              "neutral60": "hsl(0, 0%, 40%)",
+              "neutral70": "hsl(0, 0%, 30%)",
+              "neutral80": "hsl(0, 0%, 20%)",
+              "neutral90": "hsl(0, 0%, 10%)",
+              "primary": "#2684FF",
+              "primary25": "#DEEBFF",
+              "primary50": "#B2D4FF",
+              "primary75": "#4C9AFF",
+            },
+            "spacing": {
+              "baseUnit": 4,
+              "controlHeight": 38,
+              "menuGutter": 8,
+            },
+          }
+        }
+      />
+    </IndicatorsContainer>
+  </Control>
+</SelectContainer>
 `;

diff --git a/server/sonar-web/src/main/js/components/devops-platform/AlmSettingsInstanceSelector.tsx b/server/sonar-web/src/main/js/components/devops-platform/AlmSettingsInstanceSelector.tsx
index fd758f2a0665fc93d88b3afc60fa7e325e3e55da..88d013e2a73c99fc1770825522b79207f5e174df 100644 (file)
--- a/server/sonar-web/src/main/js/components/devops-platform/AlmSettingsInstanceSelector.tsx
+++ b/server/sonar-web/src/main/js/components/devops-platform/AlmSettingsInstanceSelector.tsx
@@ -27,7 +27,7 @@ function optionRenderer(props: OptionProps<AlmSettingsInstance, false>) {
   return <components.Option {...props}>{customOptions(props.data)}</components.Option>;
 }
 
-function singleValueRenderer(props: SingleValueProps<AlmSettingsInstance>) {
+function singleValueRenderer(props: SingleValueProps<AlmSettingsInstance, false>) {
   return <components.SingleValue {...props}>{customOptions(props.data)}</components.SingleValue>;
 }
 

diff --git a/server/sonar-web/src/main/js/helpers/mocks/react-select.ts b/server/sonar-web/src/main/js/helpers/mocks/react-select.ts
index 8b33e117c13681162c8fd75d9c2e8503a108afe8..0b7e44c87dce00881354e993fe1b7bd7ad6c55dd 100644 (file)
--- a/server/sonar-web/src/main/js/helpers/mocks/react-select.ts
+++ b/server/sonar-web/src/main/js/helpers/mocks/react-select.ts
@@ -18,18 +18,18 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import {
+  ClearIndicatorProps,
   ControlProps,
-  GroupTypeBase,
-  IndicatorProps,
+  DropdownIndicatorProps,
+  GroupBase,
   InputProps,
   OptionProps,
-  OptionTypeBase,
 } from 'react-select';
 
 export function mockReactSelectOptionProps<
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean,
-  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+  OptionType = unknown,
+  IsMulti extends boolean = boolean,
+  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>
 >(
   data: OptionType,
   overrides?: OptionProps<OptionType, IsMulti, GroupType>
@@ -45,17 +45,25 @@ export function mockReactSelectInputProps(): InputProps {
 }
 
 export function mockReactSelectControlProps<
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean,
-  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
+  OptionType = unknown,
+  IsMulti extends boolean = boolean,
+  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>
 >(): ControlProps<OptionType, IsMulti, GroupType> {
   return {} as ControlProps<OptionType, IsMulti, GroupType>;
 }
 
-export function mockReactSelectIndicatorProps<
-  OptionType extends OptionTypeBase,
-  IsMulti extends boolean,
-  GroupType extends GroupTypeBase<OptionType> = GroupTypeBase<OptionType>
->(_option: OptionType): IndicatorProps<OptionType, IsMulti, GroupType> {
-  return {} as IndicatorProps<OptionType, IsMulti, GroupType>;
+export function mockReactSelectClearIndicatorProps<
+  OptionType = unknown,
+  IsMulti extends boolean = boolean,
+  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>
+>(_option: OptionType): ClearIndicatorProps<OptionType, IsMulti, GroupType> {
+  return { getStyles: () => {} } as unknown as ClearIndicatorProps<OptionType, IsMulti, GroupType>;
+}
+
+export function mockReactSelectDropdownIndicatorProps<
+  OptionType = unknown,
+  IsMulti extends boolean = boolean,
+  GroupType extends GroupBase<OptionType> = GroupBase<OptionType>
+>(_option: OptionType): DropdownIndicatorProps<OptionType, IsMulti, GroupType> {
+  return {} as DropdownIndicatorProps<OptionType, IsMulti, GroupType>;
 }

diff --git a/server/sonar-web/yarn.lock b/server/sonar-web/yarn.lock
index a35c81616c12b364f91745db62ac94f4cc9195ea..c1d43e4a636aade7b7ff3f255e11935aa39c629c 100644 (file)
--- a/server/sonar-web/yarn.lock
+++ b/server/sonar-web/yarn.lock
@@ -681,7 +681,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
   version: 7.16.3
   resolution: "@babel/runtime@npm:7.16.3"
   dependencies:
@@ -918,7 +918,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/cache@npm:^11.4.0, @emotion/cache@npm:^11.6.0":
+"@emotion/cache@npm:^11.4.0":
   version: 11.6.0
   resolution: "@emotion/cache@npm:11.6.0"
   dependencies:
@@ -941,13 +941,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.8.0":
-  version: 0.8.0
-  resolution: "@emotion/hash@npm:0.8.0"
-  checksum: 4b35d88a97e67275c1d990c96d3b0450451d089d1508619488fc0acb882cb1ac91e93246d471346ebd1b5402215941ef4162efe5b51534859b39d8b3a0e3ffaa
-  languageName: node
-  linkType: hard
-
 "@emotion/hash@npm:^0.9.0":
   version: 0.9.0
   resolution: "@emotion/hash@npm:0.9.0"
@@ -999,7 +992,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:11.10.5":
+"@emotion/react@npm:11.10.5, @emotion/react@npm:^11.8.1":
   version: 11.10.5
   resolution: "@emotion/react@npm:11.10.5"
   dependencies:
@@ -1023,42 +1016,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.1.1":
-  version: 11.6.0
-  resolution: "@emotion/react@npm:11.6.0"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@emotion/cache": ^11.6.0
-    "@emotion/serialize": ^1.0.2
-    "@emotion/sheet": ^1.1.0
-    "@emotion/utils": ^1.0.0
-    "@emotion/weak-memoize": ^0.2.5
-    hoist-non-react-statics: ^3.3.1
-  peerDependencies:
-    "@babel/core": ^7.0.0
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    "@types/react":
-      optional: true
-  checksum: 4fb2d108dc32716d1f162026ac5fdbd0662e3b435a34fb324629d72bb6bff61b18ac8975b51457c16ffa41543bade5d07558566ab76420b3926fbb9159441232
-  languageName: node
-  linkType: hard
-
-"@emotion/serialize@npm:^1.0.0, @emotion/serialize@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "@emotion/serialize@npm:1.0.2"
-  dependencies:
-    "@emotion/hash": ^0.8.0
-    "@emotion/memoize": ^0.7.4
-    "@emotion/unitless": ^0.7.5
-    "@emotion/utils": ^1.0.0
-    csstype: ^3.0.2
-  checksum: ff84fbe09ec06e7ad3deaef5c5b5ea6af6a522e8efe49c2b398b875d06872626284a83b6b18b7f777750c94264a61e7924157d869d9bca2f675731bbb91a6055
-  languageName: node
-  linkType: hard
-
 "@emotion/serialize@npm:^1.1.1":
   version: 1.1.1
   resolution: "@emotion/serialize@npm:1.1.1"
@@ -1109,13 +1066,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.7.5":
-  version: 0.7.5
-  resolution: "@emotion/unitless@npm:0.7.5"
-  checksum: f976e5345b53fae9414a7b2e7a949aa6b52f8bdbcc84458b1ddc0729e77ba1d1dfdff9960e0da60183877873d3a631fa24d9695dd714ed94bcd3ba5196586a6b
-  languageName: node
-  linkType: hard
-
 "@emotion/unitless@npm:^0.8.0":
   version: 0.8.0
   resolution: "@emotion/unitless@npm:0.8.0"
@@ -1331,6 +1281,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@floating-ui/core@npm:1.1.1"
+  checksum: a8497bf981eedf652d275f7207342a9b24c1a67909dca9e042e2379b24321e6688c7774415f3ea607c466adf82b02d8779513f449376c46b2982f2380c80cd35
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.0.1":
+  version: 1.1.1
+  resolution: "@floating-ui/dom@npm:1.1.1"
+  dependencies:
+    "@floating-ui/core": ^1.1.0
+  checksum: 8b7f3b98ed7ec0b634e4a0b735253b0442358c5cea8302935fc185b2bd882202a053622abe9248c76d0908645dd35f93adeaed2d64371b2ab76b36725ce3f7d3
+  languageName: node
+  linkType: hard
+
 "@formatjs/intl-displaynames@npm:^1.2.0":
   version: 1.2.10
   resolution: "@formatjs/intl-displaynames@npm:1.2.10"
@@ -2466,24 +2432,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-select@npm:4.0.18":
-  version: 4.0.18
-  resolution: "@types/react-select@npm:4.0.18"
-  dependencies:
-    "@emotion/serialize": ^1.0.0
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    "@types/react-transition-group": "*"
-  checksum: c247c7fe45cc1d1db1fb0e5a569e288037081ed05d17f377376de82a58a5d334bb7282922ee5eaf3c30957437b028097235be81cb0bed905b3b73f9a5b8c7b58
-  languageName: node
-  linkType: hard
-
-"@types/react-transition-group@npm:*":
-  version: 4.4.4
-  resolution: "@types/react-transition-group@npm:4.4.4"
+"@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: 86e9ff9731798e12bc2afe0304678918769633b531dcf6397f86af81718fb7930ef8648e894eeb3718fc6eab6eb885cfb9b82a44d1d74e10951ee11ebc4643ae
+  checksum: 265f1c74061556708ffe8d15559e35c60d6c11478c9950d3735575d2c116ca69f461d85effa06d73a613eb8b73c84fd32682feb57cf7c5f9e4284021dbca25b0
   languageName: node
   linkType: hard
 
@@ -2859,7 +2813,6 @@ __metadata:
     "@types/react-dom": 16.9.17
     "@types/react-helmet": 6.1.6
     "@types/react-modal": 3.13.1
-    "@types/react-select": 4.0.18
     "@types/react-virtualized": 9.21.21
     "@types/valid-url": 1.0.3
     "@typescript-eslint/eslint-plugin": 5.49.0
@@ -2914,7 +2867,7 @@ __metadata:
     react-intl: 3.12.1
     react-modal: 3.16.1
     react-router-dom: 6.7.0
-    react-select: 4.3.1
+    react-select: 5.7.0
     react-select-event: 5.5.1
     react-virtualized: 9.22.3
     regenerator-runtime: 0.13.11
@@ -7480,10 +7433,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memoize-one@npm:^5.0.0":
-  version: 5.2.1
-  resolution: "memoize-one@npm:5.2.1"
-  checksum: a3cba7b824ebcf24cdfcd234aa7f86f3ad6394b8d9be4c96ff756dafb8b51c7f71320785fbc2304f1af48a0467cbbd2a409efc9333025700ed523f254cb52e3d
+"memoize-one@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "memoize-one@npm:6.0.0"
+  checksum: f185ea69f7cceae5d1cb596266dcffccf545e8e7b4106ec6aa93b71ab9d16460dd118ac8b12982c55f6d6322fcc1485de139df07eacffaae94888b9b3ad7675f
   languageName: node
   linkType: hard
 
@@ -8395,7 +8348,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"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.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
   version: 15.7.2
   resolution: "prop-types@npm:15.7.2"
   dependencies:
@@ -8531,17 +8484,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-input-autosize@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "react-input-autosize@npm:3.0.0"
-  dependencies:
-    prop-types: ^15.5.8
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.0
-  checksum: cc3309ddc87446ade742c7d0e88ef089dd8b6981f21506a2bb27daf01a8803ac697f64157c4ffc7e81dfcf3892b54a4072dbc3652fd9addcf6d22dd0b87ab723
-  languageName: node
-  linkType: hard
-
 "react-intl@npm:3.12.1":
   version: 3.12.1
   resolution: "react-intl@npm:3.12.1"
@@ -8654,21 +8596,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-select@npm:4.3.1":
-  version: 4.3.1
-  resolution: "react-select@npm:4.3.1"
+"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.1.1
-    memoize-one: ^5.0.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-input-autosize: ^3.0.0
     react-transition-group: ^4.3.0
+    use-isomorphic-layout-effect: ^1.1.2
   peerDependencies:
-    react: ^16.8.0 || ^17.0.0
-    react-dom: ^16.8.0 || ^17.0.0
-  checksum: e87e0b42a662ddce7957a69a3029ea769b22264c197cbd1d8bde1ce631e49c5c5f42414773364674a7a6a8431340e1ede49220583bf1dcd966b63e9bd25cfc12
+    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
 
@@ -9907,6 +9851,18 @@ __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
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"