3055 do not recreate cx and getValue functions during render of Select component

.circleci/config.yml

@@ -57,6 +57,7 @@ jobs:
             - run:
                   name: Running unit tests
                   command: |
+                      yarn prettier:check
                       yarn lint
                       yarn flow check --flowconfig-name=.flowconfig-ci
                       yarn test:jest
@@ -70,5 +71,5 @@ jobs:
                   command: |
                       yarn global add cypress
                       yarn install --silent
-                      cypress install
+                      yarn cypress install
                       yarn e2e

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  extends: ['plugin:react-hooks/recommended'],
   parser: 'babel-eslint',
   env: {
     browser: true,
@@ -14,7 +15,7 @@ module.exports = {
         argsIgnorePattern: '^event$',
         ignoreRestSiblings: true,
         vars: 'all',
-        varsIgnorePattern: 'jsx|emotionJSX'
+        varsIgnorePattern: 'jsx|emotionJSX',
       },
     ],
     curly: [2, 'multi-line'],

.prettierignore

@@ -1 +1,8 @@
-package.json
+coverage/*
+cypress/plugins/*
+cypress/support/*
+**/dist/*
+flow-typed/*
+lib/*
+node_modules/*
+**/node_modules/*

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Jed Watson
+Copyright (c) 2021 Jed Watson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -152,10 +152,10 @@ Check the docs for more information on:
 
 Thank you to everyone who has contributed to this project. It's been a wild ride.
 
-If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)
+If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)!
 
-Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the Atlassian Design System team ❤️
+Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Tom Walker](https://github.com/bladey), [Nathan Bierema](https://github.com/Methuselah96), [Eric Bonow](https://github.com/ebonow), [Mitchell Hamilton](https://github.com/mitchellhamilton), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the [Atlassian Design System](https://atlassian.design) team who along with many other contributors have made this possible ❤️
 
 ## License
 
-MIT Licensed. Copyright (c) Jed Watson 2019.
+MIT Licensed. Copyright (c) Jed Watson 2021.

babel.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
-    'emotion',
+    '@emotion/babel-plugin',
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-runtime',
   ],

cypress/fixtures/selectors.json

@@ -22,5 +22,6 @@
   "multiSelectDefaultValues": "#multi-select .react-select__multi-value",
   "multiSelectInput": "#react-select-multi-select-input",
   "placeHolderMulti": "#multi-select .react-select__placeholder",
-  "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator"
-}
+  "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator",
+  "focusedOption": ".react-select__option--is-focused"
+}

cypress/integration/multi-select.spec.js

@@ -1,101 +1,87 @@
 const selector = require('../fixtures/selectors.json');
 const baseUrl = require('../../cypress.json').baseUrl;
 
-
 const setup = [
-  { width: 1440, height: 900, viewport: 'macbook-15', device:'Laptop' },
-  { width: 375, height: 667, viewport: 'iphone-6', device:'Mobile' },
-  { width: 768, height: 1024, viewport: 'ipad-2', device:'Tablet' },
+  { width: 1440, height: 900, viewport: 'macbook-15', device: 'Laptop' },
+  { width: 375, height: 667, viewport: 'iphone-6', device: 'Mobile' },
+  { width: 768, height: 1024, viewport: 'ipad-2', device: 'Tablet' },
 ];
 
-describe('Multi Select',() => {
-  before(() =>  {
+describe('Multi Select', () => {
+  before(() => {
     cy.visit(baseUrl);
     cy.title().should('equal', 'React-Select');
     cy.get('h1').should('contain', 'Test Page for Cypress');
   });
-  beforeEach(() =>  {
-      cy.reload();
+  beforeEach(() => {
+    cy.reload();
   });
 
   for (let config of setup) {
     const { viewport } = config;
-    it(
-      `Should display several default values that can be removed in view: ${viewport}`,
-     () => {
-        cy
-          .get(selector.multiSelectDefaultValues)
-          .then(function($defaultValue) {
-            expect($defaultValue).to.have.length(2);
-            expect($defaultValue.eq(0)).to.contain('Purple');
-            expect($defaultValue.eq(1)).to.contain('Red');
-          });
+    it(`Should display several default values that can be removed in view: ${viewport}`, () => {
+      cy.get(selector.multiSelectDefaultValues).then(function($defaultValue) {
+        expect($defaultValue).to.have.length(2);
+        expect($defaultValue.eq(0)).to.contain('Purple');
+        expect($defaultValue.eq(1)).to.contain('Red');
+      });
 
-        cy
-          .get(selector.firstMultiValueRemove)
-          .click()
-          .get(selector.multiSelectDefaultValues)
-          .then(function($defaultValue) {
-            expect($defaultValue).to.have.length(1);
-            expect($defaultValue.eq(0)).to.contain('Red');
-          })
-          .get(selector.menuMulti)
-          .should('not.be.visible');
-      }
-    );
+      cy.get(selector.firstMultiValueRemove)
+        .click()
+        .get(selector.multiSelectDefaultValues)
+        .then(function($defaultValue) {
+          expect($defaultValue).to.have.length(1);
+          expect($defaultValue.eq(0)).to.contain('Red');
+        })
+        .get(selector.menuMulti)
+        .should('not.be.visible');
+    });
 
-    it(
-      `Should be able to remove values on keyboard actions in view: ${viewport}`,
-     () => {
-        cy
-          .get(selector.multiSelectInput)
-          .click()
-          .type('{backspace}', { force: true })
-          .get(selector.multiSelectDefaultValues)
-          .then(function($defaultValue) {
-            expect($defaultValue).to.have.length(1);
-            expect($defaultValue.eq(0)).to.contain('Purple');
-          })
-          .get(selector.multiSelectInput)
-          .type('{backspace}', { force: true })
-          .get(selector.placeHolderMulti)
-          .should('contain', 'Select...');
-      }
-    );
+    it(`Should be able to remove values on keyboard actions in view: ${viewport}`, () => {
+      cy.get(selector.multiSelectInput)
+        .click()
+        .type('{backspace}', { force: true })
+        .get(selector.multiSelectDefaultValues)
+        .then(function($defaultValue) {
+          expect($defaultValue).to.have.length(1);
+          expect($defaultValue.eq(0)).to.contain('Purple');
+        })
+        .get(selector.multiSelectInput)
+        .type('{backspace}', { force: true })
+        .get(selector.placeHolderMulti)
+        .should('contain', 'Select...');
+    });
 
-    it(
-      `Should select different options using - click and enter in view: ${viewport}`,
-     () => {
-        cy
-          .get(selector.menuMulti)
-          .should('not.exist')
-          .get(selector.toggleMenuMulti)
-          .click()
-          .get(selector.menuMulti)
-          .should('exist')
-          .get(selector.menuMulti)
-          .should('be.visible')
-          .get(selector.menuOption)
-          .contains('Orange')
-          .click()
-          .get(selector.toggleMenuMulti)
-          .click()
-          .get(selector.menuOption)
-          .contains('Yellow')
-          .click()
-          .get(selector.multiSelectInput)
-          .click({ force: true })
-          .type('Slate', { force: true })
-          .type('{enter}', { force: true })
-          .get(selector.multiSelectDefaultValues)
-          .then(function($defaultValue) {
-            expect($defaultValue).to.have.length(5);
-            expect($defaultValue.eq(0)).to.contain('Purple');
-            expect($defaultValue.eq(1)).to.contain('Red');
-            expect($defaultValue.eq(2)).to.contain('Orange');
-            expect($defaultValue.eq(3)).to.contain('Yellow');
-            expect($defaultValue.eq(4)).to.contain('Slate');
-          });
-      });
+    it(`Should select different options using - click and enter in view: ${viewport}`, () => {
+      cy.get(selector.menuMulti)
+        .should('not.exist')
+        .get(selector.toggleMenuMulti)
+        .click()
+        .get(selector.menuMulti)
+        .should('exist')
+        .get(selector.menuMulti)
+        .should('be.visible')
+        .get(selector.menuOption)
+        .contains('Orange')
+        .click()
+        .get(selector.toggleMenuMulti)
+        .click()
+        .get(selector.menuOption)
+        .contains('Yellow')
+        .click()
+        .get(selector.multiSelectInput)
+        .click({ force: true })
+        .type('Slate', { force: true })
+        .type('{enter}', { force: true })
+        .get(selector.multiSelectDefaultValues)
+        .then(function($defaultValue) {
+          expect($defaultValue).to.have.length(5);
+          expect($defaultValue.eq(0)).to.contain('Purple');
+          expect($defaultValue.eq(1)).to.contain('Red');
+          expect($defaultValue.eq(2)).to.contain('Orange');
+          expect($defaultValue.eq(3)).to.contain('Yellow');
+          expect($defaultValue.eq(4)).to.contain('Slate');
+        });
+    });
   }
-});
+});