Prettify

.changeset/getChangelogEntry.js

@@ -4,25 +4,25 @@ const { getInfo } = require('@changesets/get-github-info');
 const getReleaseLine = async (changeset, type) => {
   const [firstLine, ...futureLines] = changeset.summary
     .split('\n')
-    .map(l => l.trimRight());
+    .map((l) => l.trimRight());
   let { links } = await getInfo({
     repo: 'JedWatson/react-select',
     commit: changeset.commit,
   });
   return `- ${links.commit}${links.pull === null ? '' : ` ${links.pull}`}${
     links.user === null ? '' : ` Thanks ${links.user}!`
-  } - ${firstLine}\n${futureLines.map(l => `  ${l}`).join('\n')}`;
+  } - ${firstLine}\n${futureLines.map((l) => `  ${l}`).join('\n')}`;
 };
 
 const getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {
   if (dependenciesUpdated.length === 0) return '';
 
   const changesetLinks = changesets.map(
-    changeset => `- Updated dependencies [${changeset.commit}]:`
+    (changeset) => `- Updated dependencies [${changeset.commit}]:`
   );
 
   const updatedDepenenciesList = dependenciesUpdated.map(
-    dependency => `  - ${dependency.name}@${dependency.version}`
+    (dependency) => `  - ${dependency.name}@${dependency.version}`
   );
 
   return [...changesetLinks, ...updatedDepenenciesList].join('\n');

.codesandbox/ci.json

@@ -1,8 +1,5 @@
-
-
 {
   "buildCommand": "build",
   "packages": ["packages/*"],
   "sandboxes": ["nfmxw"]
 }
-

.coveralls.yml

@@ -1,2 +1,2 @@
 service-name: travis-ci
-repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR 
+repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR

.github/CONTRIBUTING.md

@@ -5,26 +5,26 @@ welcome, from issue reports to PRs and documentation / write-ups.
 
 Before you open a PR:
 
-* In development, run `yarn start` to build (+watch) the project source, and run
-the [development server](http://localhost:8000).
-* Please ensure all the examples work correctly after your change. If you're
-adding a major new use-case, add a new example demonstrating its use.
-* Be careful to follow the code style of the project. Run `yarn lint` after
-your changes and ensure you do not introduce any new errors or warnings.
-* This repository uses TypeScript, please run `yarn type-check` after your changes to ensure
-that you do not introduce any new type errors.
+- In development, run `yarn start` to build (+watch) the project source, and run
+  the [development server](http://localhost:8000).
+- Please ensure all the examples work correctly after your change. If you're
+  adding a major new use-case, add a new example demonstrating its use.
+- Be careful to follow the code style of the project. Run `yarn lint` after
+  your changes and ensure you do not introduce any new errors or warnings.
+- This repository uses TypeScript, please run `yarn type-check` after your changes to ensure
+  that you do not introduce any new type errors.
 
-* Ensure that your effort is aligned with the project's roadmap by talking to
-the maintainers, especially if you are going to spend a lot of time on it.
-* Make sure there's an issue open for any work you take on and intend to submit
-as a pull request - it helps core members review your concept and direction
-early and is a good way to discuss what you're planning to do.
-* If you open an issue and are interested in working on a fix, please let us
-know. We'll help you get started, rather than adding it to the queue.
-* Make sure you do not add regressions by running `yarn test`.
-* Where possible, include tests with your changes, either that demonstrates the
-bug, or tests the new functionality. If you're not sure how to test your
-changes, feel free to ping @gwyneplaine or @JedWatson
-* Run `yarn coveralls` to check that the coverage hasn't dropped, and look at the
-report (under the generated `coverage` directory) to check that your changes are
-covered
+- Ensure that your effort is aligned with the project's roadmap by talking to
+  the maintainers, especially if you are going to spend a lot of time on it.
+- Make sure there's an issue open for any work you take on and intend to submit
+  as a pull request - it helps core members review your concept and direction
+  early and is a good way to discuss what you're planning to do.
+- If you open an issue and are interested in working on a fix, please let us
+  know. We'll help you get started, rather than adding it to the queue.
+- Make sure you do not add regressions by running `yarn test`.
+- Where possible, include tests with your changes, either that demonstrates the
+  bug, or tests the new functionality. If you're not sure how to test your
+  changes, feel free to ping @gwyneplaine or @JedWatson
+- Run `yarn coveralls` to check that the coverage hasn't dropped, and look at the
+  report (under the generated `coverage` directory) to check that your changes are
+  covered

.github/ISSUE_TEMPLATE.md

@@ -3,10 +3,11 @@
 Before creating an issue...
 
 # Are you asking a question?
-Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag.
 
+Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag.
 
 # Are you reporting a bug or runtime error?
+
 Please include a test case that demonstrates the issue you're reporting!
 
 This is very helpful to maintainers in order to help us see the issue you're seeing.
@@ -26,10 +27,10 @@ https://codesandbox.io/s/n34mq0743j
 
 You may also find the [online Babel tool](https://babeljs.io/repl/) quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using.
 
-
 # Are you making a feature request?
+
 Provide as much information as possible about your requested feature. Here are a few questions you may consider answering:
 
-*   What's your use case? (Tell us about your application and what problem you're trying to solve.)
-*   What interface do you have in mind? (What new properties or methods do you think might be helpful?)
-*   Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)
+- What's your use case? (Tell us about your application and what problem you're trying to solve.)
+- What interface do you have in mind? (What new properties or methods do you think might be helpful?)
+- Can you point to similar functionality with any existing libraries or components? (Working demos can be helpful.)

.github/workflows/release.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Checkout Repo
         uses: actions/checkout@master
         with:
-          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Setup Node.js 10.x

CONTRIBUTING.md

@@ -5,21 +5,21 @@ welcome, from issue reports to PRs and documentation / write-ups.
 
 Before you open a PR:
 
-* In development, run `yarn start` to build (and watch) the project source, and run
-the [development server](http://localhost:8000).
-* Please ensure all the examples work correctly after your change. If you're
-adding a major new use-case, add a new example `/docs/examples` and subsequent documentation demonstrating its use `/docs/pages`.
-* Ensure that your effort is aligned with the project's roadmap by talking to
-the maintainers, especially if you are going to spend a lot of time on it.
-* Make sure there's an issue open for any work you take on and intend to submit
-as a pull request - it helps core members review your concept and direction
-early and is a good way to discuss what you're planning to do.
-* If you open an issue and are interested in working on a fix, please let us
-know. We'll help you get started, rather than inadvertently doubling up on your hard work.
-* Make sure you do not add regressions by running `yarn test`.
-* Where possible, include tests with your changes, either that demonstrates the
-bug, or tests the new functionality. If you're not sure how to test your
-changes, feel free to ping @gwyneplaine
-* Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
-(with regards to formatting, etc)
-* All new features and changes need documentation.
+- In development, run `yarn start` to build (and watch) the project source, and run
+  the [development server](http://localhost:8000).
+- Please ensure all the examples work correctly after your change. If you're
+  adding a major new use-case, add a new example `/docs/examples` and subsequent documentation demonstrating its use `/docs/pages`.
+- Ensure that your effort is aligned with the project's roadmap by talking to
+  the maintainers, especially if you are going to spend a lot of time on it.
+- Make sure there's an issue open for any work you take on and intend to submit
+  as a pull request - it helps core members review your concept and direction
+  early and is a good way to discuss what you're planning to do.
+- If you open an issue and are interested in working on a fix, please let us
+  know. We'll help you get started, rather than inadvertently doubling up on your hard work.
+- Make sure you do not add regressions by running `yarn test`.
+- Where possible, include tests with your changes, either that demonstrates the
+  bug, or tests the new functionality. If you're not sure how to test your
+  changes, feel free to ping @gwyneplaine
+- Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
+  (with regards to formatting, etc)
+- All new features and changes need documentation.

README.md

@@ -36,7 +36,9 @@ yarn add react-select
 ```
 
 Then use it in your app:
