pax_global_header 0000666 0000000 0000000 00000000064 13777574213 0014532 g ustar 00root root 0000000 0000000 52 comment=45f6f292b44e434fe6286e6017e43245528b72fb
JedWatson-react-select-ef64425/ 0000775 0000000 0000000 00000000000 13777574213 0016342 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/.TODO.md 0000664 0000000 0000000 00000006461 13777574213 0017516 0 ustar 00root root 0000000 0000000 # Changes planned from Beta -> RC:
* [ ] Look into package size reduction, extract optional modules, e.g
* createFilter could be optional, saving 2.6k gz
* vendor simple Menu by default, allow opt-in to advanced usage
* [ ] Bind getStyles for each component
---
# Order of focus:
* [ ] Review how the `required` state of the `` can be handled
* [ ] Example of how to implement Separators
* [ ] Handle Header and Footer elements in the Menu
* [ ] Keyboard focusing of values in multi select
---
# Review:
### Select Component Props
* [ ] `backspaceToRemoveMessage` _investigate_
* [x] `className` _investigate_ might need to move the className util into commonProps
* [x] `openOnClick` / `openOnFocus` needs implementation
* [ ] `required` _|||_ this has some complex behaviour in v1 which may or may not be needed
* [x] `tabIndex` needs implementation
#### Done
* [x] `id`
* [x] `inputId` falls back to `react-select-${props.instanceId}-input`
* [x] `autoBlur` **REMOVED** can be handled with `onChange`
* [x] `autosize` **REMOVED** can replace `` component
* [x] `onClose` --> `onMenuClose`
* [x] `onOpen` --> `onMenuOpen`
* [x] `onBlurResetsInput` / `onCloseResetsInput` / `onSelectResetsInput` **REMOVED** now that `inputValue` can be controlled, these should be unnecessary
* [x] `onMenuScrollToBottom` implemented
* [x] `clearable` --> `isClearable`
* [x] `rtl` --> `isRTL`
* [x] `pageSize`
* [x] `menuShouldScrollIntoView`
* [x] `searchable` --> `isSearchable`
* [x] `resetValue` **REMOVED** can be handled with `onInputChange`
* [x] `clearAllText` / `clearValueText` **REMOVED** title no longer applied, can replace ``
### Async Component Props
* [ ] `autoLoad` _investigate_ should be considered in conjunction with `searchPromptText`, may affect `defaultOptions` behaviour
* [ ] `searchPromptText` _investigate_ how do we know to display it? (https://goo.gl/PLTwV5)
---
# Maybe:
* [ ] Virtualisation
* [ ] Prevent values from being popped, was `option.clearableValue === false`
* [ ] Async w/ pagination
* [ ] Extention point to reorder / change menu options array when it's created
---
# Later:
* [ ] Reordering of Options (drag and drop)
---
# Done:
* [x] Tags mode (Creatable)
* [x] Handle changing of isDisabled prop
* [x] Better mobile support and touch handling
* [x] Better control of flip behaviour
* [x] Scroll the menu into view when it opens
* [x] Handle touch outside (see v1 implementation)
* [x] Review implementation of `isSearchable` prop (creates a "fake" input)
* [x] Async + Creatable variant
* [x] Cleanup
* [x] Documentation - Props, Customisation
* [x] Upgrade Guide from v1 -> v2
* [x] Lock scrolling on Menu (enable with prop)
* [x] Make inputValue a controllable prop
* [x] Make menuIsOpen a controllable prop
* [x] Finalise theme and style customisation framework
* [x] Remove `disabledKey`, clean up similar functionality
* [x] Pseudo-focus Options
* [x] Keyboard navigation
* [x] Make `isDisabled` / `isSelected` etc. props
* [x] Scroll to focused option
* [x] Add `autofocus` prop
* [x] Add HTML Form Input
* [x] Async with:
* [x] * promises
* [x] * better loading state and behaviour
* [x] Pass more (and consistent?) props and state from Select to Components
* [x] Fix issue with how the mouse hover interacts with keyboard scrolling
* [x] Ability to customise built-in strings
JedWatson-react-select-ef64425/.browserslistrc 0000664 0000000 0000000 00000000036 13777574213 0021431 0 ustar 00root root 0000000 0000000 > 0.25%
ie 11
not op_mini all
JedWatson-react-select-ef64425/.changeset/ 0000775 0000000 0000000 00000000000 13777574213 0020361 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/.changeset/README.md 0000664 0000000 0000000 00000004073 13777574213 0021644 0 ustar 00root root 0000000 0000000 # Changesets
Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with `bolt` to help you release components from a mono-repository. You can find the full documentation for it [here](https://www.npmjs.com/package/@changesets/cli)
To help you get started though, here are some things you should know about this folder:
## Changesets are automatically generated
Changesets are generated by the `yarn changeset` or `npx changeset` command. As long as you are following a changeset release flow, you shouldn't have any problems.
## Each changeset is its own folder
We use hashes by default for these folder names to avoid collisions when generating them, but there's no harm that will come from renaming them.
## Changesets are automatically removed
When `changeset bump` or equivalent command is run, all the changeset folders are removed. This is so we only ever use a changeset once. This makes this a very bad place to store any other information.
## Changesets come in two parts
You should treat these parts quite differently:
- `changes.md` is a file you should feel free to edit as much as you want. It will be prepended to your changelog when you next run your version command.
- `changes.json` is a file that includes information about releases, what should be versioned by the version command. We strongly recommend against editing this directly, as you may make a new changeset that puts your bolt repository into an invalid state.
## I want to edit the information in a `changes.json` - how do I do it safely?
The best option is to make a new changeset using the changeset command, copy over the `changes.md`, then delete the old changeset.
## Can I rename the folder for my changeset?
Absolutely! We need unique hashes to make changesets play nicely with git, but changing your folder from our hash to your own name isn't going to cause any problems.
## Can I manually delete changesets?
You can, but you should be aware this will remove the intent to release communicated by the changeset, and should be done with caution.
JedWatson-react-select-ef64425/.changeset/config.json 0000664 0000000 0000000 00000000251 13777574213 0022517 0 ustar 00root root 0000000 0000000 {
"$schema": "https://unpkg.com/@changesets/config@0.2.1/schema.json",
"changelog": "./getChangelogEntry",
"commit": false,
"linked": [],
"access": "public"
}
JedWatson-react-select-ef64425/.changeset/getChangelogEntry.js 0000664 0000000 0000000 00000002050 13777574213 0024325 0 ustar 00root root 0000000 0000000 require('dotenv').config();
const { getInfo } = require('@changesets/get-github-info');
const getReleaseLine = async (changeset, type) => {
const [firstLine, ...futureLines] = changeset.summary
.split('\n')
.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')}`;
};
const getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {
if (dependenciesUpdated.length === 0) return '';
const changesetLinks = changesets.map(
changeset => `- Updated dependencies [${changeset.commit}]:`
);
const updatedDepenenciesList = dependenciesUpdated.map(
dependency => ` - ${dependency.name}@${dependency.version}`
);
return [...changesetLinks, ...updatedDepenenciesList].join('\n');
};
module.exports = {
getReleaseLine,
getDependencyReleaseLine,
};
JedWatson-react-select-ef64425/.circleci/ 0000775 0000000 0000000 00000000000 13777574213 0020175 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/.circleci/config.yml 0000664 0000000 0000000 00000004157 13777574213 0022174 0 ustar 00root root 0000000 0000000 version: 2
docker_defaults: &docker_defaults
docker:
- image: cypress/browsers:node12.18.0-chrome83-ff77
environment:
TERM: xterm
working_directory: ~/project/repo
attach_workspace: &attach_workspace
attach_workspace:
at: ~/project
install_steps: &install_steps
steps:
- checkout
- restore_cache:
name: Restore node_modules cache
keys:
- dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
- dependency-cache-{{ .Branch }}-
- dependency-cache-
- cache-{{ checksum "package.json" }}
- run:
name: Installing Dependencies
command: |
yarn install --silent
- save_cache:
name: Save node_modules cache
key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
paths:
- ~/.cache
- persist_to_workspace:
root: ~/project
paths:
- repo
workflows:
version: 2
build_pipeline:
jobs:
- build
- unit_test:
requires:
- build
- end_to_end:
requires:
- build
jobs:
build:
<<: *docker_defaults
<<: *install_steps
unit_test:
<<: *docker_defaults
steps:
- *attach_workspace
- run:
name: Running unit tests
command: |
yarn prettier:check
yarn lint
yarn flow check --flowconfig-name=.flowconfig-ci
yarn test:jest
yarn coveralls
end_to_end:
<<: *docker_defaults
steps:
- *attach_workspace
- run:
name: Running E2E tests
command: |
yarn global add cypress
yarn install --silent
yarn cypress install
yarn e2e
JedWatson-react-select-ef64425/.codesandbox/ 0000775 0000000 0000000 00000000000 13777574213 0020711 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/.codesandbox/ci.json 0000664 0000000 0000000 00000000131 13777574213 0022172 0 ustar 00root root 0000000 0000000
{
"buildCommand": "build",
"packages": ["packages/*"],
"sandboxes": ["nfmxw"]
}
JedWatson-react-select-ef64425/.coveralls.yml 0000664 0000000 0000000 00000000107 13777574213 0021133 0 ustar 00root root 0000000 0000000 service-name: travis-ci
repo_token: itdMRdBNgDK8Gb5nIA63zVMEryaxTQxkR
JedWatson-react-select-ef64425/.editorconfig 0000664 0000000 0000000 00000000503 13777574213 0021015 0 ustar 00root root 0000000 0000000 # This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
root = true
[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2
[*.md]
trim_trailing_whitespace = false
[.circleci/config.yml]
indent_size = 4
JedWatson-react-select-ef64425/.eslintignore 0000664 0000000 0000000 00000000155 13777574213 0021046 0 ustar 00root root 0000000 0000000 coverage/*
cypress/plugins/*
cypress/support/*
**/dist/*
flow-typed/*
lib/*
node_modules/*
**/node_modules/*
JedWatson-react-select-ef64425/.eslintrc.js 0000664 0000000 0000000 00000002010 13777574213 0020572 0 ustar 00root root 0000000 0000000 module.exports = {
parser: 'babel-eslint',
env: {
browser: true,
es6: true,
node: true,
},
plugins: ['react'],
rules: {
'no-unused-vars': [
'error',
{
args: 'after-used',
argsIgnorePattern: '^event$',
ignoreRestSiblings: true,
vars: 'all',
varsIgnorePattern: 'jsx|emotionJSX',
},
],
curly: [2, 'multi-line'],
'jsx-quotes': 1,
'no-shadow': 1,
'no-trailing-spaces': 1,
'no-underscore-dangle': 1,
'no-unused-expressions': 1,
'object-curly-spacing': [1, 'always'],
quotes: [2, 'single', 'avoid-escape'],
'react/jsx-boolean-value': 1,
'react/jsx-no-undef': 1,
'react/jsx-uses-react': 1,
'react/jsx-uses-vars': 1,
'react/jsx-wrap-multilines': 1,
'react/no-did-mount-set-state': 1,
'react/no-did-update-set-state': 1,
'react/no-unknown-property': 1,
'react/react-in-jsx-scope': 1,
'react/self-closing-comp': 1,
'react/sort-prop-types': 1,
semi: 2,
strict: 0,
},
};
JedWatson-react-select-ef64425/.flowconfig 0000664 0000000 0000000 00000001251 13777574213 0020477 0 ustar 00root root 0000000 0000000 [ignore]
.*/node_modules/cypress/.*
[untyped]
.*/node_modules/@atlaskit/tooltip/dist/cjs/components/Marshal.js.flow
.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/FocusLock/index.js.flow
.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/gateway/components/Gateway.js.flow
.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/withRenderTarget.js.flow
[include]
[libs]
flow-typed
[lints]
unclear-type=warn
untyped-type-import=error
[options]
module.name_mapper='\!\!raw-loader\!.*' -> '/typings/raw-loader.js'
module.name_mapper='\!\!extract-react-types-loader\!.*' -> '/typings/extract-react-types-loader.js'
[strict]
JedWatson-react-select-ef64425/.flowconfig-ci 0000664 0000000 0000000 00000001335 13777574213 0021073 0 ustar 00root root 0000000 0000000 [ignore]
.*/node_modules/cypress/.*
[untyped]
.*/node_modules/@atlaskit/tooltip/dist/cjs/components/Marshal.js.flow
.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/FocusLock/index.js.flow
.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/gateway/components/Gateway.js.flow
.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/withRenderTarget.js.flow
[include]
[libs]
flow-typed
[lints]
unclear-type=warn
untyped-type-import=error
[options]
module.name_mapper='\!\!raw-loader\!.*' -> '/typings/raw-loader.js'
module.name_mapper='\!\!extract-react-types-loader\!.*' -> '/typings/extract-react-types-loader.js'
server.max_workers=1
sharedmemory.hash_table_pow=21
[strict]
JedWatson-react-select-ef64425/.github/ 0000775 0000000 0000000 00000000000 13777574213 0017702 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/.github/CONTRIBUTING.md 0000664 0000000 0000000 00000003237 13777574213 0022140 0 ustar 00root root 0000000 0000000 # Contributing
Thanks for your interest in React-Select. All forms of contribution are
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 `flow`, please run `yarn flow` 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
JedWatson-react-select-ef64425/.github/ISSUE_TEMPLATE.md 0000664 0000000 0000000 00000003316 13777574213 0022412 0 ustar 00root root 0000000 0000000 ### Thanks for using react-select!
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.
# 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.
Please note we are currently only directing our efforts towards the current major (v3) version and beyond.
We understand this might be inconvenient but it is in the best interest of supporting the broader community and to sustain the `react-select` project going forward.
To report bugs against react-select v3 please fork the following code-sandbox:
https://codesandbox.io/s/react-select-v3-sandbox-jgdch
To report bugs against react-select v2 please fork the following code-sandbox:
https://codesandbox.io/s/k5rvn9z3lv
To report bugs against react-select v1 please fork the following code-sandbox:
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.)
JedWatson-react-select-ef64425/.github/workflows/ 0000775 0000000 0000000 00000000000 13777574213 0021737 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/.github/workflows/release.yml 0000664 0000000 0000000 00000001524 13777574213 0024104 0 ustar 00root root 0000000 0000000 name: Release
on:
push:
branches:
- master
jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- 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
fetch-depth: 0
- name: Setup Node.js 10.x
uses: actions/setup-node@master
with:
node-version: 10.x
- name: Install Yarn
run: npm install --global yarn
- name: Install Dependencies
run: yarn
- name: Create Release Pull Request or Publish to npm
uses: changesets/action@master
with:
publish: yarn release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
JedWatson-react-select-ef64425/.gitignore 0000664 0000000 0000000 00000000575 13777574213 0020341 0 ustar 00root root 0000000 0000000 # Build
lib
dist
docs/dist
.env
# Logs
logs
*.log
# Runtime data
pids
*.pid
*.seed
# Coverage tools
lib-cov
coverage
.nyc_output
# Cypress
cypress/videos
cypress/screenshots
cypress/support
cypress/plugins
# Dependency directory
node_modules
bower_components
# Publish directory
.publish
# Editor artefacts
.idea
# Other
.DS_Store
.env
package-lock.json
# Notes
.NOTES.md
JedWatson-react-select-ef64425/.nvmrc 0000664 0000000 0000000 00000000003 13777574213 0017461 0 ustar 00root root 0000000 0000000 12
JedWatson-react-select-ef64425/.prettierignore 0000664 0000000 0000000 00000000155 13777574213 0021406 0 ustar 00root root 0000000 0000000 coverage/*
cypress/plugins/*
cypress/support/*
**/dist/*
flow-typed/*
lib/*
node_modules/*
**/node_modules/*
JedWatson-react-select-ef64425/.prettierrc.js 0000664 0000000 0000000 00000000103 13777574213 0021133 0 ustar 00root root 0000000 0000000 module.exports = {
singleQuote: true,
trailingComma: 'es5',
};
JedWatson-react-select-ef64425/.sweet-changelogs.js 0000664 0000000 0000000 00000000266 13777574213 0022221 0 ustar 00root root 0000000 0000000 module.exports = {
filename: 'HISTORY.md',
message: ({ pr, user }) =>
`* ${pr.title}, thanks [${user.name || user.login}](${
user.url
}) - [see PR](${pr.url})`,
};
JedWatson-react-select-ef64425/CONTRIBUTING.md 0000664 0000000 0000000 00000002752 13777574213 0020601 0 ustar 00root root 0000000 0000000 # Contributing
Thanks for your interest in React-Select. All forms of contribution are
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.
JedWatson-react-select-ef64425/LICENSE 0000664 0000000 0000000 00000002065 13777574213 0017352 0 ustar 00root root 0000000 0000000 The MIT License (MIT)
Copyright (c) 2020 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
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
JedWatson-react-select-ef64425/README.md 0000664 0000000 0000000 00000013665 13777574213 0017634 0 ustar 00root root 0000000 0000000 [](https://www.npmjs.com/package/react-select)
[](https://circleci.com/gh/JedWatson/react-select/tree/master)
[](https://coveralls.io/github/JedWatson/react-select?branch=master)
[](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-select)
# React-Select
The Select control for [React](https://reactjs.com). Initially built for use in [KeystoneJS](http://www.keystonejs.com).
See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
React Select is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
For the story behind this component, watch Jed's talk at React Conf 2019 - [building React Select](https://youtu.be/yS0jUnmBujE)
Features include:
- Flexible approach to data, with customisable functions
- Extensible styling API with [emotion](https://emotion.sh)
- Component Injection API for complete control over the UI behaviour
- Controllable state props and modular architecture
- Long-requested features like option groups, portal support, animation, and more
## Using an older version?
- [v2 to v3 upgrade guide](https://github.com/JedWatson/react-select/issues/3585)
- [v1 to v2 upgrade guide](https://react-select.com/upgrade-guide)
- React Select v1 documentation and examples are available at [v1.react-select.com](https://v1.react-select.com)
# Installation and usage
The easiest way to use react-select is to install it from npm and build it into your app with Webpack.
```
yarn add react-select
```
Then use it in your app:
#### With React Component
```js
import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class App extends React.Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState(
{ selectedOption },
() => console.log(`Option selected:`, this.state.selectedOption)
);
};
render() {
const { selectedOption } = this.state;
return (
);
}
}
```
#### With React Hooks
```js
import React, { useState } from "react";
import Select from "react-select";
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
export default function App() {
const [selectedOption, setSelectedOption] = useState(null);
return (
);
}
```
## Props
Common props you may want to specify include:
- `autoFocus` - focus the control when it mounts
- `className` - apply a className to the control
- `classNamePrefix` - apply classNames to inner elements with the given prefix
- `isDisabled` - disable the control
- `isMulti` - allow the user to select multiple values
- `isSearchable` - allow the user to search for matching options
- `name` - generate an HTML input with this name, containing the current value
- `onChange` - subscribe to change events
- `options` - specify the options the user can select from
- `placeholder` - change the text displayed when no option is selected
- `noOptionsMessage` - ({ inputValue: string }) => string | null - Text to display when there are no options
- `value` - control the current value
See the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports.
## Controllable Props
You can control the following props by providing values for them. If you don't, react-select will manage them for you.
- `value` / `onChange` - specify the current value of the control
- `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open
- `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)
If you don't provide these props, you can set the initial value of the state they control:
- `defaultValue` - set the initial value of the control
- `defaultMenuIsOpen` - set the initial open value of the menu
- `defaultInputValue` - set the initial value of the search input
## Methods
React-select exposes two public methods:
- `focus()` - focus the control programatically
- `blur()` - blur the control programatically
## Customisation
Check the docs for more information on:
- [Customising the styles](https://www.react-select.com/styles)
- [Using custom components](https://www.react-select.com/components)
- [Using the built-in animated components](https://www.react-select.com/home#animated-components)
- [Creating an async select](https://www.react-select.com/async)
- [Allowing users to create new options](https://www.react-select.com/creatable)
- [Advanced use-cases](https://www.react-select.com/advanced)
# Thanks
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)
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 ❤️
## License
MIT Licensed. Copyright (c) Jed Watson 2020.
JedWatson-react-select-ef64425/babel.config.js 0000664 0000000 0000000 00000000357 13777574213 0021216 0 ustar 00root root 0000000 0000000 module.exports = {
plugins: [
'emotion',
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-transform-runtime',
],
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
};
JedWatson-react-select-ef64425/cypress.json 0000664 0000000 0000000 00000000111 13777574213 0020716 0 ustar 00root root 0000000 0000000 {
"baseUrl": "http://localhost:8000/cypress-tests",
"video": false
}
JedWatson-react-select-ef64425/cypress/ 0000775 0000000 0000000 00000000000 13777574213 0020032 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/cypress/fixtures/ 0000775 0000000 0000000 00000000000 13777574213 0021703 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/cypress/fixtures/selectors.json 0000664 0000000 0000000 00000002522 13777574213 0024602 0 ustar 00root root 0000000 0000000 {
"singleBasic": "#cypress-single",
"singleBasicSelect": "#basic-select-single",
"singleClearable": "#cypress-single-clearable",
"singleClearableSelect": "#clearable-select-single",
"singleGroupedSelect": "#grouped-options-single",
"checkboxDisable": ".disable-checkbox",
"checkboxEscapeClearsValue": ".escape-clears-value-checkbox",
"groupHeading": ".react-select__group-heading",
"indicatorClear": ".react-select__clear-indicator",
"indicatorDropdown": ".react-select__dropdown-indicator",
"menu": ".react-select__menu",
"menuOption": ".react-select__option",
"noOptionsValue": ".react-select__menu-notice--no-options",
"placeholder": ".react-select__placeholder",
"singleValue": ".react-select__single-value",
"menuSingle": "#basic-select-single .react-select__menu",
"singleSelectSingleInput": "#react-select-basic-select-single-input",
"toggleMenuSingle": "#basic-select-single .react-select__dropdown-indicator",
"firstMultiValueRemove": "#multi-select .react-select__multi-value__remove:first",
"menuMulti": "#multi-select .react-select__menu",
"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"
} JedWatson-react-select-ef64425/cypress/integration/ 0000775 0000000 0000000 00000000000 13777574213 0022355 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/cypress/integration/multi-select.spec.js 0000664 0000000 0000000 00000006013 13777574213 0026253 0 ustar 00root root 0000000 0000000 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' },
];
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();
});
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');
});
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 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');
});
});
}
});
JedWatson-react-select-ef64425/cypress/integration/single-select.spec.js 0000664 0000000 0000000 00000022467 13777574213 0026415 0 ustar 00root root 0000000 0000000 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' },
];
describe('Single Select', () => {
before(() => {
cy.visit(baseUrl);
cy.title().should('equal', 'React-Select');
cy.get('h1').should('contain', 'Test Page for Cypress');
});
for (let config of setup) {
const { viewport } = config;
context(`Basic in view: ${viewport}`, () => {
before(() => {
cy.viewport(viewport);
});
beforeEach(() => {
cy.reload();
});
// TODO:
// This test seems to fail when cypress tab is focused.
// Also, manual testing does not confirm the desired behavior.
it.skip(`Should not display the options menu when touched and dragged in view: ${viewport}`, () => {
cy.get(selector.toggleMenuSingle)
.click()
.click()
.get(selector.menuSingle)
.should('not.be.visible')
// to be sure it says focus and the menu is closed
.get(selector.singleSelectSingleInput)
.trigger('mousedown')
.get(selector.menuSingle)
.should('not.be.visible');
});
it(`Should display a default value in view: ${viewport}`, () => {
cy.get(selector.singleBasicSelect)
.find(selector.singleValue)
.should('contain', 'Ocean');
});
it(`Should expand the menu when expand icon is clicked in view: ${viewport}`, () => {
cy
// Menu is not yet open
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('not.exist')
// A dropdown icon is shown
.get(selector.singleBasicSelect)
.find(selector.indicatorDropdown)
.should('be.visible')
// Click the icon to open the menu
.click()
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('exist')
.should('be.visible')
.contains('Green');
});
it(`Should close the menu after selecting an option in view: ${viewport}`, () => {
cy.get(selector.singleBasicSelect)
.find(selector.indicatorDropdown)
.click()
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('contain', 'Green')
.contains('Green')
.click()
// Value has updated
.get(selector.singleBasicSelect)
.find(selector.singleValue)
.should('contain', 'Green')
// Menu has closed
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('not.exist');
});
it(`Should be disabled once disabled is checked in view: ${viewport}`, () => {
cy
// Does not start out disabled
.get(selector.singleBasicSelect)
// .click()
.find('input')
.should('exist')
.should('not.be.disabled')
// Disable the select component
.get(selector.singleBasic)
.find(selector.checkboxDisable)
.click()
// Now the input should be disabled
.get(selector.singleBasicSelect)
.click({ force: true })
.find('input')
.should('exist')
.should('be.disabled');
});
it(`Should filter options when searching in view: ${viewport}`, () => {
cy.get(selector.singleBasicSelect)
.click()
.find('input')
.type('For', { force: true })
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('contain', 'Forest')
.find(selector.menuOption)
.should('have.length', 1);
});
it(`Should show "No options" if searched value is not found in view: ${viewport}`, () => {
cy.get(selector.singleBasicSelect)
.click()
.find('input')
.type('/', { force: true })
.get(selector.noOptionsValue)
.should('contain', 'No options');
});
it(`Should not clear the value when backspace is pressed in view: ${viewport}`, () => {
cy.get(selector.singleBasicSelect)
.click()
.find('input')
.type('{backspace}', { force: true })
.get(selector.singleBasicSelect)
.find(selector.placeholder)
.should('not.be.visible');
});
});
context(`Grouped in view: ${viewport}`, () => {
before(() => {
cy.viewport(viewport);
});
beforeEach(() => {
cy.reload();
});
it(`Should display a default value in view: ${viewport}`, () => {
cy.get(selector.singleGroupedSelect)
.find(selector.singleValue)
.should('contain', 'Blue');
});
it(`Should display group headings in the menu in view: ${viewport}`, () => {
cy.get(selector.singleGroupedSelect)
.find(selector.indicatorDropdown)
.click()
.get(selector.singleGroupedSelect)
.find(selector.menu)
.should('be.visible')
.find(selector.groupHeading)
.should('have.length', 2);
});
});
context(`Clearable in view: ${viewport}`, () => {
before(() => {
cy.viewport(viewport);
});
beforeEach(() => {
cy.reload();
});
it(`Should display a default value in view: ${viewport}`, () => {
cy.get(selector.singleClearableSelect)
.find(selector.singleValue)
.should('contain', 'Blue');
});
it(`Should display a clear indicator in view: ${viewport}`, () => {
cy.get(selector.singleClearableSelect)
.find(selector.indicatorClear)
.should('be.visible');
});
it(`Should clear the default value when clear is clicked in view: ${viewport}`, () => {
cy.get(selector.singleClearableSelect)
.find(selector.indicatorClear)
.click()
.get(selector.singleClearableSelect)
.find(selector.placeholder)
.should('be.visible')
.should('contain', 'Select...');
});
// 'backspaceRemovesValue' is true by default
it(`Should clear the value when backspace is pressed in view: ${viewport}`, () => {
cy.get(selector.singleClearableSelect)
.click()
.find('input')
.type('{backspace}', { force: true })
.get(selector.singleClearableSelect)
.find(selector.placeholder)
.should('be.visible')
.should('contain', 'Select...');
});
// 'backspaceRemovesValue' is true by default, and delete is included
it(`Should clear the value when delete is pressed in view: ${viewport}`, () => {
cy.get(selector.singleClearableSelect)
.click()
.find('input')
.type('{del}', { force: true })
.get(selector.singleClearableSelect)
.find(selector.placeholder)
.should('be.visible')
.should('contain', 'Select...');
});
it(`Should not open the menu when a value is cleared with backspace in view: ${viewport}`, () => {
cy.get(selector.singleClearableSelect)
.click()
.find('input')
// Close the menu, but leave focused
.type('{esc}', { force: true })
.get(selector.singleClearableSelect)
.find(selector.menu)
.should('not.be.visible')
// Clear the value, verify menu doesn't pop
.get(selector.singleClearableSelect)
.find('input')
.type('{backspace}', { force: true })
.get(selector.singleClearableSelect)
.find(selector.menu)
.should('not.be.visible');
});
it(`Should clear the value when escape is pressed if escapeClearsValue and menu is closed in view: ${viewport}`, () => {
cy
// nothing happens if escapeClearsValue is false
.get(selector.singleClearableSelect)
.click()
.find('input')
// Escape once to close the menu
.type('{esc}', { force: true })
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('not.be.visible')
// Escape again to verify value is not cleared
.get(selector.singleClearableSelect)
.find('input')
.type('{esc}', { force: true })
.get(selector.singleClearableSelect)
.find(selector.placeholder)
.should('not.be.visible')
// Enable escapeClearsValue and try again, it should clear the value
.get(selector.singleClearable)
.find(selector.checkboxEscapeClearsValue)
.click()
.get(selector.singleClearableSelect)
.click()
.find('input')
// Escape once to close the menu
.type('{esc}', { force: true })
.get(selector.singleBasicSelect)
.find(selector.menu)
.should('not.be.visible')
// Escape again to clear value
.get(selector.singleClearableSelect)
.find('input')
.type('{esc}', { force: true })
.get(selector.singleClearableSelect)
.find(selector.placeholder)
.should('be.visible');
});
});
}
});
JedWatson-react-select-ef64425/docs/ 0000775 0000000 0000000 00000000000 13777574213 0017272 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/docs/App/ 0000775 0000000 0000000 00000000000 13777574213 0020012 5 ustar 00root root 0000000 0000000 JedWatson-react-select-ef64425/docs/App/API.js 0000664 0000000 0000000 00000000606 13777574213 0020763 0 ustar 00root root 0000000 0000000 // @flow
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import type { RouterProps } from '../types';
import routes from './routes';
const API = ({ match }: RouterProps) => {
const { path, Component } = routes[match.params.section];
return (
);
};
export default API;
JedWatson-react-select-ef64425/docs/App/Footer.js 0000664 0000000 0000000 00000002615 13777574213 0021612 0 ustar 00root root 0000000 0000000 // @flow
/** @jsx jsx */
import { type Node } from 'react';
import { jsx } from '@emotion/core';
// const smallDevice = '@media (max-width: 769px)';
const largeDevice = '@media (min-width: 770px)';
const Wrapper = props => (
);
const Container = props => (
);
const A = props => (
);
export default function Footer(): Node {
return (