+
 #### With React Component
+
 ```js
 import React from 'react';
 import Select from 'react-select';
@@ -51,10 +53,9 @@ class App extends React.Component {
   state = {
     selectedOption: null,
   };
-  handleChange = selectedOption => {
-    this.setState(
-      { selectedOption },
-      () => console.log(`Option selected:`, this.state.selectedOption)
+  handleChange = (selectedOption) => {
+    this.setState({ selectedOption }, () =>
+      console.log(`Option selected:`, this.state.selectedOption)
     );
   };
   render() {
@@ -72,9 +73,10 @@ class App extends React.Component {
 ```
 
 #### With React Hooks
+
 ```js
-import React, { useState } from "react";
-import Select from "react-select";
+import React, { useState } from 'react';
+import Select from 'react-select';
 
 const options = [
   { value: 'chocolate', label: 'Chocolate' },
@@ -84,7 +86,7 @@ const options = [
 
 export default function App() {
   const [selectedOption, setSelectedOption] = useState(null);
-  
+
   return (
     <div className="App">
       <Select

cypress/integration/multi-select.spec.ts

@@ -20,7 +20,7 @@ describe('Multi Select', () => {
   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) {
+      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');
@@ -29,7 +29,7 @@ describe('Multi Select', () => {
       cy.get(selector.firstMultiValueRemove)
         .click()
         .get(selector.multiSelectDefaultValues)
-        .then(function($defaultValue) {
+        .then(function ($defaultValue) {
           expect($defaultValue).to.have.length(1);
           expect($defaultValue.eq(0)).to.contain('Red');
         })
@@ -42,7 +42,7 @@ describe('Multi Select', () => {
         .click()
         .type('{backspace}', { force: true })
         .get(selector.multiSelectDefaultValues)
-        .then(function($defaultValue) {
+        .then(function ($defaultValue) {
           expect($defaultValue).to.have.length(1);
           expect($defaultValue.eq(0)).to.contain('Purple');
         })
@@ -74,7 +74,7 @@ describe('Multi Select', () => {
         .type('Slate', { force: true })
         .type('{enter}', { force: true })
         .get(selector.multiSelectDefaultValues)
-        .then(function($defaultValue) {
+        .then(function ($defaultValue) {
           expect($defaultValue).to.have.length(5);
           expect($defaultValue.eq(0)).to.contain('Purple');
           expect($defaultValue.eq(1)).to.contain('Red');

docs/App/Header.tsx

@@ -66,11 +66,11 @@ const headerSelectStyles: StylesConfig<Change, boolean> = {
       borderColor: 'rgba(0,0,0,0.2)',
     },
   }),
-  option: base => ({
+  option: (base) => ({
     ...base,
     padding: '4px 12px',
   }),
-  placeholder: base => ({
+  placeholder: (base) => ({
     ...base,
     color: 'black',
   }),
@@ -125,20 +125,20 @@ class Header extends Component<RouteComponentProps, HeaderState> {
   }
   getStarCount = () => {
     fetch(apiUrl)
-      .then(res => res.json())
-      .then(data => {
+      .then((res) => res.json())
+      .then((data) => {
         const stars = data.stargazers_count;
         this.setState({ stars });
       })
-      .catch(err => {
+      .catch((err) => {
         console.error('Error retrieving data', err);
       });
   };
   isHome = (props = this.props) => {
     const valid = ['/', '/home'];
     return valid.includes(props.location.pathname);
   };
-  setContentRef: RefCallback<HTMLDivElement> = ref => {
+  setContentRef: RefCallback<HTMLDivElement> = (ref) => {
     if (!ref) return;
     this.content = ref;
   };
@@ -181,7 +181,7 @@ class Header extends Component<RouteComponentProps, HeaderState> {
             </h1>
             <Content
               stars={stars}
-              onChange={opt => {
+              onChange={(opt) => {
                 history.push(opt.value);
               }}
             />
@@ -263,7 +263,7 @@ const Content = ({ onChange, stars }: ContentProps) => (
           formatOptionLabel={getLabel}
           isSearchable={false}
           options={changes}
-          onChange={option => {
+          onChange={(option) => {
             if (option && !isArray(option)) {
               onChange(option);
             }

docs/App/PageNav.tsx

@@ -20,8 +20,8 @@ const NavSection: FunctionComponent<RouteComponentProps> = () => {
   const routeKeys = Object.keys(routes);
   return (
     <Switch>
-      {routeKeys.map(r => (
-        <Route key={r} path={r} render={p => <PageNav {...p} />} />
+      {routeKeys.map((r) => (
+        <Route key={r} path={r} render={(p) => <PageNav {...p} />} />
       ))}
     </Switch>
   );
@@ -56,7 +56,7 @@ class PageNav extends Component<RouteComponentProps, NavState> {
       this.setState({ activeId });
     }
   };
-  getScrollSpy: RefCallback<ScrollSpy> = ref => {
+  getScrollSpy: RefCallback<ScrollSpy> = (ref) => {
     if (!ref) return;
     this.scrollSpy = ref;
   };
@@ -85,7 +85,7 @@ class PageNav extends Component<RouteComponentProps, NavState> {
       <Sticky preserveHeight={isSmallDevice}>
         <ScrollSpy ref={this.getScrollSpy} onChange={this.getSelected}>
           <Nav>
-            {links.map(l => {
+            {links.map((l) => {
               const hash = l.path.slice(1);
               const selected = hash === activeId;
 
@@ -95,7 +95,7 @@ class PageNav extends Component<RouteComponentProps, NavState> {
                   key={hash}
                   selected={selected}
                   level={l.level}
-                  onClick={event => {
+                  onClick={(event) => {
                     this.handleItemClick({ event, hash });
                   }}
                 >

docs/App/ScrollSpy.tsx

@@ -45,12 +45,14 @@ export default class ScrollSpy extends Component<Props, State> {
     const { elements } = this.state;
     if (!elements.length) return;
 
-    const idsInView = elements.filter(isInView).map(i => i.getAttribute('id'));
+    const idsInView = elements
+      .filter(isInView)
+      .map((i) => i.getAttribute('id'));
     if (idsInView.length) {
       onChange(idsInView);
     }
   });
-  getElements: RefCallback<HTMLElement> = ref => {
+  getElements: RefCallback<HTMLElement> = (ref) => {
     if (!ref) return;
     this.nav = ref;
   };
@@ -59,7 +61,7 @@ export default class ScrollSpy extends Component<Props, State> {
 
     const anchorList = this.nav.querySelectorAll<HTMLElement>('[data-hash]');
     const elements = Array.from(anchorList).map(
-      i => document.querySelector<HTMLElement>(`#${i.dataset.hash}`)!
+      (i) => document.querySelector<HTMLElement>(`#${i.dataset.hash}`)!
     );
 
     this.setState({ elements });

docs/App/Section.tsx

@@ -7,8 +7,8 @@ const Section: FunctionComponent<RouteComponentProps> = () => {
   const routeKeys = Object.keys(routes);
   return (
     <Switch>
-      {routeKeys.map(r => (
-        <Route key={r} path={r} render={p => <Content {...p} />} />
+      {routeKeys.map((r) => (
+        <Route key={r} path={r} render={(p) => <Content {...p} />} />
       ))}
       <Redirect from="/" to="/home" />
     </Switch>

docs/App/Sticky.tsx

@@ -56,12 +56,12 @@ export default class Sticky extends Component<Props, State> {
       this.setState({ overScroll: 0 });
     }
   });
-  getOuterEl: RefCallback<HTMLDivElement> = ref => {
+  getOuterEl: RefCallback<HTMLDivElement> = (ref) => {
     if (!ref) return;
 
     this.outerEl = ref;
   };
-  getInnerEl: RefCallback<HTMLDivElement> = ref => {
+  getInnerEl: RefCallback<HTMLDivElement> = (ref) => {
     if (!ref) return;
 
     this.innerEl = ref;